主页

src/views/pastureData/Home.vue

@@ -3,7 +3,14 @@
     <div class="box">
       <div class="box_item" v-for="item in boxList" :key="item.id">
         <p>{{item.name}}</p>
-        <p>{{item.value}}</p>
+        <p class="number">
+          {{item.value}}
+          <template v-if="item.data !==0">
+            <i :class="['icon', item.isUp ? '' : 'icon_red']"></i>
+            <span v-if="item.isUp" class="icon_green">+{{item.data}}</span>
+            <span v-else class="icon_dev">-{{item.data}}</span>
+          </template>
+        </p>
       </div>
     </div>
     <div class="form_item">
@@ -118,31 +125,43 @@ export default {
           id: 1,
           name: '母猪总存栏',
           value: 2500,
+          data: 20,
+          isUp: true,
         },
         {
           id: 2,
           name: '配怀存栏',
-          value: 1689
+          value: 1689,
+          data: 20,
+          isUp: true,
         },
         {
           id: 3,
           name: '分娩存栏',
-          value: 1689
+          value: 1689,
+          data: 20,
+          isUp: false,
         },
         {
           id: 4,
           name: '后备存栏',
-          value: 1689
+          value: 1689,
+          data: 0,
+          isUp: true,
         },
         {
           id: 5,
           name: '公猪存栏',
-          value: 1689
+          value: 1689,
+          data: 20,
+          isUp: true,
         },
         {
           id: 6,
           name: '预计年出栏量',
-          value: 50000
+          value: 50000,
+          data: 20,
+          isUp: true,
         },
       ],
       pickerOptions: {
@@ -206,6 +225,9 @@ export default {
             }, [labelArr[1] || ''] )
           ]
       )
+    },
+    init() {
+
     }
   }
 }
@@ -250,4 +272,27 @@ export default {
     padding-right: 10px;
     /*padding: 10px;*/
   }
+  .icon {
+    display: inline-block;
+    background-image: url("../../assets/up.png");
+    width: 24px;
+    height: 24px;
+    background-size: 100% 100%;
+  }
+  .icon_red {
+    background-image: url("../../assets/decline.png");
+    background-size: 100% 100%;
+  }
+  .number {
+    font-size: 24px;
+    font-weight: 600;
+  }
+  .icon_green {
+    color: #33FA40;
+    font-size: 16px;
+  }
+  .icon_dev {
+    color: #DA331D;
+    font-size: 16px;
+  }
 </style>