pbl-teacher-table/src/components/pages/classroomObservation/index.vue

<template>
	<div class="classroomObservation">
		<!-- <div class="co-header1">
			<div class="co-h1-left">
				<span class="co-h1-l-icon el-icon-s-home"></span>
				<div class="co-h1-l-router">
						<span class="co-h1-l-r-up" @click="goTo('ai助手')">AI助手</span>
						<span class="co-h1-l-r-rightIcon el-icon-arrow-right"></span>
						<span class="co-j1-l-r-down">课堂观察</span>
				 </div>
			</div>
		</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-text">{{ title }}</span>
			</div>
			<div class="co-h2-right">
				<div class="co-h2-r-btn co-h2-r-blueBtn" @click.stop="getReport()">
					<span class="co-h2-r-b-icon1"></span>
					<div>生成报告</div>
				</div>
				<div class="co-h2-r-btn" @click.stop="preview()">
					<!-- <span class="co-h2-r-b-icon2"></span> -->
					<div>预览</div>
				</div>
				<div class="co-h2-r-btn" @click.stop="share()">
					<!-- <span class="co-h2-r-b-icon2"></span> -->
					<div>分享</div>
				</div>

			</div>
		</div>
		<div class="co-main">
			<div class="co-m-left">
				<chatArea/>
			</div>
			<div class="co-m-right">
				<messageArea/>
			</div>
		</div>
	</div>
</template>

<script>
// 聊天区域
import chatArea from './components/chatArea.vue'
// 信息区域
import messageArea from './components/messageArea.vue'
	export default {
		components:{
			chatArea,
			messageArea
		},
		data(){
			return{
				title:"20240410课堂实录"
			}
		},
		methods: {
			// 跳转
			goTo(path){
				this.$message.info(`去到：${path}`)
			},
			// 生成报告
			getReport(){
				this.$message.info("生成报告")
			},
			//预览
			preview(){
				window.parent.postMessage(
          {
            tools: "classroom_observation_board",
          },
          "*"
        );
			},
			// 分享
			share(){
				this.$message.info("分享")
			}
		},
	}
</script>

<style scoped>
.classroomObservation{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #F0F2F5;
}

.co-header1{
	width: 100%;
	height: 46px;
	background-color: #060E17;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 20px;
}

.co-h1-left{
	width: auto;
	height: 22px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0 20px;
}

.co-h1-l-icon{
	color: #5D6268;
	width: 16px;
	height: 16px;
	margin-right: 10px;
}

.co-h1-l-router{
	display: flex;
	align-items: center;
	color: white;
	font-size: 14px;
}

.co-h1-l-router>span{
	margin: 0 5px;
}

.co-h1-l-r-up{
	color: #5D6268;
	cursor: pointer;
}

.co-h1-l-r-up:hover{
	color: white;
}

.co-j1-l-r-down{
	cursor: pointer;
}

.co-h1-l-r-rightIcon{
	font-size: 16px;
	color: #5D6268;
}

.co-header2{
	width: 100%;
	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;
}

.co-h2-left{
	width: auto;
	height: 22px;
	display: flex;
	align-items: center;
	font-size: 14px;
}

.co-h2-l-icon{
	width: 20px;
	height: 20px;
	position: relative;
	background: url('../../../assets/icon/classroomObservation/close.png') no-repeat;
	background-size: 100% 100%;
}
.co-h2-l-hr{
	width: 2px;
	height: 20px;
	background-color: #E7E7E7;
	border-radius: 10px;
	margin: 0 10px;
}

.co-h2-right{
	width: auto;
	height: 100%;
	display: flex;
	align-items: center;
}

.co-h2-r-btn{
	width: auto;
	box-sizing: border-box;
	padding: 0 10px;
	height: 30px;
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	margin: 0 10px;
	box-sizing: border-box;
	border: solid 1px #3681FC;
	border-radius: 20px;
}

.co-h2-r-btn>span:nth-child(1){
	width: 20px;
	height: 20px;
	margin-right: 8px;
}

.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;
	background-size: 100% 100%;
}


.co-h2-r-blueBtn{
	background-color: #3681FC;
	color: white;
}

.co-main{
	width: 100%;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.co-m-left{
	height: 100%;
	flex: 1;
	box-sizing: border-box;
}

.co-m-right{
	height: 100%;
	flex: 1;
	box-sizing: border-box;
}





</style>