统一样式-图层组件按钮添加

chenyabin

2021-04-07 7845b8946aa2e58f053b09cef897e6c58df60e8a

 src/components/table/summarySheets.vue

@@ -1,11 +1,14 @@
<template>
    <div class="summary-sheets">
            <div>
              <i class="el-icon-c-scale-to-original" @click="closeBtn"></i>
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="统计表" placement="left">
            <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn">
                <img src="@assets/images/map-pages/icon/toolbox/table.png" alt="" class="icon">
                <!--<span class="icon-name">统计表</span>-->
            </div>
            <Dialog ref="summarySheets" title="企业指标分类统计">
              <tab-handover></tab-handover>
            </Dialog >
        </el-tooltip>
        <Dialog ref="summarySheets" title="企业指标分类统计">
          <tab-handover></tab-handover>
        </Dialog >
    </div>
</template>

@@ -18,13 +21,26 @@
    tabHandover,
    Dialog
  },

  data () {
    return {
      summaryVisible: false
    }
  },
  methods: {
    closeBtn () {
      // const summary = document.getElementById('summary')
      // summary.style.display = 'none'
      this.$refs.summarySheets.show()
      this.summaryVisible = true
    }
  },
  mounted () {
    const that = this
    this.$nextTick(() => {
      this.$refs.summarySheets.$on('closeDialog', () => {
        that.summaryVisible = false
      })
    })
  }
}
</script>
@@ -32,13 +48,12 @@
<style scoped lang="less">
    .summary-sheets {
        position: absolute;
        top: 30px;
        left: 500px;
        top: 0.42979rem;
        left: 0.14583rem;
        /*width: 850px;*/
        /*height: 265px;*/
        border: #90c8e0 1px solid;
        z-index:2000;
        background-color: rgba(26, 73, 81, 0.901960784313726);
        z-index:500;

        /*color: #fff;*/
       .el-icon-c-scale-to-original {
         width: 30px;