大屏修改

sub-government-screen-service/src/views/home/components/inputs.vue

@@ -50,12 +50,12 @@ let topTitle = ref('');
 let pos = ref('');
 
 const datalist = reactive([
-  { label: '农机使用(台)', value: 8000, icon: 'farmuse.png' },
+  { label: '种子使用(吨)', value: 4800, icon: 'provenance.png' },
   { label: '农药使用(吨)', value: 5000, icon: 'pesticide.png' },
-  { label: '肥料使用(吨)', value: 9000, icon: 'fertilizer.png' },
+  { label: '化肥使用(吨)', value: 9000, icon: 'fertilizer.png' },
-  { label: '种源使用', value: 4800, icon: 'provenance.png' },
-  { label: '兽药(吨)', value: 10, icon: 'animalm.png' },
   { label: '饲料(吨)', value: 88943, icon: 'feeduse.png' },
+  { label: '兽药(吨)', value: 10, icon: 'animalm.png' },
+  { label: '农机使用(台)', value: 8000, icon: 'farmuse.png' },
 ]);
 
 onMounted(() => {

sub-government-screen-service/src/views/trace/components/codeNumCharts.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="code-num-charts">
     <div class="code-num-txt" :style="{ 'background-image': 'url(' + getAssetsFile('images/trace/bg1.png') + ')' }">
-      <div class="num-txt-pos">
+      <template v-for="(n, index) in valData" :key="index">
-        <template v-for="(n, index) in valData" :key="index">
+        <div class="num-txt-warp">
           <div class="num-txt">
             <div class="val">{{ n.value }}</div>
             <div class="label">{{ n.name }}</div>
           </div>
-        </template>
+        </div>
-      </div>
+      </template>
     </div>
     <div class="code-pie">
       <custom-echart-pie-gauge :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
@@ -271,13 +271,13 @@ div {
     top: 50%;
     width: 80%;
     transform: translateY(-50%);
-    background-size: contain;
+    background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: left center;
-    height: 100%;
+    height: 90%;
-    .num-txt-pos {
+    .num-txt-warp {
       width: 100%;
-      height: 100%;
+      height: calc((100% - 4px) / 2);
       display: inline-flex;
       justify-content: center;
       flex-direction: column;

sub-government-screen-service/src/views/trace/components/mainPartCharts.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="main-part-charts">
     <div class="code-num-txt" :style="{ 'background-image': 'url(' + getAssetsFile('images/trace/bg2.png') + ')' }">
-      <div class="num-txt-pos">
+      <template v-for="(n, index) in valData" :key="index">
-        <template v-for="(n, index) in valData" :key="index">
+        <div class="num-txt-warp">
           <div class="num-txt">
             <div class="label">
-              <span>{{ n.name }}</span>
+              <span class="label-val">{{ n.name }}</span>
             </div>
             <div class="val">
               <span class="val-val">{{ n.value }}</span>
               <span class="unit">{{ n.unit }}</span>
             </div>
           </div>
-        </template>
+        </div>
-      </div>
+      </template>
     </div>
     <div class="code-pie">
       <custom-echart-pie-gauge :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
@@ -265,26 +265,30 @@ div {
     position: absolute;
     right: 0;
     top: 50%;
-    width: 80%;
+    width: 60%;
     transform: translateY(-50%);
-    background-size: contain;
+    height: 90%;
+    background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: left center;
-    height: 100%;
+    display: inline-flex;
-    padding: 10% 0 10% 18%;
+    justify-content: space-around;
-    .num-txt-pos {
+    flex-direction: column;
+    gap: 4;
+    .num-txt-warp {
       width: 100%;
-      height: 100%;
+      padding-left: 18%;
       display: inline-flex;
       justify-content: center;
       flex-direction: column;
+      height: calc((100% - 8px) / 3);
     }
     .num-txt {
       width: 72%;
       display: inline-flex;
+
       justify-content: space-between;
       padding: 0 16px;
-      line-height: 30px;
       .val,
       .label {
         vertical-align: middle;
@@ -303,15 +307,20 @@ div {
         }
       }
       .label {
-        font-size: 12px;
-        font-weight: bold;
         display: inline-flex;
-        transform: skewX(-8deg);
+        flex-direction: column;
-        background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+        justify-content: center;
-        -webkit-background-clip: text;
+        .label-val {
-        letter-spacing: 1px;
+          font-size: 12px;
-        color: #fff;
+          font-weight: bold;
-        text-shadow: -2px 0 0 1px #add8f1;
+          display: inline-flex;
+          transform: skewX(-8deg);
+          background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+          -webkit-background-clip: text;
+          letter-spacing: 1px;
+          color: #fff;
+          text-shadow: -2px 0 0 1px #add8f1;
+        }
       }
 
       .unit {