admin-fiveFollowing/src/views/powerQuality/realTimeMonitoring/index.vue

<template>
  <div class="app-container assePage" style="padding-top: 0">
    <!-- tab切换 start -->

    <el-tabs 
        v-model="activeName"
        type="card"
      >
        <el-tab-pane label="实时评分" name="first">
          <br>
          <real-score ></real-score>
       
        </el-tab-pane>
        <el-tab-pane label="单回路监测" name="second"  :key='activeName'>
          <br>
           <loop-monitor v-if="key='activeName'" ></loop-monitor >
        </el-tab-pane>
      </el-tabs>
      <br>

    <!-- tab切换 end -->

   
  </div>
</template>

<script>
import loopMonitor from "./loopMonitor";
import realScore from "./realScore";


export default {
  name: "VariableList",
  components: {
    loopMonitor,
    realScore,

  },

  data() {
    return {
      activeName: "first",

      value4: "请选择",
      number: 1,
      measurType: 1,
      select: 1,
      currentPage4: 4,
      showDialog: false,
      tabPosition: "one",
      input: "",
      region: "",
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>




</style>
<style lang="scss">
// tab重置样式
.el-tabs--card > .el-tabs__header .el-tabs__item {
  line-height: 50px;
  height: 50px;
  font-size: 16px;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 2px solid #409eff;
  color: #409eff;
}
.el-tabs--card
.el-tabs__header:hover,
.el-tabs__item:hover
{
  color: #409eff !important;
}
.el-tabs__header {
  margin-bottom: 0;
}
.el-tabs--card > .el-tabs__header .el-tabs__item,
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
</style>