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><text>展开</text></view>
			</view>
		</view>
		<view class="row_gap"></view>
		<view class="page_content">
			sss
		</view>
	</view>
</template>

<script setup>
	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.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
	});
	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;
			}
		}
	}
	.row_gap{
		background-color: #F8F9FD;
		width: 100%;
		height: 24rpx;
	}
</style>