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.json b/src/pages.json
index 411dbbb9..2576942a 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -100,11 +100,13 @@
             }
         },
         {
-        	"path" : "pages/course/study/study",
-        	"style" : 
-        	{
-        		"navigationBarTitleText" : ""
-        	}
+            "path": "pages/course/study",
+            "style": {
+                "navigationBarTitleText": "课程学习",
+                "app-plus": {
+                    "titleNView": false
+                }
+            }
         }
     ],
     "tabBar": {
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>