工作笔记【四】

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

代码:

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

看得懂,会写了,下班!

相关推荐
fanged5 分钟前
HarvardX TinyML小笔记3(番外6:视觉探测)(TODO)
笔记
摇滚侠7 分钟前
Spring Boot 3零基础教程,Spring Boot 特性介绍,笔记02
java·spring boot·笔记
武清伯MVP7 分钟前
阮一峰《TypeScript 教程》学习笔记——基本用法
笔记·学习·typescript
要做朋鱼燕16 分钟前
STM32与W25Q64 SPI通信全解析
笔记·嵌入式·hal·spi
轻赚时代27 分钟前
新手做国风视频难?AI + 敦煌美学高效出片教程
人工智能·经验分享·笔记·创业创新·课程设计·学习方法
霖0038 分钟前
ZYNQ裸机开发指南笔记
人工智能·经验分享·笔记·matlab·fpga开发·信号处理
Dream Algorithm44 分钟前
物联网卡的TAC
笔记
Suckerbin1 小时前
Monitoring: 1靶场渗透
笔记·安全·web安全·网络安全
Wu_hello_mi1 小时前
Excel使用教程笔记
笔记·excel
im_AMBER3 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习