80 lines
2.1 KiB
Vue
80 lines
2.1 KiB
Vue
<template>
|
||
<a-row type="flex">
|
||
<a-col flex="1">
|
||
<div class="info-row"
|
||
v-for="(item, index) in leftList"
|
||
:key="item.id || (item.label + index)"
|
||
:class="index !== leftList.length - 1 ? `mb-${gutter}` : ''">
|
||
<div class="info-label" :title="item.label">{{ item.label }}</div>
|
||
<!-- valueField是数据的字段，表示从data中取数据 -->
|
||
<div v-if="item.valueField && data && ![undefined, null, ''].includes(data[item.valueField])"
|
||
class="info-value over-text"
|
||
:title="`${data[item.valueField]} ${item.unit || ''}`">
|
||
{{ `${data[item.valueField]} ${item.unit || ''}` }}
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
<a-col flex="1px" class="divider-vertical"></a-col>
|
||
<a-col flex="1">
|
||
<div class="info-row"
|
||
v-for="(item, index) in rightList"
|
||
:key="item.id || (item.label + index)"
|
||
:class="index !== rightList.length - 1 ? `mb-${gutter}` : ''">
|
||
<div class="info-label" :title="item.label">{{ item.label }}</div>
|
||
<!-- valueField是数据的字段，表示从data中取数据 -->
|
||
<div v-if="item.valueField && data && ![undefined, null, ''].includes(data[item.valueField])"
|
||
class="info-value over-text"
|
||
:title="`${data[item.valueField]} ${item.unit || ''}`">
|
||
{{ `${data[item.valueField]} ${item.unit || ''}` }}
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'CommonCardInfo',
|
||
props: {
|
||
// 左右列表
|
||
leftList: {
|
||
type: Array,
|
||
required: false,
|
||
default: () => []
|
||
},
|
||
rightList: {
|
||
type: Array,
|
||
required: false,
|
||
default: () => []
|
||
},
|
||
// 数据
|
||
data: {
|
||
type: Object,
|
||
required: false,
|
||
default: () => ({})
|
||
},
|
||
// 间隔 class 样式
|
||
gutter: {
|
||
type: String,
|
||
required: false,
|
||
default: '15'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.info-row {
|
||
height: 19px;
|
||
.info-value {
|
||
max-width: 50%;
|
||
}
|
||
}
|
||
.mb-12 {
|
||
margin-bottom: 12px;
|
||
}
|
||
.mb-15 {
|
||
margin-bottom: 15px;
|
||
}
|
||
</style>
|