ai页面

src/components/pages/classroomObservation/components/analysisItem.vue

@@ -2,14 +2,20 @@
 	<div class="analysisItem">
 		<div class="ai-header">
 			<div class="ai-h-left" @click.stop="changeOpenItem(!openItem)">
-				<span :class="['ai-h-l-icon',openItem?'ai-h-l-iconActive':'']"></span>
-				<span class="ai-h-l-text">{{data.title}}</span>
+				<span
+					:class="['ai-h-l-icon', openItem ? 'ai-h-l-iconActive' : '']"
+				></span>
+				<span class="ai-h-l-text">{{ data.title }}</span>
 			</div>
 			<div class="ai-h-right">
-				<span class="ai-h-r-icon1" @click.stop="backLeft()"></span>
-				<span class="ai-h-r-icon2" @click.stop="backRight()"></span>
-				<span class="ai-h-r-icon3" @click.stop="editBtn()"></span>
-				<span class="ai-h-r-icon4" @click.stop="delBtn()"></span>
+				<!-- <span class="ai-h-r-icon1" @click.stop="backLeft()"></span> -->
+				<!-- <span class="ai-h-r-icon2" @click.stop="backRight()"></span> -->
+				<!-- <span class="ai-h-r-icon3" @click.stop="editBtn()"></span> -->
+				<span v-if="!openItem" class="ai-h-r-icon4" @click.stop="delBtn()"></span>
+				<span v-if="openItem" class="ai-h-r-icon1" @click.stop="backLeft()"></span>
+				<span v-if="openItem" class="ai-h-r-icon2" @click.stop="backRight()"></span>
+				<span v-if="openItem" class="ai-h-r-icon3" @click.stop="editBtn()"></span>
+				<!-- <span class="ai-h-r-icon4" @click.stop="delBtn()"></span> -->
 			</div>
 		</div>
 		<div class="ai-main" v-if="openItem">
@@ -19,90 +25,108 @@
 			</div> -->
 
 			<div class="a-m-brief">
-				{{ data.title }}分析图表描述了9个关键步骤，帮助教师设计有效教学并促进学生学习。它涵盖引起注意、呈现信息、引导练习等环节，确保学生掌握知识并能运用所学。
+				{{
+					data.title
+				}}分析图表描述了9个关键步骤，帮助教师设计有效教学并促进学生学习。它涵盖引起注意、呈现信息、引导练习等环节，确保学生掌握知识并能运用所学。
 			</div>
-			<p style="margin: 10px 0;">该课程设计紧密遵循了{{data.title}}理论，特别是在引起注意、提供学习指导、促进表现、提供反馈和增强保持和迁移方面做得较为突出。课程通过引人入胜的新闻引入、分组讨论、实地调查和数据计算等多种方式，有效地吸引了学生的注意力，激发了学生的学习兴趣，促进了学生的主动学习和深入思考。</p>
-				<table border="1" style="text-align: center;border-spacing: 0;">
+			<p style="margin: 10px 0">
+				该课程设计紧密遵循了{{
+					data.title
+				}}理论，特别是在引起注意、提供学习指导、促进表现、提供反馈和增强保持和迁移方面做得较为突出。课程通过引人入胜的新闻引入、分组讨论、实地调查和数据计算等多种方式，有效地吸引了学生的注意力，激发了学生的学习兴趣，促进了学生的主动学习和深入思考。
+			</p>
+			<table border="1" style="text-align: center; border-spacing: 0">
 				<thead>
-				<tr>
-				<th>序号</th>
-				<th>事件类型</th>
-				<th>事件含义</th>
-				<th>次数</th>
-				<th>课堂实例</th>
-				</tr>
+					<tr>
+						<th>序号</th>
+						<th>事件类型</th>
+						<th>事件含义</th>
+						<th>次数</th>
+						<th>课堂实例</th>
+					</tr>
 				</thead>
 				<tbody>
-				<tr>
-				<td>1</td>
-				<td>引起注意</td>
-				<td>通过提出问题和展示视频吸引学生注意力</td>
-				<td>2</td>
-				<td>' '前几天白老师关注到一则新闻''、''我们来看看他们发现了什么''</td>
-				</tr>
-				<tr>
-				<td>2</td>
-				<td>告知目标</td>
-				<td>明确告知学习目标，即解决垃圾问题的重要性</td>
-				<td>1</td>
-				<td>' '要将2024年作为旅游高质量发展年''</td>
-				</tr>
-				<tr>
-				<td>3</td>
-				<td>刺激回忆先前学习</td>
-				<td>通过回顾之前的知识或经验</td>
-				<td>1</td>
-				<td>' '上周咱们班的两位环境调查员就去到葵冲进行了实地调查''</td>
-				</tr>
-				<tr>
-				<td>4</td>
-				<td>呈现教学内容</td>
-				<td>直接呈现新的学习材料</td>
-				<td>3</td>
-				<td>' '我们是人大附中深圳学校五1班的张龙溪''、''准备实地调查一下葵冲的环境情况''、''我们调查到的情况有什么样这样的''</td>
-				</tr>
-				<tr>
-				<td>5</td>
-				<td>提供学习指导</td>
-				<td>给学生提供学习策略、提示、例子或解释</td>
-				<td>2</td>
-				<td>' '保护大棚环境人人有责''、''我校小学部一共有1556人''</td>
-				</tr>
-				<tr>
-				<td>6</td>
-				<td>促进表现</td>
-				<td>鼓励学生实践或表达他们所学的知识或技能</td>
-				<td>3</td>
-				<td>' '大家同意他的想法吗''、''现在请小组长从材料框当中拿出实验记录单''、''好可以开始计算''</td>
-				</tr>
-				<tr>
-				<td>7</td>
-				<td>提供反馈</td>
-				<td>对学生的表现给予及时和具体的反馈</td>
-				<td>2</td>
-				<td>' '你观察得很认真''、''你说的是一个非常实用的方法''</td>
-				</tr>
-				<tr>
-				<td>8</td>
-				<td>评估表现</td>
-				<td>通过测试或其他形式的评估来确定学习成果</td>
-				<td>1</td>
-				<td>' '好这是第四小组的数据我们来看跟大家的一样吗''</td>
-				</tr>
-				<tr>
-				<td>9</td>
-				<td>增强保持和迁移</td>
-				<td>帮助学生记住所学内容，并将知识应用到新情境</td>
-				<td>2</td>
-				<td>' '整个深圳市一天产生的垃圾高达3800头非洲大象这么重''、''如果我们一直都以填埋的方式去处理垃圾的话，可能全球的土地都用于填埋垃圾了''</td>
-				</tr>
+					<tr>
+						<td>1</td>
+						<td>引起注意</td>
+						<td>通过提出问题和展示视频吸引学生注意力</td>
+						<td>2</td>
+						<td>
+							' '前几天白老师关注到一则新闻''、''我们来看看他们发现了什么''
+						</td>
+					</tr>
+					<tr>
+						<td>2</td>
+						<td>告知目标</td>
+						<td>明确告知学习目标，即解决垃圾问题的重要性</td>
+						<td>1</td>
+						<td>' '要将2024年作为旅游高质量发展年''</td>
+					</tr>
+					<tr>
+						<td>3</td>
+						<td>刺激回忆先前学习</td>
+						<td>通过回顾之前的知识或经验</td>
+						<td>1</td>
+						<td>' '上周咱们班的两位环境调查员就去到葵冲进行了实地调查''</td>
+					</tr>
+					<tr>
+						<td>4</td>
+						<td>呈现教学内容</td>
+						<td>直接呈现新的学习材料</td>
+						<td>3</td>
+						<td>
+							'
+							'我们是人大附中深圳学校五1班的张龙溪''、''准备实地调查一下葵冲的环境情况''、''我们调查到的情况有什么样这样的''
+						</td>
+					</tr>
+					<tr>
+						<td>5</td>
+						<td>提供学习指导</td>
+						<td>给学生提供学习策略、提示、例子或解释</td>
+						<td>2</td>
+						<td>' '保护大棚环境人人有责''、''我校小学部一共有1556人''</td>
+					</tr>
+					<tr>
+						<td>6</td>
+						<td>促进表现</td>
+						<td>鼓励学生实践或表达他们所学的知识或技能</td>
+						<td>3</td>
+						<td>
+							'
+							'大家同意他的想法吗''、''现在请小组长从材料框当中拿出实验记录单''、''好可以开始计算''
+						</td>
+					</tr>
+					<tr>
+						<td>7</td>
+						<td>提供反馈</td>
+						<td>对学生的表现给予及时和具体的反馈</td>
+						<td>2</td>
+						<td>' '你观察得很认真''、''你说的是一个非常实用的方法''</td>
+					</tr>
+					<tr>
+						<td>8</td>
+						<td>评估表现</td>
+						<td>通过测试或其他形式的评估来确定学习成果</td>
+						<td>1</td>
+						<td>' '好这是第四小组的数据我们来看跟大家的一样吗''</td>
+					</tr>
+					<tr>
+						<td>9</td>
+						<td>增强保持和迁移</td>
+						<td>帮助学生记住所学内容，并将知识应用到新情境</td>
+						<td>2</td>
+						<td>
+							'
+							'整个深圳市一天产生的垃圾高达3800头非洲大象这么重''、''如果我们一直都以填埋的方式去处理垃圾的话，可能全球的土地都用于填埋垃圾了''
+						</td>
+					</tr>
 				</tbody>
-				</table>
-				<p style="margin-top:10px">建议未来的课程设计可以进一步强化对学习目标的明确告知和评估表现的环节，以确保学生对学习成果有清晰的认识，同时通过更多样化的评估方式来检验学习效果。</p>
+			</table>
+			<p style="margin-top: 10px">
+				建议未来的课程设计可以进一步强化对学习目标的明确告知和评估表现的环节，以确保学生对学习成果有清晰的认识，同时通过更多样化的评估方式来检验学习效果。
+			</p>
 			<!-- <img src="https://s3-alpha-sig.figma.com/img/719a/101b/0eb2f1ec890d08098f77e24a3b439a5f?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=k~x0ZFu7OCJ7260cD8vH-PKLIg9hKpdCRUphSqBc5xJC2nxO5vcOZulwOsINPimQVlLpmxUtXGv-k8BYl8Qz0dMOD-HS3sfdZmLviC1PhvQ-vJvXg9IC4crPanqi31dfoWN6lEACN8MWJZVIc3bp013dQ2MjK2jQD7LROaoaceuuThlVvjggQR1mbAtK03KwgAqCxjVz9hT730xon-Dsvym4EX4iEl7L9pdXVTiFN0rNnpD6WqcjSHnI12h3MF42STF8BrzjDFjXHpB-cx-xIbI-SGFM5DlnJGUC2GX~cOrz~wk5hTmx~uJm9jnnj2~SXKY6WbvB6QrxddzXX06Puw__" style="max-width:100%"> -->
 			<!-- <div class="a-m-content">该课程设计紧密遵循了{{data.title}}理论，特别是在引起注意、提供学习指导、促进表现、提供反馈和增强保持和迁移方面做得较为突出。课程通过引人入胜的新闻引入、分组讨论、实地调查和数据计算等多种方式，有效地吸引了学生的注意力，激发了学生的学习兴趣，促进了学生的主动学习和深入思考。</div> -->
 
-
 			<!-- <div class="ai-m-html" v-html="data.content" v-for="i in 4" :key="i"></div> -->
 		</div>
 	</div>
@@ -110,57 +134,57 @@
 
 <script>
 export default {
-	props:{
-		data:{
-			type:Object,
-			default:()=>{
-				return {}
-			}
-		}
+	props: {
+		data: {
+			type: Object,
+			default: () => {
+				return {};
+			},
+		},
 	},
-	data(){
-		return{
-			openItem:false
-		}
+	data() {
+		return {
+			openItem: false,
+		};
 	},
-	methods:{
-		changeOpenItem(newValue){
+	methods: {
+		changeOpenItem(newValue) {
 			this.openItem = newValue;
 		},
-		backLeft(){
-			this.$message.info("回退左")
+		backLeft() {
+			this.$message.info("回退左");
 		},
-		backRight(){
-			this.$message.info("回退右")
+		backRight() {
+			this.$message.info("回退右");
 		},
-		editBtn(){
-			this.$message.info("编辑")
+		editBtn() {
+			this.$message.info("编辑");
 		},
-		delBtn(){
-			this.$message.info("删除")
-		}
-	}
-}
+		delBtn() {
+			this.$message.info("删除");
+		},
+	},
+};
 </script>
 
 <style scoped>
-.analysisItem{
+.analysisItem {
 	width: 100%;
 	height: auto;
-	
-	margin:10px 0px;
-	
+
+	margin: 10px 0px;
+
 	padding-right: 40px;
 	box-sizing: border-box;
 }
-.ai-header{
+.ai-header {
 	width: 100%;
 	height: 50px;
 	display: flex;
 	background-color: white;
 	border-radius: 5px;
 }
-.ai-h-left{
+.ai-h-left {
 	flex: 1;
 	height: 100%;
 	display: flex;
@@ -170,23 +194,24 @@ export default {
 	cursor: pointer;
 }
 
-.ai-h-l-icon{
+.ai-h-l-icon {
 	width: 16px;
 	height: 16px;
-	background: url("../../../../assets/icon/classroomObservation/right.png") no-repeat;
+	background: url("../../../../assets/icon/classroomObservation/right.png")
+		no-repeat;
 	background-size: 100% 100%;
 	margin-right: 10px;
-	transition: .3s;
+	transition: 0.3s;
 }
 
-.ai-h-l-iconActive{
+.ai-h-l-iconActive {
 	transform: rotate(90deg);
 }
-.ai-h-l-text{
+.ai-h-l-text {
 	font-size: 18px;
 }
 
-.ai-h-right{
+.ai-h-right {
 	width: auto;
 	height: 100%;
 	display: flex;
@@ -195,7 +220,7 @@ export default {
 	position: relative;
 }
 
-.ai-h-right>span{
+.ai-h-right > span {
 	width: 18px;
 	height: 18px;
 	background-size: 100% 100%;
@@ -203,33 +228,38 @@ export default {
 	cursor: pointer;
 }
 
-.ai-h-r-icon1{
+.ai-h-r-icon1 {
 	background: url("../../../../assets/icon/classroomObservation/back.png");
 	/* 镜像 */
 	transform: scaleX(-1);
 }
 
-.ai-h-r-icon2{
+.ai-h-r-icon2 {
 	background: url("../../../../assets/icon/classroomObservation/back.png");
 }
 
-.ai-h-r-icon3{
+.ai-h-r-icon3 {
 	background: url("../../../../assets/icon/classroomObservation/edit.png");
+	/* background: url("../../../../assets/icon/classroomObservation/del.png"); */
+	/* display: none; */
 }
 
+.ai-header:hover .ai-h-r-icon4 {
+	display: block;
+}
 
-.ai-h-r-icon4{
+.ai-h-r-icon4 {
 	background: url("../../../../assets/icon/classroomObservation/del.png");
-	position: absolute;
-	right: -40px;
+	/* position: absolute; */
+	/* right: -40px; */
 	display: none;
 }
 
-.analysisItem:hover .ai-h-r-icon4{
+.analysisItem:hover .ai-h-r-icon4 {
 	display: block;
 }
 
-.ai-main{
+.ai-main {
 	width: 100%;
 	height: auto;
 	background-color: white;
@@ -239,15 +269,15 @@ export default {
 	padding: 10px 20px;
 }
 
-.a-m-brief{
+.a-m-brief {
 	font-size: 16px;
 	/* 斜体 */
 	font-style: italic;
 	margin-bottom: 10px;
 }
 
-td,th{
+td,
+th {
 	padding: 10px;
 }
-
-</style>
+</style>

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

@@ -1,67 +1,123 @@
 <template>
 	<div class="message">
 		<div class="m-header" @click.stop="changeShowMain(!showMain)">
-			<span :class="['m-h-icon',showMain?'m-h-icon-active':'']"></span>
+			<span :class="['m-h-icon', showMain ? 'm-h-icon-active' : '']"></span>
 			<span class="m-h-title">{{ title }}</span>
 		</div>
 		<div class="m-main" v-show="showMain">
-			<div class="m-m-formItem" style="width: 63%;">
-				<div class="m-m-fi-label">课程名称</div>
-				<div class="m-m-fi-input" >
-					<el-input  v-model="from.courseName" placeholder="请输入课程名称"></el-input>
+			<div class="baseInfoLeft">
+				<div class="m-m-formItem">
+					<div class="m-m-fi-label">课程名称</div>
+					<div class="m-m-fi-input">
+						<el-input
+							v-model="from.courseName"
+							placeholder="请输入课程名称"
+						></el-input>
+					</div>
 				</div>
-			</div>
 
-			<div class="m-m-formItem" style="width: 33%;">
-				<div class="m-m-fi-label">授课老师</div>
-				<div class="m-m-fi-input" >
-					<el-input v-model="from.teacherName" placeholder="请输入授课老师"></el-input>
-				</div>
-			</div>
+				<div class="baseInfoLeftBot">
+					<div class="m-m-formItemBot">
+						<div class="m-m-fi-label">授课年级</div>
+						<div class="m-m-fi-input">
+							<el-select v-model="from.grade" placeholder="请选择年级">
+								<el-option
+									v-for="(item, index) in gradeList"
+									:key="index"
+									:value="item.value"
+									:label="item.label"
+								></el-option>
+							</el-select>
+						</div>
+					</div>
 
-			<div class="m-m-formItem" style="width: 23%;">
-				<div class="m-m-fi-label">年级</div>
-				<div class="m-m-fi-input" >
-					<el-select v-model="from.grade" placeholder="请选择年级">
-						<el-option v-for="(item,index) in gradeList" :key="index" :value="item.value" :label="item.label"></el-option>
-					</el-select>
-				</div>
-			</div>
+					<div class="m-m-formItemBot">
+						<div class="m-m-fi-label">授课科目</div>
+						<div class="m-m-fi-input">
+							<el-select v-model="from.subject" placeholder="请选择年级">
+								<el-option
+									v-for="(item, index) in subjectList"
+									:key="index"
+									:value="item.value"
+									:label="item.label"
+								></el-option>
+							</el-select>
+						</div>
+					</div>
 
-			<div class="m-m-formItem" style="width: 23%;">
-				<div class="m-m-fi-label">科目</div>
-				<div class="m-m-fi-input" >
-					<el-select v-model="from.subject" placeholder="请选择年级">
-						<el-option v-for="(item,index) in subjectList" :key="index" :value="item.value" :label="item.label"></el-option>
-					</el-select>
+					<div class="m-m-formItemBot">
+						<div class="m-m-fi-label">授课班级</div>
+						<div class="m-m-fi-input">
+							<el-input
+								v-model="from.class"
+								placeholder="请输入班级"
+							></el-input>
+						</div>
+					</div>
 				</div>
 			</div>
 
-			<div class="m-m-formItem" style="width: 24%;">
-				<div class="m-m-fi-label">班级</div> 
-				<div class="m-m-fi-input" >
-					<el-input v-model="from.class" placeholder="请输入班级"></el-input>
+			<!-- 授课老师，学生人数 -->
+			<div class="baseInfoRight">
+				<div class="m-m-formItem">
+					<div class="m-m-fi-label">授课老师</div>
+					<div class="m-m-fi-input">
+						<el-input
+							v-model="from.teacherName"
+							placeholder="请输入授课老师"
+						></el-input>
+					</div>
 				</div>
-			</div>
 
-			<div class="m-m-formItem" style="width: 23.6%;">
-				<div class="m-m-fi-label">学生人数</div>
-				<div class="m-m-fi-input" >
-					<el-input v-model.number="from.studentNum" placeholder="请输入学生人数"></el-input>
+				<div class="m-m-formItem" style="margin: 10px 0">
+					<div class="m-m-fi-label">学生人数</div>
+					<div class="m-m-fi-input">
+						<el-input
+							v-model.number="from.studentNum"
+							placeholder="请输入学生人数"
+						></el-input>
+					</div>
 				</div>
 			</div>
+			<div class="imgTit">
+				<span>添加课堂图片</span>
+				<span>（建议图片比例16:9，最多上传3张图片）</span>
+			</div>
 			<div class="m-m-formImage">
 				<div class="m-m-fi-imageList">
-					<div class="m-m-fi-imageItem" v-for="item in imageList" :key="item.id" @click.stop="previewImg(item.url)">
-						<span class="m-m-fi-i-icon"></span>
-						<div class="m-m-fi-i-text">{{ item.fileName }}</div>
+					<div class="m-m-fi-imageList">
+						<div
+							class="m-m-fi-imageItem"
+							v-for="item in imageList"
+							:key="item.id"
+							@click.stop="previewImg(item.url)"
+						>
+							<img class="itemUrl" :src="item.url" alt="" />
+						</div>
+						<!-- 图片区域 -->
+					</div>
+
+					<div class="m-m-fi-imageItem" @click.stop="addImage()">
+						<img
+							src="../../../../assets/icon/classroomObservation/Union.png"
+							alt=""
+						/>
+						<div
+							style="
+								font-size: 12px;
+								font-weight: 400;
+								margin-top: 5px;
+								color: rgba(0, 0, 0, 0.4);
+							"
+						>
+							点击上传图片
+						</div>
 					</div>
 					<!-- 图片区域 -->
 				</div>
-				<div class="m-m-fi-btn" @click.stop="addImage()">添加课堂图片</div>
+				<!-- <div class="m-m-fi-btn" >添加课堂图片</div> -->
 			</div>
 
-
 			<!-- <el-form :inline="true" :model="form">
 				<el-form-item label="课程名称" >
 					<el-input v-model="from.courseName" placeholder="请输入课程名称"></el-input>
@@ -92,59 +148,112 @@
 
 <script>
 export default {
-	data(){
-		return{
-			title:"基本信息设置",
-			showMain:true,
-			from:{
-				courseName:"",
-				teacherName:"",
-				grade:"小学五年级",
-				subject:"科学",
-				class:"",
-				studentNum:0,
+	data() {
+		return {
+			title: "基本信息",
+			showMain: true,
+			from: {
+				courseName: "",
+				teacherName: "",
+				grade: "小学五年级",
+				subject: "科学",
+				class: "",
+				studentNum: 0,
 			},
-			imageList:[
-				{id:0,url:"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E8%AF%BE%E5%A0%82%E7%85%A7%E7%89%8711713229346909.jpeg",fileName:"课堂图片1.jpeg"},
-				{id:1,url:"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E8%AF%BE%E5%A0%82%E7%85%A7%E7%89%8721713229377830.jpeg",fileName:"课堂图片2.jpeg"},
-				{id:2,url:"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E8%AF%BE%E5%A0%82%E7%85%A7%E7%89%8731713229401672.jpeg",fileName:"课堂图片3.jpeg"},
-
-			],
-			gradeList:[
-				{value:"小学一年级",label:"小学一年级"},
-				{value:"小学二年级",label:"小学二年级"},
-				{value:"小学三年级",label:"小学三年级"},
-				{value:"小学四年级",label:"小学四年级"},
-				{value:"小学五年级",label:"小学五年级"},
-				{value:"小学六年级",label:"小学六年级"},
+			imageList: [
+				{
+					id: 0,
+					url: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E8%AF%BE%E5%A0%82%E7%85%A7%E7%89%8711713229346909.jpeg",
+					fileName: "课堂图片1.jpeg",
+				},
+				{
+					id: 1,
+					url: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E8%AF%BE%E5%A0%82%E7%85%A7%E7%89%8721713229377830.jpeg",
+					fileName: "课堂图片2.jpeg",
+				},
+				{
+					id: 2,
+					url: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E8%AF%BE%E5%A0%82%E7%85%A7%E7%89%8731713229401672.jpeg",
+					fileName: "课堂图片3.jpeg",
+				},
 			],
-			subjectList:[
-				{value:"科学",label:"科学"},
+			gradeList: [
+				{ value: "小学一年级", label: "小学一年级" },
+				{ value: "小学二年级", label: "小学二年级" },
+				{ value: "小学三年级", label: "小学三年级" },
+				{ value: "小学四年级", label: "小学四年级" },
+				{ value: "小学五年级", label: "小学五年级" },
+				{ value: "小学六年级", label: "小学六年级" },
 			],
-
-		}
+			subjectList: [{ value: "科学", label: "科学" }],
+		};
 	},
-	methods:{
-		addImage(){
-			this.$message.info("添加课堂图片")
+	methods: {
+		addImage() {
+			this.$message.info("添加课堂图片");
 		},
-		changeShowMain(newValue){
+		changeShowMain(newValue) {
 			this.showMain = newValue;
 		},
 		previewImg(url) {
-      this.$hevueImgPreview(url);
-    },
-	}
-}
+			this.$hevueImgPreview(url);
+		},
+	},
+};
 </script>
 
 <style scoped>
-.message{
+.message {
 	width: 100%;
 	height: auto;
 }
+.imgTit{
+  height: 40px;
+  line-height: 40px;
+}
+.imgTit :first-child {
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 22px;
+	text-align: right;
+}
+.imgTit :last-child {
+	font-family: PingFang SC;
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 20px;
+	text-align: left;
+  color: rgba(0, 0, 0, 0.4);
 
-.m-header{
+}
+.baseInfoLeft {
+	display: flex;
+	width: 70%;
+	flex-direction: column;
+	/* justify-content: space-between; */
+	margin-right: 10px;
+}
+.baseInfoLeft >>> .baseInfoLeftBot {
+	display: flex;
+	justify-content: space-between;
+	margin: 10px 0;
+}
+.m-m-formItemBot {
+	width: 30%;
+	/* height: auto; */
+	/* display: flex; */
+	/* flex-direction: column; */
+	/* align-items: left; */
+	/* margin-bottom: 20px; */
+}
+.baseInfoRight {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	/* justify-content: space-between; */
+}
+
+.m-header {
 	width: 100%;
 	height: 50px;
 	display: flex;
@@ -152,100 +261,103 @@ export default {
 	cursor: pointer;
 }
 
-.m-h-icon{
+.m-h-icon {
 	width: 16px;
 	height: 16px;
-	background: url("../../../../assets/icon/classroomObservation/right.png") no-repeat;
+	background: url("../../../../assets/icon/classroomObservation/right.png")
+		no-repeat;
 	background-size: 100% 100%;
 	margin-right: 5px;
-	transition: .3s;
+	transition: 0.3s;
 }
 
-.m-h-icon-active{
+.m-h-icon-active {
 	transform: rotate(90deg);
 }
 
-.m-h-title{
+.m-h-title {
 	font-size: 18px;
 }
 
-.m-main{
+.m-main {
 	width: calc(100% - 40px);
 	height: auto;
 	border-radius: 5px;
-	background-color: #FFFFFF;
+	background-color: #ffffff;
 	padding: 20px 20px 0 20px;
 	box-sizing: border-box;
 	display: flex;
 	flex-wrap: wrap;
 }
 
-.m-m-formItem{
+.m-m-formItem {
 	width: 100%;
 	height: auto;
 	display: flex;
-	align-items: center;
-	margin-right: 10px;
-	margin-bottom: 20px;
+	flex-direction: column;
+	align-items: left;
+	/* margin-bottom: 10px; */
 }
 
-.m-m-fi-input{
+.m-m-fi-input {
 	width: 100%;
 }
 
-.m-m-fi-label{
+.m-m-fi-label {
 	font-size: 16px;
 	display: flex;
-	justify-content: center;
-	align-items: center;
+	padding-bottom: 5px;
+	/* justify-content: center; */
+	/* align-items: center; */
 	box-sizing: border-box;
-	padding: 0 10px;
+	/* padding: 0 10px; */
 	text-wrap: nowrap;
 	min-width: fit-content;
 }
 
-.m-m-formImage{
+.m-m-formImage {
 	width: 100%;
 	height: auto;
 	margin-bottom: 20px;
 	display: flex;
-	justify-content: space-between;
-	box-sizing: border-box;
-	padding: 0 25px 0 10px;
+	justify-content: flex-start;
+	flex-wrap: wrap;
 }
 
-.m-m-fi-imageList{
-	flex: 1;
+.m-m-fi-imageList {
 	height: auto;
-	margin-right: 20px;
 	display: flex;
-	flex-wrap: wrap;
 }
 
-.m-m-fi-imageItem{
+.m-m-fi-imageItem {
 	width: auto;
 	height: auto;
-	margin-right:10px;
-	margin-bottom:10px;
+	background-color: rgba(238, 238, 238, 1);
+	width: 140px;
+	height: 100px;
+	margin-right: 10px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	flex-direction: column;
 	box-sizing: border-box;
-	padding: 5px 10px;
 	font-size: 14px;
 	cursor: pointer;
 }
+.m-m-fi-imageItem > .itemUrl {
+	width: 100%;
+}
 
-.m-m-fi-i-icon{
+.m-m-fi-i-icon {
 	width: 20px;
 	height: 20px;
-	background: url("../../../../assets/icon/classroomObservation/file.png") no-repeat;
+	background: url("../../../../assets/icon/classroomObservation/file.png")
+		no-repeat;
 	background-size: 100% 100%;
 	margin-right: 5px;
-
 }
 
-.m-m-fi-btn{
+.m-m-fi-btn {
 	width: auto;
 	height: 35px;
 	box-sizing: border-box;
@@ -254,10 +366,9 @@ export default {
 	align-items: center;
 	border-radius: 18px;
 	font-size: 14px;
-	border: solid 1px #C5C5C5;
+	border: solid 1px #c5c5c5;
 	background-color: white;
 	cursor: pointer;
 	padding: 0 10px;
 }
-
-</style>
+</style>

src/components/pages/classroomObservation/components/chatArea.vue

@@ -1,84 +1,262 @@
 <template>
 	<div class="chatArea">
+		<div class="m-operation">
+			<div>实时转录</div>
+			<div>2023-11-11 11:11:24</div>
+		</div>
+		<div class="titBar">
+			<div
+				@click="cutBar(index)"
+				:class="barNum == index ? 'titBarBorder' : ''"
+				v-for="(i, index) in titBarList"
+				:key="index + 'a'"
+			>
+				<img :src="i.ico" alt="" />{{ i.title }}
+			</div>
+		</div>
 		<div class="ca-top">
 			<!-- 开始页面 -->
-			<startPage v-show="pageStatus==0" @startTape="tapeSubmit" @uploadTape="uploadRecording"/>
+			<startPage
+				v-show="barNum == 0 && !TapeNum"
+				@startTape="tapeSubmit"
+				@uploadTape="uploadRecording"
+			/>
 			<!-- 实时转录 -->
-			<transcription v-show="pageStatus==1" :data="transcriptionData"/>
+			<transcription v-show="barNum == 1" :data="transcriptionData" />
 			<!-- 上传录音页 -->
-			<tape :chatData="chatList" v-show="pageStatus==2"/>
+			<tape :chatData="chatList" v-show="barNum == 0 && TapeNum" />
+			<!-- <div class="t-t-m-Item" v-show="cardStatus==1"> -->
+			<iframe
+				ref="viframe"
+				v-if="barNum == 2"
+				style="width: 100%; height: 99%; border: none"
+				:src="
+					'https://view.officeapps.live.com/op/view.aspx?src=' +
+					encodeURIComponent(fileUrl)
+				"
+			></iframe>
+			<!-- </div> -->
 		</div>
 		<div class="ca-bottom">
 			<div class="ca-b-operation">
 				<div class="ca-b-o-header">
 					<div class="ca-b-o-h-left">
-
 						<div class="ca-b-o-h-l-select" @click.stop="changeAnalysis()">
 							<span class="ca-b-o-h-l-s-icon el-icon-collection"></span>
 							<div class="ca-b-o-h-s-l-text">课堂观察</div>
 							<span class="ca-b-o-h-s-l-icon2 el-icon-caret-top"></span>
 						</div>
 
-						<div class="ca-b-o-h-l-select" @click.stop="changeLanguage()" style="color: #3681FC;">
-							<div class="ca-b-o-h-s-l-text">普通话</div>
-							<span class="ca-b-o-h-s-l-icon2 el-icon-caret-top"></span>
+						<div class="ca-b-o-h-l-select" style="color: #3681fc">
+							<div
+								style="cursor: pointer"
+								class="ca-b-o-h-s-l-text"
+								@click.stop="languageShow = !languageShow"
+							>
+								设置
+							</div>
+
+							<div
+								class="languageList"
+								v-click-outside="handleBlur"
+								v-if="languageShow"
+							>
+								<el-radio
+									v-for="(i, index) in languageList"
+									:key="index + 'lag'"
+									:class="i.label == languageRadio ? 'radioBg' : ''"
+									@click.stop="changeLanguage"
+									v-model.number="languageRadio"
+									:label.Num="i.label"
+									>{{ i.lang }}</el-radio
+								>
+							</div>
+
+							<!-- <span class="ca-b-o-h-s-l-icon2 el-icon-caret-top"></span> -->
 						</div>
 
 						<div class="ca-b-o-h-l-btn" @click.stop="uploadRecording()">
 							<div class="ca-b-o-h-b-l-text">上传录音</div>
 						</div>
-
 					</div>
 					<div class="ca-b-o-h-right">
 						<div class="ca-b-o-h-r-radio">
-							<span @click.stop="changeContinuousDialogue(!continuousDialogue)">连续对话</span>
+							<div
+								:class="TapeNum == index ? 'TapeCss' : ''"
+								class="tapeSty"
+								@click="cutTape(index)"
+								v-for="(i, index) in tapeList"
+								:key="index + 'b'"
+							>
+								<img :src="TapeNum == index ? i.ico : i.ico1" alt="" />
+							</div>
+
+							<!-- <span @click.stop="changeContinuousDialogue(!continuousDialogue)"
+								>连续对话</span
+							>
 							<el-switch
-							  v-model="continuousDialogue"
-							  active-color="#3681FC"
-							  inactive-color="#b2bfc3">
-							</el-switch>
+								v-model="continuousDialogue"
+								active-color="#3681FC"
+								inactive-color="#b2bfc3"
+							>
+							</el-switch> -->
 						</div>
 					</div>
 				</div>
-				<div class="ca-b-o-main">
-					<div class="ca-b-o-m-tape" v-show="mainBtnStatus==0" @click.stop="tapeSubmit()">
+				<div v-show="!startTape" class="ca-b-o-main">
+					<div
+						class="ca-b-o-m-tape"
+						v-show="TapeNum == 0 && !startTape"
+						@click.stop="startTape = 1"
+					>
 						<span class="el-icon-microphone"></span>
 						<div class="ca-b-o-m-t-text">点击开始录音</div>
 					</div>
-					<div class="ca-b-o-m-inputAre" v-show="mainBtnStatus==1">
+					<div class="ca-b-o-m-inputAre" v-show="TapeNum == 1">
 						<div class="ca-b-o-m-left">
-							<textarea :value="textareaValue" autosize="none"></textarea>
+							<textarea
+								id="myTextarea"
+								min-rows="1"
+								max-rows="5"
+								:value="textareaValue"
+								placeholder="在此输入您想了解的内容，输入“/”可获取提示语，shift+enter换行"
+								autosize="none"
+							></textarea>
 						</div>
 						<div class="ca-b-o-m-right">
 							<span @click.stop="tapeSubmit()"></span>
-							<div :class="sendBtnDsiable?'ca-b-o-m-r-dsiableBtn':''">发送</div>
+							<div :class="sendBtnDsiable ? 'ca-b-o-m-r-dsiableBtn' : ''">
+								发送
+							</div>
 						</div>
 					</div>
+
 				</div>
+				<div class="ca-b-o-m-inputAreImg" v-show="TapeNum == 0 && startTape">
+						<img
+							style="height: 120%;"
+							src="@/assets/icon/classroomObservation/tapetime.png"
+							alt=""
+						/>
+						<div
+							style="
+								width: 100px;
+								display: flex;
+								justify-content: space-between;
+							"
+						>
+							<div class="lyStart">
+								<img
+									style="width: 12px; height: 12px"
+									src="@/assets/icon/classroomObservation/lyStart.png"
+									alt=""
+								/>
+							</div>
+
+							<div class="lyStart">
+								<img
+									style="width: 12px; height: 12px"
+									src="@/assets/icon/classroomObservation/lyStop.png"
+									alt=""
+								/>
+							</div>
+						</div>
+						<!-- <div class="ca-b-o-m-left">
+							<textarea :value="textareaValue" autosize="none"></textarea>
+						</div>
+						<div class="ca-b-o-m-right">
+							<span @click.stop="tapeSubmit()"></span>
+							<div :class="sendBtnDsiable ? 'ca-b-o-m-r-dsiableBtn' : ''">
+								发送
+							</div>
+						</div> -->
+					</div>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-import startPage from './startPage.vue';
-import transcription from './transcription.vue';
-import tape from './tape.vue'
-	export default {
-		components:{
-			startPage,
-			transcription,
-			tape
-		},
-		data(){
-			return{
-				continuousDialogue:true,
-				mainBtnStatus:0,//0--录音 1--输入
-				pageStatus:0,//0--初始页面  1--实时转录  2--上传录音页
-				textareaValue:"",
-				transcriptionData:{
-					time:"2024-01-13 15:58:00",
-					content:`对爱整洁，有精神、不拖拉，多思考。老师你好，同学们好。
+import startPage from "./startPage.vue";
+import transcription from "./transcription.vue";
+import tape from "./tape.vue";
+
+// 自定义指令，用于处理点击外部区域的事件
+const clickOutside = {
+	bind(el, binding) {
+		// 在元素上绑定一个点击事件监听器
+		el.clickOutsideEvent = function (event) {
+			// 检查点击事件是否发生在元素的内部
+			if (!(el === event.target || el.contains(event.target))) {
+				// 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
+				binding.value(event);
+			}
+		};
+		// 在文档上添加点击事件监听器
+		document.addEventListener("click", el.clickOutsideEvent);
+	},
+	unbind(el) {
+		// 在元素上解除点击事件监听器
+		document.removeEventListener("click", el.clickOutsideEvent);
+	},
+};
+export default {
+	components: {
+		startPage,
+		transcription,
+		tape,
+	},
+	directives: {
+		"click-outside": clickOutside, // 注册自定义指令
+	},
+	data() {
+		return {
+			continuousDialogue: true,
+			mainBtnStatus: 0, //0--录音 1--输入
+			pageStatus: 0, //0--初始页面  1--实时转录  2--上传录音页
+			languageRadio: 1, //设置选择语言
+			languageShow: 0, //控制显示
+			TapeNum: 0,
+			startTape: 0,
+			textareaValue: "",
+			barNum: 0,
+			fileUrl:
+				"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E8%BD%AC%E5%BD%95%E6%96%87%E7%A8%BF1713172600896.xlsx",
+
+			// 设置list
+			languageList: [
+				{ label: 1, lang: "普通话" },
+				{ label: 2, lang: "广东话" },
+				{ label: 3, lang: "英语" },
+			],
+			// 语音文字list
+			tapeList: [
+				{
+					ico: require("@/assets/icon/classroomObservation/mai1.png"),
+					ico1: require("@/assets/icon/classroomObservation/mai2.png"),
+				},
+				{
+					ico: require("@/assets/icon/classroomObservation/wen1.png"),
+					ico1: require("@/assets/icon/classroomObservation/wen2.png"),
+				},
+			],
+			titBarList: [
+				{
+					title: "Al对话",
+					ico: require("@/assets/icon/classroomObservation/Group9101.png"),
+				},
+				{
+					title: "原文速览",
+					ico: require("@/assets/icon/classroomObservation/Vector.png"),
+				},
+				{
+					title: "转录文稿",
+					ico: require("@/assets/icon/classroomObservation/zhuanlu.png"),
+				},
+			],
+			transcriptionData: {
+				time: "2024-01-13 15:58:00",
+				content: `对爱整洁，有精神、不拖拉，多思考。老师你好，同学们好。
 请坐。前几天白老师关注到一则新闻，我们大鹏新区政府提出要将2024年作为旅游高质量发展年，为了吸引更多的游客来到咱们大鹏，你认为最重要的是什么来？第一小组。
 我认为最重要的是要先把环境、绿水青山环境弄好，这样才能吸引更多的人来，大鹏是的。
 大家同意他的想法吗？保护大棚环境人人有责，上周咱们班的两位环境调查员就去到葵冲进行了实地调查，我们来看看他们发现了什么。
@@ -122,152 +300,264 @@ import tape from './tape.vue'
 面对垃圾问题。
 正如第八小组刚刚说的，咱们国家早期的处理方式是直接填埋和焚烧发电，这两种方法在一定程度上减少了垃圾，但也存在着很严重的弊端。现在我们就一起来说一说这两种方法的好处和弊端。第一小组。
 直接填埋这种方法会占用大量土地，而且还会污染土地，焚烧发电这种方法会会污_
-`
+`,
+			},
+			chatList: [
+				{
+					role: "ai",
+					name: "AI助手",
+					create_at: "2024-04-14 10:19:00",
+					content:
+						"Hi~ 你可以针课堂。。。使用。。。提问后点击右下角的加号，可以将新的内容添加到展示看板中。",
 				},
-				chatList:[
-					{
-						role:"ai",
-						name:"AI助手",
-						create_at:"2024-04-14 10:19:00",
-						content:"Hi~ 你可以针课堂。。。使用。。。提问后点击右下角的加号，可以将新的内容添加到展示看板中。"
-					},
-					{
-						role:"user",
-						name:"我",
-						create_at:"2024-04-14 10:20:00",
-						content:"@ABC模型  使用陈老师的5EX课程模型，改编一个新的课程。"
-					},
-					{
-						role:"ai",
-						name:"5EX模型",
-						create_at:"2024-04-14 10:23:00",
-						content:`通过对科学课堂实录的评估，发现需要增加探究型和创造型教学活动的比例，以及优化教学活动的编排，以促进学生的深入理解和应用知识。此外，平衡师生发言时长，特别是通过增加学生主导的互动活动，将有助于提高学生的课堂参与度和学习效果。
+				{
+					role: "user",
+					name: "我",
+					create_at: "2024-04-14 10:20:00",
+					content: "@ABC模型  使用陈老师的5EX课程模型，改编一个新的课程。",
+				},
+				{
+					role: "ai",
+					name: "5EX模型",
+					create_at: "2024-04-14 10:23:00",
+					content: `通过对科学课堂实录的评估，发现需要增加探究型和创造型教学活动的比例，以及优化教学活动的编排，以促进学生的深入理解和应用知识。此外，平衡师生发言时长，特别是通过增加学生主导的互动活动，将有助于提高学生的课堂参与度和学习效果。
 通过对科学课堂实录的评估，发现需要增加探究型和创造型教学活动的比例，以及优化教学活动的编排，以促进学生的深入理解和应用知识。此外，平衡师生发言时长，特别是通过增加学生主导的互动活动，将有助于提高学生的课堂参与度和学习效果。
-Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格`
-					},
-					{
-						role:"ai",
-						name:"AI助手",
-						create_at:"2024-04-14 10:19:00",
-						content:"Hi~ 你可以针课堂。。。使用。。。提问后点击右下角的加号，可以将新的内容添加到展示看板中。"
-					},
-					{
-						role:"user",
-						name:"我",
-						create_at:"2024-04-14 10:20:00",
-						content:"@ABC模型  使用陈老师的5EX课程模型，改编一个新的课程。"
-					},
-					{
-						role:"ai",
-						name:"5EX模型",
-						create_at:"2024-04-14 10:23:00",
-						content:`通过对科学课堂实录的评估，发现需要增加探究型和创造型教学活动的比例，以及优化教学活动的编排，以促进学生的深入理解和应用知识。此外，平衡师生发言时长，特别是通过增加学生主导的互动活动，将有助于提高学生的课堂参与度和学习效果。
+Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格`,
+				},
+				{
+					role: "ai",
+					name: "AI助手",
+					create_at: "2024-04-14 10:19:00",
+					content:
+						"Hi~ 你可以针课堂。。。使用。。。提问后点击右下角的加号，可以将新的内容添加到展示看板中。",
+				},
+				{
+					role: "user",
+					name: "我",
+					create_at: "2024-04-14 10:20:00",
+					content: "@ABC模型  使用陈老师的5EX课程模型，改编一个新的课程。",
+				},
+				{
+					role: "ai",
+					name: "5EX模型",
+					create_at: "2024-04-14 10:23:00",
+					content: `通过对科学课堂实录的评估，发现需要增加探究型和创造型教学活动的比例，以及优化教学活动的编排，以促进学生的深入理解和应用知识。此外，平衡师生发言时长，特别是通过增加学生主导的互动活动，将有助于提高学生的课堂参与度和学习效果。
 通过对科学课堂实录的评估，发现需要增加探究型和创造型教学活动的比例，以及优化教学活动的编排，以促进学生的深入理解和应用知识。此外，平衡师生发言时长，特别是通过增加学生主导的互动活动，将有助于提高学生的课堂参与度和学习效果。
-Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格`
-					},
-				]
-			}
+Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格`,
+				},
+			],
+		};
+	},
+	computed: {
+		sendBtnDsiable() {
+			return true;
 		},
-		computed:{
-			sendBtnDsiable(){
-				return true;
-			}
+	},
+	methods: {
+		handleBlur(event) {
+			// console.log("点击其它区域啦", event);
+			this.languageShow = !this.languageShow;
 		},
-		methods:{
-			// 上传录音
-			uploadRecording(){
-				this.mainBtnStatus = 1;
-				this.pageStatus = 2;
-			},
-			// 切换语言
-			changeLanguage(){
-				this.$message.info("切换语言")
-			},
-			//切换观察
-			changeAnalysis(){
-				this.$message.info("切换观察")
-			},
-			// 切换连续对话
-			changeContinuousDialogue(newValue){
-				this.continuousDialogue = newValue;
-			},
-			//点击开始录音
-			tapeSubmit(){
-				this.mainBtnStatus = 0;
-				this.pageStatus = 1;
+		handShow() {},
+		// 上传录音
+		uploadRecording() {
+			this.mainBtnStatus = 1;
+			// this.barNum = 4;
+		},
+		cutBar(val) {
+			this.barNum = val;
+		},
+		cutTape(val) {
+			this.TapeNum = val * 1;
+			this.startTape = 0;
+			if (val == 1) {
+				this.barNum = 0;
 			}
 		},
-	}
+		// 切换语言
+		changeLanguage() {
+			this.$message.info("切换语言");
+		},
+		//切换观察
+		changeAnalysis() {
+			this.$message.info("切换观察");
+		},
+		// 切换连续对话
+		changeContinuousDialogue(newValue) {
+			this.continuousDialogue = newValue;
+		},
+		//点击开始录音
+		tapeSubmit() {
+			this.mainBtnStatus = 0;
+			this.pageStatus = 1;
+		},
+	},
+};
 </script>
 
 <style scoped>
-.chatArea{
+.chatArea {
 	width: 100%;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
-	align-items: center;
-	justify-content: center;
+	/* align-items: center; */
+	/* justify-content: center; */
 	box-sizing: border-box;
 	padding: 20px;
-
 }
-
-.ca-top{
+.tapeSty {
+	cursor: pointer;
+	width: 40px;
+	height: 25px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	/* padding: 10px 15px; */
+	border-radius: 20px;
+}
+.TapeCss {
+	background-color: #1467ee;
+}
+.titBar {
+	width: 100%;
+	height: 50px;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	z-index: 99;
+}
+.titBarBorder {
+	font-weight: 600;
+	border-bottom: 3px #1467ee solid;
+}
+.titBar > div {
+	height: 100%;
+	margin-right: 40px;
+	font-family: PingFang SC;
+	font-size: 14px;
+	text-align: left;
+	display: flex;
+	align-items: center;
+}
+.titBar > div > img {
+	margin-right: 5px;
+}
+.m-operation {
+	width: 100%;
+	height: 30px;
+	display: flex;
+	font-size: 14px;
+	box-sizing: border-box;
+	padding-right: 30px;
+	margin-bottom: 10px;
+	align-items: baseline;
+}
+.m-operation :first-child {
+	font-family: PingFang SC;
+	font-size: 18px;
+	font-weight: 600;
+	line-height: 26px;
+	text-align: left;
+	margin-right: 10px;
+}
+.m-operation :nth-child(2) {
+	font-family: PingFang SC;
+	font-size: 12px;
+	font-weight: 400;
+	text-align: left;
+}
+.ca-top {
 	width: 100%;
 	flex: 1;
 }
-.ca-bottom{
+.ca-bottom {
 	width: 100%;
 	height: 120px;
-	
 }
 
-.ca-b-operation{
+.ca-b-operation {
 	width: 100%;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
+	justify-content: flex-end;
 }
-.ca-b-o-header{
+.ca-b-o-header {
 	width: 100%;
 	height: 40px;
 	display: flex;
 	align-items: center;
 }
 
-.ca-b-o-h-left{
+.ca-b-o-h-left {
 	flex: 1;
 	height: 100%;
 	display: flex;
 	align-items: center;
 }
 
-.ca-b-o-h-l-select{
+.ca-b-o-h-l-select {
 	width: auto;
 	display: flex;
 	justify-content: center;
+	position: relative;
 	align-items: center;
 	font-size: 14px;
 	box-sizing: border-box;
 	padding: 5px 10px;
 	margin-right: 20px;
 	border-radius: 15px;
-	background-color: white;
 	cursor: pointer;
+	background-color: white;
+}
+
+/* .ca-b-o-h-l-select:hover .languageBlock{
+	display: block;
+}
+.languageBlock {
+	display: none;
+} */
+
+.languageList {
+	position: absolute;
+	background-color: #fff;
+	top: calc(-100% - 100px);
+	left: 0%;
+	width: 120px;
+	/* padding: 0 10px; */
+	/* box-sizing: border-box; */
+	padding: 10px 0;
+	border-radius: 5px;
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+	align-items: center;
+	height: 100px;
+}
+
+.languageList >>> .el-radio {
+	width: 70%;
+	/* margin-bottom: 10px; */
+	padding: 5px 10px;
+	margin: 0;
+	border-radius: 5px;
+}
+.radioBg {
+	background: rgba(243, 247, 253, 1);
 }
 
-.ca-b-o-h-l-s-icon{
+.ca-b-o-h-l-s-icon {
 	margin-right: 2px;
 	font-size: 16px;
 }
 
-.ca-b-o-h-s-l-icon2{
+.ca-b-o-h-s-l-icon2 {
 	margin-left: 5px;
 	font-size: 18px;
 }
 
-.ca-b-o-h-l-btn{
+.ca-b-o-h-l-btn {
 	width: auto;
 	display: flex;
 	justify-content: center;
@@ -281,7 +571,7 @@ Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown
 	cursor: pointer;
 }
 
-.ca-b-o-h-right{
+.ca-b-o-h-right {
 	width: auto;
 	height: 100%;
 	display: flex;
@@ -289,32 +579,36 @@ Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown
 	align-items: center;
 }
 
-.ca-b-o-h-r-radio{
+.ca-b-o-h-r-radio {
 	display: flex;
 	align-items: center;
 	font-size: 14px;
-	
+	background-color: #e7e7e7;
+	border-radius: 20px;
+	overflow: hidden;
 }
-.ca-b-o-h-r-radio>span{
+.ca-b-o-h-r-radio > span {
 	margin-right: 5px;
 	cursor: pointer;
 }
 
-.ca-b-o-main{
+.ca-b-o-main {
 	width: 100%;
-	flex: 1;
+	/* flex: 1; */
+	height: 64px;
+
 	margin-top: 5px;
 	border-radius: 16px;
 	background-color: white;
 	box-shadow: 0 5px 10px 10px #e6eaeb;
-	transition: .3s;
+	transition: 0.3s;
 }
 
-.ca-b-o-main:hover{
+.ca-b-o-main:hover {
 	box-shadow: 0 5px 10px 10px #e1e8eb;
 }
 
-.ca-b-o-m-tape{
+.ca-b-o-m-tape {
 	width: 100%;
 	height: 100%;
 	cursor: pointer;
@@ -322,26 +616,40 @@ Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown
 	justify-content: center;
 	align-items: center;
 	font-size: 20px;
-	color: #3681FC;
-	transition: .3s;
+	color: #3681fc;
+	transition: 0.3s;
 }
 
-.ca-b-o-m-tape>span{
+.ca-b-o-m-tape > span {
 	margin-right: 10px;
 	font-size: 22px;
 }
 
-.ca-b-o-m-tape:hover{
+.ca-b-o-m-tape:hover {
 	color: #1467ee;
 }
 
-.ca-b-o-m-inputAre{
+.ca-b-o-m-inputAre {
 	width: 100%;
 	height: 100%;
 	display: flex;
 	align-items: center;
 }
-.ca-b-o-m-left{
+
+.ca-b-o-m-inputAreImg {
+	width: 100%;
+	height: 64px;
+	display: flex;
+	margin-top: 5px;
+	justify-content: space-between;
+	background-color: #f0f2f5;
+	align-items: center;
+}
+.ca-b-o-m-inputAreImg > img {
+	height: 100%;
+}
+
+.ca-b-o-m-left {
 	flex: 1;
 	height: 100%;
 	display: flex;
@@ -351,7 +659,7 @@ Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown
 	padding: 0 20px;
 }
 
-.ca-b-o-m-left>textarea{
+.ca-b-o-m-left > textarea {
 	resize: none;
 	height: 80%;
 	width: 98%;
@@ -359,7 +667,7 @@ Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown
 	border: none;
 	outline: none;
 }
-.ca-b-o-m-right{
+.ca-b-o-m-right {
 	width: 150px;
 	height: 100%;
 	display: flex;
@@ -368,35 +676,69 @@ Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown
 	/* background-color: red; */
 }
 
-.ca-b-o-m-right>span{
-	width: 35px;
-	height:35px;
-	background: url("../../../../assets/icon/classroomObservation/tape.png") no-repeat;
+#myTextarea::-webkit-input-placeholder {
+	/* Chrome, Opera, Safari */
+	font-size: 14px; /* 修改placeholder字体大小 */
+	color: grey; /* 修改placeholder文字颜色 */
+}
+
+#myTextarea:-moz-placeholder {
+	/* Firefox 18- */
+	font-size: 14px; /* 修改placeholder字体大小 */
+	color: grey; /* 修改placeholder文字颜色 */
+	opacity: 1; /* 修复Firefox的透明度问题 */
+}
+
+#myTextarea::-moz-placeholder {
+	/* Firefox 19+ */
+	font-size: 14px; /* 修改placeholder字体大小 */
+	color: grey; /* 修改placeholder文字颜色 */
+	opacity: 1; /* 修复Firefox的透明度问题 */
+}
+
+#myTextarea:-ms-input-placeholder {
+	/* Internet Explorer 10-11 */
+	font-size: 14px; /* 修改placeholder字体大小 */
+	color: grey; /* 修改placeholder文字颜色 */
+}
+.ca-b-o-m-right > span {
+	width: 24px;
+	height: 24px;
+	background: url("../../../../assets/icon/classroomObservation/tapeIng.png")
+		no-repeat;
 	background-size: 100% 100%;
 	cursor: pointer;
 	margin-right: 10px;
 }
 
-.ca-b-o-m-right>div{
-	width: 90px;
-	height:45px;
+.ca-b-o-m-right > div {
+	width: 52px;
+	height: 30px;
+
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	color: white;
-	font-size: 20px;
-	border-radius: 15px;
-	background-color:#1467ee;
+	font-size: 14px;
+	border-radius: 5px;
+	background-color: #1467ee;
 	margin-right: 10px;
 	cursor: pointer;
 }
 
-.ca-b-o-m-r-dsiableBtn{
+.ca-b-o-m-r-dsiableBtn {
 	/* 禁止手势 */
 	cursor: not-allowed !important;
-	background-color: #AECCFE !important;
+	background-color: #aeccfe !important;
 }
-
-
-
-</style>
+.lyStart {
+	width: 38px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #fff;
+	border-radius: 5px;
+	cursor: pointer;
+}
+</style>

src/components/pages/classroomObservation/components/currencyAnalysis.vue

@@ -2,140 +2,326 @@
 	<div class="analysis">
 		<div class="a-header">
 			<div class="a-h-left" @click.stop="changeShowItem(!showItem)">
-				<span :class="['a-h-l-icon',showItem?'a-h-l-showIcon':'']"></span>
+				<span :class="['a-h-l-icon', showItem ? 'a-h-l-showIcon' : '']"></span>
 				<span class="a-h-l-title">{{ title }}</span>
 			</div>
 			<div class="a-h-right">
-				<div class="a-h-r-btn" @click.stop="addTemplate()">添加模块</div>
+				<div class="a-h-r-btn" @click.stop="addTemplate()">
+					<img src="@/assets/icon/classroomObservation/newcon.png" alt="" />
+					添加模块
+				</div>
 			</div>
 		</div>
 		<div class="a-main" v-show="showItem">
-			<analysisItem v-for="item in analysisList" :key="item.id" :data="item"/>
+			<analysisItem v-for="item in analysisList" :key="item.id" :data="item" />
 		</div>
 		<div v-if="showDialog == true" class="a-dialog" v-el-drag-dialog>
-      <div class="a-d-top">
-       <div class="a-d-t-left">
-				<div :style="tagIndex==index?'background:white':''" class="a-d-t-l-item" v-for="(item,index) in dialogTagList" :key="item.id" @click.stop="tagIndex=index">
-					{{ item.name }}
+			<div class="a-d-top">
+				<div class="a-d-topTit"><div style="width: 136px">添加模块</div></div>
+				<div>
+					<el-input
+						placeholder="请输入内容"
+						prefix-icon="el-icon-search"
+						v-model="input2"
+					>
+					</el-input>
+				</div>
+				<div class="a-d-t-right">
+					<span @click.stop="showDialog = false">×</span>
 				</div>
-			 </div>
-			 <div class="a-d-t-right">
-				<span @click.stop="showDialog=false">×</span>
-			 </div>
-      </div>
-      <div class="a-d-box">
-				<div class="a-d-b-item" v-for="(item,index) in dialogTagDataList[tagIndex]" :key="index">
-					<div class="a-d-b-i-top">
-						<img :src="require('../../../../assets/icon/classroomObservation/avatar.png')">
-						<div class="a-d-b-i-t-title">{{item.title}}</div>
-						<div class="a-d-b-i-t-btn">添加</div>
+			</div>
+			<div style="display: flex; height: 100%">
+				<div class="a-d-t-left">
+					<div class="itemTit">我的模块</div>
+					<div
+						:style="
+							tagIndex == index
+								? 'background: rgba(226, 238, 255, 1);color: rgba(54, 129, 252, 1)'
+								: ''
+						"
+						class="a-d-t-l-item"
+						v-for="(item, index) in dialogTagList"
+						:key="item.id"
+						@click.stop="tagIndex = index"
+					>
+						{{ item.name }}
 					</div>
-					<div class="a-d-b-i-bottom">{{item.brief}}</div>
 				</div>
-      </div>
-    </div>
+				<div class="a-d-box">
+					<div
+						style="
+							font-family: PingFang SC;
+							font-size: 16px;
+							font-weight: 600;
+							line-height: 22px;
+							text-align: left;
+							margin: 20px 0;
+							margin-bottom: 10px;
+						"
+					>
+						推荐
+					</div>
+					<div
+						style="
+							display: flex;
+							justify-content: space-between;
+							flex-wrap: wrap;
+						"
+					>
+						<div
+							class="a-d-b-item"
+							v-for="(item, index) in dialogTagDataList[tagIndex]"
+							:key="index"
+						>
+							<div class="a-d-b-i-top">
+								<img
+									style="height: 22px; width: 22px"
+									:src="
+										require('../../../../assets/icon/classroomObservation/digImg.png')
+									"
+								/>
+								<div class="a-d-b-i-t-title">{{ item.title }}</div>
+							</div>
+							<div class="a-d-b-i-bottom">{{ item.brief }}</div>
+							<div class="a-d-b-i-bottomPer" style="display: block">
+								3982人已使用
+							</div>
+							<div class="a-d-b-i-bottomBtn" style="display: none">
+								<div
+									style="
+										display: flex;
+										width: 100%;
+										justify-content: space-around;
+									"
+								>
+									<div class="a-d-b-i-t-btn">详情</div>
+									<div class="a-d-b-i-t-btn1">添加</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
-import analysisItem from './analysisItem'
+import analysisItem from "./analysisItem";
 export default {
-	components:{
-		analysisItem
+	components: {
+		analysisItem,
 	},
-	data(){
-		return{
-			title:"通用课堂分析",
-			showDialog:false,
-			showItem:true,
-			tagIndex:0,
-			dialogTagList:[
-				{id:1,name:"通用课堂分析"},
-				{id:2,name:"学科课堂分析"},
-				{id:3,name:"扩展分析"},
+	data() {
+		return {
+			title: "通用课堂分析",
+			showDialog: false,
+			showItem: true,
+			tagIndex: 0,
+			dialogTagList: [
+				{ id: 1, name: "通用课堂分析" },
+				{ id: 2, name: "学科课堂分析" },
+				{ id: 3, name: "扩展分析" },
 			],
-			dialogTagDataList:[
+			dialogTagDataList: [
+				[
+					{ title: "OMO智慧课堂分析", brief: "多维度分析课堂整体情况" },
+					{ title: "教学阶段九事件分析", brief: "使用加涅九事件分析教学环节" },
+					{
+						title: "布鲁姆问题分类",
+						brief: "分析问题所属认知层次，引导学生深入思考",
+					},
+					{
+						title: "麦卡锡问题分类",
+						brief: "使用4MAT模式，引导学生从多角度探讨问题",
+					},
+					{ title: "学生回答情况", brief: "使用IRE模型分析学生回答情况" },
+					{ title: "课堂时间分配", brief: "使用S-T分析法分析师生时间占比" },
+					{
+						title: "师生互动分析",
+						brief: "使用S-T分析法分析课堂每一分钟师生交互情况",
+					},
+					{ title: "教学模式分析", brief: "使用S-T分析法分析教学模式类型" },
+					{ title: "SOLO分类法", brief: "使用SOLO分类法评估学生认知层次" },
+					{ title: "Gibbs的反思循环", brief: "分析教学过程的六个阶段" },
+					{
+						title: "Kirkpatrick四级评估模型",
+						brief: "从反应、学习、行为和结果分析教学效果",
+					},
+					{
+						title: "Biggs构造性对齐理论",
+						brief: "评估教学目标、教学活动和评估方法之间是否对齐",
+					},
+					{ title: "Marzano的教学策略模型", brief: "分析课堂采取的教学策略" },
+					{
+						title: "Lemov教学技巧",
+						brief: "分析教师的教学技巧，如设定高期望、频繁检查理解等",
+					},
+					{
+						title: "Atkinson动机理论",
+						brief: "分析课堂设置的挑战与学生动机表现",
+					},
+					{ title: "Dweck成长型心智", brief: "分析教师与学生的心智风格" },
+				],
+				[
+					{ title: "OMO智慧课堂分析", brief: "多维度分析课堂整体情况" },
+					{ title: "教学阶段九事件分析", brief: "使用加涅九事件分析教学环节" },
+					{
+						title: "布鲁姆问题分类",
+						brief: "分析问题所属认知层次，引导学生深入思考",
+					},
+					{
+						title: "麦卡锡问题分类",
+						brief: "使用4MAT模式，引导学生从多角度探讨问题",
+					},
+					{ title: "学生回答情况", brief: "使用IRE模型分析学生回答情况" },
+					{ title: "课堂时间分配", brief: "使用S-T分析法分析师生时间占比" },
+					{
+						title: "师生互动分析",
+						brief: "使用S-T分析法分析课堂每一分钟师生交互情况",
+					},
+					{ title: "教学模式分析", brief: "使用S-T分析法分析教学模式类型" },
+					{ title: "SOLO分类法", brief: "使用SOLO分类法评估学生认知层次" },
+					{ title: "Gibbs的反思循环", brief: "分析教学过程的六个阶段" },
+					{
+						title: "Kirkpatrick四级评估模型",
+						brief: "从反应、学习、行为和结果分析教学效果",
+					},
+					{
+						title: "Biggs构造性对齐理论",
+						brief: "评估教学目标、教学活动和评估方法之间是否对齐",
+					},
+					{ title: "Marzano的教学策略模型", brief: "分析课堂采取的教学策略" },
+					{
+						title: "Lemov教学技巧",
+						brief: "分析教师的教学技巧，如设定高期望、频繁检查理解等",
+					},
+					{
+						title: "Atkinson动机理论",
+						brief: "分析课堂设置的挑战与学生动机表现",
+					},
+					{ title: "Dweck成长型心智", brief: "分析教师与学生的心智风格" },
+				],
 				[
-					{title:"OMO智慧课堂分析",brief:"多维度分析课堂整体情况"},
-					{title:"教学阶段九事件分析",brief:"使用加涅九事件分析教学环节"},
-					{title:"布鲁姆问题分类",brief:"分析问题所属认知层次，引导学生深入思考"},
-					{title:"麦卡锡问题分类",brief:"使用4MAT模式，引导学生从多角度探讨问题"},
-					{title:"学生回答情况",brief:"使用IRE模型分析学生回答情况"},
-					{title:"课堂时间分配",brief:"使用S-T分析法分析师生时间占比"},
-					{title:"师生互动分析",brief:"使用S-T分析法分析课堂每一分钟师生交互情况"},
-					{title:"教学模式分析",brief:"使用S-T分析法分析教学模式类型"},
-					{title:"SOLO分类法",brief:"使用SOLO分类法评估学生认知层次"},
-					{title:"Gibbs的反思循环",brief:"分析教学过程的六个阶段"},
-					{title:"Kirkpatrick四级评估模型",brief:"从反应、学习、行为和结果分析教学效果"},
-					{title:"Biggs构造性对齐理论",brief:"评估教学目标、教学活动和评估方法之间是否对齐"},
-					{title:"Marzano的教学策略模型",brief:"分析课堂采取的教学策略"},
-					{title:"Lemov教学技巧",brief:"分析教师的教学技巧，如设定高期望、频繁检查理解等"},
-					{title:"Atkinson动机理论",brief:"分析课堂设置的挑战与学生动机表现"},
-					{title:"Dweck成长型心智",brief:"分析教师与学生的心智风格"},
+					{ title: "OMO智慧课堂分析", brief: "多维度分析课堂整体情况" },
+					{ title: "教学阶段九事件分析", brief: "使用加涅九事件分析教学环节" },
+					{
+						title: "布鲁姆问题分类",
+						brief: "分析问题所属认知层次，引导学生深入思考",
+					},
+					{
+						title: "麦卡锡问题分类",
+						brief: "使用4MAT模式，引导学生从多角度探讨问题",
+					},
+					{ title: "学生回答情况", brief: "使用IRE模型分析学生回答情况" },
+					{ title: "课堂时间分配", brief: "使用S-T分析法分析师生时间占比" },
+					{
+						title: "师生互动分析",
+						brief: "使用S-T分析法分析课堂每一分钟师生交互情况",
+					},
+					{ title: "教学模式分析", brief: "使用S-T分析法分析教学模式类型" },
+					{ title: "SOLO分类法", brief: "使用SOLO分类法评估学生认知层次" },
+					{ title: "Gibbs的反思循环", brief: "分析教学过程的六个阶段" },
+					{
+						title: "Kirkpatrick四级评估模型",
+						brief: "从反应、学习、行为和结果分析教学效果",
+					},
+					{
+						title: "Biggs构造性对齐理论",
+						brief: "评估教学目标、教学活动和评估方法之间是否对齐",
+					},
+					{ title: "Marzano的教学策略模型", brief: "分析课堂采取的教学策略" },
+					{
+						title: "Lemov教学技巧",
+						brief: "分析教师的教学技巧，如设定高期望、频繁检查理解等",
+					},
+					{
+						title: "Atkinson动机理论",
+						brief: "分析课堂设置的挑战与学生动机表现",
+					},
+					{ title: "Dweck成长型心智", brief: "分析教师与学生的心智风格" },
 				],
-				[{title:"OMO智慧课堂分析",brief:"多维度分析课堂整体情况"},
-					{title:"教学阶段九事件分析",brief:"使用加涅九事件分析教学环节"},
-					{title:"布鲁姆问题分类",brief:"分析问题所属认知层次，引导学生深入思考"},
-					{title:"麦卡锡问题分类",brief:"使用4MAT模式，引导学生从多角度探讨问题"},
-					{title:"学生回答情况",brief:"使用IRE模型分析学生回答情况"},
-					{title:"课堂时间分配",brief:"使用S-T分析法分析师生时间占比"},
-					{title:"师生互动分析",brief:"使用S-T分析法分析课堂每一分钟师生交互情况"},
-					{title:"教学模式分析",brief:"使用S-T分析法分析教学模式类型"},
-					{title:"SOLO分类法",brief:"使用SOLO分类法评估学生认知层次"},
-					{title:"Gibbs的反思循环",brief:"分析教学过程的六个阶段"},
-					{title:"Kirkpatrick四级评估模型",brief:"从反应、学习、行为和结果分析教学效果"},
-					{title:"Biggs构造性对齐理论",brief:"评估教学目标、教学活动和评估方法之间是否对齐"},
-					{title:"Marzano的教学策略模型",brief:"分析课堂采取的教学策略"},
-					{title:"Lemov教学技巧",brief:"分析教师的教学技巧，如设定高期望、频繁检查理解等"},
-					{title:"Atkinson动机理论",brief:"分析课堂设置的挑战与学生动机表现"},
-					{title:"Dweck成长型心智",brief:"分析教师与学生的心智风格"},],
-				[{title:"OMO智慧课堂分析",brief:"多维度分析课堂整体情况"},
-					{title:"教学阶段九事件分析",brief:"使用加涅九事件分析教学环节"},
-					{title:"布鲁姆问题分类",brief:"分析问题所属认知层次，引导学生深入思考"},
-					{title:"麦卡锡问题分类",brief:"使用4MAT模式，引导学生从多角度探讨问题"},
-					{title:"学生回答情况",brief:"使用IRE模型分析学生回答情况"},
-					{title:"课堂时间分配",brief:"使用S-T分析法分析师生时间占比"},
-					{title:"师生互动分析",brief:"使用S-T分析法分析课堂每一分钟师生交互情况"},
-					{title:"教学模式分析",brief:"使用S-T分析法分析教学模式类型"},
-					{title:"SOLO分类法",brief:"使用SOLO分类法评估学生认知层次"},
-					{title:"Gibbs的反思循环",brief:"分析教学过程的六个阶段"},
-					{title:"Kirkpatrick四级评估模型",brief:"从反应、学习、行为和结果分析教学效果"},
-					{title:"Biggs构造性对齐理论",brief:"评估教学目标、教学活动和评估方法之间是否对齐"},
-					{title:"Marzano的教学策略模型",brief:"分析课堂采取的教学策略"},
-					{title:"Lemov教学技巧",brief:"分析教师的教学技巧，如设定高期望、频繁检查理解等"},
-					{title:"Atkinson动机理论",brief:"分析课堂设置的挑战与学生动机表现"},
-					{title:"Dweck成长型心智",brief:"分析教师与学生的心智风格"},],
 			],
-			analysisList:[
-				{id:1,title:"OMO 智慧课堂分析",content:"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>"},
-				{id:2,title:"教学阶段九事件分析",content:"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>"},
-				{id:3,title:"布鲁姆问题分类",content:"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>"},
-				{id:4,title:"麦卡锡问题分类",content:"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>"},
-				{id:1,title:"学生回答情况",content:"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>"},
-				{id:2,title:"课堂时间分配",content:"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>"},
-				{id:3,title:"师生互动分析",content:"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>"},
-				{id:4,title:"教学模式分析",content:"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>"},
-			]
-		}
+			analysisList: [
+				{
+					id: 1,
+					title: "OMO 智慧课堂分析",
+					content:
+						"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>",
+				},
+				{
+					id: 2,
+					title: "教学阶段九事件分析",
+					content:
+						"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>",
+				},
+				{
+					id: 3,
+					title: "布鲁姆问题分类",
+					content:
+						"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>",
+				},
+				{
+					id: 4,
+					title: "麦卡锡问题分类",
+					content:
+						"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>",
+				},
+				{
+					id: 1,
+					title: "学生回答情况",
+					content:
+						"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>",
+				},
+				{
+					id: 2,
+					title: "课堂时间分配",
+					content:
+						"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>",
+				},
+				{
+					id: 3,
+					title: "师生互动分析",
+					content:
+						"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>",
+				},
+				{
+					id: 4,
+					title: "教学模式分析",
+					content:
+						"<p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>",
+				},
+			],
+		};
 	},
-	methods:{
-		addTemplate(){
+	methods: {
+		addTemplate() {
 			this.showDialog = true;
 		},
-		changeShowItem(newValue){
+		changeShowItem(newValue) {
 			this.showItem = newValue;
-		}
-	}
-}
+		},
+	},
+};
 </script>
 
 <style scoped>
-.analysis{
+.itemTit {
+	width: 136px;
+	height: 32px;
+	padding: 5px 8px 5px 8px;
+	gap: 8px;
+	opacity: 0px;
+	margin: 20px 0;
+	margin-bottom: 10px;
+	border-bottom: 1px #ccc solid;
+}
+.analysis {
 	width: 100%;
 	height: auto;
 }
 
-.a-header{
+.a-header {
 	width: 100%;
 	height: 50px;
 	display: flex;
@@ -145,107 +331,150 @@ export default {
 	padding-right: 40px;
 }
 
-.a-h-left{
+.a-h-left {
 	display: flex;
 	align-items: center;
 	cursor: pointer;
 }
 
-.a-h-l-icon{
+.a-h-l-icon {
 	width: 16px;
 	height: 16px;
-	background: url("../../../../assets/icon/classroomObservation/right.png") no-repeat;
+	background: url("../../../../assets/icon/classroomObservation/right.png")
+		no-repeat;
 	background-size: 100% 100%;
 	margin-right: 5px;
-	transition: .3s;
+	transition: 0.3s;
 }
 
-.a-h-l-showIcon{
+.a-h-l-showIcon {
 	transform: rotate(90deg);
 }
 
-.a-h-l-title{
+.a-h-l-title {
 	font-size: 18px;
 }
 
-.a-h-r-btn{
-	font-size: 14px;
+.a-h-r-btn {
+	font-size: 16px;
 	height: 35px;
 	width: auto;
 	box-sizing: border-box;
-	padding: 0 20px;
-	border: solid 1px #C5C5C5;
-	border-radius: 18px;
+	/* padding: 0 20px; */
+	/* border: solid 1px #C5C5C5; */
+	/* border-radius: 18px; */
 	cursor: pointer;
-	background-color: white;
+	/* background-color: white; */
 	display: flex;
+	color: rgba(54, 129, 252, 1);
 	justify-content: center;
 	align-items: center;
 }
 
-.a-main{
+.a-h-r-btn > img {
+	width: 16px;
+	height: 16px;
+	margin-right: 5px;
+}
+
+.a-main {
 	width: calc(100%);
 	height: auto;
 }
 
 .a-dialog {
-  position: fixed;
-  width: 1200px;
-  height: 500px;
-  min-height: 600px;
-  box-shadow: 0px 0 8px 0px #555555;
-  border-radius: 15px;
-  z-index: 999;
-	left:0;
-	right:0;
+	position: fixed;
+	width: 1200px;
+	height: 500px;
+	min-height: 600px;
+	box-shadow: 0px 0 8px 0px #555555;
+	border-radius: 8px;
+	z-index: 999;
+	background-color: #fff;
+	left: 0;
+	right: 0;
 	top: 100px;
-	margin:0 auto;
+	margin: 0 auto;
 	/* margin: 0 auto; */
-  /* top: 50%; */
-  /* margin: -18% 0 0 -300px; */
+	/* top: 50%; */
+	/* margin: -18% 0 0 -300px; */
 	overflow: hidden;
 }
 
-.a-d-top{
-  background: #ADADAD;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-  border-radius: 15px 15px 0 0;
-  user-select: none;
+.a-d-top {
+	/* background: #adadad; */
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: center;
+	justify-content: space-between;
+	height: 54px;
+	border-radius: 8px 8px 0 0;
+	user-select: none;
+	border-bottom: 1px #ccc solid;
 }
-
-.a-d-t-left{
-	width: calc(100% - 40px);
+.a-d-top >>> .el-input__inner {
+	width: 320px;
+	height: 32px;
+}
+.a-d-top >>> .el-input__icon {
+	line-height: 32px;
+}
+.a-d-topTit {
+	width: 171px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	font-family: PingFang SC;
+	box-sizing: border-box;
+	padding: 5px;
+	line-height: 22px;
+	justify-content: center;
+	/* text-align: left; */
+}
+.a-d-t-left {
+	width: 200px;
 	height: 100%;
 	display: flex;
 	align-items: center;
+	flex-direction: column;
 	justify-content: flex-start;
 	box-sizing: border-box;
 	padding-left: 5px;
 }
 
-.a-d-t-l-item{
-	width: auto;
+.a-d-t-l-item {
+	/* width: auto;
 	height: 90%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	padding: 0 10px;
 	border-radius: 10px;
-	background-color: #D4D9DA;
+	background-color: #d4d9da;
 	margin-right: 3px;
+	cursor: pointer; */
 	cursor: pointer;
+	width: 136px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	border-radius: 5px;
+	font-family: PingFang SC;
+	box-sizing: border-box;
+	padding: 5px;
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 22px;
+	text-align: left;
+	margin-bottom: 20px;
 }
 
-.a-d-t-l-item:hover{
-	background-color: white
+.a-d-t-l-item:hover {
+	background-color: white;
 }
 
-.a-d-t-right{
+.a-d-t-right {
 	width: 40px;
 	height: 40px;
 	margin-right: 10px;
@@ -255,7 +484,7 @@ export default {
 	color: black !important;
 }
 
-.a-d-t-right>span{
+.a-d-t-right > span {
 	width: 25px;
 	height: 25px;
 	border-radius: 25px;
@@ -265,42 +494,58 @@ export default {
 	/* align-items: center; */
 	font-size: 22px;
 	color: #fff;
-	background-color: #ADADAD;
+	/* background-color: #adadad; */
 	cursor: pointer;
-	background-color: #E6E6E6;
-	color: #ADADAD;
+	/* background-color: #e6e6e6; */
+	color: #adadad;
 }
 
-.a-d-box{
+.a-d-box {
 	width: 100%;
-	height: calc(100% - 40px);
-	background-color: #F0F2F5;
+	height: 100%;
+	/* height: calc(100% - 40px); */
+	background-color: #f0f2f5;
 	overflow: auto;
+
+	box-sizing: border-box;
+	padding: 15px;
+	padding-bottom: 50px;
 }
 
-.a-d-b-item{
-	width: 23%;
-	height: 100px;
-	background-color:#D9D9D9;
+.a-d-b-item {
+	width: 22%;
+	height: 200px;
+	display: flex;
+	flex-direction: column;
+	background-color: #fff;
 	border-radius: 10px;
-	margin: 10px;
-	padding: 10px;
+	padding: 15px;
 	float: left;
 	box-sizing: border-box;
-	position: relative;
+	margin-bottom: 10px;
+	/* position: relative; */
+}
+.a-d-b-item:hover .a-d-b-i-bottomBtn {
+	display: block !important;
 }
-.a-d-b-i-top{
+.a-d-b-item:hover .a-d-b-i-bottomPer {
+	display: none !important;
+}
+.a-d-b-i-top {
 	width: 100%;
-	height: 50%;
+	/* height: 50%; */
+	height: 20px;
+	margin-bottom: 15px;
 	display: flex;
+	align-items: center;
 	/* justify-content: space-between; */
 }
-.a-d-b-i-top>img{
+.a-d-b-i-top > img {
 	width: 35px;
 	height: 35px;
 }
 /* .a-d-b-i-top>div{ */
-	/* width: auto;
+/* width: auto;
 	height: 35px;
 	display: flex;
 	justify-content: center;
@@ -308,48 +553,69 @@ export default {
 	margin-left: 10px; */
 /* } */
 
-.a-d-b-i-t-title{
-	width: calc(100% - 90px);
+.a-d-b-i-t-title {
+	width: 100%;
 	height: 35px;
 	display: block;
 	align-items: center;
 	box-sizing: border-box;
 	padding: 0 10px;
 	text-overflow: ellipsis;
-  overflow: hidden;
-  word-break: break-all;
-  white-space: nowrap;
+	overflow: hidden;
+	word-break: break-all;
+	white-space: nowrap;
 	line-height: 35px;
 	/* display: -webkit-box;
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 1;
 	overflow: hidden; */
-
 }
 
-.a-d-b-i-bottom{
+.a-d-b-i-bottom {
 	width: 100%;
-	height: 50%;
-	display: flex;
+	flex: 1;
+	overflow: hidden;
+	/* max-height: 186px; */
 	font-size: 14px;
-	align-items: center;
+	-webkit-line-clamp: 5;
+	line-height: 20px;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
-.a-d-b-i-t-btn{
+.a-d-b-i-t-btn {
 	font-size: 14px;
-	height: 30px;
-	position: relative;
-	top: 5px;
+	/* height: 30px; */
+	/* position: relative; */
+	/* top: 5px; */
 	box-sizing: border-box;
-	padding: 0 10px;
-	background-color: #F3F3F3;
+	padding: 8px 25px;
+	/* background-color: #f3f3f3; */
+	border: 1px solid rgba(54, 129, 252, 1);
 	border-radius: 5px;
+	color: rgba(54, 129, 252, 1);
+
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	cursor: pointer;
-	position: absolute;
-	right: 10px;
-	top: 10px;
+	/* position: absolute; */
+	/* right: 10px; */
+	/* top: 10px; */
+}
+.a-d-b-i-t-btn1 {
+	font-size: 14px;
+	box-sizing: border-box;
+	padding: 8px 25px;
+	border: 1px solid rgba(54, 129, 252, 1);
+	border-radius: 5px;
+	background-color: rgba(54, 129, 252, 1);
+	display: flex;
+	color: #fff;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
 }
-</style>
+</style>

src/components/pages/classroomObservation/components/extendAnalysis.vue

@@ -6,7 +6,10 @@
 				<span class="a-h-l-title">{{ title }}</span>
 			</div>
 			<div class="a-h-right">
-				<div class="a-h-r-btn" @click.stop="addTemplate()">添加模块</div>
+				<div class="a-h-r-btn" @click.stop="addTemplate()">
+					<img src="@/assets/icon/classroomObservation/newcon.png" alt="">
+					添加模块
+				</div>
 			</div>
 		</div>
 		<div class="a-main" v-show="showItem">
@@ -163,20 +166,27 @@ export default {
 }
 
 .a-h-r-btn{
-	font-size: 14px;
+	font-size: 16px;
 	height: 35px;
 	width: auto;
 	box-sizing: border-box;
-	padding: 0 20px;
-	border: solid 1px #C5C5C5;
-	border-radius: 18px;
+	/* padding: 0 20px; */
+	/* border: solid 1px #C5C5C5; */
+	/* border-radius: 18px; */
 	cursor: pointer;
-	background-color: white;
+	/* background-color: white; */
 	display: flex;
+	color: rgba(54, 129, 252, 1);
 	justify-content: center;
 	align-items: center;
 }
 
+.a-h-r-btn > img{
+	width: 16px;
+	height: 16px;
+	margin-right: 5px;
+}
+
 .a-main{
 	width: calc(100%);
 	height: auto;

src/components/pages/classroomObservation/components/messageArea.vue

@@ -1,72 +1,77 @@
 <template>
 	<div class="messageArea">
 		<div class="m-operation">
-			<div class="m-o-btn" @click.stop="useAnalysisTemplate()">使用分析模板</div>
-			<div class="m-o-btn" @click.stop="saveAsTemplate()">另存为模板</div>
 			<div class="m-o-switch">
-				<span class="m-o-s-text" @click.stop="changeShowBrief(!showBrief)">显示模块简介</span>
+				<span class="m-o-s-text" @click.stop="changeShowBrief(!showBrief)"
+					>显示模块简介</span
+				>
 				<el-switch
-				  v-model="showBrief"
-				  active-color="#3681FC"
-				  inactive-color="#b2bfc3">
+					v-model="showBrief"
+					active-color="#3681FC"
+					inactive-color="#b2bfc3"
+				>
 				</el-switch>
 			</div>
+			<div class="m-o-btn" @click.stop="useAnalysisTemplate()">
+				使用分析模板
+			</div>
+			<div class="m-o-btn" @click.stop="saveAsTemplate()">另存为模板</div>
 		</div>
 		<div class="ma-main">
-			<baseMessage/>
+			<baseMessage />
 
-			<currencyAnalysis/>
+			<currencyAnalysis />
 
-			<scienceAnalysis/>
+			<scienceAnalysis />
 
-			<extendAnalysis/>
+			<extendAnalysis />
 			<!-- <div style="height: 10000px;"></div> -->
 		</div>
 	</div>
 </template>
 
 <script>
-import baseMessage from './baseMessage.vue';	//基本信息
-import currencyAnalysis from './currencyAnalysis.vue';//通用课堂分析
-import scienceAnalysis from './scienceAnalysis.vue';//科学课堂分析
-import extendAnalysis from './extendAnalysis.vue';//扩展分析
+import baseMessage from "./baseMessage.vue"; //基本信息
+import currencyAnalysis from "./currencyAnalysis.vue"; //通用课堂分析
+import scienceAnalysis from "./scienceAnalysis.vue"; //科学课堂分析
+import extendAnalysis from "./extendAnalysis.vue"; //扩展分析
 export default {
-	components:{
+	components: {
 		baseMessage,
 		currencyAnalysis,
 		scienceAnalysis,
-		extendAnalysis
+		extendAnalysis,
 	},
-	data(){
-		return{
-			showBrief:true,//是否显示模块简介
-		}
+	data() {
+		return {
+			showBrief: true, //是否显示模块简介
+		};
 	},
-	methods:{
+	methods: {
 		// 切换显示模板简介
-		changeShowBrief(newValue){
+		changeShowBrief(newValue) {
 			this.showBrief = newValue;
 		},
 		// 使用分析模板
-		useAnalysisTemplate(){
-			this.$message.info("使用分析模板")
+		useAnalysisTemplate() {
+			this.$message.info("使用分析模板");
 		},
 		//另存为模板
-		saveAsTemplate(){
-			this.$message.info("另存为模板")
-		}
-	}
-}
+		saveAsTemplate() {
+			this.$message.info("另存为模板");
+		},
+	},
+};
 </script>
 
 <style scoped>
-.messageArea{
+.messageArea {
 	width: 100%;
 	height: 100%;
 	box-sizing: border-box;
 	padding: 20px 10px;
 }
-.m-operation{
+.m-operation {
 	width: 100%;
 	height: 30px;
 	display: flex;
@@ -77,13 +82,13 @@ export default {
 	padding-right: 30px;
 	margin-bottom: 10px;
 }
-.m-o-btn{
+.m-o-btn {
 	width: auto;
 	height: 33px;
 	padding: 0 12px;
-	background-color: #FFFFFF;
+	background-color: #ffffff;
 	box-sizing: border-box;
-	border: solid 1px #BDBDBD;
+	border: solid 1px #bdbdbd;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -91,18 +96,18 @@ export default {
 	border-radius: 17px;
 	cursor: pointer;
 }
-.m-o-switch{
+.m-o-switch {
 	display: flex;
 	align-items: center;
 	margin-right: 10px;
 }
-.m-o-s-text{
+.m-o-s-text {
 	margin-right: 4px;
 	cursor: pointer;
 }
-.ma-main{
+.ma-main {
 	width: 100%;
 	height: calc(100vh - 127px);
 	overflow: auto;
 }
-</style>
+</style>

src/components/pages/classroomObservation/components/scienceAnalysis.vue

@@ -6,7 +6,10 @@
 				<span class="a-h-l-title">{{ title }}</span>
 			</div>
 			<div class="a-h-right">
-				<div class="a-h-r-btn" @click.stop="addTemplate()">添加模块</div>
+				<div class="a-h-r-btn" @click.stop="addTemplate()">
+					<img src="@/assets/icon/classroomObservation/newcon.png" alt="">
+					添加模块
+				</div>
 			</div>
 		</div>
 		<div class="a-main" v-show="showItem">
@@ -165,20 +168,27 @@ export default {
 }
 
 .a-h-r-btn{
-	font-size: 14px;
+	font-size: 16px;
 	height: 35px;
 	width: auto;
 	box-sizing: border-box;
-	padding: 0 20px;
-	border: solid 1px #C5C5C5;
-	border-radius: 18px;
+	/* padding: 0 20px; */
+	/* border: solid 1px #C5C5C5; */
+	/* border-radius: 18px; */
 	cursor: pointer;
-	background-color: white;
+	/* background-color: white; */
 	display: flex;
+	color: rgba(54, 129, 252, 1);
 	justify-content: center;
 	align-items: center;
 }
 
+.a-h-r-btn > img{
+	width: 16px;
+	height: 16px;
+	margin-right: 5px;
+}
+
 .a-main{
 	width: calc(100%);
 	height: auto;

src/components/pages/classroomObservation/components/startPage.vue

@@ -4,42 +4,71 @@
 			<span class="sp-i-personIcon"></span>
 			<div class="sp-i-p-p">
 				<div class="sp-i-title">您好，我是 CocoClass 课堂观察</div>
-				<div class="sp-i-brief">基于课堂录音和实录文稿进行分析，为您提供不同启发。</div>
+				<div class="sp-i-brief">
+					基于课堂录音和实录文稿进行分析，为您提供不同启发。
+				</div>
 			</div>
-			
+
 			<!-- <span class="sp-i-icon1"></span>
 			<span class="sp-i-icon2"></span> -->
-			<div class="sp-i-btn" @click="showIntroduce=false">我已了解并关闭</div>
+			<div class="sp-i-btn" @click="showIntroduce = false">我已了解并关闭</div>
 		</div>
 		<div class="sp-main">
 			<div class="sp-m-item" @click.stop="$emit('startTape')">
-				<span class="sp-m-i-icon1"></span>
-				<div>开始录音</div>
+				<!-- <span class="sp-m-i-icon1"></span> -->
+				<div class="sp-m-item1">开始录音</div>
+				<div class="sp-m-item2">
+					<p>实时语音转录文字</p>
+					<p>智能课堂观察</p>
+				</div>
+				<div class="sp-m-item3">
+					<div style="position: relative;margin-top: 20px;">
+						<img
+							class="img1"
+							src="../../../../assets/icon/classroomObservation/yuan.png"
+							alt=""
+						/>
+						<img
+							class="img2"
+							src="../../../../assets/icon/classroomObservation/yuanYin.png"
+							alt=""
+						/>
+					</div>
+				</div>
 			</div>
 			<div class="sp-m-item" @click.stop="$emit('uploadTape')">
-				<span class="sp-m-i-icon2"></span>
-				<div>上传录音</div>
+				<!-- <span class="sp-m-i-icon2"></span> -->
+				<div class="sp-m-item1">上传录音</div>
+				<div class="sp-m-item2">
+					<p>录音复盘</p>
+					<p>一键分析课堂情况</p>
+				</div>
+				<div  class="sp-m-item3">
+					<img
+							class="img1"
+							src="../../../../assets/icon/classroomObservation/startPagewen.png"
+							alt=""
+						/>
+				</div>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-	export default {
-		emits:['startTape','uploadTape'],
-		data(){
-			return{
-				showIntroduce:true,
-			}
-		},
-		methods:{
-
-		}
-	}
+export default {
+	emits: ["startTape", "uploadTape"],
+	data() {
+		return {
+			showIntroduce: true,
+		};
+	},
+	methods: {},
+};
 </script>
 
 <style scoped>
-.startPage{
+.startPage {
 	width: 100%;
 	height: 100%;
 	position: relative;
@@ -47,102 +76,152 @@
 	flex-direction: column;
 }
 
-.sp-introduce{
+.sp-introduce {
 	width: 100%;
 	height: 116px;
-	background-color: #E2EEFF;
+	background-color: #e2eeff;
 	display: flex;
 	flex-direction: column;
 	box-sizing: border-box;
 	padding-left: 220px;
 	padding-top: 20px;
 	position: relative;
-	margin-top: 5%;
+	margin-top: 7%;
 }
 
-.sp-i-title{
+.sp-i-title {
 	font-size: 24px;
 	font-weight: 600;
-	color: #3681FC;
+	color: #3681fc;
 }
 
-.sp-i-p-p{
+.sp-i-p-p {
 	position: absolute;
 	bottom: 30%;
 }
 
-.sp-i-title>span{
+.sp-i-title > span {
 	margin: 0 10px;
 	white-space: nowrap;
 }
 
-.sp-i-brief{
+.sp-i-brief {
 	font-size: 14px;
 	margin-top: 10px;
 }
 
-.sp-i-personIcon{
+.sp-i-personIcon {
 	width: 200px;
 	height: 200px;
 	position: absolute;
 	left: 0px;
 	bottom: 0;
-	background: url("../../../../assets/icon/classroomObservation/aiImage.png") no-repeat;
+	background: url("../../../../assets/icon/classroomObservation/aiImage.png")
+		no-repeat;
 	background-size: 100% 100%;
 	background-position: center 20px;
 }
 
-
-.sp-i-btn{
+.sp-i-btn {
 	width: auto;
 	height: auto;
 	padding: 5px 10px;
 	position: absolute;
 	right: 10px;
 	bottom: 10px;
-	background-color: #3A76FC;
+	background-color: #3a76fc;
 	font-size: 12px;
 	border-radius: 20px;
 	cursor: pointer;
 	color: white;
 }
 
-.sp-main{
-	width: 100%;
-	flex:1;
+.sp-main {
+	width: 80%;
+	margin: auto;
+	flex: 1;
 	display: flex;
-	align-items: flex-end;
-	justify-content: center;
+	/* align-items: flex-end; */
+	align-items: center;
+	/* align-content: center; */
+	justify-content: space-around;
 	box-sizing: border-box;
-	padding-bottom:20%;
+	/* padding-bottom: 15%; */
 }
 
-.sp-m-item{
-	width: 180px;
-	height: 210px;
+.sp-m-item {
+	width: 220px;
+	height: 330px;
+	gap: 0px;
 	display: flex;
 	flex-direction: column;
+	border-radius: 8px 0px 0px 0px;
+	opacity: 0px;
+	background: rgba(224, 234, 251, 1);
+	box-sizing: border-box;
+	padding: 20px;
+	border-radius: 10px;
+}
+.sp-m-item1 {
+	font-family: PingFang SC;
+	font-size: 28px;
+	font-weight: 600;
+	line-height: 36px;
+	text-align: left;
+}
+.sp-m-item2 {
+	margin: 20px 0;
+	margin: 0;
+}
+.sp-m-item2 {
+	font-size: 14px;
+	font-weight: normal;
+	margin: 20px 0; 
+}
+.sp-m-item2 > p{
+	margin: 0;
+	margin-bottom: 5px;
+}
+.sp-m-item3 {
+	width: 100%;
+	flex: 1;
+	display: flex;
 	align-items: center;
 	justify-content: center;
-	background-color: #E8E8E8;
-	margin: 20px;
-	cursor: pointer;
+}
+.img1 {
+	width: 128px;
+	height: 128px;
+}
+.img2 {
+	width: 90px;
+	height: 90px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: 0;
+	background-color: #5e9afc;
+	/* overflow: hidden; */
+	border-radius: 50%;
+	transform: translate(-50%, -50%);
 }
 
-.sp-m-item>span{
+.sp-m-item > span {
 	width: 40%;
 	height: 40%;
 	background-size: 100% 100%;
 	margin-bottom: 15px;
 }
 
-.sp-m-i-icon1{
-	background: url("../../../../assets/icon/classroomObservation/tape.png") no-repeat;
+.sp-m-i-icon1 {
+	background: url("../../../../assets/icon/classroomObservation/tape.png")
+		no-repeat;
 }
 
-.sp-m-i-icon2{
-	background: url("../../../../assets/icon/classroomObservation/file.png") no-repeat;
+.sp-m-i-icon2 {
+	background: url("../../../../assets/icon/classroomObservation/file.png")
+		no-repeat;
 	background-size: 85% 85% !important;
 	background-position: center 10px;
 }
-</style>
+</style>

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

@@ -1,14 +1,14 @@
 <template>
 	<div class="tape">
-		<div class="t-header">
+		<!-- <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">
+		</div> -->
+		<!-- <div class="t-tapeAudio">
 			<mini-audio :audio-source="audioUrl" class="audio_class"></mini-audio>
-		</div>
+		</div> -->
 		<div class="t-tapeFile">
-			<div class="t-t-header">
+			<!-- <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>
@@ -23,7 +23,7 @@
 					<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> -->
 			<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>

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

@@ -1,9 +1,9 @@
 <template>
 	<div class="transcription">
-		<div class="t-header">
+		<!-- <div class="t-header">
 			<div class="t-h-title">实时转录</div>
 			<div class="t-h-time">{{ data.time }}</div>
-		</div>
+		</div> -->
 		<div class="t-content">
 			{{ data.content }}
 		</div>
@@ -32,7 +32,8 @@
 .transcription{
 	width: 100%;
 	height:100%;
-	padding-top:30px;
+	overflow: auto;
+	/* padding-top:30px; */
 }
 
 .t-header{
@@ -53,7 +54,8 @@
 
 .t-content{
 	width: 100%;
-	height: calc(100vh - 284px);
+	/* height: 100%; */
+	height: calc(100vh - 290px);
 	padding:20px 30px;
 	box-sizing: border-box;
 	overflow: auto;

src/components/pages/classroomObservation/index.vue

@@ -12,8 +12,8 @@
 		</div> -->
 		<div class="co-header2">
 			<div class="co-h2-left">
-				<!-- <span class="co-h2-l-icon"></span> -->
-				<!-- <span class="co-h2-l-hr"></span> -->
+				<span class="co-h2-l-icon"></span>
+				<span class="co-h2-l-hr"></span>
 				<span class="co-h2-l-text">{{ title }}</span>
 			</div>
 			<div class="co-h2-right">
@@ -21,23 +21,24 @@
 					<span class="co-h2-r-b-icon1"></span>
 					<div>生成报告</div>
 				</div>
-				<div class="co-h2-r-btn" @click.stop="preview()">
+				<div class="co-h2-r-btn2" @click.stop="preview()">
 					<!-- <span class="co-h2-r-b-icon2"></span> -->
-					<div>预览</div>
+					<img src="../../../assets/icon/classroomObservation/daoChu.png" alt="">
+					<!-- <div>预览</div> -->
 				</div>
-				<div class="co-h2-r-btn" @click.stop="share()">
-					<!-- <span class="co-h2-r-b-icon2"></span> -->
-					<div>分享</div>
+				<div class="co-h2-r-btn2" @click.stop="share()">
+					<!-- <span class="co-h2-r-b-icon3"></span> -->
+					<img src="../../../assets/icon/classroomObservation/Syan.png" alt="">
+					<!-- <div>分享</div> -->
 				</div>
-
 			</div>
 		</div>
 		<div class="co-main">
 			<div class="co-m-left">
-				<chatArea/>
+				<chatArea />
 			</div>
 			<div class="co-m-right">
-				<messageArea/>
+				<messageArea />
 			</div>
 		</div>
 	</div>
@@ -45,64 +46,64 @@
 
 <script>
 // 聊天区域
-import chatArea from './components/chatArea.vue'
+import chatArea from "./components/chatArea.vue";
 // 信息区域
-import messageArea from './components/messageArea.vue'
-	export default {
-		components:{
-			chatArea,
-			messageArea
+import messageArea from "./components/messageArea.vue";
+export default {
+	components: {
+		chatArea,
+		messageArea,
+	},
+	data() {
+		return {
+			title: "12月19日会议录音",
+			loading: false,
+		};
+	},
+	methods: {
+		// 跳转
+		goTo(path) {
+			this.$message.info(`去到：${path}`);
 		},
-		data(){
-			return{
-				title:"20240410课堂实录",
-				loading:false,
-			}
-		},
-		methods: {
-			// 跳转
-			goTo(path){
-				this.$message.info(`去到：${path}`)
-			},
-			// 生成报告
-			getReport(){
-				this.loading = true;
+		// 生成报告
+		getReport() {
+			this.loading = true;
 
-				setTimeout(()=>{
-					this.$message.success("生成成功")
-					this.loading = false;
-				},5000)
-			},
-			//预览
-			preview(){
-				window.parent.postMessage(
-          {
-            tools: "classroom_observation_board",
-          },
-          "*"
-        );
-			},
-			// 分享
-			share(){
-				this.$message.info("分享")
-			}
+			setTimeout(() => {
+				this.$message.success("生成成功");
+				this.loading = false;
+			}, 5000);
+		},
+		//预览
+		preview() {
+			window.parent.postMessage(
+				{
+					tools: "classroom_observation_board",
+				},
+				"*"
+			);
 		},
-	}
+		// 分享
+		share() {
+			this.$message.info("分享");
+		},
+	},
+};
 </script>
 
 <style scoped>
-.classroomObservation{
+.classroomObservation {
 	width: 100%;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
-	background-color: #F0F2F5;
+	background-color: #f0f2f5;
 }
 
-.co-header1{
+.co-header1 {
 	width: 100%;
 	height: 46px;
-	background-color: #060E17;
+	background-color: #060e17;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -110,7 +111,7 @@ import messageArea from './components/messageArea.vue'
 	padding: 0 20px;
 }
 
-.co-h1-left{
+.co-h1-left {
 	width: auto;
 	height: 22px;
 	display: flex;
@@ -119,55 +120,56 @@ import messageArea from './components/messageArea.vue'
 	padding: 0 20px;
 }
 
-.co-h1-l-icon{
-	color: #5D6268;
+.co-h1-l-icon {
+	color: #5d6268;
 	width: 16px;
 	height: 16px;
 	margin-right: 10px;
 }
 
-.co-h1-l-router{
+.co-h1-l-router {
 	display: flex;
 	align-items: center;
 	color: white;
 	font-size: 14px;
 }
 
-.co-h1-l-router>span{
+.co-h1-l-router > span {
 	margin: 0 5px;
 }
 
-.co-h1-l-r-up{
-	color: #5D6268;
+.co-h1-l-r-up {
+	color: #5d6268;
 	cursor: pointer;
 }
 
-.co-h1-l-r-up:hover{
+.co-h1-l-r-up:hover {
 	color: white;
 }
 
-.co-j1-l-r-down{
+.co-j1-l-r-down {
 	cursor: pointer;
 }
 
-.co-h1-l-r-rightIcon{
+.co-h1-l-r-rightIcon {
 	font-size: 16px;
-	color: #5D6268;
+	color: #5d6268;
 }
 
-.co-header2{
+.co-header2 {
 	width: 100%;
-	min-height: 42px;
-	max-height: 42px;
+	height: 42px;
+	/* min-height: 42px;
+	max-height: 42px; */
 	background-color: white;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	box-sizing: border-box;
-	padding: 0  20px;
+	padding: 0 20px;
 }
 
-.co-h2-left{
+.co-h2-left {
 	width: auto;
 	height: 22px;
 	display: flex;
@@ -175,29 +177,30 @@ import messageArea from './components/messageArea.vue'
 	font-size: 14px;
 }
 
-.co-h2-l-icon{
+.co-h2-l-icon {
 	width: 20px;
 	height: 20px;
 	position: relative;
-	background: url('../../../assets/icon/classroomObservation/close.png') no-repeat;
+	background: url("../../../assets/icon/classroomObservation/Zkicon.png")
+		no-repeat;
 	background-size: 100% 100%;
 }
-.co-h2-l-hr{
+.co-h2-l-hr {
 	width: 2px;
 	height: 20px;
-	background-color: #E7E7E7;
+	background-color: #e7e7e7;
 	border-radius: 10px;
 	margin: 0 10px;
 }
 
-.co-h2-right{
+.co-h2-right {
 	width: auto;
 	height: 100%;
 	display: flex;
 	align-items: center;
 }
 
-.co-h2-r-btn{
+.co-h2-r-btn {
 	width: auto;
 	box-sizing: border-box;
 	padding: 0 10px;
@@ -208,54 +211,73 @@ import messageArea from './components/messageArea.vue'
 	font-size: 14px;
 	margin: 0 10px;
 	box-sizing: border-box;
-	border: solid 1px #3681FC;
-	border-radius: 20px;
+	border: 1px solid rgba(134, 179, 253, 1);
+	/* border: solid 1px #3681FC; */
+	border-radius: 5px;
 }
+.co-h2-r-btn2 {
+	width: auto;
+	box-sizing: border-box;
+	padding: 10px;
+	height: 30px;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	margin: 0 10px;
+	box-sizing: border-box;
+	border-radius: 5px;
+	box-shadow: 0px 4px 10px 0px rgba(29, 57, 131, 0.08);
 
-.co-h2-r-btn>span:nth-child(1){
+	/* box-shadow: 1px 1px 20px 4px rgba(29, 57, 131, 0.05); */
+}
+
+.co-h2-r-btn > span:nth-child(1) {
 	width: 20px;
 	height: 20px;
 	margin-right: 8px;
 }
 
-.co-h2-r-b-icon1{
+.co-h2-r-b-icon1 {
 	background: url("../../../assets/icon/classroomObservation/six.png") no-repeat;
 	background-size: 100% 100%;
 }
 
-.co-h2-r-b-icon2{
-	background: url("../../../assets/icon/classroomObservation/close.png") no-repeat;
+/* .co-h2-r-b-icon2 {
+	background: url("../../../assets/icon/classroomObservation/daoChu.png")
+		no-repeat;
 	background-size: 100% 100%;
 }
+.co-h2-r-b-icon3 {
+	background: url("../../../assets/icon/classroomObservation/Syan.png")
+		no-repeat;
+	background-size: 100% 100%;
+} */
 
+.co-h2-r-blueBtn {
+	background: rgba(134, 179, 253, 1);
 
-.co-h2-r-blueBtn{
-	background-color: #3681FC;
 	color: white;
 }
 
-.co-main{
+.co-main {
 	width: 100%;
 	flex: 1;
 	display: flex;
-	align-items: center;
-	justify-content: center;
+
+	/* align-items: center; */
+	/* justify-content: center; */
 }
 
-.co-m-left{
-	height: 100%;
-	flex: 1;
+.co-m-left {
 	box-sizing: border-box;
+	flex: 1;
+	min-width: 650px;
 }
 
-.co-m-right{
+.co-m-right {
 	height: 100%;
 	flex: 1;
 	box-sizing: border-box;
+	overflow: auto;
 }
-
-
-
-
-
-</style>
+</style>