From d547e6ef21c2ca6f4f0db5da86600d06e9504d4d Mon Sep 17 00:00:00 2001
From: loveflow <5269966+loveflow@user.noreply.gitee.com>
Date: Sun, 10 Mar 2024 22:30:17 +0800
Subject: [PATCH] update

---
 src/loveflow/components/data/table.vue        | 13 +++++-
 src/loveflow/components/echart/bar/five.vue   | 26 ++++++++---
 src/loveflow/components/echart/chart.vue      |  4 +-
 .../components/echart/pie/dpieOne.vue         | 44 ++++++++++++++-----
 src/loveflow/components/echart/pie/six.vue    | 22 ++++++----
 .../enterpriseTopic/components/dPieOne.vue    | 38 +++++++++++-----
 .../enterpriseTopic/components/dPieTwo.vue    |  3 +-
 .../enterpriseTopic/components/pTotal.vue     |  2 +-
 .../enterpriseTopic/components/pieFive.vue    |  3 +-
 .../enterpriseTopic/components/pieFour.vue    | 23 ++++++++--
 .../enterpriseTopic/components/pieTwo.vue     |  2 +-
 .../enterpriseTopic/personSafety/index.vue    | 20 +++------
 .../personSafety/keyPerson.vue                | 18 ++++++++
 .../enterpriseTopic/personSafety/screen.vue   |  7 +--
 src/views/enterpriseTopic/screen.vue          | 35 +++++++++------
 15 files changed, 184 insertions(+), 76 deletions(-)

diff --git a/src/loveflow/components/data/table.vue b/src/loveflow/components/data/table.vue
index 9060f7e..4b79df4 100644
--- a/src/loveflow/components/data/table.vue
+++ b/src/loveflow/components/data/table.vue
@@ -7,6 +7,7 @@
       :rowKey="rowKey ? rowKey : ''"
       @selection-change="selectionChange"
       v-bind="$attrs"
+      style="width: 100%"
     >
       <!-- 多选批量操作 -->
       <el-table-column
@@ -113,9 +114,17 @@ export default {
     .el-table__body-wrapper {
       height: calc(100% - 50px);
       overflow-y: scroll;
-      overflow-x: hidden;
+      &::-webkit-scrollbar-corner{
+        background: transparent;
+      }
       &::-webkit-scrollbar {
-        display: none;
+        width: 6px;
+        height: 6px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: rgba(93, 106, 105, 1);
+        border-radius: 6px;
       }
     }
   }
diff --git a/src/loveflow/components/echart/bar/five.vue b/src/loveflow/components/echart/bar/five.vue
index 4ac7220..1268e10 100644
--- a/src/loveflow/components/echart/bar/five.vue
+++ b/src/loveflow/components/echart/bar/five.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 100%; width: 100%">
+  <div style="height: 100%; width: 100%" id="dpieWrap">
     <g-chart :echartdata="option"></g-chart>
   </div>
 </template>
@@ -16,6 +16,7 @@ export default {
   data() {
     return {
       option: {},
+      fontSize: 10,
     };
   },
   mounted() {
@@ -23,6 +24,17 @@ export default {
   },
   methods: {
     setOption() {
+      let temp = this.getHeight();
+      let height = parseInt(temp / 4);
+      console.log(height);
+      if (height > 40) {
+        this.fontSize = 12;
+      }
+
+      if (this.fontSize > 60) {
+        this.fontSize = 14;
+      }
+
       let dataList = this.chartObj.data;
       let maxArr = [];
       let maxValue = 0;
@@ -71,7 +83,7 @@ export default {
               textStyle: {
                 verticalAlign: "bottom",
                 color: "#299CD4",
-                fontSize: 14,
+                fontSize: this.fontSize + 2,
                 fontFamily: "Microsoft YaHei",
                 align: "left",
                 padding: [0, 0, 5, 7],
@@ -93,12 +105,12 @@ export default {
                   value: {
                     padding: [4, 0, 0, 4],
                     color: "#9CE0FF",
-                    fontSize: 16,
+                    fontSize: this.fontSize + 4,
                   },
                   rate: {
                     align: "right",
                     color: "rgba(255,255,255,0.9)",
-                    fontSize: 12,
+                    fontSize: this.fontSize,
                   },
                 },
               },
@@ -169,7 +181,7 @@ export default {
               rich: {
                 a: {
                   color: "#9CE0FF",
-                  fontSize: 16,
+                  fontSize: this.fontSize + 4,
                   align: "right",
                 },
               },
@@ -201,6 +213,10 @@ export default {
         ],
       };
     },
+    getHeight() {
+      let div = document.getElementById("dpieWrap");
+      return div.clientHeight;
+    },
   },
   watch: {
     chartObj: {
diff --git a/src/loveflow/components/echart/chart.vue b/src/loveflow/components/echart/chart.vue
index 0fffc45..c6fb52f 100644
--- a/src/loveflow/components/echart/chart.vue
+++ b/src/loveflow/components/echart/chart.vue
@@ -21,7 +21,9 @@ export default {
   },
   methods: {
     resize() {
-      this.dom.resize();
+      console.log(11111);
+      console.log( this.dom);
+      this.dom && this.dom.resize();
     },
   },
   mounted() {
diff --git a/src/loveflow/components/echart/pie/dpieOne.vue b/src/loveflow/components/echart/pie/dpieOne.vue
index d80089d..06fd19b 100644
--- a/src/loveflow/components/echart/pie/dpieOne.vue
+++ b/src/loveflow/components/echart/pie/dpieOne.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dpiePanel">
+  <div class="dpiePanel" id="dpieWrap">
     <div class="dpieLegend">
       <div class="dpieRow" v-for="item in data" :key="item.name">
         <div
@@ -11,7 +11,14 @@
       </div>
     </div>
     <div style="flex: 1">
-      <div class="dpiebg">
+      <div
+        class="dpiebg"
+        :style="{
+          height: parseInt(viewH) + 'px',
+          width: 2 * viewH + 'px',
+          marginLeft: parseInt(0.5 * viewH) + 'px',
+        }"
+      >
         <div ref="dpieWrapRef" class="dpieWrap"></div>
       </div>
     </div>
@@ -40,6 +47,7 @@ export default {
         },
       ],
       total: 1,
+      viewH: 1,
     };
   },
   mounted() {
@@ -48,12 +56,17 @@ export default {
       this.total += this.data[i].value;
     }
 
-    this.setOption();
+    let temp = this.getHeight();
+    let height = parseInt(temp / 3);
+    this.viewH = 2 * height;
+    console.log(height);
+
+    setTimeout(() => {
+      this.setOption();
+    }, 500);
   },
   methods: {
     setOption() {
-      let optionsData = this.data;
-      let hoveredIndex = "";
       let chartDom = this.$refs["dpieWrapRef"];
       let myChart = echarts.init(chartDom);
       const getPie3D = (pieData, internalDiameterRatio) => {
@@ -144,7 +157,7 @@ export default {
             show: false,
             boxHeight: boxHeight, //圆环的高度
             left: 0,
-            top: -20, //3d饼图的位置
+            top: -18, //3d饼图的位置
             viewControl: {
               //3d效果可以放大、旋转等，请自己去查看官方配置
               alpha: 24, //角度
@@ -267,6 +280,10 @@ export default {
       });
       option && myChart.setOption(option);
     },
+    getHeight() {
+      let div = document.getElementById("dpieWrap");
+      return div.clientHeight;
+    },
   },
   watch: {
     chartObj: {
@@ -284,10 +301,16 @@ export default {
   position: relative;
   flex: 1;
   height: 100%;
+  display: flex;
+  align-items: center;
+
   .dpieLegend {
     position: absolute;
-    right: 40px;
-    top: 28px;
+    right: vw(30);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     .dpieRow {
       display: flex;
       align-items: center;
@@ -311,11 +334,10 @@ export default {
   }
 }
 .dpieWrap {
-  width: 240px;
-  height: 120px;
+  width: 100%;
+  height: 100%;
 }
 .dpiebg {
-  margin-top: 10px;
   width: 240px;
   height: 120px;
   background: url("~@/assets/images/screen/dpie.png");
diff --git a/src/loveflow/components/echart/pie/six.vue b/src/loveflow/components/echart/pie/six.vue
index 9e7ea65..d065ad7 100644
--- a/src/loveflow/components/echart/pie/six.vue
+++ b/src/loveflow/components/echart/pie/six.vue
@@ -16,6 +16,7 @@ export default {
   data() {
     return {
       option: {},
+      fontSize: 12,
     };
   },
   mounted() {
@@ -23,6 +24,10 @@ export default {
   },
   methods: {
     setOption() {
+      let temp = this.getHeight();
+      let height = parseInt(temp / 5);
+      this.viewH = 2 * height;
+      console.log(height);
       let point = this.chartObj.point; //环形图的具体  百分比
       let total = this.chartObj.total;
 
@@ -37,14 +42,14 @@ export default {
           text: this.chartObj.name,
           textStyle: { fontSize: 12, lineHeight: 12, color: "#D0DEEE" },
           subtextStyle: {
-            fontSize: 18,
+            fontSize: 16,
             fontWeight: 500,
             lineHeight: 10,
             color: "#E3FEFF",
           },
           textAlign: "center",
           left: "47%",
-          top: 140,
+          top: 4 * height - 16,
         },
         color: this.chartObj.color,
         graphic: {
@@ -53,8 +58,8 @@ export default {
               type: "image",
               style: {
                 image: this.chartObj.icon,
-                width: 160,
-                height: 160,
+                width: 4 * height,
+                height: 4 * height,
                 zIndex: 1,
               },
               left: "center",
@@ -66,8 +71,8 @@ export default {
           {
             // name: '访问来源1',
             type: "pie",
-            radius: [30, 40],
-            center: ["center", 80],
+            radius: [height - 6, height],
+            center: ["center", 2 * height],
             data: [
               {
                 value: 100, //对应显示的部分数据即100%
@@ -93,9 +98,10 @@ export default {
             // name: '访问来源2',
             type: "pie",
             showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
-            radius: [30, 40],
+            radius: [height - 6, height],
+            center: ["center", 2 * height],
             avoidLabelOverlap: true, // 标签重叠时进行调整
-            center: ["center", 80],
+
             data: [
               {
                 value: (point / total) * 100,
diff --git a/src/views/enterpriseTopic/components/dPieOne.vue b/src/views/enterpriseTopic/components/dPieOne.vue
index 5b0a113..d4d4822 100644
--- a/src/views/enterpriseTopic/components/dPieOne.vue
+++ b/src/views/enterpriseTopic/components/dPieOne.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dpiePanel">
+  <div class="dpiePanel" id="dpieWrap">
     <div class="dpieLegend">
       <div class="dpieRow" v-for="item in data" :key="item.name">
         <div class="flex-center">
@@ -13,7 +13,14 @@
       </div>
     </div>
     <div class="" style="flex: 1">
-      <div class="dpiebg">
+      <div
+        class="dpiebg"
+        :style="{
+          height: parseInt(viewH) + 'px',
+          width: 2 * viewH + 'px',
+          marginLeft: parseInt(0.5 * viewH) + 'px',
+        }"
+      >
         <div ref="dpieWrapRef" class="dpieWrap"></div>
       </div>
     </div>
@@ -25,6 +32,7 @@ import "echarts-gl";
 export default {
   data() {
     return {
+      fontSize: 12,
       data: [
         {
           name: "资质正常企业数",
@@ -42,6 +50,7 @@ export default {
         },
       ],
       total: 1,
+      viewH: 1,
     };
   },
   mounted() {
@@ -50,12 +59,18 @@ export default {
       this.total += this.data[i].value;
     }
 
-    this.setOption();
+    let temp = this.getHeight();
+    let height = parseInt(temp / 3);
+    this.viewH = 2 * height;
+    console.log(height);
+
+    setTimeout(() => {
+      this.setOption();
+      //window.addEventListener("resize", this.setOption(), false);
+    }, 500);
   },
   methods: {
     setOption() {
-      let optionsData = this.data;
-      let hoveredIndex = "";
       let chartDom = this.$refs["dpieWrapRef"];
       let myChart = echarts.init(chartDom);
       const getPie3D = (pieData, internalDiameterRatio) => {
@@ -269,6 +284,10 @@ export default {
       });
       option && myChart.setOption(option);
     },
+    getHeight() {
+      let div = document.getElementById("dpieWrap");
+      return div.clientHeight;
+    },
   },
   watch: {
     chartObj: {
@@ -287,7 +306,7 @@ export default {
   flex: 1;
   .dpieLegend {
     position: absolute;
-    top: 20px;
+    top: vw(20);
     right: 20px;
     display: flex;
     flex-direction: column;
@@ -297,8 +316,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-around;
-      width: vw(200);
-      margin-bottom: vw(16);
+      margin-bottom: vw(6);
       //background-color: rgba(108, 128, 151, 0.1);
       .dpieIcon {
         margin-right: 6px;
@@ -319,8 +337,8 @@ export default {
   }
 }
 .dpieWrap {
-  width: 160px;
-  height: 70;
+  width: 100%;
+  height: 100%;
 }
 .dpiebg {
   margin-top: vw(14);
diff --git a/src/views/enterpriseTopic/components/dPieTwo.vue b/src/views/enterpriseTopic/components/dPieTwo.vue
index 5608490..af51072 100644
--- a/src/views/enterpriseTopic/components/dPieTwo.vue
+++ b/src/views/enterpriseTopic/components/dPieTwo.vue
@@ -18,6 +18,7 @@
         :style="{
           height: parseInt(viewH) + 'px',
           width: 2 * viewH + 'px',
+          marginTop: parseInt(0.6 * viewH) + 'px',
         }"
       >
         <div ref="dpieWrapRef" class="dpieWrap"></div>
@@ -67,7 +68,7 @@ export default {
     }
 
     let temp = this.getHeight();
-    let height = parseInt(temp / 4);
+    let height = parseInt(temp / 3);
     this.viewH = 2 * height;
     console.log(height);
     this.fontSize = 12;
diff --git a/src/views/enterpriseTopic/components/pTotal.vue b/src/views/enterpriseTopic/components/pTotal.vue
index 3714cd2..7353ba5 100644
--- a/src/views/enterpriseTopic/components/pTotal.vue
+++ b/src/views/enterpriseTopic/components/pTotal.vue
@@ -35,7 +35,7 @@ export default {
   .value {
     margin-left: vw(76);
     font-family: AlibabaPuHuiTiM;
-    font-size: vw(24);
+    font-size: vw(22);
     color: #ffffff;
   }
   .name {
diff --git a/src/views/enterpriseTopic/components/pieFive.vue b/src/views/enterpriseTopic/components/pieFive.vue
index 50b9630..a8821d4 100644
--- a/src/views/enterpriseTopic/components/pieFive.vue
+++ b/src/views/enterpriseTopic/components/pieFive.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="height: 100%; width: 100%" id="pieWrap">
-    <g-chart :echartdata="option"></g-chart>
+    <g-chart ref="gChartRef" :echartdata="option"></g-chart>
   </div>
 </template>
 <script>
@@ -23,6 +23,7 @@ export default {
   },
   mounted() {
     this.setOption();
+    window.addEventListener("resize", this.$refs.gChartRef.resize(), false);
   },
   methods: {
     setOption() {
diff --git a/src/views/enterpriseTopic/components/pieFour.vue b/src/views/enterpriseTopic/components/pieFour.vue
index d192540..40e6331 100644
--- a/src/views/enterpriseTopic/components/pieFour.vue
+++ b/src/views/enterpriseTopic/components/pieFour.vue
@@ -16,6 +16,7 @@ export default {
   data() {
     return {
       option: {},
+      fontSize: 12,
     };
   },
   mounted() {
@@ -23,6 +24,16 @@ export default {
   },
   methods: {
     setOption() {
+      let temp = this.getHeight();
+      let height = parseInt(temp / 4);
+      console.log(height);
+      this.fontSize = 12;
+      if (height < 30) {
+        this.fontSize = 8;
+      }
+      if (height > 40) {
+        this.fontSize = 12;
+      }
       let point = this.chartObj.point; //环形图的具体  百分比
       let total = this.chartObj.total;
       this.option = {
@@ -31,11 +42,11 @@ export default {
           show: true, // 是否显示
           text: this.chartObj.name,
           textStyle: {
-            fontSize: 12,
+            fontSize: this.fontSize,
             color: "#D0DEEE",
           },
           subtextStyle: {
-            fontSize: 14,
+            fontSize: this.fontSize,
             fontWeight: 400,
             lineHeight: 10,
             color: "#E3FEFF",
@@ -132,12 +143,12 @@ export default {
               rich: {
                 b_style: {
                   padding: [0, 0, -8, 0],
-                  fontSize: 12,
+                  fontSize: this.fontSize,
                   fontWeight: 400,
                   color: "#D0DEEE",
                 },
                 c_style: {
-                  fontSize: 14,
+                  fontSize: this.fontSize,
                   fontWeight: 400,
                   color: "#D0DEEE",
                 },
@@ -150,6 +161,10 @@ export default {
         ],
       };
     },
+    getHeight() {
+      let div = document.getElementById("pieWrap");
+      return div.clientHeight;
+    },
   },
   watch: {
     chartObj: {
diff --git a/src/views/enterpriseTopic/components/pieTwo.vue b/src/views/enterpriseTopic/components/pieTwo.vue
index 4c780d8..fb56773 100644
--- a/src/views/enterpriseTopic/components/pieTwo.vue
+++ b/src/views/enterpriseTopic/components/pieTwo.vue
@@ -78,7 +78,7 @@ export default {
 
       this.option = {
         tooltip: {
-          show: false,
+          trigger: "item",
         },
         legend: {
           data: legend,
diff --git a/src/views/enterpriseTopic/personSafety/index.vue b/src/views/enterpriseTopic/personSafety/index.vue
index 1659f39..6cac562 100644
--- a/src/views/enterpriseTopic/personSafety/index.vue
+++ b/src/views/enterpriseTopic/personSafety/index.vue
@@ -68,7 +68,8 @@ export default {
   },
 };
 </script>
-<style lang="less">
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
 .enterpriseTopicPanel {
   padding: 20px;
   height: 100%;
@@ -118,7 +119,7 @@ export default {
         );
         border: 1px solid #5b748c;
         .filterBtnWrap {
-          padding: 2px;
+          padding: vw(2);
           &:last-child {
             .el-divider {
               display: none;
@@ -129,10 +130,10 @@ export default {
           display: flex;
           justify-content: center;
           align-items: center;
-          padding: 0 10px;
-          height: 34px;
+          padding: 0 vw(10);
+          height: vw(34);
           font-weight: 400;
-          font-size: 14px;
+          font-size: vw(14);
           color: #eaf6ff;
           &.filterActive {
             font-weight: 500;
@@ -149,12 +150,3 @@ export default {
   }
 }
 </style>
-<style lang="scss" scoped>
-@import "@/loveflow/assets/index.scss";
-.enterpriseTopicPanel {
-  .personSafetyWrap {
-    .enterpriseTopicResult {
-    }
-  }
-}
-</style>
diff --git a/src/views/enterpriseTopic/personSafety/keyPerson.vue b/src/views/enterpriseTopic/personSafety/keyPerson.vue
index 4fe4d1c..2332071 100644
--- a/src/views/enterpriseTopic/personSafety/keyPerson.vue
+++ b/src/views/enterpriseTopic/personSafety/keyPerson.vue
@@ -140,10 +140,16 @@ export default {
         {
           prop: "phone",
           label: "户口详址",
+          attrs: {
+            width: 180,
+          },
         },
         {
           prop: "cmy",
           label: "归属企业",
+          attrs: {
+            width: 180,
+          },
         },
         {
           prop: "address",
@@ -153,10 +159,16 @@ export default {
           slot: "gwSlot",
           prop: "address",
           label: "文化程度",
+          attrs: {
+            width: 120,
+          },
         },
         {
           prop: "personType",
           label: "暂住地址",
+          attrs: {
+            width: 180,
+          },
         },
         {
           prop: "date",
@@ -173,10 +185,16 @@ export default {
         {
           prop: "address",
           label: "所属派出所",
+          attrs: {
+            width: 120,
+          },
         },
         {
           prop: "address",
           label: "所属委员会",
+          attrs: {
+            width: 120,
+          },
         },
         {
           prop: "date",
diff --git a/src/views/enterpriseTopic/personSafety/screen.vue b/src/views/enterpriseTopic/personSafety/screen.vue
index c6defac..4f6f2db 100644
--- a/src/views/enterpriseTopic/personSafety/screen.vue
+++ b/src/views/enterpriseTopic/personSafety/screen.vue
@@ -119,7 +119,6 @@ export default {
   data() {
     return {
       total: 53981 + "",
-
       tl1Obj: {
         name: "危险品领用人员",
         total: 3400,
@@ -148,7 +147,6 @@ export default {
         icon: require("@/assets/images/topic/pie4b.png"),
         color: ["#FFE3E3", "#FF2C2C", "#FF6D6D"],
       },
-
       tmObj: {
         l1: {
           icon: require("@/assets/images/topic/l1.png"),
@@ -333,8 +331,11 @@ export default {
             display: flex;
             flex-direction: column;
             flex: 1;
+            .topWrap {
+              height: 30%;
+            }
             .btmWrap {
-              flex: 1;
+              height: 70%;
               display: flex;
               flex-direction: column;
               .flowHead {
diff --git a/src/views/enterpriseTopic/screen.vue b/src/views/enterpriseTopic/screen.vue
index 63958fe..9c27858 100644
--- a/src/views/enterpriseTopic/screen.vue
+++ b/src/views/enterpriseTopic/screen.vue
@@ -5,10 +5,10 @@
       <div class="screenRow screenRowTop mb14">
         <div class="mr16 screenColOne">
           <div
-            class="topCol mb14 pointer"
+            class="topCol pointer mb14"
             @click="gotoPage('/topic/personSafety/screen')"
           >
-            <colWrap title="人员安全风险评估">
+            <colWrap class="" title="人员安全风险评估">
               <pieTwo :chartObj="tlObj"></pieTwo>
             </colWrap>
           </div>
@@ -503,6 +503,9 @@ export default {
           display: flex;
           .left {
             flex: 1;
+            display: flex;
+            flex-direction: column;
+            height: calc(100% - 14px);
             .wxHead {
               background: url("~@/assets/images/screen/wxl.png") no-repeat
                 center center;
@@ -511,6 +514,9 @@ export default {
           }
           .right {
             flex: 1;
+            display: flex;
+            flex-direction: column;
+            height: calc(100% - 14px);
             .wxHead {
               background: url("~@/assets/images/screen/wxr.png") no-repeat
                 center center;
@@ -519,7 +525,7 @@ export default {
           }
           .wxHead {
             padding: 0 10px;
-            height: 40px;
+            height: vw(40);
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -538,7 +544,7 @@ export default {
           }
           .wxBody {
             padding: 0 10px;
-            height: calc(100% - 48px);
+            flex: 1;
             background-color: rgba(108, 128, 151, 0.1);
             overflow-y: scroll;
             &::-webkit-scrollbar {
@@ -563,7 +569,7 @@ export default {
         .btmCol {
           height: 60%;
           .tableInfoWrap {
-            height: calc(100% - 40px);
+            height: calc(100% - 30px);
           }
         }
       }
@@ -572,12 +578,13 @@ export default {
         height: 100%;
         display: flex;
         flex-direction: column;
+        overflow: hidden;
         .screenChart {
           display: flex;
           flex-direction: column;
         }
         .topCol {
-          height: 120px;
+          height: 22%;
           display: flex;
           flex-direction: column;
           .xfssWrap {
@@ -589,14 +596,14 @@ export default {
           }
         }
         .midCol {
-          flex: 1;
+          height: 20%;
           display: flex;
           flex-direction: column;
           .xfzdWrap {
-            height: 68px;
+            height: 68%;
             margin-bottom: 10px;
             flex: 1;
-            padding: 4px;
+            padding: vw(4);
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -605,11 +612,11 @@ export default {
               display: flex;
               align-items: center;
               border: 1px solid #495461;
-              padding: 2px 8px;
+              padding: vw(2) vw(8);
               .icon {
                 margin-right: 4px;
-                width: 37px;
-                height: 40px;
+                width: vw(37);
+                height: vw(40);
                 img {
                   width: 100%;
                 }
@@ -628,7 +635,7 @@ export default {
           }
         }
         .btmCol {
-          flex: 2;
+          height: 36%;
           display: flex;
           flex-direction: column;
           .xfsjWrap {
@@ -644,7 +651,7 @@ export default {
               display: flex;
               flex-direction: column;
               align-items: center;
-              padding: 2px 8px;
+              padding: vw(2) vw(8);
               .icon {
                 margin-right: 4px;
                 width: vh(78);