HY.butcher.client/src/views/slaughterManagment/costAccounting.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-Cost></E-Cost>
            </div>
            <div class="right">
                <E-Profit></E-Profit>
            </div>
        </header>
        <section class="section">
            <h2>批次数据</h2>
            <ul class="ul">
                <li class="li">
                    <span class="title">出肉率</span>
                    <span class="content">67.8%</span>
                </li>
                <li class="li">
                    <span class="title">排酸损耗</span>
                    <span class="content">1.52%</span>
                </li>
                <li class="li">
                    <span class="title">总销售额</span>
                    <span class="content">68653.18元</span>
                </li>
                <li class="li">
                    <span class="title">利润率</span>
                    <span class="content">19.68%</span>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
import ECost from './cost_echarts/E-Cost'
import EProfit from "./cost_echarts/E-Profit";

export default {
    name: "Index",
    components: {
        EProfit,
        ECost
    },
    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: 110px 0 0 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>