Zlpt_Portal/src/views/big-screen/model-components/left-two-model-new.vue

<template>
    <!-- 出租装备分析 -->
    <div class="container">
        <ScreenTitle :title="`出租装备数`" />

        <!-- 数据展示 -->
        <div class="data-blocks">
            <!-- 输电线路类 -->
            <div class="data-block transmission">
                <div class="icon-container">
                    <img src="@/assets/img/screen/ta.png" alt="输电线路类图标" />
                </div>
                <div class="info">
                    <div class="title">输电线路类</div>
                    <div style='display: flex'>
                        <div class="value">210<span class="unit">个</span></div>
                        <div class="percentage">50%</div>
                    </div>

                </div>
            </div>

            <!-- 变电安装类 -->
            <div class="data-block transformer">
                <div class="icon-container">
                    <img src="@/assets/img/screen/ta.png" alt="变电安装类图标" />
                </div>
                <div class="info">
                    <div class="title">变电安装类</div>
                    <div style='display: flex'>
                        <div class="value">120<span class="unit">个</span></div>
                        <div class="percentage">30%</div>
                    </div>
                </div>
            </div>

            <!-- 检修调试类 -->
            <div class="data-block maintenance">
                <div class="icon-container">
                    <img src="@/assets/img/screen/ta.png" alt="检修调试类图标" />
                </div>
                <div class="info">
                    <div class="title">检修调试类</div>
                    <div style='display: flex'>
                        <div class="value">80<span class="unit">个</span></div>
                        <div class="percentage">20%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import ScreenTitle from 'components/ScreenTitle/index.vue'
import { getLeaseCountByTypeNameApi } from 'http/api/screen/index'
const leftData_2 = ref<any>([])
const getLeaseCountByTypeNameData = async () => {
    const { data: res }: any = await getLeaseCountByTypeNameApi()
    leftData_2.value = res
    leftData_2.value.sort((a: any, b: any) => b.ratio - a.ratio)
    leftData_2.value.forEach((e: any) => {
        e.ratio = e.ratio.toFixed(2)
    })
}
getLeaseCountByTypeNameData()
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'DS-TITle';
    src: url('@/assets/font-family/DS-Digital/DS-TITle.ttf');
}
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: url('@/assets/img/screen/bg_1.png') no-repeat;
    background-size: 100% 100%;
    .data-blocks {
        display: flex;
        height: 100%;
        width: 100%;
        flex-direction: column;
        gap: 20px;

        .data-block {
            display: flex;
            align-items: center;
            color: #fff;
            position: relative;
            .icon-container {
                margin-leftl: 20px;
                img {
                    width: 85px; // 根据实际需求调整图标大小
                    height: auto;
                }
            }
            .info {
                margin-left: 10px;
                .title {
                    font-size: 14px;
                    color: #fff;
                    margin-bottom: 5px;
                }

                .value {
                    font-family: DS-TITle;
                    font-size: 30px;
                    color: #7FE4CC;
                    .unit {
                        font-size: 14px;
                    }
                }

                .percentage {
                    font-size: 16px;
                    color: #00b9c7;
                    margin-top: 5px;
                    margin-left: 15px;
                }
            }
        }

        .transmission {
            background: url('@/assets/img/screen/left-bottom.png');
            background-size: 100% 100%;
            height: 26%;
            width: 95%;
            margin-left: 2%;
            margin-top: 5%;
        }

        .transformer {
            background: url('@/assets/img/screen/left-bottom.png');
            background-size: 100% 100%;
            width: 95%;
            margin-left: 2%;
            height: 26%;
        }

        .maintenance {
            background: url('@/assets/img/screen/left-bottom.png');
            background-size: 100% 100%;
            width: 95%;
            margin-left: 2%;
            height: 26%;
        }
    }
}

</style>