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

<template>
    <div class="LvShanXiang">
        <div class="left1">
            <E-Left1 style="height: 100%"></E-Left1>
        </div>
        <div class="middle">
            <header class="header">吕山乡牧场综合管理平台</header>
            <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">58.5</span>
                            <span class="unit">元/kg</span>
                        </div>
                    </div>
                    <div class="item">
                        <div>
                            <span class="title">当前种羊价：</span>
                            <span class="num">68.5</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">
                <img src="../../assets/u922.png" />
                <div class="point p1">
                    <i class="warp">
                        <i class="middle">
                            <i class="center"></i>
                        </i>
                    </i>
                </div>
                <div class="point p2">
                    <i class="warp">
                        <i class="middle">
                            <i class="center"></i>
                        </i>
                    </i>
                </div>
                <div class="point p3">
                    <i class="warp">
                        <i class="middle">
                            <i class="center"></i>
                        </i>
                    </i>
                </div>
            </footer>
        </div>
        <div class="right1">
            <E-Right1 style="height: 100%"></E-Right1>
        </div>
        <div class="left2">
            <E-Left2 style="height: 100%"></E-Left2>
        </div>
        <div class="right2">
            <E-Right2 style="height: 100%"></E-Right2>
        </div>
        <div class="left3">
            <E-Left3 style="height: 100%"></E-Left3>
        </div>
        <div class="right3">
            <E-Right3 style="height: 100%"></E-Right3>
        </div>
    </div>
</template>

<script>
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 {};
    },
    components: {
        ELeft1,
        ELeft2,
        ELeft3,
        ERight1,
        ERight2,
        ERight3,
    },
    created() {},
    methods: {},
};
</script>

<style lang="scss" scope>
.LvShanXiang {
    background-image: url(../../assets/bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    height: 100%;
    display: grid;
    grid-template-columns: 4fr 7fr 4fr;
    grid-template-rows: 1.2fr repeat(2, 1fr);
    .middle {
        display: flex;
        flex-direction: column;
        align-items: center;
        > .header {
            // border: 1px solid #8877dd;
            background: url(../../assets/bg_header.png) no-repeat;
            background-size: 100% 100%;
            width: 171%;
            height: 180px;
            line-height: 110px;
            font-size: 50px;
            font-weight: 600;
            // color: #69f8fe;
            color: #FFF;
            text-align: center;
            margin-bottom: 40px;
        }
        > .section {
            width: 92%;
            .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 40px;
                    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;
                    }
                }
            }
        }
        > .footer {
            // border: 1px solid #8877dd;
            width: 92%;
            flex-grow: 1;
            margin: 80px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            > img {
                height: 80%;
            }
            .point {
                position: absolute;
                > .warp {
                    flex-basis: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 6px solid #2793D1;
                    border-radius: 50%;
                    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%;
            }
        }
    }
}
// .left1 {
//     border: 1px solid #8877dd;
// }
// .left2 {
//     border: 1px solid #77a0dd;
// }
// .left3 {
//     border: 1px solid #ddad77;
// }
.middle {
    // border: 1px solid #8bdd77;
    grid-row-start: 1;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 3;
}
// .right1 {
//     border: 1px solid #6e277c;
// }
// .right2 {
//     border: 1px solid #dd77bb;
// }
// .right3 {
//     border: 1px solid #7da359;
// }

.left1,
.right1 {
    margin-top: 8%;
}
</style>