huimv.client.demo2/src/views/index/Index.vue

<template>
    <div class="Index">
        <header class="header">
            <div class="left">
                <chart-a class="chart_a"></chart-a>
            </div>
            <div class="right">
                <chart-b></chart-b>
            </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">9</span>
                </li>
                <li class="li">
                    <span class="title">均断奶活仔数</span>
                    <span class="content">21</span>
                </li>
                <li class="li">
                    <span class="title">均断奶天数</span>
                    <span class="content">14</span>
                </li>
                <li class="li">
                    <span class="title">均断奶活存活率</span>
                    <span class="content">99%</span>
                </li>
            </ul>
        </section>
        <footer class="footer">
            <el-carousel height="150px" :interval="5000" direction="vertical" indicator-position="none">
                <el-carousel-item>
                    <div class="item item_1">
                        <div class="left el-icon-mobile-phone"></div>
                        <div class="right">
                            <p class="top">消息警报</p>
                            <p class="middle">1耳标457865号母猪产仔存活率低于70%</p>
                            <span class="bottom">查看详情</span>
                        </div>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div class="item item_2">
                        <div class="left el-icon-mobile-phone"></div>
                        <div class="right">
                            <p class="top">消息警报</p>
                            <p class="middle">2耳标457865号母猪产仔存活率低于70%</p>
                            <span class="bottom">查看详情</span>
                        </div>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div class="item item_3">
                        <div class="left el-icon-mobile-phone"></div>
                        <div class="right">
                            <p class="top">消息警报</p>
                            <p class="middle">3耳标457865号母猪产仔存活率低于70%</p>
                            <span class="bottom">查看详情</span>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </footer>
    </div>
</template>

<script>
import { mapActions } from "vuex";
import chart_a from "./charts/chart_a";
import chart_b from "./charts/chart_b";

export default {
    name: "Index",
    components: {
        "chart-a": chart_a,
        "chart-b": chart_b
    },
    data() {
        return {};
    },
    created() {},
    methods: {
        ...mapActions(["fetch"]),
        get() {
            this.fetch({
                api: "aaa",
                method: "GET",
                data: {},
                success: res => {
                    console.log(res);
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.Index {
    .header {
        display: flex;
        padding-right: 11%;
        .left {
            width: 50%;
            height: 400px;
        }
        .right {
            width: 50%;
            height: 400px;
        }
    }
    .section {
        margin: 60px 0;
        .ul {
            display: flex;
            justify-content: space-around;
            padding: 0 8%;
            .li {
                height: 80px;
                width: 170px;
                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);
                }
            }
        }
    }
    .footer {
        .item{
            height: 100%;
            display: flex;
            box-sizing: border-box;
            border-radius: 10px;
            align-items: center;
            
            .left{
                font-size: 30px;
                margin-left: 20px;
                margin-right: 20px;
            }
            .right{
                .top{
                    font-size: 20px;
                    font-weight: 600;
                    color: #746363;
                }
                .middle{
                    font-size: 16px;
                    color: #999;
                }
                .bottom{
                    font-size: 16px;
                    color: rgb(48, 115, 240);
                }
            }
        }
        .item_1{
            background-color: #EBF5FF;
            .left{
                color: #0079FE;
            }
        }
        .item_2{
            background-color: #E6FAF0;
            .left{
                color: #4BD863;
            }
        }
        .item_3{
            background-color: #FFEEE6;
            .left{
                color: #FF3B30;
            }
        }
    }
}
</style>