修改hover框背景色

src/components/numerical.vue

@@ -1,248 +1,314 @@
 <!--
- * @LastEditors: gcz
+ * @LastEditors: wangcc
 -->
 <template>
-    <div class="numerical" ref="numericalRef">
-        <div class="ntitle">{{$store.state.addr.selectAddr}}{{ntitle}}</div>
-        <!-- <div class="ntitle">
+  <div class="numerical" ref="numericalRef">
+    <div class="ntitle">{{$store.state.addr.selectAddr}}{{ntitle}}</div>
+    <!-- <div class="ntitle">
             <span v-if="$store.state.addr.mapLevel=='province'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
             <span v-if="$store.state.addr.mapLevel=='city'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
             <span v-if="$store.state.addr.mapLevel=='district'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
             <span v-if="$store.state.addr.mapLevel=='street'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
-        </div> -->
-        <!-- <div class="addr">{{$store.state.addr.selectAddr}}</div> -->
-        <div class="item-wrap">
-            <div class="inner u-flex u-flex-wrap">
-                <div class="numerical-item" v-for="(item,index) in data" @mouseenter="showDetails(item)"  @mouseleave="unShowDetails" :key="item.name+index">
-                    <div class="cell name">{{item.name}}</div>
-                    <span class="cell number">{{item.number}}</span>
-                    <span class="cell unit">{{item.unit}}</span>
-                </div>
-            </div>
-        </div>
-        <div class="detail-wrap"  @mouseenter="isShowDetails=true" @mouseleave="isShowDetails=false" v-show="isShowDetails" ref="detailRef">
-            <el-table :key="hotKey" :data="detailsData" style="width: 100%;overflow-y: auto;" :height="pageName=='economics'?425:null" >
-
-                <el-table-column :label="item.title" :prop="item.value"  v-for="(item, index) in headerList" :key="index" align="center">
-                    <template slot-scope="scope">
-                        {{scope.row[item.value]||'-'}}
-                    </template>
-                </el-table-column>
-
-            </el-table>
+    </div>-->
+    <!-- <div class="addr">{{$store.state.addr.selectAddr}}</div> -->
+    <div class="item-wrap">
+      <div class="inner u-flex u-flex-wrap">
+        <div
+          class="numerical-item"
+          v-for="(item,index) in data"
+          @mouseenter="showDetails(item)"
+          @mouseleave="unShowDetails"
+          :key="item.name+index"
+        >
+          <div class="cell name">{{item.name}}</div>
+          <span class="cell number">{{item.number}}</span>
+          <span class="cell unit">{{item.unit}}</span>
         </div>
+      </div>
     </div>
+    <div
+      class="detail-wrap"
+      @mouseenter="isShowDetails=true"
+      @mouseleave="isShowDetails=false"
+      v-show="isShowDetails"
+      ref="detailRef"
+    >
+      <el-table
+        :key="hotKey"
+        :data="detailsData"
+        style="width: 100%;overflow-y: auto;"
+        height="240"
+      >
+        <el-table-column
+          :label="item.title"
+          :prop="item.value"
+          v-for="(item, index) in headerList"
+          :key="index"
+          align="center"
+        >
+          <template slot-scope="scope">{{scope.row[item.value]||'-'}}</template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
 </template>
 
 <script>
-    import { forestFarmDetail,treeListDetail,baseItemDetail } from '@/service/index';
-    export default {
-        name: '',
-        props:{
-            data:{
-                type: Array,
-                default: null,
-            },
-            ntitle:{
-                type: String,
-                default: '数据概况',
-            },
-            pageName:{
-                type: String,
-                default: '',
-            },
-        },
-        components: {},
-        data () {
-            return {
-                isShowDetails:false,
-                headerList:[],
-                detailsData:[],
-                hotKey: Date.now(),
-                
-            };
-        },
-        created(){
-            // console.log('data',this.data);
-        },
-        mounted(){
-            document.addEventListener('click',this.outClick)
-        },
-        destroyed(){
-            document.removeEventListener('click',this.outClick)
-        },
-        methods: {
-            showDetails(item){
-                // console.log('pageName',this.pageName);
-
-                //排除触发字段
-                let excludeArr = ['优势树种']
-                if(excludeArr.includes(item.name)){
-                    this.isShowDetails = false;
-                    return
-                }
-                let page = {
-                forest: this.getForestData,
-                treeSpecies: this.getTreeSpeciesData,
-                economics:  this.getEconomicsData
-                };
-                page[this.pageName] && page[this.pageName]();
-            },
-            unShowDetails(){
-                this.isShowDetails = false;
+import {
+  forestFarmDetail,
+  treeListDetail,
+  baseItemDetail
+} from '@/service/index';
+export default {
+  name: '',
+  props: {
+    data: {
+      type: Array,
+      default: null
+    },
+    ntitle: {
+      type: String,
+      default: '数据概况'
+    },
+    pageName: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {},
+  data() {
+    return {
+      isShowDetails: false,
+      headerList: [],
+      detailsData: [],
+      hotKey: Date.now()
+    };
+  },
+  created() {
+    // console.log('data',this.data);
+  },
+  mounted() {
+    document.addEventListener('click', this.outClick);
+  },
+  destroyed() {
+    document.removeEventListener('click', this.outClick);
+  },
+  methods: {
+    showDetails(item) {
+      // console.log('pageName',this.pageName);
 
-            },
-            getForestData(){
-                this.isShowDetails = true;
-                forestFarmDetail().then(res=>{
-                    let resData = res.rows;
-                    this.detailsData = resData;
-                    // console.log('forestFarmDetail res',this.detailsData);
+      //排除触发字段
+      let excludeArr = ['优势树种'];
+      if (excludeArr.includes(item.name)) {
+        this.isShowDetails = false;
+        return;
+      }
+      let page = {
+        forest: this.getForestData,
+        treeSpecies: this.getTreeSpeciesData,
+        economics: this.getEconomicsData
+      };
+      page[this.pageName] && page[this.pageName]();
+    },
+    unShowDetails() {
+      this.isShowDetails = false;
+    },
+    getForestData() {
+      this.isShowDetails = true;
+      forestFarmDetail()
+        .then((res) => {
+          let resData = res.rows;
+          this.detailsData = resData;
+          // console.log('forestFarmDetail res',this.detailsData);
 
-                    this.getHeaderList(resData);
+          this.getHeaderList(resData);
+        })
+        .catch((err) => {
+          console.log('forestFarmDetail err', err);
+        });
+    },
+    getTreeSpeciesData() {
+      this.isShowDetails = true;
+      treeListDetail()
+        .then((res) => {
+          let resData = res.data;
+          this.detailsData = resData;
+          // console.log('treeListDetail res',this.detailsData);
+          this.getHeaderList(resData);
+        })
+        .catch((err) => {
+          console.log('treeListDetail err', err);
+        });
+    },
+    getEconomicsData() {
+      this.isShowDetails = true;
+      baseItemDetail()
+        .then((res) => {
+          let resData = res.rows;
+          this.detailsData = resData;
+          console.log('baseItemDetail res', this.detailsData);
+          this.getHeaderList(resData);
+        })
+        .catch((err) => {
+          console.log('baseItemDetail err', err);
+        });
+    },
+    getHeaderList(data) {
+      let data1 = Object.keys(data[0]).map((key) => {
+        console.log('pageName', this.pageName);
+        let titles = {};
+        if (this.pageName == 'forest') {
+          titles = {
+            forestName: '林场名称',
+            smallClassStock: '蓄积量(m³)',
+            landArea: '占地面积(亩)',
+            smallClassCount: '小班数量'
+          };
+        } else if (this.pageName == 'treeSpecies') {
+          titles = {
+            treeName: '树种名称',
+            treeStock: '树种蓄积(m³)',
+            treeCount: '树种株数(株)'
+          };
+        } else if (this.pageName == 'economics') {
+          titles = {
+            baseName: '基地名称',
+            baseNumber: '基地数量',
+            baseArea: '基地面积(亩)',
+            corpNumber: '作物数量',
+            corpName: '作物名称',
+            outputValue: '预估产值(万元)'
+          };
+        }
 
-                }).catch((err) => {
-                    console.log('forestFarmDetail err', err);
-                });
-            },
-            getTreeSpeciesData(){
-                this.isShowDetails = true;
-                treeListDetail().then(res=>{
-                    let resData = res.data;
-                    this.detailsData = resData;
-                    // console.log('treeListDetail res',this.detailsData);
-                    this.getHeaderList(resData);
+        return { title: titles[key], value: key };
+      });
 
-                }).catch((err) => {
-                    console.log('treeListDetail err', err);
-                });
-            },
-            getEconomicsData(){
-                this.isShowDetails = true;
-                baseItemDetail().then(res=>{
-                    let resData = res.rows;
-                    this.detailsData = resData;
-                    console.log('baseItemDetail res',this.detailsData);
-                    this.getHeaderList(resData);
+      let newData = JSON.parse(JSON.stringify(data1));
 
-                }).catch((err) => {
-                    console.log('baseItemDetail err', err);
-                });
-            },
-            getHeaderList(data){
-                let data1 = Object.keys(data[0]).map((key) => {
-                    console.log('pageName',this.pageName);
-                    let titles={};
-                    if(this.pageName=='forest'){
-                        titles={forestName:'林场名称',smallClassStock:'蓄积量(m³)',landArea:'占地面积(亩)',smallClassCount:'小班数量'};
-                    }else if(this.pageName=='treeSpecies'){
-                        titles={treeName:'树种名称',treeStock:'树种蓄积(m³)',treeCount:'树种株数(株)'};
-                    }else if(this.pageName=='economics'){
-                        titles={
-                            baseName:'基地名称',
-                            baseNumber:'基地数量',
-                            baseArea:'基地面积(亩)',
-                            corpNumber:'作物数量',
-                            corpName:'作物名称',
-                            outputValue:'预估产值(万元)',
-                        };
-                    }
-                    
-                    return { title: titles[key] ,value:key};
-                });
+      if (this.pageName == 'economics') {
+        newData.splice(1, 1); //删除基地数量
+        newData.splice(2, 1); //删除作物数量
+      }
 
-                let newData = JSON.parse(JSON.stringify(data1));
-                
-                if(this.pageName=='economics'){
-                    newData.splice(1,1);//删除基地数量
-                    newData.splice(2,1);//删除作物数量
-                }
-                
-                this.headerList = newData;
-                // console.log('this.headerList',this.headerList);
-                this.hotKey = Date.now()
-            },
-            outClick(e){
-                let detailRef=this.$refs.numericalRef
-                if(!detailRef.contains(e.target)&&this.isShowDetails){
-                    this.isShowDetails=false
-                }
-            }
-        },
+      this.headerList = newData;
+      // console.log('this.headerList',this.headerList);
+      this.hotKey = Date.now();
+    },
+    outClick(e) {
+      let detailRef = this.$refs.numericalRef;
+      if (!detailRef.contains(e.target) && this.isShowDetails) {
+        this.isShowDetails = false;
+      }
     }
+  }
+};
 </script>
 
 <style lang='scss' scoped>
 // @import url('https://fonts.font.im/css?family=Rubik');
-.numerical{
-    // box-sizing: border-box;
-    // margin-bottom: 2vh;
-    // border-radius: 10px;
-    // padding: 20px 24px;
-    // border: 1px solid var(--main-color);
-    .item-wrap{
-        height: calc( 100% - 48px );
-        display:flex;
-        align-items: center;
-        .inner{
-            width: 100%;
-        }
-        .numerical-item{
-            padding: 0 15px 15px 15px;
-            box-sizing: border-box;
-            width: 50%;
-            text-align: center;
-            .name{
-                font-size: 18px;
-                color: #a6b7bf;
-                margin-bottom: 5px;
-            }
-            .number{
-                color: var(--main-color);
-                font-size: 35px;
-                margin-right: 5px;
-                font-family: 'Rubik', sans-serif;
-            }
-            .unit{
-                font-size: 17px;
-                color: var(--main-color);
-            }
-        }
+.numerical {
+  // box-sizing: border-box;
+  // margin-bottom: 2vh;
+  // border-radius: 10px;
+  // padding: 20px 24px;
+  // border: 1px solid var(--main-color);
+  .item-wrap {
+    height: calc(100% - 48px);
+    display: flex;
+    align-items: center;
+    .inner {
+      width: 100%;
+    }
+    .numerical-item {
+      padding: 0 15px 15px 15px;
+      box-sizing: border-box;
+      width: 50%;
+      text-align: center;
+      .name {
+        font-size: 18px;
+        color: #a6b7bf;
+        margin-bottom: 5px;
+      }
+      .number {
+        color: var(--main-color);
+        font-size: 35px;
+        margin-right: 5px;
+        font-family: 'Rubik', sans-serif;
+      }
+      .unit {
+        font-size: 17px;
+        color: var(--main-color);
+      }
+    }
+  }
+  .detail-wrap {
+    position: absolute;
+    top: 0;
+    right: -115%;
+    z-index: 99;
+    width: 115%;
+    overflow: hidden;
+    border-radius: 10px;
+    // border: 1px solid rgb(2, 238, 255);
+    ::-webkit-scrollbar {
+      width: 0.3rem;
+      height: 0.625rem;
+      background: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: rgba($color: rgba(4, 175, 206, 0.884), $alpha: 0.6);
+      border-radius: 2em;
+    }
+    /deep/ .el-table{
+        background: url('../assets/img/hoverbac.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+    }
+   /deep/ .el-table th {
+      background-color: transparent !important;
+      color: #fff;
     }
-    .detail-wrap{
-        position: absolute;
-        top: 0;
-        right: -115%;
-        z-index: 99;
-        width: 115%;
-        overflow: hidden;
-        border-radius: 10px;
-        border: 1px solid rgb(2, 238, 255);
-        ::-webkit-scrollbar {width: .5rem;height: .625rem;background: #ddd;}
-        ::-webkit-scrollbar-thumb {background-color: #333;border-radius: 2em;}
 
+    /deep/ .el-table tr {
+      background-color: transparent !important;
+      color: #fff;
+    }
+    /deep/ .el-table--enable-row-transition .el-table__body td,
+    .el-table .cell {
+      background-color: transparent;
+    }
+    /deep/ .el-table::before {
+      //去除底部白线
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 0px;
     }
+    /deep/ .el-table td.el-table__cell, /deep/ .el-table th.el-table__cell.is-leaf{
+        border-bottom:none;
+    }
+  }
+   
 }
 
-@media only screen and (max-width : 1280px) {
+@media only screen and (max-width: 1280px) {
   //概况
-    .numerical{
-
-        .item-wrap{
-            .numerical-item{
-                padding: 0 0 15px 5px;
-                .name{
-                    font-size: 16px;
-                }
-                .number{
-                    font-size: 24px;
-                }
-                .unit{
-                    font-size: 16px;
-                }
-            }
+  .numerical {
+    .item-wrap {
+      .numerical-item {
+        padding: 0 0 15px 5px;
+        .name {
+          font-size: 16px;
+        }
+        .number {
+          font-size: 24px;
         }
+        .unit {
+          font-size: 16px;
+        }
+      }
     }
+  }
 }
-
 </style>