修改数据首页样式

src/containers/Dashboard/EquipmentList/EquipmentListChart.vue

@@ -5,18 +5,33 @@
       :key="index"
       class="Dashboard-Equipment-item"
     >
-      <div class="Dashboard-Equipment-icon" v-if="index === 0">
+      <div
+        class="Dashboard-Equipment-icon"
+        v-if="index === 0"
+      >
         <img src="@/assets/images/dashboard/icon_no.1@2x.png" />
       </div>
-      <div class="Dashboard-Equipment-icon" v-else-if="index === 1">
+      <div
+        class="Dashboard-Equipment-icon"
+        v-else-if="index === 1"
+      >
         <img src="@/assets/images/dashboard/icon_no.2@2x.png" />
       </div>
-      <div class="Dashboard-Equipment-icon" v-else-if="index === 2">
+      <div
+        class="Dashboard-Equipment-icon"
+        v-else-if="index === 2"
+      >
         <img src="@/assets/images/dashboard/icon_no.3@2x.png" />
       </div>
-      <div class="Dashboard-Equipment-icon" v-else>NO.{{ index + 1 }}</div>
+      <div
+        class="Dashboard-Equipment-icon"
+        v-else
+      >NO.{{ index + 1 }}</div>
       <div class="Dashboard-Equipment-name">{{ item.equipmentNumber }}</div>
-      <div class="Dashboard-Equipment-location">
+      <div
+        class="Dashboard-Equipment-location"
+        :title="item.equipmentPosition"
+      >
         {{ item.equipmentPosition }}
       </div>
       <div class="Dashboard-Equipment-money">￥{{ item.money.toFixed(2) }}</div>
@@ -66,6 +81,10 @@ export default {
     }
     .Dashboard-Equipment-location {
       width: 200px;
+      height: 1em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
     .Dashboard-Equipment-money {
       font-size: 16px;

src/containers/Dashboard/SeviceRatio/SeviceRatioChart.vue

@@ -70,11 +70,10 @@ export default {
             `;
         },
         'g2-legend': {
-          width: '130px',
+          width: '125px',
           // left: '-20px',
         },
         'g2-legend-list-item': {
-          height: '22px',
           color: '#333',
         },
         'g2-legend-marker': {
@@ -92,9 +91,9 @@ export default {
       // 辅助元素
       this.chart.guide().html({
         position: ['50%', '50%'],
-        html: `<div style="color:#333;font-size:20px;text-align: center;">
+        html: `<div class="SeviceRatio-centerText">
             <span class="SeviceRatio-percent">0.00</span>%<br>
-            <span class="SeviceRatio-serviceName" style="font-size:16px;"></span>
+            <span class="SeviceRatio-serviceName" ></span>
         </div>`,
         alignX: 'middle',
         alignY: 'middle',
@@ -134,3 +133,27 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+@import '@/assets/styles/variables.scss';
+#SeviceRatio {
+  .SeviceRatio-centerText {
+    color: #333;
+    font-size: 20px;
+    text-align: center;
+  }
+  .SeviceRatio-serviceName {
+    font-size: 16px;
+  }
+}
+@media screen and (max-width: $bigScreenWidth) {
+  #SeviceRatio {
+    .SeviceRatio-centerText {
+      font-size: 16px;
+    }
+    .SeviceRatio-serviceName {
+      font-size: 14px;
+    }
+  }
+}
+</style>