69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
<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> |