<template>
    <div class="Index">
        <!-- EEveDistribution  EEveDis-->
        <!-- EEveLevelDistribution EEveLevelDis -->
        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">存栏统计</h2>
        <header class="header">
            <div class="left">
                <E-Eve-Dis></E-Eve-Dis>
            </div>
            <div class="right">
                <E-Eve-Level-Dis></E-Eve-Level-Dis>
            </div>
        </header>
        <section class="section">
            <ul class="ul">
                <li class="li">
                    <span class="title">总存栏数</span>
                    <span class="content">2141</span>
                </li>
                <li class="li">
                    <span class="title">种母羊存栏数</span>
                    <span class="content">2035</span>
                </li>
                <li class="li">
                    <span class="title">种公羊存栏数</span>
                    <span class="content">48</span>
                </li>
                <li class="li">
                    <span class="title">可配种母羊数</span>
                    <span class="content">461</span>
                </li>
                
            </ul>
             <ul class="ul">
                <li class="li">
                    <span class="title">羔羊存栏数</span>
                    <span class="content">14</span>
                </li>
                <li class="li">
                    <span class="title">配种成功率</span>
                    <span class="content">92%</span>
                </li>
                <li class="li">
                    <span class="title">双羔率</span>
                    <span class="content">75%</span>
                </li>
                <li class="li">
                    <span class="title">羔羊断奶存活率</span>
                    <span class="content">97%</span>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
import EEveDis from "./charts/EEveDis";
import EEveLevelDis from "./charts/EEveLevelDis";

export default {
    name: "Index",
    components: {
        "E-Eve-Dis": EEveDis,
        "E-Eve-Level-Dis": EEveLevelDis
    },
    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: 70px 0;
        .ul {
            display: flex;
            justify-content: space-around;
            padding: 0 8%;
            margin: 50px;
            .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>
