吕山乡 布局从grid改为flex 跟改了header

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/components/HelloWorld.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/HyHeader.vue

@@ -1,7 +1,37 @@
 <template>
-    <div class="HyHeader">
-        <h1>header</h1>
-    </div>
+    <header>
+        <div class="leftsidebar">
+            <a href="../../home.html">
+                <img src="../assets/logo.png" alt="" />
+            </a>
+        </div>
+        <div class="mainbav">
+            <a href="http://hy.ifarmcloud.com/demo/page3.html">智能养殖</a>
+            <a
+                href="http://hzsheep.ifarmcloud.com/butcher/#/home?target=定点屠宰智能管控"
+                >智能屠宰</a
+            >
+            <a class="h_m_active" href="javascrtpt:void(0)">特色湖羊</a>
+            <a
+                href="http://hzsheep.ifarmcloud.com/butcher/#/home?target=产品制作智能监控"
+                >产品管控</a
+            >
+            <a
+                href="http://hzsheep.ifarmcloud.com/butcher/#/home?target=鲜肉储运智能管控"
+                >鲜肉储运</a
+            >
+        </div>
+        <div class="rightsidebar">
+            <div>
+                <img src="../assets/yonghu.png" alt="" />
+                <span>admin 欢迎你！</span>
+            </div>
+            <div>
+                <img src="../assets/tuichu.png" alt="" />
+                <span>退出</span>
+            </div>
+        </div>
+    </header>
 </template>
 
 <script>
@@ -11,5 +41,92 @@ export default {
 </script>
 
 <style scoped lang="scss">
+header {
+    height: 133px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
 
+.leftsidebar {
+    width: 1036px;
+    background-image: url(../assets/zs.png);
+    background-size: 360% 180%;
+    background-repeat: no-repeat;
+    height: 100%;
+}
+
+.leftsidebar img {
+    margin-left: 80px;
+    height: 80%;
+}
+
+.mainbav {
+    width: 2000px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.mainbav a {
+    background-image: url(../assets/li_bg2.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    display: block;
+    width: 317px;
+    height: 78px;
+    line-height: 78px;
+    text-align: center;
+    font-size: 44px;
+    font-weight: normal;
+    font-stretch: normal;
+    letter-spacing: 2px;
+    font-size: 44px;
+    color: grey;
+    opacity: 0.5;
+}
+
+.h_m_active {
+    width: 420px !important;
+    height: 100px !important;
+    line-height: 100px !important;
+    font-size: 60px !important;
+    opacity: 1 !important;
+    color: #00fcff !important;
+}
+
+.rightsidebar {
+    width: 690px;
+    height: 80px;
+    background-image: url(../assets/youshangjiao.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: row;
+    align-items: center;
+}
+
+.rightsidebar > div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-right: 20px;
+}
+
+.rightsidebar img {
+    width: 36px;
+    height: 38px;
+    vertical-align: middle;
+}
+
+.rightsidebar span {
+    margin: 0 25px;
+    font-family: "Noto Sans SC";
+    font-size: 28px;
+    font-weight: normal;
+    font-stretch: normal;
+    letter-spacing: 1px;
+    color: #00cdff;
+}
 </style>

src/views/Butcher/Butcher.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="Butcher">
         <header>
-            <h1 class="title">湖羊全产业链数字化管理系统</h1>
+            <!-- <h1 class="title">湖羊全产业链数字化管理系统</h1> -->
+            <hy-header></hy-header>
         </header>
         <section>
             <aside class="left">
@@ -76,14 +77,14 @@
                         <div class="item_6"></div>
                         <div class="item_7"></div>
                         <div class="item_8"></div>
-                        <span class="time_1">8月26</span>
-                        <span class="time_2">8月16</span>
-                        <span class="time_3">8月16</span>
-                        <span class="time_4">8月16</span>
-                        <span class="time_5">8月16</span>
-                        <span class="time_6">8月16</span>
-                        <span class="time_7">8月16</span>
-                        <span class="time_8">8月16</span>
+                        <span class="time_1">9月3</span>
+                        <span class="time_2">9月3</span>
+                        <span class="time_3">8月30</span>
+                        <span class="time_4">9月3</span>
+                        <span class="time_5">9月4</span>
+                        <span class="time_6">8月28</span>
+                        <span class="time_7">9月2</span>
+                        <span class="time_8">9月3</span>
                     </article>
                 </div>
                 <div class="bottom">
@@ -136,15 +137,18 @@
 </template>
 
 <script>
+import HyHeader from "@/components/HyHeader";
 import ELeft1 from "./charts/ELeft1";
 import ELeft2 from "./charts/ELeft2";
 import ERight1 from "./charts/ERight1";
 import EBottom1 from "./charts/EBottom1";
 import EBottom2 from "./charts/EBottom2";
 import EBottom3 from "./charts/EBottom3";
+
 export default {
     name: "Butcher",
     components: {
+        HyHeader,
         ELeft1,
         ELeft2,
         ERight1,
@@ -316,7 +320,7 @@ export default {
                     font-weight: 600;
                     position: relative;
                     > div {
-                        border: 1px solid rgb(243, 14, 14);
+                        // border: 1px solid rgb(243, 14, 14);
                         display: inline-block;
                         width: 15.1%;
                         height: 17.4%;

src/views/LvShanXiang/LvShanXiang - 副本.vue

@@ -0,0 +1,306 @@
+<template>
+    <div class="LvShanXiang">
+        <div class="left1">
+            <E-Left1 style="height: 100%"></E-Left1>
+        </div>
+        <div class="middle">
+            <header class="header">吕山乡牧场综合管理平台</header>
+            <section class="section">
+                <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">2380</span>
+                            <span class="unit">只</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="warp">
+                    <div class="item">
+                        <div>
+                            <span class="title">当前肉羊价：</span>
+                            <span class="num">58.5</span>
+                            <span class="unit">元/kg</span>
+                        </div>
+                    </div>
+                    <div class="item">
+                        <div>
+                            <span class="title">当前种羊价：</span>
+                            <span class="num">68.5</span>
+                            <span class="unit">元/kg</span>
+                        </div>
+                    </div>
+                    <div class="item">
+                        <div>
+                            <span class="title">当前羊粪价：</span>
+                            <span class="num">0.8</span>
+                            <span class="unit">元/kg</span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <footer class="footer">
+                <img src="../../assets/u922.png" />
+                <div class="point p1">
+                    <i class="warp">
+                        <i class="middle">
+                            <i class="center"></i>
+                        </i>
+                    </i>
+                </div>
+                <div class="point p2">
+                    <i class="warp">
+                        <i class="middle">
+                            <i class="center"></i>
+                        </i>
+                    </i>
+                </div>
+                <div class="point p3">
+                    <i class="warp">
+                        <i class="middle">
+                            <i class="center"></i>
+                        </i>
+                    </i>
+                </div>
+            </footer>
+        </div>
+        <div class="right1">
+            <E-Right1 style="height: 100%"></E-Right1>
+        </div>
+        <div class="left2">
+            <E-Left2 style="height: 100%"></E-Left2>
+        </div>
+        <div class="right2">
+            <E-Right2 style="height: 100%"></E-Right2>
+        </div>
+        <div class="left3">
+            <E-Left3 style="height: 100%"></E-Left3>
+        </div>
+        <div class="right3">
+            <E-Right3 style="height: 100%"></E-Right3>
+        </div>
+    </div>
+</template>
+
+<script>
+import ELeft1 from "./charts/ELeft1";
+import ELeft2 from "./charts/ELeft2";
+import ELeft3 from "./charts/ELeft3";
+import ERight1 from "./charts/ERight1";
+import ERight2 from "./charts/ERight2";
+import ERight3 from "./charts/ERight3";
+
+export default {
+    name: "LvShanXiang",
+    data() {
+        return {};
+    },
+    components: {
+        ELeft1,
+        ELeft2,
+        ELeft3,
+        ERight1,
+        ERight2,
+        ERight3,
+    },
+    created() {},
+    methods: {},
+};
+</script>
+
+<style lang="scss" scope>
+.LvShanXiang {
+    background-image: url(../../assets/bg.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    box-sizing: border-box;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 4fr 7fr 4fr;
+    grid-template-rows: 1.2fr repeat(2, 1fr);
+    .middle {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        > .header {
+            // border: 1px solid #8877dd;
+            background: url(../../assets/bg_header.png) no-repeat;
+            background-size: 100% 100%;
+            width: 171%;
+            height: 180px;
+            line-height: 110px;
+            font-size: 50px;
+            font-weight: 600;
+            // color: #69f8fe;
+            color: #FFF;
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        > .section {
+            width: 92%;
+            .warp {
+                display: flex;
+                .item {
+                    border-radius: 20px;
+                    height: 90px;
+                    border: 4px solid #53bafd;
+                    box-sizing: border-box;
+                    flex: 1 0 20%;
+                    margin: 20px 60px;
+                    padding: 10px 10px 10px 40px;
+                    font-size: 35px;
+                    font-weight: 600;
+                    display: flex;
+                    align-items: center;
+                    .title {
+                        color: #fff;
+                    }
+                    .num {
+                        color: #53bafd;
+                        font-size: 1.2em;
+                    }
+                    .unit {
+                        color: #53bafd;
+                        font-size: 20px;
+                        margin-left: 15px;
+                    }
+                }
+            }
+        }
+        > .footer {
+            // border: 1px solid #8877dd;
+            width: 92%;
+            flex-grow: 1;
+            margin: 80px 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            > img {
+                height: 80%;
+            }
+            .point {
+                position: absolute;
+                > .warp {
+                    flex-basis: 1;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    border: 6px solid #2793D1;
+                    border-radius: 50%;
+                    box-sizing: border-box;
+                    animation: animation_warp 2s 0.2s infinite alternate;
+                    .middle {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        position: absolute;
+                        box-sizing: border-box;
+                        border: 6px solid #2793D1;
+                        border-radius: 50%;
+                        animation: animation_middle 2s 0.2s infinite alternate;
+                        .center {
+                            position: absolute;
+                            display: inline-block;
+                            width: 20px;
+                            height: 20px;
+                            box-sizing: border-box;
+                            background-color: #2793D1;
+                            border-radius: 50%;
+                            animation: animation_center 2s 0.2s infinite
+                        }
+                    }
+                }
+
+                @keyframes animation_warp {
+                    0% {
+                        width: 140px;
+                        height: 140px;
+                    }
+                    100% {
+                        width: 50px;
+                        height: 50px;
+                        transform: translate(45px, 45px);
+                        border: 6px solid transparent;
+                    }
+                }
+                @keyframes animation_middle {
+                    0% {
+                        width: 50px;
+                        height: 50px;
+                        border: 6px solid transparent;
+                    }
+                    100% {
+                        width: 140px;
+                        height: 140px;
+                    }
+                }
+                @keyframes animation_center {
+                    0% {
+                        background-color: transparent;
+                    }
+                    100% {
+                        background-color: #2793D1;
+                    }
+                }
+            }
+            > .p1 {
+                left: 50%;
+                top: 25%;
+            }
+            > .p2 {
+                left: 60%;
+                top: 45%;
+            }
+            > .p3 {
+                left: 35%;
+                top: 60%;
+            }
+        }
+    }
+}
+// .left1 {
+//     border: 1px solid #8877dd;
+// }
+// .left2 {
+//     border: 1px solid #77a0dd;
+// }
+// .left3 {
+//     border: 1px solid #ddad77;
+// }
+.middle {
+    // border: 1px solid #8bdd77;
+    grid-row-start: 1;
+    grid-row-end: 4;
+    grid-column-start: 2;
+    grid-column-end: 3;
+}
+// .right1 {
+//     border: 1px solid #6e277c;
+// }
+// .right2 {
+//     border: 1px solid #dd77bb;
+// }
+// .right3 {
+//     border: 1px solid #7da359;
+// }
+
+.left1,
+.right1 {
+    margin-top: 8%;
+}
+</style>

src/views/LvShanXiang/LvShanXiang.vue

@@ -1,102 +1,109 @@
 <template>
     <div class="LvShanXiang">
-        <div class="left1">
-            <E-Left1 style="height: 100%"></E-Left1>
-        </div>
-        <div class="middle">
-            <header class="header">吕山乡牧场综合管理平台</header>
-            <section class="section">
-                <div class="warp">
-                    <div class="item">
-                        <div>
-                            <span class="title">当月存栏量：</span>
-                            <span class="num">10534</span>
-                            <span class="unit">只</span>
+        <hy-header></hy-header>
+        <div class="warp">
+            <div class="left">
+                <div class="left1">
+                    <E-Left1 style="height: 100%"></E-Left1>
+                </div>
+                <div class="left2">
+                    <E-Left2 style="height: 100%"></E-Left2>
+                </div>
+                <div class="left3">
+                    <E-Left3 style="height: 100%"></E-Left3>
+                </div>
+            </div>
+            <div class="middle">
+                <section class="section">
+                    <div class="warp">
+                        <div class="item">
+                            <div>
+                                <span class="title">当月存栏量：</span>
+                                <span class="num">10534</span>
+                                <span class="unit">只</span>
+                            </div>
                         </div>
-                    </div>
-                    <div class="item">
-                        <div>
-                            <span class="title">当月出栏量：</span>
-                            <span class="num">1534</span>
-                            <span class="unit">只</span>
+                        <div class="item">
+                            <div>
+                                <span class="title">当月出栏量：</span>
+                                <span class="num">1534</span>
+                                <span class="unit">只</span>
+                            </div>
                         </div>
-                    </div>
-                    <div class="item">
-                        <div>
-                            <span class="title">月种羊出栏：</span>
-                            <span class="num">2380</span>
-                            <span class="unit">只</span>
+                        <div class="item">
+                            <div>
+                                <span class="title">月种羊出栏：</span>
+                                <span class="num">2380</span>
+                                <span class="unit">只</span>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="warp">
-                    <div class="item">
-                        <div>
-                            <span class="title">当前肉羊价：</span>
-                            <span class="num">58.5</span>
-                            <span class="unit">元/kg</span>
+                    <div class="warp">
+                        <div class="item">
+                            <div>
+                                <span class="title">当前肉羊价：</span>
+                                <span class="num">58.5</span>
+                                <span class="unit">元/kg</span>
+                            </div>
                         </div>
-                    </div>
-                    <div class="item">
-                        <div>
-                            <span class="title">当前种羊价：</span>
-                            <span class="num">68.5</span>
-                            <span class="unit">元/kg</span>
+                        <div class="item">
+                            <div>
+                                <span class="title">当前种羊价：</span>
+                                <span class="num">68.5</span>
+                                <span class="unit">元/kg</span>
+                            </div>
                         </div>
-                    </div>
-                    <div class="item">
-                        <div>
-                            <span class="title">当前羊粪价：</span>
-                            <span class="num">0.8</span>
-                            <span class="unit">元/kg</span>
+                        <div class="item">
+                            <div>
+                                <span class="title">当前羊粪价：</span>
+                                <span class="num">0.8</span>
+                                <span class="unit">元/kg</span>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </section>
-            <footer class="footer">
-                <img src="../../assets/u922.png" />
-                <div class="point p1">
-                    <i class="warp">
-                        <i class="middle">
-                            <i class="center"></i>
+                </section>
+                <footer class="footer">
+                    <img src="../../assets/u922.png" />
+                    <div class="point p1">
+                        <i class="warp">
+                            <i class="middle">
+                                <i class="center"></i>
+                            </i>
                         </i>
-                    </i>
-                </div>
-                <div class="point p2">
-                    <i class="warp">
-                        <i class="middle">
-                            <i class="center"></i>
+                    </div>
+                    <div class="point p2">
+                        <i class="warp">
+                            <i class="middle">
+                                <i class="center"></i>
+                            </i>
                         </i>
-                    </i>
-                </div>
-                <div class="point p3">
-                    <i class="warp">
-                        <i class="middle">
-                            <i class="center"></i>
+                    </div>
+                    <div class="point p3">
+                        <i class="warp">
+                            <i class="middle">
+                                <i class="center"></i>
+                            </i>
                         </i>
-                    </i>
+                    </div>
+                </footer>
+            </div>
+            <div class="right">
+                <div class="right1">
+                    <E-Right1 style="height: 100%"></E-Right1>
                 </div>
-            </footer>
-        </div>
-        <div class="right1">
-            <E-Right1 style="height: 100%"></E-Right1>
-        </div>
-        <div class="left2">
-            <E-Left2 style="height: 100%"></E-Left2>
-        </div>
-        <div class="right2">
-            <E-Right2 style="height: 100%"></E-Right2>
-        </div>
-        <div class="left3">
-            <E-Left3 style="height: 100%"></E-Left3>
-        </div>
-        <div class="right3">
-            <E-Right3 style="height: 100%"></E-Right3>
+                <div class="right2">
+                    <E-Right2 style="height: 100%"></E-Right2>
+                </div>
+                <div class="right3">
+                    <E-Right3 style="height: 100%"></E-Right3>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
+import HyHeader from "@/components/HyHeader";
 import ELeft1 from "./charts/ELeft1";
 import ELeft2 from "./charts/ELeft2";
 import ELeft3 from "./charts/ELeft3";
@@ -110,6 +117,7 @@ export default {
         return {};
     },
     components: {
+        HyHeader,
         ELeft1,
         ELeft2,
         ELeft3,
@@ -128,179 +136,176 @@ export default {
     background-size: 100% 100%;
     background-repeat: no-repeat;
     box-sizing: border-box;
+    border: 1px solid #f52424;
     height: 100%;
-    display: grid;
-    grid-template-columns: 4fr 7fr 4fr;
-    grid-template-rows: 1.2fr repeat(2, 1fr);
-    .middle {
+    display: flex;
+    flex-direction: column;
+    > .warp {
+        // border: 1px solid #ffee00;
+        height: 100%;
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        > .header {
-            // border: 1px solid #8877dd;
-            background: url(../../assets/bg_header.png) no-repeat;
-            background-size: 100% 100%;
-            width: 171%;
-            height: 180px;
-            line-height: 110px;
-            font-size: 50px;
-            font-weight: 600;
-            // color: #69f8fe;
-            color: #FFF;
-            text-align: center;
-            margin-bottom: 40px;
-        }
-        > .section {
-            width: 92%;
-            .warp {
-                display: flex;
-                .item {
-                    border-radius: 20px;
-                    height: 90px;
-                    border: 4px solid #53bafd;
-                    box-sizing: border-box;
-                    flex: 1 0 20%;
-                    margin: 20px 60px;
-                    padding: 10px 10px 10px 40px;
-                    font-size: 35px;
-                    font-weight: 600;
-                    display: flex;
-                    align-items: center;
-                    .title {
-                        color: #fff;
-                    }
-                    .num {
-                        color: #53bafd;
-                        font-size: 1.2em;
-                    }
-                    .unit {
-                        color: #53bafd;
-                        font-size: 20px;
-                        margin-left: 15px;
-                    }
-                }
+        .left {
+            // border: 1px solid #2b65e0;
+            width: 27%;
+            display: flex;
+            flex-direction: column;
+            > .left1 {
+                // border: 1px solid #8bdd77;
+                height: 33.33%;
+            }
+            > .left2 {
+                // border: 1px solid #ddad77;
+                height: 33.33%;
+            }
+            > .left3 {
+                // border: 1px solid #8bdd77;
+                height: 33.33%;
             }
         }
-        > .footer {
-            // border: 1px solid #8877dd;
-            width: 92%;
-            flex-grow: 1;
-            margin: 80px 0;
+        .middle {
+            width: 46%;
             display: flex;
-            justify-content: center;
+            flex-direction: column;
             align-items: center;
-            position: relative;
-            > img {
-                height: 80%;
-            }
-            .point {
-                position: absolute;
-                > .warp {
-                    flex-basis: 1;
+            > .section {
+                width: 92%;
+                .warp {
                     display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    border: 6px solid #2793D1;
-                    border-radius: 50%;
-                    box-sizing: border-box;
-                    animation: animation_warp 2s 0.2s infinite alternate;
-                    .middle {
+                    .item {
+                        border-radius: 20px;
+                        height: 90px;
+                        border: 4px solid #53bafd;
+                        box-sizing: border-box;
+                        flex: 1 0 20%;
+                        margin: 20px 60px;
+                        padding: 10px 10px 10px 40px;
+                        font-size: 35px;
+                        font-weight: 600;
+                        display: flex;
+                        align-items: center;
+                        .title {
+                            color: #fff;
+                        }
+                        .num {
+                            color: #53bafd;
+                            font-size: 1.2em;
+                        }
+                        .unit {
+                            color: #53bafd;
+                            font-size: 20px;
+                            margin-left: 15px;
+                        }
+                    }
+                }
+            }
+            > .footer {
+                // border: 1px solid #8877dd;
+                width: 92%;
+                flex-grow: 1;
+                margin: 80px 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                position: relative;
+                > img {
+                    height: 80%;
+                }
+                .point {
+                    position: absolute;
+                    > .warp {
+                        flex-basis: 1;
                         display: flex;
                         justify-content: center;
                         align-items: center;
-                        position: absolute;
-                        box-sizing: border-box;
-                        border: 6px solid #2793D1;
+                        border: 6px solid #2793d1;
                         border-radius: 50%;
-                        animation: animation_middle 2s 0.2s infinite alternate;
-                        .center {
+                        box-sizing: border-box;
+                        animation: animation_warp 2s 0.2s infinite alternate;
+                        .middle {
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
                             position: absolute;
-                            display: inline-block;
-                            width: 20px;
-                            height: 20px;
                             box-sizing: border-box;
-                            background-color: #2793D1;
+                            border: 6px solid #2793d1;
                             border-radius: 50%;
-                            animation: animation_center 2s 0.2s infinite
+                            animation: animation_middle 2s 0.2s infinite
+                                alternate;
+                            .center {
+                                position: absolute;
+                                display: inline-block;
+                                width: 20px;
+                                height: 20px;
+                                box-sizing: border-box;
+                                background-color: #2793d1;
+                                border-radius: 50%;
+                                animation: animation_center 2s 0.2s infinite;
+                            }
                         }
                     }
-                }
 
-                @keyframes animation_warp {
-                    0% {
-                        width: 140px;
-                        height: 140px;
-                    }
-                    100% {
-                        width: 50px;
-                        height: 50px;
-                        transform: translate(45px, 45px);
-                        border: 6px solid transparent;
+                    @keyframes animation_warp {
+                        0% {
+                            width: 140px;
+                            height: 140px;
+                        }
+                        100% {
+                            width: 50px;
+                            height: 50px;
+                            transform: translate(45px, 45px);
+                            border: 6px solid transparent;
+                        }
                     }
-                }
-                @keyframes animation_middle {
-                    0% {
-                        width: 50px;
-                        height: 50px;
-                        border: 6px solid transparent;
+                    @keyframes animation_middle {
+                        0% {
+                            width: 50px;
+                            height: 50px;
+                            border: 6px solid transparent;
+                        }
+                        100% {
+                            width: 140px;
+                            height: 140px;
+                        }
                     }
-                    100% {
-                        width: 140px;
-                        height: 140px;
+                    @keyframes animation_center {
+                        0% {
+                            background-color: transparent;
+                        }
+                        100% {
+                            background-color: #2793d1;
+                        }
                     }
                 }
-                @keyframes animation_center {
-                    0% {
-                        background-color: transparent;
-                    }
-                    100% {
-                        background-color: #2793D1;
-                    }
+                > .p1 {
+                    left: 50%;
+                    top: 25%;
+                }
+                > .p2 {
+                    left: 60%;
+                    top: 45%;
+                }
+                > .p3 {
+                    left: 35%;
+                    top: 60%;
                 }
             }
-            > .p1 {
-                left: 50%;
-                top: 25%;
+        }
+        .right {
+            // border: 1px solid #2b65e0;
+            width: 27%;
+            > .right1 {
+                // border: 1px solid #8bdd77;
+                height: 33.33%;
             }
-            > .p2 {
-                left: 60%;
-                top: 45%;
+            > .right2 {
+                // border: 1px solid #ddad77;
+                height: 33.33%;
             }
-            > .p3 {
-                left: 35%;
-                top: 60%;
+            > .right3 {
+                // border: 1px solid #8bdd77;
+                height: 33.33%;
             }
         }
     }
 }
-// .left1 {
-//     border: 1px solid #8877dd;
-// }
-// .left2 {
-//     border: 1px solid #77a0dd;
-// }
-// .left3 {
-//     border: 1px solid #ddad77;
-// }
-.middle {
-    // border: 1px solid #8bdd77;
-    grid-row-start: 1;
-    grid-row-end: 4;
-    grid-column-start: 2;
-    grid-column-end: 3;
-}
-// .right1 {
-//     border: 1px solid #6e277c;
-// }
-// .right2 {
-//     border: 1px solid #dd77bb;
-// }
-// .right3 {
-//     border: 1px solid #7da359;
-// }
-
-.left1,
-.right1 {
-    margin-top: 8%;
-}
 </style>

src/views/Yield/Yield.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="Yield">
         <header>
-            <h1 class="title">湖羊全产业链数字化管理系统</h1>
+            <!-- <h1 class="title">湖羊全产业链数字化管理系统</h1> -->
+            <hy-header></hy-header>
         </header>
         <section>
             <div class="left">
@@ -141,23 +142,23 @@ export default {
     height: 100%;
     display: flex;
     flex-direction: column;
-    > header {
-        height: 180px;
-        display: flex;
-        justify-content: center;
-        .title {
-            // 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;
-        }
-    }
+    // > header {
+    //     height: 180px;
+    //     display: flex;
+    //     justify-content: center;
+    //     .title {
+    //         // 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;
+    //     }
+    // }
     > section {
         // border: 1px solid rgb(62, 58, 128);
         height: 61%;