图片与原文速览

src/components/pages/classroomObservation/components/baseMessage.vue

@@ -327,6 +327,7 @@ export default {
 .m-m-fi-imageList {
 	height: auto;
 	display: flex;
+	flex-wrap: wrap;
 }
 
 .m-m-fi-imageItem {

src/components/pages/classroomObservation/components/tape.vue

@@ -1,29 +1,8 @@
 <template>
 	<div class="tape">
-		<!-- <div class="t-header">
-			<div class="t-h-title">课堂录音</div>
-			<div class="t-h-time">2024-04-13 17:30:00</div>
-		</div> -->
-		<!-- <div class="t-tapeAudio">
-			<mini-audio :audio-source="audioUrl" class="audio_class"></mini-audio>
-		</div> -->
+
 		<div class="t-tapeFile">
-			<!-- <div class="t-t-header">
-				<div class="t-t-h-left">
-					<div class="t-t-h-l-Item" :style="cardStatus==0&&foldStatus?'background:white':''" @click.stop="changeCardStatus(0)">
-						<span class="t-t-h-l-i-icon"></span>
-						<div class="t-t-h-l-i-text">录音原文</div>
-					</div>
-					<div class="t-t-h-l-Item" :style="cardStatus==1&&foldStatus?'background:white':''" @click.stop="changeCardStatus(1)">
-						<span class="t-t-h-l-i-icon"></span>
-						<div class="t-t-h-l-i-text">转录文稿.xlsx</div>
-					</div>
-				</div>
-				<div class="t-t-h-right" @click.stop="changeFoldStatus(!foldStatus)">
-					<span class="t-t-h-r-icon" :style="`transform: scaleY(${foldStatus==0?1:-1});`"></span>
-					<div class="t-t-h-r-text">{{ foldStatus==0 ? '展开' : '收起'}}</div>
-				</div>
-			</div> -->
+		
 			<div class="t-t-main" v-show="foldStatus">
 				<div class="t-t-m-Item" v-show="cardStatus==0">
 					<p v-for="(item,index) in pList" :key="index" v-text="item"></p>
@@ -69,7 +48,7 @@ import pdf from './pdf.vue';
 			return {
 				foldStatus:false,//0--收起状态   1--展开状态
 				cardStatus:0,//0--录音原文   1--转录文稿
-				
+
 				pList:[
     "说话人1 00:00",
     "对爱整洁，有精神、不拖拉，多思考。老师你好，同学们好。",

src/components/pages/classroomObservation/components/transcription.vue

@@ -5,65 +5,116 @@
 			<div class="t-h-time">{{ data.time }}</div>
 		</div> -->
 		<div class="t-content">
-			{{ data.content }}
+			<!-- {{ data.content }} -->
+			<div class="contentCon" v-for="(i, index) in chatList" :key="i + 'a'">
+				<div class="conTim">{{ i.timer }}</div>
+				<div class="conTxt">
+					{{ i.con }}
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-	export default {
-		props:{
-			data:{
-				type:Object,
-				default:()=>{
-					return {}
-				}
-			}
+export default {
+	props: {
+		data: {
+			type: Object,
+			default: () => {
+				return {};
+			},
 		},
-		data() {
-			return {
-				
-			};
-		},
-	}
+	},
+	data() {
+		return {
+			chatList: [
+				{
+					timer: "[00:00]",
+					con: "请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文",
+				},
+				{
+					timer: "[05:00]",
+					con: "请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文",
+				},
+				{
+					timer: "[10:00]",
+					con: "请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文",
+				},
+				{
+					timer: "[15:00]",
+					con: "请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文",
+				},
+				{
+					timer: "[20:00]",
+					con: "请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文",
+				},
+				{
+					timer: "[25:00]",
+					con: "请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文",
+				},
+				{
+					timer: "[30:00]",
+					con: "请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字这里是语音同步转文字请用日常生活为主题，跟我进行英语对话，这里是语音同步转文字，这里是语音同步转文",
+				},
+			],
+		};
+	},
+};
 </script>
 
 <style scoped>
-.transcription{
+.transcription {
 	width: 100%;
-	height:100%;
+	height: 100%;
 	/* display: flex; */
 	/* flex-direction: column; */
 	/* overflow: auto; */
 	/* padding-top:30px; */
 }
-.t-content{
+.contentCon {
+	display: flex;
+	justify-content: flex-start;
+}
+.conTim {
+	flex-shrink: 0;
+	margin-right: 10px;
+	line-height: 32px;
+
+	color: rgba(54, 129, 252, 1);
+}
+.conTxt {
+	font-family: PingFang SC;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 32px;
+	text-align: left;
+}
+.t-content {
 	width: 100%;
 	flex: 1;
 	/* height: 50%; */
 	height: calc(100vh - 290px);
-	padding:20px 30px;
+	padding: 20px 30px;
 	box-sizing: border-box;
 	overflow: auto;
 	white-space: pre-line;
 	word-break: break-all;
 }
 
-.t-header{
+.t-header {
 	width: 100%;
 	height: 40px;
 	display: flex;
 	align-items: center;
 }
-.t-h-title{
+.t-h-title {
 	font-size: 20px;
 	font-weight: bold;
 	margin-right: 10px;
 }
-.t-h-time{
+.t-h-time {
 	font-size: 14px;
-	color:#AEAFB1;
+	color: #aeafb1;
 }
-
-
-</style>
+</style>

src/components/pages/classroomObservation/index.vue

@@ -288,6 +288,8 @@ export default {
 	height: 100%;
 	flex: 1;
 	box-sizing: border-box;
+	min-width: 450px;
+
 	overflow: auto;
 }
 </style>