<template>
    <div class="baseInfo-div">
        <div class="left-div">
            <div v-for="(item, index) of listData" :key="index">
                <span class="name">{{ item.name }}：</span>
                
                <span class="value" v-if="item.name == '设备二维码'">
                    <img src="@/assets/images/qcode.png" alt="">
                </span>
                <span class="value" v-else>{{ item.value }}</span>
            </div>
        </div>
        <div class="right-div">
            <img src="@/assets/images/device.png" alt="" width="400">
            <span>设备图片</span>
        </div>
    </div>
</template>
<script setup>

const props = defineProps({
    infoList: {
        default: {},
        type: Object
    }
})

const listData = props.infoList.detail;
</script>
<style lang="scss" scoped>
.baseInfo-div {
    width: 100%;
    // height: 80%;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    .left-div {
        width: 69%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        >div {
            padding: 40px 0;
            width: 48%;
            line-height: 24px;
            height: 48px;
            justify-content: space-between;
            display: flex;
            align-items: center;
            .name {
                width: 40%;
                text-align: right;
            }
            .value {
                width: 59%;
            }
        }
    }
    .right-div {
        width: 30%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

}
</style>