hy.big_screen/src/views/Butcher/Butcher.vue

<template>
    <div class="Butcher">
        <header>
            <h1 class="title">湖羊全产业链数字化管理系统</h1>
        </header>
        <section>
            <aside class="left">
                <article class="left_1">
                    <h3>市场行情</h3>
                    <table class="table">
                        <tr>
                            <th>产品</th>
                            <th>价格</th>
                            <th>市场</th>
                        </tr>
                        <tr v-for="item in 8" :key="item">
                            <td>羊肉</td>
                            <td>
                                55元/公斤
                                <b v-if="item % 2 == 0" style="color: #00ca01"
                                    >▲</b
                                >
                                <b v-else style="color: red">▼</b>
                            </td>
                            <td>杭州市</td>
                        </tr>
                    </table>
                </article>
                <article class="left_2">
                    <h3>市场行情</h3>
                    <E-Left1 style="height: 100%"></E-Left1>
                </article>
                <article class="left_3">
                    <h3>长兴县销售情况</h3>
                    <E-Left2 style="height: 100%"></E-Left2>
                </article>
            </aside>
            <div class="center">
                <div class="top">
                    <article class="upper">
                        <div class="date">2020-10-12</div>
                        <div class="title">首 页</div>
                        <img class="icon" src="../../assets/chilun.png">
                    </article>
                    <article class="mid">
                        <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">94.2</span>
                                    <span class="unit">%</span>
                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="lower"></article>
                </div>
                <div class="bottom">
                    <article>
                        <E-Bottom1 style="height: 100%"></E-Bottom1>
                    </article>
                    <article>
                        <E-Bottom2 style="height: 100%"></E-Bottom2>
                    </article>
                    <article>
                        <E-Bottom3 style="height: 100%"></E-Bottom3>
                    </article>
                </div>
            </div>
            <aside class="right">
                <article class="right_1">
                    <h3>产品运输任务</h3>
                    <E-Right1 style="height: 100%"></E-Right1>
                </article>
                <article class="right_2">
                    <h3>屠宰采购来源</h3>
                    <!--  cellspacing="0px" -->
                    <table class="table">
                        <tr>
                            <th>羊只</th>
                            <th>来源地</th>
                        </tr>
                        <tr v-for="item in 8" :key="item" class="row">
                            <td>12457</td>
                            <td>湖州市长兴县吕山乡</td>
                        </tr>
                    </table>
                </article>
                <article class="right_3">
                    <h3>屠宰销售去向</h3>
                    <table class="table">
                        <tr>
                            <th>羊只</th>
                            <th>去向</th>
                        </tr>
                        <tr v-for="item in 8" :key="item" class="row">
                            <td>12457</td>
                            <td>湖州市长兴县吕山乡</td>
                        </tr>
                    </table>
                </article>
            </aside>
        </section>
    </div>
</template>

<script>
import ELeft1 from "./charts/ELeft1";
import ELeft2 from "./charts/ELeft2";
import ERight1 from "./charts/ERight1";
import EBottom1 from "./charts/EBottom1";
import EBottom2 from "./charts/EBottom2";
import EBottom3 from "./charts/EBottom3";
export default {
    name: "Butcher",
    components: {
        ELeft1,
        ELeft2,
        ERight1,
        EBottom1,
        EBottom2,
        EBottom3,
    },
    data() {
        return {};
    },
    created() {},
    methods: {},
};
</script>

<style lang="scss" scope>
.Butcher {
    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 {
        flex-grow: 1;
        height: 61%;
        display: flex;
        > aside {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            > article {
                height: 31%;
                background-image: url(../../assets/download.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                > h3 {
                    color: #fff;
                    font-size: 25px;
                    margin-left: 12%;
                    margin-top: 13px;
                    display: flex;
                    align-items: center;
                    &:before {
                        content: "";
                        display: inline-block;
                        height: 25px;
                        width: 25px;
                        margin-right: 50px;
                        background-color: #fff;
                    }
                }
            }
        }
        > .left {
            width: 20%;
            // border: 1px solid rgb(218, 99, 99);
            display: flex;
            flex-direction: column;
            > .left_1 {
                > .table {
                    color: #fff;
                    font-size: 30px;
                    margin: 20px;
                    width: 100%;
                    text-align: center;
                }
            }
        }
        > .center {
            width: 60%;
            // border: 1px solid rgb(163, 147, 58);
            display: flex;
            flex-direction: column;
            > .top {
                height: 72%;
                // border: 1px solid rgb(62, 58, 128);
                .upper {
                    font-size: 40px;
                    color: #fff;
                    display: flex;
                    justify-content: space-around;
                    margin: 20px 3%;
                    // .date {}
                    .title {
                        flex-grow: 1;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        &::before {
                            content: "";
                            border: 1px solid #4b81ec;
                            height: 0px;
                            flex-grow: 1;
                            margin: 0 50px;
                        }
                        &::after {
                            content: "";
                            border: 1px solid #4b81ec;
                            height: 0px;
                            flex-grow: 1;
                            margin: 0 50px;
                        }
                    }
                    .icon {
                        width: 50px;
                        height: 50px;
                    }
                }
                .mid {
                    > .warp {
                        display: flex;
                        
                        margin: 20px 5%;
                        .item {
                            border-radius: 20px;
                            height: 90px;
                            border: 4px solid #53bafd;
                            box-sizing: border-box;
                            flex: 1 0 20%;
                            margin: 20px 80px;
                            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;
                            }
                        }
                    }
                }
                // .lower {}
            }
            > .bottom {
                height: 28%;
                // border: 1px solid rgb(23, 131, 116);
                display: flex;
                justify-content: space-between;
                > article {
                    width: 33%;
                }
            }
        }
        > .right {
            width: 20%;
            // border: 1px solid rgb(61, 197, 179);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            > .right_2,
            > .right_3 {
                > .table {
                    color: #fff;
                    font-size: 30px;
                    margin: 20px;
                    width: 96%;
                    text-align: center;
                    .row {
                        background-color: #006666ee;
                    }
                }
            }
        }
    }
}
</style>