diff --git a/src/App.vue b/src/App.vue
index 5327b48d..694860bc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -66,6 +66,9 @@ view {
 .fz-30 {
 	font-size: 30rpx;
 }
+.fz-28 {
+	font-size: 28rpx;
+}
 .fz-24 {
 	font-size: 24rpx;
 }
@@ -80,6 +83,13 @@ view {
 .flex {
 	display: flex;
 }
+.flex-jcsb {
+	display: flex;
+	justify-content: space-between;
+}
+.tar{
+	text-align: right;
+}
 .fw-600 {
 	font-weight: 600;
 }
diff --git a/src/components/image-preview/image-preview.vue b/src/components/image-preview/image-preview.vue
index 9ae86165..1becd9d0 100644
--- a/src/components/image-preview/image-preview.vue
+++ b/src/components/image-preview/image-preview.vue
@@ -32,7 +32,7 @@
 			imgUrlShow: {
 				handler(newval, oldval) {
 					if (oldval) {
-						URL.revokeObjectURL(oldval);
+						// URL.revokeObjectURL(oldval);
 					}
 				},
 				immediate: true,
@@ -43,12 +43,12 @@
 			getPreviewUrlBlob(id) {
 				// this.imgUrlShow = '@/static/images/index/message_b.png'
 				previewFile(id).then((res) => {
-					this.imgUrlShow = URL.createObjectURL(res);
-					// const reader = new FileReader();
-					// reader.readAsDataURL(res)
-					// reader.onloadend = () => {
-					// 	this.imgUrlShow = reader.result;
-					// }
+					// this.imgUrlShow = URL.createObjectURL(res);
+					const reader = new FileReader();
+					reader.readAsDataURL(res)
+					reader.onloadend = () => {
+						this.imgUrlShow = reader.result;
+					}
 				});
 			},
 		},
@@ -59,7 +59,7 @@
 			this.watching = true
 		},
 		beforeDestroy() {
-			URL.revokeObjectURL(this.imgUrlShow);
+			// URL.revokeObjectURL(this.imgUrlShow);
 		},
 	}
 </script>
diff --git a/src/components/image-preview/video-preview.vue b/src/components/image-preview/video-preview.vue
new file mode 100644
index 00000000..5e21bebc
--- /dev/null
+++ b/src/components/image-preview/video-preview.vue
@@ -0,0 +1,69 @@
+<template>
+	<video :src="imgUrlShow" controls></video>
+	<!-- <image class="img" src="@/static/images/test/1.png"></image> -->
+</template>
+
+<script>
+	import {previewFile} from'@/api/common.js'
+	export default {
+		name:"image-preview",
+		props:{
+			imgId:{
+				default:'',
+				type:String
+			}
+		},
+		data() {
+			return {
+				imgUrlShow:'',
+				watching:false
+			};
+		},
+		watch: {
+			imgId: {
+				handler(newval, oldval) {
+					if (newval && this.watching) {
+						this.getPreviewUrlBlob(newval);
+					}
+				},
+				immediate: true,
+				deep: true,
+			},
+			imgUrlShow: {
+				handler(newval, oldval) {
+					if (oldval) {
+						URL.revokeObjectURL(oldval);
+					}
+				},
+				immediate: true,
+				deep: true,
+			}
+		},
+		methods: {
+			getPreviewUrlBlob(id) {
+				// this.imgUrlShow = '@/static/images/index/message_b.png'
+				previewFile(id).then((res) => {
+					this.imgUrlShow = URL.createObjectURL(res);
+					// const reader = new FileReader();
+					// reader.readAsDataURL(res)
+					// reader.onloadend = () => {
+					// 	this.imgUrlShow = reader.result;
+					// }
+				});
+			},
+		},
+		mounted() {
+			if (this.imgId) {
+				this.getPreviewUrlBlob(this.imgId);
+			}
+			this.watching = true
+		},
+		beforeDestroy() {
+			URL.revokeObjectURL(this.imgUrlShow);
+		},
+	}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/pages/course/components/talkingItem.vue b/src/pages/course/components/talkingItem.vue
new file mode 100644
index 00000000..e4c7ffed
--- /dev/null
+++ b/src/pages/course/components/talkingItem.vue
@@ -0,0 +1,267 @@
+<template>
+	<view class="ai-answer" v-if="type === 0">
+		<view class="user-info">
+			<view class="avatar-box">
+				<ImagePreview class="img-box" :imgId="''"></ImagePreview>
+			</view>
+			<view class="ai-name">
+				梁安娜
+				<view class="ai-name-desc">AI课程教练</view>
+			</view>
+		</view>
+		<view class="talking-info">
+			<view class="talking-gif"></view>
+			<view class="talking-cont">
+				<view class="talking-text">
+					阿列克山大是快乐的你艾德卡省的mask安东拉森扣篮大赛了快递那里是啊克里斯蒂娜老师的阿萨是看，
+				</view>
+				<ImagePreview class="cont-img-box" :imgId="''"></ImagePreview>
+				<VideoPreview class="cont-img-box" :imgId="''"></VideoPreview>
+			</view>
+			<view class="talking-cont">
+				<view class="talking-text">
+					阿列克山大是快乐的你艾德卡省的mask安东拉森扣篮大赛了快递那里是啊克里斯蒂娜老师的阿萨是看，
+				</view>
+			</view>
+			<view class="btns-cont">
+				<view class="replay-btn"></view>
+				<view class="play-btn"></view>
+				<view class="next-learn-btn">继续学</view>
+				<view class="replay-learn-btn">重新学</view>
+				<view class="next-btn">继续</view>
+			</view>
+		</view>
+	</view>
+	<view class="user-answer" v-else-if="type === 1">
+		<view class="user-info">
+			<view class="avatar-box">
+				<ImagePreview class="img-box" :imgId="''"></ImagePreview>
+			</view>
+			<view class="ai-name">
+				玛卡巴卡
+			</view>
+		</view>
+		
+		<view class="talking-info">
+			<view class="talking-gif"></view>
+			<view class="talking-cont">
+				<view class="talking-text">
+					阿列克山大是快乐的你艾德卡省的mask安东拉森扣篮大赛了快递那里是啊克里斯蒂娜老师的阿萨是看，
+				</view>
+			</view>
+			<view class="btns-cont">
+				<view class="play-btn"></view>
+			</view>
+		</view>
+	</view>
+	<view v-else></view>
+</template>
+
+<script setup>
+	import ImagePreview from '@/components/image-preview/image-preview.vue'
+	import VideoPreview from '@/components/image-preview/video-preview.vue'
+	import { defineProps } from 'vue';
+	const props = defineProps({
+		type:{
+			default: 0,// 1： userAnswer 0: AIAnswer
+			type:[Number,String]
+		}
+	})
+</script>
+
+<style lang="scss">
+	.ai-answer{
+		.user-info{
+			overflow: hidden;
+			.avatar-box{
+				float: left;
+				width: 76rpx;
+				height: 76rpx;
+				border: 3rpx solid #fff;
+				background-color: #ccc;
+				overflow: hidden;
+				border-radius: 10rpx;
+				margin-right: 16rpx;
+				margin-bottom: 16rpx;
+				.img-box{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.ai-name{
+				float: left;
+				color: #666;
+				font-size: 25rpx;
+				line-height: 35rpx;
+				.ai-name-desc{
+					color: #999;
+					margin-left: 16rpx;
+					display: inline-block;
+				}
+			}
+		}
+		.talking-info{
+			padding: 20rpx;
+			border-radius: 15rpx;
+			background-color: #aaa;
+			.talking-gif{
+				width: 140rpx;
+				height: 38rpx;
+				background-color: #999;
+				margin-bottom: 16rpx;
+			}
+			.talking-cont{
+				.talking-text{
+					font-size: 28rpx;
+					line-height: 48rpx;
+					margin-bottom: 20rpx;
+				}
+				.cont-img-box{
+					width: 433rpx;
+					height: 269rpx;
+					border-radius: 15rpx;
+					overflow: hidden;
+					background-color: #eee;
+					margin-bottom: 20rpx;
+				}
+			}
+			.btns-cont{
+				overflow: hidden;
+				border-top: 3rpx solid #eee;
+				.replay-btn{
+					float: left;
+					width: 46rpx;
+					height: 46rpx;
+					background-color: #ccc;
+					overflow: hidden;
+					margin-right: 16rpx;
+					margin-top: 25rpx;
+				}
+				.play-btn{
+					float: left;
+					width: 46rpx;
+					height: 46rpx;
+					background-color: #ccc;
+					overflow: hidden;
+					margin-right: 16rpx;
+					margin-top: 25rpx;
+				}
+				.next-learn-btn{
+					float: left;
+					padding: 0 20rpx;
+					height: 62rpx;
+					line-height: 62rpx;
+					font-size: 32rpx;
+					background-color: #06f;
+					color: #fff;
+					border-radius: 8rpx;
+					margin-top: 16rpx;
+					margin-right: 16rpx;
+				}
+				.replay-learn-btn{
+					float: left;
+					padding: 0 20rpx;
+					height: 62rpx;
+					line-height: 62rpx;
+					font-size: 32rpx;
+					color: #06f;
+					background-color: #eaf2ff;
+					border-radius: 8rpx;
+					margin-top: 16rpx;
+					margin-right: 16rpx;
+				}
+				.next-btn{
+					float: right;
+					padding: 0 20rpx;
+					height: 62rpx;
+					line-height: 62rpx;
+					font-size: 32rpx;
+					background-color: #06f;
+					color: #fff;
+					border-radius: 8rpx;
+					margin-top: 16rpx;
+				}
+			}
+		}
+	}
+	.user-answer{
+		
+		.user-info{
+			overflow: hidden;
+			.avatar-box{
+				float: right;
+				width: 76rpx;
+				height: 76rpx;
+				border: 3rpx solid #fff;
+				background-color: #ccc;
+				overflow: hidden;
+				border-radius: 10rpx;
+				margin-left: 16rpx;
+				margin-bottom: 16rpx;
+				.img-box{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.ai-name{
+				float: right;
+				color: #666;
+				font-size: 25rpx;
+				line-height: 35rpx;
+			}
+		}
+		
+		.talking-info{
+			padding: 20rpx;
+			border-radius: 15rpx;
+			background-color: #06f;
+			color: #fff;
+			.talking-gif{
+				width: 140rpx;
+				height: 38rpx;
+				background-color: #999;
+				margin-bottom: 16rpx;
+			}
+			.talking-cont{
+				.talking-text{
+					font-size: 28rpx;
+					line-height: 48rpx;
+					margin-bottom: 20rpx;
+				}
+			}
+			.btns-cont{
+				overflow: hidden;
+				border-top: 3rpx solid #eee;
+				.replay-btn{
+					float: left;
+					width: 46rpx;
+					height: 46rpx;
+					background-color: #ccc;
+					overflow: hidden;
+					margin-right: 16rpx;
+					margin-top: 25rpx;
+				}
+				.play-btn{
+					float: left;
+					width: 46rpx;
+					height: 46rpx;
+					background-color: #ccc;
+					overflow: hidden;
+					margin-right: 16rpx;
+					margin-top: 25rpx;
+				}
+				.next-btn{
+					float: right;
+					padding: 0 20rpx;
+					height: 62rpx;
+					line-height: 62rpx;
+					font-size: 32rpx;
+					background-color: #06f;
+					color: #fff;
+					border-radius: 8rpx;
+					margin-top: 16rpx;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/course/study.vue b/src/pages/course/study.vue
index 27202d0d..b06f14e2 100644
--- a/src/pages/course/study.vue
+++ b/src/pages/course/study.vue
@@ -1,12 +1,114 @@
 <template>
-	<view>
-		课程学习
+
+	<view class="course-study max_page">
+		<view class="top-bg"></view>
+		<view class="bot-bg"></view>
+		<view class="course-study-body">
+			<view class="body-title">
+				<uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/>
+				课程学习
+			</view>
+			<view class="talking-list">
+				<view class="study-num">1/20</view>
+				<TalkingItem class="talking-item" v-for="item in 8" :type="item%2"></TalkingItem>
+			</view>
+			<view class="talk-btns">
+				<view class="touch-btn">按住说话</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script setup>
+import { reactive, ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import common from '@/common/common';
+import TalkingItem from '@/pages/course/components/talkingItem.vue'
+const crsNum = ref('');
+const getData = async () => {
+	console.log(crsNum.value)
+};
+onLoad((params) => {
+	crsNum.value = params.crsNum;
+	getData();
+});
 </script>
 
 <style lang="scss">
 
+	.course-study{
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		.top-bg{
+			background: linear-gradient(16deg,rgba(234,246,255,0) 0%,#c3e6ff 100%);
+			height: 480rpx;
+			width: 750rpx;
+		}
+		.bot-bg{
+			// background-color: #F6F8FF;
+			background: linear-gradient(136deg,rgba(234,246,255,0) 0%,#c3e6ff 100%);
+			width: 750rpx;
+			flex: 1;
+		}
+		.course-study-body{
+			position: absolute;
+			overflow: hidden;
+			left:0;
+			top: 0;
+			height: 100%;
+			width: 100%;
+			padding:0 0rpx;
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+			.body-title{
+				height: 150rpx;
+				text-align: center;
+				font-size: 33rpx;
+				padding-top: 70rpx;
+				line-height: 46rpx;
+				box-sizing: border-box;
+				font-weight: 500;
+				color:#000;
+				position: relative;
+				// margin-bottom: 23rpx;
+				.arrow-icon{
+					position: absolute;
+					left:36rpx;
+					top:80rpx;
+					color: #000;
+				}
+			}
+			.talking-list{
+				flex:1;
+				overflow-y: auto;
+				padding: 30rpx;
+				background: #fff;
+				border-radius: 30rpx 30rpx 0 0;
+				.study-num{
+					height: 36rpx;
+					line-height: 36rpx;
+					text-align: center;
+					margin-bottom: 15rpx;
+				}
+				.talking-item{
+					margin-bottom: 46rpx;
+				}
+			}
+			.talk-btns{
+				height: 180rpx;
+				background-color: #fff;
+				padding: 25rpx 30rpx 0;
+				.touch-btn{
+					height: 92rpx;
+					box-shadow: 0 8rpx 20rpx 0 rgba(0,0,0,.06);
+					text-align: center;
+					line-height: 92rpx;
+					color: #000;
+					font-weight: 400;
+				}
+			}
+		}
+	}
 </style>
diff --git a/src/pages/courseDetail/submit.vue b/src/pages/courseDetail/submit.vue
index 0ab60bc6..be117054 100644
--- a/src/pages/courseDetail/submit.vue
+++ b/src/pages/courseDetail/submit.vue
@@ -20,14 +20,23 @@
 						<img class="w_100" src="/src/static/images/test/touxiang.png" mode="widthFix" />
 					</view>
 					<view class="num-box">
-						<view class="">综合评分</view>
-						<view class="">
-							<uv-slider v-model="num" min="0" max="10"></uv-slider>
+						<view class="font_pf fz-28 c-666">综合评分</view>
+						<view class="slider-box">
+							<uv-slider step="1" activeColor="#0066FF" :blockSize="14" v-model="num" min="0" max="10"></uv-slider>
+						</view>
+						<view class="flex-jcsb">
+							<view class="font_pf fz-30 c-000">0</view>
+							<view class="font_pf fz-30 c-000 tar">10</view>
 						</view>
 					</view>
 				</view>
-				<view class="num">平分</view>
-				<view class="num">平分</view>
+				<view class="tab">
+					<view class="tab-btn" :class="activeTab == 1 ? 'is-active' : ''" @click="changeTab(1)">建议</view>
+					<view class="tab-btn" :class="activeTab == 2 ? 'is-active' : ''" @click="changeTab(2)">提问</view>
+				</view>
+				<view class="input-textarea">
+					<uv-textarea v-model="aaa"  height="124" :placeholder="activeTab == 1?'请输入你的建议...':'请输入你的问题...'"></uv-textarea>
+				</view>
 			</view>
 		</view>
 		<view class="btn-box font_pf">
@@ -43,6 +52,11 @@ import { getCourseDetailApi } from '@/api/courseDetail.js';
 // import {formatDate2} from '@/common/common.js'
 import common from '@/common/common';
 const num = ref(0);
+const activeTab = ref(1);
+const aaa = ref('')
+const changeTab = (type) => {
+	activeTab.value = type;
+};
 // tab栏
 onLoad((params) => {});
 </script>
@@ -53,7 +67,7 @@ onLoad((params) => {});
 }
 .detail-body {
 	box-sizing: border-box;
-	min-height: calc(100vh - (var(--status-bar-height)+37rpx));
+	min-height: calc(100vh - (var(--status-bar-height)+50rpx));
 	padding: 29rpx 37rpx;
 	width: 100%;
 	display: flex;
@@ -67,7 +81,7 @@ onLoad((params) => {});
 	margin-bottom: 30rpx;
 }
 .body-content {
-	// flex: 1;
+	flex: 1;
 	background-color: #ffffff;
 	border-radius: 15rpx;
 	padding: 36rpx;
@@ -90,11 +104,62 @@ onLoad((params) => {});
 	font-size: 24rpx;
 	margin-bottom: 28rpx;
 }
+.num {
+	display: flex;
+	width: 100%;
+	// height: 92rpx;
+	justify-content: space-between;
+	margin-bottom: 40rpx;
+}
 .num-pic {
 	width: 92rpx;
 	height: 92rpx;
+	padding-top: 20rpx;
+	margin-right: 20rpx;
 }
 .num-box {
+	flex: 1;
+	display: flex;
+	// height: 100%;
+	justify-content: space-between;
+	flex-direction: column;
+}
+.slider-box {
+	width: 100%;
+	:deep(.uv-slider) {
+		width: 100%;
+	}
+	:deep(uni-slider) {
+		margin: 0 16rpx 10rpx 0;
+	}
+	:deep(.uni-slider-tap-area) {
+		padding: 10rpx 0;
+	}
+	:deep(.uni-slider-thumb) {
+		border: 2px solid #0066ff;
+	}
+}
+.tab {
+	display: flex;
+	margin-bottom: 30rpx;
+}
+.tab-btn {
+	width: 78rpx;
+	height: 36rpx;
+	font-size: 22rpx;
+	color: #999999;
+	text-align: center;
+	border-radius: 8rpx;
+	border: 2rpx solid #999999;
+	margin-right: 30rpx;
+}
+.is-active {
+	color: #0066ff;
+	border: 2rpx solid #0066ff;
+}
+.input-textarea{
+	// height: 250rpx;
+	// padding-bottom: 250rpx;
 }
 .btn-box {
 	position: fixed;
@@ -110,6 +175,13 @@ onLoad((params) => {});
 		height: 80rpx;
 	}
 }
+.c-666 {
+	color: #666666;
+}
+.c-000 {
+	font-weight: 600;
+	color: #000;
+}
 .fixed_search_div {
 	padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
 	display: flex;