.

src/assets/css/reset.scss

@@ -8,5 +8,5 @@ html,body,#app{
     height: 100%;
     // width: 4670px;
     // height: 1751px;
-    overflow: hidden;
+    // overflow: hidden;
 }

src/views/Butcher/Butcher.vue

@@ -263,11 +263,15 @@ export default {
             }
         }
         > .left {
-            width: 20%;
+            width: 19.8%;
             // border: 1px solid rgb(218, 99, 99);
             display: flex;
             flex-direction: column;
+            > .left_1, .left_2, .left_3 {
+                min-width: 600px;
+            }
             > .left_1 {
+                overflow: hidden;
                 > .table {
                     color: #fff;
                     font-size: 30px;
@@ -278,7 +282,8 @@ export default {
             }
         }
         > .center {
-            width: 60%;
+            width: 60.4%;
+            min-width: 1600px;
             // border: 1px solid rgb(163, 147, 58);
             display: flex;
             flex-direction: column;
@@ -322,14 +327,16 @@ export default {
                 .mid {
                     > .warp {
                         display: flex;
+                        justify-content: space-around;
                         margin: 20px 5%;
                         .item {
                             border-radius: 20px;
                             height: 90px;
+                            min-width: 400px;
                             border: 4px solid #53bafd;
                             box-sizing: border-box;
                             flex: 1 0 20%;
-                            margin: 20px 80px;
+                            margin: 20px 3%;
                             padding: 10px 10px 10px 10px;
                             font-size: 35px;
                             font-weight: 600;
@@ -352,7 +359,7 @@ export default {
                     }
                 }
                 .lower {
-                    // border: 1px solid rgb(163, 147, 58);
+                    min-height: 800px;
                     flex-grow: 1;
                     background: url(../../assets/bg_main.png) no-repeat;
                     background-size: 100% 100%;
@@ -497,13 +504,14 @@ export default {
             }
         }
         > .right {
-            width: 20%;
+            width: 19.8%;
             // border: 1px solid rgb(61, 197, 179);
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             > .right_2,
             > .right_3 {
+                overflow: hidden;
                 > .table {
                     color: #fff;
                     font-size: 30px;

src/views/LvShanXiang/LvShanXiang.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="LvShanXiang">
-        <hy-header  :navTag="0"></hy-header>
+        <hy-header :navTag="0"></hy-header>
         <div class="warp">
             <div class="left">
                 <div class="left1">
@@ -42,14 +42,14 @@
                         <div class="item">
                             <div>
                                 <span class="title">当前肉羊价：</span>
-                                <span class="num">58.5</span>
+                                <span class="num">33</span>
                                 <span class="unit">元/kg</span>
                             </div>
                         </div>
                         <div class="item">
                             <div>
                                 <span class="title">当前种羊价：</span>
-                                <span class="num">68.5</span>
+                                <span class="num">53</span>
                                 <span class="unit">元/kg</span>
                             </div>
                         </div>
@@ -126,7 +126,7 @@ export default {
         ERight3,
     },
     created() {
-        document.title = '吕山牧场'
+        document.title = "吕山牧场";
     },
     methods: {},
 };
@@ -148,7 +148,7 @@ export default {
         display: flex;
         .left {
             // border: 1px solid #2b65e0;
-            width: 27%;
+            width: 20%;
             display: flex;
             flex-direction: column;
             > .left1 {
@@ -164,8 +164,9 @@ export default {
                 height: 33.33%;
             }
         }
-        .middle {
-            width: 46%;
+        >.middle {
+            width: 60%;
+            min-width: 1600px;
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -173,17 +174,20 @@ export default {
                 width: 92%;
                 .warp {
                     display: flex;
+                    justify-content: space-around;
                     .item {
                         border-radius: 20px;
                         height: 90px;
+                        min-width: 450px;
                         border: 4px solid #53bafd;
                         box-sizing: border-box;
                         flex: 1 0 20%;
-                        margin: 20px 60px;
-                        padding: 10px 10px 10px 40px;
+                        margin: 20px 3%;
+                        padding: 10px 10px 10px 10px;
                         font-size: 35px;
                         font-weight: 600;
                         display: flex;
+                        justify-content: center;
                         align-items: center;
                         .title {
                             color: #fff;
@@ -223,7 +227,7 @@ export default {
                         border-radius: 50%;
                         box-sizing: border-box;
                         animation: animation_warp 2s 0.2s infinite alternate;
-                        .middle {
+                        >.middle {
                             display: flex;
                             justify-content: center;
                             align-items: center;
@@ -294,7 +298,7 @@ export default {
         }
         .right {
             // border: 1px solid #2b65e0;
-            width: 27%;
+            width: 20%;
             > .right1 {
                 // border: 1px solid #8bdd77;
                 height: 33.33%;

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

@@ -0,0 +1,260 @@
+<template>
+    <div class="Yield">
+        <header>
+            <!-- <h1 class="title">湖羊全产业链数字化管理系统</h1> -->
+            <hy-header :navTag="3"></hy-header>
+        </header>
+        <section>
+            <div class="left">
+                <div class="top">
+                    <div class="warp">
+                        <div class="item">
+                            <div>
+                                <span class="title">存栏量：</span>
+                                <span class="num">11.09</span>
+                                <span class="unit">万只</span>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div>
+                                <span class="title">出栏量：</span>
+                                <span class="num">6.83</span>
+                                <span class="unit">万只</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="warp">
+                        <div class="item">
+                            <div>
+                                <span class="title">种羊价：</span>
+                                <span class="num">53</span>
+                                <span class="unit">元/kg</span>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div>
+                                <span class="title">肉羊价：</span>
+                                <span class="num">33</span>
+                                <span class="unit">元/kg</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="warp">
+                        <div class="item">
+                            <div>
+                                <span class="title">产肉量：</span>
+                                <span class="num">1145.65</span>
+                                <span class="unit">吨</span>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div>
+                                <span class="title">产值：</span>
+                                <span class="num">1.13</span>
+                                <span class="unit">亿元</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bottom">
+                    <E-Left1 style="height: 100%; width: 50%"></E-Left1>
+                    <E-Left2 style="height: 100%; width: 50%"></E-Left2>
+                </div>
+            </div>
+            <div class="center">
+                <E-MiddleMap style="height: 100%;"></E-MiddleMap>
+            </div>
+            <div class="right">
+                <div class="warp">
+                    <div class="cell cell1">
+                        <img src="../../assets/u871.jpg" width="80%" height="80%" />
+                    </div>
+                    <div class="cell cell2">
+                        <img src="../../assets/u871.jpg" width="80%" height="80%" />
+                    </div>
+                </div>
+                <div class="warp">
+                    <div class="cell">
+                        <E-Right1 style="height: 100%"></E-Right1>
+                    </div>
+                    <div class="cell">
+                        <E-Right2 style="height: 100%"></E-Right2>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <footer>
+            <div class="cell_one">
+                <E-Bottom1 style="height: 100%"></E-Bottom1>
+            </div>
+            <div class="cell_two">
+                <E-Bottom2 style="height: 100%"></E-Bottom2>
+            </div>
+            <div class="cell_three">
+                <E-Bottom3 style="height: 100%"></E-Bottom3>
+            </div>
+            <div class="cell_four">
+                <E-Bottom4 style="height: 100%"></E-Bottom4>
+            </div>
+        </footer>
+    </div>
+</template>
+
+<script>
+import HyHeader from "@/components/HyHeader";
+import ELeft1 from "./charts/ELeft1";
+import ELeft2 from "./charts/ELeft2";
+import ERight1 from "./charts/ERight1";
+import ERight2 from "./charts/ERight2";
+import EBottom1 from "./charts/EBottom1";
+import EBottom2 from "./charts/EBottom2";
+import EBottom3 from "./charts/EBottom3";
+import EBottom4 from "./charts/EBottom4";
+import EMiddleMap from "./charts/EMiddleMap";
+
+export default {
+    name: "Yield",
+    components: {
+        HyHeader,
+        ELeft1,
+        ELeft2,
+        ERight1,
+        ERight2,
+        EBottom1,
+        EBottom2,
+        EMiddleMap,
+        EBottom3,
+        EBottom4
+    },
+    data() {
+        return {};
+    },
+    created() {
+        document.title = '湖羊养殖'
+    },
+    methods: {},
+};
+</script>
+
+<style lang="scss" scope>
+.Yield {
+    background-image: url(../../assets/bg.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    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;
+    //     }
+    // }
+    > section {
+        // border: 1px solid rgb(62, 58, 128);
+        height: 61%;
+        display: flex;
+        > .left {
+            width: 32%;
+            // border: 1px solid rgb(218, 99, 99);
+            display: flex;
+            flex-direction: column;
+            .top {
+                margin: 40px 0 60px 0;
+                .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 80px;
+                        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;
+                        }
+                    }
+                }
+            }
+            .bottom {
+                flex-grow: 1;
+                display: flex;
+            }
+        }
+        > .center {
+            width: 36%;
+            // border: 1px solid rgb(163, 147, 58);
+        }
+        > .right {
+            width: 32%;
+            // border: 1px solid rgb(23, 131, 116);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            > .warp {
+                height: 48%;
+                display: flex;
+                justify-content: space-between;
+                > .cell {
+                    width: 48.5%;
+                    background-image: url(../../assets/download.png);
+                    background-size: 100% 100%;
+                    background-repeat: no-repeat;
+                }
+                > .cell1,
+                .cell2 {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+        }
+    }
+    > footer {
+        flex-grow: 1;
+        display: flex;
+        // > div {}
+        .cell_one {
+            // border: 1px solid rgb(126, 95, 38);
+            width: 25%;
+        }
+        .cell_two {
+            // border: 1px solid rgb(61, 90, 38);
+            width: 25%;
+        }
+        .cell_three {
+            // border: 1px solid rgb(176, 86, 204);
+            width: 25%;
+        }
+        .cell_four {
+            // border: 1px solid rgb(218, 99, 99);
+            width: 25%;
+        }
+    }
+}
+</style>

src/views/Yield/Yield.vue

@@ -6,78 +6,80 @@
         </header>
         <section>
             <div class="left">
-                <div class="top">
-                    <div class="warp">
-                        <div class="item">
-                            <div>
-                                <span class="title">存栏量：</span>
-                                <span class="num">11.09</span>
-                                <span class="unit">万只</span>
-                            </div>
+                <div class="left_chart">
+                    <E-Left1 style="height: 50%; width: 95%"></E-Left1>
+                    <E-Left2 style="height: 50%; width: 95%"></E-Left2>
+                </div>
+                <div class="left_title">
+                    <div class="item">
+                        <div>
+                            <span class="title">存栏量：</span>
+                            <span class="num">11.09</span>
+                            <span class="unit">万只</span>
                         </div>
-                        <div class="item">
-                            <div>
-                                <span class="title">出栏量：</span>
-                                <span class="num">6.83</span>
-                                <span class="unit">万只</span>
-                            </div>
+                    </div>
+                    <div class="item">
+                        <div>
+                            <span class="title">出栏量：</span>
+                            <span class="num">6.83</span>
+                            <span class="unit">万只</span>
                         </div>
                     </div>
-                    <div class="warp">
-                        <div class="item">
-                            <div>
-                                <span class="title">种羊价：</span>
-                                <span class="num">53</span>
-                                <span class="unit">元/kg</span>
-                            </div>
+                    <div class="item">
+                        <div>
+                            <span class="title">种羊价：</span>
+                            <span class="num">53</span>
+                            <span class="unit">元/kg</span>
                         </div>
-                        <div class="item">
-                            <div>
-                                <span class="title">肉羊价：</span>
-                                <span class="num">33</span>
-                                <span class="unit">元/kg</span>
-                            </div>
+                    </div>
+                    <div class="item">
+                        <div>
+                            <span class="title">肉羊价：</span>
+                            <span class="num">33</span>
+                            <span class="unit">元/kg</span>
                         </div>
                     </div>
-                    <div class="warp">
-                        <div class="item">
-                            <div>
-                                <span class="title">产肉量：</span>
-                                <span class="num">1145.65</span>
-                                <span class="unit">吨</span>
-                            </div>
+                    <div class="item">
+                        <div>
+                            <span class="title">产肉量：</span>
+                            <span class="num">1145.65</span>
+                            <span class="unit">吨</span>
                         </div>
-                        <div class="item">
-                            <div>
-                                <span class="title">产值：</span>
-                                <span class="num">1.13</span>
-                                <span class="unit">亿元</span>
-                            </div>
+                    </div>
+                    <div class="item">
+                        <div>
+                            <span class="title">产值：</span>
+                            <span class="num">1.13</span>
+                            <span class="unit">亿元</span>
                         </div>
                     </div>
                 </div>
-                <div class="bottom">
-                    <E-Left1 style="height: 100%; width: 50%"></E-Left1>
-                    <E-Left2 style="height: 100%; width: 50%"></E-Left2>
-                </div>
             </div>
             <div class="center">
-                <E-MiddleMap style="height: 100%;"></E-MiddleMap>
+                <E-MiddleMap style="height: 100%"></E-MiddleMap>
             </div>
             <div class="right">
                 <div class="warp">
                     <div class="cell cell1">
-                        <img src="../../assets/u871.jpg" width="80%" height="80%" />
+                        <img
+                            src="../../assets/u871.jpg"
+                            width="80%"
+                            height="80%"
+                        />
                     </div>
-                    <div class="cell cell2">
-                        <img src="../../assets/u871.jpg" width="80%" height="80%" />
+                    <div class="cell e_cell">
+                        <E-Right1 style="height: 100%"></E-Right1>
                     </div>
                 </div>
                 <div class="warp">
-                    <div class="cell">
-                        <E-Right1 style="height: 100%"></E-Right1>
+                    <div class="cell cell2">
+                        <img
+                            src="../../assets/u871.jpg"
+                            width="80%"
+                            height="80%"
+                        />
                     </div>
-                    <div class="cell">
+                    <div class="cell e_cell">
                         <E-Right2 style="height: 100%"></E-Right2>
                     </div>
                 </div>
@@ -124,13 +126,13 @@ export default {
         EBottom2,
         EMiddleMap,
         EBottom3,
-        EBottom4
+        EBottom4,
     },
     data() {
         return {};
     },
     created() {
-        document.title = '湖羊养殖'
+        document.title = "湖羊养殖";
     },
     methods: {},
 };
@@ -166,52 +168,54 @@ export default {
         height: 61%;
         display: flex;
         > .left {
-            width: 32%;
-            // border: 1px solid rgb(218, 99, 99);
+            width: 35%;
             display: flex;
-            flex-direction: column;
-            .top {
+            .left_chart {
+                width: 57%;
+                flex-grow: 1;
+                display: flex;
+                flex-direction: column;
+            }
+            .left_title {
                 margin: 40px 0 60px 0;
-                .warp {
+                width: 43%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                .item {
+                    border-radius: 20px;
+                    height: 90px;
+                    min-width: 450px;
+                    border: 4px solid #53bafd;
+                    box-sizing: border-box;
+                    margin: 20px 60px;
+                    padding: 10px 10px 10px 80px;
+                    font-size: 35px;
+                    font-weight: 600;
                     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 80px;
-                        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;
-                        }
+                    align-items: center;
+                    .title {
+                        color: #fff;
+                    }
+                    .num {
+                        color: #53bafd;
+                        font-size: 1.2em;
+                    }
+                    .unit {
+                        color: #53bafd;
+                        font-size: 20px;
+                        margin-left: 15px;
                     }
                 }
             }
-            .bottom {
-                flex-grow: 1;
-                display: flex;
-            }
+            
         }
         > .center {
-            width: 36%;
+            width: 30%;
             // border: 1px solid rgb(163, 147, 58);
         }
         > .right {
-            width: 32%;
+            width: 35%;
             // border: 1px solid rgb(23, 131, 116);
             display: flex;
             flex-direction: column;
@@ -221,11 +225,14 @@ export default {
                 display: flex;
                 justify-content: space-between;
                 > .cell {
-                    width: 48.5%;
+                    width: 40.5%;
                     background-image: url(../../assets/download.png);
                     background-size: 100% 100%;
                     background-repeat: no-repeat;
                 }
+                > .e_cell {
+                    width: 57%;
+                }
                 > .cell1,
                 .cell2 {
                     display: flex;
@@ -238,22 +245,23 @@ export default {
     > footer {
         flex-grow: 1;
         display: flex;
+        justify-content: space-between;
         // > div {}
         .cell_one {
             // border: 1px solid rgb(126, 95, 38);
-            width: 25%;
+            width: 20%;
         }
         .cell_two {
             // border: 1px solid rgb(61, 90, 38);
-            width: 25%;
+            width: 27%;
         }
         .cell_three {
             // border: 1px solid rgb(176, 86, 204);
-            width: 25%;
+            width: 27%;
         }
         .cell_four {
             // border: 1px solid rgb(218, 99, 99);
-            width: 25%;
+            width: 20%;
         }
     }
 }