增加跳转 样式 后面样式没有删除

src/pages/home.vue

@@ -1,29 +1,45 @@
 <template>
 	<view>
-		<uni-list>
-			<uni-list>
-				<!--				:to="`/pages/work/projectImage/projectImage?projectId=${item.projectId}&projectName=${encodeURIComponent(item.projectName)}`"-->
-				<!--				:style="index % 2 === 0 ? 'background-color: #f8fff8' : 'background-color: #f0fff0'"-->
-				<uni-list-item
-						v-for="(item, index)  in projectList"
-						:key="item.projectId"
-						:class="['list-item', index % 2 === 0 ? 'even' : 'odd']"
-						:note="'完成时间: ' + formatDate(item.finishTime)"
-						:title="item.projectName"
-						clickable
-						@click="handleClick(item)"
-				>
-
-					<template #footer>
-						<view class="item-footer">
-							<uni-icons color="#999" size="18" type="right"></uni-icons>
-						</view>
-					</template>
-
-				</uni-list-item>
-
-			</uni-list>
-		</uni-list>
+		<!--		<uni-list>-->
+		<!--			<uni-list>-->
+		<!--				&lt;!&ndash;				:to="`/pages/work/projectImage/projectImage?projectId=${item.projectId}&projectName=${encodeURIComponent(item.projectName)}`"&ndash;&gt;-->
+		<!--				&lt;!&ndash;				:style="index % 2 === 0 ? 'background-color: #f8fff8' : 'background-color: #f0fff0'"&ndash;&gt;-->
+		<!--				<uni-list-item-->
+		<!--						v-for="(item, index)  in projectList"-->
+		<!--						:key="item.projectId"-->
+		<!--						:class="['list-item', index % 2 === 0 ? 'even' : 'odd']"-->
+		<!--						:note="'完成时间: ' + formatDate(item.finishTime)"-->
+		<!--						:title="item.projectName"-->
+		<!--						clickable-->
+		<!--						@click="handleClick(item)"-->
+		<!--				>-->
+
+		<!--					<template #footer>-->
+		<!--						<view class="item-footer">-->
+		<!--							<uni-icons color="#999" size="18" type="right"></uni-icons>-->
+
+		<!--						</view>-->
+		<!--					</template>-->
+
+		<!--				</uni-list-item>-->
+
+		<!--			</uni-list>-->
+		<!--		</uni-list>-->
+		<uni-card v-for="item in projectList" :key="item.projectId" :extra="'完成时间: ' + formatDate(item.finishTime)"
+			:title="item.projectName" @click="handleClick(item)">
+			<view style=" width: 100%; display: flex; justify-content: flex-end;">
+				<button size="mini" style="margin-right: 0px" type="primary" @click.stop="uploadImage(item)">
+					上传项目图片
+				</button>
+
+			</view>
+
+			<!--			<view>-->
+			<!--				<button class="button-right" size="mini" type="primary" @click="uploadImage(item)">-->
+			<!--					上传项目图片-->
+			<!--				</button>-->
+			<!--			</view>-->
+		</uni-card>
 
 	</view>
 </template>
@@ -74,40 +90,116 @@ function handleClick(item) {
 		url: `/pages/work/projectImage/projectImage?${queryString}`
 	})
 }
-</script>
 
-<style scoped>
+function uploadImage(item) {
+	// 上传图片逻辑
+	// 手动构建查询字符串
+	const queryString = `projectId=${item.projectId}`
 
+	uni.navigateTo({
+		url: `/pages/work/uploadProjectImage?${queryString}`
+	})
+}
+</script>
 
-/* 需要添加穿透 */
+<style scoped>
+/*
+!* 需要添加穿透 *!
 :deep(.list-item.even) .uni-list-item__container {
 	background-color: #f8fff8 !important;
 }
 
 :deep(.list-item.odd) .uni-list-item__container {
-	background-color: #f0fff0 !important;
+	background-color: #E1E7E1FF !important;
 }
 
-/* 通用样式 */
+!*
+通用样式
+*!
 .list-item {
 	transition: all 0.3s;
 }
 
-/* 偶数行样式 */
+!* 偶数行样式 *!
 .list-item.even {
-	background-color: #f8f8f8; /* 浅灰色背景 */
+	background-color: #f8f8f8; !* 浅灰色背景 *!
 }
 
-/* 奇数行样式 */
+!* 奇数行样式 *!
 .list-item.odd {
-	background-color: #ffffff; /* 白色背景 */
+	background-color: #ffffff; !* 白色背景 *!
 }
 
-/* 右侧箭头样式 */
+!* 右侧箭头样式 *!
 .item-footer {
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
 	padding-right: 10rpx;
+}*/
+
+/* 基础列表样式 */
+:deep(.uni-list-item__container) {
+	padding: 16px 20px;
+	border-radius: 8px;
+	margin: 6px 0;
+	transition: all 0.3s ease;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+/* 偶数行样式 */
+:deep(.list-item.even) .uni-list-item__container {
+	background-color: #f8fafc !important;
+	border-left: 4px solid #d7d7e0;
+}
+
+/* 奇数行样式 */
+:deep(.list-item.odd) .uni-list-item__container {
+	background-color: #ffffff !important;
+	border-left: 4px solid #848a88;
+}
+
+/* 标题样式 */
+:deep(.uni-list-item__title) {
+	font-size: 16px;
+	font-weight: 600;
+	color: #1e293b;
+	font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+}
+
+/* 备注样式 */
+:deep(.uni-list-item__note) {
+	font-size: 13px;
+	color: #64748b;
+	margin-top: 4px;
+	font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+}
+
+/* 悬停效果 */
+:deep(.uni-list-item__container:hover) {
+	transform: translateY(-2px);
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	background-color: #f1f5f9 !important;
+	z-index: 1;
+	/* 确保浮动元素在上层 */
+}
+
+/* 点击效果 */
+:deep(.uni-list-item__container:active) {
+	transform: translateY(0);
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.right-btn {
+	display: flex;
+	justify-content: flex-end;
+	margin-top: 2px;
+	width: 100%;
+}
+
+.button-right {
+
+	margin-right: 0 !important;
+
 }
 </style>