52 lines
897 B
Vue
52 lines
897 B
Vue
<template>
|
|
<view class="col u-margin-30 u-padding-20 box-shadow">
|
|
<view class="row u-flex" v-for="(col, idx) in props.column">
|
|
<view class="row-left" :style="{
|
|
width: `${props.labelWidth}rpx`
|
|
}">
|
|
{{col.name}}
|
|
</view>
|
|
<view class="row-right" :style="{
|
|
width: `calc(100% - ${props.labelWidth}rpx)`
|
|
}">
|
|
{{props.data[col.value]}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
labelWidth: {
|
|
type: Number,
|
|
default: 200
|
|
},
|
|
data:{
|
|
type: Object,
|
|
require: true
|
|
},
|
|
column: {
|
|
type: Array,
|
|
require : true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.col{
|
|
background-color: #ffffff;
|
|
border-radius: 8rpx;
|
|
.row{
|
|
padding: 12rpx 0;
|
|
align-items: flex-start;
|
|
&-left{
|
|
color: #333333;
|
|
}
|
|
&-right{
|
|
padding-left: 20rpx;
|
|
overflow-wrap: break-word;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
</style> |