huimv.client.demo2/src/views/infoInform/productionWarn.vue

<template>
    <div class="productionWarn">
        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">生产预警</h2>
        <section class="section">
            <h3>预警信息：</h3>
            <article class="item item_1">
                <div class="left el-icon-mobile-phone"></div>
                <div class="right">
                    <p class="top">消息警报</p>
                    <p class="middle">伊维菌素已经低于安全库存请及时补充！</p>
                    <span class="bottom">查看详情</span>
                </div>
            </article>
            <article class="item item_1">
                <div class="left el-icon-mobile-phone"></div>
                <div class="right">
                    <p class="top">消息警报</p>
                    <p class="middle">2622种母羊还有七天到达预产期请注意！</p>
                    <span class="bottom">查看详情</span>
                </div>
            </article>
            <article class="item item_1">
                <div class="left el-icon-mobile-phone"></div>
                <div class="right">
                    <p class="top">消息警报</p>
                    <p class="middle">3456种母羊已经到达可断奶日期，请及时断奶！</p>
                    <span class="bottom">查看详情</span>
                </div>
            </article>
            <article class="item item_1">
                <div class="left el-icon-mobile-phone"></div>
                <div class="right">
                    <p class="top">消息警报</p>
                    <p class="middle">伊维菌素已经低于安全库存请及时补充！</p>
                    <span class="bottom">查看详情</span>
                </div>
            </article>
            <article class="item item_1">
                <div class="left el-icon-mobile-phone"></div>
                <div class="right">
                    <p class="top">消息警报</p>
                    <p class="middle">2622种母羊还有七天到达预产期请注意！</p>
                    <span class="bottom">查看详情</span>
                </div>
            </article>
            <article class="item item_1">
                <div class="left el-icon-mobile-phone"></div>
                <div class="right">
                    <p class="top">消息警报</p>
                    <p class="middle">3456种母羊已经到达可断奶日期，请及时断奶！</p>
                    <span class="bottom">查看详情</span>
                </div>
            </article>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    created() {},
    methods: {}
};
</script>

<style lang="scss" scoped>
.productionWarn {
    .section{
        padding: 0 3%;
        h3{
            color: #333;
            font-size: 22px;
            margin-bottom: 30px;
        }
        .item{
            height: 110px;
            margin: 15px 0;
            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: #FFF5E6;
            .left{
                color: #FE9400;
            }
        }
    }
}
</style>