workApp/pages/teacherStudy/learningMonitor/taskDetails.vue

<template>
	<view class="page_body">
		<!-- 头部 -->
		<nav-bar height="96" title="任务详情" :onlyTitle="true" :showHeaderborder="true" @GoBack="GoBack"></nav-bar>
		<view class="page_content padding_btm">
			<view class="task_title">期中考试集体研讨会的通知期中考试集体研讨会的通知</view>
			<view class="task_class_collect">
				<view class="task_class_name">
					<text class="class_item">必修任务</text>
					<text class="class_item">课堂观摩</text>
					<text class="class_item">教务处</text>
				</view>
				<view class="task_collect">
					<view class="preview">
						<image class="img" src="@/static/image/icon/preview.png"></image>
						<text class="text">2761</text>
					</view>
					<view class="collect">
						<image class="img" src="@/static/image/icon/collect.png"></image>
						<text class="text">2761</text>
					</view>
				</view>
			</view>
			<view class="task_time">
				<view class="time_day">
					<text class="time_item">2025-02-02</text>
					<text class="time_item">至</text>
					<text class="time_item">2025-02-02</text>
					<text class="time_item">剩余3天</text>
				</view>
				<view class="task_status finished">进行中</view>
			</view>
			<view class="task_desc">
				课程简介：文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案
			</view>
			<view class="expand_btn"><text class="expand_text">展开</text><uni-icons class="expand_icon" type="down"></uni-icons></view>
		</view>
		<view class="row_gap"></view>
		<!-- 吸顶 -->
		<uv-sticky style="top:98rpx">
			<!-- 搜索框 -->
			<uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
				:placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
				<template #left>
					<image src="/static/image/overview/search.png" class="search_icon"></image>
				</template>
			</uni-easyinput>
			<scroll-view class="scroll_tabs" scroll-x="true" scroll-left="0" :show-scrollbar="false">
				<view :class="['tab_item',{'selected':item.value==state.tabsSelected}]" v-for="item in state.tabList" :key="item.value" @click="SelectTabsValue(item.value)">
					{{item.label}}
				</view>
			</scroll-view>
		</uv-sticky>
		<view class="page_content">
			<view class="total">共 230 人</view>
			<view class="list_item">
				<view class="created_progress_status">
					<text class="created_by">刘惟安</text>
					<view class="item_progress">
						<view class="progress_bar">
							<view class="bar_width" style="width: 49%;"></view>
						</view>
						<view class="progress_label">80%</view>
					</view>
					<view class="item_status await">待完成</view>
				</view>
				<view class="item_time">
					<text class="time">开始时间：2025-11-01</text>
					<text class="time">结束时间：2025-11-04</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import uvSticky from '@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue';//吸顶
	import navBar from '@/components/nav-bar.vue';
	import { selectCourseDetail,addQuestionAnswerData } from '@/reqApi/teacherStudy.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';
	const state = reactive({
		id: '', //任务id
		searchInputStyles: { //搜素框样式
			borderColor: '#DCDFE6',
			color: '#333333'
		},
		searchInputPlaceholderStyle: 'color: #C0C4CC;fontSize: 28rpx' ,//搜素框样式
		tabsSelected:'0',
		tabList:[{
			label:'全部',
			value:'0'
		},{
			label:'待完成',
			value:'1'
		},{
			label:'已完成',
			value:'2'
		}]
	});
	onLoad((option) => {
		state.id = option.id;
	})
	//返回
	const GoBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style scoped lang="scss">
	.page_content {
		&.padding_btm{
			padding-bottom: 24rpx;
			.task_title{
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-top: 24rpx;
			}
			.task_class_collect{
				display: flex;
				align-items: flex-start;
				width: 100%;
				margin-top: 16rpx;
				.task_class_name{
					display: inline-flex;
					align-items: center;
					flex-wrap: wrap;
					flex: 1;
					gap: 16rpx;
					.class_item{
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}
				.task_collect{
					display: inline-flex;
					gap: 40rpx;
					.preview,.collect{
						display: inline-flex;
						align-items: center;
					}
					.img{
						width: 24rpx;
						height: 24rpx;
						margin-right: 12rpx;
					}
					.text{
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
			.task_time{
				display: flex;
				align-items: flex-start;
				width: 100%;
				margin-top: 16rpx;
				.time_day{
					display: inline-flex;
					align-items: center;
					flex-wrap: wrap;
					flex: 1;
					.time_item{
						font-weight: 400;
						font-size: 24rpx;
						line-height: 48rpx;
						color: #999999;
						&:nth-child(2){
							margin: 0 8rpx;
						}
						&:nth-child(4){
							color: #2E64FA;
							margin-left: 16rpx;
						}
					}
				}
				.task_status{
					display: inline-flex;
					align-items: center;
					height: 48rpx;
					padding: 0 12rpx;
					border-radius: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					&.going{
						background: rgba(43,198,68,0.1);
						color: #2BC644;
					}
					&.finished{
						background: rgba(245,108,108,0.1);
						color: #F56C6C;
					}
				}
			}
			.task_desc{
				margin-top: 24rpx;
				display: flex;
				width: 100%;
				padding-top: 24rpx;
				border-top: 2rpx solid #F3F3F3;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 44rpx;
				max-height: 168rpx;
				box-sizing: border-box;
				overflow: hidden;
				transition: all 0.25s;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				position: relative;
			}
			.expand_btn{
				width: 100%;
				height: 40rpx;
				background-color: #FFFFFF;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.expand_text{
					font-weight: 400;
					font-size: 28rpx;
					color: #2E64FA;
					margin-right: 8rpx;
				}
				.expand_icon{
					font-size: 32rpx !important;
					color: #2E64FA !important;
				}
			}
		}
	}
	.row_gap{
		background-color: #F8F9FD;
		width: 100%;
		height: 24rpx;
	}
	:deep(.search_box) {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		.is-input-border{
			border-radius: 8rpx;
			border: 2rpx solid #DCDFE6;
			border-color: #DCDFE6 !important;
		}
		.search_icon {
			width: 32rpx;
			height: 32rpx;
			margin-left:24rpx;
		}
		.uni-easyinput__content-input {
			padding-left: 8rpx !important;
			font-size: 28rpx;
			color: #333333;
			height: 72rpx;
		}
	}
	.scroll_tabs{
		padding-bottom: 24rpx;
		background-color: #FFFFFF;
	}
	.total{
		width: 100%;
		display: flex;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #F3F3F3;
	}
	.list_item{
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #F3F3F3;
		.created_progress_status{
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			.created_by{
				flex:1;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
			.item_progress{
				display: inline-flex;
				align-items: center;
				width: 308rpx;
				.progress_bar{
					width: 200rpx;
					height: 12rpx;
					background-color: #E2E6F0;
					border-radius: 14rpx;
					position: relative;
					.bar_width{
						position: absolute;
						left:0;
						top:0;
						height: 12rpx;
						background-color: #2E64FA;
						border-radius: 14rpx;
					}
				}
				.progress_label{
					flex: 1;
					margin-left: 24rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #666666;
				}
			}
			.item_status{
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 96rpx;
				height: 48rpx;
				border-radius: 8rpx;
				font-weight: 400;
				font-size: 24rpx;
				margin-left: 68rpx;
				&.await{
					background-color: rgba(46,100,250,0.1);
					color: #2E64FA;
				}
				&.finish{
					background-color: rgba(43,198,68,0.1);
					color: #2BC644;
				}
			}
		}
		.item_time{
			display: flex;
			width: 100%;
			align-items: center;
			flex-wrap: wrap;
			gap:16rpx;
			margin-top: 18rpx;
			.time{
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>