第二次上传

src/components/TableFooter.vue

@@ -0,0 +1,60 @@
+<template>
+  <div style="margin-top: 20px; height: 50px">
+    <el-pagination background
+                   style="float: right; display: inline-block"
+                   :total="totals"
+                   layout="total, sizes, prev, pager, next, jumper"
+                   @size-change="sizeChange"
+                   @current-change="pageChange"
+                   :page-sizes="sizesArray"
+                   :page-size="size"></el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TableFooter',
+  data() {
+    return {
+
+    };
+  },
+  props: {
+    totals: {
+      type: Number,
+      default() {
+        return 0;
+      },
+    },
+    sizesArray: {
+      type: Array,
+      default() {
+        return [10, 20, 40, 60, 80, 100];
+      },
+    },
+    size: {
+      type: Number,
+      default() {
+        return 20;
+      },
+    },
+  },
+  methods: {
+    sizeChange(value) {
+      this.$emit('sizeChange', value);
+    },
+    pageChange(value) {
+      this.$emit('pageChange', value);
+    },
+  },
+};
+</script>
+
+<style scoped>
+  /deep/ .el-pagination__jump {
+    color: white;
+  }
+  /deep/ .el-pagination__total {
+    color: white;
+  }
+</style>

src/views/pastureData/Home.vue

@@ -1,13 +1,152 @@
 <template>
-  <div> 11111</div>
+  <div>
+    <div class="box">
+      <div class="box_item" v-for="item in boxList" :key="item.id">
+        <p>{{item.name}}</p>
+        <p>{{item.value}}</p>
+      </div>
+    </div>
+    <div class="form_item">
+      <el-form :inline="true">
+        <el-form-item label="时间:">
+          <el-date-picker
+              v-model="value2"
+              type="datetimerange"
+              :picker-options="pickerOptions"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              align="right">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="母猪存栏:">
+          <el-select filterable style="width: 120px;"></el-select>
+        </el-form-item>
+        <el-form-item label="母猪新增:">
+          <el-select filterable  style="width: 120px;"></el-select>
+        </el-form-item>
+        <el-form-item label="耳标离线:">
+          <el-select filterable style="width: 120px;"></el-select>
+        </el-form-item>
+        <el-form-item label="公猪存栏:">
+          <el-select filterable style="width: 120px;"></el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button>查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="box_table">
+      <el-table></el-table>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  name: "Home"
+  name: "Home",
+  data() {
+    return {
+      boxList: [
+        {
+          id: 1,
+          name: '母猪总存栏',
+          value: 2500,
+        },
+        {
+          id: 2,
+          name: '配怀存栏',
+          value: 1689
+        },
+        {
+          id: 3,
+          name: '分娩存栏',
+          value: 1689
+        },
+        {
+          id: 4,
+          name: '后备存栏',
+          value: 1689
+        },
+        {
+          id: 5,
+          name: '公猪存栏',
+          value: 1689
+        },
+        {
+          id: 6,
+          name: '预计年出栏量',
+          value: 50000
+        },
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+      value2: ''
+    }
+  }
 }
 </script>
 
 <style scoped>
-
+  /deep/ .el-form--inline .el-form-item {
+    margin-right: 20px;
+  }
+  .box{
+    width: 100%;
+    height: 140px;
+    background-color: #F9F9F9;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+  .box_item {
+    width: 198px;
+    height: 78px;
+    border: 1px solid #ddd;
+    text-align: center;
+  }
+  .box_item p {
+    height: 39px;
+    line-height: 39px;
+    margin: 0;
+  }
+  .form_item {
+    width: 100%;
+    height: 60px;
+    background-color: #fff;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    box-sizing: border-box;
+    padding: 10px 5px;
+  }
+  .box_table {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+  }
 </style>