工作笔记【四】

对于这种,样式一样,但是图片和字体颜色不一样,动态渲染。

代码:

复制代码
<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>

看得懂,会写了,下班!

相关推荐
孞㐑¥1 小时前
Linux之Socket 编程 UDP
linux·服务器·c++·经验分享·笔记·网络协议·udp
sealaugh323 小时前
aws(学习笔记第四十八课) appsync-graphql-dynamodb
笔记·学习·aws
freexyn6 小时前
Matlab自学笔记六十一:快速上手解方程
数据结构·笔记·matlab
很小心的小新7 小时前
12、jvm运行期优化
java·开发语言·jvm·笔记
寻丶幽风9 小时前
论文阅读笔记——NoPoSplat
论文阅读·笔记·三维重建·3dgs·相机位姿·dustr
西岭千秋雪_11 小时前
Redis缓存架构实战
java·redis·笔记·学习·缓存·架构
XvnNing11 小时前
【Verilog硬件语言学习笔记4】FPGA串口通信
笔记·学习·fpga开发
海棠蚀omo11 小时前
C++笔记-位图和布隆过滤器
开发语言·c++·笔记
大胡子大叔11 小时前
webrtc-streamer视频流播放(rstp协议h264笔记)
笔记·webrtc·rtsp·webrtc-streamer
山野万里__13 小时前
C++与Java内存共享技术:跨平台与跨语言实现指南
android·java·c++·笔记