JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_开发任务新样式一半

src/pages/index/components/todo.vue

@@ -6,7 +6,7 @@
 		<view class="text font_pf">待办事项</view>
 	</view>
 	<view class="cont-box">
-		<calendarCom @change="changeDate"/>
+		<calendarCom />
 		{{activeDate}}
 	</view>
 </template>

src/pages/learningTasks/components/details-item.vue

@@ -1,8 +1,159 @@
 <template>
+	<view class="item-div" :class="direction">
+		<view class="idea-div">
+			<image class="img" src="@/static/images/learningTasks/idea-1.png" mode="aspectFit"></image>
+		</view>
+		<view class="mid-div">
+			<view class="title-div">
+				柜面业务操作业务操作规范及流程
+			</view>
+			<view class="button-div">
+				<view class="button button-status-1">
+					<view class="button-icon">
+						<image class="img" src="@/static/images/learningTasks/button-1.png" mode="aspectFit"></image>
+					</view>
+					<view class="button-text">完成学习</view>
+				</view>
+				<view class="button button-status-2">
+					<view class="button-icon">
+						<image class="img" src="@/static/images/learningTasks/button-2.png" mode="aspectFit"></image>
+					</view>
+					<view class="button-text">完成学习</view>
+				</view>
+			</view>
+		</view>
+		<view class="tip-div">
+			<image class="img" src="@/static/images/learningTasks/tip-1.png" mode="aspectFit"></image>
+		</view>
+	</view>
 </template>
 
-<script>
+<script setup>
+	import { ref } from 'vue';
+	// 方向
+	const a = ['left', 'right'];
+	const direction = ref(a[0]);
 </script>
 
-<style>
+<style scoped lang="scss">
-</style>
+	.title-div {
+		width: 100%;
+		font-weight: 500;
+		font-size: 32rpx;
+		color: #333333;
+		max-height: 100rpx;
+		line-height: 50rpx;
+		padding: 0 20rpx;
+		text-align: left;
+		font-style: normal;
+		background-color: #fedb32;
+		clip-path: polygon(
+			12rpx 0%,
+			calc(100% - 18rpx) 0%,
+			100% 30rpx,
+			calc(100% - 18rpx) 100%,
+			12rpx 100%,
+			0% calc(100% - 22rpx)
+		);
+		overflow: hidden;
+		/* 多行省略核心配置（适配2行） */
+		display: -webkit-box; /* 转为WebKit弹性盒模型 */
+		-webkit-box-orient: vertical; /* 文本垂直排列 */
+		-webkit-line-clamp: 2; /* 限制最多显示2行（和line-height/max-height匹配） */
+		text-overflow: ellipsis; /* 溢出显示省略号 */
+	}
+	.button-div {
+		display: flex;
+		align-items: center;
+		// background-color: blue;
+		margin-top: 28rpx;
+		.button {
+			width: 178rpx;
+			height: 54rpx;
+			border-radius: 8rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-right: 16rpx;
+			.button-icon {
+				margin-right: 10rpx;
+				.img {
+					width: 26rpx;
+					height: 24rpx;
+				}
+			}
+			.button-text {
+				font-weight: 400;
+				font-size: 26rpx;
+				color: #ffffff;
+				text-align: left;
+			}
+		}
+	}
+	.mid-div {
+		flex: 1;
+	}
+	.idea-div {
+		display: flex;
+		align-items: center;
+
+		.img {
+			width: 108rpx;
+			height: 108rpx;
+		}
+		background-color: yellow;
+	}
+	.tip-div {
+		display: flex;
+		align-items: center;
+		.img {
+			width: 108rpx;
+			height: 108rpx;
+		}
+		background-color: green;
+	}
+	.mid {
+		.title-div {
+		}
+		.button-div {
+		}
+	}
+	.item-div {
+		display: flex;
+		justify-content: space-between;
+		width: calc(100% - 60rpx);
+
+		margin: 0 auto;
+	}
+	// 状态样式
+	.left {
+		&.item-div {
+			flex-direction: row;
+		}
+		.mid-div {
+			margin-left: 20rpx;
+			margin-right: 40rpx;
+		}
+	}
+	.right {
+		&.item-div {
+			flex-direction: row-reverse;
+		}
+		.tip-div .img {
+			transform: scaleX(-1);
+		}
+		.button-div {
+			justify-content: flex-end;
+		}
+		.mid-div {
+			margin-left: 40rpx;
+			margin-right: 20rpx;
+		}
+	}
+	.button-status-1 {
+		background-color: #63a1ff;
+	}
+	.button-status-2 {
+		background-color: #6baa1b;
+	}
+</style>

src/pages/learningTasks/details.vue

@@ -1,30 +1,66 @@
 <template>
-	<view class="div-max">
+	<view class="noise-bg">
-		<z-paging
+		<view class="div-max">
-			ref="pagingRef"
+			<z-paging
-			@query="queryList"
+				ref="pagingRef"
-			v-model="data_list"
+				@query="queryList"
-			:loading-more-enabled="false"
+				v-model="data_list"
-			:refresher-only="true"
+				:loading-more-enabled="false"
-			:aoto="false"
+				:refresher-only="true"
-		>
+				:aoto="false"
-			<template #refresher>
+			>
-				<view class="" style="background-color: red;width: 100%;height: 800rpx;">
+				<template #top>
-					
+					<view class="body-title">
-				</view>
+						<view class="back_div" @click="common.navigateBack()">
-			</template>
+							<view class="back-icon"></view>
-			<template #top>
+						</view>
-				<view class="body-title">
+						<view>任务详情</view>
-					<view class="back_div" @click="common.navigateBack()">
+					</view>
-						<view class="back-icon"></view>
+				</template>
+				<view class="interior">
+					<!-- 详情盒子 -->
+					<view class="details-div">
+						<view class="img-div">
+							<image-preview class="img_100" :src="detailData.ossAddr"></image-preview>
+						</view>
+						<view class="right-div">
+							<view class="title-div">{{ detailData.taskName }}</view>
+							<view class="other-div-1">
+								<!-- 时间盒子 -->
+								<view class="time-div">
+									起止时间：{{ detailData.startTm?.substr(0, 10) }}至{{ detailData.endTm?.substr(0, 10) }}
+								</view>
+								<!-- 收藏盒子 -->
+								<view class="collection-div"></view>
+							</view>
+							<view class="other-div-2">
+								<!-- 完成人数盒子 -->
+								<view class="progress-text-div">
+									<text class="color_3">
+										完成人数
+										<text class="maoh">:</text>
+									</text>
+									<text class="color_2">
+										{{ detailData.taskFinishSums ?? 0 }}/{{ detailData.taskSums ?? 0 }}
+									</text>
+								</view>
+								<!-- 进度条 -->
+								<view class="line-progress-div">
+									<view class="progress-div">
+										<view class="progress-line"></view>
+									</view>
+									<view class="progress-text">32%</view>
+								</view>
+							</view>
+						</view>
 					</view>
-					<view>任务详情</view>
 				</view>
-			</template>
+				<!-- 步骤 -->
-			<view class="interior">
+				<view class="step-list-div">
-				
+					<detailsItem></detailsItem>
-			</view>
+				</view>
-		</z-paging>
+			</z-paging>
+		</view>
 	</view>
 </template>
 
@@ -34,6 +70,7 @@
 	import { queryAllTraTaskCrsInfo, queryTraTaskInfoByTaskId } from '@/api/learningTasks.js';
 	import { passTheExamIcon, completeTheExercisesIcon, lockIcon } from '@/common/imgSvg';
 	import { insertTraPersonalCollectionTask, deleteTraPersonalCollectionById } from '@/api/favorites.js';
+	import detailsItem from './components/details-item';
 	import common from '@/common/common';
 	import { getPageCache } from '@/common/common';
 
@@ -42,7 +79,7 @@
 	const data_list = ref([]);
 	const total = ref(-1);
 	const taskId = ref('');
-
+	const progress = computed(() => '30%');
 	const queryList = async (pageNo, pageSize, from) => {
 		const requests = [queryAllTraTaskCrsInfo({ taskId: taskId.value })];
 		// 如果不是第一次请求，才添加第二个请求
@@ -202,19 +239,134 @@
 </script>
 
 <style scoped lang="scss">
+	// 步骤
+	.step-list-div {
+	}
+	// 详情
+	.details-div {
+		display: flex;
+		margin: 50rpx auto 30rpx auto;
+		width: calc(100% - 60rpx);
+		.img-div {
+			width: 224rpx;
+			height: 126rpx;
+			border-radius: 18rpx;
+			overflow: hidden;
+		}
+		.right-div {
+			flex: 1;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			margin-left: 24rpx;
+
+			.title-div {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 500;
+				font-size: 30rpx;
+				color: #ffffff;
+				line-height: 43rpx;
+				text-align: left;
+				font-style: normal;
+				max-height: 86rpx;
+			}
+			.other-div-1 {
+				margin-top: 6rpx;
+				.time-div {
+					font-weight: 400;
+					font-size: 22rpx;
+					color: #f2f5fa;
+					line-height: 33rpx;
+					font-family: Arial, Helvetica, sans-serif;
+				}
+			}
+			.other-div-2 {
+				width: 100%;
+				margin-top: 6rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				.progress-text-div {
+					font-weight: 400;
+					font-size: 22rpx;
+					color: #f2f5fa;
+					line-height: 33rpx;
+					text-align: left;
+					font-style: normal;
+				}
+
+				.line-progress-div {
+					margin-left: 20rpx;
+					flex: 1;
+					display: flex;
+					align-items: center;
+					.progress-div {
+						position: relative;
+						background-color: rgba(255, 255, 255, 0.5);
+						width: 100%;
+						height: 16rpx;
+						border-radius: 10rpx;
+						overflow: hidden;
+						.progress-line {
+							position: absolute;
+							top: 0;
+							left: 0;
+							border-radius: 10rpx;
+							background-color: #ffffff;
+							width: v-bind(progress);
+							height: 100%;
+						}
+					}
+					.progress-text {
+						color: #ffffff;
+						font-size: 22rpx;
+						margin-left: 10rpx;
+					}
+				}
+			}
+		}
+	}
 	.div-max {
 		width: 100vw;
 		height: 100vh;
-		background-image: url('@/static/images/learningTasks/bg.png');
+		// background: linear-gradient(358deg, #184891 0%, #3772c1 100%);
-		background-size: 100%;
+		opacity: 1;
 	}
-	.interior{
+	.interior {
 		z-index: 1;
+	}
+	
+	.noise-bg {
 		width: 100vw;
 		height: 100vh;
-		opacity: .9;
+		position: relative;
-		background: linear-gradient( 358deg, #184891 0%, #3772C1 100%);
+		overflow: hidden;
-		
+		background: linear-gradient(358deg, #184891 0%, #3772c1 100%);
+		opacity: 1;
+	}
+
+	/* 伪元素：只负责噪点，单独模糊+调透明度 */
+	.noise-bg::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		/* 噪点图配置 */
+		background-image: url('@/static/images/learningTasks/bg.png');
+		background-repeat: repeat;
+		background-size: 300px; /* 控制噪点大小，可按需改 */
+		/* 核心：模糊噪点（1px=轻微，2px=中度，3px=更糊） */
+		// filter: blur(1px);
+		opacity: 0.8;
+		/* 混合模式：让噪点和渐变自然融合（multiply/overlay二选一） */
+		background-blend-mode: multiply;
+		/* 不影响容器内元素点击 */
+		pointer-events: none;
+		/* 确保噪点在内容之下，渐变之上 */
+		z-index: 1;
 	}
 	.body-title {
 		width: 100%;