From 86e5ff7028168bf18b5d3846022ebeac09aa4d4f Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期四, 05 九月 2024 17:11:19 +0800
Subject: [PATCH] 1.处理页面表格错位问题   引入activated() 事件

---
 src/views/kanbanManager/cj.vue |  890 +++++++++++++++++++++++++++++-----------------------------
 1 files changed, 445 insertions(+), 445 deletions(-)

diff --git a/src/views/kanbanManager/cj.vue b/src/views/kanbanManager/cj.vue
index 523396f..0b63d80 100644
--- a/src/views/kanbanManager/cj.vue
+++ b/src/views/kanbanManager/cj.vue
@@ -1,445 +1,445 @@
-<template>
-  <div>
-    <div class="kb_dashboard" style="display:flex;flex-direction: column;justify-content: space-between">
-
-      <div class="kb_backgroundCustom" />
-
-      <div class="kb_header">
-        <div class="kb_headTime" style="top: 35px;left:  20px">
-          <span>娴欐睙浼樺厠宸ヨ锤鑲′唤鏈夐檺鍏徃</span>
-        </div>
-
-        <div class="kb_headTime kb_header_text" style="top: 35px;left:  800px">
-          <span>{{ title }}鏁板瓧鍖栫湅鏉�</span>
-        </div>
-
-        <div class="kb_headTime" style="top: 35px;right:  25px">
-          <span>{{ headTime }}</span>
-        </div>
-      </div>
-      <div
-        style=" padding:5px 20px 20px 20px;z-index:2;height: 940px;flex-direction: column;justify-content: space-between;"
-      >
-        <!--        涓婅竟-->
-        <div style="display: flex;justify-content: space-between">
-          <div style="width:100%">
-            <div class="smallTitle">
-              <svg-icon icon-class="cxjg" class="svg_class" />
-              鐢熶骇淇℃伅
-            </div>
-            <div
-              class="lineContent horn"
-              style="height: 450px;display: flex;flex-direction: column;justify-content: space-between"
-            >
-              <el-table
-                ref="tableDataLeftCenterRef"
-                :data="tableDataCenterTop"
-                class="tableData tableDataCell"
-                style="width: 100%;"
-                :header-cell-style="headerCellStyle"
-                :cell-style="cellStyle"
-                height="500"
-              >
-
-                <el-table-column
-                  prop="wo_code"
-                  label="宸ュ崟鍙�"
-                  width="220"
-                />
-                <el-table-column
-                  prop="saleOrderCode"
-                  label="鐢熶骇鍗曞彿"
-                  width="160"
-                />
-                <el-table-column
-                  prop="partcode"
-                  label="浜у搧缂栫爜"
-                  width="160"
-                />
-                <el-table-column
-                  prop="partname"
-                  label="浜у搧鍚嶇О"
-                  width="160"
-                />
-<!--                <el-table-column-->
-<!--                  prop="partspec"-->
-<!--                  label="浜у搧瑙勬牸"-->
-<!--                  width="160"-->
-<!--                >-->
-<!--                  <template slot-scope="{row}">-->
-<!--                    {{ row.partspec ? row.partspec : '/' }}-->
-<!--                  </template>-->
-<!--                </el-table-column>-->
-                <el-table-column
-                  prop="plan_qty"
-                  label="浠诲姟鏁伴噺"
-                  width="120"
-                />
-                <el-table-column
-                  prop="good_qty"
-                  label="鍚堟牸鏁伴噺"
-                  width="120"
-                />
-                <el-table-column
-                  prop="ng_qty"
-                  label="涓嶈壇鏁伴噺"
-                  width="120"
-                />
-                <el-table-column
-                  prop="laborbad_qty"
-                  label="宸ュ簾鏁伴噺"
-                  width="120"
-                />
-                <el-table-column
-                  prop="materielbad_qty"
-                  label="鏂欏簾鏁伴噺"
-                  width="120"
-                />
-                <el-table-column
-                  prop="seq"
-                  label="宸ュ簭椤哄簭"
-                  width="120"
-                />
-                <el-table-column
-                  prop="step_code"
-                  label="宸ュ簭缂栫爜"
-                  width="120"
-                />
-                <el-table-column
-                  prop="step_name"
-                  label="宸ュ簭鍚嶇О"
-                  width="120"
-                />
-                <el-table-column
-                  prop="schedule"
-                  label="瀹屾垚杩涘害(%)"
-                  width="213"
-                />
-              </el-table>
-            </div>
-          </div>
-
-        </div>
-        <!--        涓嬭竟-->
-        <div style="display: flex;justify-content: space-between;margin-top: 15px;">
-          <div style="width: 1000px;">
-            <div class="smallTitle">
-              <svg-icon icon-class="blcs" class="svg_class" />
-              璐ㄩ噺涓嶈壇(杩戜竴鍛�)
-            </div>
-            <div class="lineContent horn" style="height: 380px;display: flex;justify-content: space-between">
-              <div id="cjzl03" class="flex_c_c" style="width: 100%;height:100%" />
-
-            </div>
-          </div>
-          <div style="width: 850px;">
-            <div class="smallTitle">
-              <svg-icon icon-class="ckkc" class="svg_class" />
-              涓嶈壇缁熻(杩戜竴鏈�)
-            </div>
-            <div class="lineContent horn" style="height: 380px;display: flex;justify-content: space-between">
-              <div id="cjzl04" class="flex_c_c" style="width: 100%;height:100%" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import './kbCommon.css'
-import { loadEcharts, cjzl04, cjzl03_2 } from '@/utils/myEcharts'
-import {
-  WorkShopProduceBottomLeftData,
-  WorkShopProduceBottomRightData,
-  WorkShopProduceTopData
-} from '@/api/kanbanManager'
-import { PrentOrganizationNoCompany } from '@/api/GeneralBasicData'
-
-export default {
-  name: 'Cjsc',
-  data() {
-    return {
-      headTime: '',
-      tableDataRightTop: [],
-      wkshopArr: [],
-      legendData: [],
-
-      LeftTopData01: [],
-      LeftTopData02: [],
-
-      RightTopData01: [],
-      RightTopData02: [],
-      cjzl03_xData: [],
-      cjzl03_yData: [],
-      RightBottom: [],
-
-      tableDataCenterTop: [],
-
-      wkshopcode: '',
-      title: ''
-
-    }
-  },
-  created() {
-    setInterval(this.getNowTime, 1000)
-
-    // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
-    setInterval(() => {
-      window.location.reload()
-    }, 1000 * 60 * 120)
-  },
-  mounted() {
-    this.getAllApi()
-  },
-  methods: {
-    async getWorkShopProduceTopData() {
-      WorkShopProduceTopData({ wkshopcode: this.wkshopcode.join(',') }).then(res => {
-        this.tableDataCenterTop = res.data
-
-        const divData = this.$refs.tableDataLeftCenterRef.bodyWrapper
-        const timer = setInterval(() => {
-          // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
-          divData.scrollTop += 1
-          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
-            divData.scrollTop = 0
-            WorkShopProduceTopData({ wkshopcode: this.wkshopcode.join(',') }).then(res => {
-              this.tableDataCenterTop = res.data
-
-              if (this.tableDataCenterTop.length > 11) {
-                clearInterval(timer)
-                this.getWorkShopProduceTopData()
-              }
-            })
-          }
-        }, this.tableDataCenterTop.length <= 11 ? 1000 * 30 : 200)
-      })
-    },
-
-    async getAllApi() {
-      const res = await PrentOrganizationNoCompany()
-      this.wkshopArr = res.data
-
-      if (window.location.hash.indexOf('?') !== -1) {
-        const code = window.location.hash.split('?')[1].split('=')[1]
-        this.title = this.wkshopArr.find(i => i.torg_code === code).torg_name
-        this.wkshopcode = [code]
-      }
-
-      this.wkshopcode.forEach(i => {
-        const aa = this.wkshopArr.find(j => j.torg_code === i).torg_name
-        this.legendData.push(aa)
-      })
-
-      const res4 = await WorkShopProduceBottomLeftData({ wkshopcode: this.wkshopcode.join(',') })
-      this.cjzl03_xData = res4.data[this.wkshopcode[0]].map(i => i.click_date)
-      for (const res4Key in res4.data) {
-        if (this.wkshopcode.includes(res4Key)) {
-          const bb = res4.data[res4Key].map(i => i.count)
-          this.cjzl03_yData.push(bb)
-        }
-      }
-      loadEcharts('cjzl03', cjzl03_2(this.cjzl03_xData, this.legendData, this.cjzl03_yData, true))
-      setInterval(() => {
-        WorkShopProduceBottomLeftData({ wkshopcode: this.wkshopcode.join(',') }).then(res4 => {
-          this.cjzl03_yData = []
-
-          this.cjzl03_xData = res4.data[this.wkshopcode[0]].map(i => i.click_date)
-          for (const res4Key in res4.data) {
-            if (this.wkshopcode.includes(res4Key)) {
-              const bb = res4.data[res4Key].map(i => i.count)
-              this.cjzl03_yData.push(bb)
-            }
-          }
-          loadEcharts('cjzl03', cjzl03_2(this.cjzl03_xData, this.legendData, this.cjzl03_yData, true))
-        })
-      }, 1000 * 50)
-
-      const res5 = await WorkShopProduceBottomRightData({ wkshopcode: this.wkshopcode[0] })
-      this.RightBottom = res5.data
-      if (this.RightBottom.length > 0) {
-        loadEcharts('cjzl04', cjzl04(this.RightBottom.map(i => i.name), this.RightBottom.map(i => i.cont)))
-      }
-
-      setInterval(() => {
-        WorkShopProduceBottomRightData({ wkshopcode: this.wkshopcode[0] }).then(res5 => {
-          this.RightBottom = res5.data
-          if (this.RightBottom.length > 0) {
-            loadEcharts('cjzl04', cjzl04(this.RightBottom.map(i => i.name), this.RightBottom.map(i => i.cont)))
-          }
-        })
-      }, 1000 * 60)
-
-      await this.getWorkShopProduceTopData()
-    },
-
-    // 鑾峰彇褰撳墠鏃堕棿
-    getNowTime() {
-      const dt = new Date()
-      const wk = dt.getDay()
-      const y = dt.getFullYear()
-      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
-      const d = (dt.getDate() + '').padStart(2, '0')
-
-      const hh = (dt.getHours() + '').padStart(2, '0')
-      const mm = (dt.getMinutes() + '').padStart(2, '0')
-      const ss = (dt.getSeconds() + '').padStart(2, '0')
-      const weeks = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�']
-      const week = weeks[wk]
-
-      this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`
-    },
-    headerCellStyle() {
-      return {
-        backgroundColor: 'transparent',
-        padding: '10px 0',
-        textAlign: 'center',
-        color: '#07acc2',
-        border: 'none',
-        fontSize: '18px'
-      }
-    },
-    cellStyle() {
-      return {
-        padding: '7px 0',
-        textAlign: 'center',
-        backgroundColor: 'transparent',
-        color: '#fff',
-        border: 'none',
-        fontSize: '18px'
-      }
-    }
-
-  }
-
-}
-</script>
-
-<style lang="scss" scoped>
-$main_color: #09d8f2;
-$color01: #00FFFF;
-.tableData {
-  background: transparent;
-}
-
-.el-table::before {
-  height: 0;
-}
-
-.el-table__empty-text {
-  color: $main_color;
-}
-
-.tableDataCell {
-  ::v-deep .cell {
-    padding: 0 2px;
-  }
-}
-
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
-  /* width: 0;瀹藉害涓�0鏆楄棌 */
-  width: 0;
-  background: transparent;
-}
-
-::v-deep .el-table__body-wrapper {
-  background: transparent;
-}
-
-::v-deep .el-table th,
-::v-deep .el-table tr,
-::v-deep .el-table td {
-  background-color: transparent;
-}
-
-::v-deep .gutter {
-  display: none;
-}
-
-.all_block01 {
-  width: 237px;
-  height: 180px;
-}
-
-.all_block02 {
-  width: 100%;
-  height: 49px;
-  background: rgba(9, 216, 242, 0.1);
-}
-
-.all_block03 {
-  width: 199px;
-  height: 180px;
-}
-
-.all_block04 {
-  width: 100%;
-  height: 49px;
-  background: rgba(9, 216, 242, 0.1);
-}
-
-.kb_center_block_children {
-  height: 180px;
-  //border: 1px solid $kbBorderColor;
-  width: 240px;
-  display: flex;
-  z-index: 2;
-  justify-content: space-around;
-  align-items: center;
-  flex-direction: column;
-  margin: 10px;
-  font-size: 22px;
-
-  .box02 {
-    background: url("../../assets/images/box02.png") no-repeat;
-    transform: scale(1.5);
-    width: 145px;
-    height: 84px;
-
-  }
-}
-
-.all_block05 {
-  position: absolute;
-  animation: upDown 3s ease-in-out infinite;
-  left: 60px;
-}
-
-.all_block06 {
-  position: absolute;
-  animation: upDown2 3s ease-in-out infinite;
-  left: 290px;
-}
-
-.all_block07 {
-  position: absolute;
-  animation: upDown 3s ease-in-out infinite;
-  left: 520px;
-}
-
-@keyframes upDown {
-  0% {
-    top: 50px;
-  }
-  50% {
-    top: 100px;
-  }
-  100% {
-    top: 50px;
-  }
-}
-
-@keyframes upDown2 {
-  0% {
-    top: 100px;
-  }
-  50% {
-    top: 50px;
-  }
-  100% {
-    top: 100px;
-  }
-}
-
-</style>
+<template>
+  <div>
+    <div class="kb_dashboard" style="display:flex;flex-direction: column;justify-content: space-between">
+
+      <div class="kb_backgroundCustom" />
+
+      <div class="kb_header">
+        <div class="kb_headTime" style="top: 35px;left:  20px">
+          <span>娴欐睙浼樺厠宸ヨ锤鑲′唤鏈夐檺鍏徃</span>
+        </div>
+
+        <div class="kb_headTime kb_header_text" style="top: 35px;left:  800px">
+          <span>{{ title }}鏁板瓧鍖栫湅鏉�</span>
+        </div>
+
+        <div class="kb_headTime" style="top: 35px;right:  25px">
+          <span>{{ headTime }}</span>
+        </div>
+      </div>
+      <div
+        style=" padding:5px 20px 20px 20px;z-index:2;height: 940px;flex-direction: column;justify-content: space-between;"
+      >
+        <!--        涓婅竟-->
+        <div style="display: flex;justify-content: space-between">
+          <div style="width:100%">
+            <div class="smallTitle">
+              <svg-icon icon-class="cxjg" class="svg_class" />
+              鐢熶骇淇℃伅
+            </div>
+            <div
+              class="lineContent horn"
+              style="height: 450px;display: flex;flex-direction: column;justify-content: space-between"
+            >
+              <el-table
+                ref="tableDataLeftCenterRef"
+                :data="tableDataCenterTop"
+                class="tableData tableDataCell"
+                style="width: 100%;"
+                :header-cell-style="headerCellStyle"
+                :cell-style="cellStyle"
+                height="500"
+              >
+
+                <el-table-column
+                  prop="wo_code"
+                  label="宸ュ崟鍙�"
+                  width="220"
+                />
+                <el-table-column
+                  prop="saleOrderCode"
+                  label="鐢熶骇鍗曞彿"
+                  width="160"
+                />
+                <el-table-column
+                  prop="partcode"
+                  label="浜у搧缂栫爜"
+                  width="160"
+                />
+                <el-table-column
+                  prop="partname"
+                  label="浜у搧鍚嶇О"
+                  width="160"
+                />
+<!--                <el-table-column-->
+<!--                  prop="partspec"-->
+<!--                  label="浜у搧瑙勬牸"-->
+<!--                  width="160"-->
+<!--                >-->
+<!--                  <template slot-scope="{row}">-->
+<!--                    {{ row.partspec ? row.partspec : '/' }}-->
+<!--                  </template>-->
+<!--                </el-table-column>-->
+                <el-table-column
+                  prop="plan_qty"
+                  label="浠诲姟鏁伴噺"
+                  width="120"
+                />
+                <el-table-column
+                  prop="good_qty"
+                  label="鍚堟牸鏁伴噺"
+                  width="120"
+                />
+                <el-table-column
+                  prop="ng_qty"
+                  label="涓嶈壇鏁伴噺"
+                  width="120"
+                />
+                <el-table-column
+                  prop="laborbad_qty"
+                  label="宸ュ簾鏁伴噺"
+                  width="120"
+                />
+                <el-table-column
+                  prop="materielbad_qty"
+                  label="鏂欏簾鏁伴噺"
+                  width="120"
+                />
+                <el-table-column
+                  prop="seq"
+                  label="宸ュ簭椤哄簭"
+                  width="120"
+                />
+                <el-table-column
+                  prop="step_code"
+                  label="宸ュ簭缂栫爜"
+                  width="120"
+                />
+                <el-table-column
+                  prop="step_name"
+                  label="宸ュ簭鍚嶇О"
+                  width="120"
+                />
+                <el-table-column
+                  prop="schedule"
+                  label="瀹屾垚杩涘害(%)"
+                  width="213"
+                />
+              </el-table>
+            </div>
+          </div>
+
+        </div>
+        <!--        涓嬭竟-->
+        <div style="display: flex;justify-content: space-between;margin-top: 15px;">
+          <div style="width: 1000px;">
+            <div class="smallTitle">
+              <svg-icon icon-class="blcs" class="svg_class" />
+              璐ㄩ噺涓嶈壇(杩戜竴鍛�)
+            </div>
+            <div class="lineContent horn" style="height: 380px;display: flex;justify-content: space-between">
+              <div id="cjzl03" class="flex_c_c" style="width: 100%;height:100%" />
+
+            </div>
+          </div>
+          <div style="width: 850px;">
+            <div class="smallTitle">
+              <svg-icon icon-class="ckkc" class="svg_class" />
+              涓嶈壇缁熻(杩戜竴鏈�)
+            </div>
+            <div class="lineContent horn" style="height: 380px;display: flex;justify-content: space-between">
+              <div id="cjzl04" class="flex_c_c" style="width: 100%;height:100%" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import './kbCommon.css'
+import { loadEcharts, cjzl04, cjzl03_2 } from '@/utils/myEcharts'
+import {
+  WorkShopProduceBottomLeftData,
+  WorkShopProduceBottomRightData,
+  WorkShopProduceTopData
+} from '@/api/kanbanManager'
+import { PrentOrganizationNoCompany } from '@/api/GeneralBasicData'
+
+export default {
+  name: 'Cjsc',
+  data() {
+    return {
+      headTime: '',
+      tableDataRightTop: [],
+      wkshopArr: [],
+      legendData: [],
+
+      LeftTopData01: [],
+      LeftTopData02: [],
+
+      RightTopData01: [],
+      RightTopData02: [],
+      cjzl03_xData: [],
+      cjzl03_yData: [],
+      RightBottom: [],
+
+      tableDataCenterTop: [],
+
+      wkshopcode: '',
+      title: ''
+
+    }
+  },
+  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {
+    setInterval(this.getNowTime, 1000)
+
+    // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
+    setInterval(() => {
+      window.location.reload()
+    }, 1000 * 60 * 120)
+  },
+  mounted() {
+    this.getAllApi()
+  },
+  methods: {
+    async getWorkShopProduceTopData() {
+      WorkShopProduceTopData({ wkshopcode: this.wkshopcode.join(',') }).then(res => {
+        this.tableDataCenterTop = res.data
+
+        const divData = this.$refs.tableDataLeftCenterRef.bodyWrapper
+        const timer = setInterval(() => {
+          // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
+          divData.scrollTop += 1
+          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
+            divData.scrollTop = 0
+            WorkShopProduceTopData({ wkshopcode: this.wkshopcode.join(',') }).then(res => {
+              this.tableDataCenterTop = res.data
+
+              if (this.tableDataCenterTop.length > 11) {
+                clearInterval(timer)
+                this.getWorkShopProduceTopData()
+              }
+            })
+          }
+        }, this.tableDataCenterTop.length <= 11 ? 1000 * 30 : 200)
+      })
+    },
+
+    async getAllApi() {
+      const res = await PrentOrganizationNoCompany()
+      this.wkshopArr = res.data
+
+      if (window.location.hash.indexOf('?') !== -1) {
+        const code = window.location.hash.split('?')[1].split('=')[1]
+        this.title = this.wkshopArr.find(i => i.torg_code === code).torg_name
+        this.wkshopcode = [code]
+      }
+
+      this.wkshopcode.forEach(i => {
+        const aa = this.wkshopArr.find(j => j.torg_code === i).torg_name
+        this.legendData.push(aa)
+      })
+
+      const res4 = await WorkShopProduceBottomLeftData({ wkshopcode: this.wkshopcode.join(',') })
+      this.cjzl03_xData = res4.data[this.wkshopcode[0]].map(i => i.click_date)
+      for (const res4Key in res4.data) {
+        if (this.wkshopcode.includes(res4Key)) {
+          const bb = res4.data[res4Key].map(i => i.count)
+          this.cjzl03_yData.push(bb)
+        }
+      }
+      loadEcharts('cjzl03', cjzl03_2(this.cjzl03_xData, this.legendData, this.cjzl03_yData, true))
+      setInterval(() => {
+        WorkShopProduceBottomLeftData({ wkshopcode: this.wkshopcode.join(',') }).then(res4 => {
+          this.cjzl03_yData = []
+
+          this.cjzl03_xData = res4.data[this.wkshopcode[0]].map(i => i.click_date)
+          for (const res4Key in res4.data) {
+            if (this.wkshopcode.includes(res4Key)) {
+              const bb = res4.data[res4Key].map(i => i.count)
+              this.cjzl03_yData.push(bb)
+            }
+          }
+          loadEcharts('cjzl03', cjzl03_2(this.cjzl03_xData, this.legendData, this.cjzl03_yData, true))
+        })
+      }, 1000 * 50)
+
+      const res5 = await WorkShopProduceBottomRightData({ wkshopcode: this.wkshopcode[0] })
+      this.RightBottom = res5.data
+      if (this.RightBottom.length > 0) {
+        loadEcharts('cjzl04', cjzl04(this.RightBottom.map(i => i.name), this.RightBottom.map(i => i.cont)))
+      }
+
+      setInterval(() => {
+        WorkShopProduceBottomRightData({ wkshopcode: this.wkshopcode[0] }).then(res5 => {
+          this.RightBottom = res5.data
+          if (this.RightBottom.length > 0) {
+            loadEcharts('cjzl04', cjzl04(this.RightBottom.map(i => i.name), this.RightBottom.map(i => i.cont)))
+          }
+        })
+      }, 1000 * 60)
+
+      await this.getWorkShopProduceTopData()
+    },
+
+    // 鑾峰彇褰撳墠鏃堕棿
+    getNowTime() {
+      const dt = new Date()
+      const wk = dt.getDay()
+      const y = dt.getFullYear()
+      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+      const d = (dt.getDate() + '').padStart(2, '0')
+
+      const hh = (dt.getHours() + '').padStart(2, '0')
+      const mm = (dt.getMinutes() + '').padStart(2, '0')
+      const ss = (dt.getSeconds() + '').padStart(2, '0')
+      const weeks = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�']
+      const week = weeks[wk]
+
+      this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`
+    },
+    headerCellStyle() {
+      return {
+        backgroundColor: 'transparent',
+        padding: '10px 0',
+        textAlign: 'center',
+        color: '#07acc2',
+        border: 'none',
+        fontSize: '18px'
+      }
+    },
+    cellStyle() {
+      return {
+        padding: '7px 0',
+        textAlign: 'center',
+        backgroundColor: 'transparent',
+        color: '#fff',
+        border: 'none',
+        fontSize: '18px'
+      }
+    }
+
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+$main_color: #09d8f2;
+$color01: #00FFFF;
+.tableData {
+  background: transparent;
+}
+
+.el-table::before {
+  height: 0;
+}
+
+.el-table__empty-text {
+  color: $main_color;
+}
+
+.tableDataCell {
+  ::v-deep .cell {
+    padding: 0 2px;
+  }
+}
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  /* width: 0;瀹藉害涓�0鏆楄棌 */
+  width: 0;
+  background: transparent;
+}
+
+::v-deep .el-table__body-wrapper {
+  background: transparent;
+}
+
+::v-deep .el-table th,
+::v-deep .el-table tr,
+::v-deep .el-table td {
+  background-color: transparent;
+}
+
+::v-deep .gutter {
+  display: none;
+}
+
+.all_block01 {
+  width: 237px;
+  height: 180px;
+}
+
+.all_block02 {
+  width: 100%;
+  height: 49px;
+  background: rgba(9, 216, 242, 0.1);
+}
+
+.all_block03 {
+  width: 199px;
+  height: 180px;
+}
+
+.all_block04 {
+  width: 100%;
+  height: 49px;
+  background: rgba(9, 216, 242, 0.1);
+}
+
+.kb_center_block_children {
+  height: 180px;
+  //border: 1px solid $kbBorderColor;
+  width: 240px;
+  display: flex;
+  z-index: 2;
+  justify-content: space-around;
+  align-items: center;
+  flex-direction: column;
+  margin: 10px;
+  font-size: 22px;
+
+  .box02 {
+    background: url("../../assets/images/box02.png") no-repeat;
+    transform: scale(1.5);
+    width: 145px;
+    height: 84px;
+
+  }
+}
+
+.all_block05 {
+  position: absolute;
+  animation: upDown 3s ease-in-out infinite;
+  left: 60px;
+}
+
+.all_block06 {
+  position: absolute;
+  animation: upDown2 3s ease-in-out infinite;
+  left: 290px;
+}
+
+.all_block07 {
+  position: absolute;
+  animation: upDown 3s ease-in-out infinite;
+  left: 520px;
+}
+
+@keyframes upDown {
+  0% {
+    top: 50px;
+  }
+  50% {
+    top: 100px;
+  }
+  100% {
+    top: 50px;
+  }
+}
+
+@keyframes upDown2 {
+  0% {
+    top: 100px;
+  }
+  50% {
+    top: 50px;
+  }
+  100% {
+    top: 100px;
+  }
+}
+
+</style>

--
Gitblit v1.9.3