qp_onemap_ui/src/views/Sksjglyl.vue

<template>
  <div class="container">
    <div id="header">
      <div class="logo">
        <img
          src="/static/images/logo.png"
          style="width: 24px; height: 24px; vertical-align: middle"
          alt=""
        />
        青浦区“一张图”区级节点
      </div>
    </div>
    <div style="z-index: 999;right: 20px; position: absolute;line-height: 44px;">
      <span v-for="item in funcList" :key="item.label" :class="{'tab-item_active': item.type == activeName , 'tab-item': item.type != activeName}"  @click="handleClick(item)">{{item.label}}</span>
      <!-- <el-tabs
        v-model="activeName"
        type="border-card"
        class="demo-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane v-for="item in funcList" :key="item.label" :label="item.label" :name="item.label">
        </el-tab-pane>
      </el-tabs> -->
    </div>
    <div style="height: 44px;"></div>

    <!-- 复用的iframe：根据激活标签动态改src -->
    <div class="win-iframe-container">
      <iframe
        :src="iframeSrc"
        width="100%"
        height="100%"
        frameborder="0"
        allowfullscreen
      ></iframe>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "",
      funcList: systemConfig.sksjgl.list,
      nowFuncContent: [],
      iframeSrc: "",
    };
  },
  mounted() {
    this.dmsDataProxy = systemConfig.dmsDataProxy;
    this.activeName = this.$route.query.activePanel ? this.$route.query.activePanel : "";
    this.changePanel(this.activeName);
  },
  methods: {
    changePanel(active) {
      console.log("========"+active);
      this.activeName = parseInt(active);
      this.nowFuncContent = this.funcList[this.activeName - 1];
      this.iframeSrc = this.nowFuncContent.url;
    },
    handleClick(tab) {
      console.log("========"+tab);
      this.iframeSrc = this.funcList.find(item => item.label == tab.label).url;
      this.activeName = tab.type;
    },
    handleClick2(tab, event) {
      let label = tab.props.label;
      this.iframeSrc = this.funcList.find(item => item.label == label).url;
    }
  },
};
</script>
<style>
   .el-tabs--border-card>.el-tabs__content {
      padding: 0;
      display: none;
   }
</style>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}
.win-iframe {
  width: 100%;
  height: 100%;
}
.win-iframe-container {
  width: 100%;
  height: 100%;
}
.tab-item {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
  color: #ffffff;
  &:hover {
    color: #409eff;
  }
}
.tab-item_active {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
  color: #409eff;
}

#header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* 边框厚度 */
  background-image: linear-gradient(to right, #071b3c, #71a5d4, #071b3c);
}
#header {
  width: 100vw;
  height: 44px;
  background: linear-gradient(180deg, #2c2f74, #494d98);
  color: #ffffff;
  margin: 0 auto;
  position: absolute;
  background: #002153;
  z-index: 999;
  .logo {
    display: inline-block;
    height: 44px;
    // width: 200px;
    // padding: 0 20px;
    padding: 0 20px 0px 20px;
    text-align: center;
    line-height: 44px;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>