.

src/assets/css/reset.scss

@@ -2,11 +2,11 @@
 div,h1,h2,h3,h4,h5,h3,body,html,ul,li,p{margin: 0;padding: 0;}
 a{text-decoration: none;}
 li{list-style:none;} 
-/*css初始化完成*/
+/*css初始化完成*/ 
 html,body,#app{
     width: 100%;
     height: 100%;
     // width: 4670px;
     // height: 1751px;
-    // overflow: hidden;
+    overflow: hidden;
 }

src/views/Butcher/Butcher.vue

@@ -14,16 +14,16 @@
                             <th>价格</th>
                             <th>市场</th>
                         </tr>
-                        <tr v-for="item in 8" :key="item">
-                            <td>羊肉</td>
+                        <tr v-for="item in sheepPriceList" :key="item">
+                            <td>{{ item.description }}</td>
                             <td>
-                                55元/公斤
-                                <b v-if="item % 2 == 0" style="color: #00ca01"
+                                {{ item.price }}元/公斤
+                                <b v-if="item.isRise" style="color: #00ca01"
                                     >▲</b
                                 >
                                 <b v-else style="color: red">▼</b>
                             </td>
-                            <td>杭州市</td>
+                            <td>{{ item.site }}</td>
                         </tr>
                     </table>
                 </article>
@@ -146,7 +146,7 @@
                             <th>来源地</th>
                         </tr>
                         <tr v-for="item in 8" :key="item" class="row">
-                            <td>12457</td>
+                            <td style="width: 30%">{{ 12457 + item }}</td>
                             <td>湖州市长兴县吕山乡</td>
                         </tr>
                     </table>
@@ -159,8 +159,8 @@
                             <th>去向</th>
                         </tr>
                         <tr v-for="item in 8" :key="item" class="row">
-                            <td>12457</td>
-                            <td>湖州市长兴县吕山乡</td>
+                            <td style="width: 30%">{{ 11457 + item }}</td>
+                            <td>安徽</td>
                         </tr>
                     </table>
                 </article>
@@ -191,7 +191,57 @@ export default {
     },
     data() {
         return {
-            searchStr: ''
+            searchStr: '',
+            sheepPriceList: [
+                {
+                    description: "肉羊",
+                    price: '32.5',
+                    site: '长兴',
+                    isRise: true
+                },
+                {
+                    description: "肉羊",
+                    price: '32.5',
+                    site: '杭州',
+                    isRise: true
+                },
+                {
+                    description: "肉羊",
+                    price: '33',
+                    site: '金华',
+                    isRise: true
+                },
+                {
+                    description: "肉羊",
+                    price: '32.5',
+                    site: '苏州',
+                    isRise: false
+                },
+                {
+                    description: "肉羊",
+                    price: '31',
+                    site: '安徽',
+                    isRise: false
+                },
+                {
+                    description: "肉羊",
+                    price: '31',
+                    site: '湖南',
+                    isRise: true
+                },
+                {
+                    description: "肉羊",
+                    price: '32',
+                    site: '江西',
+                    isRise: true
+                },
+                {
+                    description: "肉羊",
+                    price: '29',
+                    site: '内蒙古',
+                    isRise: true
+                },
+            ]
         };
     },
     created() {

src/views/Butcher/charts/ELeft1.vue

@@ -42,7 +42,7 @@ export default {
                         color: "#fff",
                     },
                     type: "category",
-                    data: ["四月", "五月", "六月", "七月", "九月"],
+                    data: ["2015", "2016", "2017", "2018", "2019", "2020"],
                     textStyle: {
                         fontSize: 20,
                         color: "#fff",
@@ -62,7 +62,7 @@ export default {
                 },
 
                 yAxis: {
-                    name: "(数量)",
+                    name: "(元/公斤)",
                     nameTextStyle: {
                         fontSize: 20,
                         color: "#fff",
@@ -90,7 +90,7 @@ export default {
                         name: "公羊",
                         type: "line",
                         barWidth: "30%",
-                        data: [1289, 1345, 1277, 1388, 1327],
+                        data: [21.9, 21.0, 23.6, 27.8, 30.7, 32.4],
                         markLine: {
                             data: [{ type: "average", name: "平均值", label: {fontSize: 20} }],
                         },

src/views/Butcher/charts/ELeft2.vue

@@ -84,7 +84,7 @@ export default {
                 yAxis: [
                     {
                         type: "value",
-                        name: "(元)",
+                        name: "(只)",
                         nameTextStyle: {
                             fontSize: 20,
                         },

src/views/LvShanXiang/LvShanXiang.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="LvShanXiang">
+    <div class="LvShanXiang" @click="qita">
         <hy-header :navTag="0"></hy-header>
         <div class="warp">
             <div class="left">
@@ -62,29 +62,55 @@
                         </div>
                     </div>
                 </section>
-                <footer class="footer">
+                <footer class="footer" v-if="isShowMain">
+                    <main class="inputWrap">
+                        <input
+                            type="text"
+                            class="input"
+                            v-model="searchStr"
+                            placeholder="族谱溯源"
+                        />
+                        <i class="icon_search" @click.stop="search"></i>
+                    </main>
                     <img src="../../assets/u922.png" />
-                    <div class="point p1">
+                    <div class="point p1" @click.stop="clickPoint('dr')">
                         <i class="warp">
                             <i class="middle">
                                 <i class="center"></i>
                             </i>
                         </i>
                     </div>
-                    <div class="point p2">
+                    <div class="point p2" @click.stop="clickPoint('ys')">
                         <i class="warp">
                             <i class="middle">
                                 <i class="center"></i>
                             </i>
                         </i>
                     </div>
-                    <div class="point p3">
+                    <!-- <div class="point p3">
                         <i class="warp">
                             <i class="middle">
                                 <i class="center"></i>
                             </i>
                         </i>
-                    </div>
+                    </div> -->
+                </footer>
+                <footer
+                    class="footer_2"
+                    v-show="!isShowMain"
+                    
+                >
+                <!-- @click.stop="isShowMain = false" -->
+                    <h1>族谱溯源</h1>
+                    <article class="tree">
+                        <div class="self">021543</div>
+                        <div class="f">父：025464</div>
+                        <div class="m">母：01348</div>
+                        <div class="ff">父父：045645</div>
+                        <div class="fm">父母：046595</div>
+                        <div class="mf">母父：084561</div>
+                        <div class="mm">母母：046585</div>
+                    </article>
                 </footer>
             </div>
             <div class="right">
@@ -99,6 +125,12 @@
                 </div>
             </div>
         </div>
+        <article class="dialog" v-if="showDialog">
+            <h3>{{ dialogData.name }}</h3>
+            <div class="container">
+                <p v-for="item in dialogData.content" :key="item.name">{{ item }}</p>
+            </div>
+        </article>
     </div>
 </template>
 
@@ -114,7 +146,34 @@ import ERight3 from "./charts/ERight3";
 export default {
     name: "LvShanXiang",
     data() {
-        return {};
+        return {
+            searchStr: "",
+            isShowMain: true,
+            showDialog: false,
+            fieldInfo: {
+                dr: {
+                    name: "长兴德睿生态农业开发有限公司",
+                    content: [
+                        "占地面积：200余亩",
+                        "羊舍数量：18幢",
+                        "建筑面积：13000㎡",
+                        "常年存栏：8500多只",
+                        "每年繁殖羔羊：10000多只",
+                    ],
+                },
+                ys: {
+                    name: "长兴永盛牧业有限公司",
+                    content: [
+                        "占地面积：200余亩",
+                        "羊舍数量：24幢",
+                        "建筑面积：9500㎡",
+                        "常年存栏：8000只",
+                        "预计年供应：30000只",
+                    ],
+                },
+            },
+            dialogData: {name:'' , content: []}
+        };
     },
     components: {
         HyHeader,
@@ -128,7 +187,21 @@ export default {
     created() {
         document.title = "吕山牧场";
     },
-    methods: {},
+    methods: {
+        search() {
+            console.log(this.searchStr);
+            console.log("search");
+            this.isShowMain = false;
+        },
+        clickPoint(v) {
+            this.showDialog = !this.showDialog;
+            this.dialogData = this.fieldInfo[v]
+        },
+        qita() {
+            this.isShowMain = true;
+            this.showDialog = false;
+        },
+    },
 };
 </script>
 
@@ -164,7 +237,7 @@ export default {
                 height: 33.33%;
             }
         }
-        >.middle {
+        > .middle {
             width: 60%;
             min-width: 1600px;
             display: flex;
@@ -213,8 +286,51 @@ export default {
                 justify-content: center;
                 align-items: center;
                 position: relative;
+                transition: all 1s ease;
+                > .inputWrap {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 500px;
+                    height: 80px;
+                    display: flex;
+                    align-items: center;
+                    font-size: 60px;
+                    color: #fff;
+                    border: 2px solid #797979;
+                    border-radius: 10px;
+                    background-color: #0e93b2;
+                    > .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;
+                    }
+                }
                 > img {
                     height: 80%;
+                    width: 70%;
+                    -webkit-user-select: none;
+                    -moz-user-select: none;
+                    -ms-user-select: none;
+                    user-select: none;
                 }
                 .point {
                     position: absolute;
@@ -227,7 +343,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;
@@ -282,17 +398,88 @@ export default {
                         }
                     }
                 }
+                // > .p1 {
+                //     left: 50%;
+                //     top: 25%;
+                // }
+                // > .p2 {
+                //     left: 60%;
+                //     top: 45%;
+                // }
+                // > .p3 {
+                //     left: 35%;
+                //     top: 60%;
+                // }
                 > .p1 {
-                    left: 50%;
-                    top: 25%;
+                    left: 33%;
+                    top: 57%;
                 }
                 > .p2 {
-                    left: 60%;
+                    left: 55%;
                     top: 45%;
                 }
-                > .p3 {
-                    left: 35%;
-                    top: 60%;
+            }
+            > .footer_2 {
+                // border: 1px solid #8bdd77;
+                width: 88%;
+                margin-top: 30px;
+                flex-grow: 1;
+                box-sizing: border-box;
+                // transition: all 3s ease;
+                display: flex;
+                flex-direction: column;
+                > h1 {
+                    color: #fff;
+                    font-size: 60px;
+                }
+                > .tree {
+                    // border: 1px solid #9277dd;
+                    flex-grow: 1;
+                    width: 95%;
+                    margin: 3% auto;
+                    background: url(../../assets/tree.png) no-repeat center;
+                    background-size: 100% 100%;
+                    position: relative;
+                    font-size: 60px;
+                    font-weight: 600;
+                    color: #fff;
+                    > div {
+                        // border: 1px solid #dd7796;
+                        position: absolute;
+                        width: 22%;
+                        text-align: center;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                    > .self {
+                        left: 5%;
+                        top: 50%;
+                    }
+                    > .f {
+                        left: 34.5%;
+                        top: 36.4%;
+                    }
+                    > .m {
+                        left: 34.5%;
+                        top: 60.9%;
+                    }
+                    > .ff {
+                        left: 71.4%;
+                        top: 9%;
+                    }
+                    > .fm {
+                        left: 71.4%;
+                        top: 36.4%;
+                    }
+                    > .mf {
+                        left: 71.4%;
+                        top: 60.9%;
+                    }
+                    > .mm {
+                        left: 71.4%;
+                        top: 85.6%;
+                    }
                 }
             }
         }
@@ -314,4 +501,33 @@ export default {
         }
     }
 }
+
+.dialog {
+    // border: 1px solid #8bdd77;
+    min-width: 500px;
+    min-height: 300px;
+    position: fixed;
+    left: 50%;
+    top: 30%;
+    transform: translate(-50%, 0);
+    background-color: #203c7a;
+    background-image: linear-gradient(30deg, #0c1c46, #27428b);
+    // background-image: radial-gradient(#203c7a 60%,  #277AEB);
+    box-shadow: 0px 0px 50px #454991;
+    border-radius: 25px;
+    overflow: hidden;
+    box-sizing: border-box;
+    // padding: 30px;
+    color: #fff;
+    > h3 {
+        font-size: 50px;
+        text-align: center;
+        background-color: #207bc4;
+        padding: 15px 30px 15px 30px;
+    }
+    > .container {
+        font-size: 40px;
+        margin: 20px 30px;
+    }
+}
 </style>

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

@@ -1,260 +0,0 @@
-<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>