.

src/views/LvShanXiang/LvShanXiang - 副本 (2).vue

@@ -0,0 +1,574 @@
+<template>
+    <div class="LvShanXiang" @click="qita">
+        <hy-header :navTag="0"></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 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">33</span>
+                                <span class="unit">元/kg</span>
+                            </div>
+                        </div>
+                        <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">0.8</span>
+                                <span class="unit">元/kg</span>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                <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 class="bg_map" src="../../assets/u922.png" />
+                    <!-- <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" @click.stop="clickPoint('ys')">
+                        <i class="warp">
+                            <i class="middle">
+                                <i class="center"></i>
+                            </i>
+                        </i>
+                    </div> -->
+                    <div class="icon_pasture_1" @click.stop="clickPoint('dr')">
+                        <img src="../../assets/icon_pasture.png">
+                        <h3>长兴德睿生态农业开发有限公司</h3>
+                    </div>
+                    <div class="icon_pasture_2" @click.stop="clickPoint('ys')">
+                        <img src="../../assets/icon_pasture.png">
+                        <h3>长兴永盛牧业有限公司</h3>
+                    </div>
+                    
+                    <!-- <div class="point p3">
+                        <i class="warp">
+                            <i class="middle">
+                                <i class="center"></i>
+                            </i>
+                        </i>
+                    </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">
+                <div class="right1">
+                    <E-Right1 style="height: 100%"></E-Right1>
+                </div>
+                <div class="right2">
+                    <E-Right2 style="height: 100%"></E-Right2>
+                </div>
+                <div class="right3">
+                    <E-Right3 style="height: 100%"></E-Right3>
+                </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>
+
+<script>
+import HyHeader from "@/components/HyHeader";
+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 {
+            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,
+        ELeft1,
+        ELeft2,
+        ELeft3,
+        ERight1,
+        ERight2,
+        ERight3,
+    },
+    created() {
+        document.title = "吕山牧场";
+    },
+    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>
+
+<style lang="scss" scope>
+.LvShanXiang {
+    background-image: url(../../assets/bg.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    box-sizing: border-box;
+    // border: 1px solid #f52424;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    > .warp {
+        // border: 1px solid #ffee00;
+        height: 100%;
+        display: flex;
+        .left {
+            // border: 1px solid #2b65e0;
+            width: 20%;
+            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%;
+            }
+        }
+        > .middle {
+            width: 60%;
+            min-width: 1600px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            > .section {
+                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 3%;
+                        padding: 10px 10px 10px 10px;
+                        font-size: 35px;
+                        font-weight: 600;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        .title {
+                            color: #fff;
+                        }
+                        .num {
+                            color: #53bafd;
+                            font-size: 1.2em;
+                        }
+                        .unit {
+                            color: #53bafd;
+                            font-size: 20px;
+                            margin-left: 15px;
+                        }
+                    }
+                }
+            }
+            > .footer {
+                // border: 1px solid #8877dd;
+                width: 92%;
+                flex-grow: 1;
+                margin: 80px 0;
+                display: flex;
+                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;
+                    }
+                }
+                > .bg_map {
+                    height: 80%;
+                    width: 70%;
+                    -webkit-user-select: none;
+                    -moz-user-select: none;
+                    -ms-user-select: none;
+                    user-select: none;
+                }
+                .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%;
+                // }
+                > .p1 {
+                    left: 33%;
+                    top: 57%;
+                }
+                > .p2 {
+                    left: 55%;
+                    top: 45%;
+                    // z-index: 1;
+                }
+                > .icon_pasture_1 {
+                    position: absolute;
+                    // left: 29%;
+                    // top: 64%;
+                    left: 27%;
+                    top: 57%;
+                    text-align: center;
+                    > img {
+                        width: 80px;
+                    }
+                    > h3{
+                        color: #FFF;
+                        font-size: 30px;
+                    }
+                }
+                > .icon_pasture_2 {
+                    position: absolute;
+                    text-align: center;
+                    // left: 54.6%;
+                    // top: 51.7%;
+                    left: 55%;
+                    top: 48%;
+                    > img {
+                        width: 80px;
+                    }
+                    > h3{
+                        color: #FFF;
+                        font-size: 30px;
+                    }
+                }
+            }
+            > .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%;
+                    }
+                }
+            }
+        }
+        .right {
+            // border: 1px solid #2b65e0;
+            width: 20%;
+            > .right1 {
+                // border: 1px solid #8bdd77;
+                height: 33.33%;
+            }
+            > .right2 {
+                // border: 1px solid #ddad77;
+                height: 33.33%;
+            }
+            > .right3 {
+                // border: 1px solid #8bdd77;
+                height: 33.33%;
+            }
+        }
+    }
+}
+
+.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/LvShanXiang/LvShanXiang.vue

@@ -62,7 +62,8 @@
                         </div>
                     </div>
                 </section>
-                <footer class="footer" v-if="isShowMain">
+                <!-- <footer class="footer" v-if="isShowMain"> -->
+                <footer class="footer" v-if="false">
                     <main class="inputWrap">
                         <input
                             type="text"
@@ -73,21 +74,6 @@
                         <i class="icon_search" @click.stop="search"></i>
                     </main>
                     <img class="bg_map" src="../../assets/u922.png" />
-                    <!-- <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" @click.stop="clickPoint('ys')">
-                        <i class="warp">
-                            <i class="middle">
-                                <i class="center"></i>
-                            </i>
-                        </i>
-                    </div> -->
                     <div class="icon_pasture_1" @click.stop="clickPoint('dr')">
                         <img src="../../assets/icon_pasture.png">
                         <h3>长兴德睿生态农业开发有限公司</h3>
@@ -96,21 +82,15 @@
                         <img src="../../assets/icon_pasture.png">
                         <h3>长兴永盛牧业有限公司</h3>
                     </div>
-                    
-                    <!-- <div class="point p3">
-                        <i class="warp">
-                            <i class="middle">
-                                <i class="center"></i>
-                            </i>
-                        </i>
-                    </div> -->
                 </footer>
-                <footer
+                <!-- <footer
                     class="footer_2"
                     v-show="!isShowMain"
-                    
+                > -->
+                <footer
+                    class="footer_2"
+                    v-show="false"
                 >
-                <!-- @click.stop="isShowMain = false" -->
                     <h1>族谱溯源</h1>
                     <article class="tree">
                         <div class="self">021543</div>
@@ -122,6 +102,9 @@
                         <div class="mm">母母：046585</div>
                     </article>
                 </footer>
+                <footer class="footer">
+                    <iframe src="http://122.237.98.3:8888/LvShanDaShuJu/page/map.html" frameborder="0" style="height: 100%; width:100%"></iframe>
+                </footer>
             </div>
             <div class="right">
                 <div class="right1">