优化

src/views/home/components/MunicipalCompany.vue

@@ -104,43 +104,61 @@
           <div class="content" v-if="!isBusinessBar">
             <div class="content-item content-item2">
               <div class="item-box">
+                <img src="@/assets/images/home/card1-1.png" class="img-card" alt="" />
+                <div class="num-box">
                   <div class="num2">{{ dataAll.selfUseApplyNum || 0 }}</div>
                   <div>出库总数</div>
                 </div>
               </div>
+            </div>
             <div class="content-item content-item2">
               <div class="item-box">
+                <img src="@/assets/images/home/card1-2.png" class="img-card" alt="" />
+                <div class="num-box">
                   <div class="num2">{{ dataAll.selfUseOutNum || 0 }}</div>
                   <div>装备出库</div>
                 </div>
               </div>
+            </div>
             <div class="content-item content-item2">
               <div class="item-box">
+                <img src="@/assets/images/home/card1-3.png" class="img-card" alt="" />
+                <div class="num-box">
                   <div class="num2">{{ dataAll.selfUseAuditNum || 0 }}</div>
                   <div>工具出库</div>
                 </div>
               </div>
             </div>
+          </div>
           <div class="content" v-if="!isBusinessBar">
             <div class="content-item content-item2">
               <div class="item-box">
+                <img src="@/assets/images/home/card1-4.png" class="img-card" alt="" />
+                <div class="num-box">
                   <div class="num2">{{ dataAll.returnApplyNum || 0 }}</div>
                   <div>退库总数</div>
                 </div>
               </div>
+            </div>
             <div class="content-item content-item2">
               <div class="item-box">
+                <img src="@/assets/images/home/card1-5.png" class="img-card" alt="" />
+                <div class="num-box">
                   <div class="num2">{{ dataAll.returnAuditApplyNum || 0 }}</div>
                   <div>装备退库</div>
                 </div>
               </div>
+            </div>
             <div class="content-item content-item2">
               <div class="item-box">
+                <img src="@/assets/images/home/card1-6.png" class="img-card" alt="" />
+                <div class="num-box">
                   <div class="num2">{{ dataAll.returnAuditRepairNum || 0 }}</div>
                   <div>工具退库</div>
                 </div>
               </div>
             </div>
+          </div>
           <BarChart
             v-if="isBusinessBar"
             :labels="['出库总数', '装备出库', '工具出库', '退库总数', '装备退库', '工具退库']"
@@ -165,43 +183,61 @@
           <div class="content" v-if="!isShareBar">
             <div class="content-item content-item2">
               <div class="item-box">
-                <div class="num2">{{ shareData.sellerNum || 0 }}</div>
+                <img src="@/assets/images/home/card2-1.png" class="img-card" alt="" />
+                <div class="num-box">
+                  <div class="num3">{{ shareData.sellerNum || 0 }}</div>
                   <div>出租订单</div>
                 </div>
               </div>
+            </div>
             <div class="content-item content-item2">
               <div class="item-box">
-                <div class="num2">{{ shareData.sellerMaNum || 0 }}</div>
+                <img src="@/assets/images/home/card2-2.png" class="img-card" alt="" />
+                <div class="num-box">
+                  <div class="num3">{{ shareData.sellerMaNum || 0 }}</div>
                   <div>出租装备</div>
                 </div>
               </div>
+            </div>
             <div class="content-item content-item2">
               <div class="item-box">
-                <div class="num2">{{ shareData.sellerToolNum || 0 }}</div>
+                <img src="@/assets/images/home/card2-3.png" class="img-card" alt="" />
+                <div class="num-box">
+                  <div class="num3">{{ shareData.sellerToolNum || 0 }}</div>
                   <div>出租工具</div>
                 </div>
               </div>
             </div>
+          </div>
           <div class="content" v-if="!isShareBar">
             <div class="content-item content-item2">
               <div class="item-box">
-                <div class="num2">{{ shareData.buyerNum || 0 }}</div>
+                <img src="@/assets/images/home/card2-4.png" class="img-card" alt="" />
+                <div class="num-box">
+                  <div class="num3">{{ shareData.buyerNum || 0 }}</div>
                   <div>租赁订单</div>
                 </div>
               </div>
+            </div>
             <div class="content-item content-item2">
               <div class="item-box">
-                <div class="num2">{{ shareData.buyerMaNum || 0 }}</div>
+                <img src="@/assets/images/home/card2-5.png" class="img-card" alt="" />
+                <div class="num-box">
+                  <div class="num3">{{ shareData.buyerMaNum || 0 }}</div>
                   <div>租赁装备</div>
                 </div>
               </div>
+            </div>
             <div class="content-item content-item2">
               <div class="item-box">
-                <div class="num2">{{ shareData.buyerToolNum || 0 }}</div>
+                <img src="@/assets/images/home/card2-6.png" class="img-card" alt="" />
+                <div class="num-box">
+                  <div class="num3">{{ shareData.buyerToolNum || 0 }}</div>
                   <div>租赁工具</div>
                 </div>
               </div>
             </div>
+          </div>
           <BarChart
             v-if="isShareBar"
             :labels="['出租订单', '出租装备', '出租工具', '租赁订单', '租赁装备', '租赁工具']"
@@ -226,24 +262,33 @@
           <div class="content" v-if="!isManageBar">
             <div class="content-item content-item2">
               <div class="item-box">
-                <div class="num2">{{ dataAll.warehousingNum || 0 }}</div>
+                <img src="@/assets/images/home/card3-1.png" class="img-card" alt="" />
+                <div class="num-box">
+                  <div class="num4">{{ dataAll.warehousingNum || 0 }}</div>
                   <div>当月入库</div>
                 </div>
               </div>
+            </div>
             <div class="content-item content-item2">
               <div class="item-box">
-                <div class="num2">{{ dataAll.repairQualifiedNum || 0 }}</div>
+                <img src="@/assets/images/home/card3-2.png" class="img-card" alt="" />
+                <div class="num-box">
+                  <div class="num4">{{ dataAll.repairQualifiedNum || 0 }}</div>
                   <div>当月维修</div>
                 </div>
               </div>
             </div>
+          </div>
           <div class="content" v-if="!isManageBar">
             <div class="content-item3" style="width: 48%">
               <div class="item-box">
-                <div class="num2">{{ dataAll.repairRetireNum || 0 }}</div>
+                <img src="@/assets/images/home/card3-3.png" class="img-card" alt="" />
+                <div class="num-box">
+                  <div class="num4">{{ dataAll.repairRetireNum || 0 }}</div>
                   <div>当月退役</div>
                 </div>
               </div>
+            </div>
             <!-- <div class="" style="flex: 1"> </div> -->
           </div>
           <BarChart
@@ -407,6 +452,7 @@ export default {
       const chart = echarts.init(chartDom)
 
       const option = {
+        color: ['#56AEA1', '#4772D7'],
         tooltip: {
           trigger: 'item',
           formatter: (params) => {
@@ -615,6 +661,7 @@ export default {
     height: 140px;
     display: flex;
     align-items: center;
+    justify-content: center;
     overflow: hidden;
     border-radius: 16px;
     background: linear-gradient(180deg, #fff7f7 0%, #fff 60%);
@@ -631,7 +678,7 @@ export default {
     }
     .num {
       margin-bottom: 10px;
-      font-size: 21px;
+      font-size: 26px;
       color: red;
       font-weight: 800;
     }
@@ -650,28 +697,53 @@ export default {
     .item-box {
       flex: 1;
       display: flex;
-      flex-direction: column;
+      // flex-direction: column;
       justify-content: center;
       align-items: center;
       color: #75787d;
       font-size: 13px;
     }
-    .num {
-      margin-bottom: 10px;
-      font-size: 21px;
-      color: red;
-      font-weight: 800;
-    }
   }
   .content-item2 {
     background: linear-gradient(180deg, #e8f9f3 0%, #fff 60.1%);
     box-shadow: 0 0 0.5px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
+    .item-box {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      color: #75787d;
+      font-size: 13px;
     }
+  }
+}
+.num-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
 .num2 {
   margin-bottom: 10px;
-  font-size: 21px;
-  color: #54a798;
+  font-size: 26px;
+  color: #25d0ab;
+  font-weight: 800;
+  max-width: 80px;
+  word-wrap: break-word;
+}
+.num3 {
+  margin-bottom: 10px;
+  font-size: 26px;
+  color: #25BAD0;
+  font-weight: 800;
+  max-width: 80px;
+  word-wrap: break-word;
+}
+.num4 {
+  margin-bottom: 10px;
+  font-size: 26px;
+  color: #10D08D;
   font-weight: 800;
 }
 
@@ -701,4 +773,9 @@ export default {
 .scroll-list li.odd {
   background-color: #ebf8f3;
 }
+.img-card {
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
+}
 </style>