From 4bbe69c9e844840020cbdcf280bd88ad4b3f1a72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B0=E5=B2=A9?= <tybb88x@gmail.com>
Date: Tue, 26 Aug 2025 17:35:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E8=AF=BE=E7=A8=8B=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E7=9B=B8=E5=85=B3=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/courseRecord.js                       |   9 +
 src/common/common.js                          |   2 +
 src/pages.json                                |   9 +
 .../components/examRecordItem.vue             | 340 ++++++++++---
 .../components/examRecordList.vue             |  79 +++
 src/pages/courseRecord/components/item.vue    | 290 -----------
 .../components/practiceRecordItem.vue         | 459 ++++++++++--------
 .../components/practiceRecordList.vue         |  70 +++
 .../components/studyRecordItem.vue            | 292 ++++++++++-
 .../components/studyRecordList.vue            | 100 ++++
 .../coursePracticeRecordDetail.vue            | 133 +++++
 src/pages/courseRecord/index.vue              |  14 +-
 src/pages/practice/index.vue                  |   1 -
 src/pagesA.json                               |   9 +
 14 files changed, 1225 insertions(+), 582 deletions(-)
 create mode 100644 src/pages/courseRecord/components/examRecordList.vue
 delete mode 100644 src/pages/courseRecord/components/item.vue
 create mode 100644 src/pages/courseRecord/components/practiceRecordList.vue
 create mode 100644 src/pages/courseRecord/components/studyRecordList.vue
 create mode 100644 src/pages/courseRecord/coursePracticeRecordDetail.vue

diff --git a/src/api/courseRecord.js b/src/api/courseRecord.js
index e6800536..6fd1d4b6 100644
--- a/src/api/courseRecord.js
+++ b/src/api/courseRecord.js
@@ -50,6 +50,15 @@ export const queryPracticeHis = (data) => {
 		data
 	});
 };
+// 练习详情 通过 exrId 查询 
+export const queryPracticeRecordByExrId = (data) => {
+	return request({
+		url: base_url + '/traCrsPractice/queryPracticeRecordByExrId',
+		method: 'post',
+		toastErrors: true,
+		data
+	});
+};
 
 /**考试*/
 export const queryCrsExamRecordPaging = (data) => {
diff --git a/src/common/common.js b/src/common/common.js
index 9628f88f..06a08a74 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -162,6 +162,8 @@ const formatDate2 = (timestamp, format = 'yyyy-MM-dd HH:mm:ss') => {
 		.replace('ss', seconds.toString().padStart(2, '0'))
 }
 
+
+
 // 获取token
 export const getToken = () => uni.getStorageSync('token')
 export const setToken = data => uni.setStorageSync('token', data)
diff --git a/src/pages.json b/src/pages.json
index dd0a8c05..35f982b2 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -271,6 +271,15 @@
                 }
             }
         },
+        {
+            "path": "pages/courseRecord/coursePracticeRecordDetail",
+            "style": {
+                "navigationBarTitleText": "课程记录练习记录详情",
+                "app-plus": {
+                    "titleNView": false
+                }
+            }
+        },
         {
             "path": "pages/course/index",
             "style": {
diff --git a/src/pages/courseRecord/components/examRecordItem.vue b/src/pages/courseRecord/components/examRecordItem.vue
index 7fd64906..11f8bb4a 100644
--- a/src/pages/courseRecord/components/examRecordItem.vue
+++ b/src/pages/courseRecord/components/examRecordItem.vue
@@ -1,85 +1,285 @@
 <template>
-	<view class="scroll_div">
-		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
-			<itemVue :item="item"  v-for="(item, index) in data_list" ></itemVue>
-			<list-no-data v-if="total == 0 && status == 'nomore'"></list-no-data>
-			<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
-		</scroll-view>
+	<view class="item">
+		<view class="details_div">
+			<view class="img_div" v-if="props.mode === 'testingHall'">
+				<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
+			</view>
+			<view class="right_div">
+				<view class="title ellipsis-text">
+					{{ item.examName }}
+				</view>
+				<view class="prompt_div">
+					<view class="prompt_div_left">
+						<view class="top">{{ item.highestGrade || 0 }}</view>
+						<view class="bottom">历史最高分</view>
+					</view>
+					<view class="prompt_div_line"></view>
+					<view class="prompt_div_right" @click="show_list_click">
+						<view class="click_text">
+							{{ item.examCnt || 0 }}
+							<uv-icon
+								class="click_text_icon"
+								:class="{click_text_icon_action:show_list_state}"
+								name="arrow-right"
+								color="#0066FF"
+								size="12"
+								:bold="true"
+							></uv-icon>
+						</view>
+						<view class="bottom">考试次数</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="list_div" :style="{ height: list_div_height }">
+			<view class="list_item" v-for="item_list in data_list" @click="click_list_item(item_list)">
+				<view class="list_content">
+					<view class="list_small_item">
+						<image src="@/static/images/courseRecord/time.png" class="icon_img"></image>
+						<view class="prompt">考试时间：{{ item_list.examStartTm }}</view>
+					</view>
+					<view class="list_small_item">
+						<image src="@/static/images/courseRecord/duration.png" class="icon_img"></image>
+						<view class="prompt">考试得分：{{ item_list.examGrade }}</view>
+					</view>
+				</view>
+				<view class="fl1"></view>
+				<uv-icon name="arrow-right" color="#979797" size="17" :bold="true"></uv-icon>
+			</view>
+			<uv-load-more
+				v-if="status === 'loading'"
+				:status="status"
+				loadmore-text="轻轻上拉加载"
+				:height="30"
+			></uv-load-more>
+		</view>
 	</view>
 </template>
-<script setup>
-	import itemVue from './item.vue';
 
+<script setup>
+	import { computed, ref, reactive, nextTick } from 'vue';
 	import { setPageCache } from '@/common/common';
 	import common from '@/common/common';
-	import { ref, reactive, onMounted, nextTick } from 'vue';
-	import { queryPracticeRecordPaging, queryPracticeHis, queryCrsExamRecordPaging } from '@/api/courseRecord.js';
-	import { studyDurationIcon, studyTimeIcon } from '@/common/imgSvg';
-	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
-	const limit = 15;
-	const total = ref(-1);
-	const page = ref(0);
-	const data_list = reactive([]);
-	const props = defineProps({});
-	
-	const getData = (from = '', searchText = '') => {
-		if (from == 'first') {
-			if (total.value !== -1) {
-				return;
+	const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
+	const props = defineProps({
+		item: {
+			type: Object,
+			default: () => {}
+		},
+		mode: {
+			type: String,
+			default: 'testingHall',
+			validator: (value) => {
+				// 考试: examination
+				// 考试中心 testingHall
+				return ['examination', 'testingHall'].includes(value);
 			}
-			status.value = 'loading';
-			total.value = -1;
-			page.value = 1;
-			data_list.length = 0;
-		} else {
-			if (status.value !== 'loadmore' && status.value !== '') return;
-			status.value = 'loading';
-			page.value++;
 		}
-		setTimeout(() => {
-			queryCrsExamRecordPaging({
-				page: page.value,
-				limit: limit
-			})
-				.then((res) => {
-					total.value = res.total;
-					data_list.push(...res.body);
-				})
-				.finally(() => {
-					if (data_list.length >= total.value) {
-						status.value = 'nomore';
-					} else {
-						status.value = 'loadmore';
-					}
-				});
-		}, 200);
-	};
-	const getStatusClass = (isFinish) => {
-		// 00进行中、01已完成、02已超时
-		if (isFinish === '00') return 'in_progress';
-		if (isFinish === '01') return 'completed';
-		return 'expired';
-	};
-	
-	const scrolltolower = (item) => {
-		getData();
-	};
-	const search = (value) => {
-		total.value = -1;
-		getData('first', value);
-	};
-	defineExpose({
-		getData,
-		search
 	});
+
+	import { queryCrsExamHisByExamId } from '@/api/courseRecord.js';
+	const item = computed(() => props.item);
+	const data_list = reactive([]);
+	const total = ref(-1);
+	const show_list_state = ref(false);
+	const list_div_height = computed(() => {
+		if (!show_list_state.value) {
+			return '0';
+		} else if (status.value === 'loading') {
+			return '100rpx';
+		} else {
+			return data_list.length * 136 + 'rpx';
+		}
+	});
+
+	// 点击获取考试详情
+	const show_list_click = () => {
+		show_list_state.value = !show_list_state.value;
+		if (total.value === -1) {
+			//加载数据
+			status.value = 'loading';
+			data_list.length = 0;
+			queryCrsExamHisByExamId({ examId: item.value.examId }).then((res) => {
+				data_list.push(...res.body);
+				total.value = data_list.length;
+				status.value = 'loadmore';
+			});
+		}
+	};
+	// 跳转到详情
+	const click_list_item = (list_item) => {
+		const examLenTm = 666;
+		const papersName = item.value.examName;
+		common.navigateTo(
+			`/pages/examination/result?execId=${list_item.execId}&examLenTm=${examLenTm}&papersName=${papersName}`
+		);
+	};
 </script>
 
 <style scoped lang="scss">
-	.scroll_div {
-		background-color: #f1f5fa;
+	.icon_img {
+		width: 24rpx;
+		height: 24rpx;
 	}
-	
-	.scroll-Y {
-		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
+
+	.list_div {
+		overflow: hidden; /* 确保内容不会溢出容器 */
+		transition: height 0.2s ease-out; /* 高度动画 */
+		.list_item {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 18rpx 32rpx 18rpx 28rpx;
+			background-color: #f9fbff;
+			border-radius: 8rpx;
+			margin: 20rpx 0 0 0;
+			.list_content {
+				.list_small_item {
+					display: flex;
+					align-items: center;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #666666;
+					line-height: 40rpx;
+					text-align: left;
+					font-style: normal;
+
+					.prompt {
+						margin-left: 16rpx;
+					}
+				}
+			}
+		}
+	}
+	.item {
+		margin: 17rpx 20rpx;
+		background-color: #fff;
+		border-radius: 16rpx;
+		padding: 32rpx 22rpx;
+		.details_div {
+			display: flex;
+
+			.img_div {
+				position: relative;
+				width: 226rpx;
+				height: 168rpx;
+				overflow: hidden;
+				border-radius: 22rpx;
+
+				.img {
+					width: 226rpx;
+					height: 168rpx;
+				}
+
+				.subscript {
+					position: absolute;
+					right: 0;
+					top: 0;
+					width: 92rpx;
+					height: 46rpx;
+					border-radius: 0px 0px 0px 22rpx;
+					font-family: PingFangSC;
+					font-weight: 400;
+					font-size: 22rpx;
+					line-height: 32px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+
+			.right_div {
+				flex: 1;
+				overflow: hidden;
+				margin-left: 24rpx;
+				display: flex;
+				flex-direction: column;
+
+				.title {
+					font-family: PingFangSC;
+					color: #333333;
+					text-align: left;
+					font-style: normal;
+					font-weight: 600;
+					font-size: 28rpx; /* 字体大小30rpx */
+					overflow: hidden; /* 超出部分隐藏 */
+					margin-bottom: 8rpx;
+					min-height: 40rpx;
+				}
+
+				.prompt_div {
+					font-family: PingFangSC;
+					font-weight: 400;
+					font-size: 22rpx;
+					color: #666;
+					line-height: 34rpx;
+					display: flex;
+					align-items: center;
+					overflow: hidden;
+					height: 116rpx;
+					background-color: #f9fbff;
+					border-radius: 8rpx;
+					justify-content: space-around;
+					.prompt_div_line {
+						width: 4rpx;
+						height: 30rpx;
+						background: linear-gradient(
+							to bottom,
+							RGBA(242, 244, 248, 1) 0%,
+							RGBA(230, 232, 238, 1) 30%,
+							RGBA(230, 232, 238, 1) 70%,
+							RGBA(242, 244, 248, 1) 100%
+						);
+					}
+					.prompt_div_left,
+					.prompt_div_right {
+						flex: 1;
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						.top,
+						.click_text {
+							font-family: Arial;
+							font-weight: 700;
+							font-size: 30rpx;
+							color: #333333;
+							line-height: 34rpx;
+							text-align: center;
+							font-style: normal;
+						}
+						.bottom {
+						}
+						.click_text {
+							position: relative;
+							.click_text_icon {
+								position: absolute;
+								margin-left: 18rpx;
+								top: calc(50% - 12rpx);
+								left: calc(100% - 14rpx);
+								/* 添加过渡动画，包含延迟效果 */
+								transition: transform 0.2s ease;
+							}
+							.click_text_icon_action{
+								transform: rotate(90deg);
+							}
+						}
+					}
+				}
+
+				.people_progress_div {
+					display: flex;
+					font-family: PingFangSC;
+					font-weight: 400;
+					font-size: 23rpx;
+					color: #666;
+					margin-bottom: 23rpx;
+
+					line-height: 23rpx;
+					flex-wrap: nowrap;
+					height: 23rpx;
+					overflow: hidden;
+				}
+			}
+		}
 	}
 </style>
diff --git a/src/pages/courseRecord/components/examRecordList.vue b/src/pages/courseRecord/components/examRecordList.vue
new file mode 100644
index 00000000..c3f0503c
--- /dev/null
+++ b/src/pages/courseRecord/components/examRecordList.vue
@@ -0,0 +1,79 @@
+<template>
+	<view class="scroll_div">
+		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
+			<itemVue :item="item" v-for="(item, index) in data_list"></itemVue>
+			<list-no-data v-if="total == 0 && status == 'nomore'"></list-no-data>
+			<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
+		</scroll-view>
+	</view>
+</template>
+<script setup>
+	import itemVue from './examRecordItem.vue';
+
+	import { setPageCache } from '@/common/common';
+	import common from '@/common/common';
+	import { ref, reactive, onMounted, nextTick } from 'vue';
+	import { queryCrsExamRecordPaging } from '@/api/courseRecord.js';
+	import { studyDurationIcon, studyTimeIcon } from '@/common/imgSvg';
+	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
+	const limit = 15;
+	const total = ref(-1);
+	const page = ref(0);
+	const data_list = reactive([]);
+
+	const getData = (from = '') => {
+		if (from == 'first') {
+			if (total.value !== -1) {
+				return;
+			}
+			status.value = 'loading';
+			total.value = -1;
+			page.value = 1;
+			data_list.length = 0;
+		} else {
+			if (status.value !== 'loadmore' && status.value !== '') return;
+			status.value = 'loading';
+			page.value++;
+		}
+		queryCrsExamRecordPaging({
+			page: page.value,
+			limit: limit
+		})
+			.then((res) => {
+				total.value = res.total;
+				data_list.push(...res.body);
+			})
+			.finally(() => {
+				if (data_list.length >= total.value) {
+					status.value = 'nomore';
+				} else {
+					status.value = 'loadmore';
+				}
+			});
+	};
+	
+	const getStatusClass = (isFinish) => {
+		// 00进行中、01已完成、02已超时
+		if (isFinish === '00') return 'in_progress';
+		if (isFinish === '01') return 'completed';
+		return 'expired';
+	};
+
+	const scrolltolower = (item) => {
+		getData();
+	};
+
+	defineExpose({
+		getData
+	});
+</script>
+
+<style scoped lang="scss">
+	.scroll_div {
+		background-color: #f1f5fa;
+	}
+
+	.scroll-Y {
+		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
+	}
+</style>
diff --git a/src/pages/courseRecord/components/item.vue b/src/pages/courseRecord/components/item.vue
deleted file mode 100644
index 863d8aef..00000000
--- a/src/pages/courseRecord/components/item.vue
+++ /dev/null
@@ -1,290 +0,0 @@
-<template>
-	<view class="item" @click="click_item(item)">
-		<view class="details_div">
-			<view class="img_div" v-if="props.mode === 'testingHall'">
-				<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
-			</view>
-			<view class="right_div">
-				<view class="title ellipsis-text">
-					{{ item.examName }}
-				</view>
-				<view class="prompt_div">
-					<view class="prompt_div_left">
-						<view class="top">{{ item.highestGrade || 0 }}</view>
-						<view class="bottom">历史最高分</view>
-					</view>
-					<view class="prompt_div_line"></view>
-					<view class="prompt_div_right" @click="show_list_click">
-						<view class="click_text">
-							{{ item.examCnt || 0 }}
-							<uv-icon
-								class="click_text_icon"
-								:name="show_list_state ? 'arrow-down' : 'arrow-right'"
-								color="#0066FF"
-								size="12"
-								:bold="true"
-							></uv-icon>
-						</view>
-						<view class="bottom">考试次数</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="list_div" :class="{ loaded: isLoaded }" :style="{ height: list_div_height }">
-			<view class="list_item" v-for="item_list in data_list">
-				<view class="list_content">
-					<view class="list_small_item">
-						<image src="@/static/images/courseRecord/time.png" class="icon_img"></image>
-						<view class="prompt">考试时间：{{ item_list.examStartTm }}</view>
-					</view>
-					<view class="list_small_item">
-						<image src="@/static/images/courseRecord/duration.png" class="icon_img"></image>
-						<view class="prompt">考试得分：{{ item_list.examGrade }}</view>
-					</view>
-				</view>
-				<view class="fl1"></view>
-				<uv-icon name="arrow-right" color="#979797" size="17" :bold="true"></uv-icon>
-			</view>
-			<uv-load-more
-				v-if="status === 'loading'"
-				:status="status"
-				loadmore-text="轻轻上拉加载"
-				:height="30"
-			></uv-load-more>
-		</view>
-	</view>
-</template>
-
-<script setup>
-	import { computed, ref, reactive, nextTick } from 'vue';
-	import { setPageCache } from '@/common/common';
-	import common from '@/common/common';
-	const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
-	const props = defineProps({
-		item: {
-			type: Object,
-			default: () => {}
-		},
-		mode: {
-			type: String,
-			default: 'testingHall',
-			validator: (value) => {
-				// 考试: examination
-				// 练习: practice
-				// 错题本: mistake
-				// 学习: study
-				// 考试结算页 settlement
-				// 考试中心 testingHall
-				return ['examination', 'practice', 'mistake', 'study', 'settlement', 'testingHall'].includes(value);
-			}
-		}
-	});
-
-	import { queryCrsExamHisByExamId } from '@/api/courseRecord.js';
-
-	const item = computed(() => props.item);
-
-	const data_list = reactive([]);
-	const isLoaded = ref(false);
-	const total = ref(-1);
-	const show_list_state = ref(false);
-	const list_div_height = computed(() => {
-		if (!show_list_state.value) {
-			return '0';
-		} else if (status.value === 'loading') {
-			return '100rpx';
-		} else {
-			return data_list.length * 136 + 'rpx';
-		}
-	});
-
-	// 点击获取考试详情
-	const show_list_click = () => {
-		show_list_state.value = !show_list_state.value;
-
-		if (total.value === -1) {
-			//加载数据
-			status.value = 'loading';
-			data_list.length = 0;
-			queryCrsExamHisByExamId({ examId: item.value.examId }).then((res) => {
-				console.log('queryCrsExamHisByExamId', res);
-				data_list.push(...res.body);
-				total.value = data_list.length;
-				status.value = 'loadmore';
-				// // 数据更新后触发动画
-				// // 使用$nextTick确保DOM已更新
-
-				nextTick(() => {
-					// isLoaded.value = true;
-				});
-			});
-		}
-	};
-
-	// 跳转到详情
-	const click_item = () => {};
-</script>
-
-<style scoped lang="scss">
-	.icon_img {
-		width: 24rpx;
-		height: 24rpx;
-	}
-
-	.list_div {
-		overflow: hidden; /* 确保内容不会溢出容器 */
-		transition: height 0.2s ease-out; /* 高度动画 */
-		.list_item {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 18rpx 32rpx 18rpx 28rpx;
-			background-color: #f9fbff;
-			border-radius: 8rpx;
-			margin: 20rpx 0 0 0;
-			.list_content {
-				.list_small_item {
-					display: flex;
-					align-items: center;
-					font-weight: 400;
-					font-size: 24rpx;
-					color: #666666;
-					line-height: 40rpx;
-					text-align: left;
-					font-style: normal;
-
-					.prompt {
-						margin-left: 16rpx;
-					}
-				}
-			}
-		}
-	}
-	.item {
-		margin: 17rpx 20rpx;
-		background-color: #fff;
-		border-radius: 16rpx;
-		padding: 32rpx 22rpx;
-		.details_div {
-			display: flex;
-
-			.img_div {
-				position: relative;
-				width: 226rpx;
-				height: 168rpx;
-				overflow: hidden;
-				border-radius: 22rpx;
-
-				.img {
-					width: 226rpx;
-					height: 168rpx;
-				}
-
-				.subscript {
-					position: absolute;
-					right: 0;
-					top: 0;
-					width: 92rpx;
-					height: 46rpx;
-					border-radius: 0px 0px 0px 22rpx;
-					font-family: PingFangSC;
-					font-weight: 400;
-					font-size: 22rpx;
-					line-height: 32px;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-				}
-			}
-
-			.right_div {
-				flex: 1;
-				overflow: hidden;
-				margin-left: 24rpx;
-				display: flex;
-				flex-direction: column;
-
-				.title {
-					font-family: PingFangSC;
-					color: #333333;
-					text-align: left;
-					font-style: normal;
-					font-weight: 600;
-					font-size: 28rpx; /* 字体大小30rpx */
-					overflow: hidden; /* 超出部分隐藏 */
-					margin-bottom: 8rpx;
-					min-height: 40rpx;
-				}
-
-				.prompt_div {
-					font-family: PingFangSC;
-					font-weight: 400;
-					font-size: 22rpx;
-					color: #666;
-					line-height: 34rpx;
-					display: flex;
-					align-items: center;
-					overflow: hidden;
-					height: 116rpx;
-
-					background-color: #f9fbff;
-					border-radius: 8rpx;
-					justify-content: space-around;
-					.prompt_div_line {
-						width: 4rpx;
-						height: 30rpx;
-						background: linear-gradient(
-							to bottom,
-							RGBA(242, 244, 248, 1) 0%,
-							RGBA(230, 232, 238, 1) 30%,
-							/* 中间开始 */ RGBA(230, 232, 238, 1) 70%,
-							/* 中间结束 */ RGBA(242, 244, 248, 1) 100%
-						);
-					}
-					.prompt_div_left,
-					.prompt_div_right {
-						flex: 1;
-						display: flex;
-						flex-direction: column;
-						align-items: center;
-						.top,
-						.click_text {
-							font-family: Arial;
-							font-weight: 700;
-							font-size: 30rpx;
-							color: #333333;
-							line-height: 34rpx;
-							text-align: center;
-							font-style: normal;
-						}
-						.bottom {
-						}
-						.click_text {
-							position: relative;
-							.click_text_icon {
-								position: absolute;
-								margin-left: 18rpx;
-								top: calc(50% - 12rpx);
-								right: -220%;
-							}
-						}
-					}
-				}
-
-				.people_progress_div {
-					display: flex;
-					font-family: PingFangSC;
-					font-weight: 400;
-					font-size: 23rpx;
-					color: #666;
-					margin-bottom: 23rpx;
-
-					line-height: 23rpx;
-					flex-wrap: nowrap;
-					height: 23rpx;
-					overflow: hidden;
-				}
-			}
-		}
-	}
-</style>
diff --git a/src/pages/courseRecord/components/practiceRecordItem.vue b/src/pages/courseRecord/components/practiceRecordItem.vue
index 24917d24..53a9c972 100644
--- a/src/pages/courseRecord/components/practiceRecordItem.vue
+++ b/src/pages/courseRecord/components/practiceRecordItem.vue
@@ -1,256 +1,293 @@
 <template>
-	<view class="scroll_div">
-		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
-			<view
-				class="item"
-				:class="getStatusClass(item.isFinish)"
-				v-for="(item, index) in data_list"
-				@click="click_item(item)"
-			>
-				<view class="img_div">
-					<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
+	<view class="item">
+		<view class="details_div">
+			<view class="img_div">
+				<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
+			</view>
+			<view class="right_div">
+				<view class="title ellipsis-text">
+					{{ item.crsName }}
 				</view>
-				<view class="right_div">
-					<view class="title">
-						{{
-							item.crsName
-						}}阿斯顿萨达萨达阿斯顿萨达萨达萨达萨达萨达萨达
+				<view class="prompt_div">
+					<view class="prompt_div_left">
+						<view class="top">{{ item.correctRate || '' }}</view>
+						<view class="bottom">答题正确率</view>
 					</view>
-					<view class="prompt_div">
-						<image src="@/static/images/courseRecord/time.png" class="img"></image>
-						<view class="prompt">答题正确率：30</view>
-					</view>
-					<view class="prompt_div">
-						<image :src="studyTimeIcon()" class="img"></image>
-						<view class="prompt">练习记录：2条</view>
+					<view class="prompt_div_line"></view>
+					<view class="prompt_div_right" @click="show_list_click">
+						<view class="click_text">
+							{{ item.exrCnt || 0 }}
+							<uv-icon
+								class="click_text_icon"
+								:class="{click_text_icon_action:show_list_state}"
+								name="arrow-right"
+								color="#0066FF"
+								size="12"
+								:bold="true"
+							></uv-icon>
+						</view>
+						<view class="bottom">练习次数</view>
 					</view>
 				</view>
 			</view>
-			<list-no-data v-if="total == 0 && status == 'nomore'"></list-no-data>
-			<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
-		</scroll-view>
+		</view>
+		<view class="list_div" :style="{ height: list_div_height }">
+			<view class="list_item" v-for="item_list in data_list" @click="click_list_item(item_list)">
+				<view class="list_content">
+					<view class="list_small_item">
+						<image src="@/static/images/courseRecord/time.png" class="icon_img"></image>
+						<view class="prompt">练习时间：{{ item_list.exrStartTm }}</view>
+					</view>
+					<view class="list_small_item">
+						<image src="@/static/images/courseRecord/duration.png" class="icon_img"></image>
+						<view class="prompt">练习时长：{{ formatDuration(item_list.exrStartTm, item_list.exrEndTm) }}</view>
+					</view>
+				</view>
+				<view class="fl1"></view>
+				<uv-icon name="arrow-right" color="#979797" size="17" :bold="true"></uv-icon>
+			</view>
+			<uv-load-more
+				v-if="status === 'loading'"
+				:status="status"
+				loadmore-text="轻轻上拉加载"
+				:height="30"
+			></uv-load-more>
+		</view>
 	</view>
 </template>
+
 <script setup>
-	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
-	const limit = 15;
-	const total = ref(-1);
-	const page = ref(0);
-	const data_list = reactive([]);
+	import { computed, ref, reactive, nextTick } from 'vue';
 	import { setPageCache } from '@/common/common';
 	import common from '@/common/common';
-	import { ref, reactive, onMounted, nextTick } from 'vue';
-	
-	import { queryPracticeRecordPaging, queryPracticeHis, queryCrsExamRecordPaging } from '@/api/courseRecord.js';
-	import { studyDurationIcon, studyTimeIcon } from '@/common/imgSvg';
-	const props = defineProps({});
-	
-	const getData = (from = '', searchText = '') => {
-		if (from == 'first') {
-			if (total.value !== -1) {
-				return;
-			}
+	const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
+	const props = defineProps({
+		item: {
+			type: Object,
+			default: () => {}
+		}
+	});
+
+	import { queryPracticeHis } from '@/api/courseRecord.js';
+	const item = computed(() => props.item);
+	const data_list = reactive([]);
+	const total = ref(-1);
+	const show_list_state = ref(false);
+	const list_div_height = computed(() => {
+		if (!show_list_state.value) {
+			return '0';
+		} else if (status.value === 'loading') {
+			return '100rpx';
+		} else {
+			return data_list.length * 136 + 'rpx';
+		}
+	});
+
+	// 点击获取详情
+	const show_list_click = () => {
+		show_list_state.value = !show_list_state.value;
+		if (total.value === -1) {
+			//加载数据
 			status.value = 'loading';
-			total.value = -1;
-			page.value = 1;
 			data_list.length = 0;
-		} else {
-			if (status.value !== 'loadmore' && status.value !== '') return;
-			status.value = 'loading';
-			page.value++;
+			queryPracticeHis({ crsId: item.value.crsId }).then((res) => {
+				data_list.push(...res.body);
+				total.value = data_list.length;
+				status.value = 'loadmore';
+			});
 		}
-		setTimeout(() => {
-			queryPracticeRecordPaging({
-				page: page.value,
-				limit: limit
-			})
-				.then((res) => {
-					total.value = res.total;
-					data_list.push(...res.body);
-				})
-				.finally(() => {
-					if (data_list.length >= total.value) {
-						status.value = 'nomore';
-					} else {
-						status.value = 'loadmore';
-					}
-				});
-		}, 200);
 	};
-	const getStatusClass = (isFinish) => {
-		// 00进行中、01已完成、02已超时
-		if (isFinish === '00') return 'in_progress';
-		if (isFinish === '01') return 'completed';
-		return 'expired';
+	// 跳转到详情
+	const click_list_item = (list_item) => {
+		common.navigateTo(`/pages/courseRecord/coursePracticeRecordDetail?exrId=${list_item.exrId}`);
 	};
 
-	// 跳转到详情
-	const click_item = (item) => {
-		if (item.isTimeOut === '00') {
-			common.msg('任务已结束');
-			return;
-		}
-		setPageCache('learning_tasks_details', item);
-		common.navigateTo('/pages/learningTasks/details');
+	// 计算两个标准时间的时间差值
+	const formatDuration = (startTm, endTm) => {
+		// 解析时间字符串为时间戳（毫秒）
+		const startTime = new Date(startTm).getTime();
+		const endTime = new Date(endTm).getTime();
+
+		// 计算时间差（秒），确保为正数
+		const seconds = Math.abs(Math.floor((endTime - startTime) / 1000));
+
+		// 计算时、分、秒
+		const hours = Math.floor(seconds / 3600);
+		const minutes = Math.floor((seconds % 3600) / 60);
+		const remainingSeconds = seconds % 60;
+
+		// 补零格式化函数（统一处理所有单位）
+		const formatNumber = (num) => num.toString().padStart(2, '0');
+
+		// 小时、分钟、秒均保持两位数格式
+		return `${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(remainingSeconds)}`;
 	};
-	const scrolltolower = (item) => {
-		getData();
-	};
-	const search = (value) => {
-		total.value = -1;
-		console.log('value', value);
-		getData('first', value);
-	};
-	defineExpose({
-		getData,
-		search
-	});
 </script>
 
 <style scoped lang="scss">
-	.scroll_div {
-		background-color: #f1f5fa;
+	.icon_img {
+		width: 24rpx;
+		height: 24rpx;
 	}
 
-	.scroll-Y {
-		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx);
-	}
+	.list_div {
+		overflow: hidden; /* 确保内容不会溢出容器 */
+		transition: height 0.2s ease-out; /* 高度动画 */
+		.list_item {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 18rpx 32rpx 18rpx 28rpx;
+			background-color: #f9fbff;
+			border-radius: 8rpx;
+			margin: 20rpx 0 0 0;
+			.list_content {
+				.list_small_item {
+					display: flex;
+					align-items: center;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #666666;
+					line-height: 40rpx;
+					text-align: left;
+					font-style: normal;
 
-	.scroll-Y {
-		.item.in_progress {
-			// 进行中
-			.subscript {
-				color: #0066ff;
-				background-color: #daf0ff;
-			}
-
-			.blod_color {
-				color: #0066ff;
-			}
-		}
-
-		.item.completed {
-			// 已完成
-			.subscript {
-				color: #ffffff;
-				background-color: #33c583 !important;
-			}
-
-			.blod_color {
-				color: #333333;
-			}
-		}
-
-		.item.expired {
-			// 已超时
-			.subscript {
-				color: #ffffff;
-				background-color: #ef5705;
-			}
-
-			.blod_color {
-				color: #d70c18;
+					.prompt {
+						margin-left: 16rpx;
+					}
+				}
 			}
 		}
 	}
-
-	.scroll-Y .item {
+	.item {
 		margin: 17rpx 20rpx;
-		display: flex;
-
 		background-color: #fff;
 		border-radius: 16rpx;
 		padding: 32rpx 22rpx;
-		.img_div {
-			position: relative;
-			width: 224rpx;
-			height: 168rpx;
-			overflow: hidden;
-			border-radius: 22rpx;
+		.details_div {
+			display: flex;
 
-			.img {
+			.img_div {
+				position: relative;
 				width: 226rpx;
 				height: 168rpx;
-			}
-
-			.subscript {
-				position: absolute;
-				right: 0;
-				top: 0;
-				width: 92rpx;
-				height: 46rpx;
-				border-radius: 0px 0px 0px 22rpx;
-				font-family: PingFangSC;
-				font-weight: 400;
-				font-size: 22rpx;
-				line-height: 32px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-		}
-
-		.right_div {
-			flex: 1;
-			overflow: hidden;
-			margin-left: 24rpx;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-
-			.title {
-				font-family: PingFangSC;
-				color: #333333;
-				text-align: left;
-				font-style: normal;
-				font-weight: 600;
-				font-size: 28rpx; /* 字体大小30rpx */
-				display: -webkit-box; /* 启用弹性盒模型 */
-				-webkit-box-orient: vertical; /* 设置盒子内子元素的排列方向为垂直 */
-				-webkit-line-clamp: 2; /* 限制最多显示2行 */
-				overflow: hidden; /* 超出部分隐藏 */
-				text-overflow: ellipsis; /* 超出部分显示省略号（多行时可能不显示，但建议保留） */
-				line-height: 1.5; /* 可选：设置行高，优化多行显示效果 */
-			}
-
-			.prompt_div {
-				font-family: PingFangSC;
-				font-weight: 400;
-				font-size: 23rpx;
-				color: #666;
-				line-height: 23rpx;
-				display: flex;
-				align-items: center;
 				overflow: hidden;
-				.img{
-					width: 33rpx;
-					height: 33rpx;
+				border-radius: 22rpx;
+
+				.img {
+					width: 226rpx;
+					height: 168rpx;
 				}
-				.prompt{
-					margin-left: 14rpx;
+
+				.subscript {
+					position: absolute;
+					right: 0;
+					top: 0;
+					width: 92rpx;
+					height: 46rpx;
+					border-radius: 0px 0px 0px 22rpx;
+					font-family: PingFangSC;
 					font-weight: 400;
 					font-size: 22rpx;
-					color: #666666;
-					line-height: 32rpx;
-					text-align: left;
-					font-style: normal;
-					
+					line-height: 32px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
 				}
-				
 			}
 
-			.people_progress_div {
-				display: flex;
-				font-family: PingFangSC;
-				font-weight: 400;
-				font-size: 23rpx;
-				color: #666;
-				margin-bottom: 23rpx;
-
-				line-height: 23rpx;
-				flex-wrap: nowrap;
-				height: 23rpx;
+			.right_div {
+				flex: 1;
 				overflow: hidden;
+				margin-left: 24rpx;
+				display: flex;
+				flex-direction: column;
+
+				.title {
+					font-family: PingFangSC;
+					color: #333333;
+					text-align: left;
+					font-style: normal;
+					font-weight: 600;
+					font-size: 28rpx; /* 字体大小30rpx */
+					overflow: hidden; /* 超出部分隐藏 */
+					margin-bottom: 8rpx;
+					min-height: 40rpx;
+				}
+
+				.prompt_div {
+					font-family: PingFangSC;
+					font-weight: 400;
+					font-size: 22rpx;
+					color: #666;
+					line-height: 34rpx;
+					display: flex;
+					align-items: center;
+					overflow: hidden;
+					height: 116rpx;
+					background-color: #f9fbff;
+					border-radius: 8rpx;
+					justify-content: space-around;
+					.prompt_div_line {
+						width: 4rpx;
+						height: 30rpx;
+						background: linear-gradient(
+							to bottom,
+							RGBA(242, 244, 248, 1) 0%,
+							RGBA(230, 232, 238, 1) 30%,
+							RGBA(230, 232, 238, 1) 70%,
+							RGBA(242, 244, 248, 1) 100%
+						);
+					}
+					.prompt_div_left,
+					.prompt_div_right {
+						flex: 1;
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						.top,
+						.click_text {
+							font-family: Arial;
+							font-weight: 700;
+							font-size: 30rpx;
+							color: #333333;
+							line-height: 34rpx;
+							text-align: center;
+							font-style: normal;
+						}
+						.bottom {
+						}
+						.click_text {
+							position: relative;
+							.click_text_icon {
+								position: absolute;
+								margin-left: 18rpx;
+								top: calc(50% - 12rpx);
+								left: calc(100% - 14rpx);
+								/* 添加过渡动画，包含延迟效果 */
+								transition: transform 0.2s ease;
+							}
+							.click_text_icon_action{
+								transform: rotate(90deg);
+							}
+							
+						}
+					}
+				}
+
+				.people_progress_div {
+					display: flex;
+					font-family: PingFangSC;
+					font-weight: 400;
+					font-size: 23rpx;
+					color: #666;
+					margin-bottom: 23rpx;
+
+					line-height: 23rpx;
+					flex-wrap: nowrap;
+					height: 23rpx;
+					overflow: hidden;
+				}
 			}
 		}
 	}
diff --git a/src/pages/courseRecord/components/practiceRecordList.vue b/src/pages/courseRecord/components/practiceRecordList.vue
new file mode 100644
index 00000000..72760525
--- /dev/null
+++ b/src/pages/courseRecord/components/practiceRecordList.vue
@@ -0,0 +1,70 @@
+<template>
+	<view class="scroll_div">
+		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
+			<itemVue :item="item" v-for="(item, index) in data_list"></itemVue>
+			<list-no-data v-if="total == 0 && status == 'nomore'"></list-no-data>
+			<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
+		</scroll-view>
+	</view>
+</template>
+<script setup>
+	import itemVue from './practiceRecordItem.vue';
+	import { setPageCache } from '@/common/common';
+	import common from '@/common/common';
+	import { ref, reactive, onMounted, nextTick } from 'vue';
+	import { queryPracticeRecordPaging } from '@/api/courseRecord.js';
+	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
+	const limit = 15;
+	const total = ref(-1);
+	const page = ref(0);
+	const data_list = reactive([]);
+
+	const getData = (from = '') => {
+		if (from == 'first') {
+			if (total.value !== -1) {
+				return;
+			}
+			status.value = 'loading';
+			total.value = -1;
+			page.value = 1;
+			data_list.length = 0;
+		} else {
+			if (status.value !== 'loadmore' && status.value !== '') return;
+			status.value = 'loading';
+			page.value++;
+		}
+		queryPracticeRecordPaging({
+			page: page.value,
+			limit: limit
+		})
+			.then((res) => {
+				total.value = res.total;
+				data_list.push(...res.body);
+			})
+			.finally(() => {
+				if (data_list.length >= total.value) {
+					status.value = 'nomore';
+				} else {
+					status.value = 'loadmore';
+				}
+			});
+	};
+	
+	const scrolltolower = (item) => {
+		getData();
+	};
+
+	defineExpose({
+		getData
+	});
+</script>
+
+<style scoped lang="scss">
+	.scroll_div {
+		background-color: #f1f5fa;
+	}
+
+	.scroll-Y {
+		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
+	}
+</style>
diff --git a/src/pages/courseRecord/components/studyRecordItem.vue b/src/pages/courseRecord/components/studyRecordItem.vue
index 02409e35..d6d2e2d0 100644
--- a/src/pages/courseRecord/components/studyRecordItem.vue
+++ b/src/pages/courseRecord/components/studyRecordItem.vue
@@ -1,8 +1,294 @@
 <template>
+	<view class="item">
+		<view class="details_div">
+			<view class="img_div">
+				<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
+			</view>
+			<view class="right_div">
+				<view class="title ellipsis-text">
+					{{ item.crsName }}
+				</view>
+				<view class="prompt_div">
+					<view class="prompt_div_left">
+						<view class="top">{{ item.stdyTm || '' }}</view>
+						<view class="bottom">学习时长</view>
+					</view>
+					<view class="prompt_div_line"></view>
+					<view class="prompt_div_right" @click="show_list_click">
+						<view class="click_text">
+							{{ item.stdyCnt || 0 }}
+							<uv-icon
+								class="click_text_icon"
+								:class="{ click_text_icon_action: show_list_state }"
+								name="arrow-right"
+								color="#0066FF"
+								size="12"
+								:bold="true"
+							></uv-icon>
+						</view>
+						<view class="bottom">学习次数</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="list_div" :style="{ height: list_div_height}">
+			<view class="list_item" v-for="item_list in data_list" @click="click_list_item(item_list)">
+				<view class="list_content">
+					<view class="list_small_item">
+						<image src="@/static/images/courseRecord/time.png" class="icon_img"></image>
+						<view class="prompt">学习时间：{{ item_list.startTm }}</view>
+					</view>
+					<view class="list_small_item">
+						<image src="@/static/images/courseRecord/duration.png" class="icon_img"></image>
+						<view class="prompt">学习时长：{{ formatDuration(item_list.startTm, item_list.endTm) }}</view>
+					</view>
+				</view>
+				<view class="fl1"></view>
+				<uv-icon name="arrow-right" color="#979797" size="17" :bold="true"></uv-icon>
+			</view>
+			<uv-load-more
+				v-if="status === 'loading'"
+				:status="status"
+				loadmore-text="轻轻上拉加载"
+				:height="30"
+			></uv-load-more>
+		</view>
+	</view>
 </template>
 
-<script>
+<script setup>
+	import { computed, ref, reactive, nextTick } from 'vue';
+	import { setPageCache } from '@/common/common';
+	import common from '@/common/common';
+	const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
+	const props = defineProps({
+		item: {
+			type: Object,
+			default: () => {}
+		}
+	});
+
+	import { queryStdyBatchByCrsId } from '@/api/courseRecord.js';
+	const item = computed(() => props.item);
+	const data_list = reactive([]);
+	const total = ref(-1);
+	const show_list_state = ref(false);
+	const list_div_height = computed(() => {
+		if (!show_list_state.value) {
+			return '0';
+		} else if (status.value === 'loading') {
+			return '100rpx';
+		} else {
+			return data_list.length * 136 + 'rpx';
+		}
+	});
+
+	// 点击获取详情
+	const show_list_click = () => {
+		show_list_state.value = !show_list_state.value;
+		if (total.value === -1) {
+			//加载数据
+			status.value = 'loading';
+			data_list.length = 0;
+			queryStdyBatchByCrsId({ crsId: item.value.crsId }).then((res) => {
+				data_list.push(...res.body);
+				total.value = data_list.length;
+				status.value = 'loadmore';
+			});
+		}
+	};
+	// 跳转到详情
+	const click_list_item = (list_item) => {
+		common.navigateTo(`/pages/courseRecord/courseStudyRecordDetail?stdyId=${list_item.stdyBatch}`);
+	};
+
+	// 计算两个标准时间的时间差值
+	const formatDuration = (startTm, endTm) => {
+		// 解析时间字符串为时间戳（毫秒）
+		const startTime = new Date(startTm).getTime();
+		const endTime = new Date(endTm).getTime();
+
+		// 计算时间差（秒），确保为正数
+		const seconds = Math.abs(Math.floor((endTime - startTime) / 1000));
+
+		// 计算时、分、秒
+		const hours = Math.floor(seconds / 3600);
+		const minutes = Math.floor((seconds % 3600) / 60);
+		const remainingSeconds = seconds % 60;
+
+		// 补零格式化函数（统一处理所有单位）
+		const formatNumber = (num) => num.toString().padStart(2, '0');
+
+		// 小时、分钟、秒均保持两位数格式
+		return `${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(remainingSeconds)}`;
+	};
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style scoped lang="scss">
+	.icon_img {
+		width: 24rpx;
+		height: 24rpx;
+	}
+
+	.list_div {
+		
+		overflow: hidden; /* 确保内容不会溢出容器 */
+		transition: height 0.3s ease-out; /* 高度动画 */
+		.list_item {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 18rpx 32rpx 18rpx 28rpx;
+			background-color: #f9fbff;
+			border-radius: 8rpx;
+			margin: 20rpx 0 0 0;
+			.list_content {
+				.list_small_item {
+					display: flex;
+					align-items: center;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #666666;
+					line-height: 40rpx;
+					text-align: left;
+					font-style: normal;
+
+					.prompt {
+						margin-left: 16rpx;
+					}
+				}
+			}
+		}
+	}
+	.item {
+		margin: 17rpx 20rpx;
+		background-color: #fff;
+		border-radius: 16rpx;
+		padding: 32rpx 22rpx;
+		.details_div {
+			display: flex;
+
+			.img_div {
+				position: relative;
+				width: 226rpx;
+				height: 168rpx;
+				overflow: hidden;
+				border-radius: 22rpx;
+
+				.img {
+					width: 226rpx;
+					height: 168rpx;
+				}
+
+				.subscript {
+					position: absolute;
+					right: 0;
+					top: 0;
+					width: 92rpx;
+					height: 46rpx;
+					border-radius: 0px 0px 0px 22rpx;
+					font-family: PingFangSC;
+					font-weight: 400;
+					font-size: 22rpx;
+					line-height: 32px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+
+			.right_div {
+				flex: 1;
+				overflow: hidden;
+				margin-left: 24rpx;
+				display: flex;
+				flex-direction: column;
+
+				.title {
+					font-family: PingFangSC;
+					color: #333333;
+					text-align: left;
+					font-style: normal;
+					font-weight: 600;
+					font-size: 28rpx; /* 字体大小30rpx */
+					overflow: hidden; /* 超出部分隐藏 */
+					margin-bottom: 8rpx;
+					min-height: 40rpx;
+				}
+
+				.prompt_div {
+					font-family: PingFangSC;
+					font-weight: 400;
+					font-size: 22rpx;
+					color: #666;
+					line-height: 34rpx;
+					display: flex;
+					align-items: center;
+					overflow: hidden;
+					height: 116rpx;
+					background-color: #f9fbff;
+					border-radius: 8rpx;
+					justify-content: space-around;
+					.prompt_div_line {
+						width: 4rpx;
+						height: 30rpx;
+						background: linear-gradient(
+							to bottom,
+							RGBA(242, 244, 248, 1) 0%,
+							RGBA(230, 232, 238, 1) 30%,
+							RGBA(230, 232, 238, 1) 70%,
+							RGBA(242, 244, 248, 1) 100%
+						);
+					}
+					.prompt_div_left,
+					.prompt_div_right {
+						flex: 1;
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						.top,
+						.click_text {
+							font-family: Arial;
+							font-weight: 700;
+							font-size: 30rpx;
+							color: #333333;
+							line-height: 34rpx;
+							text-align: center;
+							font-style: normal;
+						}
+						.bottom {
+						}
+						.click_text {
+							position: relative;
+							.click_text_icon {
+								position: absolute;
+								margin-left: 18rpx;
+								top: calc(50% - 12rpx);
+								left: calc(100% - 14rpx);
+								/* 添加过渡动画，包含延迟效果 */
+								transition: transform 0.2s ease;
+							}
+							.click_text_icon_action {
+								transform: rotate(90deg);
+							}
+						}
+					}
+				}
+
+				.people_progress_div {
+					display: flex;
+					font-family: PingFangSC;
+					font-weight: 400;
+					font-size: 23rpx;
+					color: #666;
+					margin-bottom: 23rpx;
+
+					line-height: 23rpx;
+					flex-wrap: nowrap;
+					height: 23rpx;
+					overflow: hidden;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/pages/courseRecord/components/studyRecordList.vue b/src/pages/courseRecord/components/studyRecordList.vue
new file mode 100644
index 00000000..d119fc81
--- /dev/null
+++ b/src/pages/courseRecord/components/studyRecordList.vue
@@ -0,0 +1,100 @@
+<template>
+	<view class="scroll_div">
+		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
+			<itemVue :item="item"  v-for="(item, index) in data_list" ></itemVue>
+			<list-no-data v-if="total == 0 && status == 'nomore'"></list-no-data>
+			<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
+		</scroll-view>
+	</view>
+</template>
+<script setup>
+	import itemVue from './studyRecordItem.vue';
+
+	import { setPageCache } from '@/common/common';
+	import common from '@/common/common';
+	import { ref, reactive, onMounted, nextTick } from 'vue';
+	import { queryStdyRecordPaging } from '@/api/courseRecord.js';
+	import { studyDurationIcon, studyTimeIcon } from '@/common/imgSvg';
+	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
+	const limit = 15;
+	const total = ref(-1);
+	const page = ref(0);
+	const data_list = reactive([]);
+	
+	const getData = (from = '') => {
+		if (from == 'first') {
+			if (total.value !== -1) {
+				return;
+			}
+			status.value = 'loading';
+			total.value = -1;
+			page.value = 1;
+			data_list.length = 0;
+		} else {
+			if (status.value !== 'loadmore' && status.value !== '') return;
+			status.value = 'loading';
+			page.value++;
+		}
+		
+		queryStdyRecordPaging({
+			page: page.value,
+			limit: limit
+		})
+			.then((res) => {
+				total.value = res.total;
+				data_list.push(...res.body);
+			})
+			.finally(() => {
+				if (data_list.length >= total.value) {
+					status.value = 'nomore';
+				} else {
+					status.value = 'loadmore';
+				}
+			});
+		
+	};
+	const getStatusClass = (isFinish) => {
+		// 00进行中、01已完成、02已超时
+		if (isFinish === '00') return 'in_progress';
+		if (isFinish === '01') return 'completed';
+		return 'expired';
+	};
+	
+	const scrolltolower = (item) => {
+		getData();
+	};
+	
+	// 计算两个时间的时间差
+	const  formatDuration = (startTm, endTm) => {
+	  // 解析时间字符串为时间戳（毫秒）
+	  const startTime = new Date(startTm).getTime();
+	  const endTime = new Date(endTm).getTime();
+	  
+	  // 计算时间差（秒），确保为正数
+	  const seconds = Math.abs(Math.floor((endTime - startTime) / 1000));
+	  
+	  // 计算时、分、秒
+	  const hours = Math.floor(seconds / 3600);
+	  const minutes = Math.floor((seconds % 3600) / 60);
+	  const remainingSeconds = seconds % 60;
+	  
+	  // 补零格式化函数（统一处理所有单位）
+	  const formatNumber = (num) => num.toString().padStart(2, '0');
+	  
+	  // 小时、分钟、秒均保持两位数格式
+	  return `${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(remainingSeconds)}`;
+	}
+	defineExpose({
+		getData
+	});
+</script>
+
+<style scoped lang="scss">
+	.scroll_div {
+		background-color: #f1f5fa;
+	}
+	
+	.scroll-Y {
+		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
+	}
+</style>
diff --git a/src/pages/courseRecord/coursePracticeRecordDetail.vue b/src/pages/courseRecord/coursePracticeRecordDetail.vue
new file mode 100644
index 00000000..451c769a
--- /dev/null
+++ b/src/pages/courseRecord/coursePracticeRecordDetail.vue
@@ -0,0 +1,133 @@
+<template>
+	<view class="main_div max_page">
+		<view class="nav-div">
+			<view class="title ellipsis-text">练习记录</view>
+			<view class="back_div" @click="common.navigateBack()">
+				<view class="back-icon"></view>
+			</view>
+		</view>
+		<scroll-view :scroll-y="true" class="scroll scroll-Y" :scroll-with-animation="true" :show-scrollbar="false">
+			<view class="main-div">
+				<view class="content" :id="'id_' + index" v-for="(item, index) in topicList">
+					<Subject :item="item" mode="settlement" :clearResult="false" :isPreview="true"></Subject>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+	import { onLoad } from '@dcloudio/uni-app';
+	import { ref, reactive, computed, onMounted, nextTick, getCurrentInstance } from 'vue';
+
+	import Subject from '@/components/examination/subject.vue';
+	import common from '@/common/common';
+	import { queryPracticeRecordByExrId } from '@/api/courseRecord.js';
+
+	const exrId = ref('');
+	const pass_status = ref(0);
+
+	const topicList = reactive([]);
+
+	const get_result = () => {
+		queryPracticeRecordByExrId({
+			exrId: exrId.value || 'EXR02501812206820250825133656000071377'
+		}).then(({ body }) => {
+			console.log('分数返回', body);
+			topicList.push(...body);
+		});
+	};
+
+	// 初始化时检查
+	onLoad((e) => {
+		exrId.value = e.exrId;
+		get_result();
+	});
+</script>
+
+<style scoped lang="scss">
+	$bg-margin-left: 30rpx;
+
+	.scroll-Y {
+		height: calc(100vh - var(--status-bar-height) - 70rpx - 10rpx);
+	}
+	.content {
+		position: relative;
+		margin: 32rpx $bg-margin-left;
+		border-radius: 16rpx;
+		padding: 34rpx 30rpx 34rpx 36rpx;
+		background-color: #fff;
+	}
+	// 主内容框
+	.main-div {
+		display: flex;
+		flex-direction: column;
+		margin: 30rpx 28rpx 20rpx 28rpx;
+		border-radius: 16rpx;
+		position: relative;
+		background-color: #fff;
+	}
+
+	.nav-div {
+		position: relative;
+
+		.title {
+			height: 70rpx;
+			font-family: PingFangSC;
+			font-weight: 500;
+			font-size: 34rpx;
+			color: #000000;
+			line-height: 70rpx;
+			text-align: center;
+			font-style: normal;
+		}
+
+		.back_div {
+			margin-right: 10rpx;
+			position: absolute;
+			left: 25rpx;
+			top: 0;
+			padding: 15rpx;
+
+			.back-icon {
+				position: relative;
+				width: 40rpx;
+				height: 40rpx;
+				cursor: pointer;
+			}
+
+			.back-icon::before,
+			.back-icon::after {
+				content: '';
+				position: absolute;
+				transition: all 0.3s ease;
+			}
+
+			.back-icon::after {
+				top: 25%;
+				left: 25%;
+				width: 40%;
+				height: 40%;
+				border-top: 4rpx solid #000;
+				border-left: 4rpx solid #000;
+				transform: rotate(-45deg);
+			}
+		}
+	}
+
+	.main_div {
+		display: flex;
+		flex-direction: column;
+		background-color: #f0f5f9;
+		/* 添加30度角的斜向上渐变，高度限制为400px */
+		background-image: linear-gradient(30deg, #f0f5f9, #ebf1ff);
+		/* 渐变背景高度400px，宽度充满容器 */
+		background-size: 100% 600rpx;
+		/* 防止渐变背景重复 */
+		background-repeat: no-repeat;
+		min-height: 100vh;
+		margin: 0;
+		overflow: hidden;
+		position: relative;
+	}
+</style>
diff --git a/src/pages/courseRecord/index.vue b/src/pages/courseRecord/index.vue
index 17471aaf..9ea72dfe 100644
--- a/src/pages/courseRecord/index.vue
+++ b/src/pages/courseRecord/index.vue
@@ -25,13 +25,13 @@
 			<view class="uni-margin-wrap no-overflow">
 				<swiper class="swiper" :current="tabAct" :indicator-dots="false" @change="swiperChange">
 					<swiper-item>
-						<studyRecordItem :ref="(el) => (listItemRefs[0] = el)"></studyRecordItem>
+						<studyRecordList :ref="(el) => (listItemRefs[0] = el)"></studyRecordList>
 					</swiper-item>
 					<swiper-item>
-						<practiceRecordItem :ref="(el) => (listItemRefs[1] = el)"></practiceRecordItem>
+						<practiceRecordList :ref="(el) => (listItemRefs[1] = el)"></practiceRecordList>
 					</swiper-item>
 					<swiper-item>
-						<examRecordItem :ref="(el) => (listItemRefs[2] = el)"></examRecordItem>
+						<examRecordList :ref="(el) => (listItemRefs[2] = el)"></examRecordList>
 					</swiper-item>
 				</swiper>
 			</view>
@@ -42,14 +42,14 @@
 <script setup>
 	import { LineBg } from '@/enum.js';
 
-	import studyRecordItem from './components/studyRecordItem.vue';
-	import practiceRecordItem from './components/practiceRecordItem.vue';
-	import examRecordItem from './components/examRecordItem.vue';
+	import studyRecordList from './components/studyRecordList.vue';
+	import practiceRecordList from './components/practiceRecordList.vue';
+	import examRecordList from './components/examRecordList.vue';
 	import { reactive, ref, computed, nextTick, onMounted, watch } from 'vue';
 	import common from '@/common/common.js';
 	const listItemRefs = ref([]);
 	const taskRef = ref(null);
-	const tabAct = ref(2);
+	const tabAct = ref(1);
 	const tabList = ref([
 		{
 			name: '学习记录'
diff --git a/src/pages/practice/index.vue b/src/pages/practice/index.vue
index 316d5536..54ec229e 100644
--- a/src/pages/practice/index.vue
+++ b/src/pages/practice/index.vue
@@ -685,7 +685,6 @@
 	.scroll-Y {
 		max-height: calc(100vh - var(--status-bar-height) - 70rpx - 70rpx - 40rpx - 64rpx - 68rpx - 60rpx);
 		min-height: calc(100vh - var(--status-bar-height) - 70rpx - 70rpx - 40rpx - 64rpx - 68rpx - 60rpx - 380rpx);
-		// background-color: yellow;
 	}
 
 	.swiper {
diff --git a/src/pagesA.json b/src/pagesA.json
index c7d9c314..a2d27f82 100644
--- a/src/pagesA.json
+++ b/src/pagesA.json
@@ -206,6 +206,15 @@
 					"titleNView": false
 				}
 			}
+		},
+		{
+			"path": "pages/courseRecord/coursePracticeRecordDetail",
+			"style": {
+				"navigationBarTitleText": "课程记录练习记录详情",
+				"app-plus": {
+					"titleNView": false
+				}
+			}
 		}
 	]
 }
\ No newline at end of file