弹框table样式修改

chenzeping

2021-04-09 4cfe2cc6b6d4e418c0d8665fa94a140756dcd537

弹框table样式修改

 src/assets/css/map/map-panel-style.less

@@ -364,6 +364,13 @@
.el-table tbody tr:hover>td {
  background-color:#28304d !important;
}
//修改表格高度
.el-table td {
  padding: 0!important;
  height: 30px;
  line-height: 30px;
  font-size: 0.01rem !important;
}
/***********************************************动画效果************/
.transition{
  transition: all .5s;

 src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue

@@ -1,5 +1,5 @@
<template>
  <div style="width:100%;height:2rem;" ref="echarts"></div>
  <div style="width:100%;height:2rem;margin-top: 0.3rem" ref="echarts"></div>
</template>

<script>
@@ -13,25 +13,18 @@
  data () {
    return {
      myChart: [],
      dataDate: [],
      result: [],
      days: dayjs(new Date()).format('YYYYMMDDHHmmss'),
      value: '',
      seriesData: [],
      aseries: '',
      result: [],
      days: dayjs(new Date()).format('YYYYMMDDHHmmss')
      aseries: ''
    }
  },
  methods: {
    drawChart (result) {
      // const result = this.result
    drawChart () {
      this.myChart = this.$echarts.init(this.$refs.echarts)

      // setInterval(function () {
      // }, 3000)
      const option = {
        title: {
          text: '折线图堆叠'
        },
        tooltip: {
          trigger: 'axis'
        },
@@ -39,7 +32,7 @@
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          containLabel: true
          containLabel: false
        },
        toolbox: {
          feature: {
@@ -51,17 +44,22 @@
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // data: seriesData,
          splitLine: {
            show: false
          },
          // data: this.seriesData,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
              // width: 1
              show: false
            }
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
@@ -71,10 +69,11 @@
        },
        series: [
          {
            name: '邮件营销',
            name: '模拟数据',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
            // showSymbol: false,
            // hoverAnimation: false,
            data: this.seriesData
          },
          {
            name: '联盟广告',
@@ -114,6 +113,23 @@
      }
      const result = await mapApi.DataItems(data)
      this.result = result.data
      for (let i = 0; i < result.length; i++) {
        //   // console.log(result[i])

        // const seriesData = []
        const aseries = []
        // let nameData = ''

        this.seriesData.push(result[i].ReadTime)
        aseries.push(result[i].TagValue)
        // nameData = result[i].UnionTagCode
        this.aseries = result[i].UnionTagCode
      }
      this.myChart.setOption({
        series: [{
          data: this.seriesData
        }]
      })
    },
    // 数据的请求
    requestEcharts () {
@@ -130,18 +146,18 @@
        for (let i = 0; i < result.length; i++) {
          //   // console.log(result[i])

          const seriesData = []
          // const seriesData = []
          const aseries = []
          // let nameData = ''

          seriesData.push(result[i].ReadTime)
          this.seriesData.push(result[i].ReadTime)
          aseries.push(result[i].TagValue)
          // nameData = result[i].UnionTagCode
          this.aseries = result[i].UnionTagCode
        }
        this.myChart.setOption({
          series: [{
            data: data
            data: this.seriesData
          }]
        })
      }, 3000)
@@ -151,6 +167,7 @@
    this.$nextTick(() => {
      this.requestEcharts()
      this.drawChart()
      this.echartsData()
    })
  }
}

 src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue

@@ -7,8 +7,7 @@
    <div class="border_corner border_corner_right_bottom"></div>
    <div class="main">
      <div class="main-table">
        <el-table :data="listData" style="width: 100%" stripe='stripe'
                  tooltip-effect="dark" :row-class-name="tableRowClassName">
        <el-table :data="listData" style="width: 100%" height="200px" :row-class-name="tableRowClassName">
          <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
                           :label="item.label"></el-table-column>
        </el-table>
@@ -84,8 +83,6 @@
.win {
  position: relative;
  background-color: rgba(33, 41, 69, 0.9);
  //width: 6rem;
  height: 1.5rem;
}

.main {

 src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue

@@ -87,7 +87,7 @@
  .main-matter {
    font-size: 13px;
    font-weight: normal;
    padding: 0px 6px;
    padding: 0 6px;
    border: 1px solid #396d83;

    .row-item-one {
@@ -128,7 +128,7 @@
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      line-height: 35px;
      line-height: 30px;

      li {
        text-align: center;

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -38,7 +38,7 @@
export default {
  name: 'PublicBounced',
  components: {
    // Echarts
    // Echarts,
    PublicTabs,
    PublicTable,
    PublicChart,
@@ -99,6 +99,7 @@
.public-bounced {
  z-index: 999;
  position: absolute;
  //width: 6rem;
  top: 15%;
  left: 20%;
  background-color: #002432;