baozhida-building-system/src/views/system/entranceguard/equipment.vue

<template>
    <div class="equip_box">
        <div class="ment_equip">
            <div class="card_ment_equip">
                <div class="box_bj_equip center_in blue_bj_equip">
                    <svg-icon icon-class="rke" color="#fff" className="arch_icon_rke" />
                </div>
                <div class="equip_ment">
                    <div class="equip_ment_title">设备总数</div>
                    <span class="num_ment blue_title">999</span>
                </div>
            </div>
            <div class="card_ment_equip">
                <div class="box_bj_equip center_in yellow_bj_equip">
                    <svg-icon icon-class="rke" color="#fff" className="arch_icon_rke" />
                </div>
                <div class="equip_ment">
                    <div class="equip_ment_title">在线</div>
                    <span class="num_ment yellow_title">999</span>
                </div>
            </div>
            <div class="card_ment_equip">
                <div class="box_bj_equip center_in green_bj_equip">
                    <svg-icon icon-class="rke" color="#fff" className="arch_icon_rke" />
                </div>
                <div class="equip_ment">
                    <div class="equip_ment_title">异常</div>
                    <span class="num_ment green_title">999</span>
                </div>
            </div>
        </div>
        <div class="box_arch_ment">
            <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
        </div>
    </div>
</template>

<script setup>
const config = ref({
    headerBGC: '#10285c',
    oddRowBGC: '#10285c7f',
    evenRowBGC: '#10285c00',
    header: ['设备名称', '位置', '列3'],
    data: [
        ['行1列1', '行1列2', '行1列3'],
        ['行2列1', '行2列2', '行2列3'],
        ['行3列1', '行3列2', '行3列3'],
        ['行4列1', '行4列2', '行4列3'],
        ['行5列1', '行5列2', '行5列3'],
        ['行6列1', '行6列2', '行6列3'],
        ['行7列1', '行7列2', '行7列3'],
        ['行8列1', '行8列2', '行8列3'],
        ['行9列1', '行9列2', '行9列3'],
        ['行10列1', '行10列2', '行10列3']
    ]
})
</script>

<style scoped lang="scss">
.equip_box {
    width: 100%;
    height: 100%;
}

.ment_equip {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
    padding-left: 10px;
}

.box_bj_equip {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.arch_icon_rke {
    width: 25px;
    height: 25px;
}

.card_ment_equip {
    display: flex;
    align-items: center;
}

.equip_ment {
    display: flex;
    flex-direction: column;
    padding-left: 6px;
}

.equip_ment_title {
    color: #fff;
    font-size: 15px;
    user-select: none;
}

.num_ment {
    margin-top: 2px;
    font-size: 18px;
    color: #fff;
    user-select: none;
}

.box_arch_ment {
    padding-left: 10px;
    height: calc(100% - 63px);
}

.blue_title {
    background-image: -webkit-linear-gradient(bottom, rgb(47, 119, 173), rgb(229, 232, 236));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.yellow_title {
    background-image: -webkit-linear-gradient(bottom, rgb(187, 132, 83), rgb(229, 232, 236));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.green_title {
    background-image: -webkit-linear-gradient(bottom, rgb(87, 172, 115), rgb(229, 232, 236));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.blue_bj_equip {
    background-image: linear-gradient(25deg, rgb(40, 143, 221) 0%, rgba(0, 0, 0, 0)66%, rgb(40, 143, 221) 100%);
}

.yellow_bj_equip {
    background-image: linear-gradient(25deg, rgb(187, 132, 83) 0%, rgba(0, 0, 0, 0)66%, rgb(187, 132, 83) 100%);
}

.green_bj_equip {
    background-image: linear-gradient(25deg, rgb(87, 172, 115) 0%, rgba(0, 0, 0, 0)66%, rgb(87, 172, 115) 100%);
}
</style>