中建四局(安全管理):样式整体调整

src/views/projectAdmin/zjsj/security/centerBottom.vue

@@ -12,7 +12,7 @@
     <div class="list" v-if="tabIndex==0">
       <div class="thead">
         <div class="row">
-          <div class="td" style="width:90px;">序号</div>
+          <div class="td">序号</div>
           <div class="td">验收项目</div>
           <div class="td">验收要求</div>
           <div class="td">专业承包单位</div>
@@ -24,7 +24,7 @@
       <div class="tbody">
         <vue-scroll>
           <div class="row" v-for="i in 8" :key="i">
-            <div class="td" style="width:90px;">{{i}}</div>
+            <div class="td">{{i}}</div>
             <div class="td">深基坑临边防护</div>
             <div class="td">砌筑200mm以上挡水墙</div>
             <div class="td">中国建筑第四工程局有限公司</div>
@@ -140,26 +140,26 @@ export default {
 }
 .list {
   width: 100%;
-  height: calc(100% - 32px);
+  height: calc(100% - 80px);
   .thead {
     font-size: 14px;
     color: #6ee4f0;
   }
   .tbody {
-    height: calc(100% - 32px);
+    height: calc(100% - 40px);
     font-size: 12px;
     color: #ccc;
   }
 
-  .row {
+  .thead .row, .tbody .row{
     display: flex;
+    text-align: center;
+    justify-content: left;
+    height: 40px;
+    line-height: 40px;
     .td {
-      height: 32px;
-      line-height: 32px;
-      text-align: center;
-      justify-content: center;
       &:nth-child(1) {
-        width: 150px;
+        width: 80px;
       }
       &:nth-child(2) {
         flex: 1;
@@ -168,16 +168,16 @@ export default {
         flex: 1;
       }
       &:nth-child(4) {
-        flex: 1;
+        flex: 1.5;
       }
       &:nth-child(5) {
-        flex: 1;
+        flex:1;
       }
       &:nth-child(6) {
-        flex: 1;
+        flex:1;
       }
       &:nth-child(7) {
-        flex: 1;
+        flex:1;
       }
     }
   }

src/views/projectAdmin/zjsj/security/centerTop.vue

@@ -74,7 +74,7 @@ export default {
       value1: "",
       value2: "",
       xData: ["18-24", "25-34", "34-49", "50-55", "未登记"],
-      grid: ["15%", "1%", "10%", "7%"],
+      grid: ["10%", "2%", "18%", "10%"],
       series: [
         {
           data: ["2200", "4000", "8000", "3000", "8000"],
@@ -98,6 +98,13 @@ export default {
         tooltip: {
           trigger: "axis"
         },
+        grid: {
+          top: '10%',
+          right: '2%',
+          bottom: '18%',
+          left: '2%',
+          containLabel: true
+        },
         xAxis: {
           type: "category",
           boundaryGap: false,
@@ -176,7 +183,7 @@ export default {
       }
     }
     .item.margin {
-      margin-top: 2%;
+      margin-top: 1%;
     }
   }
   .bunbox {

src/views/projectAdmin/zjsj/security/index.vue

@@ -35,10 +35,10 @@ export default {
     width: 20%;
     height: 100%;
     .top {
-      height: 60%;
+      height: 65%;
     }
     .bottom {
-      height: 40%;
+      height: 35%;
     }
   }
   .center {

src/views/projectAdmin/zjsj/security/leftBottom.vue

@@ -42,6 +42,7 @@ export default {
   }
   .tbody {
     height: calc(100% - 30px);
+    font-size: 12px;
   }
   .row {
     display: flex;

src/views/projectAdmin/zjsj/security/leftTop.vue

@@ -4,7 +4,7 @@
       <div class="dllm">
         <div class="woria">
           <JRingChart
-            :title="{ text: '安全隐患', subTitle: '987条件', fontSize: 16 }"
+            :title="{ text: '安全隐患', subTitle: '987条件', fontSize: 14 }"
             :color="['#6EE4F0', '#E7622A']"
             :data="[{ value: 2314 }, { value: 987 }]"
             :radius="['60%', '85%']"
@@ -34,7 +34,7 @@
       <div class="dllm">
         <div class="woria">
           <JRingChart
-            :title="{ text: '质量整改', subTitle: '987条件', fontSize: 16 }"
+            :title="{ text: '质量整改', subTitle: '987条件', fontSize: 14 }"
             :color="['#6EE4F0', '#E7622A']"
             :data="[{ value: 2314 }, { value: 987 }]"
             :radius="['60%', '85%']"
@@ -116,7 +116,7 @@ export default {
 
 <style lang="less" scoped>
 .charts {
-  height: 50%;
+  height: 47%;
   display: flex;
   color: #fff;
   .dllm {
@@ -172,14 +172,15 @@ export default {
   }
 }
 .security-list {
-  height: 50%;
+  margin-top: 2%;
+  height: 48%;
   color: #fff;
   .thead {
     color: #6ae3eb;
   }
   .tbody {
     height: calc(100% - 36px);
-    font-size: 14px;
+    font-size: 12px;
   }
   .row {
     width: 98%;
@@ -198,13 +199,13 @@ export default {
     .td {
       text-align: center;
       &:nth-child(1) {
-        width: 30%;
+        width: 28%;
       }
       &:nth-child(2) {
-        width: calc(70% - 70px);
+        width: calc(72% - 80px);
       }
       &:nth-child(3) {
-        width: 70px;
+        width: 80px;
       }
       &.orange {
         color: #e7622a;

src/views/projectAdmin/zjsj/security/rightTop.vue

@@ -37,8 +37,10 @@ export default {
     width: 100%;
     height: 176px;
     .device-name {
+      margin-top: 20px;
       height: 36px;
       line-height: 36px;
+      font-size: 12px;
     }
     .info {
       height: 22px;