工作笔记【四】

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

代码:

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

看得懂,会写了,下班!

相关推荐
Andy杨2 小时前
20250712-1-Kubernetes 监控与日志管理-K8s日志管理与维护_笔记
笔记·容器·kubernetes
撰卢2 小时前
【个人笔记】负载均衡
运维·笔记·负载均衡
栈溢出了3 小时前
MyBatis实现分页查询-苍穹外卖笔记
java·笔记·mybatis
彤银浦3 小时前
Web学习笔记3
前端·笔记·学习·html5
之歆3 小时前
Python-魔术方法-创建、初始化与销毁-hash-bool-可视化-运算符重载-容器和大小-可调用对象-上下文管理-反射-描述器-二分-学习笔记
笔记·python·学习
morningcat20183 小时前
java17 gc笔记
java·jvm·笔记
优乐美香芋味好喝3 小时前
2025年7月11日学习笔记&一周归纳——模式识别与机器学习
笔记·学习·机器学习
声网5 小时前
对话 AI 陪伴新宠 Tolan 创始人:拒绝「恋爱脑」,「非人」陪伴更受欢迎?丨 Voice Agent 学习笔记
人工智能·笔记·学习
丁满与彭彭5 小时前
嵌入式学习笔记--MCU阶段--day03中断
笔记·单片机·学习
HuashuiMu花水木6 小时前
PyTorch笔记5----------Autograd、nn库
人工智能·pytorch·笔记