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

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

@@ -1,12 +1,19 @@
 <template>
 	<view class="item-div" :class="direction">
+		<!-- 箭头指示 -->
+		<view class="arrow-div">
+			<view class="big-arrow">
+				<image class="img" :src="statusOpen?bigArrow2:bigArrow1" mode=""></image>
+			</view>
+			<view class="small-arrow">
+				<image class="img" src="@/static/images/learningTasks/small-arrow.png" mode=""></image>
+			</view>
+		</view>
 		<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="title-div">{{ props.item.crsName }}xx{{props.item.status}}</view>
 			<view class="button-div">
 				<view class="button button-status-1">
 					<view class="button-icon">
@@ -23,19 +30,83 @@
 			</view>
 		</view>
 		<view class="tip-div">
-			<image class="img" src="@/static/images/learningTasks/tip-1.png" mode="aspectFit"></image>
+			<view class="tip-self">
+				<view class="tip-text"></view>
+			</view>
 		</view>
 	</view>
 </template>
 
 <script setup>
-	import { ref } from 'vue';
-	// 方向
-	const a = ['left', 'right'];
-	const direction = ref(a[0]);
+	import bigArrow1 from '@/static/images/learningTasks/big-arrow-1.png'
+	import bigArrow2 from '@/static/images/learningTasks/big-arrow-2.png'
+	import { ref, computed } from 'vue';
+	const props = defineProps({
+		item: {
+			type: Object,
+			requset: true
+		},
+		index: {
+			type: Number,
+			requset: true
+		}
+	});
+	const statusOpen = computed(() => ['01', '02'].includes(props.item.status));
+	const direction = computed(() => {
+		const styleArray = [];
+		if (props.index !== 0) {
+			styleArray.push('come_line');
+		}
+		if (props.index % 2 == 0) {
+			styleArray.push('left');
+		} else {
+			styleArray.push('right');
+		}
+		// 00进行中、01已完成、02已超时
+		const isFinish = props.item.isFinish;
+		if (isFinish === '01') {
+			styleArray.push('unfinished');
+		} else if (isFinish === '02') {
+			styleArray.push('completed');
+		} else {
+			styleArray.push('not_unlocked');
+		}
+		return styleArray;
+	});
+
+	const getStatusClass = () => {
+		const isFinish = props.item.isFinish;
+		// 00进行中、01已完成、02已超时
+		if (isFinish === '01') return 'unfinished';
+		if (isFinish === '02') return 'completed';
+		return 'not_unlocked';
+	};
 </script>
 
 <style scoped lang="scss">
+	.arrow-div {
+		display: none;
+		position: absolute;
+		left: 46rpx;
+		top: 0;
+		// background-color: red;
+		.big-arrow {
+			.img {
+				width: 584rpx;
+				height: 120rpx;
+			}
+		}
+		.small-arrow {
+			position: absolute;
+			left: 20rpx;
+			top: 80rpx;
+			transform: scaleX(-1);
+			.img {
+				width: 62rpx;
+				height: 78rpx;
+			}
+		}
+	}
 	.title-div {
 		width: 100%;
 		font-weight: 500;
@@ -96,21 +167,28 @@
 	.idea-div {
 		display: flex;
 		align-items: center;
-
 		.img {
 			width: 108rpx;
 			height: 108rpx;
 		}
-		background-color: yellow;
 	}
 	.tip-div {
-		display: flex;
-		align-items: center;
-		.img {
+		.tip-self {
+			position: relative;
+			margin-top: 30rpx;
 			width: 108rpx;
 			height: 108rpx;
+			background-size: 100%;
+			background-repeat: no-repeat;
+			.tip-text {
+				position: absolute;
+				top: 10rpx;
+				left: 14rpx;
+				font-weight: 500;
+				font-size: 24rpx;
+				color: #ffffff;
+			}
 		}
-		background-color: green;
 	}
 	.mid {
 		.title-div {
@@ -122,8 +200,43 @@
 		display: flex;
 		justify-content: space-between;
 		width: calc(100% - 60rpx);
+		margin: 30rpx auto;
+		position: relative;
+		// 控制是否展示轨迹线
+		&.come_line {
+			padding-top: 130rpx;
+			.arrow-div {
+				display: block;
+			}
+		}
 
-		margin: 0 auto;
+		&.completed {
+			.tip-self {
+				background-image: url('@/static/images/learningTasks/tip-3.png');
+				.tip-text::before {
+					content: '已完成';
+				}
+			}
+		}
+		//未完成
+		&.unfinished {
+			.tip-self {
+				background-image: url('@/static/images/learningTasks/tip-2.png');
+				.tip-text::before {
+					content: '进行中';
+				}
+			}
+		}
+
+		// 未解锁
+		&.not_unlocked {
+			.tip-self {
+				background-image: url('@/static/images/learningTasks/tip-1.png');
+				.tip-text::before {
+					content: '未解锁';
+				}
+			}
+		}
 	}
 	// 状态样式
 	.left {
@@ -134,12 +247,16 @@
 			margin-left: 20rpx;
 			margin-right: 40rpx;
 		}
+		.arrow-div {
+			transform: scaleX(-1);
+		}
 	}
 	.right {
 		&.item-div {
 			flex-direction: row-reverse;
 		}
-		.tip-div .img {
+		.tip-div .tip-self,
+		.tip-div .tip-text {
 			transform: scaleX(-1);
 		}
 		.button-div {

src/pages/learningTasks/details.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="noise-bg">
+		<view class="is-bg"></view>
 		<view class="div-max">
 			<z-paging
 				ref="pagingRef"
@@ -57,7 +58,7 @@
 				</view>
 				<!-- 步骤 -->
 				<view class="step-list-div">
-					<detailsItem></detailsItem>
+					<detailsItem v-for="(item, index) in data_list" :item="item" :index="index"></detailsItem>
 				</view>
 			</z-paging>
 		</view>
@@ -241,6 +242,7 @@
 <style scoped lang="scss">
 	// 步骤
 	.step-list-div {
+		margin: 50rpx 0;
 	}
 	// 详情
 	.details-div {
@@ -330,25 +332,24 @@
 	.div-max {
 		width: 100vw;
 		height: 100vh;
-		// background: linear-gradient(358deg, #184891 0%, #3772c1 100%);
+		z-index: 10;
 		opacity: 1;
+		// background-color: red;
 	}
 	.interior {
 		z-index: 1;
 	}
-	
+
 	.noise-bg {
 		width: 100vw;
 		height: 100vh;
 		position: relative;
 		overflow: hidden;
-		background: linear-gradient(358deg, #184891 0%, #3772c1 100%);
-		opacity: 1;
+		background: linear-gradient(358deg, #1848a1 0%, #3772e1 100%);
+		// opacity: .4;
 	}
 
-	/* 伪元素：只负责噪点，单独模糊+调透明度 */
-	.noise-bg::before {
-		content: '';
+	.is-bg {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -357,16 +358,16 @@
 		/* 噪点图配置 */
 		background-image: url('@/static/images/learningTasks/bg.png');
 		background-repeat: repeat;
-		background-size: 300px; /* 控制噪点大小，可按需改 */
+		background-size: 200px; /* 控制噪点大小，可按需改 */
 		/* 核心：模糊噪点（1px=轻微，2px=中度，3px=更糊） */
 		// filter: blur(1px);
-		opacity: 0.8;
+		opacity: 0.3;
 		/* 混合模式：让噪点和渐变自然融合（multiply/overlay二选一） */
 		background-blend-mode: multiply;
 		/* 不影响容器内元素点击 */
 		pointer-events: none;
 		/* 确保噪点在内容之下，渐变之上 */
-		z-index: 1;
+		z-index: 0;
 	}
 	.body-title {
 		width: 100%;