对于这种，样式一样，但是图片和字体颜色不一样，动态渲染。
代码：
<template><view class="page"><view class="rows" v-for="item in data"><view class="v0"><view class="icon"><image :src="item.image" class="xyj-icon"></image></view><view class="title"><view class="item">{{item.item}}</view><view class="time">{{item.time}}</view></view><view class="status" :style="{ color: item.color }">{{item.status}}</view></view></view></view>
</template><script setup>const data = [{ id:1 , image:"../../static/icon/xyj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'已报修',color: '#FD9352'},{ id:2, image:"../../static/icon/xyj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'处理中', color: '#738AED' },{ id:3 , image:"../../static/icon/cfj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'处理中', color: '#738AED'},{ id:4, image:"../../static/icon/xyj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'已解决', color: '#00C0D3 '},{ id:5 , image:"../../static/icon/cfj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'已解决', color: '#00C0D3 ' }];
</script>看得懂，会写了，下班！
优化一下代码：
<!-- 报修记录 -->
<template><view class="page"><view class="rows" v-for="item in data"><view class="icon"><image :src="item.image" class="xyj-icon"></image></view><view class="title"><view class="item">{{item.item}}</view><view class="time">{{item.time}}</view></view><view class="status" :style="{ color: item.color }">{{item.status}}</view></view></view>
</template><script setup>const data = [{ id:1 , image:"../../static/icon/xyj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'已报修',color: '#FD9352'},{ id:2, image:"../../static/icon/xyj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'处理中', color: '#738AED' },{ id:3 , image:"../../static/icon/cfj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'处理中', color: '#738AED'},{ id:4, image:"../../static/icon/xyj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'已解决', color: '#00C0D3 '},{ id:5 , image:"../../static/icon/cfj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'已解决', color: '#00C0D3 ' }];
</script><style scoped>.page{min-height: 100vh;background-color: #F1F7FA;box-sizing: border-box;padding-top: 12rpx;}.rows{display: flex;height: 156rpx; background-color: #FFFFFF;margin-left: 26rpx;margin-right: 24rpx;border-radius: 12rpx;margin-top: 12rpx;}.icon{height: 96rpx;margin-left: 34rpx;margin-top: 31rpx;border: 1rpx dashed gray;border-radius: 12rpx;}.xyj-icon{width: 96rpx;height: 96rpx;}.title{height: 96rpx;margin-top: 31rpx;}.item.time.status{font-family: Source Han Sans, Source Han Sans;font-style: normal;text-transform: none;}.item{width: 175rpx;height: 38rpx;font-weight: 400;font-size: 26rpx;margin-left: 40rpx;margin-top: 5rpx;line-height: 38rpx;text-align: center;}.time{width: 226rpx;height: 32rpx;font-weight: 350;font-size: 20rpx;color: #727272;margin-left: 20rpx;margin-top: 21rpx;line-height: 32rpx;text-align: center;}.status{height: 38rpx;margin-right: 34rpx;margin-top: 60rpx;margin-left: 200rpx;font-weight: 500;font-size: 26rpx;text-align: center;}
</style>
)
