ai模拟

src/components/classRoomHelper/component/dialogArea.vue

@@ -0,0 +1,659 @@
+<template>
+	<div class="dialog" v-loading="loading">
+		<div v-show="cardType == 0">
+			<div class="d_top" ref="chatRef">
+				<div class="d_t_chat" v-for="(item,index) in chatList" :key="index">
+					<div class="d_t_c_user" v-if="item.role =='user'">
+						<div class="d_t_c_u_left">
+							<div class="d_t_c_u_l_content">{{item.content}}</div>
+							<div class="d_t_c_u_l_time">{{item.time}}</div>
+						</div>
+						<div class="d_t_c_u_right">
+							<span>我</span>
+						</div>
+					</div>
+
+					<div class="d_t_c_ai" v-if="item.role =='ai'">
+						<div class="d_t_c_a_left">
+							<span>Ai</span>
+						</div>
+						<div class="d_t_c_a_right">
+							<div class="d_t_c_a_r_content">{{ item.content }}</div>
+							<div class="d_t_c_a_r_time">{{item.time}}</div>
+						</div>
+						
+					</div>
+				</div>
+				
+			</div>
+			<div class="d_bottom">
+				<div class="d_b_btnArea">
+					<div class="d_b_ba-item" @click.stop="choiceRole()">选择角色</div>
+				</div>
+				<div class="d_b_inputArea">
+					<div class="d_b_tape" @click="goTape()"></div>
+					<div class="d_b_input">
+						<el-input class="d_b_i_left" v-model="text"></el-input>
+						<div class="d_b_i_right" @click="sendFile()">
+							<span></span>
+						</div>
+					</div>
+					<div class="d_b_btn" @click="send()">
+						<span></span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="" v-show="cardType == 1">
+			<div class="choiceTop">
+				<div class="choiceRoleHeader">
+					<div>切换角色：</div>
+					<span>您希望以下哪个角色回答您的问题，请选择：</span>
+				</div>
+
+				<div class="filterSubjects">
+					<div class="fs_title">筛选科目</div>
+					<div class="fs_box">
+						<div :class="['fs_b_item',subjectsType==index?'fs_b_itemActive':'']" v-for="(item,index) in subjectsList" :key="index" @click="subjectsType = index">{{ item }}</div>
+					</div>
+				</div>
+
+				<div class="roleList">
+					<div class="r_title">角色列表 ({{ roleList.length }})</div>
+					<div class="r_box">
+						<div :class="['r_b_item',roleType==index?'r_b_itemActive':'']" v-for="(item,index) in roleList" :key="item.id" @click.stop="roleType=index">
+							<img :src="item.avatar">
+							<span>{{ item.name }}</span>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="choiceBottom">
+				<el-button class="cb_btn" size="mini" @click="noChangeRole()">取消</el-button>
+				<el-button class="cb_btn" size="mini" type="primary"  @click="changeRole()">确定</el-button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+
+	export default {
+		data(){
+			return{
+				cardType:0,//0-对话 1-选角色
+				text:"",
+				subjectsList:['语文',"数学","英语","科学","信息","历史","地理","政治","生物","化学","物理","其他"],
+				subjectsType:-1,
+				rightSubjects:-1,
+				roleType:-1,
+				rightRole:-1,
+				loading:false,
+				roleList:[
+					{id:0,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"爱因斯坦"},
+					{id:1,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"居里夫人"},
+					{id:2,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"达尔文"},
+					{id:3,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"莱昂纳多·达芬奇"},
+					{id:4,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"列文虎克"},
+					{id:5,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"詹姆斯·瓦特"},
+					{id:6,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"瑞秋·卡森"},
+					{id:7,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"尼古拉·特斯拉"},
+					{id:8,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"约翰·穆尔"},
+					{id:9,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"艾萨克·牛顿"},
+					{id:10,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"伽利略"},
+					{id:11,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"格雷戈尔·孟德尔"},
+					{id:12,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"张衡"},
+					{id:13,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"李时珍"},
+					{id:14,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"钱学森"},
+					{id:15,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"阿基米德"},
+					{id:16,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"霍金"},
+					{id:17,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"蔡伦"},
+					{id:18,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"詹姆斯·瓦特"},
+					{id:19,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"路易·巴斯德"},
+					{id:20,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"阿尔弗雷德·诺贝尔"},
+					{id:21,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"詹姆斯·麦克斯韦"},
+					{id:22,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"亚历山大·格拉汉姆·贝尔"},
+					{id:23,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"约翰内斯·开普勒"},
+					{id:24,avatar:"https://s3-alpha-sig.figma.com/img/edf4/a076/6980e6682bffa46d7dccf1943078b28b?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ppnPgM5vfEhmTH0glBj2H87xy1~zcxDJL7kBleHEj9mcTfuWyaluOrliVzv0WGmzlt3369hW8DqXURghZbzkvI70f7as0CTEQ~bmx1sEp6hHOzLTQrIj0BYiL7~XzQOCuhqivkiqCHfblA6Yt0Cv-yRZPIy5fu7Vgj-BKR5KxeMcy8Z1gboNX2Z9YXgpI5-AzAGr08-GEcNNIDjzcjS0aNQEF2ABILwmHd1uCx5elaasfklclJSASgPDrOCdsXGzlFk28dLNYtyR~mZ9OGRdBfIwtqg-bhKvsqTtDczm6xZUXudo41s65HNqMfnJlVCDIwDiZcEDFyZ9m1TX38f08w__",name:"安德烈·安培"},
+				],
+				chatList:[
+					{
+						role:"ai",
+						content:`您好，有什么可以帮助您的吗？`,
+						time:new Date().toLocaleString().replace(/\//ig,'-')
+					},
+				],
+			}
+		},
+		methods: {
+			choiceRole(){
+				this.cardType = 1;
+			},
+			sendFile(){
+				this.$message.info("点击了附件")
+			},
+			goTape(){
+				this.$message.info(`点击了语音`)
+			},
+			send(){
+				this.loading = true;
+				this.chatList.push({
+					role:"user",
+					content:this.text,
+					time:new Date().toLocaleString().replace(/\//ig,'-')
+				})
+
+				setTimeout(()=>{
+					let aiContent="对不起，这个问题我回答不了。"
+					switch(this.text){
+						case "为什么要进行垃圾分类？":
+							aiContent=`想象一下，我们的家里如果有很多东西乱丢一团，找东西的时候会很麻烦对吧？而且如果不清理，家里会变得很脏，还可能招来小虫子。垃圾也是一样的，如果我们把所有的垃圾都扔在一起，不仅会污染环境，还会浪费很多可以再利用的资源。
+垃圾分类就是把不同类型的垃圾分开扔。比如，有的垃圾是可以再回收利用的，像纸张、塑料瓶、玻璃瓶等，这些如果分开收集，就可以送到特殊的地方去重新处理，变成新的东西再次使用。还有一些垃圾是厨余垃圾，比如剩饭剩菜，这种可以做成肥料帮助植物生长。而其他一些不能回收的垃圾，就需要另外处理，确保它们不会对环境造成伤害。
+通过垃圾分类，我们可以减少污染，节约资源，让我们的城市更干净，也保护了我们的地球。所以，学会正确的垃圾分类，是每个人都应该做的一件重要的事情哦！`
+							break;
+						case "玻璃是可回收垃圾吗？为什么？":
+							aiContent=`是的，玻璃是可以回收的垃圾。因为玻璃可以被融化后重新制成新的玻璃制品，比如瓶子和罐子。这样做可以减少我们从自然中取材料来制造新玻璃，也可以减少垃圾的数量，保护我们的环境。所以，当我们用完玻璃制品后，应该把它们放到回收箱里，而不是扔到普通垃圾桶里。这样我们就可以帮助地球更健康。`
+							break;
+					}
+					if(this.rightRole==1){
+						switch(this.text){
+							case "为什么要进行垃圾分类":
+								aiContent=`
+								尊敬的小朋友们，今天我们要探讨一个非常重要的话题——为什么我们要进行垃圾分类。我是居里夫人，虽然我的主要研究领域是放射性元素，但我一直相信科学可以改善我们的生活环境和保护我们的地球。
+首先，我们要知道地球是我们共同的家，保护环境就是保护我们自己的家园。在我的研究生涯中，我发现了镭和钋这样的放射性元素，这些发现不仅推动了科学的进步，也让我们更加意识到科学研究与环境保护之间的联系。
+垃圾分类，简单来说，就是将垃圾分成几类，比如可回收物、有害垃圾、湿垃圾（厨余垃圾）和干垃圾。这样做的目的是让垃圾能够更有效地被回收和处理，减少对环境的污染。
+想象一下，如果我们把所有的垃圾都混在一起，那么回收和处理这些垃圾就会变得非常困难。有些有害垃圾可能会释放出有毒物质，污染土壤和水源，这对我们的健康是非常不利的。而且，混合的垃圾很难进行有效的资源回收，这意味着更多的资源会被浪费。
+通过垃圾分类，我们可以将可回收的材料如纸张、塑料、金属和玻璃分开收集，这些材料可以被再利用，制成新的产品。这不仅可以减少对自然资源的开采，还可以减少能源消耗和碳排放，帮助我们对抗全球变暖。
+此外，有害垃圾如废电池和废药品需要特殊处理，防止它们对环境造成伤害。通过正确分类，我们可以确保这些有害物质得到安全处理，保护我们的地球。
+我在研究放射性元素时，深刻体会到科学与环境之间的密切关系。每一次实验，我都尽可能地减少对环境的影响。这种对环境负责的态度，也是我们进行垃圾分类的原因之一。
+亲爱的小朋友们，通过垃圾分类，我们不仅可以保护环境，还可以学习到责任感和科学的方法。希望你们从小培养保护环境的意识，用实际行动为保护我们的地球贡献自己的力量。记住，每一个小小的行动，都是对未来的投资。
+								`
+								break;
+						}
+					}
+					this.chatList.push({
+						role:"ai",
+						content:aiContent,//这里需要调用接口
+						time:new Date().toLocaleString().replace(/\//ig,'-')
+					})
+					this.$nextTick(() => {
+				  	this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
+					});;
+					this.text = "";
+					this.loading = false;
+				},1000)
+				// this.chatList.push({
+				// 	role:"user",
+				// 	content:this.text,
+				// 	time:"2023-11-11 11:10:11"
+				// },{
+				// 	role:"ai",
+				// 	content:`小朋友，你真棒！`,//这里需要调用接口
+				// 	time:"2023-11-11 11:10:11"
+				// })
+				// this.text = "";
+				// // 元素滚动条触底
+				
+			},
+			changeRole(){
+				this.loading = true;
+				this.cardType = 0;
+				this.rightSubjects = this.subjectsType;
+				this.rightRole = this.roleType;
+				this.chatList = [];
+				setTimeout(()=>{
+					let aiContent = "你好";
+					switch(this.rightRole){
+						case 0:
+							aiContent = "你好，我是爱因斯坦，相对论的提出者，相信科学的力量可以揭示宇宙的奥秘。"
+							break;
+						case 1:
+							aiContent = "你好，我是居里夫人，放射性研究的先驱，第一位获得两次诺贝尔奖的女性。"
+							break;
+						case 2:
+							aiContent = "你好，我是查尔斯·达尔文，进化论的创立者，相信物种通过自然选择不断进化。"
+							break;
+						case 3:
+							aiContent = "你好，我是达芬奇，文艺复兴的象征，艺术与科学的多面手。"
+							break;
+						case 4:
+							aiContent = "你好，我是列文虎克，通过我的简单显微镜，开启了微生物学的大门。"
+							break;
+						case 5:
+							aiContent = "你好，我是詹姆斯·瓦特，改良了蒸汽机，为工业革命提供了动力。"
+							break;
+						case 6:
+							aiContent = "你好，我是瑞秋·卡森，环保运动的先驱，通过《寂静的春天》提醒世界关注环境保护。"
+							break;
+						case 7:
+							aiContent = "你好，我是特斯拉，交流电的推广者，致力于无线电和电力传输的研究。"
+							break;
+						case 8:
+							aiContent = "你好，我是约翰·穆尔，自然保护的倡导者，努力保护美国的森林和野生地区。"
+							break;
+						case 9:
+							aiContent = "你好，我是牛顿，万有引力和三大运动定律的发现者，为现代物理学奠定了基础。"
+							break;
+						case 10:
+							aiContent = "你好，我是伽利略，通过望远镜观测支持了日心说，被誉为现代观测天文学之父。"
+							break;
+						case 11:
+							aiContent = "你好，我是孟德尔，遗传学的奠基人，通过豌豆实验发现了遗传的基本规律。"
+							break;
+						case 12:
+							aiContent = "你好，我是张衡，东汉杰出的天文学家和科学家，发明了地动仪。"
+							break;
+						case 13:
+							aiContent = "你好，我是李时珍，中国古代著名的医学家，编纂了《本草纲目》。"
+							break;
+						case 14:
+							aiContent = "你好，我是钱学森，现代火箭科学的奠基人之一，被誉为“中国航天之父”。"
+							break;
+						case 15:
+							aiContent = "你好，我是阿基米德，古希腊的数学家和物理学家，提出了浮力原理。"
+							break;
+						case 16:
+							aiContent = "你好，我是斯蒂芬·霍金，研究黑洞和宇宙起源，致力于解释宇宙的奥秘。"
+							break;
+						case 17:
+							aiContent = "你好，我是蔡伦，东汉时期改进了造纸术，使纸张更加广泛地应用于社会。"
+							break;
+						case 18:
+							aiContent = "你好，我是詹姆斯·瓦特，改良了蒸汽机，为工业革命提供了动力。"
+							break;
+						case 19:
+							aiContent = "你好，我是路易·巴斯德，微生物学的奠基人，发现了疫苗和巴斯德消毒法。"
+							break;
+						case 20:
+							aiContent = "你好，我是诺贝尔，发明了炸药，为和平与科学的贡献设立了诺贝尔奖。"
+							break;
+						case 21:
+							aiContent = "你好，我是麦克斯韦，统一了电磁理论，提出了麦克斯韦方程组。"
+							break;
+						case 22:
+							aiContent = "你好，我是贝尔，电话的发明者，致力于通信技术的发展和听力障碍人士的教育。"
+							break;
+						case 23:
+							aiContent = "你好，我是开普勒，行星运动三大定律的发现者，为天文学和物理学的发展做出了重要贡献。"
+							break;
+						case 24:
+							aiContent = "你好，我是安培，电磁学的先驱之一，提出了电流的磁效应。"
+							break;
+					}
+					this.chatList.push({
+						role:"ai",
+						content:aiContent,//这里需要调用接口
+						time:new Date().toLocaleString().replace(/\//ig,'-')
+					})
+					this.loading = false;
+				},500)
+
+			},
+			noChangeRole(){
+				this.cardType = 0;
+				this.subjectsType = this.rightSubjects;
+				this.roleType = this.rightRole;
+			}
+		},
+	}
+</script>
+
+<style scoped>
+.dialog{
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+}
+
+.dialog>div{
+	width: 100%;
+	height: 100%;
+}
+
+.d_top{
+	width: 100%;
+	height: calc(100% - 90px);
+	overflow: auto;
+	box-sizing: border-box;
+	padding: 20px 0;
+}
+
+.d_t_chat{
+	width: 100%;
+	display: flex;
+	box-sizing: border-box;
+	padding: 10px;
+}
+
+.d_t_chat>div{
+	display: flex;
+	align-items: flex-start;
+	width: 100%;
+}
+
+.d_t_c_user{
+	box-sizing: border-box;
+	padding-left: 35px;
+}
+
+.d_t_c_u_left{
+	width: 90%;
+	height: auto;
+}
+
+.d_t_c_u_l_content{
+	width: auto;
+	max-width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 10px;
+	color: white;
+	background-color: #3681FC;
+	border-radius: 8px 2px 8px 8px;
+  white-space: pre-line
+}
+
+.d_t_c_u_l_time{
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	font-size: 12px;
+	color: #9F9F9F;
+	margin-top: 5px;
+}
+
+.d_t_c_u_right{
+	width: 35px;
+	height: 35px;
+	display: flex;
+	justify-content: center;
+	margin-left: 5px
+}
+
+.d_t_c_u_right>span{
+	width: 32px;
+	height: 32px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: white;
+	background-color: #3681FC;
+	border-radius: 50%;;
+}
+
+.d_t_c_ai{
+	box-sizing: border-box;
+	padding-right: 35px;
+}
+
+.d_t_c_a_right{
+	min-width: 90%;
+	height: auto;
+}
+
+.d_t_c_a_r_content{
+	width: auto;
+	max-width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 10px;
+	background-color: #F6F8FF;
+	border-radius: 2px 8px 8px 8px;
+  white-space: pre-line;
+	word-break: break-all;
+}
+
+.d_t_c_a_r_time{
+	width: 100%;
+	display: flex;
+	justify-content: flex-start;
+	font-size: 12px;
+	color: #9F9F9F;
+	margin-top: 5px;
+}
+
+.d_t_c_a_left{
+	width: 35px;
+	height: 35px;
+	display: flex;
+	justify-content: center;
+	margin-right: 5px
+}
+
+.d_t_c_a_left>span{
+	width: 32px;
+	height: 32px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: white;
+	background-color: #3681FC;
+	border-radius: 50%;
+}
+
+.d_bottom{
+	width: 100%;
+	height: 90px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.d_b_btnArea{
+	width: 100%;
+	height: 30px;
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0 10px;
+}
+
+.d_b_ba-item{
+	width: auto;
+	box-sizing: border-box;
+	padding: 0 10px;
+	height: 25px;
+	background-color: white;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	/* 阴影 */
+	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.363);
+	border-radius: 15px;
+	font-size: 14px;
+	cursor: pointer;
+}
+
+
+.d_b_inputArea{
+	width: 100%;
+	height: 55px;
+	box-sizing: border-box;
+	border-top: solid 1px #EDEDED;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.d_b_tape{
+	width: 35px;
+	height: 35px;
+	background: url("../../../assets/icon/course/tape.png") no-repeat;
+	background-size: 50% 60%;
+	background-position: center;
+	cursor: pointer;
+}
+
+.d_b_input{
+	width: 65%;
+	height: 45px;
+	background-color: #F3F3F3;
+	border-radius: 50px;
+	margin: 0 10px;
+	display: flex;
+	align-items: center;
+}
+
+.d_b_i_left{
+	width: calc(100% - 45px);
+	height: 100%;
+}
+
+.d_b_i_left>>>.el-input__inner{
+	border: none;
+	background-color: #F3F3F3;
+	outline: none;
+	border-radius: 50px 0 0 50px;
+}
+
+
+.d_b_i_right{
+	width: 45px;
+	height: 45px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.d_b_i_right>span{
+	width: 35px;
+	height: 35px;
+	background: url("../../../assets/icon/course/file.png") no-repeat;
+	background-size: 50% 60%;
+	background-position: center;
+	cursor: pointer;
+}
+
+.d_b_btn{
+	width: 40px;
+	height: 40px;
+	background-color: #3681FC;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 50%;
+	cursor: pointer;
+}
+
+.d_b_btn>span{
+	width: 30px;
+	height: 30px;
+	background: url("../../../assets/icon/course/send.png") no-repeat;
+	background-size: 70% 70%;
+	background-position: center;
+	
+}
+
+.choiceTop{
+	width: 100%;
+	height: 95%;
+	overflow-x: hidden;
+}
+
+.choiceBottom{
+	width: 100%;
+	height: 5%;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+.cb_btn{
+	margin: 0 10px;
+}
+
+.choiceRoleHeader{
+	width: 100%;
+	margin: 10px;
+}
+
+.choiceRoleHeader>div{
+	font-size: 16px;
+	font-weight: bold;
+}
+
+.choiceRoleHeader>span{
+	font-size: 14px;
+}
+
+.filterSubjects{
+	margin: 10px;
+	width: 100%;
+	height: auto;
+}
+
+.fs_box{
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	margin-top: 10px;
+}
+
+.fs_b_item{
+	width: auto;
+	height: 35px;
+	font-size: 14px;
+	box-sizing: border-box;
+	padding: 0 10px;
+	background-color: #F3F7FD;
+	border-radius: 5px;
+	margin-right:8px;
+	margin-bottom: 8px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+}
+
+.fs_b_itemActive{
+	border: solid 1px #4D8FFC;
+	color: #4D8FFC;
+	background-color: #F3F7FD;
+}
+
+.roleList{
+	width: 100%;
+	height: auto;
+	margin: 10px;
+}
+
+.r_box{
+	width: 100%;
+	height: auto;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.r_b_item{
+	height: 40px;
+	font-size: 14px;
+	display: flex;
+	/* justify-content: center; */
+	align-items: center;
+	background-color: #F0F2F5;
+	border-radius: 5px;
+	margin: 5px;
+	cursor: pointer;
+	box-sizing: border-box;
+	padding: 0 5px;
+}
+
+.r_b_itemActive{
+	box-sizing: border-box;
+	border: solid 1px #AECCFE;
+	color: #4D8FFB;
+}
+
+.r_b_item>img{
+	min-width: 24px;
+	min-height: 24px;
+	width: 24px;
+	height: 24px;
+	border-radius:50%;
+	margin-right: 10px;
+	/* margin-left: 10px; */
+}
+
+
+
+</style>

src/components/classRoomHelper/component/searchArea.vue

@@ -0,0 +1,495 @@
+<template>
+	<div class="search" v-loading="loading">
+			<div class="s_top" ref="chatRef">
+				<div class="s_t_chat">
+					<div class="s_t_c_ai">
+						<div class="s_t_c_a_left">
+							<span>Ai</span>
+						</div>
+						<div class="s_t_c_a_right">
+							<div class="s_t_c_a_r_content2">
+								<div class="s_t_c_a_r_c_title">
+									<img :src="require('../../../assets/icon/course/idea.png')">
+									<span>猜你想搜:</span>
+								</div>
+								<div class="s_t_c_a_r_c_item" @click="sendAiIdea('这些视频资料是免费的吗?')">1.垃圾分类标准：不同国家的垃圾分类标准和方法？?</div>
+								<div class="s_t_c_a_r_c_item" @click="sendAiIdea('公司所在新产品开发上的主要策略方向是什么，如何平衡创新与市场需求?')">2.可回收垃圾处理：可回收垃圾的处理流程和再利用方法？</div>
+								<div class="s_t_c_a_r_c_item" @click="sendAiIdea('针对频繁出现的发货错误和产品质量问题，公司将如何改进质量控制体系?')">3.有害垃圾的影响：有害垃圾对环境和人体健康的潜在影响？</div>
+							</div>
+							<div class="s_t_c_a_r_time">2023-11-11 11:10:11</div>
+						</div>
+					</div>
+				</div>
+				<div class="s_t_chat" v-for="(item,index) in chatList" :key="index">
+					<div class="s_t_c_user" v-if="item.role =='user'">
+						<div class="s_t_c_u_left">
+							<div class="s_t_c_u_l_content">{{item.content}}</div>
+							<div class="s_t_c_u_l_time">{{item.time}}</div>
+						</div>
+						<div class="s_t_c_u_right">
+							<span>我</span>
+						</div>
+					</div>
+
+					<div class="s_t_c_ai" v-if="item.role =='ai'">
+						<div class="s_t_c_a_left">
+							<span>Ai</span>
+						</div>
+						<div class="s_t_c_a_right">
+							<div class="s_t_c_a_r_content" v-if="item.type==0">{{ item.content }}</div>
+							<div class="s_t_c_a_r_contentImage" v-if="item.type==1">
+								<span>为你找到以下图片</span>
+								<img v-for="(item,index) in item.content" :key="index" :src="item">
+							</div>
+							<div class="s_t_c_a_r_time">{{item.time}}</div>
+						</div>
+						
+					</div>
+				</div>
+				
+			</div>
+			<div class="s_bottom">
+				<div class="s_b_btnArea">
+					<!-- <div class="s_b_ba-item" @click.stop="choiceRole()">选择角色</div> -->
+					<div class="s_b_ba-item" @click.stop="sendImage()">图片</div>
+					<div class="s_b_ba-item" @click.stop="sendVideo()">视频</div>
+				</div>
+				<div class="s_b_inputArea">
+					<div class="s_b_tape" @click="goTape()"></div>
+					<div class="s_b_input">
+						<el-input class="s_b_i_left" v-model="text"></el-input>
+						<div class="s_b_i_right" @click="sendFile()">
+							<span></span>
+						</div>
+					</div>
+					<div class="s_b_btn" @click="send()">
+						<span></span>
+					</div>
+				</div>
+			</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data(){
+			return{
+				text:"",
+				loading:false,
+				chatList:[
+				{
+						role:"ai",
+						content:`您好，有什么可以帮助您的吗？`,
+						time:new Date().toLocaleString().replace(/\//ig,'-'),
+						type:0,
+					},
+// 					{
+// 						role:"user",
+// 						content:"正十三边形的每个角是多少度？",
+// 						time:"2023-11-11 11:10:11"
+// 					},
+// 					{
+// 						role:"ai",
+// 						content:`小朋友们，你们知道正十三边形吗？就像我们班有13个好朋友站成一个圈圈一样。如果我们想知道每个人转身看向下一个人需要转多少度，我们可以这样想：首先，所有朋友手拉手围成的圈圈是360度，对吧？但是，我们不能直接算每个人转身的角度，因为那是外面的角度，我们要算里面的角度，就像每个人转身时脚尖指向圈心的角度。
+// 我们先用一个小技巧，算出所有内角加起来是多少度。方法是：(13-2)乘以180度，得到1980度。这是因为，想象成一个多边形，它可以分成11个三角形，每个三角形的角度和是180度。
+// 然后，我们把1980度平分给13个角，就是每个角的度数了。算一算，1980除以13等于152度。所以，正十三边形的每个角是152度。就像每个人转身看下一个朋友，每个人需要转152度一样。`,
+// 						time:"2023-11-11 11:10:11"
+// 					},
+				],
+			}
+		},
+		methods: {
+			choiceRole(){
+				this.cardType = 1;
+			},
+			sendFile(){
+				this.$message.info("点击了附件")
+			},
+			goTape(){
+				this.$message.info(`点击了语音`)
+			},
+			send(){
+				this.loading = true;
+				setTimeout(()=>{
+
+					this.chatList.push({
+						role:"user",
+						content:this.text,
+						time:new Date().toLocaleString().replace(/\//ig,'-')
+					})
+
+					let aiContent="对不起，这个问题我回答不了。"
+					let type = 0;
+
+					switch(this.text){
+						case "帮我查找几张常见的不同类型的垃圾图片":
+							aiContent = ['https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721713253471000.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731713253488299.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741713253506303.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751713253523152.png'];
+							type = 1;
+							break;
+						case "帮我查找一些B站的视频，介绍垃圾如何处理":
+							aiContent = `当然，以下是关于垃圾处理的一些B站视频链接：
+1.【科普短视频】垃圾会被怎么处理? - 这个视频通过简短的内容向观众展示垃圾处理的过程。
+https://www.bilibili.com/video/BV1UD4y1U71a
+
+2.垃圾分类，就是这么简单- 这个视频以科普的形式，向观众介绍了垃圾分类的基本知识。
+https://www.bilibili.com/video/BV1bt41157wH 
+ 
+3.【环保短片】震撼环保公益短片《致我们的地球》- 这部短片通过震撼的画面和内容，强调了环保问题的重要性。
+https://www.bilibili.com/video/BV1ZD4y1U7H7/ `;
+							type = 0;
+							break;
+					}
+
+					this.chatList.push({
+						role:"ai",
+						content:aiContent,
+						type:type,
+						time:new Date().toLocaleString().replace(/\//ig,'-')
+					})
+
+					this.text = "";
+					this.$nextTick(() => {
+					  this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
+					});
+					this.loading = false;
+				},1000)
+				// this.chatList.push({
+				// 	role:"user",
+				// 	content:this.text,
+				// 	time:"2023-11-11 11:10:11"
+				// },{
+				// 	role:"ai",
+				// 	content:`小朋友，你真棒！`,//这里需要调用接口
+				// 	time:"2023-11-11 11:10:11"
+				// })
+				// this.text = "";
+				// // 元素滚动条触底
+				// this.$nextTick(() => {
+				//   this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
+				// });
+			},
+			sendAiIdea(text){
+				this.text = text;
+				this.send();
+			},
+			sendImage(){
+				this.$message.info("发送图片")
+			},
+			sendVideo(){
+				this.$message.info("发送视频")
+			},
+		},
+	}
+</script>
+
+<style scoped>
+.search{
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+}
+
+.s_top{
+	width: 100%;
+	height: calc(100% - 90px);
+	overflow-x: hidden;
+	box-sizing: border-box;
+	padding: 20px 0;
+}
+
+.s_t_chat{
+	width: 100%;
+	display: flex;
+	box-sizing: border-box;
+	padding: 10px;
+}
+
+.s_t_chat>div{
+	display: flex;
+	align-items: flex-start;
+	width: 100%;
+}
+
+.s_t_c_user{
+	box-sizing: border-box;
+	padding-left: 35px;
+}
+
+.s_t_c_u_left{
+	width: 90%;
+	height: auto;
+}
+
+.s_t_c_u_l_content{
+	width: auto;
+	max-width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 10px;
+	color: white;
+	background-color: #3681FC;
+	border-radius: 8px 2px 8px 8px;
+  white-space: pre-line;
+	word-break: break-all;
+}
+
+
+.s_t_c_a_r_contentImage>span{
+	display: block;
+}
+
+.s_t_c_a_r_contentImage>img{
+	width: 45%;
+	height: 125px;
+	margin: 1% 1.5%;
+}
+
+.s_t_c_a_r_contentImage{
+	width: auto;
+	max-width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 10px;
+	color: white;
+	background-color: #3681FC;
+	border-radius: 8px 2px 8px 8px;
+  white-space: pre-line
+}
+
+.s_t_c_u_l_time{
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	font-size: 12px;
+	color: #9F9F9F;
+	margin-top: 5px;
+}
+
+.s_t_c_u_right{
+	width: 35px;
+	height: 35px;
+	display: flex;
+	justify-content: center;
+	margin-left: 5px
+}
+
+.s_t_c_u_right>span{
+	width: 32px;
+	height: 32px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: white;
+	background-color: #3681FC;
+	border-radius: 50%;;
+}
+
+.s_t_c_ai{
+	box-sizing: border-box;
+	padding-right: 35px;
+}
+
+.s_t_c_a_right{
+	min-width: 90%;
+	height: auto;
+}
+
+.s_t_c_a_r_content{
+	width: auto;
+	max-width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 10px;
+	background-color: #F6F8FF;
+	border-radius: 2px 8px 8px 8px;
+  white-space: pre-line;
+	word-break: break-all;
+}
+
+.s_t_c_a_r_content2{
+	background-color: #F6F8FF;
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 10px;
+	border-radius: 2px 8px 8px 8px;
+	box-shadow: 0 0px 10px #c5cbee;
+}
+
+.s_t_c_a_r_c_title{
+	display: flex;
+	align-items: center;
+}
+.s_t_c_a_r_c_title>img{
+	width: 16px;
+	height: 16px;
+}
+
+.s_t_c_a_r_c_item{
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 10px;
+	background-color: #FFFFFF;
+	border-radius: 5px;
+	margin-top: 5px;
+	color: #666666;
+	font-size: 14px;
+	cursor: pointer;
+}
+
+.s_t_c_a_r_c_item:hover{
+	border: solid #B8D2FE 1px;
+	box-shadow: 0 0 5px 2px #B8D2FE;
+}
+
+.s_t_c_a_r_c_title>span{
+	font-weight: bold;
+}
+
+
+.s_t_c_a_r_time{
+	width: 100%;
+	display: flex;
+	justify-content: flex-start;
+	font-size: 12px;
+	color: #9F9F9F;
+	margin-top: 5px;
+}
+
+.s_t_c_a_left{
+	width: 35px;
+	height: 35px;
+	display: flex;
+	justify-content: center;
+	margin-right: 5px
+}
+
+.s_t_c_a_left>span{
+	width: 32px;
+	height: 32px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: white;
+	background-color: #3681FC;
+	border-radius: 50%;
+}
+
+.s_bottom{
+	width: 100%;
+	height: 90px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.s_b_btnArea{
+	width: 100%;
+	height: 30px;
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0 10px;
+}
+
+.s_b_ba-item{
+	width: auto;
+	box-sizing: border-box;
+	padding: 0 10px;
+	height: 25px;
+	background-color: white;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	/* 阴影 */
+	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.363);
+	border-radius: 15px;
+	font-size: 14px;
+	cursor: pointer;
+	margin-right: 10px;
+}
+
+
+.s_b_inputArea{
+	width: 100%;
+	height: 55px;
+	box-sizing: border-box;
+	border-top: solid 1px #EDEDED;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.s_b_tape{
+	width: 35px;
+	height: 35px;
+	background: url("../../../assets/icon/course/tape.png") no-repeat;
+	background-size: 50% 60%;
+	background-position: center;
+	cursor: pointer;
+}
+
+.s_b_input{
+	width: 65%;
+	height: 45px;
+	background-color: #F3F3F3;
+	border-radius: 50px;
+	margin: 0 10px;
+	display: flex;
+	align-items: center;
+}
+
+.s_b_i_left{
+	width: calc(100% - 45px);
+	height: 100%;
+}
+
+.s_b_i_left>>>.el-input__inner{
+	border: none;
+	background-color: #F3F3F3;
+	outline: none;
+	border-radius: 50px 0 0 50px;
+}
+
+
+.s_b_i_right{
+	width: 45px;
+	height: 45px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.s_b_i_right>span{
+	width: 35px;
+	height: 35px;
+	background: url("../../../assets/icon/course/file.png") no-repeat;
+	background-size: 50% 60%;
+	background-position: center;
+	cursor: pointer;
+}
+
+.s_b_btn{
+	width: 40px;
+	height: 40px;
+	background-color: #3681FC;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 50%;
+	cursor: pointer;
+}
+
+.s_b_btn>span{
+	width: 30px;
+	height: 30px;
+	background: url("../../../assets/icon/course/send.png") no-repeat;
+	background-size: 70% 70%;
+	background-position: center;
+	
+}
+
+
+
+</style>

src/components/classRoomHelper/component/taskArea.vue

@@ -0,0 +1,636 @@
+<template>
+	<div class="task" v-loading="loading">
+		<div class="taskTop">
+			<div class="tt_title">任务时间分配</div>
+			<div class="tt_item">
+				<div class="tt_i_title">
+					<span>课程时间轴</span>
+				</div>
+				<div class="tt_i_box">
+					<img :src="require('../../../assets/icon/course/group.png')">
+				</div>
+			</div>
+
+			<div class="tt_item">
+				<div class="tt_i_title">
+					<span>任务状态</span>
+					<span>学生活动中...</span>
+				</div>
+				<div class="tt_i_box">
+					<div class="tt_i_b_item">
+						<div class="tt_i_b_title">作业提交</div>
+						<div class="tt_i_b_box">
+							<div class="tt_i_b_b_item">
+								<div>提交人数</div>
+								<span>34<span>人</span></span>
+							</div>
+							<div class="tt_i_b_b_item">
+								<div>正确率</div>
+								<span>88<span>人</span></span>
+							</div>
+						</div>
+					</div>
+					<div class="tt_i_b_item">
+						<div class="tt_i_b_title">交流互动</div>
+						<div class="tt_i_b_box">
+							<div class="tt_i_b_b_item">
+								<div>参与人数</div>
+								<span>56<span>人</span></span>
+							</div>
+							<div class="tt_i_b_b_item">
+								<div>点赞数</div>
+								<span>36<span>个</span></span>
+							</div>
+							<div class="tt_i_b_b_item">
+								<div>评论数</div>
+								<span>128<span>条</span></span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="t_top" ref="chatRef">
+			<div class="t_t_chat" v-for="(item,index) in chatList" :key="index">
+				<div class="t_t_c_user" v-if="item.role =='user'">
+					<div class="t_t_c_u_left">
+						<div class="t_t_c_u_l_content">{{item.content}}</div>
+						<div class="t_t_c_u_l_time">{{item.time}}</div>
+					</div>
+					<div class="t_t_c_u_right">
+						<span>我</span>
+					</div>
+				</div>
+				<div class="t_t_c_ai" v-if="item.role =='ai'">
+					<div class="t_t_c_a_left">
+						<span>Ai</span>
+					</div>
+					<div class="t_t_c_a_right">
+						<div class="t_t_c_a_r_content" v-html="item.content"></div>
+						<div class="t_t_c_a_r_time">{{item.time}}</div>
+					</div>
+					
+				</div>
+			</div>
+			
+		</div>
+		<div class="t_bottom">
+			<div class="t_b_btnArea">
+				<!-- <div class="s_b_ba-item" @click.stop="choiceRole()">选择角色</div> -->
+				<div class="t_b_ba-item" @click="sendType('智能总结')">智能总结</div>
+				<div class="t_b_ba-item" @click="sendType('智能出题')">智能出题</div>
+				<div class="t_b_ba-item" @click="sendType('优秀标兵')">优秀标兵</div>
+				<div class="t_b_ba-item" @click="sendType('扩展知识')">扩展知识</div>
+			</div>
+			<div class="t_b_inputArea">
+				<div class="t_b_tape" @click="goTape()"></div>
+				<div class="t_b_input">
+					<el-input class="t_b_i_left" v-model="text"></el-input>
+					<div class="t_b_i_right" @click="sendFile()">
+						<span></span>
+					</div>
+				</div>
+				<div class="t_b_btn" @click="send()">
+					<span></span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+// import { Loading } from 'element-ui';
+
+	export default {
+		data(){
+			return{
+				text:"",
+				loading:false,
+				chatList:[
+				{
+						role:"ai",
+						content:`您好，有什么可以帮助您的吗？`,
+						time:new Date().toLocaleString().replace(/\//ig,'-')
+					},
+// 					{
+// 						role:"user",
+// 						content:"正十三边形的每个角是多少度？",
+// 						time:"2023-11-11 11:10:11"
+// 					},
+// 					{
+// 						role:"ai",
+// 						content:`小朋友们，你们知道正十三边形吗？就像我们班有13个好朋友站成一个圈圈一样。如果我们想知道每个人转身看向下一个人需要转多少度，我们可以这样想：首先，所有朋友手拉手围成的圈圈是360度，对吧？但是，我们不能直接算每个人转身的角度，因为那是外面的角度，我们要算里面的角度，就像每个人转身时脚尖指向圈心的角度。
+// 我们先用一个小技巧，算出所有内角加起来是多少度。方法是：(13-2)乘以180度，得到1980度。这是因为，想象成一个多边形，它可以分成11个三角形，每个三角形的角度和是180度。
+// 然后，我们把1980度平分给13个角，就是每个角的度数了。算一算，1980除以13等于152度。所以，正十三边形的每个角是152度。就像每个人转身看下一个朋友，每个人需要转152度一样。`,
+// 						time:"2023-11-11 11:10:11"
+// 					},
+				],
+			}
+		},
+		methods: {
+			choiceRole(){
+				this.cardType = 1;
+			},
+			sendFile(){
+				this.$message.info("点击了附件")
+			},
+			goTape(){
+				this.$message.info(`点击了语音`)
+			},
+			send(){
+				this.loading = true;
+
+				setTimeout(()=>{
+					this.chatList.push({
+						role:"user",
+						content:this.text,
+						time:new Date().toLocaleString().replace(/\//ig,'-')
+					})
+
+					let aiContent="对不起，这个问题我回答不了。"
+
+					switch(this.text){
+						case "智能总结":
+							aiContent=`在这节课上，教师和学生们围绕垃圾问题进行了深入的讨论和实践活动。截止到目前为止，课程已经教学了以下内容：
+
+1.环境调查与问题识别：学生们首先进行了实地调查，发现了大鹏新区存在的环境问题，特别是垃圾问题。学生们观察到菜市场和路边有大量垃圾堆积。
+2.垃圾产生的数据分析：教师引导学生计算家庭和学校垃圾产生的总量，并通过比喻（如成年公羊和非洲大象的重量）来形象地表达垃圾的重量，增强学生对垃圾量的直观理解。
+3.垃圾处理方法的探讨：学生们讨论了垃圾的处理方式，包括填埋、焚烧发电以及回收利用。他们探讨了这些方法的优缺点，如填埋会占用大量土地并可能污染土地和水源，焚烧则可能导致空气污染。
+4.垃圾分类的重要性：课程强调了垃圾分类的重要性，并通过实际分类活动让学生们理解不同垃圾的处理方式。学生们学习了如何将垃圾分为可回收垃圾、厨余垃圾、有害垃圾和其他垃圾，并探讨了各类垃圾的具体处理方法。
+5.实际行动的倡议：教师鼓励学生从减少一次性用品的使用开始，采取实际行动来减少垃圾产生。学生们提出了多种减少和重新利用垃圾的创意方法，如将剩饭剩菜喂给小动物或制作成堆肥。
+
+总结来说，这节课通过实地调查、数据分析和小组讨论等多种教学方法，有效地提高了学生们对环境保护和垃圾处理问题的认识和参与度。学生们通过实际操作和讨论，学习了垃圾分类的技能，并对垃圾处理的各种方法有了深入的了解和评价。`
+						break;
+						case "智能出题":
+							aiContent = `选择题：下列哪一项应该被归类为可回收物？
+A. 废弃的塑料袋
+B. 污染严重的厨房纸巾
+C. 破碎的玻璃杯
+D. 废旧的电池`
+							break;
+						case "优秀标兵":
+							aiContent = `这节课的学习数据如下：
+
+							<img src='https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711713252928457.png' style="max-width:100%">
+1.陈小春：陈小春同学的作业完成率接近完美，考试成绩也非常优秀，课堂参与度非常积极，项目贡献被评为优秀。综合各方面表现，陈小春在学习上非常突出，是一个全面发展的学生。
+2.李雷：李雷同学的作业完成率较高，考试成绩良好，课堂参与度积极，项目贡献优秀。李雷在学习成绩和课堂表现上表现突出，是一个学习能力强的学生。
+3.林婷婷：虽然林婷婷同学的作业完成率略低于陈小春和李雷，但考试成绩与李雷持平，且课堂参与度积极，项目贡献良好。林婷婷在学习成绩上表现稳定，是一个有潜力的学生。`;
+							break;
+						case "扩展知识":
+							aiContent = `在这节关于解决垃圾问题的科学课上，学生们已经通过实际的调查和计算，以及对垃圾分类和处理方法的讨论，获得了很多实用的知识。为了进一步扩展这些知识，以下是一些可以在课堂上引入的相关主题和活动：
+
+1.全球垃圾处理策略对比：
+a.研究并讨论不同国家如何处理垃圾，例如德国、日本和瑞士的垃圾分类和处理系统。这可以帮助学生了解不同文化和政策环境下的环保策略。
+b.学生可以制作海报或演示文稿，展示每个国家的垃圾处理方法，并讨论其优缺点。
+2.垃圾减量的科技创新：
+a.探索和讨论新技术如何帮助减少垃圾产生，例如生物降解材料、可回收包装设计等。
+b.邀请一个环保技术公司的代表来讲述他们如何通过创新技术来处理或减少垃圾。
+3.实地考察：
+a.组织一次学校附近的垃圾处理设施或回收中心的参观。让学生亲眼看到垃圾是如何被分类、处理和回收的。 
+b.在参观后，学生可以讨论他们的观察结果，以及这些设施如何影响社区和环境。
+4.环保项目设计：
+a.鼓励学生设计自己的环保项目，如校园内的垃圾分类宣传、制作可持续材料的手工艺品等。
+b.这些项目可以在学校的科学展览会上展出，或者在校园网站上分享。
+5.家庭和社区的环保行动：
+a.让学生调查并记录他们家庭一周内的垃圾产生和处理情况，然后讨论如何改进。 
+b.学生可以创建一个“绿色挑战”活动，鼓励家庭成员减少垃圾产生，如使用可重复使用的购物袋、减少一次性产品使用等。
+
+通过这些扩展活动，学生不仅能够加深对垃圾问题的理解，还能学习到如何在日常生活中实际应用这些知识，从而更有效地保护我们的环境。`;
+							break;
+					}
+					this.chatList.push({
+						role:"ai",
+						content:aiContent,
+						time:new Date().toLocaleString().replace(/\//ig,'-')
+					})
+					this.text = "";
+					this.$nextTick(() => {
+					  this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
+					});;
+					this.loading = false;
+				},1000)
+				// this.chatList.push({
+				// 	role:"user",
+				// 	content:this.text,
+				// 	time:"2023-11-11 11:10:11"
+				// },{
+				// 	role:"ai",
+				// 	content:`小朋友，你真棒！`,//这里需要调用接口
+				// 	time:"2023-11-11 11:10:11"
+				// })
+				// this.text = "";
+				// // 元素滚动条触底
+				// this.$nextTick(() => {
+				//   this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
+				// });;
+			},
+			sendType(text){
+				this.text = text;
+				this.send();
+			},
+			sendImage(){
+				this.$message.info("发送图片")
+			},
+			sendVideo(){
+				this.$message.info("发送视频")
+			},
+		},
+	}
+</script>
+
+<style scoped>
+.task{
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+}
+
+.taskTop{
+	width: 100%;
+	height: 280px;
+	box-sizing: border-box;
+	padding: 10px;
+	overflow-x: hidden;
+}
+
+.tt_title{
+	font-size: 18px;
+	font-weight: bold;
+	margin-bottom: 5px;
+}
+
+.tt_item{
+	width: 100%;
+	height: auto;
+	margin-top: 10px;
+}
+
+.tt_i_title{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.tt_i_title>span:nth-of-type(2){
+	box-sizing: border-box;
+	padding: 0 10px;
+	height: 25px;
+	background-color: #EFFCF5;
+	color: #83E0AF;
+}
+
+
+.tt_i_box{
+	width: 100%;
+	height: auto;
+	display: flex;
+	margin-top: 10px;
+	justify-content: space-between;
+}
+
+.tt_i_box>img{
+	width: 100%;
+	height: 50px;
+}
+
+
+.tt_i_b_item{
+	width: auto;
+	height: 90px;
+	background-color: #F6F9FF;
+}
+
+.tt_i_b_title{
+	width: 100%;
+	height: 30px;
+	display: flex;
+	justify-content: center;
+	box-sizing: border-box;
+	border: solid 1px #E0EAFB;
+	color: #626466;
+}
+
+.tt_i_b_box{
+	width: auto;
+	height: 60px;
+	box-sizing: border-box;
+	border: solid 1px #E0EAFB;
+	border-top: none;
+	display: flex;
+}
+
+.tt_i_b_b_item{
+	width: 70px;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	border-left: solid 1px #E0EAFB;
+}
+
+.tt_i_b_box>.tt_i_b_b_item:nth-of-type(1){
+	border-left:none
+}
+
+.tt_i_b_b_item>div{
+	font-size: 14px;
+	color: #949599;
+}
+
+.tt_i_b_b_item>span{
+	font-weight: bold;
+}
+
+.tt_i_b_b_item>span>span{
+	font-size: 12px;
+	font-weight: 200;
+}
+
+
+.t_top{
+	width: 100%;
+	height: calc(100% - 370px);
+	overflow: auto;
+	box-sizing: border-box;
+	padding: 20px 0;
+}
+
+.t_t_chat{
+	width: 100%;
+	display: flex;
+	box-sizing: border-box;
+	padding: 10px;
+}
+
+.t_t_chat>div{
+	display: flex;
+	align-items: flex-start;
+	width: 100%;
+}
+
+.t_t_c_user{
+	box-sizing: border-box;
+	padding-left: 35px;
+}
+
+.t_t_c_u_left{
+	width: 90%;
+	height: auto;
+}
+
+.t_t_c_u_l_content{
+	width: auto;
+	max-width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 10px;
+	color: white;
+	background-color: #3681FC;
+	border-radius: 8px 2px 8px 8px;
+  white-space: pre-line
+}
+
+.t_t_c_u_l_time{
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	font-size: 12px;
+	color: #9F9F9F;
+	margin-top: 5px;
+}
+
+.t_t_c_u_right{
+	width: 35px;
+	height: 35px;
+	display: flex;
+	justify-content: center;
+	margin-left: 5px
+}
+
+.t_t_c_u_right>span{
+	width: 32px;
+	height: 32px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: white;
+	background-color: #3681FC;
+	border-radius: 50%;;
+}
+
+.t_t_c_ai{
+	box-sizing: border-box;
+	padding-right: 35px;
+}
+
+.t_t_c_a_right{
+	min-width: 90%;
+	height: auto;
+}
+
+.t_t_c_a_r_content{
+	width: auto;
+	max-width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 10px;
+	background-color: #F6F8FF;
+	border-radius: 2px 8px 8px 8px;
+  white-space: pre-line;
+	word-break: break-all;
+}
+
+.t_t_c_a_r_content2{
+	background-color: #F6F8FF;
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 10px;
+	border-radius: 2px 8px 8px 8px;
+  white-space: pre-line;
+	box-shadow: 0 0px 10px #c5cbee;
+}
+
+.t_t_c_a_r_c_title{
+	display: flex;
+	align-items: center;
+}
+.t_t_c_a_r_c_title>img{
+	width: 16px;
+	height: 16px;
+}
+
+.t_t_c_a_r_c_item{
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 10px;
+	background-color: #FFFFFF;
+	border-radius: 5px;
+	margin-top: 5px;
+	color: #666666;
+	font-size: 14px;
+	cursor: pointer;
+}
+
+.t_t_c_a_r_c_item:hover{
+	border: solid #B8D2FE 1px;
+	box-shadow: 0 0 5px 2px #B8D2FE;
+}
+
+.t_t_c_a_r_c_title>span{
+	font-weight: bold;
+}
+
+
+.t_t_c_a_r_time{
+	width: 100%;
+	display: flex;
+	justify-content: flex-start;
+	font-size: 12px;
+	color: #9F9F9F;
+	margin-top: 5px;
+}
+
+.t_t_c_a_left{
+	width: 35px;
+	height: 35px;
+	display: flex;
+	justify-content: center;
+	margin-right: 5px
+}
+
+.t_t_c_a_left>span{
+	width: 32px;
+	height: 32px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: white;
+	background-color: #3681FC;
+	border-radius: 50%;
+}
+
+.t_bottom{
+	width: 100%;
+	height: 90px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.t_b_btnArea{
+	width: 100%;
+	height: 30px;
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0 10px;
+	overflow-y: hidden;
+}
+
+.t_b_ba-item{
+	width: auto;
+	box-sizing: border-box;
+	padding: 0 10px;
+	height: 25px;
+	background-color: white;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	/* 阴影 */
+	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.363);
+	border-radius: 15px;
+	font-size: 14px;
+	cursor: pointer;
+	margin-right: 10px;
+	white-space: nowrap;
+}
+
+
+.t_b_inputArea{
+	width: 100%;
+	height: 55px;
+	box-sizing: border-box;
+	border-top: solid 1px #EDEDED;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.t_b_tape{
+	width: 35px;
+	height: 35px;
+	background: url("../../../assets/icon/course/tape.png") no-repeat;
+	background-size: 50% 60%;
+	background-position: center;
+	cursor: pointer;
+}
+
+.t_b_input{
+	width: 65%;
+	height: 45px;
+	background-color: #F3F3F3;
+	border-radius: 50px;
+	margin: 0 10px;
+	display: flex;
+	align-items: center;
+}
+
+.t_b_i_left{
+	width: calc(100% - 45px);
+	height: 100%;
+}
+
+.t_b_i_left>>>.el-input__inner{
+	border: none;
+	background-color: #F3F3F3;
+	outline: none;
+	border-radius: 50px 0 0 50px;
+}
+
+
+.t_b_i_right{
+	width: 45px;
+	height: 45px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.t_b_i_right>span{
+	width: 35px;
+	height: 35px;
+	background: url("../../../assets/icon/course/file.png") no-repeat;
+	background-size: 50% 60%;
+	background-position: center;
+	cursor: pointer;
+}
+
+.t_b_btn{
+	width: 40px;
+	height: 40px;
+	background-color: #3681FC;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 50%;
+	cursor: pointer;
+}
+
+.t_b_btn>span{
+	width: 30px;
+	height: 30px;
+	background: url("../../../assets/icon/course/send.png") no-repeat;
+	background-size: 70% 70%;
+	background-position: center;
+	
+}
+
+td,th{
+	padding: 10px;
+}
+
+
+</style>

src/components/classRoomHelper/index.vue

@@ -1,38 +1,96 @@
 <template>
   <div class="ch_box" ref="ch_box">
     <div class="ch_content_box" v-if="type == 1">
-
+			<searchArea v-show="itemType==1"/>
+			<taskArea v-show="itemType==2"/>
+			<dialogArea v-show="itemType==3"/>
     </div>
     <div class="ch_nav_box">
-        <span @click="openSetting">设置</span>
+			<div class="ch_nav_box_top">
+				<div>
+					<img :src="require('../../assets/icon/course/return.png')" alt="">
+				</div>
+				<div>
+					<img :src="require('../../assets/icon/course/refresh.png')" alt="">
+				</div>
+				<div>
+					<img :src="require('../../assets/icon/course/setting.png')" alt="">
+				</div>
+			</div>
+			<div class="ch_nav_box_middle">
+				<div :class="['ch_nav_box_middle_item',itemType==1?'ch_nav_box_middle_item_active':'']" @click.stop="changeItemType(1)">
+					<img v-if="itemType==1" :src="require('../../assets/icon/course/up_active.png')">
+					<img v-if="itemType!=1" :src="require('../../assets/icon/course/up.png')">
+					<!-- <span :style="`background:url(${itemType==1?require('../../assets/icon/course/up_active.png'):require('../../assets/icon/course/up.png')});`"></span> -->
+					<div>搜索</div>
+				</div>
+				<div :class="['ch_nav_box_middle_item',itemType==2?'ch_nav_box_middle_item_active':'']" @click.stop="changeItemType(2)">
+					<img v-if="itemType==2" :src="require('../../assets/icon/course/task_active.png')">
+					<img v-if="itemType!=2" :src="require('../../assets/icon/course/task.png')">
+					<!-- <span :style="`background:url(${itemType==2?require('../../assets/icon/course/task_active.png'):require('../../assets/icon/course/task.png')});`"></span> -->
+					<div>任务</div>
+				</div>
+				<div :class="['ch_nav_box_middle_item',itemType==3?'ch_nav_box_middle_item_active':'']" @click.stop="changeItemType(3)">
+					<img v-if="itemType==3" :src="require('../../assets/icon/course/dialog_active.png')">
+					<img v-if="itemType!=3" :src="require('../../assets/icon/course/dialog.png')">
+					<!-- <span :style="`background:url(${itemType==3?require('../../assets/icon/course/dialog_active.png'):require('../../assets/icon/course/dialog.png')});`"></span> -->
+					<div>对话</div>
+				</div>
+			</div>
+			<div class="ch_nav_box_bottom">
+				<div>
+					<img :src="require('../../assets/icon/course/last.png')">
+				</div>
+				<div>
+					<img :src="require('../../assets/icon/course/next.png')">
+				</div>
+				<div @click="openSetting">
+					<img :src="require('../../assets/icon/course/setting.png')">
+				</div>
+			</div>
+
     </div>
 
   </div>
 </template>
 
 <script>
+import searchArea from './component/searchArea.vue';
+import taskArea from './component/taskArea.vue';
+import dialogArea from './component/dialogArea.vue';
 export default {
-    data() {
-        return {
-            type: 0
-        }
-    },
-    mounted () {
-        this.setWidth();
-    },
-    methods: {
-        setWidth() {
-            let w = this.$refs.ch_box;
-            let w2 = w.offsetWidth + 30 + 'px'
-            this.$emit('setWidth', w2)
-        },
-        openSetting(){
-            this.type = this.type == 1 ? 0 : 1;
-            this.$nextTick(()=>{
-                this.setWidth();
-            })
-        }
-    },
+	components:{
+		searchArea,
+		taskArea,
+		dialogArea
+	},
+  data() {
+      return {
+          type: 0,
+					itemType:0,//0--无  1-搜索  2-任务 3-对话
+      }
+  },
+  mounted () {
+      this.setWidth();
+  },
+  methods: {
+      setWidth() {
+          let w = this.$refs.ch_box;
+          let w2 = w.offsetWidth + 30 + 'px'
+          this.$emit('setWidth', w2)
+      },
+      openSetting(){
+          this.type = this.type == 1 ? 0 : 1;
+          this.$nextTick(()=>{
+              this.setWidth();
+          })
+      },
+			changeItemType(type){
+				this.type = 0;
+				this.openSetting();
+				this.itemType = type;
+			}
+  },
 }
 </script>
 
@@ -59,8 +117,95 @@ export default {
     }
 
     .ch_content_box{
-        width: 315px;
+        width: 400px;
         height: 100%;
         border-right: 2px solid #e7e7e7;
     }
+
+		.ch_nav_box_bottom{
+			width: 100%;
+			height: auto;
+			box-sizing: border-box;
+			border-top: solid 1px #EAEAEA;
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-end;
+		}
+
+		.ch_nav_box_middle{
+			width: 100%;
+			height:auto;
+			display: flex;
+			box-sizing: border-box;
+			border-top: solid 1px #EAEAEA;
+			flex-direction: column;
+			justify-content: space-between;
+		}
+
+		.ch_nav_box_middle_item{
+			width: 100%;
+			height: 80px;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			cursor: pointer;
+			transition: .3s;
+			font-size: 14px;
+		}
+
+		/* .ch_nav_box_middle_item:hover{
+			background-color: rgb(195, 215, 247);
+		} */
+
+		.ch_nav_box_middle_item_active{
+			  background-color: #3681FC;
+				color: white;
+		}
+		
+		.ch_nav_box_middle_item>img{
+			width: 24px;
+			height: 24px;
+			margin-bottom: 5px;
+		}
+
+		/* .ch_nav_box_middle_item>span{
+			width: 24px;
+			height: 24px;
+			background-size: 100% 100%;
+			background-repeat: no-repeat;
+			background-position: center;
+		} */
+		
+
+		.ch_nav_box_bottom>div{
+			width: 100%;
+			height: 65px;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			cursor: pointer;
+		}
+		.ch_nav_box_bottom>div>img{
+			width: 24px;
+			height: 24px;
+		}
+
+		.ch_nav_box_top{
+			width: 100%;
+			height: auto;	
+		}
+		.ch_nav_box_top>div{
+			width:100%;
+			height:65px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			cursor: pointer;
+		}
+		.ch_nav_box_top>div>img{
+			width: 24px;
+			height: 24px;
+		}
 </style>