优化代码

src/views/quality/components/drawerAll.vue

@@ -12,16 +12,16 @@
         </div>
       </div>
       <div v-if="Statistics.title === '需求分布图数据' || Statistics.title === '任务分布图数据'" class="qz-drawer-H">
-        <span class="fontSize">{{ status }}</span>为<span class="fontSize">{{ type }}</span>的{{ Statistics.toType }}
+        <span>{{ status }}</span>为<span>{{ type }}</span>的{{ Statistics.toType }}
       </div>
       <div v-if="Statistics.title === '状态停留分布图数据'" class="qz-drawer-H">
-        在<span class="fontSize">{{ type }}</span>状态停留时长为<span class="fontSize">{{ typeTow }}</span>的{{ Statistics.toType }}
+        在<span>{{ type }}</span>状态停留时长为<span>{{ typeTow }}</span>的{{ Statistics.toType }}
       </div>
       <div v-if="Statistics.title === '模块分布数据'" class="qz-drawer-H" style="margin: 20px 30px 10px;">
-        模块<span class="fontSize">{{ Statistics.name }}</span>的缺陷
+        模块<span>{{ Statistics.name }}</span>的缺陷
       </div>
       <div v-if="Statistics.title === `${Statistics.qz_holiday}的修复时长区间数据`" class="qz-drawer-H" style="margin: 20px 30px 10px;">
-        {{ Statistics.qz_holiday }}修复时间区间为<span class="fontSize">{{ type }}</span>的<span class="fontSize">{{ typeTow }}</span>级缺陷
+        {{ Statistics.qz_holiday }}修复时间区间为<span>{{ type }}</span>的<span>{{ typeTow }}</span>级缺陷
       </div>
       <qzTable
         :data="tableData"
@@ -91,7 +91,7 @@ export default {
     data: {
       handler(newV, oldV) {
         if (newV) {
-          // console.log(newV, this.drawer, '刚进来')
+          console.log(newV, this.drawer, '刚进来')
           this.Statistics = newV
           this.list = newV.xaxis
           this.type = newV.name
@@ -260,24 +260,23 @@ export default {
   margin: 0 30px;
   color: #444444;
 }
+.qz-drawer-H span {
+  color: #333333;
+  font-weight: 600;
+}
+.qz-message { color: #444; font-size: 14px;}
 .qz-drawer-grade {
-  color: #444;
-  font-size: 14px;
+  @extend .qz-message;
   position: absolute;
   top: 28px;
   left: 185px;
 }
 .qz-drawer-grade-tow {
-   color: #444;
-  font-size: 14px;
+  @extend .qz-message;
   position: absolute;
   top: 28px;
   left: 150px;
 }
-.fontSize {
-  color: #333333;
-  font-weight: 600;
-}
 >>> :focus{outline:0;}
 >>>.el-table::before {
     left: 0;
@@ -285,14 +284,6 @@ export default {
     width: 100%;
     height: 0px;
 }
-
-.div_priority {
-  color: #ffffff;
-  width:fit-content;
-  padding: 0 12px;
-  border-radius: 4px;
-  margin-left: 4px;
-}
 >>>.el-drawer__header {
     color: #444;
     font-size: 20px;