ai界面

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

@@ -5,13 +5,19 @@
 			<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 class="titBarLeft">
+				<div
+					@click="cutBar(index)"
+					:class="barNum == index ? 'titBarBorder' : ''"
+					v-for="(i, index) in titBarList"
+					:key="index + 'a'"
+				>
+					<img :src="barNum == index ? i.ico : i.ico1" alt="" />{{ i.title }}
+				</div>
+			</div>
+			<div class="titBarRig">
+				<!-- <img src="@/assets/icon/classroomObservation/put.png" alt="" />
+				<div style="cursor: pointer">收起</div> -->
 			</div>
 		</div>
 		<div class="ca-top">
@@ -76,7 +82,9 @@
 						</div>
 
 						<div class="ca-b-o-h-l-btn" @click.stop="uploadRecording()">
-							<div class="ca-b-o-h-b-l-text">上传录音</div>
+							<div class="ca-b-o-h-b-l-text">
+								上传录音
+							</div>
 						</div>
 					</div>
 					<div class="ca-b-o-h-right">
@@ -103,16 +111,43 @@
 						</div>
 					</div>
 				</div>
-				<div v-show="!startTape" class="ca-b-o-main">
+				<div v-show="!judge" class="ca-b-o-main">
 					<div
 						class="ca-b-o-m-tape"
-						v-show="TapeNum == 0 && !startTape"
-						@click.stop="startTape = 1"
+						v-show="TapeNum == 0 && startTape == 0"
+						@click.stop="judge = 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="TapeNum == 1">
+					<div class="ca-b-o-m-tapeTwo" v-show="TapeNum == 0 && startTape == 1">
+						<mini-audio
+							:audio-source="audioUrl"
+							class="audio_class"
+						></mini-audio>
+						<div
+							style="
+								width: 32px;
+								height: 32px;
+								background-color: #3681fc;
+								border-radius: 50%;
+								display: flex;
+								justify-content: center;
+								align-items: center;
+							"
+							@click="judge = 1"
+						>
+							<img
+								style="width: 10px; height: 16px"
+								src="../../../../assets/icon/classroomObservation/blueMai.png"
+								alt=""
+							/>
+						</div>
+					</div>
+					<div
+						class="ca-b-o-m-inputAre"
+						v-show="TapeNum == 1 && startTape == 0"
+					>
 						<div class="ca-b-o-m-left">
 							<textarea
 								id="myTextarea"
@@ -130,38 +165,33 @@
 							</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="ca-b-o-m-inputAreImg" v-show="judge">
+					<img
+						style="height: 120%"
+						src="@/assets/icon/classroomObservation/tapetime.png"
+						alt=""
+					/>
+					<div
+						style="width: 100px; display: flex; justify-content: space-between"
+					>
+						<div class="lyStart" @click="(judge = 0), (startTape = 1)">
+							<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 class="lyStart" @click="(judge = 0), (startTape = 1)">
+							<img
+								style="width: 12px; height: 12px"
+								src="@/assets/icon/classroomObservation/lyStop.png"
+								alt=""
+							/>
 						</div>
-						<!-- <div class="ca-b-o-m-left">
+					</div>
+					<!-- <div class="ca-b-o-m-left">
 							<textarea :value="textareaValue" autosize="none"></textarea>
 						</div>
 						<div class="ca-b-o-m-right">
@@ -170,7 +200,7 @@
 								发送
 							</div>
 						</div> -->
-					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -216,10 +246,17 @@ export default {
 			pageStatus: 0, //0--初始页面  1--实时转录  2--上传录音页
 			languageRadio: 1, //设置选择语言
 			languageShow: 0, //控制显示
+			// 判断0录音与1打字切换
 			TapeNum: 0,
 			startTape: 0,
+
+			judge: 0,
+
 			textareaValue: "",
 			barNum: 0,
+			audioUrl:
+				"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E8%A7%A3%E5%86%B3%E5%9E%83%E5%9C%BE%E9%97%AE%E9%A2%981713172672090.m4a",
+
 			fileUrl:
 				"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E8%BD%AC%E5%BD%95%E6%96%87%E7%A8%BF1713172600896.xlsx",
 
@@ -244,14 +281,17 @@ export default {
 				{
 					title: "Al对话",
 					ico: require("@/assets/icon/classroomObservation/Group9101.png"),
+					ico1: require("@/assets/icon/classroomObservation/Group9102.png"),
 				},
 				{
 					title: "原文速览",
-					ico: require("@/assets/icon/classroomObservation/Vector.png"),
+					ico1: require("@/assets/icon/classroomObservation/Vector.png"),
+					ico: require("@/assets/icon/classroomObservation/Vector2.png"),
 				},
 				{
 					title: "转录文稿",
-					ico: require("@/assets/icon/classroomObservation/zhuanlu.png"),
+					ico1: require("@/assets/icon/classroomObservation/zhuanlu.png"),
+					ico: require("@/assets/icon/classroomObservation/zhuanlu2.png"),
 				},
 			],
 			transcriptionData: {
@@ -369,6 +409,7 @@ Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown
 		},
 		cutTape(val) {
 			this.TapeNum = val * 1;
+			this.judge = 0;
 			this.startTape = 0;
 			if (val == 1) {
 				this.barNum = 0;
@@ -406,6 +447,16 @@ Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown
 	box-sizing: border-box;
 	padding: 20px;
 }
+.audio_class {
+	/* width: 100% !important; */
+	/* height: 100% !important; */
+	background: #ccc !important;
+	margin: 0 !important;
+}
+
+.audio_class >>> .slider .process {
+	background: #000;
+}
 .tapeSty {
 	cursor: pointer;
 	width: 40px;
@@ -421,26 +472,55 @@ Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown
 }
 .titBar {
 	width: 100%;
-	height: 50px;
+	height: 30px;
+	margin-bottom: 20px;
 	display: flex;
+	/* align-items: center; */
+	border-bottom: 1px #ccc solid;
+	z-index: 99;
+}
+.titBar > .titBarLeft {
+	width: 40%;
+	min-width: 400px;
+	flex-shrink: 0;
+	display: flex;
+	cursor: pointer;
+
+	justify-content: flex-start;
+}
+.titBar > .titBarRig {
+	display: flex;
+	flex: 1;
+	justify-content: flex-end;
 	align-items: center;
+	font-family: PingFang SC;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 22px;
+	text-align: left;
+}
+.titBar > .titBarRig > img {
+	margin-right: 5px;
+	width: 16px;
+	height: 16px;
 	cursor: pointer;
-	z-index: 99;
 }
 .titBarBorder {
 	font-weight: 600;
-	border-bottom: 3px #1467ee solid;
+	box-sizing: border-box;
+	border-bottom: 2px #1467ee solid;
 }
-.titBar > div {
+.titBar > .titBarLeft > div {
 	height: 100%;
-	margin-right: 40px;
 	font-family: PingFang SC;
 	font-size: 14px;
+	min-width: 75px;
+	margin-right: 30px;
 	text-align: left;
 	display: flex;
 	align-items: center;
 }
-.titBar > div > img {
+.titBar > .titBarLeft > div > img {
 	margin-right: 5px;
 }
 .m-operation {
@@ -619,7 +699,22 @@ Markdown表格Markdown表格Markdown表格Markdown表格Markdown表格Markdown
 	color: #3681fc;
 	transition: 0.3s;
 }
-
+.ca-b-o-m-tapeTwo {
+	width: 100%;
+	height: 100%;
+	cursor: pointer;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	font-size: 20px;
+	color: #3681fc;
+	box-sizing: border-box;
+	padding: 0 20px;
+	transition: 0.3s;
+}
+.ca-b-o-m-tapeTwo >>> .vueAudioBetter {
+	width: 90%;
+}
 .ca-b-o-m-tape > span {
 	margin-right: 10px;
 	font-size: 22px;

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

@@ -2,49 +2,115 @@
 	<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()">
-					<img src="@/assets/icon/classroomObservation/newcon.png" alt="">
+					<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>
-			 <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 class="a-d-t-right">
+					<span @click.stop="showDialog = false">×</span>
+				</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>
+				<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 class="a-d-b-i-bottom">{{item.brief}}</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{
@@ -115,24 +181,34 @@ export default {
 			]
 		}
 	},
-	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;
@@ -142,30 +218,31 @@ 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{
+.a-h-r-btn {
 	font-size: 16px;
 	height: 35px;
 	width: auto;
@@ -181,75 +258,110 @@ export default {
 	align-items: center;
 }
 
-.a-h-r-btn > img{
+.a-h-r-btn > img {
 	width: 16px;
 	height: 16px;
 	margin-right: 5px;
 }
 
-.a-main{
+.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;
@@ -259,7 +371,7 @@ export default {
 	color: black !important;
 }
 
-.a-d-t-right>span{
+.a-d-t-right > span {
 	width: 25px;
 	height: 25px;
 	border-radius: 25px;
@@ -269,42 +381,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-i-top{
+.a-d-b-item:hover .a-d-b-i-bottomBtn {
+	display: block !important;
+}
+.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;
@@ -312,48 +440,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; */
+}
+.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;
-	position: absolute;
-	right: 10px;
-	top: 10px;
 }
-</style>
+</style>

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

@@ -2,139 +2,302 @@
 	<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()">
-					<img src="@/assets/icon/classroomObservation/newcon.png" alt="">
+					<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>
-			 <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 class="a-d-t-right">
+					<span @click.stop="showDialog = false">×</span>
+				</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>
+				<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 class="a-d-b-i-bottom">{{item.brief}}</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:1,
-			dialogTagList:[
-				{id:1,name:"通用课堂分析"},
-				{id:2,name:"学科课堂分析"},
-				{id:3,name:"扩展分析"},
+	data() {
+		return {
+			title: "科学课堂分析",
+			showDialog: false,
+			showItem: true,
+			tagIndex: 1,
+			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:"课堂活动类型",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:"PORTAAL课堂观察",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: "课堂活动类型",
+					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: "PORTAAL课堂观察",
+					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;
@@ -144,30 +307,31 @@ 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{
+.a-h-r-btn {
 	font-size: 16px;
 	height: 35px;
 	width: auto;
@@ -183,75 +347,110 @@ export default {
 	align-items: center;
 }
 
-.a-h-r-btn > img{
+.a-h-r-btn > img {
 	width: 16px;
 	height: 16px;
 	margin-right: 5px;
 }
 
-.a-main{
+.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;
@@ -261,7 +460,7 @@ export default {
 	color: black !important;
 }
 
-.a-d-t-right>span{
+.a-d-t-right > span {
 	width: 25px;
 	height: 25px;
 	border-radius: 25px;
@@ -271,42 +470,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-item:hover .a-d-b-i-bottomPer {
+	display: none !important;
 }
-.a-d-b-i-top{
+.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;
@@ -314,48 +529,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/transcription.vue

@@ -32,9 +32,22 @@
 .transcription{
 	width: 100%;
 	height:100%;
-	overflow: auto;
+	/* display: flex; */
+	/* flex-direction: column; */
+	/* overflow: auto; */
 	/* padding-top:30px; */
 }
+.t-content{
+	width: 100%;
+	flex: 1;
+	/* height: 50%; */
+	height: calc(100vh - 300px);
+	padding:20px 30px;
+	box-sizing: border-box;
+	overflow: auto;
+	white-space: pre-line;
+	word-break: break-all;
+}
 
 .t-header{
 	width: 100%;
@@ -52,15 +65,5 @@
 	color:#AEAFB1;
 }
 
-.t-content{
-	width: 100%;
-	/* height: 100%; */
-	height: calc(100vh - 290px);
-	padding:20px 30px;
-	box-sizing: border-box;
-	overflow: auto;
-	white-space: pre-line;
-	word-break: break-all;
-}
 
 </style>

src/components/pages/classroomObservation/index.vue

@@ -17,18 +17,28 @@
 				<span class="co-h2-l-text">{{ title }}</span>
 			</div>
 			<div class="co-h2-right">
-				<div class="co-h2-r-btn co-h2-r-blueBtn" @click.stop="getReport()">
+				<div
+					class="co-h2-r-btn co-h2-r-blueBtn"
+					style="background: rgba(54, 129, 252, 1)"
+					@click.stop="getReport()"
+				>
 					<span class="co-h2-r-b-icon1"></span>
 					<div>生成报告</div>
 				</div>
 				<div class="co-h2-r-btn2" @click.stop="preview()">
 					<!-- <span class="co-h2-r-b-icon2"></span> -->
-					<img src="../../../assets/icon/classroomObservation/daoChu.png" alt="">
+					<img
+						src="../../../assets/icon/classroomObservation/daoChu.png"
+						alt=""
+					/>
 					<!-- <div>预览</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="">
+					<img
+						src="../../../assets/icon/classroomObservation/Syan.png"
+						alt=""
+					/>
 					<!-- <div>分享</div> -->
 				</div>
 			</div>