新版式

src/views/workOrder/components/box-3.vue

@@ -50,8 +50,7 @@
           :key="index"
           :value="item.value"
           :label="item.name"
-          :width="150"
-          :height="150"
+      
         />
       </div>
     </div>
@@ -110,19 +109,20 @@
 
 <style lang="scss" scoped>
   .work-box-3 {
-    width: vw(840);
+    width: vw(1000);
     margin-top: vh(120);
     margin-left: vw(8);
 
     .work-box-1 {
       padding: 0 vw(20);
-      height: vh(566);
+      // height: vh(566);
       display: flex;
       flex-direction: column;
       background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
 
       .list {
-        height: vh(500);
+        height: vh(1600);
+		// height:100%;
         overflow: auto;
         /* 滚动条整体样式 */
         &::-webkit-scrollbar {
@@ -147,20 +147,23 @@
           display: flex;
           align-items: center;
           justify-content: flex-start;
-          padding: vh(8) vh(10);
+          padding: vh(20) vh(10);
           .label {
             width: vw(60);
-            height: vh(24);
-            line-height: vh(24);
+            height: vh(34);
+            line-height: vh(34);
             color: #fff;
             border-radius: 2px 2px 2px 2px;
-            font-size: vw(14);
+            font-size: font-vw(20);
             text-align: center;
             display: inline-block;
             margin-right: vw(10);
           }
           .label--primary {
             @extend .label;
+			width:initial;
+			height:initial;
+			padding:vw(15);
             background: #2380fb;
           }
           .label--warning {
@@ -173,7 +176,7 @@
           }
           .time {
             font-weight: 400;
-            font-size: vw(12);
+            font-size: font-vw(18);
             color: rgba(255, 255, 255, 0.6);
             line-height: 14px;
             text-align: left;
@@ -183,7 +186,7 @@
           }
           p {
             font-weight: 400;
-            font-size: vw(15);
+            font-size: font-vw(20);
             color: #ffffff;
             text-align: left;
             font-style: normal;
@@ -202,8 +205,8 @@
     .work-2-flex {
       display: flex;
       flex-direction: column;
-      height: vh(380);
-      margin-bottom: vw(8);
+      // height: vh(380);
+      margin-bottom: vw(20);
       background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
 
       .chart-box {
@@ -219,7 +222,7 @@
         justify-content: space-around;
         &-item {
           font-weight: 400;
-          font-size: vw(14);
+          font-size: font-vw(20);
         }
         &-item__icon {
           width: vw(24);
@@ -227,7 +230,7 @@
         }
         &-item__label {
           color: #fff;
-          font-size: vw(14);
+          font-size: font-vw(20);
         }
         &-item__value {
           position: relative;
@@ -237,11 +240,12 @@
           display: flex;
           align-items: center;
           font-weight: bold;
-          font-size: vw(28);
+          font-size: font-vw(28);
           color: #fff;
           &--primary {
             @extend .statistics-item__value;
             color: #02f9fa;
+			
             background-image: url('@/assets/images/mask-primary.png');
             background-size: 100% 100%;
           }
@@ -262,7 +266,7 @@
           }
         }
         &-item__value-suffix {
-          font-size: vw(12);
+          font-size: font-vw(12);
           margin-top: vh(6);
         }
       }