hy.big_screen/src/views/Yield/Yield.vue

<template>
    <div class="Yield">
        <header>
            <!-- <h1 class="title">湖羊全产业链数字化管理系统</h1> -->
            <hy-header :navTag="3"></hy-header>
        </header>
        <section>
            <div class="left">
                <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>
                    <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">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 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="center">
                <!-- <E-MiddleMap style="height: 100%"></E-MiddleMap> -->
                <img src="../../assets/9bce2ea1dc3f5a0faeae227ad9ee24c.png" style="height: 100%; width: 100%">
            </div>
            <div class="right">
                <div class="warp">
                    <div class="cell cell1">
                        <img
                            src="../../assets/u871.jpg"
                            width="80%"
                            height="80%"
                        />
                    </div>
                    <div class="cell e_cell">
                        <E-Right1 style="height: 100%"></E-Right1>
                    </div>
                </div>
                <div class="warp">
                    <div class="cell cell2">
                        <img
                            src="../../assets/u871.jpg"
                            width="80%"
                            height="80%"
                        />
                    </div>
                    <div class="cell e_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: 35%;
            display: flex;
            .left_chart {
                width: 57%;
                flex-grow: 1;
                display: flex;
                flex-direction: column;
            }
            .left_title {
                margin: 40px 0 60px 0;
                width: 43%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .item {
                    border-radius: 20px;
                    height: 90px;
                    min-width: 400px;
                    max-width: 500px;
                    border: 4px solid #53bafd;
                    box-sizing: border-box;
                    margin: 20px 60px;
                    font-size: 35px;
                    font-weight: 600;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .title {
                        color: #fff;
                    }
                    .num {
                        color: #53bafd;
                        font-size: 1.2em;
                    }
                    .unit {
                        color: #53bafd;
                        font-size: 20px;
                        margin-left: 15px;
                    }
                }
            }
            
        }
        > .center {
            width: 30%;
            // border: 1px solid rgb(163, 147, 58);
        }
        > .right {
            width: 35%;
            // 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: 40.5%;
                    background-image: url(../../assets/download.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
                > .e_cell {
                    width: 57%;
                }
                > .cell1,
                .cell2 {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
    > footer {
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        // > div {}
        .cell_one {
            // border: 1px solid rgb(126, 95, 38);
            width: 20%;
        }
        .cell_two {
            // border: 1px solid rgb(61, 90, 38);
            width: 27%;
        }
        .cell_three {
            // border: 1px solid rgb(176, 86, 204);
            width: 27%;
        }
        .cell_four {
            // border: 1px solid rgb(218, 99, 99);
            width: 20%;
        }
    }
}
</style>