css弹框UI优化

XingChuan

2021-05-30 d4a64e11c43a8268d48fbb6d710d3ba379a31359

css弹框UI优化

 src/components/base-page/WasteWater/WasteWaterDayChart.vue

@@ -364,7 +364,6 @@
    effChartShow (legend, xdata, ydatas, yname, jcdID, datatype) {
      this.chart = this.$echarts.init(this.$refs.echartsDay)
      this.chart.clear()
      // console.log(this.chart)
      this.chart.clear()
      let dataUnit = ''
      if (datatype === 1) {

 src/components/base-page/WasteWater/WasteWaterHoursChart.vue

@@ -182,7 +182,6 @@
      if (result.length > 0) {
        this.dataStandard = []
        this.tableData = this.analysisResult(result) // 小时明细表解析结果
        console.log(this.tableData)
        const d = result
        const nameList = [] // 存放图例
        const dateList = [] // 存放时间

 src/components/base-page/WasteWater/WasteWaterIndex.vue

@@ -84,26 +84,26 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  padding-left: 0.07rem;
  border-bottom: 1px #243a55 solid;

  .navigation-left {
    display: flex;
    align-items: center;

    .uncheck {
      margin: 0 10px;
      cursor: pointer;
      padding: 5px;
      margin-left: -0.05rem;
      width: .8rem;
      padding: 6px 0;
      /*border: 1px solid #2b87c8;*/
      /*border-radius: 4px;*/
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("../../../../public/assets/images/map-pages/title_bg.png");
      text-align: center;
      vertical-align: middle !important;
      color: #fff;
      -webkit-transform: skew(30deg);
      -moz-transform: skew(30deg);
      -o-transform: skew(30deg);
      transform: skew(15deg);
    }

    .default-uncheck {
@@ -113,14 +113,13 @@
    }

    .hover {
      background-color: #0e539e;
      background-image: url("../../../../public/assets/images/map-pages/title_bg2.png");
      color: #ffffff;
      cursor: pointer;
    }

    .hover:hover {
      cursor: pointer;
      padding: 5px;
      border-radius: 4px;
      text-align: center;
      color: #F0FFFF;
@@ -128,7 +127,6 @@
  }

  .navigation-left :hover {
    background-color: #0e639e;
    color: #fff;
    cursor: pointer;
  }

 src/views/popup/DynamicHeader/DynamicTable.vue

New file
@@ -0,0 +1,43 @@
<template>
  <el-table :data="tableData" border :height="height">
    <template v-for="item in tableHeader">
      <table-column v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></table-column>
      <el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" align="center"></el-table-column>
    </template>
  </el-table>
</template>

<script>
import TableColumn from './TableColumn'
export default {
  props: {
    // 表格的数据
    tableData: {
      type: Array,
      required: true
    },
    // 多级表头的数据
    tableHeader: {
      type: Array,
      required: true
    },
    // 表格的高度
    height: {
      type: String,
      default: '340'
    }
  },
  components: {
    TableColumn
  },
  watch: {
    tableData (val, oldVal) {
      this.tableData = val
    }
  }
}
</script>

<style scoped>

</style>

 src/views/popup/DynamicHeader/TableColumn.vue

New file
@@ -0,0 +1,24 @@
<template>
  <el-table-column :label="coloumnHeader.label" :prop="coloumnHeader.label" align="center">
    <template v-for="item in coloumnHeader.children">
      <tableColumn v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></tableColumn>
      <el-table-column v-else :key="item.name" :label="item.label" :prop="item.prop" align="center"></el-table-column>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: 'tableColumn',
  props: {
    coloumnHeader: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>

</style>