update:缺陷页面绘制

src/views/quality/defectdata.vue

@@ -2,7 +2,9 @@
   <div style="background: #F5F7FC; margin-top: 32px;">
     <div style="display: flex; width:100%; ">
       <div style="margin: 10px; width:25%; height:calc(65vh); background:#ffffff;">
-        <img src="../../assets/imgs/settime.png" height="18px" style="margin:8px;vertical-align:middle;">
+        <img src="../../assets/imgs/pic-icon.png"
+             height="18px"
+             style="margin:8px;vertical-align:middle;">
         <span style="color: #2B354B; font-size:14px;">选择视图</span>
         <div style="width:calc(100wh -16px); margin: 2px 8px 8px 8px; height:1px;background:#F1F3FA" />
         <div style="height: calc(65vh - 200px); text-align:center; padding-bottom: 10px; overflow:scroll">
@@ -25,7 +27,9 @@
         </div>
         <div style="width:100%; height:10px;background:#F1F3FA" />
         <div class="package">
-          <img src="../../assets/imgs/settime.png" height="18px" style="margin:8px;vertical-align:middle;">
+          <img src="../../assets/imgs/process-icon.png"
+               height="18px"
+               style="margin:8px;vertical-align:middle;">
           <span style="color: #2B354B; font-size:14px;">运行</span>
           <div style="width:calc(100wh -16px); margin: 2px 8px 8px 8px; height:1px;background:#F1F3FA" />
           <ul>
@@ -43,19 +47,26 @@
         </div>
       </div>
       <div style="margin: 10px 10px 10px 0; width:20%; background:#ffffff;">
-        <img src="../../assets/imgs/settime.png" height="18px" style="margin:8px;vertical-align:middle;">
+        <img src="../../assets/imgs/see-icon.png"
+             height="18px"
+             style="margin:8px;vertical-align:middle;">
         <span style="color: #2B354B; font-size:14px;">缺陷原因</span>
         <div style="width:calc(100wh - 16px); margin: 2px 8px 8px 8px; height:1px;background:#F1F3FA" />
         <div style="height: calc(65vh - 70px) ">
-          <el-collapse v-model="activeNames" style="margin: 0 8px;" @change="handleChange">
-            <el-collapse-item title="缺陷原因1" name="1">
+          <el-collapse v-model="activeNames"
+                       style="margin: 0 8px;"
+                       @change="handleChange">
+            <el-collapse-item title="缺陷原因1"
+                              name="1">
               <div>原因1</div>
             </el-collapse-item>
-            <el-collapse-item title="缺陷原因2" name="2">
+            <el-collapse-item title="缺陷原因2"
+                              name="2">
               <div>原因2</div>
               <div>原因2。</div>
             </el-collapse-item>
-            <el-collapse-item title="缺陷原因3" name="3">
+            <el-collapse-item title="缺陷原因3"
+                              name="3">
               <div>原因3</div>
               <div>原因3</div>
             </el-collapse-item>
@@ -63,12 +74,15 @@
         </div>
       </div>
       <div style="margin: 10px 10px 10px 0; width:55%; background:#ffffff;">
-        <img src="../../assets/imgs/settime.png" height="18px" style="margin:8px;vertical-align:middle;">
+        <img src="../../assets/imgs/see-icon.png"
+             height="18px"
+             style="margin:8px;vertical-align:middle;">
         <span style="color: #2B354B; font-size:14px;">视角-KHI60059-C_A</span>
         <div style="width:calc(100wh - 16px); margin: 2px 8px 8px 8px; height:1px;background:#F1F3FA" />
         <div style="margin:10px; padding: 10px; background:#F1F3FA">
           <div style="background:#FFFFFF; height: calc(54vh); text-align:center;">
-            <img src="../../assets/imgs/位图.png" width="55%">
+            <img src="../../assets/imgs/位图.png"
+                 width="55%">
           </div>
         </div>
       </div>
@@ -98,14 +112,14 @@
 export default {
   data() {
     return {
-      activeNames: ['1']
+      activeNames: ['1'],
     }
   },
   methods: {
     handleChange(val) {
       console.log(val)
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -113,16 +127,16 @@ ul {
   margin: 4px;
   padding: 0;
   list-style: none;
-  background: #FCFDFE;
-  border: 1px solid #D3DAE8;
+  background: #fcfdfe;
+  border: 1px solid #d3dae8;
   height: 95px;
   overflow-y: scroll;
 }
 li {
   margin: 4px 8px 0 8px;
   padding: 5px;
-  background: #EAF8FC;
-  border: 1px solid #D3DAE8;
+  background: #eaf8fc;
+  border: 1px solid #d3dae8;
   cursor: pointer;
   line-height: 17px;
 }
@@ -132,9 +146,9 @@ li {
 }
 .img-div {
   width: 47%;
-  display:inline-block;
-  text-align:center;
-  background: #F5F7FC;
+  display: inline-block;
+  text-align: center;
+  background: #f5f7fc;
   margin-bottom: 5px;
 }
 .img-div img {
@@ -143,11 +157,11 @@ li {
 }
 .img-div div {
   width: 100%;
-  background: #F5F7FC;
+  background: #f5f7fc;
   font-size: 14px;
 }
 ::-webkit-scrollbar-thumb {
-  background: #DCE2F0;
+  background: #dce2f0;
 }
 /deep/ .el-collapse {
   border: 1px solid #e6ebf5;
@@ -155,7 +169,7 @@ li {
 /deep/ .el-collapse-item__content {
   padding: 0 10px;
 }
- /deep/ .el-collapse-item__header {
+/deep/ .el-collapse-item__header {
   padding-left: 5px;
 }
 </style>