.

src/views/LvShanXiang/LvShanXiang.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="LvShanXiang">
         <div class="left1">
-            <E-Left1 style="height: 100%;"></E-Left1>
+            <E-Left1 style="height: 100%"></E-Left1>
         </div>
         <div class="middle">
-            <header class="header">湖羊全产业链数字化管理系统</header>
+            <header class="header">吕山乡牧场综合管理平台</header>
             <section class="section">
                 <div class="warp">
                     <div class="item">
@@ -53,7 +53,30 @@
                     </div>
                 </div>
             </section>
-            <footer class="footer"></footer>
+            <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>
@@ -104,7 +127,6 @@ export default {
     background-image: url(../../assets/bg.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    border: 1px solid #73717e;
     box-sizing: border-box;
     height: 100%;
     display: grid;
@@ -117,7 +139,7 @@ export default {
         > .header {
             border: 1px solid #8877dd;
             width: 80%;
-            height: 150px;
+            height: 180px;
             line-height: 80px;
             font-size: 60px;
             font-weight: 600;
@@ -157,37 +179,125 @@ export default {
             }
         }
         > .footer {
-            border: 1px solid #8877dd;
+            // 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%;
+                    width: 150px;
+                    height: 140px;
+                    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;
+                        width: 30px;
+                        height: 30px;
+                        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;
+    // border: 1px solid #8877dd;
 }
 .left2 {
-    border: 1px solid #77a0dd;
+    // border: 1px solid #77a0dd;
 }
 .left3 {
-    border: 1px solid #ddad77;
+    // border: 1px solid #ddad77;
 }
 .middle {
-    border: 1px solid #8bdd77;
+    // 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;
+    // border: 1px solid #6e277c;
 }
 .right2 {
-    border: 1px solid #dd77bb;
+    // border: 1px solid #dd77bb;
 }
 .right3 {
-    border: 1px solid #7da359;
+    // border: 1px solid #7da359;
 }
 
 .left1,

src/views/Yield/Yield.vue

@@ -139,8 +139,7 @@ export default {
     display: flex;
     flex-direction: column;
     > header {
-        border: 1px solid rgb(218, 99, 99);
-        height: 12.2%;
+        height: 180px;
         display: flex;
         justify-content: center;
         .title {
@@ -154,12 +153,12 @@ export default {
         }
     }
     > section {
-        border: 1px solid rgb(62, 58, 128);
+        // border: 1px solid rgb(62, 58, 128);
         height: 61%;
         display: flex;
         > .left {
             width: 32%;
-            border: 1px solid rgb(218, 99, 99);
+            // border: 1px solid rgb(218, 99, 99);
             display: flex;
             flex-direction: column;
             .top {
@@ -200,11 +199,11 @@ export default {
         }
         > .center {
             width: 36%;
-            border: 1px solid rgb(163, 147, 58);
+            // border: 1px solid rgb(163, 147, 58);
         }
         > .right {
             width: 32%;
-            border: 1px solid rgb(23, 131, 116);
+            // border: 1px solid rgb(23, 131, 116);
             display: flex;
             flex-direction: column;
             justify-content: space-between;
@@ -228,23 +227,22 @@ export default {
         }
     }
     > footer {
-        border: 1px solid rgb(32, 60, 138);
         flex-grow: 1;
         display: flex;
         .cell_one {
-            border: 1px solid rgb(126, 95, 38);
+            // border: 1px solid rgb(126, 95, 38);
             width: 25%;
         }
         .cell_two {
-            border: 1px solid rgb(61, 90, 38);
+            // border: 1px solid rgb(61, 90, 38);
             width: 25%;
         }
         .cell_three {
-            border: 1px solid rgb(176, 86, 204);
+            // border: 1px solid rgb(176, 86, 204);
             width: 25%;
         }
         .cell_four {
-            border: 1px solid rgb(218, 99, 99);
+            // border: 1px solid rgb(218, 99, 99);
             width: 25%;
         }
     }