Changes

src/views/dashboard-screen/chard-wrap/card-wrap2.vue

@@ -57,7 +57,18 @@ export default {
       //grid-column-end: 3;
     }
 
+    &.o-r-1, &.o-r-2 {
+      & > div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+    }
+
     .value {
+      margin-left: 0.2vw;
+      font: normal 18px hxb;
       color: #00F2FF
     }
   }

src/views/dashboard-screen/dlsdxl/index.vue

@@ -1,10 +1,30 @@
 <template>
   <div class="chart-wrap">
     <div class="child c-1">
-      <div class="cr cr-1">100%</div>
-      <div class="cr cr-2">100%</div>
-      <div class="cr cr-3">100%</div>
-      <div class="cr cr-4">100%</div>
+      <div class="cr">
+        <div class="cr-1">
+          100%
+        </div>
+        <span class="label">第一季度</span>
+      </div>
+      <div class="cr">
+        <div class="cr-2">
+          100%
+        </div>
+        <span class="label">第二季度</span>
+      </div>
+      <div class="cr">
+        <div class="cr-3">
+          100%
+        </div>
+        <span class="label">第三季度</span>
+      </div>
+      <div class="cr">
+        <div class="cr-4">
+          100%
+        </div>
+        <span class="label">第四季度</span>
+      </div>
     </div>
     <div class="child c-2">
       <v-chart autoresize :option="option"/>
@@ -183,18 +203,47 @@ $xHeight: 120px;
       background-size: contain;
       background-position: center;
       display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
-      font-size: 1.2vw;
+
       font-weight: 600;
       color: white;
 
-      &.cr-1, &.cr-3 {
+      .label {
+        height: 20px;
+        flex-shrink: 0;
+        width: 100%;
+        text-align: center;
+        margin-bottom: -10px;
+        font-size: 16px;
+        mso-font-width: 400;
+      }
+
+      .cr-1, .cr-3 {
+        flex-grow: 1;
+        font-size: 1.2vw;
+        width: 100%;
         background-image: url("/static/images/shoudian_circular_1@2x.png");
+        background-repeat: no-repeat;
+        background-size: auto 100%;
+        background-position: center center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
-      &.cr-2, &.cr-4 {
+      .cr-2, .cr-4 {
+        flex-grow: 1;
+        font-size: 1.2vw;
+        width: 100%;
         background-image: url("/static/images/shoudian_circular_2@2x.png");
+        background-repeat: no-repeat;
+        background-size: auto 100%;
+        background-position: center center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
     }
   }

src/views/dashboard-screen/index.vue

@@ -108,6 +108,7 @@ import QbDlsbxjdx from '@/views/dashboard-screen/qb-dlsbxjdx/index.vue'
 import Jryl from '@/views/dashboard-screen/jryl/index.vue'
 import ChartMap from '@/views/dashboard-screen/chart-map/chartMap.vue'
 import dayjs from 'dayjs'
+
 require('dayjs/locale/zh-cn')
 export default {
   name: 'Dashboard',
@@ -141,6 +142,7 @@ export default {
   font-weight: 400;
   font-style: normal;
 }
+
 @font-face {
   font-family: "shr";
   src: url("shr.woff2") format('woff2'),;
@@ -148,10 +150,14 @@ export default {
   font-style: normal;
 }
 
-*{
+* {
   font: 400 auto shr;
 }
 
+.hxbFont {
+  font: 400 auto hxb;
+}
+
 .dashboard-container {
   width: 100%;
   height: 100%;
@@ -198,7 +204,7 @@ export default {
       font-size: 36px;
       font-weight: bold;
       color: white;
-      font: 400 auto hxb;
+      font: normal 36px hxb;
 
     }
   }

src/views/dashboard-screen/qb-dlsbxjdx/index.vue

@@ -322,13 +322,12 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
-
+    font: normal 0.6vw hxb;
     .c-item {
       color: #91FFFF;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 0.75vw;
       flex: 1;
       flex-shrink: 0;
       width: 100%;

src/views/dashboard-screen/syjhdxqk/index.vue

@@ -1,6 +1,12 @@
 <template>
-  <div class="chart-wrap">
-    <v-chart autoresize :option="option"/>
+  <div class="wrap">
+    <div class="chart-wrap">
+      <v-chart autoresize :option="option"/>
+
+    </div>
+    <div class="tip">
+      <img src="/static/images/syjhTIP.png">
+    </div>
   </div>
 </template>
 
@@ -23,7 +29,6 @@ export default {
       const offsetWidth = this.EchartfontSize(14)
       const triangleHeight = 8
       this.option = {
-        backgroundColor: 'rgb(2, 10, 33)',
         color: [],
         grid: {
           containLabel: true,
@@ -346,6 +351,24 @@ export default {
 <style scoped lang="scss">
 
 $xHeight: 120px;
+.wrap {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .tip {
+    position: absolute;
+    z-index: 1;
+    right: 1.5vw;
+    top: 0;
+    img{
+      height: 20px;
+      width: auto;
+      object-fit: cover;
+    }
+  }
+}
+
 .chart-wrap {
   width: 100%;
   height: 100%;

src/views/dashboard-screen/zydbsx/index.vue

@@ -66,6 +66,8 @@ export default {
     }
 
     .value{
+      font: normal 18px hxb;
+      color: #25e3fa;
       margin-left: auto;
     }
   }