neic-hefeng/src/components/area/windturbine/WindturbineMinCard.vue

/* 风机矩阵小卡片 */
<template>
    <div :class="cardStyle">
        <el-row>
            <el-col span="12">
                <div :class="leftStyle">
                    <el-row>
                        <div :class="title1Style">SG</div>
                    </el-row>
                    <el-row>
                        <div :class="title2Style">223</div>
                    </el-row>
                </div>
            </el-col>
            <el-col span="12">
                <div :class="rightStyle">
                    <el-row>
                        <div :class="contentStyle">123.54 kw</div>
                    </el-row>
                    <el-row>
                        <div :class="contentStyle">8.23 m/s</div>
                    </el-row>
                    <el-row>
                        <div :class="contentStyle">1234.56 rpm</div>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "WindturbineMinCard",
        props: {
            status: String,
        },
        computed: {
            cardStyle: function () {
                return "card-style-" + this.status;
            },
            leftStyle: function () {
                return "card-left-style-" + this.status;
            },
            rightStyle: function () {
                return "card-right-style-" + this.status;
            },
            title1Style: function () {
                return "card-title1-style-" + this.status;
            },
            title2Style: function () {
                return "card-title2-style-" + this.status;
            },
            contentStyle: function () {
                return "card-content-style-" + this.status;
            }
        },
    };
</script>
<style scoped>
    .card-style-1 {
        position: relative;
        width: 120px;
        height: 50px;
        border: 2px solid #4952a6;
        background-color: rgba(73, 82, 166, 0.5);
        box-sizing: border-box;
        display: inline-block;
    }

    .card-left-style-1 {
        position: relative;
        width: 25px;
        height: 41px;
        background-color: rgba(73, 82, 166, 0.7);
        box-sizing: border-box;
        margin: 3px;
        display: inline-block;
    }

    .card-right-style-1 {
        position: relative;
        width: calc(120px - 4px - 6px - 25px);
        height: calc(50px - 2px);
        border-left: 2px dashed #4952a6;
        box-sizing: border-box;
        display: inline-block;
    }

    .card-title1-style-1 {
        margin-top: 2px;
        font-size: 14px;
        width: 100%;
        text-align: center;
    }

    .card-title2-style-1 {
        margin-top: 2px;
        font-size: 10px;
        width: 100%;
        text-align: center;
    }

    .card-content-style-1 {
        width: 100%;
        text-align: right;
        font-size: 5px;
    }
</style>