diff --git a/src/pages/dataAnalyze/Curve.vue b/src/pages/dataAnalyze/Curve.vue
index 7569e32..812b324 100644
--- a/src/pages/dataAnalyze/Curve.vue
+++ b/src/pages/dataAnalyze/Curve.vue
@@ -46,22 +46,6 @@
 			</view>
 		</view>
 
-		<!-- ==================== 空状态提示 ==================== -->
-		<!-- 未选择项目时的提示 -->
-		<view class="hint-state" v-if="!selectedProjectId">
-			<view class="hint-icon">
-				<u-icon name="list" size="80" color="#52c41a"></u-icon>
-			</view>
-			<text class="hint-text">请先选择项目</text>
-		</view>
-
-		<!-- 无学生时的提示 -->
-		<view class="hint-state" v-else-if="projectStudents.length === 0">
-			<view class="hint-icon">
-				<u-icon name="account" size="80" color="#52c41a"></u-icon>
-			</view>
-			<text class="hint-text">该项目暂无学员数据</text>
-		</view>
 
 		<!-- ==================== 图表展示区域 ==================== -->
 		<!-- 仅在选择了至少一名学生后显示 -->
@@ -573,23 +557,7 @@
 		}
 	}
 
-	.hint-state {
-		margin: 0 20rpx;
-		background-color: #fff;
-		border-radius: 16rpx;
-		padding: 80rpx 40rpx;
-		text-align: center;
-		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
-
-		.hint-icon {
-			margin-bottom: 24rpx;
-		}
-
-		.hint-text {
-			font-size: 28rpx;
-			color: #999;
-		}
-	}
+	
 
 	.chart-section {
 		margin: 0 20rpx;
diff --git a/src/pages/dataAnalyze/baoganAnalyze.vue b/src/pages/dataAnalyze/baoganAnalyze.vue
index 2cba9ff..527aa20 100644
--- a/src/pages/dataAnalyze/baoganAnalyze.vue
+++ b/src/pages/dataAnalyze/baoganAnalyze.vue
@@ -8,6 +8,42 @@
 			</view>
 		</view>
 
+		<!-- 选择器区域 -->
+		<view class="selector-section">
+			<view class="selector-item" @click="showProjectPicker = true">
+				<text class="selector-label">项目名称</text>
+				<view class="selector-value">
+					<text class="value-text">{{ selectedProject }}</text>
+					<u-icon name="arrow-down" size="24" color="#999"></u-icon>
+				</view>
+			</view>
+			<view class="selector-item" @click="showStudentPicker = true">
+				<text class="selector-label">选择学生</text>
+				<view class="selector-value">
+					<text class="value-text">{{ selectedStudent }}</text>
+					<u-icon name="arrow-down" size="24" color="#999"></u-icon>
+				</view>
+			</view>
+		</view>
+
+		<!-- 项目选择器 -->
+		<u-picker
+			:show="showProjectPicker"
+			:columns="[projectList]"
+			@confirm="handleProjectConfirm"
+			@cancel="showProjectPicker = false"
+			keyName="label"></u-picker>
+
+		<!-- 学生选择器 -->
+		<u-picker
+			:show="showStudentPicker"
+			:columns="[studentList]"
+			@confirm="handleStudentConfirm"
+			@cancel="showStudentPicker = false"
+			keyName="label"
+			multiple
+			:defaultIndex="defaultStudentIndex"></u-picker>
+
 		<!-- 日历组件 -->
 		<view class="calendar-wrapper">
 			<uni-calendar
@@ -55,13 +91,7 @@
 			</sl-table>
 		</view>
 
-		<!-- 未选择日期提示 -->
-		<view class="hint-state" v-if="!selectedDate">
-			<view class="hint-icon">
-				<u-icon name="calendar" size="80" color="#faad14"></u-icon>
-			</view>
-			<text class="hint-text">请选择日期查看数据</text>
-		</view>
+		
 	</view>
 </template>
 
@@ -115,18 +145,46 @@
 		detail: string
 	}
 
-	const tableData = ref<TableDataItem[]>([{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
-			{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
-			{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 100, detail: '1500/1500' }])
+	const tableData = ref<TableDataItem[]>([])
+
+	// 项目列表
+	const projectList = ref([
+		{ label: '全部项目', value: 'all' },
+		{ label: '100米自由泳', value: '100m-free' },
+		{ label: '200米自由泳', value: '200m-free' },
+		{ label: '400米自由泳', value: '400m-free' },
+		{ label: '100米蛙泳', value: '100m-breast' }
+	])
+
+	// 学生列表
+	const studentList = ref([
+		{ label: '全部学生', value: 'all' },
+		{ label: '张小明', value: 'zhang-xiaoming' },
+		{ label: '李小红', value: 'li-xiaohong' },
+		{ label: '王小明', value: 'wang-xiaoming' },
+		{ label: '赵小芳', value: 'zhao-xiaofang' },
+		{ label: '陈小刚', value: 'chen-xiaogang' }
+	])
+
+	// 选中的项目和学生
+	const selectedProject = ref('全部项目')
+	const selectedStudent = ref('全部学生')
+	const selectedProjectValue = ref('all')
+	const selectedStudentValues = ref<string[]>([])
+
+	// 选择器显示状态
+	const showProjectPicker = ref(false)
+	const showStudentPicker = ref(false)
+	const defaultStudentIndex = ref<number[]>([0])
 
 	// 日历打点数据
-	const selectedDates = ref([
-		{ date: '2026-03-15', info: '训练' },
-		{ date: '2026-03-18', info: '训练' },
-		{ date: '2026-03-20', info: '训练' },
-		{ date: '2026-03-22', info: '训练' },
-		{ date: '2026-03-25', info: '训练' }
-	])
+	// const selectedDates = ref([
+	// 	{ date: '2026-03-15', info: '训练' },
+	// 	{ date: '2026-03-18', info: '训练' },
+	// 	{ date: '2026-03-20', info: '训练' },
+	// 	{ date: '2026-03-22', info: '训练' },
+	// 	{ date: '2026-03-25', info: '训练' }
+	// ])
 
 	// 平均完成率
 	const averageCompletion = computed(() => {
@@ -135,37 +193,44 @@
 		return Math.round(total / tableData.value.length)
 	})
 
-	// 模拟数据
+	// 完整模拟数据
 	const mockData: Record<string, TableDataItem[]> = {
-		'2026-03-15': [
+		'2026-03-28': [
 			{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
-			{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
-			{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 100, detail: '1500/1500' }
-		],
-		'2026-03-18': [
-			{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 90, detail: '1800/2000' },
+			{ name: '张小明', projectName: '200米自由泳', plan: '1500米', completion: 88, detail: '1320/1500' },
 			{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 92, detail: '1840/2000' },
-			{ name: '赵小芳', projectName: '100米自由泳', plan: '1800米', completion: 85, detail: '1530/1800' },
-			{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 95, detail: '1425/1500' }
+			{ name: '李小红', projectName: '400米自由泳', plan: '1200米', completion: 85, detail: '1020/1200' },
+			{ name: '王小明', projectName: '100米自由泳', plan: '2000米', completion: 90, detail: '1800/2000' },
+			{ name: '赵小芳', projectName: '100米蛙泳', plan: '1800米', completion: 88, detail: '1584/1800' },
+			{ name: '陈小刚', projectName: '200米自由泳', plan: '1500米', completion: 95, detail: '1425/1500' }
 		],
-		'2026-03-20': [
-			{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 87, detail: '1740/2000' },
-			{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 90, detail: '1800/2000' }
-		],
-		'2026-03-22': [
-			{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 92, detail: '1840/2000' },
-			{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
-			{ name: '赵小芳', projectName: '100米自由泳', plan: '1800米', completion: 90, detail: '1620/1800' },
-			{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 98, detail: '1470/1500' },
-			{ name: '陈小刚', projectName: '100米自由泳', plan: '2000米', completion: 75, detail: '1500/2000' }
-		],
-		'2026-03-25': [
-			{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 85, detail: '1700/2000' },
+		'2026-03-29': [
+			{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 90, detail: '1800/2000' },
+			{ name: '张小明', projectName: '100米蛙泳', plan: '1800米', completion: 85, detail: '1530/1800' },
 			{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
-			{ name: '赵小芳', projectName: '100米自由泳', plan: '1800米', completion: 88, detail: '1584/1800' }
+			{ name: '李小红', projectName: '200米自由泳', plan: '1500米', completion: 92, detail: '1380/1500' },
+			{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 98, detail: '1470/1500' },
+			{ name: '赵小芳', projectName: '100米自由泳', plan: '2000米', completion: 82, detail: '1640/2000' },
+			{ name: '陈小刚', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' }
+		],
+		'2026-03-30': [
+			{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 92, detail: '1840/2000' },
+			{ name: '张小明', projectName: '400米自由泳', plan: '1200米', completion: 90, detail: '1080/1200' },
+			{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
+			{ name: '李小红', projectName: '100米蛙泳', plan: '1800米', completion: 95, detail: '1710/1800' },
+			{ name: '王小明', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
+			{ name: '赵小芳', projectName: '200米自由泳', plan: '1500米', completion: 85, detail: '1275/1500' },
+			{ name: '陈小刚', projectName: '400米自由泳', plan: '1200米', completion: 92, detail: '1104/1200' }
 		]
 	}
 
+	// 日历打点数据
+	const selectedDates = ref([
+		{ date: '2026-03-28', info: '训练' },
+		{ date: '2026-03-29', info: '训练' },
+		{ date: '2026-03-30', info: '训练' }
+	])
+
 	onLoad(() => {
 		loadData()
 	})
@@ -196,16 +261,86 @@
 
 	// 日期选择处理
 	const handleDateChange = (e: any) => {
-		// 点击日期后的处理
 		const date = e.fulldate
 		selectedDate.value = date
+		filterAndLoadData()
+	}
 
-		// 加载该日期的数据
-		if (mockData[date]) {
-			tableData.value = mockData[date]
+	// 项目选择确认
+	const handleProjectConfirm = (e: any) => {
+		const item = e.value[0]
+		selectedProject.value = item.label
+		selectedProjectValue.value = item.value
+		showProjectPicker.value = false
+		filterAndLoadData()
+	}
+
+	// 学生选择确认
+	const handleStudentConfirm = (e: any) => {
+		const items = e.value
+		selectedStudentValues.value = items.map((item: any) => item.value)
+
+		if (selectedStudentValues.value.length === 0) {
+			selectedStudent.value = '未选择'
+		} else if (selectedStudentValues.value.includes('all')) {
+			selectedStudent.value = '全部学生'
 		} else {
-			tableData.value = []
+			const selectedNames = items.map((item: any) => item.label)
+			selectedStudent.value = selectedNames.length > 2
+				? `${selectedNames.slice(0, 2).join(', ')}等${selectedNames.length}人`
+				: selectedNames.join(', ')
 		}
+
+		defaultStudentIndex.value = e.indexs
+		showStudentPicker.value = false
+		filterAndLoadData()
+	}
+
+	// 过滤并加载数据
+	const filterAndLoadData = () => {
+		if (!selectedDate.value) {
+			tableData.value = []
+			return
+		}
+
+		const dateData = mockData[selectedDate.value]
+		if (!dateData) {
+			tableData.value = []
+			return
+		}
+
+		let filteredData = [...dateData]
+
+		// 按项目过滤
+		if (selectedProjectValue.value !== 'all') {
+			const projectMap: Record<string, string> = {
+				'100m-free': '100米自由泳',
+				'200m-free': '200米自由泳',
+				'400m-free': '400米自由泳',
+				'100m-breast': '100米蛙泳'
+			}
+			const targetProject = projectMap[selectedProjectValue.value]
+			if (targetProject) {
+				filteredData = filteredData.filter(item => item.projectName === targetProject)
+			}
+		}
+
+		// 按学生过滤
+		if (selectedStudentValue.value !== 'all') {
+			const studentMap: Record<string, string> = {
+				'zhang-xiaoming': '张小明',
+				'li-xiaohong': '李小红',
+				'wang-xiaoming': '王小明',
+				'zhao-xiaofang': '赵小芳',
+				'chen-xiaogang': '陈小刚'
+			}
+			const targetStudent = studentMap[selectedStudentValue.value]
+			if (targetStudent) {
+				filteredData = filteredData.filter(item => item.name === targetStudent)
+			}
+		}
+
+		tableData.value = filteredData
 	}
 </script>
 
@@ -241,6 +376,47 @@
 		}
 	}
 
+	/* 选择器区域 */
+	.selector-section {
+		background-color: #fff;
+		margin: 0 20rpx 20rpx;
+		border-radius: 16rpx;
+		padding: 24rpx;
+		display: flex;
+		gap: 20rpx;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+
+		.selector-item {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 20rpx 24rpx;
+			background-color: #f8f8f8;
+			border-radius: 12rpx;
+
+			.selector-label {
+				font-size: 28rpx;
+				color: #666;
+				margin-right: 16rpx;
+			}
+
+			.selector-value {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: flex-end;
+
+				.value-text {
+					font-size: 28rpx;
+					color: #333;
+					font-weight: 500;
+					margin-right: 8rpx;
+				}
+			}
+		}
+	}
+
 	/* 日历组件包装 */
 	.calendar-wrapper {
 		background-color: #fff;
diff --git a/src/pages/dataAnalyze/grades.vue b/src/pages/dataAnalyze/grades.vue
index 953762d..5514dbf 100644
--- a/src/pages/dataAnalyze/grades.vue
+++ b/src/pages/dataAnalyze/grades.vue
@@ -23,22 +23,6 @@
 			</picker>
 		</view>
 
-		<!-- ==================== 空状态提示 ==================== -->
-		<!-- 未选择项目时的提示 -->
-		<view class="hint-state" v-if="!selectedProjectId">
-			<view class="hint-icon">
-				<u-icon name="list" size="80" color="#eb2f96"></u-icon>
-			</view>
-			<text class="hint-text">请先选择项目</text>
-		</view>
-
-		<!-- 无数据时的提示 -->
-		<view class="hint-state" v-else-if="gradeList.length === 0">
-			<view class="hint-icon">
-				<u-icon name="file-text" size="80" color="#eb2f96"></u-icon>
-			</view>
-			<text class="hint-text">该项目暂无排名数据</text>
-		</view>
 
 		<!-- ==================== 排名列表区域 ==================== -->
 		<!-- 仅在选择了项目且有数据时显示 -->
@@ -70,11 +54,6 @@
 						<text class="rank-number">{{ index + 1 }}</text>
 					</view>
 
-					<!-- 学生头像 -->
-					<view class="student-avatar">
-						<text class="avatar-text">{{ item.name.charAt(0) }}</text>
-					</view>
-
 					<!-- 学生信息 -->
 					<view class="student-info">
 						<text class="student-name">{{ item.name }}</text>
@@ -308,9 +287,23 @@
 	.project-select-section {
 		background-color: #fff;
 		margin: 0 20rpx 20rpx;
-		border-radius: 16rpx;
+		border-radius: 20rpx;
 		padding: 28rpx;
-		box-shadow: 0 2rpxrpx 12rpx rgba(0, 0, 0, 0.05);
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+		position: relative;
+		overflow: hidden;
+		transition: all 0.3s ease;
+
+		&::before {
+			content: '';
+			position: absolute;
+			left: 0;
+			top: 0;
+			bottom: 0;
+			width: 6rpx;
+			// background: linear-gradient(180deg, #1890ff 0%, #096dd9 100%);
+			border-radius: 20rpx 0 0 20rpx;
+		}
 
 		.picker-wrapper {
 			display: flex;
@@ -323,8 +316,9 @@
 			transition: all 0.3s ease;
 
 			&:active {
-				background-color: #f0f0f0;
-				border-color: #eb2f96;
+				background-color: #fff0f5;
+				border-color: #1890ff;
+				transform: scale(0.98);
 			}
 
 			.picker-text {
@@ -334,24 +328,7 @@
 		}
 	}
 
-	/* ==================== 提示状态容器 ==================== */
-	.hint-state {
-		margin: 0 20rpx;
-		background-color: #fff;
-		border-radius: 16rpx;
-		padding: 80rpx 40rpx;
-		text-align: center;
-		box-shadow: 0 2rpxrpx 12rpx rgba(0, 0, 0, 0.05);
 
-		.hint-icon {
-			margin-bottom: 24rpx;
-		}
-
-		.hint-text {
-			font-size: 28rpx;
-			color: #999;
-		}
-	}
 
 	/* ==================== 排名列表区域 ==================== */
 	.ranking-section {
@@ -360,13 +337,26 @@
 		// 统计卡片
 		.stats-card {
 			background-color: #fff;
-			border-radius: 16rpx;
+			border-radius: 20rpx;
 			padding: 24rpx;
 			margin-bottom: 20rpx;
 			display: flex;
 			align-items: center;
 			justify-content: space-around;
-			box-shadow: 0 2rpxrpx 12rpx rgba(0, 0, 0, 0.05);
+			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+			position: relative;
+			overflow: hidden;
+
+			&::before {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 0;
+				bottom: 0;
+				width: 6rpx;
+				// background: linear-gradient(180deg, #1890ff 0%, #096dd9 100%);
+				border-radius: 20rpx 0 0 20rpx;
+			}
 
 			.stat-item {
 				text-align: center;
@@ -381,7 +371,7 @@
 				.stat-value {
 					font-size: 32rpx;
 					font-weight: 700;
-					color: #eb2f96;
+					color: #1890ff;
 				}
 			}
 
@@ -398,32 +388,36 @@
 			// 排名项
 			.ranking-item {
 				background-color: #fff;
-				border-radius: 16rpx;
+				border-radius: 20rpx;
 				padding: 24rpx;
 				margin-bottom: 16rpx;
 				display: flex;
 				align-items: center;
 				gap: 20rpx;
-				box-shadow: 0 2rpxrpx 12rpx rgba(0, 0, 0, 0.05);
+				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
 				transition: all 0.3s ease;
 				position: relative;
+				overflow: hidden;
+
+				&::before {
+					content: '';
+					position: absolute;
+					left: 0;
+					top: 0;
+					bottom: 0;
+					width: 6rpx;
+					// background: linear-gradient(180deg, #1890ff 0%, #096dd9 100%);
+					opacity: 0;
+					transition: opacity 0.3s ease;
+					border-radius: 20rpx 0 0 20rpx;
+				}
 
 				&:active {
 					transform: scale(0.98);
 					box-shadow: 0 4rpx 16rpx rgba(235, 47, 150, 0.15);
-				}
 
-				// 前三名特殊样式
-				&.top-three {
 					&::before {
-						content: '';
-						position: absolute;
-						left: 0;
-						top: 0;
-						bottom: 0;
-						width: 6rpx;
-						background: linear-gradient(180deg, #eb2f96 0%, #f759ab 100%);
-						border-radius: 16rpx 0 0 16rpx;
+						opacity: 1;
 					}
 				}
 
@@ -437,7 +431,7 @@
 					justify-content: center;
 					flex-shrink: 0;
 					background-color: #f0f0f0;
-					box-shadow: 0 2rpxrpx 8rpx rgba(0, 0, 0, 0.1);
+					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 
 					.rank-number {
 						font-size: 24rpx;
@@ -448,7 +442,7 @@
 					// 前三名特殊颜色
 					&.rank-1 {
 						background: linear-gradient(135deg, #ffd700 0%, #ffec3d 100%);
-						box-shadow: 0 2rpxrpx 8rpx rgba(255, 215, 0, 0.4);
+						box-shadow: 0 2rpx 8.6rpx rgba(255, 215, 0, 0.4);
 
 						.rank-number {
 							color: #fff;
@@ -458,7 +452,7 @@
 
 					&.rank-2 {
 						background: linear-gradient(135deg, #c0c0c0 0%, #d9d9d9 100%);
-						box-shadow: 0 2rpxrpx 8rpx rgba(192, 192, 192, 0.4);
+						box-shadow: 0 2rpx 8rpx rgba(192, 192, 192, 0.4);
 
 						.rank-number {
 							color: #fff;
@@ -467,7 +461,7 @@
 
 					&.rank-3 {
 						background: linear-gradient(135deg, #cd7f32 0%, #e6963d 100%);
-						box-shadow: 0 2rpxrpx 8rpx rgba(205, 127, 50, 0.4);
+						box-shadow: 0 2rpx 8rpx rgba(205, 127, 50, 0.4);
 
 						.rank-number {
 							color: #fff;
@@ -479,13 +473,13 @@
 				.student-avatar {
 					width: 70rpx;
 					height: 70rpx;
-					background: linear-gradient(135deg, #eb2f96 0%, #f759ab 100%);
+					background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
 					border-radius: 50%;
 					display: flex;
 					align-items: center;
 					justify-content: center;
 					flex-shrink: 0;
-					box-shadow: 0 2rpxrpx 8rpx rgba(235, 47, 150, 0.3);
+					box-shadow: 0 2rpx 8rpx rgba(235, 47, 150, 0.3);
 
 					.avatar-text {
 						font-size: 28rpx;
@@ -509,7 +503,7 @@
 
 					.student-speed {
 						font-size: 26rpx;
-						color: #eb2f96;
+						color: #1890ff;
 						font-weight: 500;
 					}
 				}
diff --git a/src/pages/dataAnalyze/paragraphAnalyze.vue b/src/pages/dataAnalyze/paragraphAnalyze.vue
index 2ed65ea..891705e 100644
--- a/src/pages/dataAnalyze/paragraphAnalyze.vue
+++ b/src/pages/dataAnalyze/paragraphAnalyze.vue
@@ -1,18 +1,1002 @@
 <template>
-	<view>
+	<view class="paragraph-container">
+		<!-- ==================== 页面标题区域 ==================== -->
+		<view class="header-section">
+			<view class="header-title">
+				<text class="title">分段数据</text>
+				<text class="subtitle">学生分段训练成绩分析</text>
+			</view>
+		</view>
+
+		<!-- ==================== 项目选择区域 ==================== -->
+		<view class="select-section">
+			<view class="select-label">
+				<text class="label-text">选择项目</text>
+			</view>
+			<!-- 项目选择器组件 -->
+			<picker mode="selector" :range="projectOptions" range-key="name" :value="selectedProjectIndex"
+				@change="handleProjectChange">
+				<view class="picker-wrapper">
+					<text class="picker-text">{{ selectedProjectName }}</text>
+					<u-icon name="arrow-down" size="18" color="#999"></u-icon>
+				</view>
+			</picker>
+		</view>
+
+		<!-- ==================== 日历组件 ==================== -->
+		<!-- 仅在选择了项目后显示日历 -->
+		<view class="calendar-wrapper" v-if="selectedProjectId">
+			<uni-calendar
+				:insert="true"
+				:lunar="false"
+				:show-month="true"
+				:selected="selectedDates"
+				@monthSwitch="handleMonthSwitch"
+				@change="handleDateChange">
+			</uni-calendar>
+		</view>
+
+		<!-- ==================== 学生选择区域 ==================== -->
+		<!-- 仅在选择了日期后显示 -->
+		<view class="select-section" v-if="selectedProjectId && selectedDate">
+			<view class="select-label">
+				<text class="label-text">选择学生</text>
+			</view>
+			<!-- 学生选择器组件 -->
+			<picker mode="selector" :range="studentOptions" range-key="name" :value="selectedStudentIndex"
+				@change="handleStudentChange">
+				<view class="picker-wrapper">
+					<text class="picker-text">{{ selectedStudentName }}</text>
+					<u-icon name="arrow-down" size="18" color="#999"></u-icon>
+				</view>
+			</picker>
+		</view>
+
+		<!-- ==================== 未完成选择提示 ==================== -->
+		<!-- 当用户未完成所有选择时显示提示 -->
+		<!-- <view class="hint-state" v-if="!isDataReady">
+			<view class="hint-icon">
+				<u-icon name="list" size="80" color="#1890ff"></u-icon>
+			</view>
+			<text class="hint-text">{{ hintText }}</text>
+		</view> -->
+
+		<!-- ==================== 数据展示区域 ==================== -->
+		<!-- 仅在完成所有选择后显示 -->
+		<view class="data-section" v-if="isDataReady">
+			<!-- 学生信息卡片 -->
+			<view class="student-card">
+				<view class="student-header">
+					<text class="card-title">学生信息</text>
+				</view>
+				<view class="student-info">
+					<!-- 学生基本信息项 -->
+					<view class="info-item">
+						<text class="info-label">姓名</text>
+						<text class="info-value">{{ currentStudent?.name }}</text>
+					</view>
+					<view class="info-item">
+						<text class="info-label">性别</text>
+						<text class="info-value">{{ currentStudent?.gender }}</text>
+					</view>
+					<view class="info-item">
+						<text class="info-label">年龄</text>
+						<text class="info-value">{{ currentStudent?.age }}岁</text>
+					</view>
+					<view class="info-item">
+						<text class="info-label">项目</text>
+						<text class="info-value">{{ currentStudent?.projectName }}</text>
+					</view>
+					<view class="info-item">
+						<text class="info-label">总成绩</text>
+						<text class="info-value highlight">{{ currentStudent?.totalTime }}s</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 分段记录表格卡片 -->
+			<view class="segment-card">
+				<view class="segment-header">
+					<text class="card-title">分段记录</text>
+					<view class="segment-count">
+						<u-icon name="list" size="14" color="#1890ff"></u-icon>
+						<text class="count-text">{{ segmentTableData.length }}段</text>
+					</view>
+				</view>
+
+				<!-- 分段数据表格 -->
+				<view class="table-wrapper">
+					<sl-table
+						:columns="segmentColumns"
+						:tableData="segmentTableData"
+						:showRowIndex="false"
+						@cell-click="handleSegmentCellClick">
+						<!-- 空数据插槽 -->
+						<template #empty>
+							<view class="empty-container">
+								<view class="empty-icon">
+									<u-icon name="file-text" size="80" color="#ccc"></u-icon>
+								</view>
+								<text class="empty-text">暂无分段数据</text>
+							</view>
+						</template>
+					</sl-table>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script setup lang="ts">
-	import { onShow, onLoad } from "@dcloudio/uni-app";
+	import { onShow, onLoad } from "@dcloudio/uni-app"
+	import { Service } from '@/Service/Service'
+	import { ref, computed } from 'vue'
+
+	// ==================== TypeScript 接口定义 ====================
+
+	/**
+	 * 项目接口
+	 * 定义游泳项目的基本信息
+	 */
+	interface Project {
+		id: string				// 项目 ID
+		name: string			// 项目名称
+	}
+
+	/**
+	 * 学生接口
+	 * 定义学生的基本信息和成绩
+	 */
+	interface Student {
+		id: string				// 学生 ID
+		name: string			// 学生姓名
+		gender: string			// 性别：男/女
+		age: number			// 年龄
+		projectName: string		// 项目名称
+		totalTime: number		// 总成绩（秒）
+		projectId: string		// 所属项目 ID
+	}
+
+	/**
+	 * 分段数据接口
+	 * 定义分段训练的详细信息
+	 */
+	interface SegmentData {
+		id: string				// 分段 ID
+		distance: number		// 分段距离（米）
+		time: number			// 分段成绩（秒）
+		timeDiff: number		// 时间差（与平均值的差值，秒）
+	}
+
+	/**
+	 * 完整学生记录接口
+	 * 包含学生信息和分段数据
+	 */
+	interface StudentRecord {
+		student: Student		// 学生基本信息
+		segments: SegmentData[]	// 分段数据列表
+		date: string			// 记录日期
+	}
+
+	// ==================== 响应式数据 - 年月相关 ====================
+
+	/**
+	 * 当前年份
+	 * 用于月份切换时记录当前年份
+	 */
+	const currentYear = ref(new Date().getFullYear())
+
+	/**
+	 * 当前月份（1-12）
+	 * 用于月份切换时记录当前月份
+	 */
+	const currentMonth = ref(new Date().getMonth() + 1)
+
+	// ==================== 响应式数据 - 项目相关 ====================
+
+	/**
+	 * 项目列表数据
+	 * 从后端 API 获取或使用模拟数据
+	 */
+	const projectList = ref<Project[]>([
+		{ id: '1', name: '100米自由泳' },
+		{ id: '2', name: '200米自由泳' },
+		{ id: '3', name: '50米蛙泳' },
+		{ id: '4', name: '100米蝶泳' }
+	])
+
+	/**
+	 * 项目选择器选项
+	 * 用于 picker 组件显示
+	 */
+	const projectOptions = ref(projectList.value)
+
+	/**
+	 * 当前选中的项目索引
+	 * 用于 picker 组件的 value 属性
+	 */
+	const selectedProjectIndex = ref(-1)
+
+	/**
+	 * 当前选中的项目 ID
+	 * 用于后续数据查询
+	 */
+	const selectedProjectId = ref('')
+
+	/**
+	 * 计算属性：当前选中的项目名称
+	 * 根据选中的索引返回项目名称，默认显示提示文本
+	 */
+	const selectedProjectName = computed(() => {
+		if (selectedProjectIndex.value === -1) {
+			return '请选择项目'
+		}
+		return projectList.value[selectedProjectIndex.value]?.name || '请选择项目'
+	})
+
+	// ==================== 响应式数据 - 日期相关 ====================
+
+	/**
+	 * 当前选中的日期
+	 * 格式：YYYY-MM-DD
+	 */
+	const selectedDate = ref('')
+
+	/**
+	 * 日历打点数据
+	 * 用于在日历上标记有训练记录的日期
+	 * date: 日期字符串，'YYYY-MM-DD'
+	 * info: 显示在日期上的标记信息
+	 */
+	const selectedDates = ref([
+		{ date: '2026-03-12', info: '分段' },
+		{ date: '2026-03-14', info: '分段' },
+		{ date: '2026-03-16', info: '分段' },
+		{ date: '2026-03-19', info: '分段' },
+		{ date: '2026-03-24', info: '分段' }
+	])
+
+	// ==================== 响应式数据 - 学生相关 ====================
+
+	/**
+	 * 学生列表数据
+	 * 根据选择的项目动态更新
+	 */
+	const studentList = ref<Student[]>([])
+
+	/**
+	 * 学生选择器选项
+	 * 用于 picker 组件显示
+	 */
+	const studentOptions = ref<Student[]>([])
+
+	/**
+	 * 当前选中的学生索引
+	 * 用于 picker 组件的 value 属性
+	 */
+	const selectedStudentIndex = ref(-1)
+
+	/**
+	 * 当前选中的学生 ID
+	 * 用于后续数据查询
+	 */
+	const selectedStudentId = ref('')
+
+	/**
+	 * 计算属性：当前选中的学生名称
+	 * 根据选中的索引返回学生名称，默认显示提示文本
+	 */
+	const selectedStudentName = computed(() => {
+		if (selectedStudentIndex.value === -1) {
+			return '请选择学生'
+		}
+		return studentList.value[selectedStudentIndex.value]?.name || '请选择学生'
+	})
+
+	// ==================== 响应式数据 - 分段相关 ====================
+
+	/**
+	 * 当前选中的学生详细信息
+	 * 包含学生基本信息和分段数据
+	 */
+	const currentStudent = ref<Student | null>(null)
+
+	/**
+	 * 分段数据列表（用于表格展示）
+	 * 按段序号排序后的数据
+	 */
+	const segmentList = ref<SegmentData[]>([])
+
+	/**
+	 * 分段表格列定义
+	 * 列顺序：分段距离、时间差、分段成绩
+	 */
+	const segmentColumns = ref([
+		{
+			label: '分段距离',
+			prop: 'distance',
+			width: '140px'
+		},
+		{
+			label: '时间差',
+			prop: 'timeDiff',
+			width: '140px'
+		},
+		{
+			label: '分段成绩',
+			prop: 'time',
+			width: '140px'
+		}
+	])
+
+	/**
+	 * 分段表格数据
+	 * 将分段数据转换为表格所需格式
+	 */
+	const segmentTableData = computed(() => {
+		return segmentList.value.map(segment => ({
+			distance: segment.distance,		// 分段距离
+			timeDiff: segment.timeDiff,		// 时间差
+			time: segment.time			// 分段成绩
+		}))
+	})
+
+	// ==================== 计算属性 - 页面状态判断 ====================
+
+	/**
+	 * 计算属性：数据是否准备就绪
+	 * 只有项目、日期、学生都选择后才返回 true
+	 */
+	const isDataReady = computed(() => {
+		return selectedProjectId.value !== '' &&
+		       selectedDate.value !== '' &&
+		       selectedStudentId.value !== '' &&
+		       currentStudent.value !== null
+	})
+
+	/**
+	 * 计算属性：提示文本
+	 * 根据当前选择状态返回不同的提示信息
+	 */
+	const hintText = computed(() => {
+		if (!selectedProjectId.value) {
+			return '请先选择项目'
+		} else if (!selectedDate.value) {
+			return '请在日历选择日期'
+		} else if (!selectedStudentId.value) {
+			return '请选择学生'
+		}
+		return '暂无数据'
+	})
+
+	// ==================== 模拟数据 ====================
+
+	/**
+	 * 模拟的学生记录数据
+	 * 按项目 ID 分组，每组包含该项目的学生记录
+	 * 每个学生记录包含多个日期的分段数据
+	 */
+	const mockStudentRecords: Record<string, StudentRecord[]> = {
+		'1': [ // 100米自由泳项目的学生记录
+			{
+				student: {
+					id: 's1',
+					name: '王小明',
+					gender: '男',
+					age: 12,
+					projectName: '100米自由泳',
+					totalTime: 68.5,
+					projectId: '1'
+				},
+				date: '2026-03-12',
+				segments: [
+					{ id: 'seg1', distance: 25, time: 17.2, timeDiff: 0.8 },
+					{ id: 'seg2', distance: 25, time: 17.5, timeDiff: 1.1 },
+					{ id: 'seg3', distance: 25, time: 16.8, timeDiff: 0.4 },
+					{ id: 'seg4', distance: 25, time: 17.0, timeDiff: 0.6 }
+				]
+			},
+			{
+				student: {
+					id: 's2',
+					name: '张小红',
+					gender: '女',
+					age: 11,
+					projectName: '100米自由泳',
+					totalTime: 72.3,
+					projectId: '1'
+				},
+				date: '2026-03-12',
+				segments: [
+					{ id: 'seg5', distance: 25, time: 18.5, timeDiff: 1.2 },
+					{ id: 'seg6', distance: 25, time: 18.0, timeDiff: 0.7 },
+					{ id: 'seg7', distance: 25, time: 17.8, timeDiff: 0.5 },
+					{ id: 'seg8', distance: 25, time: 18.0, timeDiff: 0.7 }
+				]
+			},
+			{
+				student: {
+					id: 's3',
+					name: '李小龙',
+					gender: '男',
+					age: 13,
+					projectName: '100米自由泳',
+					totalTime: 65.2,
+					projectId: '1'
+				},
+				date: '2026-03-14',
+				segments: [
+					{ id: 'seg9', distance: 25, time: 16.5, timeDiff: 0.1 },
+					{ id: 'seg10', distance: 25, time: 16.3, timeDiff: -0.1 },
+					{ id: 'seg11', distance: 25, time: 16.4, timeDiff: 0 },
+					{ id: 'seg12', distance: 25, time: 16.0, timeDiff: -0.4 }
+				]
+			}
+		],
+		'2': [ // 200米自由泳项目的学生记录
+			{
+				student: {
+					id: 's4',
+					name: '赵小芳',
+					gender: '女',
+					age: 10,
+					projectName: '200米自由泳',
+					totalTime: 145.2,
+					projectId: '2'
+				},
+				date: '2026-03-16',
+				segments: [
+					{ id: 'seg13', distance: 50, time: 36.5, timeDiff: 2.1 },
+					{ id: 'seg14', distance: 50, time: 35.8, timeDiff: 1.4 },
+					{ id: 'seg15', distance: 50, time: 36.2, timeDiff: 1.8 },
+					{ id: 'seg16', distance: 50, time: 36.7, timeDiff: 2.3 }
+				]
+			}
+		],
+		'3': [ // 50米蛙泳项目的学生记录
+			{
+				student: {
+					id: 's5',
+					name: '陈小刚',
+					gender: '男',
+					age: 14,
+					projectName: '50米蛙泳',
+					totalTime: 42.8,
+					projectId: '3'
+				},
+				date: '2026-03-19',
+				segments: [
+					{ id: 'seg17', distance: 25, time: 21.5, timeDiff: 1.2 },
+					{ id: 'seg18', distance: 25, time: 21.3, timeDiff: 1.0 }
+				]
+			}
+		],
+		'4': [ // 100米蝶泳项目的学生记录
+			{
+				student: {
+					id: 's6',
+					name: '周小丽',
+					gender: '女',
+					age: 12,
+					projectName: '100米蝶泳',
+					totalTime: 78.6,
+					projectId: '4'
+				},
+				date: '2026-03-24',
+				segments: [
+					{ id: 'seg19', distance: 25, time: 19.8, timeDiff: 1.5 },
+					{ id: 'seg20', distance: 25, time: 19.5, timeDiff: 1.2 },
+					{ id: 'seg21', distance: 25, time: 19.6, timeDiff: 1.3 },
+					{ id: 'seg22', distance: 25, time: 19.7, timeDiff: 1.4 }
+				]
+			}
+		]
+	}
+
+	// ==================== 生命周期钩子 ====================
+
+	/**
+	 * 页面加载时触发
+	 * 在页面初始化时执行，只执行一次
+	 */
 	onLoad(() => {
+		// 初始化数据，加载项目列表
+		loadProjectData()
+	})
 
-	});
-
+	/**
+	 * 页面显示时触发
+	 * 每次页面从后台切换到前台时执行
+	 */
 	onShow(() => {
+		// TODO: 如果需要在页面显示时刷新数据，可以在这里添加逻辑
+		// 例如：检查是否有数据更新，重新加载当前选中的数据
+	})
 
-	});
+	// ==================== 业务逻辑方法 - 项目相关 ====================
+
+	/**
+	 * 加载项目数据
+	 * 从后端 API 获取项目列表
+	 * TODO: 实际项目中应该调用后端 API
+	 */
+	const loadProjectData = () => {
+		// 示例代码（调用后端 API）：
+		// Service.Request('/api/projects', 'GET').then(res => {
+		// 	projectList.value = res.data
+		// 	projectOptions.value = res.data
+		// })
+
+		// 当前使用模拟数据，已在初始化时赋值
+		console.log('项目数据加载完成')
+	}
+
+	/**
+	 * 处理项目选择变化事件
+	 * 当用户选择项目时触发
+	 * @param e picker 选择事件对象，包含 detail.value 属性表示选中的索引
+	 */
+	const handleProjectChange = (e: any) => {
+		// 获取选中的项目索引
+		const index = e.detail.value
+
+		// 更新选中项目的索引
+		selectedProjectIndex.value = index
+
+		// 获取选中的项目
+		const selectedProject = projectList.value[index]
+
+		if (selectedProject) {
+			// 更新选中项目的 ID
+			selectedProjectId.value = selectedProject.id
+
+			// 清空之前的日期和学生选择
+			selectedDate.value = ''
+			selectedStudentId.value = ''
+			selectedStudentIndex.value = -1
+			currentStudent.value = null
+			segmentList.value = []
+
+			// 加载该项目下的学生列表
+			loadProjectStudents(selectedProject.id)
+		}
+
+		// TODO: 实际项目中可能需要调用 API 获取该项目的学生列表
+	}
+
+	// ==================== 业务逻辑方法 - 日历相关 ====================
+
+	/**
+	 * 处理日历月份切换事件
+	 * 当用户切换日历的月份时触发
+	 * @param e 切换事件对象，包含 year 和 month 属性
+	 */
+	const handleMonthSwitch = (e: any) => {
+		// 更新当前年份
+		currentYear.value = e.year
+
+		// 更新当前月份
+		currentMonth.value = e.month
+
+		// 重新加载数据
+		// 获取切换后月份的训练记录和日历标记
+		loadMonthData()
+
+		// 清空选中的日期
+		// 因为切换了月份，之前选择的日期可能不再显示
+		selectedDate.value = ''
+
+		// 清空学生选择和数据
+		selectedStudentId.value = ''
+		selectedStudentIndex.value = -1
+		currentStudent.value = null
+		segmentList.value = []
+
+		// TODO: 实际项目中应该调用 API 获取该月份的日历标记数据
+	}
+
+	/**
+	 * 处理日历日期选择事件
+	 * 当用户点击日历上的某个日期时触发
+	 * @param e 选择事件对象，fulldate 属性包含完整的日期字符串
+	 */
+	const handleDateChange = (e: any) => {
+		// 获取选择的完整日期，格式为 'YYYY-MM-DD'
+		const date = e.fulldate
+
+		// 更新选中的日期
+		selectedDate.value = date
+
+		// 清空学生选择
+		selectedStudentId.value = ''
+		selectedStudentIndex.value = -1
+		currentStudent.value = null
+		segmentList.value = []
+
+		// TODO: 实际项目中可能需要调用 API 获取该日期的数据
+		// 并根据日期加载该日期的学生列表
+	}
+
+	/**
+	 * 加载月份数据
+	 * 根据当前年月加载日历标记数据
+	 */
+	const loadMonthData = () => {
+		// TODO: 实际项目中应该调用 API 获取该月份的日历标记
+		// Service.Request('/api/segment/dates', 'GET', {
+		// 	year: currentYear.value,
+		// 	month: currentMonth.value,
+		// 	projectId: selectedProjectId.value
+		// }).then(res => {
+		// 	selectedDates.value = res.data
+		// })
+
+		console.log(`加载 ${currentYear.value}年${currentMonth.value}月 的日历标记数据`)
+	}
+
+	// ==================== 业务逻辑方法 - 学生相关 ====================
+
+	/**
+	 * 加载项目学生列表
+	 * 根据项目 ID 获取该项目的学生列表
+	 * @param projectId 项目 ID
+	 */
+	const loadProjectStudents = (projectId: string) => {
+		// 从模拟数据中提取该项目的学生列表（去重）
+		const records = mockStudentRecords[projectId] || []
+		const uniqueStudents = new Map<string, Student>()
+		records.forEach(record => {
+			if (!uniqueStudents.has(record.student.id)) {
+				uniqueStudents.set(record.student.id, record.student)
+			}
+		})
+		studentList.value = Array.from(uniqueStudents.values())
+		studentOptions.value = studentList.value
+
+		console.log(`项目 ${projectId} 的学生列表加载完成，共 ${studentList.value.length} 位学生`)
+	}
+
+	/**
+	 * 处理学生选择变化事件
+	 * 当用户选择学生时触发
+	 * @param e picker 选择事件对象，包含 detail.value 属性表示选中的索引
+	 */
+	const handleStudentChange = (e: any) => {
+		// 获取选中的学生索引
+		const index = e.detail.value
+
+		// 更新选中学生的索引
+		selectedStudentIndex.value = index
+
+		// 获取选中的学生
+		const selectedStudent = studentList.value[index]
+
+		if (selectedStudent) {
+			// 更新选中学生的 ID
+			selectedStudentId.value = selectedStudent.id
+
+			// 加载学生数据（包括分段数据）
+			loadStudentData(selectedProjectId.value, selectedStudentId.value, selectedDate.value)
+		}
+
+		// TODO: 实际项目中可能需要调用 API 获取学生的详细数据和分段记录
+	}
+
+	/**
+	 * 加载学生数据
+	 * 根据项目 ID、学生 ID 和日期获取学生的详细信息和分段数据
+	 * @param projectId 项目 ID
+	 * @param studentId 学生 ID
+	 * @param date 记录日期
+	 */
+	const loadStudentData = (projectId: string, studentId: string, date: string) => {
+		// 从模拟数据中查找匹配的记录
+		const records = mockStudentRecords[projectId] || []
+		const record = records.find(r => r.student.id === studentId && r.date === date)
+
+		if (record) {
+			// 更新学生信息
+			currentStudent.value = record.student
+
+			// 更新分段列表（已按原顺序，通过计算属性转换为表格数据）
+			segmentList.value = record.segments
+
+			console.log(`学生数据加载完成：${record.student.name}，共 ${record.segments.length} 个分段`)
+		} else {
+			// 未找到匹配的记录
+			currentStudent.value = null
+			segmentList.value = []
+
+			Service.Msg('未找到该日期的记录数据')
+		}
+
+		// TODO: 实际项目中应该调用后端 API
+		// Service.Request(`/api/segments?projectId=${projectId}&studentId=${studentId}&date=${date}`, 'GET')
+		//   .then(res => {
+		//     currentStudent.value = res.data.student
+		//     segmentList.value = res.data.segments
+		//   })
+	}
+
+	// ==================== 业务逻辑方法 - 分段相关 ====================
+
+	/**
+	 * 处理分段表格单元格点击事件
+	 * 点击某分段单元格查看详情
+	 * @param event 点击事件对象，包含行索引、列索引、单元格数据等信息
+	 */
+	const handleSegmentCellClick = (event: any) => {
+		console.log('分段表格单元格点击事件:', event)
+		// TODO: 可以跳转到分段详情页面或弹出详细信息
+		// Service.GoPage('/pages/dataAnalyze/segmentDetail', { segmentId: event.rowData.id })
+	}
 </script>
 
-<style lang="scss">
-</style>
\ No newline at end of file
+<style lang="scss" scoped>
+	// 页面背景色设置
+	page {
+		background-color: #f5f5f5;
+	}
+
+	// 页面容器
+	.paragraph-container {
+		min-height: 100vh;
+		padding-bottom: 40rpx;
+	}
+
+	/* ==================== 页面标题区域 ==================== */
+	.header-section {
+		background-color: #fff;
+		padding: 32rpx 28rpx 24rpx;
+		margin-bottom: 20rpx;
+
+		.header-title {
+			.title {
+				font-size: 36rpx;
+				font-weight: 700;
+				color: #333;
+				display: block;
+				margin-bottom: 8rpx;
+			}
+
+			.subtitle {
+				font-size: 24rpx;
+				color: #999;
+			}
+		}
+	}
+
+	/* ==================== 选择区域通用样式 ==================== */
+	.select-section {
+		background-color: #fff;
+		margin: 0 20rpx 20rpx;
+		border-radius: 20rpx;
+		padding: 28rpx;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+		position: relative;
+		overflow: hidden;
+		transition: all 0.3s ease;
+
+		
+
+		.select-label {
+			margin-bottom: 16rpx;
+
+			.label-text {
+				font-size: 26rpx;
+				font-weight: 600;
+				color: #666;
+			}
+		}
+
+		.picker-wrapper {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 20rpx 24rpx;
+			background-color: #f8f8f8;
+			border-radius: 12rpx;
+			border: 1rpx solid #e8e8e8;
+			transition: all 0.3s ease;
+
+			&:active {
+				background-color: #f0f0f0;
+				border-color: #1890ff;
+				transform: scale(0.98);
+			}
+
+			.picker-text {
+				font-size: 28rpx;
+				color: #333;
+			}
+		}
+	}
+
+	/* ==================== 日历组件包装 ==================== */
+	.calendar-wrapper {
+		background-color: #fff;
+		margin: 0 20rpx 20rpx;
+		padding: 20rpx 0;
+		border-radius: 20rpx;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+	}
+
+	/* ==================== 提示状态容器 ==================== */
+	.hint-state {
+		margin: 0 20rpx;
+		background-color: #fff;
+		border-radius: 20rpx;
+		padding: 80rpx 40rpx;
+		text-align: center;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+
+		.hint-icon {
+			margin-bottom: 24rpx;
+		}
+
+		.hint-text {
+			font-size: 28rpx;
+			color: #999;
+		}
+	}
+
+	/* ==================== 数据展示区域 ==================== */
+	.data-section {
+		margin: 0 20rpx;
+
+		// 学生信息卡片
+		.student-card {
+			background-color: #fff;
+			border-radius: 20rpx;
+			padding: 28rpx;
+			margin-bottom: 20rpx;
+			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+			position: relative;
+			overflow: hidden;
+
+			
+
+			.student-header {
+				margin-bottom: 24rpx;
+				padding-bottom: 16rpx;
+				border-bottom: 1rpx solid #f0f0f0;
+
+				.card-title {
+					font-size: 32rpx;
+					font-weight: 700;
+					color: #333;
+				}
+			}
+
+			.student-info {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				gap: 20rpx;
+
+				.info-item {
+					display: flex;
+					flex-direction: column;
+					gap: 8rpx;
+
+					.info-label {
+						font-size: 24rpx;
+						color: #999;
+					}
+
+					.info-value {
+						font-size: 30rpx;
+						font-weight: 600;
+						color: #333;
+
+						&.highlight {
+							color: #1890ff;
+							font-size: 34rpx;
+						}
+					}
+				}
+			}
+		}
+
+		// 分段记录表格卡片
+		.segment-card {
+			background-color: #fff;
+			border-radius: 20rpx;
+			padding: 28rpx;
+			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+			position: relative;
+			overflow: hidden;
+
+			
+
+			.segment-header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-bottom: 24rpx;
+				padding-bottom: 16rpx;
+				border-bottom: 1rpx solid #f0f0f0;
+
+				.card-title {
+					font-size: 32rpx;
+					font-weight: 700;
+					color: #333;
+				}
+
+				.segment-count {
+					display: flex;
+					align-items: center;
+					gap: 6rpx;
+					background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(9, 109, 217, 0.1) 100%);
+					padding: 8rpx 16rpx;
+					border-radius: 16rpx;
+
+					.count-text {
+						font-size: 24rpx;
+						color: #1890ff;
+						font-weight: 600;
+					}
+				}
+			}
+
+			// 表格容器
+			.table-wrapper {
+				margin-top: 20rpx;
+			}
+		}
+	}
+
+	/* ==================== 空状态容器 ==================== */
+	.empty-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 80rpx 40rpx;
+
+		// 空状态图标
+		.empty-icon {
+			margin-bottom: 24rpx;
+		}
+
+		// 空状态文字
+		.empty-text {
+			font-size: 28rpx;
+			color: #999;
+		}
+	}
+
+	/* ==================== sl-table 样式覆盖 ==================== */
+	// 表格容器
+	::v-deep .sl-table {
+		width: 100%;
+	}
+
+	// 表头背景色 - 使用蓝色渐变
+	::v-deep .sl-table__header {
+		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%) !important;
+	}
+
+	// 表头单元格样式
+	::v-deep .sl-table__header__cell {
+		color: #fff !important;
+		font-weight: 700;
+		font-size: 28rpx;
+	}
+
+	// 表格单元格样式
+	::v-deep .sl-table__body__cell {
+		font-size: 26rpx;
+		color: #333;
+		padding: 24rpx 16rpx;
+	}
+
+	// 偶数行背景色
+	::v-deep .sl-table__body__row:nth-child(even) {
+		background-color: #fafafa !important;
+	}
+
+	// 奇数行背景色
+	::v-deep .sl-table__body__row:nth-child(odd) {
+		background-color: #fff !important;
+	}
+</style>
diff --git a/src/pages/dataAnalyze/timingAnalze.vue b/src/pages/dataAnalyze/timingAnalze.vue
index a131d46..27da24b 100644
--- a/src/pages/dataAnalyze/timingAnalze.vue
+++ b/src/pages/dataAnalyze/timingAnalze.vue
@@ -58,14 +58,7 @@
 			</sl-table>
 		</view>
 
-		<!-- 未选择日期提示 -->
-		<!-- 未选择日期时显示提示信息 -->
-		<view class="hint-state" v-if="!selectedDate">
-			<view class="hint-icon">
-				<u-icon name="calendar" size="80" color="#1890ff"></u-icon>
-			</view>
-			<text class="hint-text">请选择日期查看数据</text>
-		</view>
+		
 	</view>
 </template>
 
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 337737c..427c482 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,164 +1,230 @@
 <template>
 	<view class="home-container">
-		<!-- 项目列表区域 -->
-		<view v-if="projects.length > 0" class="projects-section">
-			<!-- 计时器模块 -->
-			<view class="timer-card">
-				<view class="timer-header">
-					<text class="timer-title">计时模块</text>
-					<view class="" style="display: flex; align-items: center; justify-content: space-between;" >
-						<text class="task-count">1个任务</text>
-					</view>
-				</view>
 
-				<view @click="Service.GoPage('/pages/userFunc/swiming')" class="timer-content">
-					<view class="timer-circle">
-						<view class="circle-progress">
-							<view class="progress-ring">
-								<view class="ring-inner">
-									<u-icon name="clock" size="32" color="#1890ff"></u-icon>
-								</view>
-							</view>
-						</view>
-					</view>
-
-					<view class="timer-info">
-						<text class="timer-name">自由泳500米</text>
-						<text class="timer-time">00:00''00</text>
-					</view>
-
-				</view>
-			</view>
-			
-			
-			<!-- 计时器模块 -->
-			<view class="timer-card">
-				<view class="timer-header">
-					<text class="timer-title">分段模式</text>
-					<view class="" style="display: flex; align-items: center; justify-content: space-between;" >
-						<text class="task-count">1个任务</text>
-					</view>
-				</view>
-			
-				<view @click="Service.GoPage('/pages/userFunc/segmentation')" class="timer-content">
-					<view class="timer-circle">
-						<view class="circle-progress">
-							<view class="progress-ring">
-								<view class="ring-inner">
-									<u-icon name="clock" size="32" color="#1890ff"></u-icon>
-								</view>
-							</view>
-						</view>
-					</view>
-			
-					<view class="timer-info">
-						<text class="timer-name">自由泳500米</text>
-						<text class="timer-time">00:00''00</text>
-					</view>
-			
-					
-				</view>
-			</view>
-			
-			<!-- 计时器模块 -->
-			<view class="timer-card">
-				<view class="timer-header">
-					<text class="timer-title">包干模式</text>
-					<view class="" style="display: flex; align-items: center; justify-content: space-between;" >
-						<text class="task-count">1个任务</text>
-					</view>
-				</view>
-			
-				<view @click="Service.GoPage('/pages/userFunc/project')" class="timer-content">
-					<view class="timer-circle">
-						<view class="circle-progress">
-							<view class="progress-ring">
-								<view class="ring-inner">
-									<u-icon name="clock" size="32" color="#1890ff"></u-icon>
-								</view>
-							</view>
-						</view>
-					</view>
-			
-					<view class="timer-info">
-						<text class="timer-name">自由泳500米</text>
-						<text class="timer-time">00:00''00</text>
-					</view>
-			
-				</view>
-			</view>
-			
-		</view>
 
 		<!-- 空状态 -->
-		<view v-else class="empty-state-container">
-			<!-- 主卡片 -->
-			<view class="main-card" style="position: relative">
-				<!-- 顶部计时器图标 -->
-				<view  class="timer-icon"
-					style="position: absolute; top: -20rpx; right: -20rpx">
-					<u-icon name="clock" bold="true" size="24" color="#666"></u-icon>
-				</view>
-				<!-- 游泳图标 -->
-				<view class="swim-icon">
-					<img :src="Service.GetIconImg('/static/index/swiming.png')" style="width: 100rpx; height: 100rpx"
-						alt="" />
-				</view>
+		<view class="empty-state-container">
+			<!-- 标题区域 -->
+			<view class="title-section">
+				<text class="main-title">暂无项目</text>
+				<text class="sub-title">您还没有创建任何训练项目，开始您的第一次游泳训练记录吧</text>
 			</view>
 
-			<!-- 提示文字 -->
-			<view class="message-section">
-				<text class="title">暂无项目</text>
-				<text class="subtitle"> 您的计时列表目前是空的。点击下方按钮，开始您的第一次游泳训练记录吧。 </text>
-			</view>
+			<!-- 创建项目模块列表 -->
+			<view class="create-modules">
+				<!-- 计时项目模块 -->
+				<view @click="showTimingProjectModal" class="create-card timing-card">
+					<view class="card-icon">
+						<view class="icon-circle timing-icon">
+							<u-icon name="clock" size="40" color="#fff"></u-icon>
+						</view>
+					</view>
+					<view class="card-info">
+						<text class="card-title">计时项目</text>
+						<text class="card-desc">记录单次训练的计时数据</text>
+					</view>
+					<view class="card-arrow">
+						<u-icon name="arrow-right" size="20" color="#1890ff"></u-icon>
+					</view>
+				</view>
 
-			<!-- 添加项目按钮 -->
-			<view class="action-section">
-				<button class="add-project-btn" @click="addProject">
-					<u-icon name="plus" size="24" color="#fff"></u-icon>
-					<text class="btn-text">添加项目</text>
-				</button>
+				<!-- 包干项目模块 -->
+				<view @click="createPackageProject" class="create-card package-card">
+					<view class="card-icon">
+						<view class="icon-circle package-icon">
+							<u-icon name="grid" size="40" color="#fff"></u-icon>
+						</view>
+					</view>
+					<view class="card-info">
+						<text class="card-title">包干项目</text>
+						<text class="card-desc">记录固定距离的训练成绩</text>
+					</view>
+					<view class="card-arrow">
+						<u-icon name="arrow-right" size="20" color="#1890ff"></u-icon>
+					</view>
+				</view>
+
+				<!-- 分段项目模块 -->
+				<view @click="createSegmentProject" class="create-card segment-card">
+					<view class="card-icon">
+						<view class="icon-circle segment-icon">
+							<u-icon name="list" size="40" color="#fff"></u-icon>
+						</view>
+					</view>
+					<view class="card-info">
+						<text class="card-title">分段项目</text>
+						<text class="card-desc">记录分段训练的详细数据</text>
+					</view>
+					<view class="card-arrow">
+						<u-icon name="arrow-right" size="20" color="#1890ff"></u-icon>
+					</view>
+				</view>
 			</view>
 		</view>
+
+		<!-- 计时项目列表弹窗 -->
+		<view v-if="showTimingModal" class="modal-overlay" @click="closeTimingProjectModal"></view>
+		<view v-if="showTimingModal" class="project-list-modal">
+			<view class="modal-header">
+				<text class="modal-title">计时项目</text>
+				<view class="modal-close" @click="closeTimingProjectModal">
+					<u-icon name="close" size="20" color="#999"></u-icon>
+				</view>
+			</view>
+
+			<view class="modal-content">
+				<!-- 新增按钮 -->
+				<view class="add-btn" @click="createTimingProject">
+					<u-icon name="plus" size="18" color="#1890ff"></u-icon>
+					<text class="add-btn-text">新增项目</text>
+				</view>
+
+				<!-- 项目列表 -->
+				<view class="project-list">
+					<text class="list-title" v-if="projects.length > 0">项目列表</text>
+					<view v-if="projects.length > 0" class="list-container">
+						<view v-for="project in projects" :key="project.id" class="project-item"
+							@click="Service.GoPage('/pages/userFunc/swiming')">
+							<view class="item-icon">
+								<view class="icon-bg">
+									<text class="icon-text">{{ project.name.charAt(0) }}</text>
+								</view>
+							</view>
+							<view class="item-info">
+								<text class="item-name">{{ project.name }}</text>
+								<text class="item-count">{{ project.studentCount }}人</text>
+							</view>
+						</view>
+					</view>
+					<view v-else class="empty-project">
+						<text class="empty-text">暂无项目</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		
 	</view>
 </template>
 
 <script setup lang="ts">
-	import { ref, computed, onMounted, onUnmounted } from 'vue'
+	import { ref, onMounted, onUnmounted } from 'vue'
 	import { Service } from '@/Service/Service'
 
+	// 项目类型
+	interface Project {
+		id : string
+		name : string
+		startType : string // together | interval
+		intervalSeconds : string
+		laneType : string // single | multi
+		laneCount : string
+		lanePersonCount : string
+		studentCount : number
+		students : {
+			id : string
+			name : string
+			gender : string
+			age : string
+		}[]
+	}
+
 	// 模拟项目数据
-	const projects = ref([{}])
+	const projects = ref<Project[]>([
+		{
+			id: '001',
+			name: '自由泳500米',
+			startType: 'together',
+			intervalSeconds: '',
+			laneType: 'multi',
+			laneCount: '4',
+			lanePersonCount: '2',
+			studentCount: 8,
+			students: [
+				{ id: 's1', name: '张三', gender: '男', age: '12' },
+				{ id: 's2', name: '李四', gender: '女', age: '13' },
+				{ id: 's3', name: '王五', gender: '男', age: '11' },
+				{ id: 's4', name: '赵六', gender: '女', age: '12' },
+				{ id: 's5', name: '钱七', gender: '男', age: '14' },
+				{ id: 's6', name: '孙八', gender: '女', age: '10' },
+				{ id: 's7', name: '周九', gender: '男', age: '13' },
+				{ id: 's8', name: '吴十', gender: '女', age: '12' }
+			]
 
-	
+		},
+		{
+			id: '002',
+			name: '蛙泳200米',
+			startType: 'interval',
+			intervalSeconds: '30',
+			laneType: 'single',
+			laneCount: '',
+			lanePersonCount: '',
+			studentCount: 5,
+			students: [
+				{ id: 's1', name: '陈十一', gender: '男', age: '14' },
+				{ id: 's2', name: '林十二', gender: '女', age: '12' },
+				{ id: 's3', name: '黄十三', gender: '男', age: '11' },
+				{ id: 's4', name: '周十四', gender: '女', age: '13' },
+				{ id: 's5', name: '吴十五', gender: '男', age: '10' }
+			]
+		}
+	])
 
-	// 计时器状态
-	const isTimerRunning = ref(true)
-	const timerSeconds = ref(784) // 13分04秒
-	let timerInterval : number | null = null
+	// 弹窗状态
+	const showTimingModal = ref(false)
+	const showDetailModal = ref(false)
+	const currentProject = ref<Project | null>(null)
 
+	// 显示计时项目列表弹窗
+	const showTimingProjectModal = () => {
+		showTimingModal.value = true
+	}
 
-	// 添加项目
-	const addProject = () => {
-		// 这里可以添加导航到项目设置页面的逻辑
-		uni.navigateTo({
-			url: '/pages/userFunc/setCourse',
-		})
+	// 关闭计时项目列表弹窗
+	const closeTimingProjectModal = () => {
+		showTimingModal.value = false
+	}
+
+	// 创建计时项目
+	const createTimingProject = () => {
+		Service.GoPage('/pages/userFunc/setCourse')
+	}
+
+	// 创建包干项目
+	const createPackageProject = () => {
+		Service.GoPage('/pages/userFunc/setCourse')
+	}
+
+	// 创建分段项目
+	const createSegmentProject = () => {
+		Service.GoPage('/pages/userFunc/setCourse')
+	}
+
+	// 显示项目详情
+	const showProjectDetail = (project : Project) => {
+		currentProject.value = project
+		showTimingModal.value = false
+		showDetailModal.value = true
+	}
+
+	// 关闭弹窗
+	const closeDetailModal = () => {
+		showDetailModal.value = false
+		currentProject.value = null
 	}
 
 	// 生命周期
 	onMounted(() => {
-		
+		// TODO: 实际应从接口获取项目列表
 	})
 
 	onUnmounted(() => {
-		if (timerInterval) {
-			clearInterval(timerInterval)
-		}
+		// 清理
 	})
 </script>
 
-<style lang="scss" >
+<style lang="scss" scoped>
 	page {
 		background-color: #f5f5f5;
 	}
@@ -175,289 +241,682 @@
 	/* 计时器卡片 */
 	.timer-card {
 		background-color: #fff;
-		border-radius: 20rpx;
+		border-radius: 24rpx;
 		padding: 30rpx;
 		margin-bottom: 20rpx;
-		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+
+		.timer-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 30rpx;
+
+			.timer-title {
+				font-size: 32rpx;
+				font-weight: 700;
+				color: #333;
+			}
+
+			.task-count {
+				font-size: 24rpx;
+				color: #999;
+				font-weight: 500;
+			}
+		}
+
+		.timer-content {
+			display: flex;
+			align-items: center;
+			gap: 30rpx;
+
+			&:active {
+				transform: scale(0.98);
+			}
+		}
+
+		.timer-circle {
+			position: relative;
+		}
+
+		.circle-progress {
+			width: 120rpx;
+			height: 120rpx;
+			position: relative;
+		}
+
+		.progress-ring {
+			width: 100%;
+			height: 100%;
+			border-radius: 50%;
+			background: conic-gradient(#1890ff 0deg, #40a9ff 360deg, #1890ff 100%);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			animation: progress 1.5s ease-in-out infinite;
+		}
+
+		.ring-inner {
+			width: 85%;
+			height: 85%;
+			background: radial-gradient(circle, #fff 30%, transparent 70%);
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.15);
+			transition: all 0.3s ease;
+
+			&:active {
+				transform: scale(0.95);
+			}
+		}
 	}
 
-	.timer-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 30rpx;
+	@keyframes progress {
+		0% {
+			background: #40a9ff;
+		}
 
-		.timer-title {
+		100% {
+			background: #1890ff;
+		}
+	}
+
+
+	.timer-info {
+		flex: 1;
+
+		.timer-name {
 			font-size: 28rpx;
 			font-weight: 600;
 			color: #333;
+			margin-bottom: 8rpx;
+			display: block;
 		}
 
-		.task-count {
+		.timer-time {
 			font-size: 24rpx;
 			color: #666;
 		}
 	}
 
-	.timer-content {
-		display: flex;
-		align-items: center;
-		gap: 30rpx;
-	}
-
-	.timer-circle {
-		position: relative;
-	}
-
-	.circle-progress {
-		width: 120rpx;
-		height: 120rpx;
-		position: relative;
-	}
-
-	.progress-ring {
-		width: 100%;
-		height: 100%;
-		border-radius: 50%;
-		background: conic-gradient(#1890ff 0deg, #e6f7ff 0deg);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.ring-inner {
-		width: 90rpx;
-		height: 90rpx;
-		background-color: #fff;
-		border-radius: 50%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.timer-info {
-		flex: 1;
-	}
-
-	.timer-name {
-		font-size: 28rpx;
-		font-weight: 600;
-		color: #333;
-		margin-bottom: 10rpx;
-		display: block;
-	}
-
-	.timer-time {
-		font-size: 40rpx;
-		font-weight: 700;
-		color: #333;
-		margin-bottom: 10rpx;
-		display: block;
-	}
-
-	.timer-status {
-		display: flex;
-		align-items: center;
-		gap: 8rpx;
-	}
-
-	.status-dot {
-		width: 12rpx;
-		height: 12rpx;
-		border-radius: 50%;
-	}
-
-	.status-dot.running {
-		background-color: #52c41a;
-	}
-
-	.status-dot.paused {
-		background-color: #faad14;
-	}
-
-	.status-dot.waiting {
-		background-color: #999;
-	}
-
-	.status-text {
-		font-size: 22rpx;
-		color: #666;
-	}
-
-	.timer-control {
-		padding-left: 20rpx;
-	}
-
-	/* 日常习惯区域 */
-	.routine-section {
-		background-color: #fff;
-		border-radius: 20rpx;
-		padding: 30rpx;
-		margin-bottom: 20rpx;
-		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
-	}
-
-	.routine-title {
-		font-size: 20rpx;
-		color: #999;
-		margin-bottom: 10rpx;
-		display: block;
-	}
-
-	.habit-title {
-		font-size: 28rpx;
-		font-weight: 600;
-		color: #333;
-		margin-bottom: 5rpx;
-		display: block;
-	}
-
-	.habit-count {
-		font-size: 24rpx;
-		color: #666;
-		margin-bottom: 30rpx;
-		display: block;
-	}
-
-	.habit-list {
-		space-y: 20rpx;
-	}
-
-	.habit-item {
-		display: flex;
-		align-items: center;
-		gap: 20rpx;
-		padding: 20rpx 0;
-		border-bottom: 1rpx solid #f0f0f0;
-	}
-
-	.habit-item:last-child {
-		border-bottom: none;
-	}
-
-	.habit-icon {
-		width: 80rpx;
-		height: 80rpx;
-		background-color: #f5f5f5;
-		border-radius: 16rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.habit-info {
-		flex: 1;
-	}
-
-	.habit-name {
-		font-size: 26rpx;
-		font-weight: 500;
-		color: #333;
-		margin-bottom: 5rpx;
-		display: block;
-	}
-
-	.habit-time {
-		font-size: 32rpx;
-		font-weight: 600;
-		color: #333;
-		display: block;
-	}
-
-	.habit-control {
-		padding-right: 20rpx;
-	}
-
-	.habit-status {
-		display: flex;
-		align-items: center;
-		gap: 8rpx;
-	}
-
-
 
 	/* 空状态 */
 	.empty-state-container {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		padding: 60rpx 40rpx;
-		position: relative;
+		padding: 40rpx 20rpx;
 	}
 
-	/* 顶部计时器图标 */
-	.timer-icon {
-		width: 80rpx;
-		height: 80rpx;
-		background-color: #fff;
-		border-radius: 20rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-		z-index: 10;
-	}
-
-	/* 主卡片 */
-	.main-card {
-		width: 320rpx;
-		height: 320rpx;
-		background-color: #fff;
-		border-radius: 24rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-		margin-bottom: 60rpx;
-		position: relative;
-	}
-
-	/* 提示文字 */
-	.message-section {
+	/* 标题区域 */
+	.title-section {
 		text-align: center;
-		margin-bottom: 80rpx;
+		margin-bottom: 60rpx;
 
-		.title {
-			font-size: 36rpx;
-			font-weight: 600;
+		.main-title {
+			font-size: 42rpx;
+			font-weight: 700;
 			color: #333;
-			margin-bottom: 20rpx;
 			display: block;
+			margin-bottom: 16rpx;
 		}
 
-		.subtitle {
+		.sub-title {
 			font-size: 26rpx;
-			color: #666;
-			line-height: 1.5;
-			padding: 0 20rpx;
+			color: #999;
+			line-height: 1.6;
 		}
 	}
 
-	/* 添加项目按钮 */
-	.action-section {
+	/* 创建项目模块列表 */
+	.create-modules {
 		width: 100%;
 		max-width: 600rpx;
+		display: flex;
+		flex-direction: column;
+		gap: 20rpx;
+	}
 
-		.add-project-btn {
-			width: 100%;
-			height: 88rpx;
-			background-color: #1890ff;
-			color: #fff;
-			font-size: 32rpx;
-			font-weight: 600;
-			border-radius: 12rpx;
-			border: none;
+	/* 创建项目卡片 */
+	.create-card {
+		background-color: #fff;
+		border-radius: 24rpx;
+		padding: 32rpx 28rpx;
+		display: flex;
+		align-items: center;
+		gap: 30rpx;
+		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+		position: relative;
+		overflow: hidden;
+		transition: all 0.3s ease;
+
+		&:active {
+			transform: scale(0.98);
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+		}
+
+		.card-icon {
+			flex-shrink: 0;
+			margin-right: 24rpx;
+		}
+
+		.icon-circle {
+			width: 96rpx;
+			height: 96rpx;
+			border-radius: 22rpx;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			gap: 12rpx;
-			box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
+			box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
+			transition: all 0.3s ease;
+			position: relative;
+			overflow: hidden;
 
-			.btn-text {
-				font-size: 32rpx;
-				color: #fff;
+			&:active {
+				transform: scale(0.9);
+			}
+
+			/* 计时图标 - 蓝色渐变 */
+			&.timing-icon {
+				background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
+			}
+
+			/* 包干图标 - 橙色渐变 */
+			&.package-icon {
+				background: linear-gradient(135deg, #faad14 0%, #ffc53d 50%, #d48806 100%);
+			}
+
+			/* 分段图标 - 绿色渐变 */
+			&.segment-icon {
+				background: linear-gradient(135deg, #52c41a 0%, #73d13d 50%, #389e0d 100%);
+			}
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			top: 6rpx;
+			right: 6rpx;
+			width: 18rpx;
+			height: 18rpx;
+			background: rgba(255, 255, 255, 0.3);
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+
+
+	.card-info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.card-title {
+		font-size: 32rpx;
+		font-weight: 600;
+		color: #333;
+		margin-bottom: 8rpx;
+	}
+
+	.card-desc {
+		font-size: 24rpx;
+		color: #999;
+		line-height: 1.4;
+	}
+
+	
+
+	.card-arrow {
+		flex-shrink: 0;
+		width: 56rpx;
+		height: 56rpx;
+		border-radius: 50%;
+		background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(24, 144, 255, 0.05) 100%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.3s ease;
+
+		&:active {
+			transform: scale(1.1);
+		}
+	}
+
+
+	/* 弹窗通用通用样式 */
+	.modal-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%);
+		backdrop-filter: blur(10rpx);
+		z-index: 998;
+		animation: fadeIn 0.3s ease;
+	}
+
+	.modal-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 36rpx 32rpx 28rpx;
+		background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
+		border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
+
+		.modal-title {
+			font-size: 36rpx;
+			font-weight: 700;
+			background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+			background-clip: text;
+		}
+
+		.modal-close {
+			width: 60rpx;
+			height: 60rpx;
+			border-radius: 50%;
+			background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+
+			&:active {
+				background: linear-gradient(135deg, #e8e8e8 0%, #e0e0e0 100%);
+				transform: scale(0.92);
 			}
 		}
 	}
+
+	
+
+	/* 计时项目列表弹窗 */
+	.project-list-modal {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 90%;
+		max-width: 680rpx;
+		max-height: 80vh;
+		background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
+		border-radius: 32rpx;
+		z-index: 999;
+		animation: slideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+		box-shadow: 0 24rpx 80rpx rgba(0, 0, 0, 0.25), 0 0 0 1rpx rgba(0, 0, 0, 0.04);
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.modal-content {
+		flex: 1;
+		padding: 24rpx 28rpx;
+		overflow-y: auto;
+	}
+
+	/* 新增按钮 */
+	.add-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 16rpx;
+		width: 100%;
+		height: 96rpx;
+		background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #36cfc9 100%);
+		background-size: 200% 200%;
+		border-radius: 20rpx;
+		margin-bottom: 36rpx;
+		box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.35), 0 0 0 1rpx rgba(255, 255, 255, 0.5) inset;
+		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		position: relative;
+		overflow: hidden;
+
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: -100%;
+			width: 100%;
+			height: 100%;
+			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+			animation: shimmer 2s infinite;
+		}
+
+		&:active {
+			transform: scale(0.97);
+			box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.25);
+		}
+
+		.add-btn-text {
+			font-size: 32rpx;
+			color: #fff;
+			font-weight: 600;
+			letter-spacing: 2rpx;
+			position: relative;
+			z-index: 1;
+		}
+	}
+
+	/* 项目列表 */
+	.project-list {
+		margin-bottom: 20rpx;
+
+		.list-title {
+			font-size: 30rpx;
+			font-weight: 700;
+			color: #333;
+			display: block;
+			margin-bottom: 24rpx;
+			padding-left: 12rpx;
+			border-left: 4rpx solid #1890ff;
+			background: linear-gradient(90deg, rgba(24, 144, 255, 0.05) 0%, transparent 100%);
+			padding: 8rpx 12rpx;
+			border-radius: 0 8rpx 8rpx 0;
+		}
+
+		.list-container {
+			display: flex;
+			flex-direction: column;
+			gap: 16rpx;
+		}
+
+		.project-item {
+			display: flex;
+			align-items: center;
+			gap: 20rpx;
+			padding: 28rpx 24rpx;
+			background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
+			border-radius: 20rpx;
+			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06), 0 0 0 1rpx rgba(0, 0, 0, 0.04) inset;
+			position: relative;
+			overflow: hidden;
+
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 4rpx;
+				height: 100%;
+				background: linear-gradient(180deg, #1890ff 0%, #40a9ff 100%);
+				opacity: 0;
+				transition: opacity 0.3s ease;
+			}
+
+
+			.item-icon {
+				flex-shrink: 0;
+
+				.icon-bg {
+					width: 72rpx;
+					height: 72rpx;
+					background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #36cfc9 100%);
+					border-radius: 16rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.25);
+					position: relative;
+
+					&::before {
+						content: '';
+						position: absolute;
+						top: 8rpx;
+						right: 8rpx;
+						width: 12rpx;
+						height: 12rpx;
+						background: rgba(255, 255, 255, 0.3);
+						border-radius: 50%;
+					}
+
+					.icon-text {
+						font-size: 34rpx;
+						color: #fff;
+						font-weight: 700;
+						letter-spacing: 2rpx;
+					}
+				}
+			}
+
+			.item-info {
+				flex: 1;
+				min-width: 0;
+				display: flex;
+				flex-direction: column;
+				gap: 8rpx;
+
+				.item-name {
+					font-size: 30rpx;
+					font-weight: 600;
+					color: #333;
+					letter-spacing: 1rpx;
+				}
+
+				.item-count {
+					font-size: 24rpx;
+					color: #999;
+					font-weight: 500;
+				}
+			}
+
+			.item-arrow {
+				flex-shrink: 0;
+				width: 52rpx;
+				height: 52rpx;
+				border-radius: 50%;
+				background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(64, 169, 255, 0.05) 100%);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				transition: all 0.3s ease;
+			}
+		}
+
+		.empty-project {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			padding: 100rpx 20rpx;
+			gap: 16rpx;
+
+			.empty-text {
+				font-size: 28rpx;
+				color: #999;
+				font-weight: 500;
+			}
+
+			&::before {
+				content: '';
+				width: 120rpx;
+				height: 120rpx;
+				background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(64, 169, 255, 0.03) 100%);
+				border-radius: 28rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-bottom: 8rpx;
+			}
+		}
+	}
+
+	/* 项目详情弹窗 */
+	.project-detail-modal {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 90%;
+		max-width: 680rpx;
+		max-height: 80vh;
+		background-color: #fff;
+		border-radius: 28rpx;
+		z-index: 999;
+		animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.detail-section {
+		padding: 24rpx 0;
+		margin-bottom: 24rpx;
+
+		.detail-title {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #666;
+			margin-bottom: 16rpx;
+			display: block;
+			padding-left: 8rpx;
+			border-left: 3rpx solid #1890ff;
+		}
+
+		.detail-item {
+			display: flex;
+			align-items: center;
+			margin-bottom: 16rpx;
+
+			.detail-label {
+				font-size: 26rpx;
+				color: #666;
+				min-width: 100rpx;
+			}
+
+			.detail-value {
+				font-size: 28rpx;
+				color: #333;
+				font-weight: 500;
+				flex: 1;
+			}
+		}
+	}
+
+	.detail-count {
+		font-size: 24rpx;
+		color: #999;
+		margin-bottom: 16rpx;
+		display: block;
+	}
+
+
+	.student-scroll {
+		max-height: 400rpx;
+		overflow-y: auto;
+
+		.student-item {
+			display: flex;
+			align-items: center;
+			gap: 16rpx;
+			padding: 16rpx 20rpx;
+			background-color: #f5f5f5;
+			border-radius: 16rpx;
+			margin-bottom: 12rpx;
+
+			.student-index {
+				width: 48rpx;
+				height: 48rpx;
+				background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+				color: #fff;
+				border-radius: 50%;
+				font-size: 22rpx;
+				font-weight: 600;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+			}
+
+			.student-avatar {
+				width: 56rpx;
+				height: 56rpx;
+				background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
+				border-radius: 14rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+
+				.avatar-text {
+					color: #fff;
+					font-size: 26rpx;
+					font-weight: 700;
+				}
+			}
+
+			.student-info {
+				flex: 1;
+				min-width: 0;
+				gap: 8rpx;
+			}
+
+			.student-name {
+				font-size: 26rpx;
+				font-weight: 600;
+				color: #333;
+			}
+
+			.student-meta {
+				display: flex;
+				align-items: center;
+				gap: 12rpx;
+
+				.gender-badge {
+					font-size: 22rpx;
+					padding: 4rpx 10rpx;
+					border-radius: 8rpx;
+					font-weight: 500;
+
+					&.male {
+						color: #1890ff;
+						background-color: #e6f7ff;
+					}
+
+					&.female {
+						color: #fa8c16;
+						background-color: #fff7e6;
+					}
+				}
+
+				.age-text {
+					font-size: 22rpx;
+					color: #999;
+				}
+			}
+		}
+	}
+
+
+	/* 动画 */
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slideUp {
+		from {
+			opacity: 0;
+			transform: translate(-50%, -45%);
+		}
+
+		to {
+			opacity: 1;
+			transform: translate(-50%, -50%);
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/src/pages/index/user.vue b/src/pages/index/user.vue
index 0718fe2..40ea2de 100644
--- a/src/pages/index/user.vue
+++ b/src/pages/index/user.vue
@@ -152,37 +152,36 @@
 
 	/* 用户信息卡片 */
 	.user-card {
-		background: linear-gradient(135deg, #1890ff 0%, #36cfc9 50%, #096dd9 100%);
+		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
 		border-radius: 28rpx;
 		padding: 40rpx 30rpx;
 		margin-bottom: 24rpx;
 		display: flex;
 		align-items: center;
 		gap: 20rpx;
-		box-shadow: 0 12rpx 32rpx rgba(24, 144, 255, 0.35),
-			0 4rpx 12rpx rgba(24, 144, 255, 0.2);
+		box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.25);
 		position: relative;
 		overflow: hidden;
 
 		&::before {
 			content: '';
 			position: absolute;
-			top: -60%;
-			right: -40%;
-			width: 400rpx;
-			height: 400rpx;
-			background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
+			top: -40%;
+			right: -30%;
+			width: 300rpx;
+			height: 300rpx;
+			background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
 			pointer-events: none;
 		}
 
 		&::after {
 			content: '';
 			position: absolute;
-			bottom: -40%;
+			bottom: -30%;
 			left: -20%;
-			width: 300rpx;
-			height: 300rpx;
-			background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
+			width: 250rpx;
+			height: 250rpx;
+			background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
 			pointer-events: none;
 		}
 	}
diff --git a/src/pages/userFunc/analyze.vue b/src/pages/userFunc/analyze.vue
index d0b231c..b7a04c2 100644
--- a/src/pages/userFunc/analyze.vue
+++ b/src/pages/userFunc/analyze.vue
@@ -55,7 +55,7 @@
 			</view>
 
 			<!-- 分段数据 -->
-			<view class="function-card segment-card" @click="goToSegment">
+			<view class="function-card segment-card" @click="Service.GoPage('/pages/dataAnalyze/paragraphAnalyze')">
 				<view class="card-icon segment-icon">
 					<u-icon name="list" size="36" color="#fff"></u-icon>
 				</view>
diff --git a/src/pages/userFunc/setCourse.vue b/src/pages/userFunc/setCourse.vue
index dfeeedc..f1c62c6 100644
--- a/src/pages/userFunc/setCourse.vue
+++ b/src/pages/userFunc/setCourse.vue
@@ -1,542 +1,352 @@
 <template>
-	<view class="set-course-container">
-		<!-- 项目信息 -->
-		<view class="card-section">
-			<view class="section-title">项目信息</view>
-
-			<!-- 项目名称输入 -->
-			<view class="form-item">
-				<view class="form-label">项目名称</view>
-				<input class="form-input" v-model="tempProjectName" placeholder="请输入项目名称（如：自由泳50米）" type="text" />
-			</view>
-
-			<!-- 模块选择 -->
-			<view class="form-item">
-				<view class="form-label">模块类型</view>
-				<view class="select-wrapper" @click="showModulePicker = true">
-					<text class="select-value"
-						:class="{ placeholder: !selectedModule }">{{ selectedModule || '请选择模块类型' }}</text>
-					<u-icon name="arrow-down" size="16" color="#999"></u-icon>
+	<view class="course-container">
+		<!-- 表单区域 -->
+		<view class="form-section">
+			<!-- 项目名称 -->
+			<view class="form-card">
+				<view class="form-title">项目信息</view>
+				<view class="form-group">
+					<text class="form-label">项目名称</text>
+					<input class="form-input" v-model="courseData.projectName" placeholder="请输入项目名称"
+						placeholder-class="input-placeholder" />
 				</view>
 			</view>
-			<!-- 段数输入（仅在选择分段模块时显示） -->
-			<view v-if="selectedModule === '分段'" class="form-item">
-				<view class="form-label">段数</view>
-				<input class="form-input" v-model="segmentCount" placeholder="请输入段数" type="number" />
-			</view>
-			<!-- 秒表模式（） -->
-			<view class="form-item">
-				<view class="form-label">秒表模式</view>
+
+			<!-- 出发方式 -->
+			<view class="form-card">
+				<view class="form-title">出发方式</view>
 				<view class="radio-group">
-					<view class="radio-item" :class="{ active: stopwatchMode === 'interval' }"
-						@click="stopwatchMode = 'interval'">
-						<view class="radio-circle">
-							<view v-if="stopwatchMode === 'interval'" class="radio-dot"></view>
+					<view class="radio-item" :class="{ active: courseData.startType === 'together' }"
+						@click="courseData.startType = 'together'">
+						<view class="radio-icon">
+							<view v-if="courseData.startType === 'together'" class="radio-inner"></view>
 						</view>
-						<text class="radio-label">间隔出发</text>
+						<text>一起出发</text>
 					</view>
-					<view class="radio-item" :class="{ active: stopwatchMode === 'together' }"
-						@click="stopwatchMode = 'together'">
-						<view class="radio-circle">
-							<view v-if="stopwatchMode === 'together'" class="radio-dot"></view>
+					<view class="radio-item" :class="{ active: courseData.startType === 'interval' }"
+						@click="courseData.startType = 'interval'">
+						<view class="radio-icon">
+							<view v-if="courseData.startType === 'interval'" class="radio-inner"></view>
 						</view>
-						<text class="radio-label">一起出发</text>
+						<text>间隔出发</text>
+					</view>
+				</view>
+				<view v-if="courseData.startType === 'interval'" class="interval-input-wrapper">
+					<text class="interval-label">间隔时间</text>
+					<view class="interval-input">
+						<input class="number-input" v-model="courseData.intervalSeconds" type="digit"
+							placeholder="请输入秒数" />
+						<text class="unit-text">秒</text>
 					</view>
 				</view>
 			</view>
 
-			<!-- 间隔时间输入 -->
-			<view v-if=" stopwatchMode === 'interval'" class="form-item">
-				<view class="form-label">间隔时间（秒）</view>
-				<input class="form-input" v-model="intervalTime" placeholder="请输入间隔时间" type="number" />
-			</view>
-
-
-		</view>
-
-		<!-- 计时器区域 -->
-		<view class="card-section timer-section" @click="showTimePicker = true">
-			<view class="timer-display">
-				<view class="timer-text">{{ hours<10?('0'+hours):hours }}:{{ minutes<10?('0'+minutes):minutes  }}</view>
-				<text class="timer-milliseconds">:{{  seconds<10?('0'+seconds):seconds  }}</text>
-			</view>
-			<view class="timer-hint">点击设置时间</view>
-		</view>
-
-		<!-- 学生列表 -->
-		<view class="card-section">
-			<view class="section-header">
-				<text class="section-title">学生列表</text>
-				<view class="header-actions">
-					<view class="select-all" @click="toggleSelectAll">
-						<view class="checkbox" :class="{ checked: isAllSelected }">
-							<u-icon v-if="isAllSelected" name="checkmark" size="14" color="#fff"></u-icon>
+			<!-- 泳道设置 -->
+			<view class="form-card">
+				<view class="form-title">泳道设置</view>
+				<view class="radio-group">
+					<view class="radio-item" :class="{ active: courseData.laneType === 'single' }"
+						@click="selectSingleLane">
+						<view class="radio-icon">
+							<view v-if="courseData.laneType === 'single'" class="radio-inner"></view>
 						</view>
-						<text class="select-text">全选</text>
+						<text>一个泳道</text>
 					</view>
-					<view v-if="tempSelectedStudents.length > 0" class="delete-selected"
-						@click="deleteSelectedStudents">
-						<u-icon name="trash" size="18" color="#ff4444"></u-icon>
-						<text class="delete-text">删除({{ tempSelectedStudents.length }})</text>
+					<view class="radio-item" :class="{ active: courseData.laneType === 'multi' }"
+						@click="selectMultiLane">
+						<view class="radio-icon">
+							<view v-if="courseData.laneType === 'multi'" class="radio-inner"></view>
+						</view>
+						<text>多个泳道</text>
+					</view>
+				</view>
+				<view v-if="courseData.laneType === 'multi'" class="multi-lane-options">
+					<view class="lane-input-wrapper">
+						<text class="lane-label">泳道个数</text>
+						<view class="lane-input">
+							<input class="number-input" v-model="courseData.laneCount" type="number"
+								placeholder="请输入泳道个数" />
+							<text class="unit-text">个</text>
+						</view>
+					</view>
+					<view class="person-input-wrapper">
+						<text class="person-label">一个泳道人数</text>
+						<view class="person-input">
+							<input class="number-input" v-model="courseData.lanePersonCount" type="number"
+								placeholder="请输入人数" />
+							<text class="unit-text">人</text>
+						</view>
 					</view>
 				</view>
 			</view>
 
-			<view class="students-list">
-				<up-dragsort :key="dragSortKey" :initialList="tempStudents" direction="vertical"
-					@drag-end="handleDragEnd">
-					<template #default="{ item, index }">
-						<view class="student-item" :class="{ selected: item.selected }">
-							<view class="student-info" @click.stop="toggleStudent(item)">
-								<text class="student-index">{{ index + 1 }}</text>
-								<text class="student-name">{{ item.name }}</text>
+			<!-- 学生列表 -->
+			<view class="form-card">
+				<view class="student-header">
+					<view class="header-left">
+						<text class="form-title">选择学生</text>
+						<text class="student-count">已选({{ selectedStudentIds.length }}/{{ allStudents.length }})</text>
+					</view>
+					<view class="header-actions">
+						<view class="select-all-btn" @click="toggleSelectAll">
+							<view class="checkbox-icon" :class="{ checked: allSelected }">
+								<u-icon v-if="allSelected" name="checkmark" size="14" color="#fff"></u-icon>
 							</view>
-							<view class="lane-input-wrapper" @click.stop="openLanePicker(item)">
-								<view class="lane-select" :class="{ placeholder: !item.lane }">
-									{{ item.lane || '选择泳道' }}
-								</view>
-								<u-icon name="arrow-down" size="14" color="#999"></u-icon>
-							</view>
-							<view v-if="selectedModule === '包干'" class="laps-input-wrapper">
-								<input class="laps-input" v-model="item.laps" placeholder="圈数" type="number"
-									@click.stop />
-							</view>
-							<view class="student-actions">
-								<view class="action-icon delete" @click.stop="deleteStudent(item.id)">
-									<u-icon name="trash" size="18" color="#ff4444"></u-icon>
-								</view>
+							<text class="select-all-text">{{ allSelected ? '取消全选' : '全选' }}</text>
+						</view>
+					</view>
+				</view>
+
+				<view v-if="loading" class="loading-state">
+					<view class="loading-spinner"></view>
+					<text class="loading-text">加载中...</text>
+				</view>
+
+				<view v-else-if="allStudents.length === 0" class="empty-student-state">
+					<view class="empty-icon">
+						<u-icon name="account" size="48" color="#ddd"></u-icon>
+					</view>
+					<text class="empty-text">暂无学生</text>
+					<text class="empty-desc">请先在学员管理中添加学生</text>
+				</view>
+
+				<view v-else class="student-list">
+					<view v-for="student in allStudents" :key="student.id" class="student-item"
+						:class="{ checked: selectedStudentIds.includes(student.id) }"
+						@click="toggleStudentSelect(student.id)">
+						<view class="student-checkbox" :class="{ checked: selectedStudentIds.includes(student.id) }">
+							<u-icon v-if="selectedStudentIds.includes(student.id)" name="checkmark" size="14"
+								color="#fff"></u-icon>
+						</view>
+						<view class="student-avatar">
+							<text class="avatar-text">{{ student.name.charAt(0) }}</text>
+						</view>
+						<view class="student-info">
+							<view class="student-name">{{ student.name }}</view>
+							<view class="student-meta">
+								<text class="gender-badge" :class="student.gender === '男' ? 'male' : 'female'">
+									{{ student.gender }}
+								</text>
+								<text class="age-text">{{ student.age }}岁</text>
 							</view>
 						</view>
-					</template>
-				</up-dragsort>
-			</view>
+					</view>
+				</view>
 
-			<!-- 添加学生 -->
-			<view class="add-student-wrapper">
-				<input class="add-student-input" v-model="newStudentName" placeholder="输入学生姓名" type="text"
-					@confirm="addStudent" />
-				<button class="add-student-btn" @click="addStudent">
-					<u-icon name="plus" size="20" color="#fff"></u-icon>
-				</button>
+				<!-- 已选学生预览 -->
+				<view v-if="selectedStudents.length > 0" class="selected-preview">
+					<view class="preview-header">
+						<text class="preview-title">已选学生</text>
+					</view>
+					<view class="preview-list">
+						<view v-for="(student, index) in selectedStudents" :key="student.id" class="preview-item">
+							<text class="preview-index">{{ index + 1 }}</text>
+							<text class="preview-name">{{ student.name }}</text>
+							<view class="preview-remove" @click.stop="removeSelectedStudent(student.id)">
+								<u-icon name="close" size="14" color="#ff4d4f"></u-icon>
+							</view>
+						</view>
+					</view>
+				</view>
 			</view>
 		</view>
 
-		<!-- 底部按钮 -->
-		<view class="bottom-section">
-			<button class="submit-btn" @click="recordTime"
-				:disabled="tempSelectedStudents.length === 0 || !tempProjectName.trim() || !selectedModule">新增项目</button>
+		<!-- 底部按钮区域 -->
+		<view class="bottom-actions">
+			<view class="action-buttons">
+				<button class="confirm-btn" @click="confirmCreate()">保存项目</button>
+			</view>
 		</view>
-
-		<!-- 模块选择器 -->
-		<u-picker :show="showModulePicker" :columns="moduleColumns" @confirm="onModuleConfirm"
-			@cancel="showModulePicker = false"></u-picker>
-
-		<!-- 时间选择器 -->
-		<u-picker :show="showTimePicker" :columns="timeColumns" @confirm="onTimeConfirm"
-			@cancel="showTimePicker = false"></u-picker>
-
-		<!-- 泳道选择器 -->
-		<u-picker :show="showLanePicker" :columns="laneOptions" @confirm="onLaneConfirm"
-			@cancel="closeLanePicker"></u-picker>
 	</view>
 </template>
 
 <script setup lang="ts">
-	import { ref, computed, onUnmounted, onMounted, nextTick } from 'vue'
+	import { ref, computed } from 'vue'
 	import { Service } from '@/Service/Service'
+	import { onLoad } from '@dcloudio/uni-app'
 
-	// 定义学生类型
+	// 学生类型
 	interface Student {
 		id : string
 		name : string
-		selected : boolean
-		recordTime : string
-		lane : string
-		laps : string
+		gender : string
+		age : string
+		school ?: string
+		address ?: string
 	}
 
-	// 定义成绩记录类型
-	interface Record {
-		projectName : string
-		moduleType : string
-		stopwatchMode ?: string
-		intervalTime ?: string
-		segmentCount ?: string
-		date : string
-		students : {
-			id : string
-			name : string
-			time : string
-			laps ?: string
-		}[]
-	}
+	// 课程数据
+	const courseData = ref({
+		projectName: '',
+		startType: 'together', // together | interval
+		intervalSeconds: '',
+		laneType: 'single', // single | multi
+		laneCount: '',
+		lanePersonCount: ''
+	})
 
-	// 用于强制更新拖拽组件的 key
-	const dragSortKey = ref(0)
+	// 所有学生列表
+	const allStudents = ref<Student[]>([])
 
-	// 模块选择相关
-	const showModulePicker = ref(false)
-	const selectedModule = ref('')
-	const moduleColumns = ref([
-		[{ text: '计时', value: '计时' },
-		{ text: '包干', value: '包干' },
-		{ text: '分段', value: '分段' }]
-	])
+	// 已选学生ID列表
+	const selectedStudentIds = ref<string[]>([])
 
-	let hours = ref('0')
-	let minutes = ref('0')
-	let seconds = ref('0')
+	// 加载状态
+	const loading = ref(false)
 
-	// 秒表模式
-	const stopwatchMode = ref<'interval' | 'together'>('interval')
-	// 间隔时间（秒）
-	const intervalTime = ref('')
-	// 段数
-	const segmentCount = ref('')
+	onLoad(() => {
+		getStudentList()
+	})
 
-	// 项目名称
-	const projectName = ref('')
+	// 是否全选
+	const allSelected = computed(() => {
+		return allStudents.value.length > 0 && allStudents.value.every(s => selectedStudentIds.value.includes(s.id))
+	})
 
-	// 临时项目名称
-	const tempProjectName = ref('')
-
-	// 新学生姓名
-	const newStudentName = ref('')
-
-	// 学生列表
-	const students = ref<Student[]>([
-		{ id: '1', name: '张三', selected: false, recordTime: '', lane: '', laps: '' },
-		{ id: '2', name: '李四', selected: false, recordTime: '', lane: '', laps: '' },
-		{ id: '3', name: '王五', selected: false, recordTime: '', lane: '', laps: '' },
-		{ id: '4', name: '赵六', selected: false, recordTime: '', lane: '', laps: '' },
-	])
-
-	// 临时学生列表
-	const tempStudents = ref<Student[]>([])
-
-	// 成绩记录
-	const records = ref<Record[]>([])
-
-	// 计时器状态
-	const isRunning = ref(false)
-	const currentTime = ref(0)
-
-	let timerInterval : number | null = null
-	let startTime : number = 0
-
-	// 模块选择确认
-	const onModuleConfirm = (e : any) => {
-		selectedModule.value = e.value[0].text
-		showModulePicker.value = false
-	}
-
-	// 泳道选择相关
-	const showLanePicker = ref(false)
-	const currentEditStudent = ref<Student | null>(null)
-	const laneOptions = ref([
-		[{ text: '泳道1', value: '泳道1' },
-		{ text: '泳道2', value: '泳道2' }]
-	])
-
-	// 时间选择相关
-	const showTimePicker = ref(false)
-	const timeColumns = ref([
-		// 小时：0-99
-		Array.from({ length: 100 }, (_, i) => ({ text: `${i.toString().padStart(2, '0')}时`, value: i })),
-		// 分钟：0-59
-		Array.from({ length: 60 }, (_, i) => ({ text: `${i.toString().padStart(2, '0')}分`, value: i })),
-		// 秒：0-59
-		Array.from({ length: 60 }, (_, i) => ({ text: `${i.toString().padStart(2, '0')}秒`, value: i }))
-	])
-
-	// 计算属性：选中的学生
+	// 已选学生列表（按选择顺序排序）
 	const selectedStudents = computed(() => {
-		return students.value.filter((s) => s.selected)
+		return selectedStudentIds.value
+			.map(id => allStudents.value.find(s => s.id === id))
+			.filter((s) : s is Student => s !== undefined)
 	})
 
-	// 计算属性：临时选中的学生
-	const tempSelectedStudents = computed(() => {
-		return tempStudents.value.filter((s) => s.selected)
-	})
-
-	// 计算属性：是否全选
-	const isAllSelected = computed(() => {
-		return tempStudents.value.length > 0 && tempStudents.value.every((s) => s.selected)
-	})
-
-	// 打开泳道选择器
-	const openLanePicker = (student : Student) => {
-		currentEditStudent.value = student
-		showLanePicker.value = true
+	// 选择单泳道
+	const selectSingleLane = () => {
+		courseData.value.laneType = 'single'
 	}
 
-	// 关闭泳道选择器
-	const closeLanePicker = () => {
-		showLanePicker.value = false
-		currentEditStudent.value = null
+	// 选择多泳道
+	const selectMultiLane = () => {
+		courseData.value.laneType = 'multi'
 	}
 
-	// 泳道选择确认
-	const onLaneConfirm = (e : any) => {
-		if (currentEditStudent.value) {
-			currentEditStudent.value.lane = e.value[0].text
+	// 获取学生列表（模拟接口）
+	const getStudentList = async () => {
+		loading.value = true
+		try {
+			// TODO: 实际项目中应从接口获取
+			// const res = await Service.Request('/api/students', 'GET', {})
+			// allStudents.value = res.data
+
+			// 模拟接口延迟
+			await new Promise(resolve => setTimeout(resolve, 500))
+
+			// 假数据
+			allStudents.value = [
+				{ id: '001', name: '张三', gender: '男', age: '12', school: '第一小学' },
+				{ id: '002', name: '李四', gender: '女', age: '13', school: '第二小学' },
+				{ id: '003', name: '王五', gender: '男', age: '11', school: '第一小学' },
+				{ id: '004', name: '赵六', gender: '女', age: '12', school: '第三小学' },
+				{ id: '005', name: '钱七', gender: '男', age: '14', school: '第二小学' },
+				{ id: '006', name: '孙八', gender: '女', age: '10', school: '第一小学' },
+				{ id: '007', name: '周九', gender: '男', age: '13', school: '第四小学' },
+				{ id: '008', name: '吴十', gender: '女', age: '12', school: '第二小学' }
+			]
+		} catch (error) {
+			Service.Msg('获取学生列表失败')
+			console.error(error)
+		} finally {
+			loading.value = false
 		}
-		closeLanePicker()
 	}
 
-	// 时间选择确认
-	const onTimeConfirm = (e : any) => {
-		console.log(e.value);
-		hours.value = e.value[0].value
-		minutes.value = e.value[1].value
-		seconds.value = e.value[2].value
-		currentTime.value = Number(hours.value) * 3600 + Number(minutes.value) * 60 + Number(seconds.value)
-		showTimePicker.value = false
+	// 切换学生选中状态
+	const toggleStudentSelect = (id : string) => {
+		const index = selectedStudentIds.value.indexOf(id)
+		if (index > -1) {
+			selectedStudentIds.value.splice(index, 1)
+		} else {
+			selectedStudentIds.value.push(id)
+		}
 	}
 
-
 	// 全选/取消全选
 	const toggleSelectAll = () => {
-		const newValue = !isAllSelected.value
-		tempStudents.value.forEach((s) => {
-			s.selected = newValue
-		})
+		if (allSelected.value) {
+			// 取消全选
+			selectedStudentIds.value = []
+		} else {
+			// 全选
+			selectedStudentIds.value = allStudents.value.map(s => s.id)
+		}
 	}
 
-	// 切换学生选择状态
-	const toggleStudent = (student : Student) => {
-		student.selected = !student.selected
+	// 移除已选学生
+	const removeSelectedStudent = (id : string) => {
+		const index = selectedStudentIds.value.indexOf(id)
+		if (index > -1) {
+			selectedStudentIds.value.splice(index, 1)
+		}
 	}
 
-	// 添加学生
-	const addStudent = () => {
-		if (!newStudentName.value.trim()) {
-			Service.Msg('请输入学生姓名')
-			return
-		}
+	
 
-		const newStudent : Student = {
-			id: Date.now().toString(),
-			name: newStudentName.value.trim(),
-			selected: false,
-			recordTime: '',
-			lane: '',
-			laps: '',
-		}
-
-		tempStudents.value.push(newStudent)
-		newStudentName.value = ''
-		dragSortKey.value++
-
-		Service.Msg('添加成功', 'success')
+	// 保存项目
+	const confirmCreate = () => {
+		
 	}
-
-	// 删除学生
-	const deleteStudent = (id : string) => {
-		uni.showModal({
-			title: '确认删除',
-			content: '确定要删除这个学生吗？',
-			success: (res) => {
-				if (res.confirm) {
-					tempStudents.value = tempStudents.value.filter((s) => s.id !== id)
-					dragSortKey.value++
-				}
-			},
-		})
-	}
-
-	// 删除选中的学生
-	const deleteSelectedStudents = () => {
-		if (tempSelectedStudents.value.length === 0) {
-			Service.Msg('请先选择要删除的学生')
-			return
-		}
-
-		uni.showModal({
-			title: '确认删除',
-			content: `确定要删除选中的 ${tempSelectedStudents.value.length} 个学生吗？`,
-			success: (res) => {
-				if (res.confirm) {
-					const selectedIds = tempSelectedStudents.value.map((s) => s.id)
-					tempStudents.value = tempStudents.value.filter((s) => !selectedIds.includes(s.id))
-					dragSortKey.value++
-					Service.Msg('删除成功', 'success')
-				}
-			},
-		})
-	}
-
-
-
-	// 创建项目
-	const recordTime = () => {
-		if (!tempProjectName.value.trim()) {
-			Service.Msg('请输入项目名称')
-			return
-		}
-
-		if (!selectedModule.value) {
-			Service.Msg('请选择模块类型')
-			return
-		}
-
-		// 如果选择了计时模块且是间隔出发模式，需要验证间隔时间
-		if (selectedModule.value === '计时' && stopwatchMode.value === 'interval') {
-			if (!intervalTime.value.trim()) {
-				Service.Msg('请输入间隔时间')
-				return
-			}
-			const intervalNum = parseFloat(intervalTime.value)
-			if (isNaN(intervalNum) || intervalNum <= 0) {
-				Service.Msg('请输入有效的间隔时间')
-				return
-			}
-		}
-
-		if (tempSelectedStudents.value.length === 0) {
-			Service.Msg('请选择学生')
-			return
-		}
-
-		Service.Msg('项目创建成功', 'success')
-
-	}
-
-	// 拖拽结束处理
-	const handleDragEnd = (list : Student[]) => {
-		tempStudents.value = list
-		dragSortKey.value++
-	}
-
-	// 页面加载
-	onMounted(() => {
-		// 深拷贝学生列表到临时列表
-		tempStudents.value = JSON.parse(JSON.stringify(students.value))
-
-	})
 </script>
 
 <style lang="scss" scoped>
-	.set-course-container {
-		min-height: 100vh;
+	page {
 		background-color: #f5f5f5;
-		padding: 20rpx;
+	}
+
+	.course-container {
+		min-height: 100vh;
 		padding-bottom: 140rpx;
 	}
 
-	/* 卡片区域 */
-	.card-section {
+	/* 表单区域 */
+	.form-section {
+		padding: 20rpx;
+	}
+
+	.form-card {
 		background-color: #fff;
-		border-radius: 20rpx;
-		padding: 30rpx;
+		border-radius: 24rpx;
+		padding: 32rpx 28rpx;
 		margin-bottom: 20rpx;
-		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+
+		.form-title {
+			font-size: 32rpx;
+			font-weight: 700;
+			color: #333;
+			margin-bottom: 28rpx;
+			display: block;
+		}
 	}
 
-	.section-title {
-		font-size: 28rpx;
-		font-weight: 600;
-		color: #333;
-		margin-bottom: 24rpx;
-	}
-
-	/* 表单项 */
-	.form-item {
-		margin-bottom: 24rpx;
+	/* 表单输入 */
+	.form-group {
+		margin-bottom: 32rpx;
 
 		&:last-child {
 			margin-bottom: 0;
 		}
 
 		.form-label {
-			font-size: 26rpx;
-			color: #666;
-			margin-bottom: 12rpx;
 			display: block;
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #333;
+			margin-bottom: 14rpx;
 		}
-	}
 
-	.section-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 20rpx;
-
-		.header-actions {
-			display: flex;
-			align-items: center;
-			gap: 20rpx;
-
-			.select-all {
-				display: flex;
-				align-items: center;
-				gap: 10rpx;
-
-				.checkbox {
-					width: 36rpx;
-					height: 36rpx;
-					border: 2rpx solid #ddd;
-					border-radius: 50%;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-
-					&.checked {
-						background-color: #1890ff;
-						border-color: #1890ff;
-					}
-				}
-
-				.select-text {
-					font-size: 26rpx;
-					color: #666;
-				}
-			}
-
-			.delete-selected {
-				display: flex;
-				align-items: center;
-				gap: 8rpx;
-				padding: 8rpx 16rpx;
-				background-color: #fff0f0;
-				border-radius: 30rpx;
-
-				.delete-text {
-					font-size: 24rpx;
-					color: #ff4444;
-				}
-			}
-		}
-	}
-
-	/* 表单输入 */
-	.form-input {
-		width: 100%;
-		height: 88rpx;
-		background-color: #f5f5f5;
-		border-radius: 12rpx;
-		padding: 0 24rpx;
-		font-size: 28rpx;
-		color: #333;
-	}
-
-	/* 选择器包装器 */
-	.select-wrapper {
-		width: 100%;
-		height: 88rpx;
-		background-color: #f5f5f5;
-		border-radius: 12rpx;
-		padding: 0 24rpx;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-
-		.select-value {
+		.form-input {
+			width: 100%;
+			height: 88rpx;
+			background-color: #f5f5f5;
+			border-radius: 16rpx;
+			padding: 0 24rpx;
 			font-size: 28rpx;
 			color: #333;
+			transition: all 0.2s ease;
 
-			&.placeholder {
-				color: #999;
+			&:focus {
+				background-color: #fff;
+				box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.15);
 			}
 		}
 	}
@@ -544,266 +354,475 @@
 	/* 单选按钮组 */
 	.radio-group {
 		display: flex;
-		gap: 40rpx;
+		gap: 20rpx;
+		margin-bottom: 24rpx;
 
 		.radio-item {
+			flex: 1;
+			height: 88rpx;
+			background-color: #f5f5f5;
+			border-radius: 16rpx;
 			display: flex;
 			align-items: center;
+			justify-content: center;
 			gap: 12rpx;
-			cursor: pointer;
+			font-size: 28rpx;
+			color: #666;
+			transition: all 0.25s ease;
+			border: 2rpx solid transparent;
 
-			.radio-circle {
-				width: 36rpx;
-				height: 36rpx;
-				border: 2rpx solid #ddd;
+			&:active {
+				transform: scale(0.96);
+			}
+
+			&.active {
+				font-weight: 600;
+				background-color: #e6f7ff;
+				border-color: #1890ff;
+				color: #1890ff;
+			}
+
+			.radio-icon {
+				width: 32rpx;
+				height: 32rpx;
 				border-radius: 50%;
+				border: 3rpx solid #d9d9d9;
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				transition: all 0.3s;
-
-				.radio-dot {
-					width: 18rpx;
-					height: 18rpx;
-					background-color: #1890ff;
-					border-radius: 50%;
-				}
+				transition: all 0.2s ease;
 			}
 
-			.radio-label {
+			&.active .radio-icon {
+				border-color: #1890ff;
+				background-color: #1890ff;
+			}
+
+			.radio-inner {
+				width: 12rpx;
+				height: 12rpx;
+				background-color: #fff;
+				border-radius: 50%;
+			}
+		}
+	}
+
+	/* 间隔时间输入 */
+	.interval-input-wrapper {
+		background-color: #f5f5f5;
+		border-radius: 16rpx;
+		padding: 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.interval-label {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #333;
+		}
+
+		.interval-input {
+			flex: 1;
+			margin-left: 24rpx;
+			display: flex;
+			align-items: center;
+			background-color: #fff;
+			border-radius: 12rpx;
+			padding: 0 20rpx;
+			height: 72rpx;
+
+			.number-input {
+				flex: 1;
 				font-size: 28rpx;
 				color: #333;
 			}
 
-			&.active {
-				.radio-circle {
-					border-color: #1890ff;
+			.unit-text {
+				font-size: 24rpx;
+				color: #999;
+				margin-left: 12rpx;
+			}
+		}
+	}
+
+	/* 多泳道选项 */
+	.multi-lane-options {
+		padding-top: 20rpx;
+		display: flex;
+		flex-direction: column;
+		gap: 16rpx;
+	}
+
+	.lane-input-wrapper,
+	.person-input-wrapper {
+		background-color: #f5f5f5;
+		border-radius: 16rpx;
+		padding: 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.lane-label,
+		.person-label {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #333;
+		}
+	}
+
+	.lane-input,
+	.person-input {
+		flex: 1;
+		margin-left: 24rpx;
+		display: flex;
+		align-items: center;
+		background-color: #fff;
+		border-radius: 12rpx;
+		padding: 0 20rpx;
+		height: 72rpx;
+
+		.number-input {
+			flex: 1;
+			font-size: 28rpx;
+			color: #333;
+		}
+
+		.unit-text {
+			font-size: 24rpx;
+			color: #999;
+			margin-left: 12rpx;
+		}
+	}
+
+	/* 学生列表头部 */
+	.student-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 24rpx;
+
+		.header-left {
+			display: flex;
+			align-items: center;
+			gap: 8rpx;
+
+			.student-count {
+				font-size: 26rpx;
+				color: #999;
+				font-weight: 500;
+			}
+		}
+
+		.header-actions {
+			.select-all-btn {
+				display: flex;
+				align-items: center;
+				gap: 8rpx;
+				padding: 8rpx 16rpx;
+				border-radius: 12rpx;
+				transition: all 0.2s ease;
+
+				&:active {
+					transform: scale(0.96);
+				}
+
+				.checkbox-icon {
+					width: 32rpx;
+					height: 32rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					&.checked {
+						color: #1890ff;
+					}
+				}
+
+				.select-all-text {
+					font-size: 24rpx;
+					color: #666;
 				}
 			}
 		}
 	}
 
-	/* 计时器区域 */
-	.timer-section {
-		text-align: center;
-		cursor: pointer;
-		transition: all 0.3s;
+	/* 加载状态 */
+	.loading-state {
+		padding: 80rpx 40rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 
-		&:active {
-			opacity: 0.8;
+		.loading-spinner {
+			width: 60rpx;
+			height: 60rpx;
+			border: 4rpx solid #f0f0f0;
+			border-top-color: #1890ff;
+			border-radius: 50%;
+			animation: spin 1s linear infinite;
+			margin-bottom: 20rpx;
 		}
 
-		.timer-display {
-			display: flex;
-			align-items: baseline;
-			justify-content: center;
+		.loading-text {
+			font-size: 26rpx;
+			color: #999;
+		}
+	}
 
-			.timer-text {
-				font-size: 72rpx;
-				font-weight: bold;
-				color: #333;
-			}
+	/* 空状态 */
+	.empty-student-state {
+		padding: 60rpx 40rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 
-			.timer-milliseconds {
-				font-size: 36rpx;
-				color: #666;
-				font-family: 'DIN Alternate', monospace;
-			}
+		.empty-icon {
+			margin-bottom: 20rpx;
+			opacity: 0.6;
 		}
 
-		.timer-hint {
+		.empty-text {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #666;
+			margin-bottom: 10rpx;
+		}
+
+		.empty-desc {
 			font-size: 24rpx;
 			color: #999;
-			margin-top: 16rpx;
 		}
 	}
 
 	/* 学生列表 */
-	.students-list {
-		margin-bottom: 20rpx;
+	.student-list {
+		display: flex;
+		flex-direction: column;
+		gap: 12rpx;
 
 		.student-item {
 			display: flex;
 			align-items: center;
-			padding: 24rpx 20rpx;
-			border-bottom: 1rpx solid #f5f5f5;
+			gap: 16rpx;
+			padding: 20rpx;
+			background-color: #f5f5f5;
+			border-radius: 16rpx;
+			border: 2rpx solid transparent;
+			transition: all 0.25s ease;
 
-			&:last-child {
-				border-bottom: none;
+			&:active {
+				transform: scale(0.98);
 			}
 
-			&.selected {
-				margin-top: 10rpx;
+			&.checked {
 				background-color: #e6f7ff;
-				padding-left: 30rpx;
-				padding-right: 30rpx;
-				border-radius: 12rpx;
-			}
-
-			.drag-handle {
-				margin-right: 12rpx;
-				cursor: grab;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-
-				&:active {
-					cursor: grabbing;
-				}
+				border-color: #1890ff;
 			}
 
 			.student-checkbox {
-				margin-right: 20rpx;
+				width: 40rpx;
+				height: 40rpx;
+				border-radius: 50%;
+				border: 2rpx solid #d9d9d9;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+				transition: all 0.2s ease;
 
-				.checkbox {
-					width: 36rpx;
-					height: 36rpx;
-					border: 2rpx solid #ddd;
-					border-radius: 50%;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					cursor: pointer;
+				&.checked {
+					border-color: #1890ff;
+					background-color: #1890ff;
+				}
+			}
 
-					&.checked {
-						background-color: #1890ff;
-						border-color: #1890ff;
-					}
+			.student-avatar {
+				width: 64rpx;
+				height: 64rpx;
+				background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+				border-radius: 14rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+
+				.avatar-text {
+					color: #fff;
+					font-size: 28rpx;
+					font-weight: 700;
 				}
 			}
 
 			.student-info {
 				flex: 1;
-				display: flex;
-				align-items: center;
-				gap: 20rpx;
-				cursor: pointer;
-
-				.student-index {
-					font-size: 24rpx;
-					color: #999;
-					width: 40rpx;
-				}
+				min-width: 0;
 
 				.student-name {
-					font-size: 30rpx;
+					font-size: 28rpx;
+					font-weight: 600;
 					color: #333;
-				}
-			}
-
-			.lane-input-wrapper {
-				margin-right: 20rpx;
-				display: flex;
-				align-items: center;
-				gap: 8rpx;
-				background-color: #f5f5f5;
-				border-radius: 8rpx;
-				padding: 0 16rpx;
-				height: 60rpx;
-				transition: all 0.2s ease;
-
-				&:active {
-					background-color: #e8e8e8;
+					margin-bottom: 6rpx;
+					display: block;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
 				}
 
-				.lane-select {
-					font-size: 26rpx;
-					color: #333;
-					text-align: center;
+				.student-meta {
+					display: flex;
+					align-items: center;
+					gap: 12rpx;
 
-					&.placeholder {
+					.gender-badge {
+						font-size: 22rpx;
+						padding: 4rpx 10rpx;
+						border-radius: 8rpx;
+						font-weight: 500;
+
+						&.male {
+							color: #1890ff;
+							background-color: #e6f7ff;
+						}
+
+						&.female {
+							color: #fa8c16;
+							background-color: #fff7e6;
+						}
+					}
+
+					.age-text {
+						font-size: 22rpx;
 						color: #999;
 					}
 				}
 			}
-
-			.laps-input-wrapper {
-				margin-right: 20rpx;
-				display: flex;
-				align-items: center;
-
-				.laps-input {
-					width: 100rpx;
-					height: 60rpx;
-					background-color: #f5f5f5;
-					border-radius: 8rpx;
-					padding: 0 16rpx;
-					font-size: 26rpx;
-					color: #333;
-					text-align: center;
-				}
-			}
-
-			.student-actions {
-				.action-icon {
-					width: 48rpx;
-					height: 48rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					border-radius: 50%;
-					background-color: #fff0f0;
-				}
-			}
 		}
 	}
 
-	/* 添加学生 */
-	.add-student-wrapper {
-		display: flex;
-		gap: 20rpx;
+	/* 已选学生预览 */
+	.selected-preview {
+		margin-top: 32rpx;
+		padding-top: 24rpx;
+		border-top: 1rpx solid #f0f0f0;
 
-		.add-student-input {
-			flex: 1;
-			height: 80rpx;
-			background-color: #f5f5f5;
-			border-radius: 12rpx;
-			padding: 0 24rpx;
-			font-size: 28rpx;
-			color: #333;
+		.preview-header {
+			margin-bottom: 16rpx;
+
+			.preview-title {
+				font-size: 26rpx;
+				font-weight: 600;
+				color: #666;
+			}
 		}
 
-		.add-student-btn {
-			width: 80rpx;
-			height: 80rpx;
-			background-color: #1890ff;
-			border-radius: 12rpx;
+		.preview-list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 8rpx;
+		}
+
+		.preview-item {
 			display: flex;
 			align-items: center;
-			justify-content: center;
-			border: none;
+			gap: 8rpx;
+			padding: 10rpx 16rpx;
+			background-color: #e6f7ff;
+			border-radius: 12rpx;
+
+			.preview-index {
+				width: 24rpx;
+				height: 24rpx;
+				background-color: #1890ff;
+				color: #fff;
+				font-size: 18rpx;
+				font-weight: 600;
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.preview-name {
+				font-size: 26rpx;
+				color: #1890ff;
+				font-weight: 500;
+			}
+
+			.preview-remove {
+				width: 32rpx;
+				height: 32rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				transition: all 0.2s ease;
+
+				&:active {
+					transform: scale(0.9);
+				}
+			}
 		}
 	}
 
-	/* 底部按钮区域 */
-	.bottom-section {
+	/* 底部操作按钮 */
+	.bottom-actions {
 		position: fixed;
 		bottom: 0;
 		left: 0;
 		right: 0;
+		background-color: #fff;
 		padding: 20rpx 30rpx;
 		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-		background-color: #fff;
 		border-top: 1rpx solid #f0f0f0;
+		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
+		z-index: 99;
 
-		.submit-btn {
-			width: 100%;
-			height: 88rpx;
-			background-color: #1890ff;
-			color: #fff;
-			font-size: 32rpx;
-			font-weight: 600;
-			border-radius: 12rpx;
-			border: none;
+		.action-buttons {
 			display: flex;
-			align-items: center;
-			justify-content: center;
-			box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
+			gap: 16rpx;
+		}
+	}
 
-			&:disabled {
-				background-color: #ccc;
-				box-shadow: none;
-			}
+	.cancel-btn,
+	.confirm-btn {
+		flex:  1;
+		height: 88rpx;
+		border-radius: 16rpx;
+		border: none;
+		font-size: 30rpx;
+		font-weight: 600;
+		transition: all 0.25s ease;
+	}
+
+	.cancel-btn {
+		background-color: #f5f5f5;
+		color: #666;
+
+		&:active {
+			background-color: #e8e8e8;
+			transform: scale(0.96);
+		}
+	}
+
+	.confirm-btn {
+		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+		color: #fff;
+		box-shadow: 0 6rpx 16rpx rgba(24, 144, 255, 0.35);
+
+		&:active {
+			transform: scale(0.96);
+			box-shadow: 0 3rpx 8rpx rgba(24, 144, 255, 0.25);
+		}
+	}
+
+	/* 动画 */
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
 		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/pages/userFunc/setCourse.vue.bak b/src/pages/userFunc/setCourse.vue.bak
new file mode 100644
index 0000000..a359733
--- /dev/null
+++ b/src/pages/userFunc/setCourse.vue.bak
@@ -0,0 +1,902 @@
+<template>
+	<view class="course-container">
+		<!-- 表单区域 -->
+		<view class="form-section">
+			<!-- 项目名称 -->
+			<view class="form-card">
+				<view class="form-title">项目信息</view>
+				<view class="form-group">
+					<text class="form-label">项目名称</text>
+					<input class="form-input" v-model="courseData.projectName" placeholder="请输入项目名称" placeholder-class="input-placeholder" />
+				</view>
+			</view>
+
+			<!-- 出发方式 -->
+			<view class="form-card">
+				<view class="form-title">出发方式</view>
+				<view class="radio-group">
+					<view class="radio-item" :class="{ active: courseData.startType === 'together' }" @click="courseData.startType = 'together'">
+						<view class="radio-icon">
+							<view v-if="courseData.startType === 'together'" class="radio-inner"></view>
+						</view>
+						<text>一起出发</text>
+					</view>
+					<view class="radio-item" :class="{ active: courseData.startType === 'interval' }" @click="courseData.startType = 'interval'">
+						<view class="radio-icon">
+							<view v-if="courseData.startType === 'interval'" class="radio-inner"></view>
+						</view>
+						<text>间隔出发</text>
+					</view>
+				</view>
+				<view v-if="courseData.startType === 'interval'" class="interval-input-wrapper">
+					<text class="interval-label">间隔时间</text>
+					<view class="interval-input">
+						<input class="number-input" v-model="courseData.intervalSeconds" type="digit" placeholder="请输入秒数" />
+						<text class="unit-text">秒</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 泳道设置 -->
+			<view class="form-card">
+				<view class="form-title">泳道设置</view>
+				<view class="radio-group">
+					<view class="radio-item" :class="{ active: courseData.laneType === 'single' }" @click="selectSingleLane">
+						<view class="radio-icon">
+							<view v-if="courseData.laneType === 'single'" class="radio-inner"></view>
+						</view>
+						<text>一个泳道</text>
+					</view>
+					<view class="radio-item" :class="{ active: courseData.laneType === 'multi' }" @click="selectMultiLane">
+						<view class="radio-icon">
+							<view v-if="courseData.laneType === 'multi'" class="radio-inner"></view>
+						</view>
+						<text>多个泳道</text>
+					</view>
+				</view>
+				<view v-if="courseData.laneType === 'multi'" class="multi-lane-options">
+					<view class="sub-option-item" :class="{ active: courseData.multiLaneMode === 'onePerson' }" @click="courseData.multiLaneMode = 'onePerson'">
+						<view class="sub-option-icon">
+							<view v-if="courseData.multiLaneMode === 'onePerson'" class="option-inner"></view>
+						</view>
+						<text>一个泳道一个人</text>
+					</view>
+					<view class="sub-option-item" :class="{ active: courseData.multiLaneMode === 'multiPerson' }" @click="courseData.multiLaneMode = 'multiPerson'">
+						<view class="sub-option-icon">
+							<view v-if="courseData.multiLaneMode === 'multiPerson'" class="option-inner"></view>
+						</view>
+						<text>一个泳道几个人</text>
+					</view>
+					<view v-if="courseData.multiLaneMode === 'multiPerson'" class="multi-person-input-wrapper">
+						<text class="multi-label">每个泳道人数</text>
+						<view class="multi-input">
+							<input class="number-input" v-model="courseData.lanePersonCount" type="number" placeholder="请输入人数" />
+							<text class="unit-text">人</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 学生列表 -->
+			<view class="form-card">
+				<view class="student-header">
+					<view class="header-left">
+						<text class="form-title">选择学生</text>
+						<text class="student-count">已选({{ selectedStudentIds.length }}/{{ allStudents.length }})</text>
+					</view>
+					<view class="header-actions">
+						<view class="select-all-btn" @click="toggleSelectAll">
+							<view class="checkbox-icon" :class="{ checked: allSelected }">
+								<u-icon v-if="allSelected" name="checkmark" size="14" color="#fff"></u-icon>
+							</view>
+							<text class="select-all-text">{{ allSelected ? '取消全选' : '全选' }}</text>
+						</view>
+					</view>
+				</view>
+
+				<view v-if="loading" class="loading-state">
+					<view class="loading-spinner"></view>
+					<text class="loading-text">加载中...</text>
+				</view>
+
+				<view v-else-if="allStudents.length === 0" class="empty-student-state">
+					<view class="empty-icon">
+						<u-icon name="account" size="48" color="#ddd"></u-icon>
+					</view>
+					<text class="empty-text">暂无学生</text>
+					<text class="empty-desc">请先在学员管理中添加学生</text>
+				</view>
+
+				<view v-else class="student-list">
+					<view v-for="student in allStudents" :key="student.id" class="student-item" @click="toggleStudentSelect(student.id)">
+						<view class="student-checkbox" :class="{ checked: selectedStudentIds.includes(student.id) }">
+							<u-icon v-if="selectedStudentIds.includes(student.id)" name="checkmark" size="14" color="#fff"></u-icon>
+						</view>
+						<view class="student-avatar">
+							<text class="avatar-text">{{ student.name.charAt(0) }}</text>
+						</view>
+						<view class="student-info">
+							<view class="student-name">{{ student.name }}</view>
+							<view class="student-meta">
+								<text class="gender-badge" :class="student.gender === '男' ? 'male' : 'female'">
+									{{ student.gender }}
+								</text>
+								<text class="age-text">{{ student.age }}岁</text>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<!-- 已选学生预览 -->
+				<view v-if="selectedStudents.length > 0" class="selected-preview">
+					<view class="preview-header">
+						<text class="preview-title">已选学生</text>
+					</view>
+					<view class="preview-list">
+						<view v-for="(student, index) in selectedStudents" :key="student.id" class="preview-item">
+							<text class="preview-index">{{ index + 1 }}</text>
+							<text class="preview-name">{{ student.name }}</text>
+							<view class="preview-remove" @click.stop="removeSelectedStudent(student.id)">
+								<u-icon name="close" size="14" color="#ff4d4f"></u-icon>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 底部按钮区域 -->
+		<view class="bottom-actions">
+			<view class="action-buttons">
+				<button class="cancel-btn" @click="goBack">取消</button>
+				<button class="confirm-btn" @click="confirmCreate">创建项目</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref, computed, onMounted } from 'vue'
+	import { Service } from '@/Service/Service'
+
+	// 学生类型
+	interface Student {
+		id: string
+		name: string
+		gender: string
+		age: string
+		school?: string
+		address?: string
+	}
+
+	// 课程数据
+	const courseData = ref({
+		projectName: '',
+		startType: 'together', // together | interval
+		intervalSeconds: '',
+		intervalSeconds: '',
+		laneType: 'single', // single | multi
+		multiLaneMode: 'onePerson', // onePerson | multiPerson
+		lanePersonCount: ''
+	})
+
+	// 所有学生列表
+	const allStudents = ref<Student[]>([])
+
+	// 已选学生ID列表
+	const selectedStudentIds = ref<string[]>([])
+
+	// 加载状态
+	const loading = ref(false)
+
+	// 是否全选
+	const allSelected = computed(() => {
+		return allStudents.value.length > 0 && allStudents.value.every(s => selectedStudentIds.value.includes(s.id))
+	})
+
+	// 已选学生列表
+	const selectedStudents = computed(() => {
+		return allStudents.value.filter(s => selectedStudentIds.value.includes(s.id))
+	})
+
+	// 选择单泳道
+	const selectSingleLane = () => {
+		courseData.value.laneType = 'single'
+		courseData.value.multiLaneMode = 'onePerson'
+	}
+
+	// 选择多泳道
+	const selectMultiLane = () => {
+		courseData.value.laneType = 'multi'
+	}
+
+	// 获取学生列表（模拟接口）
+	const getStudentList = async () => {
+		loading.value = true
+		try {
+			// TODO: 实际项目中应从接口获取
+			// const res = await Service.Request('/api/students', 'GET', {})
+			// allStudents.value = res.data
+
+			// 模拟接口延迟
+			await new Promise(resolve => setTimeout(resolve, 500))
+
+			// 假数据
+			allStudents.value = [
+				{ id: '001', name: '张三', gender: '男', age: '12', school: '第一小学' },
+				{ id: '002', name: '李四', gender: '女', age: '13', school: '第二小学' },
+				{ id: '003', name: '王五', gender: '男', age: '11', school: '第一小学' },
+				{ id: '004', name: '赵六', gender: '女', age: '12', school: '第三小学' },
+				{ id: '005', name: '钱七', gender: '男', age: '14', school: '第二小学' },
+				{ id: '006', name: '孙八', gender: '女', age: '10', school: '第一小学' },
+				{ id: '007', name: '周九', gender: '男', age: '13', school: '第四小学' },
+				{ id: '008', name: '吴十', gender: '女', age: '12', school: '第二小学' }
+			]
+		} catch (error) {
+			Service.Msg('获取学生列表失败')
+			console.error(error)
+		} finally {
+			loading.value = false
+		}
+	}
+
+	// 切换学生选中状态
+	const toggleStudentSelect = (id: string) => {
+		const index = selectedStudentIds.value.indexOf(id)
+		if (index > -1) {
+			selectedStudentIds.value.splice(index, 1)
+		} else {
+			selectedStudentIds.value.push(id)
+		}
+	}
+
+	// 全选/取消全选
+	const toggleSelectAll = () => {
+		if (allSelected.value) {
+			// 取消全选
+			selectedStudentIds.value = []
+		} else {
+			// 全选
+			selectedStudentIds.value = allStudents.value.map(s => s.id)
+		}
+	}
+
+	// 移除已选学生
+	const removeSelectedStudent = (id: string) => {
+		const index = selectedStudentIds.value.indexOf(id)
+		if (index > -1) {
+			selectedStudentIds.value.splice(index, 1)
+		}
+	}
+
+	// 返回
+	const goBack = () => {
+		Service.GoPageBack()
+	}
+
+	// 创建项目
+	const confirmCreate = () => {
+		if (!courseData.value.projectName.trim()) {
+			Service.Msg('请输入项目名称')
+			return
+		}
+
+		if (courseData.value.startType === 'interval' && !courseData.value.intervalSeconds.trim()) {
+			Service.Msg('请输入间隔秒数')
+			return
+		}
+
+		if (courseData.value.laneType === 'multi' && courseData.value.multiLaneMode === 'multiPerson' && !courseData.value.lanePersonCount.trim()) {
+			Service.Msg('请输入每个泳道人数')
+			return
+		}
+
+		if (selectedStudentIds.value.length === 0) {
+			Service.Msg('请至少选择一位学生')
+			return
+		}
+
+		// TODO: 调用API创建项目
+		console.log('创建项目数据:', {
+			course: courseData.value,
+			studentIds: selectedStudentIds.value,
+			students: selectedStudents.value
+		})
+
+		Service.Msg('创建成功', 'success')
+		setTimeout(() => {
+			Service.GoPageBack()
+		}, 1500)
+	}
+
+	// 页面加载时获取学生列表
+	onMounted(() => {
+		getStudentList()
+	})
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background-color: #f5f5f5;
+	}
+
+	.course-container {
+		min-height: 100vh;
+		padding-bottom: 140rpx;
+	}
+
+	/* 表单区域 */
+	.form-section {
+		padding: 20rpx;
+	}
+
+	.form-card {
+		background-color: #fff;
+		border-radius: 24rpx;
+		padding: 32rpx 28rpx;
+		margin-bottom: 20rpx;
+		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+
+		.form-title {
+			font-size: 32rpx;
+			font-weight: 700;
+			color: #333;
+			margin-bottom: 28rpx;
+			display: block;
+		}
+	}
+
+	/* 表单输入 */
+	.form-group {
+		margin-bottom: 32rpx;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		.form-label {
+			display: block;
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #333;
+			margin-bottom: 14rpx;
+		}
+
+		.form-input {
+			width: 100%;
+			height: 88rpx;
+			background-color: #f5f5f5;
+			border-radius: 16rpx;
+			padding: 0 24rpx;
+			font-size: 28rpx;
+			color: #333;
+			transition: all 0.2s ease;
+
+			&:focus {
+				background-color: #fff;
+				box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.15);
+			}
+		}
+	}
+
+	/* 单选按钮组 */
+	.radio-group {
+		display: flex;
+		gap: 20rpx;
+		margin-bottom: 24rpx;
+
+		.radio-item {
+			flex: 1;
+			height: 88rpx;
+			background-color: #f5f5f5;
+			border-radius: 16rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 12rpx;
+			font-size: 28rpx;
+			color: #666;
+			transition: all 0.25s ease;
+			border: 2rpx solid transparent;
+
+			&:active {
+				transform: scale(0.96);
+			}
+
+			&.active {
+				font-weight: 600;
+				background-color: #e6f7ff;
+				border-color: #1890ff;
+				color: #1890ff;
+			}
+
+			.radio-icon {
+				width: 32rpx;
+				height: 32rpx;
+				border-radius: 50%;
+				border: 3rpx solid #d9d9d9;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				transition: all 0.2s ease;
+			}
+
+			&.active .radio-icon {
+				border-color: #1890ff;
+				background-color: #1890ff;
+			}
+
+			.radio-inner {
+				width: 12rpx;
+				height: 12rpx;
+				background-color: #fff;
+				border-radius: 50%;
+			}
+		}
+	}
+
+	/* 间隔时间输入 */
+	.interval-input-wrapper {
+		background-color: #f5f5f5;
+		border-radius: 16rpx;
+		padding: 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.interval-label {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #333;
+		}
+
+		.interval-input {
+			flex: 1;
+			margin-left: 24rpx;
+			display: flex;
+			align-items: center;
+			background-color: #fff;
+			border-radius: 12rpx;
+			padding: 0 20rpx;
+			height: 72rpx;
+
+			.number-input {
+				flex: 1;
+				font-size: 28rpx;
+				color: #333;
+			}
+
+			.unit-text {
+				font-size: 24rpx;
+				color: #999;
+				margin-left: 12rpx;
+			}
+		}
+	}
+
+	/* 多泳道选项 */
+	.multi-lane-options {
+		padding-top: 20rpx;
+
+		.sub-option-item {
+			padding: 20rpx 24rpx;
+			background-color: #f5f5f5;
+			border-radius: 16rpx;
+			display: flex;
+			align-items: center;
+			gap: 12rpx;
+			font-size: 26rpx;
+			color: #666;
+			margin-bottom: 16rpx;
+			transition: all 0.2s ease;
+			border: 2rpx solid transparent;
+
+			&:active {
+				transform: scale(0.98);
+			}
+
+			&.active {
+				font-weight: 600;
+				background-color: #e6f7ff;
+				border-color: #1890ff;
+				color: #1890ff;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			.sub-option-icon {
+				width: 28rpx;
+				height: 28rpx;
+				border-radius: 50%;
+				border: 2rpx solid #d9d9d9;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				transition: all 0.2s ease;
+			}
+
+			&.active .sub-option-icon {
+				border-color: #1890ff;
+				background-color: #1890ff;
+			}
+
+			.option-inner {
+				width: 10rpx;
+				height: 10rpx;
+				background-color: #fff;
+				border-radius: 50%;
+			}
+		}
+	}
+
+	/* 多泳道人数输入 */
+	.multi-person-input-wrapper {
+		margin-top: 20rpx;
+		background-color: #f5f5f5;
+		border-radius: 16rpx;
+		padding: 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.multi-label {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #333;
+		}
+
+		.multi-input {
+			flex: 1;
+			margin-left: 24rpx;
+			display: flex;
+			align-items: center;
+			background-color: #fff;
+			border-radius: 12rpx;
+			padding: 0 20rpx;
+			height: 72rpx;
+
+			.number-input {
+				flex: 1;
+				font-size: 28rpx;
+				color: #333;
+			}
+
+			.unit-text {
+				font-size: 24rpx;
+				color: #999;
+				margin-left: 12rpx;
+			}
+		}
+	}
+
+	/* 学生列表头部 */
+	.student-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 24rpx;
+
+		.header-left {
+			display: flex;
+			align-items: center;
+			gap: 8rpx;
+
+			.student-count {
+				font-size: 26rpx;
+				color: #999;
+				font-weight: 500;
+			}
+		}
+
+		.header-actions {
+			.select-all-btn {
+				display: flex;
+				align-items: center;
+				gap: 8rpx;
+				padding: 8rpx 16rpx;
+				border-radius: 12rpx;
+				transition: all 0.2s ease;
+
+				&:active {
+					transform: scale(0.96);
+				}
+
+				.checkbox-icon {
+					width: 32rpx;
+					height: 32rpx;
+					border-radius: 50%;
+					border: 2rpx solid #d9d9d9;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					transition: all 0.2s ease;
+
+					&.checked {
+						border-color: #1890ff;
+						background-color: #1890ff;
+					}
+				}
+
+				.select-all-text {
+					font-size: 24rpx;
+					color: #666;
+				}
+			}
+		}
+	}
+
+	/* 加载状态 */
+	.loading-state {
+		padding: 80rpx 40rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		.loading-spinner {
+			width: 60rpx;
+			height: 60rpx;
+			border: 4rpx solid #f0f0f0;
+			border-top-color: #1890ff;
+			border-radius: 50%;
+			animation: spin 1s linear infinite;
+			margin-bottom: 20rpx;
+		}
+
+		.loading-text {
+			font-size: 26rpx;
+			color: #999;
+		}
+	}
+
+	/* 空状态 */
+	.empty-student-state {
+		padding: 60rpx 40rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		.empty-icon {
+			margin-bottom: 20rpx;
+			opacity: 0.6;
+		}
+
+		.empty-text {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #666;
+			margin-bottom: 10rpx;
+		}
+
+		.empty-desc {
+			font-size: 24rpx;
+			color: #999;
+		}
+	}
+
+	/* 学生列表 */
+	.student-list {
+		display: flex;
+		flex-direction: column;
+		gap: 12rpx;
+
+		.student-item {
+			display: flex;
+			align-items: center;
+			gap: 16rpx;
+			padding: 20rpx;
+			background-color: #f5f5f5;
+			border-radius: 16rpx;
+			transition: all 0.2s ease;
+
+			&:active {
+				transform: scale(0.98);
+				background-color: #e8e8e8;
+			}
+
+			.student-checkbox {
+				width: 36rpx;
+				height: 36rpx;
+				border-radius: 50%;
+				border: 2rpx solid #d9d9d9;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+				transition: all 0.2s ease;
+
+				&.checked {
+					border-color: #1890ff;
+					background-color: #1890ff;
+				}
+			}
+
+			.student-avatar {
+				width: 64rpx;
+				height: 64rpx;
+				background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+				border-radius: 14rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+
+				.avatar-text {
+					color: #fff;
+					font-size: 28rpx;
+					font-weight: 700;
+				}
+			}
+
+			.student-info {
+				flex: 1;
+				min-width: 0;
+
+				.student-name {
+					font-size: 28rpx;
+					font-weight: 600;
+					color: #333;
+					margin-bottom: 6rpx;
+					display: block;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+
+				.student-meta {
+					display: flex;
+					align-items: center;
+					gap: 12rpx;
+
+					.gender-badge {
+						font-size: 22rpx;
+						padding: 4rpx 10rpx;
+						border-radius: 8rpx;
+						font-weight: 500;
+
+						&.male {
+							color: #1890ff;
+							background-color: #e6f7ff;
+						}
+
+						&.female {
+							color: #fa8c16;
+							background-color: #fff7e6;
+						}
+					}
+
+					.age-text {
+						font-size: 22rpx;
+						color: #999;
+					}
+				}
+			}
+		}
+	}
+
+	/* 已选学生预览 */
+	.selected-preview {
+		margin-top: 32rpx;
+		padding-top: 24rpx;
+		border-top: 1rpx solid #f0f0f0;
+
+		.preview-header {
+			margin-bottom: 16rpx;
+
+			.preview-title {
+				font-size: 26rpx;
+				font-weight: 600;
+				color: #666;
+			}
+		}
+
+		.preview-list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 12rpx;
+		}
+
+		.preview-item {
+			display: flex;
+			align-items: center;
+			gap: 8rpx;
+			padding: 10rpx 16rpx;
+			background-color: #e6f7ff;
+			border-radius: 12rpx;
+
+			.preview-index {
+				width: 24rpx;
+				height: 24rpx;
+				background-color: #1890ff;
+				color: #fff;
+				font-size: 18rpx;
+				font-weight: 600;
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.preview-name {
+				font-size: 26rpx;
+				color: #1890ff;
+				font-weight: 500;
+			}
+
+			.preview-remove {
+				width: 32rpx;
+				height: 32rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				transition: all 0.2s ease;
+
+				&:active {
+					transform: scale(0.9);
+				}
+			}
+		}
+	}
+
+	/* 底部操作按钮 */
+	.bottom-actions {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: #fff;
+		padding: 20rpx 30rpx;
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+		border-top: 1rpx solid #f0f0f0;
+		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
+		z-index: 99;
+
+		.action-buttons {
+			display: flex;
+			gap: 16rpx;
+		}
+	}
+
+	.cancel-btn,
+	.confirm-btn {
+		flex: 1;
+		height: 88rpx;
+		border-radius: 16rpx;
+		border: none;
+		font-size: 30rpx;
+		font-weight: 600;
+		transition: all 0.25s ease;
+	}
+
+	.cancel-btn {
+		background-color: #f5f5f5;
+		color: #666;
+
+		&:active {
+			background-color: #e8e8e8;
+			transform: scale(0.96);
+		}
+	}
+
+	.confirm-btn {
+		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+		color: #fff;
+		box-shadow: 0 6rpx 16rpx rgba(24, 144, 255, 0.35);
+
+		&:active {
+			transform: scale(0.96);
+			box-shadow: 0 3rpx 8rpx rgba(24, 144, 255, 0.25);
+		}
+	}
+
+	/* 动画 */
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>
diff --git a/src/pages/userFunc/swiming.vue b/src/pages/userFunc/swiming.vue
index 2b5d83e..1e306c8 100644
--- a/src/pages/userFunc/swiming.vue
+++ b/src/pages/userFunc/swiming.vue
@@ -24,19 +24,19 @@
 			</view>
 
 			<view class="athletes-list">
-				<view v-for="(athlete, index) in athletes" :key="athlete.id" @longpress="deleStu(athlete.id)" class="athlete-item"
-					:class="{ finished: athlete.finished, fastest: athlete.isFastest }">
+				<view v-for="(athlete, index) in athletes" :key="athlete.id" @longpress="deleStu(athlete.id)"
+					class="athlete-item" :class="{ finished: athlete.finished, fastest: athlete.isFastest }">
 					<view class="athlete-number">{{ index+1 }}</view>
 					<view class="athlete-info">
 						<text class="athlete-name">{{ athlete.name }}</text>
-						<text class="athlete-lane">{{ athlete.lane }}</text>
+						<text class="athlete-lane">{{ athlete.gender }} · {{ athlete.age }}岁</text>
 					</view>
 					<view class="time-wrapper">
 						<text class="athlete-time">{{ formatTime(athlete.time) }}</text>
 						<text v-if="athlete.bestTime" class="best-time">最快: {{ formatTime(athlete.bestTime) }}</text>
 					</view>
 					<view class="" style="display: flex;align-items: center; gap: 10rpx;">
-						<view v-if="stopwatchMode=='together'" @click="handleAthleteFirstButton(athlete, index)">
+						<view @click="handleAthleteFirstButton(athlete, index)">
 							<u-icon name="pause-circle" bold="true" size="22" color="#1890ff"></u-icon>
 						</view>
 						<view @click="resetAthleteTime(athlete)">
@@ -128,12 +128,34 @@
 			</view>
 			<view class="modal-content">
 				<view class="form-group">
-					<text class="form-label">学生姓名</text>
-					<input class="form-input" v-model="newStudentName" placeholder="请输入学生姓名" type="text" />
+					<text class="form-label">姓名</text>
+					<input class="form-input" v-model="newStudentName" placeholder="请输入姓名" type="text" />
 				</view>
 				<view class="form-group">
-					<text class="form-label">序号</text>
-					<input class="form-input" v-model="newStudentLane" placeholder="请输入序号" type="text" />
+					<text class="form-label">性别</text>
+					<radio-group class="radio-group" @change="onGenderChange">
+						<label class="radio-item">
+							<radio value="男" :checked="newStudentGender === '男'" color="#1890ff" />
+							<text class="radio-text">男</text>
+						</label>
+						<label class="radio-item">
+							<radio value="女" :checked="newStudentGender === '女'" color="#1890ff" />
+							<text class="radio-text">女</text>
+						</label>
+					</radio-group>
+				</view>
+				<view class="form-group">
+					<text class="form-label">出生日期</text>
+					<view class="date-picker-wrapper" @click="openDatePicker">
+						<view class="date-value" :class="{ placeholder: !newStudentBirthday }">
+							{{ Service.formatDate(newStudentBirthday,2) || '请选择出生日期' }}
+						</view>
+						<u-icon name="calendar" size="20" color="#999"></u-icon>
+					</view>
+				</view>
+				<view class="form-group">
+					<text class="form-label">年龄</text>
+					<input class="form-input" v-model="newStudentAge" placeholder="自动计算" type="text" disabled />
 				</view>
 			</view>
 			<view class="modal-footer">
@@ -146,6 +168,9 @@
 		<view class="float-save-btn" style="color: #fff; font-size: 24rpx;" @click="saveData">
 			保存
 		</view>
+
+		<!-- 日期选择器 -->
+		<u-datetime-picker v-model="newStudentBirthday" :show="showDatePicker" mode="date" @confirm="onDateConfirm" @cancel="showDatePicker = false" />
 	</view>
 </template>
 
@@ -158,7 +183,9 @@
 		id : string
 		number : string
 		name : string
-		lane : string
+		gender : string
+		age : string
+		birthday : string
 		time : number
 		bestTime : number | null
 		finished : boolean
@@ -167,10 +194,10 @@
 
 	// 选手列表
 	const athletes = ref<Athlete[]>([
-		{ id: '1', number: '01', name: '张三', lane: '第一泳道', time: 0, bestTime: null, finished: false, isFastest: false },
-		{ id: '2', number: '02', name: '李四', lane: '第二泳道', time: 0, bestTime: null, finished: false, isFastest: false },
-		{ id: '3', number: '03', name: '王五', lane: '第三泳道', time: 0, bestTime: null, finished: false, isFastest: false },
-		{ id: '4', number: '04', name: '赵六', lane: '第四泳道', time: 0, bestTime: null, finished: false, isFastest: false }
+		{ id: '1', number: '01', name: '张三', gender: '男', age: '18', birthday: '2006-01-01', time: 0, bestTime: null, finished: false, isFastest: false },
+		{ id: '2', number: '02', name: '李四', gender: '女', age: '17', birthday: '2007-01-01', time: 0, bestTime: null, finished: false, isFastest: false },
+		{ id: '3', number: '03', name: '王五', gender: '男', age: '19', birthday: '2005-01-01', time: 0, bestTime: null, finished: false, isFastest: false },
+		{ id: '4', number: '04', name: '赵六', gender: '女', age: '18', birthday: '2006-01-01', time: 0, bestTime: null, finished: false, isFastest: false }
 	])
 
 	// 计时器状态
@@ -194,26 +221,32 @@
 
 	// 新学生信息
 	const newStudentName = ref('')
-	const newStudentLane = ref('')
+	const newStudentGender = ref('男')
+	const newStudentBirthday = ref('')
+	const newStudentAge = ref('')
+
+	// 日期选择器相关
+	const showDatePicker = ref(false)
+	const currentDate = ref('')
 
 	// 计算已完成的选手
 	const finishedAthletes = computed(() => {
 		return athletes.value.filter(a => a.finished)
 	})
 
-	const deleStu = (id:any) => {
+	const deleStu = (id : any) => {
 		uni.showModal({
 			title: '提示', // 对话框标题
 			content: '是否删除该学生', // 显示的内容
 			showCancel: true, // 是否显示取消按钮
 			success: function (res) {
 				if (res.confirm) {
-					let index= athletes.value.findIndex((item)=>{
-						return item.id==id
+					let index = athletes.value.findIndex((item) => {
+						return item.id == id
 					})
-					athletes.value.splice(index,1)
+					athletes.value.splice(index, 1)
 				} else if (res.cancel) {
-					
+
 				}
 			}
 		});
@@ -317,34 +350,29 @@
 	// 处理选手第一个按钮点击
 	const handleAthleteFirstButton = (athlete : Athlete, index : number) => {
 		// 如果是一起出发模式，记录该选手时间
-		if (stopwatchMode.value === 'together') {
-			if (athlete.finished) {
-				Service.Msg('该选手已记录')
-				return
-			}
+		if (athlete.finished) {
+			Service.Msg('该选手已记录')
+			return
+		}
 
-			athlete.finished = true
-			athlete.time = currentTime.value
+		athlete.finished = true
+		athlete.time = currentTime.value
 
-			// 更新最快记录
-			if (athlete.bestTime === null || athlete.time < athlete.bestTime) {
-				athlete.bestTime = athlete.time
-			}
+		// 更新最快记录
+		if (athlete.bestTime === null || athlete.time < athlete.bestTime) {
+			athlete.bestTime = athlete.time
+		}
 
-			// 更新最快选手
-			updateFastestAthlete()
+		// 更新最快选手
+		updateFastestAthlete()
 
-			// 检查是否所有选手都完成了
-			const allFinished = athletes.value.every(a => a.finished)
-			if (allFinished) {
-				stopTimer()
-				Service.Msg('所有选手已完成！')
-			} else {
-				Service.Msg(`${athlete.name} 已记录`)
-			}
+		// 检查是否所有选手都完成了
+		const allFinished = athletes.value.every(a => a.finished)
+		if (allFinished) {
+			stopTimer()
+			Service.Msg('所有选手已完成！')
 		} else {
-			// 间隔出发模式，重置选手时间
-			resetAthleteTime(athlete)
+			Service.Msg(`${athlete.name} 已记录`)
 		}
 	}
 
@@ -401,17 +429,61 @@
 		showStopwatchModal.value = false
 	}
 
+	// 性别选择变化
+	const onGenderChange = (e : any) => {
+		newStudentGender.value = e.detail.value
+	}
+
+	// 打开日期选择器
+	const openDatePicker = () => {
+		showDatePicker.value = true
+	}
+
+	// 根据出生日期计算年龄
+	const calculateAge = (birthday : string) : string => {
+		const birthDate = new Date(birthday)
+		const today = new Date()
+		let age = today.getFullYear() - birthDate.getFullYear()
+		const monthDiff = today.getMonth() - birthDate.getMonth()
+
+		// 如果当前月份小于出生月份，或者月份相同但日期还没到，年龄减1
+		if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+			age--
+		}
+
+		return age.toString()
+	}
+
+	// 日期选择确认
+	const onDateConfirm = (e : any) => {
+		let selectedDate = e
+		if (Array.isArray(e) && e.length > 0) {
+			selectedDate = e[0]
+		} else if (e && e.value) {
+			selectedDate = e.value
+		}
+		newStudentBirthday.value = selectedDate
+		newStudentAge.value = calculateAge(selectedDate)
+		showDatePicker.value = false
+	}
+
 	// 关闭添加学生弹出框
 	const closeAddStudentModal = () => {
 		showAddStudentModal.value = false
 		newStudentName.value = ''
-		newStudentLane.value = ''
+		newStudentGender.value = '男'
+		newStudentBirthday.value = ''
+		newStudentAge.value = ''
 	}
 
 	// 添加新学生
 	const addNewStudent = () => {
 		if (!newStudentName.value.trim()) {
-			Service.Msg('请输入学生姓名')
+			Service.Msg('请输入姓名')
+			return
+		}
+		if (!newStudentBirthday.value.trim()) {
+			Service.Msg('请选择出生日期')
 			return
 		}
 
@@ -420,7 +492,9 @@
 			id: Date.now().toString(),
 			number: newNumber,
 			name: newStudentName.value.trim(),
-			lane: newStudentLane.value.trim() || `第${newNumber}泳道`,
+			gender: newStudentGender.value,
+			age: newStudentAge.value.trim(),
+			birthday: newStudentBirthday.value.trim(),
 			time: 0,
 			bestTime: null,
 			finished: false,
@@ -873,6 +947,46 @@
 		}
 	}
 
+	/* 性别单选按钮组 */
+	.radio-group {
+		display: flex;
+		gap: 40rpx;
+
+		.radio-item {
+			display: flex;
+			align-items: center;
+			gap: 12rpx;
+
+			.radio-text {
+				font-size: 28rpx;
+				color: #333;
+			}
+		}
+	}
+
+	/* 日期选择器包装 */
+	.date-picker-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		height: 80rpx;
+		background-color: #f5f5f5;
+		border-radius: 12rpx;
+		padding: 0 24rpx;
+		cursor: pointer;
+
+		.date-value {
+			font-size: 28rpx;
+			color: #333;
+			flex: 1;
+
+			&.placeholder {
+				color: #999;
+			}
+		}
+	}
+
 	/* 悬浮保存按钮 */
 	.float-save-btn {
 		position: fixed;
diff --git a/src/uni_modules/qiun-data-charts/package.json b/src/uni_modules/qiun-data-charts/package.json
index eb4f706..875dc5f 100644
--- a/src/uni_modules/qiun-data-charts/package.json
+++ b/src/uni_modules/qiun-data-charts/package.json
@@ -9,11 +9,13 @@
     "f2",
     "图表",
     "可视化"
-],
+  ],
   "repository": "https://gitee.com/uCharts/uCharts",
-"engines": {
+  "engines": {
+    "uni-app": "^3.1.0",
+    "uni-app-x": "^3.1.0"
   },
-"dcloudext": {
+  "dcloudext": {
     "sale": {
       "regular": {
         "price": "0.00"
@@ -31,48 +33,66 @@
       "permissions": "无"
     },
     "npmurl": "https://www.npmjs.com/~qiun",
-    "type": "component-vue"
+    "type": "component-vue",
+    "darkmode": "-",
+    "i18n": "-",
+    "widescreen": "-"
   },
   "uni_modules": {
     "dependencies": [],
     "encrypt": [],
     "platforms": {
       "cloud": {
-        "tcb": "y",
-        "aliyun": "y"
+        "tcb": "√",
+        "aliyun": "√"
       },
       "client": {
-        "App": {
-          "app-vue": "y",
-          "app-nvue": "y"
+        "uni-app": {
+          "vue": {
+            "vue2": "-",
+            "vue3": "-"
+          },
+          "web": {
+            "safari": "-",
+            "chrome": "-"
+          },
+          "app": {
+            "vue": "-",
+            "nvue": "-",
+            "android": "-",
+            "ios": "-",
+            "harmony": "-"
+          },
+          "mp": {
+            "weixin": "-",
+            "alipay": "-",
+            "toutiao": "-",
+            "baidu": "-",
+            "kuaishou": "-",
+            "jd": "-",
+            "harmony": "-",
+            "qq": "-",
+            "lark": "-",
+            "xhs": "-"
+          },
+          "quickapp": {
+            "huawei": "-",
+            "union": "-"
+          }
         },
-        "H5-mobile": {
-          "Safari": "y",
-          "Android Browser": "y",
-          "微信浏览器(Android)": "y",
-          "QQ浏览器(Android)": "y"
-        },
-        "H5-pc": {
-          "Chrome": "y",
-          "IE": "y",
-          "Edge": "y",
-          "Firefox": "y",
-          "Safari": "y"
-        },
-        "小程序": {
-          "微信": "y",
-          "阿里": "y",
-          "百度": "y",
-          "字节跳动": "y",
-          "QQ": "y"
-        },
-        "快应用": {
-          "华为": "y",
-          "联盟": "y"
-        },
-        "Vue": {
-            "vue2": "y",
-            "vue3": "y"
+        "uni-app-x": {
+          "web": {
+            "safari": "-",
+            "chrome": "-"
+          },
+          "app": {
+            "android": "-",
+            "ios": "-",
+            "harmony": "-"
+          },
+          "mp": {
+            "weixin": "-"
+          }
         }
       }
     }