静态页面完成

src/assets/css/reset.scss

@@ -6,7 +6,7 @@ li{list-style:none;}
 html,body,#app{
     width: 100%;
     height: 100%;
-    width: 4670px;
-    height: 1751px;
-    // overflow: hidden;
+    // width: 4670px;
+    // height: 1751px;
+    overflow: hidden;
 }

src/views/Butcher/Butcher.vue

@@ -41,7 +41,7 @@
                     <article class="upper">
                         <div class="date">2020-10-12</div>
                         <div class="title">首 页</div>
-                        <img class="icon" src="../../assets/chilun.png">
+                        <img class="icon" src="../../assets/chilun.png" />
                     </article>
                     <article class="mid">
                         <div class="warp">
@@ -69,14 +69,47 @@
                         </div>
                     </article>
                     <article class="lower">
-                        <div class="item_1">6465</div>
-                        <div class="item_2"></div>
-                        <div class="item_3"></div>
-                        <div class="item_4"></div>
-                        <div class="item_5"></div>
-                        <div class="item_6"></div>
-                        <div class="item_7"></div>
-                        <div class="item_8"></div>
+                        <main class="inputWrap">
+                            <input type="text" class="input" v-model="searchStr">
+                            <i class="icon_search" @click="search"></i>
+                        </main>
+                        <div class="item_1">
+                            <h3>入库</h3>
+                            <div class="row">入库时间：10:15:11 5555555</div>
+                        </div>
+                        <div class="item_2">
+                            <h3>运输</h3>
+                            <div class="row">运输单号：586874578</div>
+                            <div class="row">目的地：浙江金华超市</div>
+                        </div>
+                        <div class="item_3">
+                            <h3>收购</h3>
+                            <div class="row">来源：吕山牧场</div>
+                            <div class="row">收购重量：浙江金华超市</div>
+                            <div class="row">收购时间：8月28日</div>
+                        </div>
+                        <div class="item_4">
+                            <h3>屠宰</h3>
+                            <div class="row">屠宰时间：9月2日</div>
+                        </div>
+                        <div class="item_5">
+                            <h3>分割</h3>
+                            <div class="row">分割批次：12451</div>
+                        </div>
+                        <div class="item_6">
+                            <h3>检疫</h3>
+                            <div class="row">检疫结果：合格</div>
+                            <div class="row">检疫时间：8月30日</div>
+                        </div>
+                        <div class="item_7">
+                            <h3>排酸</h3>
+                            <div class="row">排酸时间：9月3日</div>
+                        </div>
+                        <div class="item_8">
+                            <h3>运输</h3>
+                            <div class="row">运输单号：586874578</div>
+                            <div class="row">目的地：浙江金华超市</div>
+                        </div>
                         <span class="time_1">9月3</span>
                         <span class="time_2">9月3</span>
                         <span class="time_3">8月30</span>
@@ -157,10 +190,17 @@ export default {
         EBottom3,
     },
     data() {
-        return {};
+        return {
+            searchStr: ''
+        };
     },
     created() {},
-    methods: {},
+    methods: {
+        search() {
+            console.log(this.searchStr)
+            console.log("search")
+        }
+    },
 };
 </script>
 
@@ -319,6 +359,41 @@ export default {
                     font-size: 30px;
                     font-weight: 600;
                     position: relative;
+                    > .inputWrap {
+                        width: 700px;
+                        height: 80px;
+                        display: flex;
+                        align-items: center;
+                        font-size: 60px;
+                        color: #fff;
+                        border: 2px solid #797979;
+                        border-radius: 10px;
+                        background-color: #0e93b2;
+                        position: relative;
+                        > .input {
+                            width: 200px;
+                            flex-grow: 1;
+                            font-size: 60px;
+                            color: #fff;
+                            padding-left: 20px;
+                            background: none;
+                            // outline: none;
+                            border: none;
+                            &:focus {
+                                // border: 4px solid #797979;
+                                background: none;
+                                outline: none;
+                            }
+                        }
+                        > .icon_search{
+                            position: absolute;
+                            right: 10px;
+                            width: 60px;
+                            height: 60px;
+                            background: url(../../assets/search.png) no-repeat;
+                            background-size: contain;
+                        }
+                    }
                     > div {
                         // border: 1px solid rgb(243, 14, 14);
                         display: inline-block;
@@ -326,36 +401,47 @@ export default {
                         height: 17.4%;
                         box-sizing: border-box;
                         position: absolute;
+                        color: #333333;
+                        > h3 {
+                            text-align: center;
+                        }
+                        > .row {
+                            font-weight: normal;
+                            font-size: 25px;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow:ellipsis;
+                        }
                     }
-                    > .item_1{
+                    > .item_1 {
                         left: 59.1%;
                         top: 18.7%;
                     }
-                    > .item_2{
+                    > .item_2 {
                         left: 81.4%;
                         top: 18%;
                     }
-                    > .item_3{
+                    > .item_3 {
                         left: 0.8%;
                         top: 42.3%;
                     }
-                    > .item_4{
+                    > .item_4 {
                         left: 27.3%;
                         top: 42.3%;
                     }
-                    > .item_5{
+                    > .item_5 {
                         left: 64.3%;
                         top: 42.3%;
                     }
-                    > .item_6{
+                    > .item_6 {
                         left: 13.2%;
                         top: 80.8%;
                     }
-                    > .item_7{
+                    > .item_7 {
                         left: 40.5%;
                         top: 80.8%;
                     }
-                    > .item_8{
+                    > .item_8 {
                         left: 79.9%;
                         top: 80.8%;
                     }