HY.yield.client/src/views/statisticAnalysis/productData.vue

<template>
    <div class="Index">
        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">生产统计</h2>
        <header class="header">
            <div class="left">
                <E-Out-Sheepfold></E-Out-Sheepfold>
            </div>
            <div class="right">
                <E-Give-Birth></E-Give-Birth>
            </div>
        </header>
        <section class="section">
            <h2>生产数据</h2>
            <ul class="ul">
                <li class="li">
                    <span class="title">本月出生数</span>
                    <span class="content">681</span>
                </li>
                <li class="li">
                    <span class="title">本月调入数</span>
                    <span class="content">40</span>
                </li>
                <li class="li">
                    <span class="title">本月调出数</span>
                    <span class="content">886</span>
                </li>
                <li class="li">
                    <span class="title">累计调入数</span>
                    <span class="content">8258</span>
                </li>
                <li class="li">
                    <span class="title">累计调出数</span>
                    <span class="content">8530</span>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
import EOutSheepfold from "./charts/EOutSheepfold";
import EGiveBirth from "./charts/EGiveBirth";

export default {
    name: "Index",
    components: {
        "E-Out-Sheepfold": EOutSheepfold,
        "E-Give-Birth": EGiveBirth
    },
    data() {
        return {};
    },
    created() {},
    methods: {
        
    }
};
</script>

<style lang="scss" scoped>
.Index {
    .header {
        display: flex;
        padding-right: 11%;
        .left {
            width: 50%;
            height: 400px;
        }
        .right {
            width: 50%;
            height: 400px;
        }
    }
    .section {
        margin: 50px 0;
        padding: 10px 10px 10px 10px;
        border: 1px solid #ccc;
        border-radius: 10px;
        h2{
            color: #292929;
        }
        .ul {
            display: flex;
            justify-content: space-around;
            padding: 40px 8% 80px 8%;
            .li {
                height: 80px;
                width: 180px;
                background-color: #ddd;
                border-radius: 10px;
                padding: 10px 0;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;

                .title {
                    font-size: 22px;
                    font-weight: 600;
                    color: #444;
                }
                .content {
                    font-size: 22px;
                    font-weight: 600;
                    color: rgb(48, 115, 240);
                }
            }
        }
    }
}
</style>