fix: css better

src/components/BigScreen/AiAnalysis.vue

@@ -109,6 +109,7 @@ export default {
           left: "3%",
           right: "4%",
           bottom: "3%",
+          right: '8%',
           containLabel: true,
         },
         xAxis: [
@@ -116,6 +117,9 @@ export default {
             type: "category",
             boundaryGap: false,
             data: [],
+            // axisLabel: {
+            //     rotate: 10 // 设置倾斜角度，单位为度
+            // },
             axisLine: { lineStyle: { color: "#a3e4f5" } },
             axisTick: { show: false },
           },

src/components/BigScreen/BianpoMonitor.vue

@@ -161,8 +161,8 @@ export default {
   //background:no-repeat center center url('~@/assets/images/layout/side_l_md.png');background-size:100% 100%;
   // background-color: rgba(29, 57, 110, 0.65);
   &.title1 {
-    height: rem;
     width: 4.76rem;
+    margin-top: 0.1rem;
     background: no-repeat center center
       url("~@/assets/images/dpNew2/title1.png");
     background-size: 100% 100%;
@@ -203,6 +203,8 @@ export default {
   flex-direction: column;
   padding: 0.2rem;
   padding-top: 0.5rem;
+  padding-bottom: 0.15rem;
+
   .top {
     display: flex;
     align-items: center;
@@ -274,7 +276,7 @@ export default {
   .bottom {
     height: 2.8rem;
     overflow: hidden;
-    margin-top: 0.16rem;
+    margin-top: 0.06rem;
     .scrolling1 {
       min-height: 2.55rem;
       max-height: 2.55rem;
@@ -309,16 +311,16 @@ export default {
         // opacity: 0.5;
       }
       dd {
-        height: 0.4rem;
+        height: 0.47rem;
         // margin-bottom: 0.08rem;
         margin-left: 0;
-        color: #d3dfeb;
+        color: #fff;
         margin-right: 0px;
         display: grid;
         grid-template-columns: 1.5rem 0.8rem 0.9rem 0.8rem;
         // background-color: rgba(37,102,195,.3);
         text-align: center;
-        font-size: 0.14rem;
+        font-size: 0.16rem;
         align-items: center;
         border-bottom: 0.01rem solid #1f77c2;
       }
@@ -342,10 +344,12 @@ export default {
         // top: 0.4rem;
       }
       dt {
-        grid-template-columns: 2rem 0.8rem 0.9rem 0.8rem;
+        grid-template-columns: 2rem 1rem 1.5rem;
       }
       dd {
-        grid-template-columns: 2rem 0.8rem 0.9rem 0.8rem;
+        grid-template-columns: 2rem 1rem 1.5rem;
+
+
       }
     }
   }

src/components/BigScreen/QiaoliangMonitor.vue

@@ -4,7 +4,7 @@
       <h4>桥梁监测</h4>
     </div>
     <div class="m-body">
-      <div class="top" style="width: 100%; height: 50%">
+      <div class="top" style="width: 100%; height: 35%">
         <div class="echart-bt">
           <div class="echart-bg"></div>
           <div id="EchartsPie" class="EchartsPie"></div>
@@ -23,7 +23,7 @@
                 v-for="(item, index) in dataList"
                 :key="index"
               >
-                <span>{{ item.monName }}</span>
+                <span style="color:#fff;">{{ item.monName }}</span>
                 <span :style="{ color: colorBlock[index] }">{{
                   item.monDate
                 }}</span>
@@ -120,15 +120,17 @@ export default {
             showInLegend: true,
             depth: 15,
             dataLabels: {
-              enabled: false,
-              distance: 10,
-              color: "#fff",
+              enabled: true,
+              // distance: 10,
+              useHTML: true,
+            formatter:function(){
+              let name = this.point.name;
+						  let fontSize = '0.16rem'
+              return `<span style="color:${this.point.color};font-size:${fontSize};font-weight:500;">${name}: ${this.point.percentage.toFixed(1)}%</span>`
+            },
               style: {
                 textOutline: "none",
-                fontSize: "16",
-              },
-              formatter: function () {
-                return this.point.name + this.y + "%";
+                fontSize: "0.17rem",
               },
             },
           },
@@ -289,7 +291,7 @@ export default {
   flex-direction: column;
 
   &.title3 {
-    height: 4.81rem;
+    height: 4.3rem;
     width: 4.65rem;
     background: no-repeat center center
       url("~@/assets/images/dpNew2/title3.png");
@@ -344,7 +346,7 @@ export default {
   .bottom {
     height: 2.8rem;
     overflow: hidden;
-    margin-top: -0.16rem;
+    margin-top: -0.06rem;
     .dt {
       height: 0.42rem;
       line-height: 0.42rem;
@@ -355,7 +357,7 @@ export default {
 
       font-family: PingFang SC;
       font-weight: 500;
-      font-size: 0.18rem;
+      font-size: 0.17rem;
       text-align: center;
       border-radius: 4px 4px 0px 0px;
     }
@@ -376,8 +378,7 @@ export default {
         display: grid;
         grid-template-columns: 1.5rem 1.5rem 0.9rem;
         text-align: center;
-        background: #01689d;
-        opacity: 0.4;
+        background: #01689d52;
         font-size: 0.14rem;
         align-items: center;
         border-bottom: 0.01rem solid #1f77c2;

src/views/bigscreen.vue

@@ -39,7 +39,7 @@
             <!-- 应急演练结束 -->
           </div>
           <div class="side b0_right">
-            <div class="a-md34" id="amd34">
+            <div class="a-md34" id="amd34" style="height: 4.3rem;">
               <QiaoliangMonitor/>
             </div>
             <div class="a-md34" id="amd34">
@@ -369,7 +369,7 @@ footer{
       height: 0.63rem;
       position: absolute;
       top: 1.3rem;
-      left: 24%;
+      left: 28%;
       right: 0;
       z-index: 11;
       display: flex;
@@ -485,6 +485,7 @@ footer{
             position: relative;
             font-size: 0.44rem;
             line-height: 1;
+            letter-spacing: 0.04rem;
             margin: 0.23rem 0 0 0rem;
             font-weight: bold;
             color: #fff;