Ver código fonte

style(ModuleTwo): 统一标题类名并调整样式

将 card-title 统一改为 chart-title 并调整字体大小和对齐方式
huoyi 2 dias atrás
pai
commit
9997540e69

+ 17 - 18
src/views/blockingData/blockingDataScreen/components/ModuleTwo.vue

@@ -3,7 +3,7 @@
3
     <div class="module-two-content">
3
     <div class="module-two-content">
4
       <div class="top-row">
4
       <div class="top-row">
5
         <div class="table-card">
5
         <div class="table-card">
6
-          <div class="card-title">查堵-主管分管榜</div>
6
+          <div class="chart-title">查堵-主管分管榜</div>
7
           <div class="rank-table">
7
           <div class="rank-table">
8
             <div v-for="(item, index) in rankData1" :key="index" class="rank-row">
8
             <div v-for="(item, index) in rankData1" :key="index" class="rank-row">
9
               <span class="rank-number" :class="'rank-' + (index + 1)">NO.{{ index + 1 }}</span>
9
               <span class="rank-number" :class="'rank-' + (index + 1)">NO.{{ index + 1 }}</span>
@@ -13,7 +13,7 @@
13
           </div>
13
           </div>
14
         </div>
14
         </div>
15
         <div class="table-card">
15
         <div class="table-card">
16
-          <div class="card-title">查堵-班组排行</div>
16
+          <div class="chart-title">查堵-班组排行</div>
17
           <div class="rank-table">
17
           <div class="rank-table">
18
             <div v-for="(item, index) in rankData2" :key="index" class="rank-row">
18
             <div v-for="(item, index) in rankData2" :key="index" class="rank-row">
19
               <span class="rank-number" :class="'rank-' + (index + 1)">NO.{{ index + 1 }}</span>
19
               <span class="rank-number" :class="'rank-' + (index + 1)">NO.{{ index + 1 }}</span>
@@ -23,7 +23,7 @@
23
           </div>
23
           </div>
24
         </div>
24
         </div>
25
         <div class="table-card">
25
         <div class="table-card">
26
-          <div class="card-title">查堵-人员榜</div>
26
+          <div class="chart-title">查堵-人员榜</div>
27
           <div class="rank-table">
27
           <div class="rank-table">
28
             <div v-for="(item, index) in rankData3" :key="index" class="rank-row">
28
             <div v-for="(item, index) in rankData3" :key="index" class="rank-row">
29
               <span class="rank-number" :class="'rank-' + (index + 1)">NO.{{ index + 1 }}</span>
29
               <span class="rank-number" :class="'rank-' + (index + 1)">NO.{{ index + 1 }}</span>
@@ -33,40 +33,40 @@
33
           </div>
33
           </div>
34
         </div>
34
         </div>
35
       </div>
35
       </div>
36
-      
36
+
37
       <div class="middle-row">
37
       <div class="middle-row">
38
         <div class="chart-card">
38
         <div class="chart-card">
39
-          <div class="card-title">查堵-物品位置分布</div>
39
+          <div class="chart-title">查堵-物品位置分布</div>
40
           <div ref="chart1" class="echarts"></div>
40
           <div ref="chart1" class="echarts"></div>
41
         </div>
41
         </div>
42
         <div class="chart-card">
42
         <div class="chart-card">
43
-          <div class="card-title">查堵-原因分类</div>
43
+          <div class="chart-title">查堵-原因分类</div>
44
           <div ref="chart2" class="echarts"></div>
44
           <div ref="chart2" class="echarts"></div>
45
         </div>
45
         </div>
46
       </div>
46
       </div>
47
-      
47
+
48
       <div class="bottom-row">
48
       <div class="bottom-row">
49
         <div class="chart-card">
49
         <div class="chart-card">
50
-          <div class="card-title">查堵-开机人员年限分布</div>
50
+          <div class="chart-title">查堵-开机人员年限分布</div>
51
           <div ref="chart3" class="echarts"></div>
51
           <div ref="chart3" class="echarts"></div>
52
         </div>
52
         </div>
53
         <div class="chart-card">
53
         <div class="chart-card">
54
-          <div class="card-title">查堵-开机人员性别比例</div>
54
+          <div class="chart-title">查堵-开机人员性别比例</div>
55
           <div ref="chart4" class="echarts"></div>
55
           <div ref="chart4" class="echarts"></div>
56
         </div>
56
         </div>
57
         <div class="chart-card">
57
         <div class="chart-card">
58
-          <div class="card-title">查堵-图像难易程度比例</div>
58
+          <div class="chart-title">查堵-图像难易程度比例</div>
59
           <div ref="chart5" class="echarts"></div>
59
           <div ref="chart5" class="echarts"></div>
60
         </div>
60
         </div>
61
       </div>
61
       </div>
62
-      
62
+
63
       <div class="extra-row">
63
       <div class="extra-row">
64
         <div class="chart-card">
64
         <div class="chart-card">
65
-          <div class="card-title">大队开机人员查堵分布</div>
65
+          <div class="chart-title">大队开机人员查堵分布</div>
66
           <div ref="chart6" class="echarts"></div>
66
           <div ref="chart6" class="echarts"></div>
67
         </div>
67
         </div>
68
         <div class="chart-card">
68
         <div class="chart-card">
69
-          <div class="card-title">大队开机人员查堵分布</div>
69
+          <div class="chart-title">大队开机人员查堵分布</div>
70
           <div ref="chart7" class="echarts"></div>
70
           <div ref="chart7" class="echarts"></div>
71
         </div>
71
         </div>
72
       </div>
72
       </div>
@@ -279,12 +279,11 @@ onMounted(() => {
279
   min-height: 120px;
279
   min-height: 120px;
280
 }
280
 }
281
 
281
 
282
-.card-title {
283
-  font-size: 11px;
284
-  color: #333;
282
+.chart-title {
283
+  font-size: 17px;
284
+  color: black;
285
   margin-bottom: 5px;
285
   margin-bottom: 5px;
286
-  text-align: center;
287
-  font-weight: 500;
286
+  text-align: left;
288
 }
287
 }
289
 
288
 
290
 .rank-table {
289
 .rank-table {