screenFront/src/views/Exhibition/Germany/components/BottomLBox.vue

<template>
    <div class="bl-box-container">
        <div class="box-item pos">{{ tLang('messages', '机架号') }}:
            <div>{{ props.data?.label }}</div>
        </div>
        <div class="box-item">{{ tLang('messages', '设备状态') }}:
            <div class="status" :class="[statusObj[props.data?.workingState]]"></div>
        </div>
        <div class="box-item">
            <div style="text-wrap: nowrap;">{{ tLang('messages', '型号') }}:</div>
            <div> RPSP-NM-I+K-1-1800-Ⅰ-WC2+K-RF-1P220</div>
        </div>
        <div class="box-img">
            <el-image :src="lqImg" fit="contain"></el-image>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const props = defineProps<{
    data: any,
}>()

let statusObj = {
    0:'red',
    1:'yello',
    2:'green',
    3:'yello'
}

let lqImg = require('./../images/lq.png');
</script>

<style lang="scss" scoped>
.bl-box-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .box-item {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding-left: 10px;
        box-sizing: border-box;

        div {
            margin-left: 20px;
        }

    }
    .pos {
        position: absolute;
        top: 80px;
        left: 190px;
    }

    .box-img {
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>