.

src/views/Butcher/Butcher.vue

@@ -36,7 +36,39 @@
                 </article>
             </aside>
             <div class="center">
-                <div class="top"></div>
+                <div class="top">
+                    <article class="upper">
+                        <div class="date">2020-10-12</div>
+                        <div class="title">首 页</div>
+                        <img class="icon" src="../../assets/chilun.png">
+                    </article>
+                    <article class="mid">
+                        <div class="warp">
+                            <div class="item">
+                                <div>
+                                    <span class="title">总存栏量：</span>
+                                    <span class="num">10534</span>
+                                    <span class="unit">只</span>
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div>
+                                    <span class="title">昨日屠宰数：</span>
+                                    <span class="num">1534</span>
+                                    <span class="unit">只</span>
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div>
+                                    <span class="title">检疫合格率：</span>
+                                    <span class="num">94.2</span>
+                                    <span class="unit">%</span>
+                                </div>
+                            </div>
+                        </div>
+                    </article>
+                    <article class="lower"></article>
+                </div>
                 <div class="bottom">
                     <article>
                         <E-Bottom1 style="height: 100%"></E-Bottom1>
@@ -124,10 +156,13 @@ export default {
         display: flex;
         justify-content: center;
         .title {
-            border: 1px solid rgb(218, 99, 99);
-            width: 46%;
+            // border: 1px solid rgb(218, 99, 99);
+            background: url(../../assets/bg_header.png) no-repeat;
+            background-size: 100% 100%;
+            width: 80%;
             height: 100%;
             font-size: 50px;
+            line-height: 110px;
             color: #fff;
             display: flex;
             justify-content: center;
@@ -135,7 +170,6 @@ export default {
     }
     > section {
         flex-grow: 1;
-        border: 1px solid rgb(62, 58, 128);
         height: 61%;
         display: flex;
         > aside {
@@ -167,7 +201,7 @@ export default {
         }
         > .left {
             width: 20%;
-            border: 1px solid rgb(218, 99, 99);
+            // border: 1px solid rgb(218, 99, 99);
             display: flex;
             flex-direction: column;
             > .left_1 {
@@ -182,16 +216,82 @@ export default {
         }
         > .center {
             width: 60%;
-            border: 1px solid rgb(163, 147, 58);
+            // border: 1px solid rgb(163, 147, 58);
             display: flex;
             flex-direction: column;
             > .top {
                 height: 72%;
-                border: 1px solid rgb(62, 58, 128);
+                // border: 1px solid rgb(62, 58, 128);
+                .upper {
+                    font-size: 40px;
+                    color: #fff;
+                    display: flex;
+                    justify-content: space-around;
+                    margin: 20px 3%;
+                    // .date {}
+                    .title {
+                        flex-grow: 1;
+                        text-align: center;
+                        display: flex;
+                        align-items: center;
+                        &::before {
+                            content: "";
+                            border: 1px solid #4b81ec;
+                            height: 0px;
+                            flex-grow: 1;
+                            margin: 0 50px;
+                        }
+                        &::after {
+                            content: "";
+                            border: 1px solid #4b81ec;
+                            height: 0px;
+                            flex-grow: 1;
+                            margin: 0 50px;
+                        }
+                    }
+                    .icon {
+                        width: 50px;
+                        height: 50px;
+                    }
+                }
+                .mid {
+                    > .warp {
+                        display: flex;
+                        
+                        margin: 20px 5%;
+                        .item {
+                            border-radius: 20px;
+                            height: 90px;
+                            border: 4px solid #53bafd;
+                            box-sizing: border-box;
+                            flex: 1 0 20%;
+                            margin: 20px 80px;
+                            padding: 10px 10px 10px 10px;
+                            font-size: 35px;
+                            font-weight: 600;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            .title {
+                                color: #fff;
+                            }
+                            .num {
+                                color: #53bafd;
+                                font-size: 1.2em;
+                            }
+                            .unit {
+                                color: #53bafd;
+                                font-size: 20px;
+                                margin-left: 15px;
+                            }
+                        }
+                    }
+                }
+                // .lower {}
             }
             > .bottom {
                 height: 28%;
-                border: 1px solid rgb(23, 131, 116);
+                // border: 1px solid rgb(23, 131, 116);
                 display: flex;
                 justify-content: space-between;
                 > article {
@@ -201,18 +301,19 @@ export default {
         }
         > .right {
             width: 20%;
-            border: 1px solid rgb(61, 197, 179);
+            // border: 1px solid rgb(61, 197, 179);
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            > .right_2,>.right_3 {
+            > .right_2,
+            > .right_3 {
                 > .table {
                     color: #fff;
                     font-size: 30px;
                     margin: 20px;
                     width: 96%;
                     text-align: center;
-                    .row{
+                    .row {
                         background-color: #006666ee;
                     }
                 }

src/views/LvShanXiang/LvShanXiang.vue

@@ -137,13 +137,16 @@ export default {
         flex-direction: column;
         align-items: center;
         > .header {
-            border: 1px solid #8877dd;
-            width: 80%;
+            // border: 1px solid #8877dd;
+            background: url(../../assets/bg_header.png) no-repeat;
+            background-size: 100% 100%;
+            width: 171%;
             height: 180px;
-            line-height: 80px;
-            font-size: 60px;
+            line-height: 110px;
+            font-size: 50px;
             font-weight: 600;
-            color: #69f8fe;
+            // color: #69f8fe;
+            color: #FFF;
             text-align: center;
             margin-bottom: 40px;
         }

src/views/Yield/Yield.vue

@@ -143,10 +143,13 @@ export default {
         display: flex;
         justify-content: center;
         .title {
-            border: 1px solid rgb(218, 99, 99);
-            width: 46%;
+            // border: 1px solid rgb(218, 99, 99);
+            background: url(../../assets/bg_header.png) no-repeat;
+            background-size: 100% 100%;
+            width: 80%;
             height: 100%;
             font-size: 50px;
+            line-height: 110px;
             color: #fff;
             display: flex;
             justify-content: center;
@@ -229,6 +232,7 @@ export default {
     > footer {
         flex-grow: 1;
         display: flex;
+        // > div {}
         .cell_one {
             // border: 1px solid rgb(126, 95, 38);
             width: 25%;

vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    publicPath: './', // 相对于 HTML 页面（目录相同）
+}