From d17f6e82d07016b61eb92734720f1f4e2473a5da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=88=AA?= <icho.yang@scai-global.com>
Date: Fri, 19 Sep 2025 09:44:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9video=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=B0=81=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   8 +-
 .../image-preview/video-preview.vue           |  18 +-
 src/pages/course/components/talkingItem.vue   | 316 +++++++++---------
 .../courseRecord/components/talkingItem.vue   |   5 +-
 4 files changed, 181 insertions(+), 166 deletions(-)

diff --git a/.env.development b/.env.development
index 6d2d1a9c..edad90b1 100644
--- a/.env.development
+++ b/.env.development
@@ -24,16 +24,16 @@ VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
 
 
 # dev
-# VITE_APP_BASE_H5_API_Url = 'http://25.18.122.65:7001'
+VITE_APP_BASE_H5_API_Url = 'http://25.18.122.65:7001'
 # sit
-VITE_APP_BASE_H5_API_Url = 'http://25.18.122.92:9786'
+# VITE_APP_BASE_H5_API_Url = 'http://25.18.122.92:9786'
 
 # UAT
 # VITE_APP_BASE_H5_API_Url = 'http://25.18.122.78:9786'
 
 # 任东
-# VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.16.130:9601'
-# VITE_APP_BASE_H5_API_Url_TRASTUDY = 'http://25.64.16.130:9602'
+VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.16.130:9601'
+VITE_APP_BASE_H5_API_Url_TRASTUDY = 'http://25.64.16.130:9602'
 
 # VITE_APP_BASE_H5_API_Url_TRAEXAM = 'http://25.64.16.140:9604'
 # 张建成
diff --git a/src/components/image-preview/video-preview.vue b/src/components/image-preview/video-preview.vue
index 467d4242..0166b928 100644
--- a/src/components/image-preview/video-preview.vue
+++ b/src/components/image-preview/video-preview.vue
@@ -1,6 +1,7 @@
 <template>
 	<view class="video-view-box" @click="showModelNow">
-
+		<imagePreviewVue :imgId="picId" class="preview-pic" v-if="picId"/>
+		<imagePreviewVue :src="picSrc" class="preview-pic" v-if="picSrc"/>
 		<view class="img-box">
 			<image 
 				class="icon" 
@@ -29,13 +30,23 @@
 	import { downloadFile,getPreviewFileUrl } from'@/api/common.js'
 	import { useStorageStore } from "@/store/storage.js"
 	import { get_base_url } from '@/api/request.js'
+	import imagePreviewVue from './image-preview.vue'
 	export default {
 		name:"video-preview",
+		components:{imagePreviewVue},
 		props:{
 			fileId:{
 				default:'',
 				type:String
 			},
+			picId:{
+				default:'',
+				type:String
+			},
+			picSrc:{
+				default:'',
+				type:String
+			},
 			src:{
 				default:'',
 				type:String
@@ -154,6 +165,11 @@
 		height: 100rpx;
 		transform: translate(-50%, -50%);
 	}
+		.preview-pic{
+			width: 100%;
+			height: 100%;
+			position: absolute;
+		}
 	.overlay-box .video-cont-center{
 		width: 100vw;
 		max-height: 100%;
diff --git a/src/pages/course/components/talkingItem.vue b/src/pages/course/components/talkingItem.vue
index 7a84a470..f17aadf9 100644
--- a/src/pages/course/components/talkingItem.vue
+++ b/src/pages/course/components/talkingItem.vue
@@ -25,10 +25,8 @@
 		<!-- 对话信息 -->
 		<view :class="['talking-info', [4].indexOf(type) >= 0 ? 'talking-info-less' : '']">
 			<!-- 语音加载状态 -->
-			<view
-				:class="['talking-gif', !voiceLoading && activeVoiceId === dataInfo.id ? 'is-play' : '']"
-				v-if="!([2, 5, 8, 9].indexOf(type) >= 0)"
-			>
+			<view :class="['talking-gif', !voiceLoading && activeVoiceId === dataInfo.id ? 'is-play' : '']"
+				v-if="!([2, 5, 8, 9].indexOf(type) >= 0)">
 				<CommonLoading color="#06f" v-show="voiceLoading" />
 			</view>
 			<view class="talking-cont">
@@ -40,21 +38,12 @@
 				</view>
 				<!-- 维度信息预览 -->
 				<view v-if="type === 5 && !dataInfo.isLoading" style="padding-top: 16rpx">
-					<ChartFour
-						v-if="dataInfo.evalDimens.length === 4"
-						:dataList="dataInfo.evalDimens"
-						:score="dataInfo.asrGrade"
-					/>
-					<ChartThree
-						v-if="dataInfo.evalDimens.length === 3"
-						:dataList="dataInfo.evalDimens"
-						:score="dataInfo.asrGrade"
-					/>
-					<ChartFive
-						v-if="dataInfo.evalDimens.length === 5"
-						:dataList="dataInfo.evalDimens"
-						:score="dataInfo.asrGrade"
-					/>
+					<ChartFour v-if="dataInfo.evalDimens.length === 4" :dataList="dataInfo.evalDimens"
+						:score="dataInfo.asrGrade" />
+					<ChartThree v-if="dataInfo.evalDimens.length === 3" :dataList="dataInfo.evalDimens"
+						:score="dataInfo.asrGrade" />
+					<ChartFive v-if="dataInfo.evalDimens.length === 5" :dataList="dataInfo.evalDimens"
+						:score="dataInfo.asrGrade" />
 				</view>
 				<!-- 题干/段落内容 -->
 				<text class="talking-text" v-if="[3, 5, 6, 9].indexOf(type) >= 0 && !dataInfo.isLoading">
@@ -66,29 +55,18 @@
 					{{ showContent }}
 				</text>
 				<!-- 试题问题 -->
-				<Subject
-					v-if="[4, 8].indexOf(type) >= 0 && dataInfo.qnsTyp !== 'ES'"
-					:isPreview="!isLast"
-					:item="subjectInfo"
-					:mode="mode"
-					:clearResult="type === 4"
-					@subject_click="subject_click"
-				/>
+				<Subject v-if="[4, 8].indexOf(type) >= 0 && dataInfo.qnsTyp !== 'ES'" :isPreview="!isLast" :item="subjectInfo"
+					:mode="mode" :clearResult="type === 4" @subject_click="subject_click" />
 				<!-- 试题问题反馈 -->
 				<!-- <RadioSubjectRequest v-if="[8].indexOf(type) >= 0 && dataInfo.qnsTyp !== 'ES'" :item="dataInfo" :mode="mode" @subject_click="subject_click" /> -->
 				<!-- 段落图片视频预览 -->
 				<view v-if="type === 3" style="overflow: hidden">
-					<ImagePreview
-						class="cont-img-box"
-						v-if="(dataInfo.imageAddrs || []).length > 0"
-						:imgId="dataInfo.imageAddrs[0]"
-						:previewDetail="true"
-					></ImagePreview>
-					<VideoPreview
-						class="cont-img-box"
-						v-if="(dataInfo.vidoAddrs || []).length > 0"
-						:fileId="dataInfo.vidoAddrs[0]"
-					></VideoPreview>
+					<ImagePreview class="cont-img-box" v-if="(dataInfo.imageAddrs || []).length > 0"
+						:imgId="dataInfo.imageAddrs[0]" :previewDetail="true"></ImagePreview>
+					<VideoPreview class="cont-img-box" v-if="(dataInfo.vidoAddrs || []).length > 0"
+						:fileId="dataInfo.vidoAddrs[0].vidAddr"
+						:picId="dataInfo.vidoAddrs[0].vidImgAddr">
+					</VideoPreview>
 				</view>
 				<!-- 举例预览 -->
 				<view class="talking-text" v-if="type === 3 && dataInfo.exampie" style="overflow: hidden">
@@ -102,34 +80,18 @@
 				</view>
 				<!-- 播放/暂停 -->
 				<view class="play-btn" v-if="!([9].indexOf(type) >= 0)">
-					<image
-						class="icon"
-						src="@/static/images/course/play.png"
-						style="width: 100%; height: 100%"
-						@click.stop="playVoice()"
-						v-show="!isPlaying"
-					></image>
-					<image
-						class="icon"
-						v-show="isPlaying"
-						src="@/static/images/course/pause.png"
-						style="width: 100%; height: 100%"
-						@click.stop="pauseVoice"
-					></image>
+					<image class="icon" src="@/static/images/course/play.png" style="width: 100%; height: 100%"
+						@click.stop="playVoice()" v-show="!isPlaying"></image>
+					<image class="icon" v-show="isPlaying" src="@/static/images/course/pause.png"
+						style="width: 100%; height: 100%" @click.stop="pauseVoice"></image>
 				</view>
-				<view
-					class="next-learn-btn"
-					v-if="showNextBtn && [5, 8, 9].indexOf(type) >= 0 && isLast"
-					@click.stop="goOnRestartPrgh"
-				>
+				<view class="next-learn-btn" v-if="showNextBtn && [5, 8, 9].indexOf(type) >= 0 && isLast"
+					@click.stop="goOnRestartPrgh">
 					重新学
 					<image class="icon icon-iamge" src="@/static/images/course/refresh-white.png"></image>
 				</view>
-				<view
-					class="next-learn-btn restart"
-					v-if="showNextBtn && [5, 8].indexOf(type) >= 0 && isLast"
-					@click.stop="goOnRestart"
-				>
+				<view class="next-learn-btn restart" v-if="showNextBtn && [5, 8].indexOf(type) >= 0 && isLast"
+					@click.stop="goOnRestart">
 					重新答
 					<image class="icon icon-iamge" src="@/static/images/course/restart.png"></image>
 				</view>
@@ -173,24 +135,12 @@
 	<view :class="['user-answer', props.class]" :id="props.id" v-else-if="[1, 2].indexOf(type) >= 0">
 		<view class="user-info">
 			<view class="avatar-box">
-				<image
-					v-if="userInfo.imagePath"
-					class="img-box"
-					:src="userInfo.imagePath"
-					style="width: 100%; height: 100%"
-				></image>
-				<ImagePreview
-					v-else-if="userInfo.imageAddr"
-					class="img-box"
-					:src="userInfo.imageAddr"
-					style="width: 100%; height: 100%"
-				></ImagePreview>
-				<image
-					v-else
-					class="img-box"
-					src="/static/images/me/default_user_avatar.png"
-					style="width: 100%; height: 100%"
-				></image>
+				<image v-if="userInfo.imagePath" class="img-box" :src="userInfo.imagePath" style="width: 100%; height: 100%">
+				</image>
+				<ImagePreview v-else-if="userInfo.imageAddr" class="img-box" :src="userInfo.imageAddr"
+					style="width: 100%; height: 100%"></ImagePreview>
+				<image v-else class="img-box" src="/static/images/me/default_user_avatar.png" style="width: 100%; height: 100%">
+				</image>
 			</view>
 			<view class="ai-name">
 				{{ userInfo.userName }}
@@ -198,10 +148,8 @@
 		</view>
 
 		<view class="talking-info">
-			<view
-				:class="['talking-gif', !voiceLoading && activeVoiceId === dataInfo.id ? 'is-play' : '']"
-				v-if="[1].indexOf(type) >= 0"
-			>
+			<view :class="['talking-gif', !voiceLoading && activeVoiceId === dataInfo.id ? 'is-play' : '']"
+				v-if="[1].indexOf(type) >= 0">
 				<CommonLoading color="#fff" v-show="voiceLoading || dataInfo.isLoading" />
 			</view>
 			<view class="right-time">{{ voiceTime }}</view>
@@ -218,20 +166,10 @@
 						<image class="icon" src="@/static/images/course/replay.png" style="width: 100%;height: 100%;"></image>
 					</view> -->
 				<view class="play-btn" v-if="[1].indexOf(type) >= 0">
-					<image
-						class="icon"
-						@click.stop="playQnsVoice('qns', dataInfo)"
-						v-show="!isPlaying"
-						src="@/static/images/course/play-blue.png"
-						style="width: 100%; height: 100%"
-					></image>
-					<image
-						class="icon"
-						v-show="isPlaying"
-						@click.stop="pauseVoice"
-						src="@/static/images/course/stop-blue.png"
-						style="width: 100%; height: 100%"
-					></image>
+					<image class="icon" @click.stop="playQnsVoice('qns', dataInfo)" v-show="!isPlaying"
+						src="@/static/images/course/play-blue.png" style="width: 100%; height: 100%"></image>
+					<image class="icon" v-show="isPlaying" @click.stop="pauseVoice" src="@/static/images/course/stop-blue.png"
+						style="width: 100%; height: 100%"></image>
 				</view>
 				<view class="icon text-btn" v-if="type === 1" @click.stop="translateVoice(dataInfo)">文</view>
 				<view class="icon text-right-btn" @click.stop="finishQuestion(dataInfo)" v-show="isLast">完成</view>
@@ -245,24 +183,12 @@
 	<view :class="['user-answer', props.class]" :id="props.id" v-else-if="[0, 6].indexOf(type) >= 0">
 		<view class="user-info">
 			<view class="avatar-box">
-				<image
-					v-if="userInfo.imagePath"
-					class="img-box"
-					:src="userInfo.imagePath"
-					style="width: 100%; height: 100%"
-				></image>
-				<ImagePreview
-					v-else-if="userInfo.imageAddr"
-					class="img-box"
-					:src="userInfo.imageAddr"
-					style="width: 100%; height: 100%"
-				></ImagePreview>
-				<image
-					v-else
-					class="img-box"
-					src="/static/images/me/default_user_avatar.png"
-					style="width: 100%; height: 100%"
-				></image>
+				<image v-if="userInfo.imagePath" class="img-box" :src="userInfo.imagePath" style="width: 100%; height: 100%">
+				</image>
+				<ImagePreview v-else-if="userInfo.imageAddr" class="img-box" :src="userInfo.imageAddr"
+					style="width: 100%; height: 100%"></ImagePreview>
+				<image v-else class="img-box" src="/static/images/me/default_user_avatar.png" style="width: 100%; height: 100%">
+				</image>
 			</view>
 			<view class="ai-name">
 				{{ userInfo.userName }}
@@ -281,18 +207,39 @@
 </template>
 
 <script setup>
-	import { watch, unref, ref, toRefs, computed, nextTick, onMounted } from 'vue';
+	import {
+		watch,
+		unref,
+		ref,
+		toRefs,
+		computed,
+		nextTick,
+		onMounted
+	} from 'vue';
 	import ImagePreview from '@/components/image-preview/image-preview.vue';
 	import VideoPreview from '@/components/image-preview/video-preview.vue';
-	import { downloadVoiceFile, uploadVoiceFile, getAudioByText } from '@/api/common.js';
-	import { studyParagraphOverApi, getAskAboutRawApi } from '@/api/study.js';
+	import {
+		downloadVoiceFile,
+		uploadVoiceFile,
+		getAudioByText
+	} from '@/api/common.js';
+	import {
+		studyParagraphOverApi,
+		getAskAboutRawApi
+	} from '@/api/study.js';
 	import ChartFour from './chartFour.vue';
 	import ChartThree from './chartThree.vue';
 	import ChartFive from './chartFive.vue';
 	import common from '@/common/common';
-	import { getUserInfo } from '@/common/common';
-	import { useStorageStore } from '@/store/storage.js';
-	import { onUnload } from '@dcloudio/uni-app';
+	import {
+		getUserInfo
+	} from '@/common/common';
+	import {
+		useStorageStore
+	} from '@/store/storage.js';
+	import {
+		onUnload
+	} from '@dcloudio/uni-app';
 
 	import Subject from '@/components/examination/subject.vue';
 	// import RadioSubjectRequest from '@/pages/wrong_question_record/components/radio-subject.vue'
@@ -346,7 +293,15 @@
 		}
 	});
 
-	const { type, dataInfo, activeVoiceId, isPlaying, isLast, lastQuestionInfo, teacherInfo } = toRefs(props);
+	const {
+		type,
+		dataInfo,
+		activeVoiceId,
+		isPlaying,
+		isLast,
+		lastQuestionInfo,
+		teacherInfo
+	} = toRefs(props);
 	const emit = defineEmits(['changePlay', 'nextQuestion', 'withdraw', 'finishQuestion', 'answerQuestion']);
 	// 声音播放初始化
 	const talkVoiceObj = ref(uni.createInnerAudioContext());
@@ -374,8 +329,7 @@
 		(val) => {
 			itemVoice.value = '';
 			talkVoiceObj.value.src = '';
-		},
-		{
+		}, {
 			deep: true,
 			immediate: true
 		}
@@ -386,8 +340,7 @@
 			if (!val) {
 				talkVoiceObj.value?.pause();
 			}
-		},
-		{
+		}, {
 			deep: true,
 			immediate: true
 		}
@@ -396,24 +349,21 @@
 		() => props.voiceRate,
 		(val) => {
 			talkVoiceObj.value.playbackRate = Number(val);
-		},
-		{
+		}, {
 			deep: true,
 			immediate: true
 		}
 	);
 	watch(
 		() => props.lastTalkingInfo,
-		() => {},
-		{
+		() => {}, {
 			deep: true,
 			immediate: true
 		}
 	);
 	watch(
 		() => props.dataInfo,
-		() => {},
-		{
+		() => {}, {
 			deep: true,
 			immediate: true
 		}
@@ -548,29 +498,29 @@
 		} else {
 			voiceLoading.value = true;
 			let _type =
-				props.type == 2
-					? 'ans'
-					: props.type == 3
-					? 'pgrh'
-					: props.type == 4
-					? 'qns'
-					: props.type == 5
-					? 'analysis'
-					: props.type == 8
-					? 'stemAnalysis'
-					: '';
+				props.type == 2 ?
+				'ans' :
+				props.type == 3 ?
+				'pgrh' :
+				props.type == 4 ?
+				'qns' :
+				props.type == 5 ?
+				'analysis' :
+				props.type == 8 ?
+				'stemAnalysis' :
+				'';
 			let _readId =
-				props.type == 2
-					? unref(dataInfo)?.intrctId
-					: props.type == 3
-					? unref(dataInfo)?.pgrphId
-					: props.type == 4
-					? unref(dataInfo)?.qnsId
-					: props.type == 5
-					? unref(dataInfo)?.qnsId
-					: props.type == 8
-					? unref(dataInfo)?.qnsId
-					: '';
+				props.type == 2 ?
+				unref(dataInfo)?.intrctId :
+				props.type == 3 ?
+				unref(dataInfo)?.pgrphId :
+				props.type == 4 ?
+				unref(dataInfo)?.qnsId :
+				props.type == 5 ?
+				unref(dataInfo)?.qnsId :
+				props.type == 8 ?
+				unref(dataInfo)?.qnsId :
+				'';
 			let _params = {
 				crsId: unref(dataInfo)?.crsId || '',
 				pgrphId: unref(dataInfo)?.pgrphId || '',
@@ -584,10 +534,10 @@
 			let _url =
 				'/trastudy/traStdyInfo/readContent?' +
 				Object.keys(_params)
-					.map((t) => {
-						return encodeURIComponent(t) + '=' + encodeURIComponent(_params[t]);
-					})
-					.join('&');
+				.map((t) => {
+					return encodeURIComponent(t) + '=' + encodeURIComponent(_params[t]);
+				})
+				.join('&');
 
 			storageStore.getStorageById('audio', _url + _params.teachNo, (url) => {
 				if (url) {
@@ -747,8 +697,10 @@
 		width: 100%;
 		overflow: hidden;
 		margin-bottom: 20rpx;
+
 		.user-info {
 			overflow: hidden;
+
 			.avatar-box {
 				float: left;
 				width: 76rpx;
@@ -759,16 +711,19 @@
 				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;
@@ -776,6 +731,7 @@
 				}
 			}
 		}
+
 		.talking-info {
 			padding: 20rpx;
 			border-radius: 15rpx;
@@ -783,32 +739,39 @@
 			overflow: hidden;
 			padding-bottom: 30rpx;
 			width: 100%;
+
 			&.talking-info-less {
 				float: left;
 				min-width: 400rpx;
 				padding-bottom: 20rpx;
 			}
+
 			.talking-gif {
 				width: 200rpx;
 				height: 38rpx;
 				background: url(@/static/images/course/voice-gray.png) no-repeat;
 				background-size: contain;
 				padding-left: 168rpx;
+
 				&.is-play {
 					background: url(@/static/images/course/voice-gif.gif) no-repeat;
 					background-size: contain;
 				}
 			}
+
 			.talking-cont {
 				margin: 16rpx 0;
 				overflow: hidden;
 				min-height: 48rpx;
+
 				&.last-cont {
 					margin-bottom: 0;
+
 					.talking-text {
 						margin-bottom: 0;
 					}
 				}
+
 				.type-tag {
 					width: 108rpx;
 					height: 46rpx;
@@ -822,6 +785,7 @@
 					line-height: 46rpx;
 					margin-bottom: 10rpx;
 				}
+
 				.talking-text {
 					font-size: 28rpx;
 					line-height: 48rpx;
@@ -829,10 +793,12 @@
 					margin-bottom: 20rpx;
 					word-break: break-all;
 					white-space: pre-line;
+
 					&.loading {
 						// min-height: 36px;
 					}
 				}
+
 				.cont-img-box {
 					width: 433rpx;
 					height: 269rpx;
@@ -842,9 +808,11 @@
 					margin-bottom: 20rpx;
 				}
 			}
+
 			.btns-cont {
 				overflow: hidden;
 				border-top: 3rpx solid #eee;
+
 				.replay-btn {
 					float: left;
 					width: 46rpx;
@@ -853,6 +821,7 @@
 					margin-right: 16rpx;
 					margin-top: 25rpx;
 				}
+
 				.play-btn {
 					float: left;
 					width: 46rpx;
@@ -861,6 +830,7 @@
 					margin-right: 16rpx;
 					margin-top: 25rpx;
 				}
+
 				.next-learn-btn {
 					float: left;
 					padding: 0 60rpx 0 15rpx;
@@ -873,14 +843,17 @@
 					margin-top: 16rpx;
 					margin-right: 16rpx;
 					position: relative;
+
 					&.replay-study-btn {
 						float: right;
 						margin-right: 0;
 					}
+
 					&.restart {
 						background-color: #eaf2ff;
 						color: #06f;
 					}
+
 					.icon-iamge {
 						width: 25rpx;
 						height: 25rpx;
@@ -890,6 +863,7 @@
 						margin-top: -12rpx;
 					}
 				}
+
 				.replay-learn-btn {
 					float: left;
 					padding: 0 60rpx 0 20rpx;
@@ -902,6 +876,7 @@
 					margin-top: 16rpx;
 					margin-right: 16rpx;
 					position: relative;
+
 					.icon-iamge {
 						width: 25rpx;
 						height: 25rpx;
@@ -911,6 +886,7 @@
 						margin-top: -12rpx;
 					}
 				}
+
 				.next-btn {
 					float: right;
 					padding: 0 60rpx 0 20rpx;
@@ -922,6 +898,7 @@
 					border-radius: 8rpx;
 					margin-top: 16rpx;
 					position: relative;
+
 					.icon-iamge {
 						width: 25rpx;
 						height: 25rpx;
@@ -934,12 +911,15 @@
 			}
 		}
 	}
+
 	.user-answer {
 		overflow: hidden;
 		width: 100%;
 		margin-bottom: 20rpx;
+
 		.user-info {
 			overflow: hidden;
+
 			.avatar-box {
 				float: right;
 				width: 76rpx;
@@ -950,11 +930,13 @@
 				border-radius: 10rpx;
 				margin-left: 16rpx;
 				margin-bottom: 16rpx;
+
 				.img-box {
 					width: 100%;
 					height: 100%;
 				}
 			}
+
 			.ai-name {
 				float: right;
 				color: #666;
@@ -970,6 +952,7 @@
 			background-color: #06f;
 			color: #fff;
 		}
+
 		.talking-info {
 			padding: 20rpx;
 			border-radius: 15rpx;
@@ -977,17 +960,20 @@
 			padding-bottom: 30rpx;
 			position: relative;
 			color: #fff;
+
 			.talking-gif {
 				width: 200rpx;
 				height: 38rpx;
 				background: url(@/static/images/course/voice-gray.png) no-repeat;
 				background-size: contain;
 				padding-left: 168rpx;
+
 				&.is-play {
 					background: url(@/static/images/course/voice-white.gif) no-repeat;
 					background-size: contain;
 				}
 			}
+
 			.right-time {
 				position: absolute;
 				right: 20rpx;
@@ -996,9 +982,11 @@
 				height: 38rpx;
 				line-height: 38rpx;
 			}
+
 			.talking-cont {
 				margin-top: 16rpx;
 				overflow: hidden;
+
 				.talking-text {
 					font-size: 28rpx;
 					line-height: 48rpx;
@@ -1006,14 +994,17 @@
 					word-break: break-all;
 					white-space: pre-line;
 					overflow: hidden;
+
 					&.translate-text {
 						min-height: 48rpx;
 					}
 				}
 			}
+
 			.btns-cont {
 				overflow: hidden;
 				border-top: 3rpx solid #eee;
+
 				.replay-btn {
 					float: left;
 					width: 46rpx;
@@ -1022,6 +1013,7 @@
 					margin-right: 16rpx;
 					margin-top: 25rpx;
 				}
+
 				.play-btn {
 					float: left;
 					width: 46rpx;
@@ -1030,6 +1022,7 @@
 					margin-right: 16rpx;
 					margin-top: 25rpx;
 				}
+
 				.text-btn {
 					float: left;
 					width: 46rpx;
@@ -1045,6 +1038,7 @@
 					font-weight: bold;
 					border-radius: 20rpx;
 				}
+
 				.text-right-btn {
 					float: right;
 					padding: 0 10rpx;
@@ -1055,6 +1049,7 @@
 					margin-left: 16rpx;
 					margin-top: 25rpx;
 				}
+
 				.next-btn {
 					float: right;
 					padding: 0 60rpx 0 20rpx;
@@ -1066,6 +1061,7 @@
 					border-radius: 8rpx;
 					margin-top: 16rpx;
 					position: relative;
+
 					.icon-iamge {
 						width: 25rpx;
 						height: 25rpx;
@@ -1078,4 +1074,4 @@
 			}
 		}
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/pages/courseRecord/components/talkingItem.vue b/src/pages/courseRecord/components/talkingItem.vue
index 87de89af..8d7b96cf 100644
--- a/src/pages/courseRecord/components/talkingItem.vue
+++ b/src/pages/courseRecord/components/talkingItem.vue
@@ -49,7 +49,10 @@
 				<view style="overflow: hidden;">
 					<ImagePreview class="cont-img-box" v-if="dataInfo.imgAddr" :src="dataInfo.imgAddr" :previewDetail="true">
 					</ImagePreview>
-					<VideoPreview class="cont-img-box" v-if="dataInfo.vidAddr" :src="dataInfo.vidAddr"></VideoPreview>
+					<VideoPreview class="cont-img-box" v-if="dataInfo.vidAddr" 
+						:src="dataInfo.vidAddr"
+						:picSrc="dataInfo.vidImgAddr"
+					></VideoPreview>
 				</view>
 				<!-- 维度信息预览 -->
 				<view v-if="[4, 8].indexOf(type) >= 0 && dataInfo.qnsTyp === 'ES'" style="padding-top: 16rpx;">