大屏轮播以及滚动效果

src/views/gisHome/component/leftMain.vue

@@ -95,8 +95,8 @@ const initMachinerycharts = () => {
     },
     grid: {
       // 让图表占满容器
-      top: '45px',
-      bottom: '50px'
+      top: '45vh',
+      bottom: '50vh'
     },
     xAxis: {
       data: dataAxis,
@@ -204,7 +204,7 @@ const initMachinerycharts = () => {
             { offset: 1, color: 'rgba(67, 158, 255, 0)' }
           ])
         },
-        barWidth: '13px',
+        barWidth: '13vh',
         data: data
       }
     ]
@@ -409,7 +409,7 @@ const initOrderChart = () => {
           focus: 'series'
         },
         data: [320, 302, 301, 334, 345, 356, 367],
-        barWidth: '3px'
+        barWidth: 3
       },
       {
         name: '领用量',
@@ -423,7 +423,7 @@ const initOrderChart = () => {
         },
         data: [120, 132, 101, 134, 152, 103, 150],
         showBackground: true,
-        barWidth: '3px',
+        barWidth: 3,
         backgroundStyle: {
           color: 'rgba(217, 231, 255, 0.1)'
         }
@@ -443,93 +443,92 @@ onMounted(() => {
 @import '../css/gis.scss';
 
 #machineryMain {
-  width: 421px;
+  width: vw(421);
   height: vh(222);
-  margin-left: 14px;
+  margin-left: vw(14);
   margin-bottom: vh(30);
 }
 
 #orderMain {
   width: 100%;
-  padding-right: 14px;
+  padding-right: vw(14);
   height: vh(300);
 }
 .title {
-  > img {
-    width: 14px;
-    height: 35px;
+  > div > img {
+    width: vw(14);
+    height: vh(35);
   }
 
   .subTitle {
     img {
-      width: 18.8px;
-      height: 20px;
-      margin-right: 10px;
+      width: vw(18.8);
+      height: vh(20);
+      margin-right: vw(10);
     }
 
     span {
-      text-shadow: 0px 0px 8px rgba(2, 3, 7, 0.35);
-      font-size: 20px;
+      text-shadow: 0 0 vw(8) rgba(2, 3, 7, 0.35);
+      font-size: vw(20);
       font-weight: 500;
-      letter-spacing: 0px;
+      letter-spacing: 0;
       color: rgba(255, 255, 255, 1);
     }
   }
 
   .hint {
-    font-size: 14px;
+    font-size: vw(14);
     font-weight: 400;
     color: rgba(204, 204, 204, 0.5);
-    margin-right: 20px;
+    margin-right: vw(20);
   }
 
   .mark {
-    width: 2px;
+    width: vw(2);
     height: vh(14);
     background: rgba(67, 226, 203);
-    margin-right: 10px;
+    margin-right: vw(10);
   }
 
   .ligner {
-    height: 1px;
+    height: vh(1);
     background: linear-gradient(to right, transparent 0%, #43e2cb 90%);
-    margin-left: 14px;
+    margin-left: vw(14);
   }
 }
 .situation {
-  width: 449px;
+  width: vw(449);
   height: vh(927);
   background: rgb(1, 26, 33, 0.4);
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(vw(8));
   position: absolute;
   top: vh(122);
-  left: 21px;
+  left: vw(21);
   .main {
     padding-top: vh(30);
 
     .cardList {
-      padding: 0 20px;
+      padding: 0 vw(20);
       margin-top: vh(20);
       margin-bottom: vh(30);
       display: flex;
       justify-content: space-between;
 
       .card {
-        border: 1px dashed rgba(67, 226, 203, 0.3);
-        width: 112px;
+        border: vw(1) dashed rgba(67, 226, 203, 0.3);
+        width: vw(112);
         height: vh(155);
         padding-top: vh(15);
         text-align: center;
         color: rgba(255, 255, 255, 1);
 
         img {
-          width: 44px;
-          height: vh(44);
+          width: vw(44);
           margin-bottom: vh(20);
         }
 
         > p {
-          font-size: 14px;
+          font-size: vw(14);
           margin-top: 0;
           margin-bottom: vh(10);
           font-family: '思源黑体';
@@ -537,13 +536,13 @@ onMounted(() => {
 
         .peopleNum {
           font-weight: 400;
-          font-size: 14px;
+          font-size: vw(14);
 
-          text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 1);
+          text-shadow: 0 vw(1.24) vw(6.21) rgba(0, 190, 247, 1);
           color: rgba(230, 247, 255, 1);
 
           span {
-            font-size: 24px;
+            font-size: vw(24);
             font-weight: 700;
           }
         }
@@ -558,7 +557,7 @@ onMounted(() => {
     left: 0;
     bottom: 0;
     right: 0;
-    padding: 2px;
+    padding: vw(2);
     background: linear-gradient(to bottom right, #43e2cb 0%, transparent 50%);
     -webkit-mask:
       linear-gradient(#fff 0 0) content-box,
@@ -569,17 +568,17 @@ onMounted(() => {
   }
 
   .topleft {
-    width: 7px;
-    height: 7px;
+    width: vw(7);
+    height: vw(7);
     position: absolute;
-    top: 1px;
-    left: 1px;
+    top: vh(1);
+    left: vw(1);
     background-image: url('@/assets/images/topleft.png');
   }
 
   .bottomright {
-    width: 7px;
-    height: 7px;
+    width: vw(7);
+    height: vw(7);
     position: absolute;
     bottom: 0;
     right: 0;