第二次上传

src/router/index.js

@@ -10,6 +10,11 @@ const routes = [
     name: 'Home',
     component: Home
   },
+  {
+    path: '/antine',
+    name: 'Antine',
+    component: () => import('../views/Antine.vue')
+  }
 ]
 
 const router = new VueRouter({

src/views/Antine.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="antine">
+    <div class="flex">
+      <div class="flex-al">
+        <div class="fontSize">能繁母猪数量</div>
+        <count-in></count-in>
+        <div class="fontSize">&emsp;头</div>
+      </div>
+      <div class="flex-al">
+        <div class="fontSize">生猪存栏</div>
+        <count-in></count-in>
+        <div class="fontSize">&emsp;头</div>
+      </div>
+      <div class="flex-al">
+        <div class="fontSize">采集器在线率</div>
+        <count-dec></count-dec>
+        <div class="fontSize">&emsp;%</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CountDec from "../components/CountDec";
+import CountIn from "../components/CountIn";
+export default {
+  name: "Antine",
+  components: {
+    CountIn,
+    CountDec
+  }
+}
+</script>
+
+<style scoped>
+  .antine {
+    width: 100%;
+    height: 100%;
+  }
+  .flex {
+    width: 100%;
+    height: 120px;
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 30px;
+  }
+  .flex-al {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .fontSize {
+    color: #00ECCB;
+    font-size: 20px;
+    font-weight: 700;
+  }
+</style>