hy.big_screen/src/views/LvShanXiang/LvShanXiang.vue

<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 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="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;
                    }
                }
                > img {
                    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%;
                }
            }
            > .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>