1

src/views/center.vue

 <template>
   <div id="center">
     <div class="up">
-      <div class="item" style="height: 2.2rem">
-        <span style="font-size: 0.3875rem;">库存物资总数</span>
-        <dv-decoration-12 style="width: 2rem;height: 2rem;margin: 0 auto;color: #fff" :color="['#046DB5', '#046DB5']">
-          <span style="font-size: 0.6rem;color: rgb(61,231,201)">{{ amount }}</span><span style="color: rgb(61,231,201);font-size: 0.56rem;margin-left: 10px;">件</span></dv-decoration-12>
+      <div class="item" style="height: 2.2rem;display: flex;justify-content: space-evenly">
+        <div>
+          <span style="font-size: 0.3875rem">库存物资总数</span>
+          <dv-decoration-12 style="width: 2rem;height: 2rem;margin-top: 15px;color: #fff" :color="['#046DB5', '#046DB5']">
+            <span style="font-size: 0.6rem;color: rgb(61,231,201)">{{ amount }}</span><span style="color: rgb(61,231,201);font-size: 0.56rem;margin-left: 10px;">件</span></dv-decoration-12>
+        </div>
+        <div>
+          <span style="font-size: 0.3875rem;">品种总数</span>
+          <dv-border-box-8 style="width: 2rem;height: 2rem;margin-top: 15px;color: #fff;" >
+            <div style="font-size: 0.6rem;color: rgb(61,231,201);height: 100%;width: 100%;display: flex;justify-content: center;align-items: center">
+              {{ categoryAmount }} 种
+            </div>
+          </dv-border-box-8>
+        </div>
+
       </div>
-      <div class="item" style="height: 1.6rem;margin-top: 0.2rem;">
-        <span style="font-size: 0.3875rem;display: block;">本年度收发总数</span>
+      <div class="item" style="height: 1.2rem;margin-top: 0.30rem;">
+        <span style="font-size: 0.3075rem;display: block;margin-top: 20px">本年度收发总数</span>
         <div style="display: flex;">
-          <span style="font-size: 0.3875rem;margin-top: 55px;display: block;width: 20%;text-align: center;">收物:</span>
-          <dv-digital-flop :config="inAmount" style="height:1.625rem;width: 30%" />
-          <span style="font-size: 0.3875rem;margin-top: 55px;display: block;width: 20%;text-align: center;">发物:</span>
-          <dv-digital-flop :config="outAmount" style="height:1.625rem;width: 30%" />
+          <span style="font-size: 0.3075rem;margin-top: 45px;display: block;width: 20%;text-align: center;">收物:</span>
+          <dv-digital-flop :config="inAmount" style="height:1.325rem;width: 30%" />
+          <span style="font-size: 0.3075rem;margin-top: 45px;display: block;width: 20%;text-align: center;">发物:</span>
+          <dv-digital-flop :config="outAmount" style="height:1.325rem;width: 30%" />
         </div>
-        
+
       </div>
     </div>
-    <div class="extra">
+    <div class="extra" style="margin-top: 0.35rem;">
       <div class="item">
-      <span style="font-size: 0.3rem;">垛位总数</span>
-      <span style="margin-left: 38px;color: #03a9f4;font-size: 0.32rem;font-weight: 700;">{{ rackAmount }}</span>
+      <span style="font-size: 0.22rem;">垛位总数</span>
+      <span style="margin-left: 38px;color: #03a9f4;font-size: 0.22rem;font-weight: 700;">{{ rackAmount }}</span>
       </div>
     </div>
     <div class="down">
       <div class="leftNm">
         <div class="item">
           <span>工作垛位</span>
-          <span style="margin-left: 55px;font-size: 0.25rem;color: #03a9f4;">{{ workRackAmount }}</span>
+          <span style="margin-left: 45px;font-size: 0.22rem;color: #03a9f4;">{{ workRackAmount }}</span>
         </div>
         <div class="item">
           <span>有货垛位</span>
-          <span style="margin-left: 55px;font-size: 0.25rem;color: #03a9f4;">{{ usedRackAmount }}</span>
+          <span style="margin-left: 45px;font-size: 0.22rem;color: #03a9f4;">{{ usedRackAmount }}</span>
         </div>
         <div class="item">
           <span>无货垛位</span>
-          <span style="margin-left: 55px;font-size: 0.25rem;color: #03a9f4;">{{ nullRackAmount }}</span>
+          <span style="margin-left: 45px;font-size: 0.22rem;color: #03a9f4;">{{ nullRackAmount }}</span>
         </div>
       </div>
       <div class="percent">
@@ -54,6 +65,7 @@ export default {
     return {
       url: '/big/getGoodsByBig',
       amount: 0,
+      categoryAmount: 0,
       inAmount: {},
       outAmount: {},
       nullPalletAmount: 0,
@@ -86,6 +98,7 @@ export default {
     initData() {
       getAction(window._CONFIG['domianURL'] + this.url, {storeCode: this.$route.query.storeCode}).then(res => {
         this.amount = res.data.stockVo.amount
+        this.categoryAmount = res.data.stockVo.categoryAmount
         this.inAmount = {
           number: [res.data.stockVo.inAmount],
           content: "{nt}件",