update

src/router/router.config.js

@@ -245,4 +245,13 @@ export const constantRouterMap = [
 			keepAlive: false
 		}
 	},
+	{
+		path:"/pocSelfMessage",
+		name:"pocSelfMessage",
+		component:()=>import('@/views/pocAiClassroom/selfMessage.vue'),
+		meta:{
+			title:"个人信息",
+			keepAlive: false
+		},
+	},
 ]

src/views/pocAiClassroom/chatArea.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="pocAi">
+		<bar :backPage="1" :tit="'聊聊天'"></bar>
     <div class="pa_background">
-      <img src="../../assets/images/pocAiClassroom/bg2.png" />
+      <img src="../../assets/images/pocAiClassroom/bg3.png" />
     </div>
     <div class="pa_documentArea" ref="documentAreaRef" v-show="showFileArea">
       <div
@@ -175,7 +176,7 @@
       </div>
     </div>
     <div class="pa_chatArea">
-      <div class="pa_ca_back" @click.stop="back()">返回</div>
+      <!-- <div class="pa_ca_back" @click.stop="back()">返回</div> -->
       <!-- <div class="pa_ca_header">
         <span v-text="chatTitle"></span>
       </div> -->
@@ -280,7 +281,8 @@
          
         >
           <div class="pa_ca_c_b_inputArea">
-            <textarea
+						<el-input class="pa_ca_c_b_ia_input" v-model="chatValue"  ref="textAreaRef"  placeholder="请在此输入您想了解的内容"  :disabled="source != null"></el-input>
+            <!-- <textarea
               id="myTextarea"
               ref="textAreaRef"
               min-rows="1"
@@ -289,9 +291,9 @@
               placeholder="你有任何想法，可以随时告诉我呀"
               autosize="none"
               :disabled="source != null"
-            ></textarea>
+            ></textarea> -->
             <div class="pa_ca_c_b_btnArea">
-              <span class="pa_ca_c_b_ba_btn" @click="sendChat">
+              <span :class="['pa_ca_c_b_ba_btn',source?'pa_ca_c_b_ba_btnDisabled':'']" @click="sendChat">
                 <svg
                   t="1724748020468"
                   class="icon"
@@ -329,7 +331,7 @@ import txtView from "./component/txtView.vue";
 import { v4 as uuidv4 } from "uuid";
 import MarkdownIt from "markdown-it";
 import {getChatListRequest,insertChatListRequest,aiChatRequest,aiRoleChatRequest} from '@/api/pocAiClassroom'
-
+import bar from './component/bar.vue'
 // 自定义指令，用于处理点击外部区域的事件
 const clickOutside = {
   bind(el, binding) {
@@ -349,6 +351,7 @@ const clickOutside = {
     document.removeEventListener("click", el.clickOutsideEvent);
   }
 };
+
 export default {
   components: {
     vpdf,
@@ -361,7 +364,7 @@ export default {
       org: this.$store.state.user.userinfo.org,
       oid: this.$store.state.user.userinfo.organizeid,
       showFileIndex: 0,
-      showFileArea: true,
+      showFileArea: false,
       fullFileDialog: false,
       showDialogBtn: false,
       alwaysShowDialogBtn: true,
@@ -370,8 +373,8 @@ export default {
       dialogPosition: {
 				dialogWidth:0,
 				dialogHeight:0,
-        x: 10,
-        y: 10,
+        x: 0,
+        y: 40,
         oldX: 0,
         oldY: 0
       },
@@ -526,6 +529,9 @@ export default {
       }
     };
   },
+	components:{
+		bar
+	},
 	directives: {
     "click-outside": clickOutside // 注册自定义指令
   },
@@ -587,7 +593,7 @@ export default {
       });
     },
     sendChat(_text = this.chatValue) {
-      if (this.source) return this.$message.info("还在对话中，请稍等");
+      if (this.source) return this.$toast("还在对话中，请稍等");
       if (typeof _text !== "string") _text = this.chatValue;
       if (!_text.trim()) return;
       this.chatValue = "";
@@ -716,7 +722,7 @@ export default {
     // 获取对应的聊天记录
     getChatList() {
       return new Promise((resolve, reject) => {
-        if (this.loading) return this.$message.info("请稍等...");
+        if (this.loading) return this.$toast("请稍等...");
         this.chatList = [];
         this.loading = true;
         let params = {
@@ -757,7 +763,7 @@ export default {
           })
           .catch(err => {
             console.log(err);
-            this.$message.error("获取对话记录失败");
+            this.$toast.fail("获取对话记录失败");
             this.loading = false;
             resolve();
           });
@@ -854,10 +860,10 @@ export default {
         // 计算新位置
         let newX = e.touches[0].clientX - this.dialogPosition.oldX;
         let newY = e.touches[0].clientY - this.dialogPosition.oldY;
-
+ 
         // 边界检查：确保对话框不会穿过边缘
         if (newX < 0) newX = 0;
-        if (newY < 0) newY = 0;
+        if (newY < 40) newY = 40;
         if (newX > windowWidth - dialogWidth) newX = windowWidth - dialogWidth;
         if (newY > windowHeight - dialogHeight)
           newY = windowHeight - dialogHeight;
@@ -893,6 +899,7 @@ export default {
   /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
   box-sizing: border-box;
   background-color: black;
+	padding-top: 40px;
 }
 
 .pa_background {
@@ -901,7 +908,7 @@ export default {
   position: fixed;
   top: 0;
   left: 0;
-  opacity: 0.7;
+  /* opacity: 0.7; */
   z-index: 1;
 }
 
@@ -919,11 +926,11 @@ export default {
 }
 
 .pa_da_dialog {
-  width: calc(100vw - 20px);
+  width: 100vw;
   height: 300px;
   background-color: #fff;
   opacity: 1;
-  border-radius: 8px;
+  border-radius: 0px;
   position: fixed;
   overflow: hidden;
   box-sizing: border-box;
@@ -1225,17 +1232,18 @@ export default {
   height: 60px;
   display: flex;
   justify-content: center;
-  align-items: flex-start;
+  align-items: center;
   box-sizing: border-box;
+	background-color: #fff
 }
 
 .pa_ca_c_b_inputArea {
   width: 95%;
 
-  height: 85%;
-  background-color: #fff;
+  height: 70%;
+  /* background-color: #fff; */
   border-radius: 100px;
-  box-shadow: 0 0 10px #ccc;
+  /* box-shadow: 0 0 10px #ccc; */
   display: flex;
   align-items: center;
 }
@@ -1247,6 +1255,11 @@ export default {
   justify-content: flex-end;
 }
 
+.pa_ca_c_b_ia_input>>>.el-input__inner{
+	border-radius: 50px;
+	background: #F3F3F3 !important;
+}
+
 .pa_ca_c_b_ba_btn {
   width: 40px;
   height: 40px;
@@ -1262,8 +1275,12 @@ export default {
 
 .pa_ca_c_b_ba_btn > svg {
   fill: #fff;
-  width: 23px;
-  height: 23px;
+  width: 20px;
+  height: 20px;
+}
+
+.pa_ca_c_b_ba_btnDisabled{
+	opacity: .5;
 }
 
 .pa_ca_c_b_inputArea > textarea {
@@ -1346,7 +1363,7 @@ export default {
 } */
 
 .uc_right {
-  padding: 10px 20px 10px 10px;
+  padding: 10px 10px 10px 10px;
 }
 
 .aiChat {
@@ -1358,7 +1375,7 @@ export default {
 }
 
 .ac_left {
-  padding: 10px 10px 10px 20px;
+  padding: 10px 10px 10px 10px;
 }
 
 .ac_right {
@@ -1374,7 +1391,7 @@ export default {
   color: black;
   padding: 0px 20px;
   border-radius: 2px 8px 8px 8px;
-  font-size: 16px;
+  font-size: 14px;
   position: relative;
   box-shadow: 0px 4px 10px 0px #1d398314;
   box-shadow: 1px 1px 20px 4px #1d39830d;
@@ -1441,8 +1458,8 @@ export default {
 }
 
 .chatAvatar {
-  width: 50px;
-  height: 50px;
+  width: 40px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1454,7 +1471,7 @@ export default {
 
 
 .chatName {
-  font-size: 18px;
+  font-size: 14px;
   /* color: rgb(80, 80, 80); */
   color: #ffffff8c;
   margin-bottom: 8px;

src/views/pocAiClassroom/component/bar.vue

@@ -0,0 +1,124 @@
+<template>
+  <!-- 导航条 -->
+  <div class="bar" :style="{ background: num ? '#005CCD' : '#f9f9f9', color: num ? '#fff' : 'rgba(0, 0, 0, 0.90)' }">
+    <div v-if="num !== 0 || backPage !==0" style="position: absolute;left: 10px;">
+      <van-icon @click="back" name="arrow-left" />
+    </div>
+
+    <div class="barTitle" style="font-size: 20px;" v-if="tit!==''">
+      {{ tit }}
+    </div>
+
+		<div v-else>
+			<slot name="title"></slot>
+		</div>
+
+    <div v-if="setting" style="position: absolute;right: 10px;">
+			<van-popover placement="bottom-end" v-model="showSetting" trigger="click">
+        <slot name="setting"></slot>
+        <template #reference>
+					<slot name="settingIcon"></slot>
+					<!-- <van-icon name="weapp-nav" /> -->
+        </template>
+      </van-popover>
+    </div>
+
+		<div style="position: absolute;right: 10px;">
+			<slot name="changeChapter" ></slot>
+		</div>
+</div>
+</template>
+
+<script>
+// 自定义指令，用于处理点击外部区域的事件
+const clickOutside = {
+  bind(el, binding) {
+    // 在元素上绑定一个点击事件监听器
+    el.clickOutsideEvent = function(event) {
+      // 检查点击事件是否发生在元素的内部
+      if (!(el === event.target || el.contains(event.target))) {
+        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
+        binding.value(event)
+      }
+    }
+    // 在文档上添加点击事件监听器
+    document.addEventListener('click', el.clickOutsideEvent)
+  },
+  unbind(el) {
+    // 在元素上解除点击事件监听器
+    document.removeEventListener('click', el.clickOutsideEvent)
+  }
+}
+export default {
+  props: {
+    tit: {
+      type: String,
+      default: ''
+    },
+    num: {
+      type: Number,
+      default: 0
+    },
+    backPage: {
+      type: Number,
+      default: 0
+    },
+    setting: {
+      type: Boolean,
+      default: false
+    }
+  },
+  directives: {
+    'click-outside': clickOutside // 注册自定义指令
+  },
+  data() {
+    return {
+      barBackColor: 'barBackColor',
+      showSetting: false
+    }
+  },
+
+  methods: {
+    back() {
+      if (this.backPage == 1) {
+        console.log(this.backPage)
+        this.$router.go(-1)
+        // this.$router.push({ path: '/classObserve', query: {} })
+      } else {
+        this.$emit('cutPage')
+      }
+    },
+    settingFn() {
+      this.showSetting = !this.showSetting
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bar {
+  width: 100%;
+  height: 40px;
+  z-index: 999;
+  font-weight: 550;
+  // background-color: #f9f9f9;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0 10px;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  font-size: 17px;
+	color: black !important;
+	background-color: #fff !important;
+}
+
+.barTitle{
+	max-width: 50vw;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+</style>

src/views/pocAiClassroom/component/chapterCard.vue

@@ -1,43 +1,42 @@
 <template>
   <div class="chapterCard" >
-    <div class="cc_title">{{ data.title }}</div>
+    <!-- <div class="cc_title">{{ data.title }}</div> -->
     <div class="cc_box">
       <div
         class="cc_b_item"
-        v-for="(item, index) in data.allClass"
-        :key="index"
-				@click.stop="showBtnAreaIndex = index"
-				v-click-outside="handleClickOutside"
       >
+				<div class="cc_b_i_title" v-text="data.title"></div>
         <div class="cc_b_i_image">
           <el-image
             style="width: 100%;height: 100%;"
             :src="require('../../../assets/images/pocAiClassroom/classImage.png')"
           ></el-image>
-          <span v-text="item.title"></span>
+          <span v-text="data.title"></span>
         </div>
 
         <div class="cc_b_i_message" >
-          <div v-show="showBtnAreaIndex!==index">
-            <span v-if="item.isComplete">✅已完成</span>
-            <span v-else>🏷️待完成</span>
-          </div>
-          <div v-show="showBtnAreaIndex!==index">
+         
+          <div>
             <div>
-              {{ subjectList.find(i => i.value === item.subject).label }}
+              {{ subjectList.find(i => i.value === data.subject)?subjectList.find(i => i.value === data.subject).label:'' }}
             </div>
+          </div>
+
+					<div>
+            <span v-if="data.isComplete">已完成</span>
+            <span v-else>待完成</span>
           </div>
         </div>
-        <div class="cc_b_i_btnArea" v-if="showBtnAreaIndex===index">
+        <div class="cc_b_i_btnArea">
           <span
             class="cc_b_i_ba_goClass"
-            v-if="[0].includes(item.type)"
-            @click.stop="goClass(item)"
+            v-if="[0].includes(data.type)"
+            @click.stop="goClass(data)"
             >去上课</span
           >
           <span
             class="cc_b_i_ba_doWorks"
-            v-if="[0, 1].includes(item.type)"
+            v-if="[0, 1].includes(data.type)"
             @click.stop="goWorks(item)"
             >做练习</span
           >
@@ -48,25 +47,6 @@
 </template>
 
 <script>
-// 自定义指令，用于处理点击外部区域的事件
-const clickOutside = {
-  bind(el, binding) {
-    // 在元素上绑定一个点击事件监听器
-    el.clickOutsideEvent = function(event) {
-      // 检查点击事件是否发生在元素的内部
-      if (!(el === event.target || el.contains(event.target))) {
-        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
-        binding.value(event);
-      }
-    };
-    // 在文档上添加点击事件监听器
-    document.addEventListener("click", el.clickOutsideEvent);
-  },
-  unbind(el) {
-    // 在元素上解除点击事件监听器
-    document.removeEventListener("click", el.clickOutsideEvent);
-  }
-};
 export default {
   props: {
     data: {
@@ -77,9 +57,6 @@ export default {
       type: Array,
       default: () => []
     }
-  },
-	directives: {
-    "click-outside": clickOutside // 注册自定义指令
   },
   data() {
     return {
@@ -92,12 +69,12 @@ export default {
   methods: {
     goClass(item) {
 			this.$router.push(
-          `/pocClass?userid=${this.userId}&org=${this.org}&oid=${this.oid}`
+          `/pocClass`
         );
     },
     goWorks(item) {
       this.$router.push(
-        `/pocDoTask?userid=${this.userId}&org=${this.org}&oid=${this.oid}`
+        `/pocDoTask`
       );
     },
 		handleClickOutside(){
@@ -109,17 +86,12 @@ export default {
 
 <style scoped>
 .chapterCard {
-  width: 100%;
+  width: auto;
   height: auto;
-  margin-top: 30px;
+  margin-bottom: 10px;
   position: relative;
 }
 
-.cc_title {
-  margin: 20px 0;
-  font-size: 22px;
-}
-
 .cc_box {
   width: 100%;
   height: auto;
@@ -129,42 +101,27 @@ export default {
 }
 
 .cc_b_item {
-  width: 120px;
-  height: 90px;
-  margin-right: 10px;
+  width: 35vw;
+	max-width: 150px;
+  height: auto;
+	margin: 5px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 40px;
+  /* margin-bottom: 5px; */
   background-color: #fff;
-  padding: 16px;
+  padding: 10px 15px 10px 15px;
   border-radius: 6px;
   border: 2px solid #f0f2f5;
   position: relative;
   transition: 0.3s;
 }
 
-.cc_b_item:hover>.cc_b_i_image{
-	opacity: .5;
-}
-
-.cc_b_item:hover {
-  border-color: #3681fc;
-  box-shadow: 0px 8px 10px -5px #00000014;
-
-  box-shadow: 0px 16px 24px 2px #0000000a;
-
-  box-shadow: 0px 6px 30px 5px #0000000d;
-}
-
-.cc_b_item:hover > .cc_b_i_btnArea {
-  display: flex;
-}
 
 .cc_b_i_image {
   width: 100%;
-  height: 140px;
+  height: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -187,7 +144,7 @@ export default {
 
 .cc_b_i_message {
   width: 100%;
-  height: 45px;
+  height: auto;
   display: flex;
   margin-top: 5px;
   display: flex;
@@ -198,12 +155,13 @@ export default {
 .cc_b_i_message > div > span {
   font-size: 14px;
   display: flex;
+	color:#00000066 ;
   align-items: center;
 }
 
 .cc_b_i_message > div > div {
   font-size: 12px;
-  padding: 2px;
+  padding: 4px;
   background-color: #e0eafb;
   border-radius: 3px;
   color: #3681fc;
@@ -212,19 +170,16 @@ export default {
 
 .cc_b_i_btnArea {
   width: 100%;
-  height: 45px;
-  position: absolute;
-  bottom: 0px;
-  padding: 0 16px;
+  height: auto;
+	margin-top: 10px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  display: none;
 }
 
 .cc_b_i_btnArea > span {
   flex: 1;
-  height: 30px;
+  height: 25px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -233,19 +188,34 @@ export default {
   color: black;
   /* background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%); */
   background-color: #f0f2f5;
-  border: solid 2px #f0f2f5;
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 13px;
   transition: 0.3s;
 }
 
-.cc_b_i_btnArea > span:active {
-  color: #3681fc;
-  border-color: #e0eafb;
+.cc_b_i_btnArea > span:nth-of-type(2){
+	margin-left: 10px;
+}
+
+.cc_b_i_ba_doWorks{
+	background: linear-gradient(90deg, #82B1FF 0%, #3681FC 100%);
+	color: #fff !important;
 }
 
-.cc_b_i_btnArea > span:nth-of-type(2n) {
-  margin-left: 5px;
+.cc_b_i_ba_goClass{
+	background: #F0F2F5;
+	color: #3681FC !important;
+}
+
+.cc_b_i_title{
+	width: 100%;
+	height: auto;
+	font-size: 14px;
+	margin-bottom: 5px;
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 /* .cc_b_item:hover .cc_b_i_image>.cc_b_i_btnArea{

src/views/pocAiClassroom/doTask.vue

@@ -1,10 +1,57 @@
 <template>
   <div class="doTask">
     <!-- <div class="dt_back" @click.stop="back()">返回</div> -->
+    <bar :backPage="1" :num="1">
+      <template v-slot:title>
+        <div class="dt_time">
+          <div class="dt_t_title">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="#17C469" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M3.75 11.25C3.75 7.79822 6.54822 5 10 5C11.7319 5 13.2984 5.70364 14.431 6.84218C15.5559 7.97295 16.25 9.52981 16.25 11.25C16.25 14.7018 13.4518 17.5 10 17.5C6.54822 17.5 3.75 14.7018 3.75 11.25ZM10 3.75C5.85786 3.75 2.5 7.10786 2.5 11.25C2.5 15.3921 5.85786 18.75 10 18.75C14.1421 18.75 17.5 15.3921 17.5 11.25C17.5 9.56177 16.9417 8.00315 16.0004 6.74983C16.0236 6.73236 16.0458 6.71307 16.0669 6.69194L17.3169 5.44194C17.561 5.19786 17.561 4.80214 17.3169 4.55806C17.0729 4.31398 16.6771 4.31398 16.4331 4.55806L15.1831 5.80806C15.1795 5.81166 15.1759 5.81529 15.1724 5.81896C13.8273 4.53761 12.0051 3.75 10 3.75Z"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M7 1.875C7 1.52982 7.33579 1.25 7.75 1.25H12.25C12.6642 1.25 13 1.52982 13 1.875C13 2.22018 12.6642 2.5 12.25 2.5H7.75C7.33579 2.5 7 2.22018 7 1.875Z"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M10 7.5C10.3452 7.5 10.625 7.77982 10.625 8.125V11.25C10.625 11.5952 10.3452 11.875 10 11.875C9.65482 11.875 9.375 11.5952 9.375 11.25V8.125C9.375 7.77982 9.65482 7.5 10 7.5Z"
+              />
+            </svg>
+            <span>计时器</span>
+          </div>
+          <div class="dt_t_time">{{ showTime }}</div>
+        </div>
+      </template>
+      <template v-slot:changeChapter v-if="!isSubmit">
+        <div class="dt_m_l_h_changeChapter" @click.stop="changeChapter()">
+          <!-- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M10.0417 2.20921C10.2722 1.93026 10.6458 1.93026 10.8763 2.20921L13.8271 5.78064C13.9959 5.98492 14.0464 6.29215 13.9551 6.55906C13.8637 6.82597 13.6485 7 13.4098 7H2.59016C2.26423 7 2 6.6802 2 6.28571C2 5.89123 2.26423 5.57143 2.59016 5.57143H11.985L10.0417 3.21936C9.81122 2.94042 9.81122 2.48816 10.0417 2.20921Z"
+                  fill="#3681FC"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M2.04494 9.44094C2.13629 9.17403 2.35148 9 2.59018 9H13.4098C13.7358 9 14 9.3198 14 9.71429C14 10.1088 13.7358 10.4286 13.4098 10.4286H4.01496L5.9583 12.7806C6.18878 13.0596 6.18878 13.5118 5.9583 13.7908C5.72783 14.0697 5.35416 14.0697 5.12369 13.7908L2.17287 10.2194C2.00409 10.0151 1.95359 9.70785 2.04494 9.44094Z"
+                  fill="#3681FC"
+                />
+              </svg> -->
+
+          <span>切换</span>
+        </div>
+      </template>
+    </bar>
     <div class="dt_main" v-if="!isSubmit">
-      <div class="dt_m_head">
+      <!-- <div class="dt_m_head">
         <div class="dt_m_h_left">
-          <div class="dt_m_h_chapter">{{ taskMessage.chapter }}</div>
+          <div class="dt_m_h_chapter">{{ taskMessage.title }}</div>
           <div class="dt_m_h_message">
             {{ taskMessage.grade }}<span>|</span>{{ taskMessage.semester }}<span>|</span>{{ taskMessage.edition
             }}<span>|</span>{{ taskMessage.subject }}
@@ -13,24 +60,22 @@
         <div class="dt_m_h_right">
           <div class="dt_m_b_r_time">
             <div class="dt_m_b_r_t_head">
-              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="#fff" xmlns="http://www.w3.org/2000/svg">
                 <path
                   fill-rule="evenodd"
                   clip-rule="evenodd"
                   d="M3.75 11.25C3.75 7.79822 6.54822 5 10 5C11.7319 5 13.2984 5.70364 14.431 6.84218C15.5559 7.97295 16.25 9.52981 16.25 11.25C16.25 14.7018 13.4518 17.5 10 17.5C6.54822 17.5 3.75 14.7018 3.75 11.25ZM10 3.75C5.85786 3.75 2.5 7.10786 2.5 11.25C2.5 15.3921 5.85786 18.75 10 18.75C14.1421 18.75 17.5 15.3921 17.5 11.25C17.5 9.56177 16.9417 8.00315 16.0004 6.74983C16.0236 6.73236 16.0458 6.71307 16.0669 6.69194L17.3169 5.44194C17.561 5.19786 17.561 4.80214 17.3169 4.55806C17.0729 4.31398 16.6771 4.31398 16.4331 4.55806L15.1831 5.80806C15.1795 5.81166 15.1759 5.81529 15.1724 5.81896C13.8273 4.53761 12.0051 3.75 10 3.75Z"
-                  fill="#17C469"
                 />
                 <path
                   fill-rule="evenodd"
                   clip-rule="evenodd"
                   d="M7 1.875C7 1.52982 7.33579 1.25 7.75 1.25H12.25C12.6642 1.25 13 1.52982 13 1.875C13 2.22018 12.6642 2.5 12.25 2.5H7.75C7.33579 2.5 7 2.22018 7 1.875Z"
-                  fill="#17C469"
+
                 />
                 <path
                   fill-rule="evenodd"
                   clip-rule="evenodd"
                   d="M10 7.5C10.3452 7.5 10.625 7.77982 10.625 8.125V11.25C10.625 11.5952 10.3452 11.875 10 11.875C9.65482 11.875 9.375 11.5952 9.375 11.25V8.125C9.375 7.77982 9.65482 7.5 10 7.5Z"
-                  fill="#17C469"
                 />
               </svg>
               <span>计时器</span>
@@ -39,58 +84,14 @@
             <div class="dt_m_b_r_t_showTime">
               <span>{{ showTime }}</span>
             </div>
-
-            <div class="dt_m_b_r_t_schedule">
-              <div class="dt_m_b_r_t_s_box">
-                <div class="dt_m_b_r_t_s_b_inner" :style="`width:${schedule}%`"></div>
-                <div class="dt_m_b_r_t_s_b_round" :style="`left:${schedule}%`">
-                  <span>{{ showTaskIndex + 1 }}<span>/</span>{{ taskList.length }}</span>
-                </div>
-              </div>
-            </div>
-
-            <div class="dt_m_b_r_t_btn" @click.stop="keepTime()">
-              <span v-if="timer !== null">暂停计时</span>
-              <span v-else>继续计时</span>
-            </div>
           </div>
-        </div>
-        <span class="dt_m_h_back" @click.stop="back">
-          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M10.1973 15L10.1717 14.9836L2.5 10.0567L10.2042 5V5.03346L10.2016 8.82213C11.3364 8.8539 12.4635 8.91767 13.0862 9.04175C13.1629 9.05701 13.2492 9.073 13.3424 9.09026C13.8173 9.17824 14.4717 9.29947 14.9413 9.52789C15.5469 9.82252 16.1378 10.2494 16.4445 10.5914C17.4895 11.7566 17.4999 13.7513 17.4999 13.7513C17.4999 13.7513 17.336 12.921 16.7963 12.4144C16.3823 12.0259 16.1246 11.8067 15.517 11.6852C14.6833 11.5184 12.283 11.5278 10.1997 11.5739L10.1973 15Z"
-              fill="black"
-            />
-          </svg>
-
-          返回
-        </span>
-      </div>
+        </div> 
+      </div> -->
       <div class="dt_m_box">
         <div class="dt_m_b_left">
-          <div class="dt_m_b_l_head">
+          <!-- <div class="dt_m_b_l_head">
             <div class="dt_m_l_h_title" v-text="taskMessage.title"></div>
-            <div class="dt_m_l_h_changeChapter" @click.stop="changeChapter()">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M10.0417 2.20921C10.2722 1.93026 10.6458 1.93026 10.8763 2.20921L13.8271 5.78064C13.9959 5.98492 14.0464 6.29215 13.9551 6.55906C13.8637 6.82597 13.6485 7 13.4098 7H2.59016C2.26423 7 2 6.6802 2 6.28571C2 5.89123 2.26423 5.57143 2.59016 5.57143H11.985L10.0417 3.21936C9.81122 2.94042 9.81122 2.48816 10.0417 2.20921Z"
-                  fill="#3681FC"
-                />
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M2.04494 9.44094C2.13629 9.17403 2.35148 9 2.59018 9H13.4098C13.7358 9 14 9.3198 14 9.71429C14 10.1088 13.7358 10.4286 13.4098 10.4286H4.01496L5.9583 12.7806C6.18878 13.0596 6.18878 13.5118 5.9583 13.7908C5.72783 14.0697 5.35416 14.0697 5.12369 13.7908L2.17287 10.2194C2.00409 10.0151 1.95359 9.70785 2.04494 9.44094Z"
-                  fill="#3681FC"
-                />
-              </svg>
-
-              <span>切换章节</span>
-            </div>
-          </div>
+          </div> -->
           <!-- <div class="dt_m_b_l_title">{{ classTitle }}</div> -->
           <div class="dt_m_b_l_task">
             <div class="dt_m_b_l_t_title">
@@ -125,6 +126,25 @@
                 >
               </div>
             </div>
+            <div class="dt_m_b_l_t_btnArea">
+              <span class="dt_m_b_l_t_ba_btn1" v-if="this.showTaskIndex !== 0" @click.stop="changeTask('prev')"
+                >上一题</span
+              >
+
+              <span
+                class="dt_m_b_l_t_ba_btn2"
+                v-if="!(this.showTaskIndex == taskList.length - 1)"
+                @click.stop="changeTask('next')"
+                >下一题</span
+              >
+
+              <span
+                class="dt_m_b_l_t_ba_btn2"
+                v-if="this.showTaskIndex == taskList.length - 1"
+                @click.stop="submitTask()"
+                >提交</span
+              >
+            </div>
           </div>
           <div class="dt_m_b_l_bottom">
             <div class="dt_m_b_l_b_seekAssist" v-show="!showSeekAssist" @click.stop="seekAssist()">
@@ -177,31 +197,62 @@
 
               <span>求助</span>
             </div>
-            <div class="dt_m_b_l_b_btnArea" v-show="!showSeekAssist">
-              <span class="dt_m_b_l_b_ba_btnPrev" @click.stop="changeTask('prev')">上一题</span>
-              <!-- v-if="showTaskIndex > 0" -->
-              <span class="dt_m_b_l_b_ba_btnNext" @click.stop="changeTask('next')">下一题</span>
+            <div class="dt_m_b_l_b_save">
+              <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M3 2.5C3 2.22386 3.22386 2 3.5 2H11.5C11.6326 2 11.7598 2.05268 11.8536 2.14645L14.8536 5.14645C14.9473 5.24021 15 5.36739 15 5.5V13.5C15 13.7761 14.7761 14 14.5 14H3.5C3.22386 14 3 13.7761 3 13.5V2.5ZM4 3V13H5.5V10.5C5.5 10.2239 5.72386 10 6 10H12C12.2761 10 12.5 10.2239 12.5 10.5V13H14V5.70711L11.2929 3H4ZM11.5 13V11H6.5V13H11.5ZM5.5 8V5H6.5V8H5.5Z"
+                  fill="black"
+                  fill-opacity="0.6"
+                />
+              </svg>
 
-              <span
-                class="dt_m_b_l_b_ba_save"
-                @click.stop="saveTask()"
-                v-if="!isDoAllTask && this.showTaskIndex != taskList.length - 1"
-              >
-                保存
-              </span>
-              <span
-                class="dt_m_b_l_b_ba_save"
-                @click.stop="submitTask()"
-                v-if="isDoAllTask || this.showTaskIndex == taskList.length - 1"
-              >
-                提交
-              </span>
-              <!-- v-if="taskList.length > showTaskIndex + 1" -->
-              <!-- <span
-                v-if="showTaskIndex == taskList.length - 1"
-                @click.stop="submitTask()"
-                >确认提交</span
-              > -->
+              <span>保存</span>
+            </div>
+            <div class="dt_m_b_l_b_answerSheet" @click.stop="showTaskListSheet = true">
+              <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M2.5 2.5C2.5 2.22386 2.72386 2 3 2H14C14.2761 2 14.5 2.22386 14.5 2.5V13.5C14.5 13.7761 14.2761 14 14 14H3C2.72386 14 2.5 13.7761 2.5 13.5V2.5ZM3.5 3V13H13.5V3H3.5Z"
+                  fill="black"
+                  fill-opacity="0.6"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M7.74631 5.08406L6.06066 6.76971C5.96689 6.86348 5.83972 6.91616 5.70711 6.91616C5.5745 6.91616 5.44732 6.86348 5.35355 6.76971L4.5 5.91616L5.20711 5.20905L5.70711 5.70905L7.0392 4.37695L7.74631 5.08406Z"
+                  fill="black"
+                  fill-opacity="0.6"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M5.9 9.39961C5.56863 9.39961 5.3 9.66824 5.3 9.99961C5.3 10.331 5.56863 10.5996 5.9 10.5996C6.23137 10.5996 6.5 10.331 6.5 9.99961C6.5 9.66824 6.23137 9.39961 5.9 9.39961ZM4.5 9.99961C4.5 9.22641 5.1268 8.59961 5.9 8.59961C6.6732 8.59961 7.3 9.22641 7.3 9.99961C7.3 10.7728 6.6732 11.3996 5.9 11.3996C5.1268 11.3996 4.5 10.7728 4.5 9.99961Z"
+                  fill="black"
+                  fill-opacity="0.6"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M8.5 5.5H12.5V6.5H8.5V5.5Z"
+                  fill="black"
+                  fill-opacity="0.6"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M8.5 9.5H12.5V10.5H8.5V9.5Z"
+                  fill="black"
+                  fill-opacity="0.6"
+                />
+              </svg>
+              <span>答题卡</span>
+              <div>
+                <span>{{ showTaskIndex + 1 }}</span
+                >/{{ taskList.length }}
+              </div>
             </div>
           </div>
         </div>
@@ -297,7 +348,7 @@
         </div> -->
       </div>
 
-      <div class="dt_m_bottom">
+      <!-- <div class="dt_m_bottom">
         <div class="dt_m_b_head">
           <div class="dt_m_b_h_title">
             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -344,9 +395,12 @@
             >
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
     <div class="dt_dialogBackground" v-if="showSeekAssist"></div>
+    <div class="dt_character2" v-if="!showSeekAssist && !isSubmit">
+      <img :src="characterList.find(i => userInfo.choseCharacter === i.index).image" />
+    </div>
     <div class="dt_character" v-if="showSeekAssist">
       <img :src="characterList.find(i => userInfo.choseCharacter === i.index).image" />
 
@@ -367,7 +421,11 @@
         </span>
 
         <div class="dt_c_m_message">
-          这题选：<span>{{ typeof taskList[showTaskIndex].answer == 'object'? taskList[showTaskIndex].answer.map(i=>choseList[i]).join('、'):choseList[taskList[showTaskIndex].answer] }}</span>
+          这题选：<span>{{
+            typeof taskList[showTaskIndex].answer == 'object'
+              ? taskList[showTaskIndex].answer.map(i => choseList[i]).join('、')
+              : choseList[taskList[showTaskIndex].answer]
+          }}</span>
         </div>
         <div class="dt_c_m_btnArea">
           <span class="dt_c_m_btn1" @click.stop="doNotKnow()">还是不太明白</span>
@@ -377,10 +435,7 @@
     </div>
     <div class="dt_isSubmit" v-if="isSubmit">
       <div class="dt_m_b_l_head">
-      <div class="dt_m_b_l_h_left">八年级>上学期>人教版</div>
-			<div class="dt_m_b_l_h_right">
-				<span @click.stop="back">返回</span>
-			</div>
+        <div class="dt_m_b_l_h_left">八年级>上学期>人教版</div>
       </div>
       <div class="dt_m_b_l_title">{{ taskMessage.title }}</div>
       <div class="dt_is_statistics">
@@ -448,7 +503,9 @@
                 <span v-if="item2.imgType == 1"
                   >{{ choseList[index2] }}<span>.</span><img :src="item2.src" @click.stop="$hevueImgPreview(item2.src)"
                 /></span>
-                <span v-else><span>{{ choseList[index2] }}.{{ item2 }}</span></span>
+                <span v-else
+                  ><span>{{ choseList[index2] }}.{{ item2 }}</span></span
+                >
               </span>
             </div>
 
@@ -482,12 +539,87 @@
         </div>
       </div>
     </div>
+    <van-action-sheet v-model="showTaskListSheet">
+      <div class="taskListArea">
+        <div class="tla_head">
+          <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M2.5 2.5C2.5 2.22386 2.72386 2 3 2H14C14.2761 2 14.5 2.22386 14.5 2.5V13.5C14.5 13.7761 14.2761 14 14 14H3C2.72386 14 2.5 13.7761 2.5 13.5V2.5ZM3.5 3V13H13.5V3H3.5Z"
+              fill="black"
+              fill-opacity="0.6"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M7.74631 5.08406L6.06066 6.76971C5.96689 6.86348 5.83972 6.91616 5.70711 6.91616C5.5745 6.91616 5.44732 6.86348 5.35355 6.76971L4.5 5.91616L5.20711 5.20905L5.70711 5.70905L7.0392 4.37695L7.74631 5.08406Z"
+              fill="black"
+              fill-opacity="0.6"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M5.9 9.39961C5.56863 9.39961 5.3 9.66824 5.3 9.99961C5.3 10.331 5.56863 10.5996 5.9 10.5996C6.23137 10.5996 6.5 10.331 6.5 9.99961C6.5 9.66824 6.23137 9.39961 5.9 9.39961ZM4.5 9.99961C4.5 9.22641 5.1268 8.59961 5.9 8.59961C6.6732 8.59961 7.3 9.22641 7.3 9.99961C7.3 10.7728 6.6732 11.3996 5.9 11.3996C5.1268 11.3996 4.5 10.7728 4.5 9.99961Z"
+              fill="black"
+              fill-opacity="0.6"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M8.5 5.5H12.5V6.5H8.5V5.5Z"
+              fill="black"
+              fill-opacity="0.6"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M8.5 9.5H12.5V10.5H8.5V9.5Z"
+              fill="black"
+              fill-opacity="0.6"
+            />
+          </svg>
+          <span>答题卡</span>
+          <div>
+            <span>{{ showTaskIndex + 1 }}</span
+            >/{{ taskList.length }}
+          </div>
+        </div>
+				<div class="tla_taskList">
+					<span
+              v-for="(item, index) in taskList"
+              :key="index"
+              :class="[isDoTask(index) ? 'isDoTask' : '', showTaskIndex == index ? 'inDoTask' : '']"
+              @click.stop="choseShowTaskIndex(index)"
+              >{{ index + 1 }}</span
+            >
+				</div>
+				<div class="tla_bottom">
+					<div class="dt_m_b_r_tl_bottom">
+              <div><span class="isDoTask"></span>已答</div>
+
+              <div><span class="inDoTask"></span>当前</div>
+
+              <div><span></span>未答</div>
+            </div>
+						<div class="tla_b_right">
+							<div>共{{ taskList.length }}道题</div>
+							<span></span>
+							<div>合计100分</div>
+						</div>
+				</div>
+      </div>
+    </van-action-sheet>
   </div>
 </template>
 
 <script>
 import { Dialog } from 'vant'
+import bar from './component/bar.vue'
 export default {
+  components: {
+    bar
+  },
   data() {
     return {
       showTaskIndex: 0,
@@ -495,10 +627,11 @@ export default {
       time2: 0,
       startTime: 0,
       timer: null,
-			userId: this.$store.state.user.userinfo.userid,
+      userId: this.$store.state.user.userinfo.userid,
       org: this.$store.state.user.userinfo.org,
       oid: this.$store.state.user.userinfo.organizeid,
       showSeekAssist: false,
+      showTaskListSheet: false,
       choseList: [
         'A',
         'B',
@@ -676,11 +809,11 @@ export default {
       ],
       taskMessage: {
         chapter: '第一章',
-        grade: '八年级',
+        grade: '小八',
         semester: '上学期',
         edition: '人教版',
         subject: '物理',
-        title: '第四课 测量平均速度'
+        title: '第四课 生物'
       },
 
       isSubmit: false,
@@ -719,7 +852,7 @@ export default {
         },
         {
           index: 4,
-          image:require('../../assets/images/pocAiClassroom/character5.png'),
+          image: require('../../assets/images/pocAiClassroom/character5.png'),
           name: '迷人的大反派5',
           personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心5'
         },
@@ -958,8 +1091,12 @@ export default {
       }
     },
     doNotKnow() {
-      this.$message.info('多想想')
-    }
+      this.$toast('多想想')
+    },
+		choseShowTaskIndex(_index){
+			this.showTaskIndex = _index;
+			this.showTaskListSheet = false;
+		}
   },
   mounted() {
     this.keepTime()
@@ -973,10 +1110,12 @@ export default {
   width: 100vw;
   height: 100vh;
   /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
-  background-color: #f0f2f5;
+  background-color: #fff;
   box-sizing: border-box;
   overflow: auto;
   position: relative;
+  box-sizing: border-box;
+  padding-top: 40px;
 }
 
 .dt_back {
@@ -989,19 +1128,21 @@ export default {
 
 .dt_main {
   width: 100vw;
-  height: 100vh;
+  height: calc(100vh - 40px);
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   align-items: center;
   margin: auto;
   overflow: hidden;
   position: relative;
+  box-sizing: border-box;
+  border-top: solid 1px #e7e7e7;
 }
 
 .dt_m_head {
   width: 100%;
-  height: 150px;
+  height: 80px;
   display: flex;
   align-items: flex-end;
   box-sizing: border-box;
@@ -1011,17 +1152,16 @@ export default {
 }
 
 .dt_m_h_left {
-  width: 50%;
+  flex: 1;
   height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
+  justify-content: center;
   box-sizing: border-box;
-  padding-bottom: 10px;
 }
 
 .dt_m_h_right {
-  width: 50%;
+  width: 150px;
   height: 100%;
 }
 
@@ -1062,6 +1202,7 @@ export default {
   margin: 10px 0;
   box-sizing: border-box;
   padding: 0 10px;
+  font-weight: bold;
 }
 
 .dt_m_h_btn {
@@ -1077,7 +1218,7 @@ export default {
 
 .dt_m_box {
   width: 100%;
-  height: calc(100% - 300px);
+  height: calc(100%);
   border-radius: 10px;
   display: flex;
 }
@@ -1088,8 +1229,8 @@ export default {
   box-sizing: border-box;
   overflow: auto;
   /* border-radius: 10px; */
-  border: 1px solid #e7e7e7;
-  background-color: #ffffff;
+  /* border: 1px solid #e7e7e7; */
+  background-color: #fff;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -1104,8 +1245,7 @@ export default {
   justify-content: space-between;
   box-sizing: border-box;
   padding: 0px;
-	font-size: 18px;
-
+  font-size: 18px;
 }
 
 .dt_m_l_h_title {
@@ -1120,7 +1260,6 @@ export default {
 
 .dt_m_l_h_changeChapter {
   font-size: 14px;
-  color: #3681fc;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1128,8 +1267,8 @@ export default {
 }
 
 .dt_m_l_h_changeChapter > svg {
-  width: 15px;
-  height: 15px;
+  width: 14px;
+  height: 14px;
   margin-right: 5px;
 }
 
@@ -1140,7 +1279,7 @@ export default {
 }
 
 .dt_m_b_right {
-  width: 300px;
+  width: 30%;
   margin-left: 30px;
   height: 100%;
   box-sizing: border-box;
@@ -1150,7 +1289,8 @@ export default {
 .dt_m_b_r_time {
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  /* background-color: #fff; */
+  background-color: #3681fc;
   padding: 10px 20px;
   display: flex;
   flex-direction: column;
@@ -1171,27 +1311,32 @@ export default {
   width: 20px;
   height: 20px;
   margin-right: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .dt_m_b_r_t_head > span {
-  font-size: 18px;
-  font-weight: bold;
+  font-size: 16px;
+  color: white;
 }
 
 .dt_m_b_r_t_showTime {
   width: 100%;
-  padding: 2% 0;
+  height: auto;
+  padding: 3px 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 8px;
-  background-color: #f2f6fc;
-  margin-top: 5px;
+  border-radius: 2px;
+  /* background-color: #f2f6fc; */
+  background-color: #ffffffe5;
+  margin-top: 10px;
 }
 
 .dt_m_b_r_t_showTime > span {
   font-size: 2em;
-  font-weight: bold;
+  /* font-weight: bold; */
   color: #0061ff;
 }
 
@@ -1360,6 +1505,7 @@ export default {
   display: flex;
   justify-content: space-around;
   align-items: center;
+	margin-left: 10px;
 }
 
 .dt_m_b_r_tl_bottom > div {
@@ -1437,11 +1583,13 @@ export default {
 
 .dt_m_b_l_task {
   width: 100%;
-  height: calc(100% - 80px);
+  height: auto;
+  max-height: calc(100% - 60px);
   overflow: auto;
   box-sizing: border-box;
   box-sizing: border-box;
   padding: 10px 20px;
+  background-color: #fff;
 }
 
 .dt_m_b_l_t_cl_item {
@@ -1518,7 +1666,7 @@ export default {
 }
 
 .dt_m_b_l_t_title {
-  font-size: 20px;
+  font-size: 18px;
   height: auto;
   width: 100%;
 }
@@ -1532,15 +1680,48 @@ export default {
   margin: 20px 0;
 }
 
+.dt_m_b_l_t_btnArea {
+  width: 100%;
+  height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.dt_m_b_l_t_btnArea > span {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f2f5;
+  border-radius: 6px;
+  font-size: 16px;
+}
+
+.dt_m_b_l_t_btnArea > span:nth-of-type(2) {
+  margin-left: 10px;
+}
+
+.dt_m_b_l_t_ba_btn1 {
+  color: #3681fc;
+}
+
+.dt_m_b_l_t_ba_btn2 {
+  background-color: #3681fc !important;
+  color: white;
+}
+
 .dt_m_b_l_bottom {
   width: 100%;
-  height: 40px;
+  height: 60px;
   display: flex;
   align-items: center;
-  background-color: #f8f9fa;
+  background-color: #fff;
   border-top: 1px solid #f0f2f5;
   justify-content: space-between;
-  padding: 0 10px;
+  padding: 0 0 0 10px;
   box-sizing: border-box;
   overflow: auto;
 }
@@ -1554,6 +1735,20 @@ export default {
   z-index: 3;
 }
 
+.dt_m_b_l_b_save {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  font-size: 16px;
+}
+
+.dt_m_b_l_b_save > svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
 .dt_m_b_l_b_seekAssist > svg {
   width: 20px;
   height: 20px;
@@ -1562,7 +1757,7 @@ export default {
 
 .dt_m_b_l_b_seekAssist > span {
   font-size: 18px;
-  text-decoration: underline;
+  /* text-decoration: underline; */
 }
 
 .dt_m_b_l_b_btnArea {
@@ -1575,22 +1770,24 @@ export default {
 
 .dt_m_b_l_b_btnArea > span {
   display: flex;
+  height: 100%;
   justify-content: center;
   align-items: center;
   justify-content: center;
-  padding: 5px 15px;
-  border-radius: 4px;
+  padding: 0px 35px;
+  /* border-radius: 4px; */
   font-size: 16px;
   cursor: pointer;
-  margin-left: 10px;
+  /* margin-left: 10px; */
   background-color: #fff;
   white-space: nowrap;
+  font-weight: bold;
   z-index: 3;
 }
 
 .dt_m_b_l_b_ba_btnPrev {
-  background-color: #e0eafb !important;
-  color: #3681fc;
+  /* background-color: #e0eafb !important; */
+  /* color: #3681fc; */
 }
 
 .dt_m_b_l_b_ba_btnNext {
@@ -1598,17 +1795,15 @@ export default {
   color: white;
 }
 
-.dt_m_b_l_b_ba_save {
-  color: #3681fc;
-  border: solid 1px #3681fc;
-  background-color: #fff;
-  box-sizing: border-box;
+.dt_m_b_l_b_ba_submit {
+  background-color: #3681fc !important;
+  color: white;
 }
 
 .dt_isSubmit {
   width: 100vw;
   margin: auto;
-  height: 100vh;
+  height: calc(100vh - 40px);
   background-color: #fff;
   overflow: auto;
   box-sizing: border-box;
@@ -1631,7 +1826,7 @@ export default {
 }
 
 .dt_is_s_star {
-	margin-top: 10px;
+  margin-top: 10px;
   transform: scale(1.4, 1.4);
 }
 
@@ -1644,7 +1839,7 @@ export default {
 }
 .dt_is_s_message > span {
   margin: 0 10px;
-	white-space: nowrap;
+  white-space: nowrap;
   font-size: 16px;
 }
 
@@ -1796,22 +1991,37 @@ export default {
   z-index: 1;
 }
 
+.dt_character2 {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.dt_character2 > img {
+  width: 150px;
+  z-index: 2;
+  left: -10px;
+  bottom: calc(100% + 40px + 8px);
+  position: absolute;
+}
+
 .dt_character > img {
   width: 300px;
   z-index: 2;
-	left: -50px;
-	top: -130%;
-	position: absolute;
+  left: -50px;
+  top: -130%;
+  position: absolute;
 }
 
 .dt_c_message {
-  width: calc(100vw - 20px);
+  width: 100vw;
   height: 200px;
   position: absolute;
-  left: 10px;
-  bottom: 10px;
+  left: 0px;
+  bottom: 0px;
   background: linear-gradient(180deg, #fafcff 0%, #e7eefe 100%);
-  border-radius: 6px;
+  /* border-radius: 6px; */
   padding: 10px 10px 10px 10px;
   box-sizing: border-box;
   position: relative;
@@ -1873,7 +2083,7 @@ export default {
 }
 
 .dt_c_m_btnArea > span {
-  padding: 5px 10px;
+  padding: 10px 30px;
   border-radius: 8px;
   font-size: 16px;
   cursor: pointer;
@@ -1890,14 +2100,14 @@ export default {
 .dt_c_m_btn2 {
   background-color: #3681fc !important;
   color: #fff;
-  padding: 5px 10px !important;
 }
 
-.dt_m_bottom {
+/* .dt_m_bottom {
   width: 100%;
   height: 150px;
+	background-color: red;
   background-color: #fff;
-}
+} */
 
 .dt_m_b_h_title {
   margin-right: 20px;
@@ -1925,4 +2135,160 @@ export default {
   width: 100%;
   height: calc(100% - 30px);
 }
+
+.dt_time {
+  font-weight: 500;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dt_t_title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+.dt_t_title > svg {
+  margin-right: 2px;
+}
+
+.dt_t_time {
+  display: flex;
+  align-items: center;
+  position: relative;
+  top: 0.5px;
+  font-weight: bold;
+  color: #0061ff;
+}
+
+.dt_m_b_l_b_answerSheet {
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+.dt_m_b_l_b_answerSheet > svg {
+  width: 22px;
+  height: 22px;
+  margin-right: 2px;
+}
+
+.dt_m_b_l_b_answerSheet > span {
+  font-size: 16px;
+}
+
+.dt_m_b_l_b_answerSheet > div {
+  font-size: 14px;
+  margin-left: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  color: #999999;
+}
+
+.dt_m_b_l_b_answerSheet > div > span {
+  color: #3681fc;
+  font-size: 16px;
+}
+
+.taskListArea {
+  width: 100%;
+  height: 60vh;
+  background-color: #fff;
+}
+
+.tla_head {
+  width: 100%;
+  height: 40px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 14px;
+}
+
+.tla_head>svg{
+	width: 18px;
+	height: 18px;
+	margin-right: 2px;
+}
+
+.tla_head>span{
+	display: flex;
+	height: 20px;
+	width: auto;
+	align-items: center;
+}
+
+.tla_head>div{
+	font-size: 12px;
+	height: 20px;
+	display: flex;
+	align-items: flex-end;
+	margin-left: 3px;
+	color: #A6A6A6;
+}
+
+.tla_head>div>span{
+	font-size: 14px;
+	color: #3681fc;
+}
+
+.tla_taskList{
+	width: 100%;
+	box-sizing: border-box;
+	padding: 30px;
+	height: calc(100% - 90px);
+}
+
+.tla_bottom{
+	width: 100%;
+	height: 50px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	box-sizing: border-box;
+	border-top: solid 1px #f2f2f2;
+}
+
+.tla_b_right{
+	width: auto;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: 0 10px;
+	color: #00000066;
+	font-size: 12px;
+}
+
+.tla_b_right>span{
+	margin: 0 7px;
+	width: 1px;
+	height: 10px;
+	background-color: #00000066;
+}
+
+.tla_taskList > span {
+  width: 45px;
+  height: 45px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 5px;
+  background-color: #fff;
+  border-radius: 4px;
+  border: solid 2px #e7e7e7;
+  float: left;
+  margin: 0 6px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  font-size: 18px;
+  /* font-weight: bold; */
+}
 </style>

src/views/pocAiClassroom/index.vue

@@ -1,10 +1,25 @@
 <template>
   <div class="pocAiClass">
-    <div class="pac_head">
+    <bar ref="barRef" tit="智能学伴">
+      <!-- <template v-slot:setting>
+        <div class="setting">
+          <div @click.stop="selfMessage">个人信息</div>
+          <span></span>
+          <div @click.stop="aiMessage">学伴设置</div>
+        </div>
+      </template>
+			<template v-slot:settingIcon>
+				<div style="width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;">
+					<svg style="width: 100%;height: 100%;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.25 12.0008C5.25 12.3986 5.40802 12.7801 5.6893 13.0614C5.97058 13.3427 6.35208 13.5007 6.74987 13.5007C7.14766 13.5007 7.52915 13.3427 7.81043 13.0614C8.09171 12.7801 8.24973 12.3986 8.24973 12.0008C8.24973 11.6031 8.09171 11.2216 7.81043 10.9403C7.52915 10.659 7.14766 10.501 6.74987 10.501C6.35208 10.501 5.97058 10.659 5.6893 10.9403C5.40802 11.2216 5.25 11.6031 5.25 12.0008Z" fill="#272636"/>
+<path d="M10.5 12.0008C10.5 12.3986 10.658 12.7801 10.9393 13.0614C11.2206 13.3427 11.6021 13.5007 11.9999 13.5007C12.3977 13.5007 12.7792 13.3427 13.0604 13.0614C13.3417 12.7801 13.4997 12.3986 13.4997 12.0008C13.4997 11.6031 13.3417 11.2216 13.0604 10.9403C12.7792 10.659 12.3977 10.501 11.9999 10.501C11.6021 10.501 11.2206 10.659 10.9393 10.9403C10.658 11.2216 10.5 11.6031 10.5 12.0008Z" fill="#272636"/>
+<path d="M15.75 12.0008C15.75 12.3986 15.908 12.7801 16.1893 13.0614C16.4706 13.3427 16.8521 13.5007 17.2499 13.5007C17.6477 13.5007 18.0292 13.3427 18.3104 13.0614C18.5917 12.7801 18.7497 12.3986 18.7497 12.0008C18.7497 11.6031 18.5917 11.2216 18.3104 10.9403C18.0292 10.659 17.6477 10.501 17.2499 10.501C16.8521 10.501 16.4706 10.659 16.1893 10.9403C15.908 11.2216 15.75 11.6031 15.75 12.0008Z" fill="#272636"/>
+</svg>
+				</div>
+			</template> -->
+    </bar>
+    <!-- <div class="pac_head">
       <div class="pac_h_left">
-        <!-- <span>八年级</span>><span>上学期</span>><span>{{
-          editionList[edition]
-        }}</span> -->
         <span>筛选</span>
       </div>
       <div class="pac_h_right">
@@ -34,16 +49,109 @@
             </span>
           </div>
         </div>
-        <!-- <span @click.stop="changeGrade()">切换年级</span>
-        <el-image
-          class="pac_h_r_avatar"
-          :src="require('../../../assets/icon/pocAiClassroom/avatar.svg')"
-        ></el-image> -->
       </div>
-    </div>
+    </div> -->
 
     <div class="pac_screen">
-      <el-select
+      <div class="pac_s_item">
+        <van-popover placement="bottom-start" v-model="showChapter" trigger="click">
+          <div class="pac_s_i_list">
+            <div
+              :class="['pac_s_i_l_item', chapter == index ? 'pac_s_i_l_itemActive' : '']"
+              v-for="(item, index) in classList"
+              :key="index"
+              @click.stop="changeChapter(index)"
+            >
+              <span v-text="item.title"></span>
+            </div>
+          </div>
+          <template #reference>
+            <span
+              >章节<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M4.37366 6.45928L5.2929 5.54004L8.83328 9.08042L12.3737 5.54004L13.2929 6.45928L8.83328 10.9189L4.37366 6.45928Z"
+                  fill="black"
+                  fill-opacity="0.4"
+                />
+              </svg>
+            </span>
+          </template>
+        </van-popover>
+      </div>
+
+      <div class="pac_s_item">
+        <van-popover placement="bottom" v-model="showSubject" trigger="click">
+          <div class="pac_s_i_list">
+            <div
+              :class="['pac_s_i_l_item', subject == item.label ? 'pac_s_i_l_itemActive' : '']"
+              v-for="(item, index) in subjectList"
+              :key="item.value"
+              @click.stop="changeSubject(item)"
+            >
+              <span v-text="item.label"></span>
+            </div>
+          </div>
+          <template #reference>
+            <span
+              >学科<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M4.37366 6.45928L5.2929 5.54004L8.83328 9.08042L12.3737 5.54004L13.2929 6.45928L8.83328 10.9189L4.37366 6.45928Z"
+                  fill="black"
+                  fill-opacity="0.4"
+                />
+              </svg>
+            </span>
+          </template>
+        </van-popover>
+      </div>
+
+      <div class="pac_s_item">
+        <van-popover placement="bottom" v-model="showEdition" trigger="click">
+          <div class="pac_s_i_list">
+            <div
+              :class="['pac_s_i_l_item', edition == item.label ? 'pac_s_i_l_itemActive' : '']"
+              v-for="(item, index) in editionList"
+              :key="item.value"
+              @click.stop="changeEdition(item)"
+            >
+              <span v-text="item.label"></span>
+            </div>
+          </div>
+          <template #reference>
+            <span
+              >版本<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M4.37366 6.45928L5.2929 5.54004L8.83328 9.08042L12.3737 5.54004L13.2929 6.45928L8.83328 10.9189L4.37366 6.45928Z"
+                  fill="black"
+                  fill-opacity="0.4"
+                />
+              </svg>
+            </span>
+          </template>
+        </van-popover>
+      </div>
+
+      <div class="pac_s_item" @click.stop="selfMessage">
+        <div class="pac_s_i_message" >
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g opacity="0.9">
+              <path
+                d="M10 11.25C11.9192 11.25 13.475 9.69419 13.475 7.775C13.475 5.85581 11.9192 4.3 10 4.3C8.08081 4.3 6.525 5.85581 6.525 7.775C6.525 9.69419 8.08081 11.25 10 11.25ZM10 10C8.77117 10 7.775 9.00383 7.775 7.775C7.775 6.54617 8.77117 5.55 10 5.55C11.2288 5.55 12.225 6.54617 12.225 7.775C12.225 9.00383 11.2288 10 10 10Z"
+                fill="black"
+                fill-opacity="0.9"
+              />
+              <path
+                d="M10 18.75C14.8325 18.75 18.75 14.8325 18.75 10C18.75 5.16751 14.8325 1.25 10 1.25C5.16751 1.25 1.25 5.16751 1.25 10C1.25 14.8325 5.16751 18.75 10 18.75ZM16.2443 14.1557C14.3435 13.0956 12.2319 12.5 9.99997 12.5C7.76802 12.5 5.65649 13.0956 3.75564 14.1557C2.96238 12.9661 2.5 11.5371 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10C17.5 11.5371 17.0376 12.9662 16.2443 14.1557ZM15.454 15.1482C14.0867 16.5963 12.1489 17.5 10 17.5C7.85112 17.5 5.91332 16.5963 4.54593 15.1482C6.22562 14.247 8.06603 13.75 9.99997 13.75C11.9339 13.75 13.7743 14.247 15.454 15.1482Z"
+                fill="black"
+                fill-opacity="0.9"
+              />
+            </g>
+          </svg>
+
+          <span>资料</span>
+        </div>
+      </div>
+      <!-- <el-select
         v-model="subject"
         class="pac_s_select"
 				style="width: 48%;"
@@ -86,7 +194,7 @@
         ></i>
       </el-input>
 
-			<span class="pac_s_reset" @click.stop="reset()">重置</span>
+			<span class="pac_s_reset" @click.stop="reset()">重置</span> -->
     </div>
     <!-- <div class="pac_subjectList">
       <span
@@ -110,7 +218,7 @@
 
     <div class="pac_box">
       <chapterCard
-        v-for="(item, index) in classList"
+        v-for="(item, index) in classList[chapter].allClass"
         :key="index"
         :data="item"
         :subjectList="subjectList"
@@ -121,24 +229,16 @@
       <div class="pac_fd_closeArea"></div>
       <div class="pac_fd_bottom">
         <div class="pac_fd_b_left">
-          <img
-            :src="
-              characterList.find(i => userInfo.choseCharacter === i.index).image
-            "
-          />
+          <img :src="characterList.find(i => userInfo.choseCharacter === i.index).image" />
         </div>
         <div class="pac_fd_b_right">
           <span class="pac_fd_b_r_characterName">{{
-            characterList.find(i=>userInfo.choseCharacter===i.index)?characterList.find(i=>userInfo.choseCharacter===i.index).name:'AI'
+            characterList.find(i => userInfo.choseCharacter === i.index)
+              ? characterList.find(i => userInfo.choseCharacter === i.index).name
+              : 'AI'
           }}</span>
-          <span class="pac_fd_b_r_closeIcon" @click.stop="showDialog = false">  
-            <svg
-              width="14"
-              height="14" 
-              viewBox="0 0 14 14"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
+          <span class="pac_fd_b_r_closeIcon" @click.stop="showDialog = false">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M7 0C3.14049 0 0 3.14001 0 7C0 10.86 3.14001 14 7 14C10.8595 14 14 10.86 14 7C14 3.14001 10.86 0 7 0ZM9.8555 9.156C10.0505 9.352 10.05 9.668 9.85451 9.863C9.75702 9.96 9.62951 10.009 9.50152 10.009C9.37301 10.009 9.24502 9.96001 9.14751 9.86201L6.9975 7.7055L4.84051 9.83951C4.74302 9.93552 4.61599 9.98401 4.48899 9.98401C4.36001 9.98401 4.2315 9.9345 4.1335 9.83551C3.9395 9.639 3.941 9.32299 4.13751 9.1285L6.292 6.9975L4.14549 4.844C3.95049 4.64849 3.951 4.332 4.14649 4.137C4.342 3.94149 4.65798 3.94251 4.85349 4.13799L7.00298 6.29399L9.15998 4.16001C9.35597 3.96552 9.67297 3.9675 9.86698 4.16401C10.0615 4.36052 10.0595 4.67701 9.86298 4.87101L7.70851 7.00199L9.8555 9.156Z"
                 fill="#E0EAFB"
@@ -146,20 +246,12 @@
             </svg>
           </span>
           <div class="pac_fd_b_r_message">
-            Hi，{{
-              userInfo.userName
-            }}同学，欢迎回来！你是否开始下一节课的学习，学习<span>【运动的快慢】</span>？
+            Hi，{{ userInfo.userName }}同学，欢迎回来！现在让我们开启第一课的学习吧!
           </div>
           <div class="pac_fd_b_r_btnArea">
-            <span class="pac_fd_b_r_ba_btn1" @click.stop="dialogBtn(3)"
-              >我想聊聊天</span
-            >
-            <span class="pac_fd_b_r_ba_btn2" @click.stop="dialogBtn(2)"
-              >复习上一课</span
-            >
-            <span class="pac_fd_b_r_ba_btn3" @click.stop="dialogBtn(1)"
-              >学习新内容</span
-            >
+            <span class="pac_fd_b_r_ba_btn1" @click.stop="dialogBtn(3)">聊聊天</span>
+            <!-- <span class="pac_fd_b_r_ba_btn2" @click.stop="dialogBtn(2)">复习上一课</span> -->
+            <span class="pac_fd_b_r_ba_btn3" @click.stop="dialogBtn(1)">好，开始学习→</span>
           </div>
         </div>
       </div>
@@ -185,280 +277,282 @@
         </div>
       </div> -->
     </div>
-		<settingsDialog ref="settingsDialogRef" :gradeList="gradeList" :characterList="characterList" @changeUserInfo="changeUserInfo" @changeCharacterInfo="changeCharacterInfo"/>
+    <!-- <settingsDialog
+      ref="settingsDialogRef"
+      :gradeList="gradeList"
+      :characterList="characterList"
+      @changeUserInfo="changeUserInfo"
+      @changeCharacterInfo="changeCharacterInfo"
+    /> -->
   </div>
 </template>
 
 <script>
-import chapterCard from "./component/chapterCard.vue";
-import settingsDialog from "./component/settingsDialog.vue";
+import chapterCard from './component/chapterCard.vue'
+// import settingsDialog from './component/settingsDialog.vue'
+import bar from './component/bar.vue'
+
+// 自定义指令，用于处理点击外部区域的事件
+const clickOutside = {
+  bind(el, binding) {
+    // 在元素上绑定一个点击事件监听器
+    el.clickOutsideEvent = function(event) {
+      // 检查点击事件是否发生在元素的内部
+      if (!(el === event.target || el.contains(event.target))) {
+        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
+        binding.value(event)
+      }
+    }
+    // 在文档上添加点击事件监听器
+    document.addEventListener('click', el.clickOutsideEvent)
+  },
+  unbind(el) {
+    // 在元素上解除点击事件监听器
+    document.removeEventListener('click', el.clickOutsideEvent)
+  }
+}
 export default {
   components: {
     chapterCard,
-		settingsDialog
+    // settingsDialog,
+    bar
+  },
+  directives: {
+    'click-outside': clickOutside // 注册自定义指令
   },
   data() {
     return {
       userId: this.$store.state.user.userinfo.userid,
       org: this.$store.state.user.userinfo.org,
       oid: this.$store.state.user.userinfo.organizeid,
-      subject: "",
-      edition: "",
-      searchValue: "",
+      chapter: 0,
+      showChapter: false,
+      subject: '中國語文',
+      showSubject: false,
+      edition: '',
+      showEdition: false,
+      searchValue: '',
       grade: 7,
       showDialog: true,
       userInfo: {
-        userName: "科科",
-				grade:7,
-				userAvatar:require("../../assets/images/pocAiClassroom/defaultAvatar.png"),
-        choseCharacter: 0,
+        userName: '科科',
+        grade: 7,
+        userAvatar: require('../../assets/images/pocAiClassroom/defaultAvatar.png'),
+        choseCharacter: 0
       },
       characterList: [
         {
           index: 0,
-          image: require("../../assets/images/pocAiClassroom/character1.png"),
-					name:"圆鼓鼓的大胖鱼",
-					personality:"心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心",  
+          image: require('../../assets/images/pocAiClassroom/character1.png'),
+          name: '圆鼓鼓的大胖鱼',
+          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心'
         },
         {
           index: 1,
-          image: require("../../assets/images/pocAiClassroom/character2.png"),
-					name:"迷人的大反派2",
-					personality:"心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心2",  
+          image: require('../../assets/images/pocAiClassroom/character2.png'),
+          name: '迷人的大反派2',
+          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心2'
         },
         {
           index: 2,
-          image: require("../../assets/images/pocAiClassroom/character3.png"),
-					name:"迷人的大反派3",
-					personality:"心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心3",  
+          image: require('../../assets/images/pocAiClassroom/character3.png'),
+          name: '迷人的大反派3',
+          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心3'
         },
         {
           index: 3,
-          image: require("../../assets/images/pocAiClassroom/character4.png"),
-					name:"迷人的大反派4",
-					personality:"心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心4",  
+          image: require('../../assets/images/pocAiClassroom/character4.png'),
+          name: '迷人的大反派4',
+          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心4'
         },
         {
           index: 4,
-          image: require("../../assets/images/pocAiClassroom/character5.png"),
-					name:"迷人的大反派5",
-					personality:"心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心5",  
+          image: require('../../assets/images/pocAiClassroom/character5.png'),
+          name: '迷人的大反派5',
+          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心5'
         },
         {
           index: 5,
-          image: require("../../assets/images/pocAiClassroom/character6.png"),
-					name:"迷人的大反派6",
-					personality:"心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心6",  
+          image: require('../../assets/images/pocAiClassroom/character6.png'),
+          name: '迷人的大反派6',
+          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心6'
         }
       ],
-      gradeList: [
-        "一年级",
-        "二年级",
-        "三年级",
-        "四年级",
-        "五年级",
-        "六年级",
-        "七年级",
-        "八年级",
-        "九年级"
-      ],
+      // gradeList: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级'],
+			gradeList: ['小一', '小二', '小三', '小四', '小五', '小六', '中一', '中二', '中三','中四','中五','中六'],
       subjectList: [
-        { value: 0, label: "语文" },
-        { value: 1, label: "数学" },
-        { value: 2, label: "英语" },
-        { value: 3, label: "物理" },
-        { value: 4, label: "化学" },
-        { value: 5, label: "生物" },
-        { value: 6, label: "历史" },
-        { value: 7, label: "地理" },
-        { value: 8, label: "政治" }
+        // { value: 0, label: '语文' },
+        // { value: 1, label: '数学' },
+        // { value: 2, label: '英语' },
+        // { value: 3, label: '物理' },
+        // { value: 4, label: '化学' },
+        // { value: 5, label: '生物' },
+        // { value: 6, label: '历史' },
+        // { value: 7, label: '地理' },
+        // { value: 8, label: '政治' }
+				{ value: 0, label: '中國語文' },
+        { value: 1, label: '英國語文 ' },
+        { value: 2, label: '數學' },
+        { value: 3, label: '公民與社會發展' },
+        { value: 4, label: '科學' },
+        { value: 5, label: '物理' },
+        { value: 6, label: '化學' },
+        { value: 7, label: '生物' },
+        { value: 8, label: '中國歷史' }
       ],
       editionList: [
-        { value: 0, label: "人教版" },
-        { value: 1, label: "教科版" },
-        { value: 2, label: "北师大版" },
-        { value: 3, label: "苏教版" },
-        { value: 4, label: "沪教版" },
-        { value: 5, label: "浙教版" },
-        { value: 6, label: "冀教版" },
-        { value: 7, label: "鲁教版" },
-        { value: 8, label: "人教A版" },
-        { value: 9, label: "人教B版" }
+        { value: 0, label: '人教版' },
+        { value: 1, label: '教科版' },
+        { value: 2, label: '北师大版' },
+        { value: 3, label: '苏教版' },
+        { value: 4, label: '沪教版' },
+        { value: 5, label: '浙教版' },
+        { value: 6, label: '冀教版' },
+        { value: 7, label: '鲁教版' },
+        { value: 8, label: '人教A版' },
+        { value: 9, label: '人教B版' }
       ],
       classList: [
         {
-          title: "第一章",
+          title: '第一章：科學入門',
           allClass: [
             {
-              title: "长度和时间的测量",
+              title: '學習科學',
               type: 0,
               isComplete: true,
               subject: 0,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741724834676182.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741724834676182.png'
             },
             {
-              title: "运动的描述",
+              title: '科學的實踐',
               type: 0,
               subject: 0,
               isComplete: true,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.png'
             },
             {
-              title: "运动的快慢",
+              title: '實驗室安全',
               type: 0,
               subject: 0,
               isComplete: false,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png'
             },
             {
-              title: "测量平均速度",
+              title: '實驗室儀器及基本實驗技巧',
               type: 0,
               subject: 0,
               isComplete: false,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751724834771676.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751724834771676.png'
             },
             {
-              title: "单元测试",
+              title: '綜合練習',
               type: 1,
               subject: 0,
               isComplete: false,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png'
             }
           ]
         },
         {
-          title: "第二章",
+          title: '第二章：水',
           allClass: [
             {
-              title: "长度和时间的测量",
+              title: '水的物熊變化',
               type: 0,
               subject: 0,
               isComplete: true,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png'
             },
             {
-              title: "运动的描述",
+              title: '水循環',
               type: 0,
               subject: 0,
               isComplete: true,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8771724834845597.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8771724834845597.png'
             },
             {
-              title: "运动的快慢",
+              title: '溶解',
               type: 0,
               subject: 0,
               isComplete: true,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8781724834847977.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8781724834847977.png'
             },
             {
-              title: "测量平均速度",
+              title: '水的淨化',
               type: 0,
               subject: 0,
               isComplete: true,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8791724834873373.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8791724834873373.png'
             },
             {
-              title: "长度和时间的测量",
+              title: '食水的進一步處理',
               type: 0,
               subject: 0,
               isComplete: false,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png'
             },
             {
-              title: "运动的描述",
+              title: '節約用水和水污染',
               type: 0,
               subject: 0,
               isComplete: false,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8771724834845597.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8771724834845597.png'
             },
             {
-              title: "运动的快慢",
-              type: 0,
-              subject: 0,
-              isComplete: false,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png"
-            },
-            {
-              title: "测量平均速度",
-              type: 0,
-              subject: 0,
-              isComplete: false,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%87101724834875748.png"
-            },
-            {
-              title: "单元测试",
+              title: '綜合練習',
               type: 1,
               subject: 0,
               isComplete: false,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png"
-            }
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png'
+            },
           ]
         },
         {
-          title: "第三章",
+          title: '第三章：观察生物',
           allClass: [
             {
-              title: "长度和时间的测量",
+              title: '生物',
               type: 0,
               isComplete: true,
               subject: 0,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741724834676182.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741724834676182.png'
             },
             {
-              title: "运动的描述",
+              title: '生物的分類',
               type: 0,
               subject: 0,
               isComplete: true,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.png'
             },
             {
-              title: "运动的快慢",
+              title: '檢索表',
               type: 0,
               subject: 0,
               isComplete: false,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721724834685472.png'
             },
             {
-              title: "测量平均速度",
+              title: '生物多樣性',
               type: 0,
               subject: 0,
               isComplete: false,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751724834771676.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751724834771676.png'
             },
             {
-              title: "单元测试",
+              title: '綜合練習',
               type: 1,
               subject: 0,
               isComplete: false,
-              image:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png"
+              image: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png'
             }
           ]
         }
       ]
-    };
+    }
   },
   methods: {
     changeGrade() {
-      this.$refs.settingsDialogRef.open(this.userInfo);
+      this.$refs.settingsDialogRef.open(this.userInfo)
     },
     // changeSubject(newIndex) {
     //   if (this.subject == newIndex) return;
@@ -470,48 +564,64 @@ export default {
     // },
     dialogBtn(type = 0) {
       if (type == 0) {
-        this.showDialog = false;
+        this.showDialog = false
       } else if (type == 1) {
-        this.$router.push(
-          `/pocClass`
-        );
+        this.$router.push(`/pocClass`)
         // console.log("开始学习新的内容");
       } else if (type == 2) {
-        this.$router.push(
-          `/pocClass`
-        );
+        this.$router.push(`/pocClass`)
         // console.log("复习上一节课");
       } else if (type == 3) {
-        this.$router.push(
-          `/pocAiChat`
-        );
+        this.$router.push(`/pocAiChat`)
       }
     },
-		reset(){
-			this.subject="";
-      this.edition="";
-      this.searchValue="";
-		},
+    reset() {
+      this.subject = ''
+      this.edition = ''
+      this.searchValue = ''
+    },
     settings() {
-      this.$refs.settingsDialogRef.open(this.userInfo);
+      this.$refs.settingsDialogRef.open(this.userInfo)
     },
     search() {
-      console.log("搜索", this.searchValue);
+      console.log('筛选', this.chapter, this.subject, this.edition)
+    },
+    changeUserInfo(data) {
+      this.userInfo.userName = data.userName
+      this.userInfo.grade = data.grade
+      this.$refs.settingsDialogRef.close()
+    },
+    changeCharacterInfo(data) {
+      this.userInfo.choseCharacter = data.index
+      this.$refs.settingsDialogRef.close()
+    },
+    // 个人信息
+    selfMessage() {
+      this.$router.push('/pocSelfMessage')
+    },
+    aiMessage() {
+      console.log('渠道学伴设置')
     },
-		changeUserInfo(data){
-			this.userInfo.userName = data.userName;
-			this.userInfo.grade = data.grade;
-			this.$refs.settingsDialogRef.close();
-		},
-		changeCharacterInfo(data){
-			this.userInfo.choseCharacter = data.index;
-			this.$refs.settingsDialogRef.close();
-		}
+    changeChapter(index) {
+      this.chapter = index
+      this.showChapter = false
+      console.log('切换章节', index)
+    },
+    changeSubject(item) {
+      this.subject = item.label
+      this.showSubject = false
+      console.log('切换科目', item)
+    },
+    changeEdition(item) {
+      this.edition = item.label
+      this.showEdition = false
+      console.log('切换版本', item)
+    }
   },
   mounted() {
-		// window.addEventListener("orientationchange",()=>{alert("切换了方向")})
-	}
-};
+    // window.addEventListener("orientationchange",()=>{alert("切换了方向")})
+  }
+}
 </script>
 
 <style scoped>
@@ -522,7 +632,7 @@ export default {
   /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
   background-color: #f0f2f5;
   box-sizing: border-box;
-  padding: 0 20px;
+  padding-top: 40px;
 }
 
 .pac_head {
@@ -533,6 +643,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
+  margin-top: 50px;
 }
 
 .pac_h_left {
@@ -555,7 +666,7 @@ export default {
 }
 
 .p_h_r_box {
-	width: 40px;
+  width: 40px;
   height: 40px;
   border-radius: 8px;
 }
@@ -590,26 +701,91 @@ export default {
 .pac_screen {
   width: 100%;
   height: auto;
-  margin-top: 10px;
+  margin-top: 00px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.pac_s_item {
+  flex: 1;
+  height: 40px;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+	box-sizing: border-box;
+}
+
+.pac_s_i_message{
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 16px;
+	margin: 10px 0;
+	box-sizing: border-box;
+	border-left: 1px solid #E7E7E7;
+}
+
+.pac_s_i_message>svg{
+	margin-right: 5px;
+}
+
+.pac_s_item > span {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+}
+
+.pac_s_i_list {
+  width: auto;
+  height: auto;
+  padding: 10px;
+  max-height: 70vh;
+	box-sizing: border-box;
+  overflow: auto;
+}
+
+.pac_s_i_l_item {
+  width: auto;
+  height: 35px;
+  border-radius: 4px;
   display: flex;
-	flex-wrap: wrap;
   align-items: center;
-	justify-content: space-between;
+  font-size: 16px;
+  justify-content: center;
+  margin: 5px 0;
+	padding: 0 5px;
+  transition: 0.3s;
 }
 
-.pac_s_reset{
-	padding: 7px 12px;
-	background-color: #E2EEFF;
-	color: #3681FC;
-	font-size: 18px;
-	border-radius: 8px;
-	cursor: pointer;
-	margin-bottom: 10px;
+.pac_s_i_l_itemActive {
+  background-color: #3e86fd !important;
+  color: #fff !important;
+}
+
+.pac_s_i_l_item:active {
+  background-color: #e7e7e7;
+}
+
+.pac_s_reset {
+  padding: 7px 12px;
+  background-color: #e2eeff;
+  color: #3681fc;
+  font-size: 18px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin-bottom: 10px;
 }
 
 .pac_s_select {
   height: 40px;
-	margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .pac_s_select >>> .el-input {
@@ -631,7 +807,11 @@ export default {
   width: 100%;
   height: auto;
   /* margin-top: 20px; */
-	overflow: auto;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .pac_fd_left {
@@ -718,18 +898,14 @@ export default {
 .pac_fd_closeArea {
   width: 100%;
   height: 100%;
-  background: linear-gradient(
-    180deg,
-    rgba(32, 51, 80, 0) 0%,
-    rgba(73, 116, 182, 0.6) 100%
-  );
+  background: linear-gradient(180deg, rgba(32, 51, 80, 0) 0%, rgba(73, 116, 182, 0.6) 100%);
 }
 
 .pac_fd_bottom {
   width: 100%;
   height: 150px;
   position: absolute;
-  bottom: 10px;
+  bottom: 0px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -743,24 +919,24 @@ export default {
   align-items: center;
   position: absolute;
   z-index: 1;
-	left: 0;
-	bottom: 100%;
+  left: 0;
+  bottom: 100%;
 }
 
 .pac_fd_b_left > img {
   position: absolute;
   bottom: 0px;
-	left: 0px;
+  left: 0px;
   width: 300px;
-  transform: translate(-60px,80px);
+  transform: translate(50px, 80px);
 }
 
 .pac_fd_b_right {
-  width: 96%;
+  width: 100%;
 
   height: 100%;
   background: linear-gradient(180deg, #fafcff 0%, #e7eefe 100%);
-  border-radius: 6px;
+  /* border-radius: 6px; */
   padding: 32px 24px 24px 24px;
   box-sizing: border-box;
   z-index: 2;
@@ -779,18 +955,18 @@ export default {
   top: -20px;
 }
 
-.pac_fd_b_r_closeIcon{
-	width: 25px;
-	height: 25px;
-	position: absolute;
-	right: 10px;
-	top: 10px;
+.pac_fd_b_r_closeIcon {
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  right: 10px;
+  top: 10px;
 }
 
-.pac_fd_b_r_closeIcon>svg{
-	width: 100%;
-	height: 100%;
-	cursor: pointer;
+.pac_fd_b_r_closeIcon > svg {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
 }
 
 .pac_fd_b_r_message {
@@ -815,12 +991,12 @@ export default {
 }
 
 .pac_fd_b_r_btnArea > span {
-  padding: 5px 10px;
+  padding: 10px 30px;
   border-radius: 6px;
   font-size: 14px;
   cursor: pointer;
-  margin-left: 5px;
-	white-space: nowrap;
+  margin-left: 20px;
+  white-space: nowrap;
   cursor: pointer;
   background-color: #fdfeff;
   box-sizing: border-box;
@@ -839,4 +1015,47 @@ export default {
   background-color: #3681fc !important;
   color: white;
 }
+
+.setting {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  position: absolute;
+  top: 100%;
+  right: 10px;
+  box-sizing: border-box;
+  padding: 10px 10px;
+  background-color: #fff;
+  box-shadow: 0px 8px 10px -5px #00000014;
+
+  box-shadow: 0px 16px 24px 2px #0000000a;
+
+  box-shadow: 0px 6px 30px 5px #0000000d;
+  border-radius: 3px;
+}
+.setting > div {
+  width: 100%;
+  height: 40px;
+  font-size: 16px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  transition: 0.3s;
+}
+
+.setting > div:active {
+  background-color: #f0f2f5;
+}
+
+.setting > span {
+  width: 100%;
+  height: 1px;
+  margin: 5px 0;
+  background-color: #e7e7e7;
+}
 </style>

src/views/pocAiClassroom/pocClass.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="chatArea">
+		<bar :backPage="1" :tit="'物体的运动课程'"/>
 		<iframe ref="iframeRef" class="ca_iframe" allow="camera *; microphone *;display-capture;midi;encrypted-media;" src="https://beta.cloud.cocorobo.cn/aigpt/#/js"></iframe>
   </div>
 </template>
 
 <script>
-
+import bar from './component/bar.vue';
 export default {
-
+	components:{
+		bar
+	},
   data() {
     return {
 			userId: this.$store.state.user.userinfo.userid,
@@ -28,6 +31,8 @@ export default {
 .chatArea{
 	width: 100vw;
 	height: 100vh;
+	box-sizing: border-box;
+	padding-top: 40px;
 	overflow: hidden;
 }
 

src/views/pocAiClassroom/selfMessage.vue

@@ -0,0 +1,497 @@
+<template>
+  <div class="selfMessage">
+    <bar :backPage="1" tit="资料编辑"></bar>
+    <div class="sm_head">
+      <span :class="[type == 0 ? 'sm_h_active' : '']" @click.stop="type = 0">个人信息</span>
+      <span :class="[type == 1 ? 'sm_h_active' : '']" @click.stop="type = 1">学伴资料</span>
+    </div>
+    <div class="sm_form" v-if="type == 0">
+      <div class="sm_f_item">
+        <div class="sm_f_item_label">头像</div>
+        <div class="sm_f_item_middle"></div>
+        <div class="sm_f_item_right">
+          <van-image class="sm_f_avatar" round :src="userInfo.userAvatar" />
+        </div>
+      </div>
+      <div class="sm_f_item">
+        <div class="sm_f_item_label">姓名<span>*</span></div>
+        <div class="sm_f_item_middle">
+          <el-input class="sm_f_input" v-model="userInfo.userName" placeholder="请输入姓名" maxlength="10"></el-input>
+        </div>
+        <div class="sm_f_item_right"></div>
+      </div>
+      <div class="sm_f_item">
+        <div class="sm_f_item_label">生日<span>*</span></div>
+        <div class="sm_f_item_middle" @click.stop="showTimeFn()">
+          <span>{{ userInfo.birthday }}</span>
+        </div>
+        <div class="sm_f_item_right" @click.stop="showTimeFn()">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M15 4.5H9L9 2.25H7.5L7.5 4.5H4.5C3.67157 4.5 3 5.17157 3 6V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V6C21 5.17157 20.3284 4.5 19.5 4.5H16.5V2.25H15L15 4.5ZM7.5 7.5L9 7.5V6H15L15 7.5L16.5 7.5V6H19.5V9H4.5V6H7.5L7.5 7.5ZM4.5 10.5H19.5V19.5H4.5L4.5 10.5Z"
+              fill="black"
+              fill-opacity="0.4"
+            />
+          </svg>
+        </div>
+      </div>
+      <div class="sm_f_item">
+        <div class="sm_f_item_label">手机号<span>*</span></div>
+        <div class="sm_f_item_middle">
+          <el-input class="sm_f_input" v-model="userInfo.phone" placeholder="请输入姓名" maxlength="11"></el-input>
+        </div>
+        <div class="sm_f_item_right"></div>
+      </div>
+      <div class="sm_f_item">
+        <div class="sm_f_item_label">年级</div>
+        <div class="sm_f_item_middle" @click.stop="showGradeFn()">
+          <span>{{ gradeList[userInfo.grade] }}</span>
+        </div>
+        <div class="sm_f_item_right" @click.stop="showGradeFn()">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M9.6907 18.6885L8.31184 17.3096L13.6224 11.999L8.31184 6.68848L9.6907 5.30962L16.3801 11.999L9.6907 18.6885Z"
+              fill="black"
+              fill-opacity="0.4"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="sm_form" v-if="type == 1">
+      <div class="sm_f_characterList">
+        <el-carousel
+          :interval="4000"
+          type="card"
+          height="200px"
+          :autoplay="false"
+          :initial-index="userInfo.choseCharacter"
+          indicator-position="none"
+          @change="changeCharacter"
+        >
+          <el-carousel-item v-for="(item, index) in characterList" :key="index">
+            <div class="characterCard">
+              <el-image class="cc_image" :src="item.image" style="height: 100%;"></el-image>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+
+      <div class="sm_f_item">
+        <div class="sm_f_item_label">昵称<span>*</span></div>
+        <div class="sm_f_item_middle">
+          <span v-text="characterList[userInfo.choseCharacter].name"></span>
+          <!-- <el-input class="sm_f_input" v-model="" placeholder="请输入姓名" maxlength="10"></el-input> -->
+        </div>
+        <div class="sm_f_item_right">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            @click.stop="changeCharacterName"
+          >
+            <path
+              d="M11.2731 2.02782C11.4941 1.9002 11.7448 1.83301 12 1.83301C12.2552 1.83301 12.5059 1.9002 12.7269 2.02782L20.2731 6.38456C20.4941 6.51217 20.6776 6.6957 20.8052 6.9167C20.9328 7.1377 20.9999 7.38839 21 7.64358V16.3572C20.9999 16.6124 20.9328 16.8631 20.8052 17.0841C20.6776 17.3051 20.4941 17.4887 20.2731 17.6163L12.7269 21.973C12.5059 22.1006 12.2552 22.1678 12 22.1678C11.7448 22.1678 11.4941 22.1006 11.2731 21.973L3.72689 17.6163C3.5059 17.4887 3.32239 17.3051 3.19479 17.0841C3.0672 16.8631 3.00002 16.6124 3 16.3572V7.64358C3.00002 7.38839 3.0672 7.1377 3.19479 6.9167C3.32239 6.6957 3.5059 6.51217 3.72689 6.38456L11.2731 2.02782Z"
+              fill="#C4D4F7"
+            />
+            <path
+              d="M3.15796 6.98453C3.24076 6.82184 3.35339 6.67617 3.49 6.5551C5.03752 5.69868 9.79477 2.91148 11.4447 1.94322C11.6506 1.85813 11.8733 1.8215 12.0957 1.83616C12.318 1.85083 12.534 1.91639 12.7269 2.0278L20.2731 6.38454C20.4953 6.51279 20.6795 6.69756 20.8071 6.92007L12.9276 11.3021C12.6467 11.4583 12.3316 11.5426 12.0103 11.5476C11.6889 11.5526 11.3713 11.478 11.0858 11.3306C9.00891 10.2565 4.10026 7.69391 3.15796 6.98453Z"
+              fill="#DFEDFD"
+            />
+            <path
+              d="M12.0151 22.1677L12.0085 13.1582C12.0083 12.7483 12.1177 12.3458 12.3255 11.9925C12.5333 11.6391 12.8319 11.3478 13.1903 11.1489L20.807 6.91992C20.9334 7.14013 21 7.38965 20.9999 7.64359V16.3573C20.9999 16.6124 20.9327 16.8631 20.8051 17.0841C20.6775 17.3051 20.494 17.4887 20.273 17.6163L12.7268 21.973C12.5103 22.0981 12.2651 22.1652 12.0151 22.1677Z"
+              fill="#AAB5E3"
+            />
+            <path
+              d="M3.01538 7.43225C3.04036 7.2619 3.09543 7.09736 3.17801 6.94629L12.0077 11.8051V22.1674C11.787 22.1686 11.5688 22.1195 11.3699 22.0239L3.60334 17.5359C3.44558 17.4221 3.31225 17.2778 3.21126 17.1115C3.11027 16.9452 3.04366 16.7603 3.01538 16.5679V7.43225Z"
+              fill="#C3D3F8"
+            />
+            <path
+              d="M10.9111 6.5732C10.9111 6.80422 11.0258 7.02577 11.23 7.18913C11.4342 7.35248 11.7112 7.44425 11.9999 7.44425C12.2887 7.44425 12.5657 7.35248 12.7699 7.18913C12.9741 7.02577 13.0888 6.80422 13.0888 6.5732C13.0888 6.34218 12.9741 6.12063 12.7699 5.95727C12.5657 5.79392 12.2887 5.70215 11.9999 5.70215C11.7112 5.70215 11.4342 5.79392 11.23 5.95727C11.0258 6.12063 10.9111 6.34218 10.9111 6.5732Z"
+              fill="#3A4971"
+            />
+            <path
+              d="M10.9194 6.67992C10.938 6.21208 11.4185 5.83691 12.0076 5.83691C12.563 5.83691 13.0219 6.17035 13.0883 6.60039C13.0697 7.06815 12.5892 7.4434 12 7.4434C11.4446 7.4434 10.9857 7.10996 10.9194 6.67992Z"
+              fill="#4B5C83"
+            />
+            <path
+              d="M18.5298 10.057C18.8915 9.84616 19.6421 9.66594 19.6392 10.3099C19.6364 10.9443 19.035 11.5532 18.5186 11.8471C18.1619 12.0501 17.404 12.2318 17.4092 11.5941C17.4143 10.9637 18.0203 10.3539 18.5298 10.057Z"
+              fill="#3A4971"
+            />
+            <path
+              d="M17.4165 11.7022C17.4378 11.0813 18.0341 10.4846 18.5368 10.1922C18.8791 9.99308 19.5616 9.82392 19.6386 10.3416C19.6166 10.9646 19.0266 11.5584 18.5186 11.8475C18.1836 12.0381 17.4949 12.2099 17.4165 11.7022Z"
+              fill="#4B5C83"
+            />
+            <path
+              d="M16.7222 13.9474C17.0843 13.7443 17.8388 13.5725 17.8341 14.2113C17.8295 14.8398 17.2206 15.4343 16.7058 15.716C16.3487 15.9113 15.5867 16.0844 15.5938 15.4521C15.6008 14.8276 16.2143 14.2321 16.7222 13.9474Z"
+              fill="#3A4971"
+            />
+            <path
+              d="M15.6008 15.5587C15.6239 14.9436 16.2277 14.3609 16.7288 14.0805C17.0692 13.8901 17.7549 13.728 17.8337 14.2371C17.8128 14.856 17.2135 15.4381 16.7058 15.7159C16.3705 15.8993 15.6781 16.0631 15.6008 15.5587Z"
+              fill="#4B5C83"
+            />
+            <path
+              d="M14.8977 17.7686C15.2602 17.5733 16.0189 17.4099 16.0123 18.0434C16.0058 18.6663 15.389 19.2462 14.8762 19.5157C14.5189 19.7034 13.7526 19.8679 13.7616 19.2409C13.7704 18.6221 14.3917 18.0412 14.8977 17.7686Z"
+              fill="#3A4971"
+            />
+            <path
+              d="M13.7683 19.3461C13.7931 18.7368 14.4047 18.1683 14.904 17.8998C15.2447 17.7166 15.9341 17.5624 16.0117 18.0682C15.9891 18.6815 15.3821 19.2494 14.8762 19.5152C14.5407 19.6914 13.8444 19.8473 13.7683 19.3461Z"
+              fill="#4B5C83"
+            />
+            <path
+              d="M5.1496 10.3755C5.70246 10.649 6.12161 11.318 6.11186 11.9369C6.10288 12.5085 5.62825 12.776 5.12513 12.5196C4.5795 12.2417 4.15852 11.5734 4.16288 10.9583C4.16697 10.3849 4.6484 10.1275 5.1496 10.3755Z"
+              fill="#3A4971"
+            />
+            <path
+              d="M6.10286 12.0553C6.03448 12.5442 5.59207 12.7575 5.1251 12.5196C4.62041 12.2625 4.22234 11.6715 4.16895 11.0974C4.2334 10.6074 4.6813 10.4017 5.1467 10.6328C5.65757 10.8865 6.0539 11.4782 6.10286 12.0553Z"
+              fill="#4B5C83"
+            />
+            <path
+              d="M5.10245 14.4929C5.64904 14.7788 6.05652 15.4549 6.04685 16.0727C6.03796 16.6392 5.57439 16.9043 5.07798 16.637C4.53862 16.3466 4.12914 15.6715 4.13358 15.0572C4.13759 14.4889 4.60778 14.2341 5.10245 14.4929Z"
+              fill="#3A4971"
+            />
+            <path
+              d="M6.03786 16.1904C5.97079 16.6747 5.53849 16.8849 5.07788 16.6369C4.5792 16.3685 4.19158 15.771 4.1394 15.1969C4.20256 14.7117 4.64026 14.5091 5.09939 14.7502C5.60434 15.0153 5.99022 15.6135 6.03786 16.1904Z"
+              fill="#4B5C83"
+            />
+            <path
+              d="M9.18346 12.3717C9.74163 12.6479 10.147 13.3312 10.1266 13.9529C10.1078 14.5246 9.6345 14.8172 9.12066 14.5555C8.56989 14.2748 8.16242 13.5924 8.17766 12.9743C8.19177 12.4007 8.67137 12.1183 9.18346 12.3717Z"
+              fill="#3A4971"
+            />
+            <path
+              d="M10.1154 14.0737C10.0385 14.5644 9.59703 14.7981 9.12074 14.5555C8.61178 14.2962 8.22512 13.6937 8.1814 13.1159C8.25456 12.6241 8.70124 12.3981 9.17605 12.6339C9.69145 12.8898 10.0761 13.493 10.1154 14.0737Z"
+              fill="#4B5C83"
+            />
+            <path
+              d="M9.06292 16.5642C9.61473 16.8528 10.0086 17.5431 9.98815 18.1638C9.9696 18.7302 9.50707 19.0208 9.00012 18.7479C8.45579 18.4548 8.05973 17.7655 8.07488 17.1483C8.08891 16.5798 8.55753 16.2998 9.06292 16.5642Z"
+              fill="#3A4971"
+            />
+            <path
+              d="M9.97725 18.2839C9.90164 18.77 9.47012 19.0009 9.00027 18.748C8.49741 18.4773 8.12112 17.8684 8.07861 17.2907C8.15048 16.8035 8.58705 16.5804 9.05559 16.8264C9.5648 17.0937 9.93909 17.7034 9.97725 18.2839Z"
+              fill="#4B5C83"
+            />
+          </svg>
+        </div>
+      </div>
+
+      <div class="sm_f_item" style="align-items: flex-start;">
+        <div class="sm_f_item_label">性格<span>*</span></div>
+        <div class="sm_f_item_middle">
+          <van-field
+            v-model="characterList[userInfo.choseCharacter].personality"
+            autosize
+            readonly
+            type="textarea"
+            placeholder="请输入性格"
+          />
+          <!-- <el-input class="sm_f_input" v-model="" placeholder="请输入姓名" maxlength="10"></el-input> -->
+        </div>
+        <div class="sm_f_item_right"></div>
+      </div>
+    </div>
+
+    <div class="sm_bottom">
+      <div>返回</div>
+      <div class="sm_b_save" v-if="type == 0">保存修改</div>
+      <div class="sm_b_save" v-if="type == 1">更新学伴设置</div>
+    </div>
+
+    <van-action-sheet v-model="showTime" title="生日">
+      <van-datetime-picker
+        v-model="showTimeValue"
+        type="date"
+        title=""
+        :min-date="minDate"
+        :max-date="maxDate"
+        :formatter="formatter"
+        @confirm="onConfirmTime"
+        @cancel="onCancelTime"
+      />
+    </van-action-sheet>
+
+    <van-action-sheet v-model="showGrade" title="年级">
+      <van-picker :show-toolbar="true" :columns="gradeList" @confirm="onConfirmGrade" @cancel="onCancelGrade" />
+    </van-action-sheet>
+  </div>
+</template>
+
+<script>
+import bar from './component/bar.vue'
+export default {
+  components: {
+    bar
+  },
+  data() {
+    return {
+      type: 0,
+      userInfo: {
+        userName: '科科',
+        grade: 7,
+        userAvatar: require('../../assets/images/pocAiClassroom/defaultAvatar.png'),
+        choseCharacter: 0,
+        phone: '19128326542',
+        birthday: '2004-02-26'
+      },
+			gradeList: ['小一', '小二', '小三', '小四', '小五', '小六', '中一', '中二', '中三','中四','中五','中六'],
+      subjectList: [
+        // { value: 0, label: '语文' },
+        // { value: 1, label: '数学' },
+        // { value: 2, label: '英语' },
+        // { value: 3, label: '物理' },
+        // { value: 4, label: '化学' },
+        // { value: 5, label: '生物' },
+        // { value: 6, label: '历史' },
+        // { value: 7, label: '地理' },
+        // { value: 8, label: '政治' }
+				{ value: 0, label: '中國語文' },
+        { value: 1, label: '英國語文 ' },
+        { value: 2, label: '數學' },
+        { value: 3, label: '公民與社會發展' },
+        { value: 4, label: '科學' },
+        { value: 5, label: '物理' },
+        { value: 6, label: '化學' },
+        { value: 7, label: '生物' },
+        { value: 8, label: '中國歷史' }
+      ],
+      // gradeList: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级'],
+      showTime: false,
+      showTimeValue: '',
+      showGrade: false,
+      minDate: new Date(1949, 10, 1),
+      maxDate: new Date(),
+      characterList: [
+        {
+          index: 0,
+          image: require('../../assets/images/pocAiClassroom/character1.png'),
+          name: '圆鼓鼓的大胖鱼',
+          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心'
+        },
+        {
+          index: 1,
+          image: require('../../assets/images/pocAiClassroom/character2.png'),
+          name: '迷人的大反派2',
+          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心2'
+        },
+        {
+          index: 2,
+          image: require('../../assets/images/pocAiClassroom/character3.png'),
+          name: '迷人的大反派3',
+          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心3'
+        },
+        {
+          index: 3,
+          image: require('../../assets/images/pocAiClassroom/character4.png'),
+          name: '迷人的大反派4',
+          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心4'
+        },
+        {
+          index: 4,
+          image: require('../../assets/images/pocAiClassroom/character5.png'),
+          name: '迷人的大反派5',
+          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心5'
+        },
+        {
+          index: 5,
+          image: require('../../assets/images/pocAiClassroom/character6.png'),
+          name: '迷人的大反派6',
+          personality: '心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心6'
+        }
+      ]
+    }
+  },
+  methods: {
+    onConfirmTime(value) {
+      let date = new Date(value)
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      // const hours = String(date.getHours()).padStart(2, '0')
+      // const minutes = String(date.getMinutes()).padStart(2, '0')
+      // const seconds = String(date.getSeconds()).padStart(2, '0')
+      this.userInfo.birthday = `${year}-${month}-${day}`
+      // this.bmData.jsonData.time = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+      this.showTime = false
+    },
+    onCancelTime() {
+      this.showTime = false
+    },
+    showTimeFn() {
+      this.showTimeValue = new Date(this.userInfo.birthday)
+      this.showTime = true
+    },
+    onConfirmGrade(value) {
+      let _index = this.gradeList.findIndex(i => i == value)
+      this.userInfo.grade = _index
+      this.showGrade = false
+    },
+    onCancelGrade() {
+      this.showGrade = false
+    },
+    showGradeFn() {
+      this.showGrade = true
+    },
+    formatter(type, val) {
+      if (type === 'year') {
+        return val + '年'
+      }
+      if (type === 'month') {
+        return val + '月'
+      }
+      if (type === 'day') {
+        return val + '日'
+      }
+    },
+    changeCharacterName() {},
+    changeCharacter(index) {
+      this.userInfo.choseCharacter = index
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.selfMessage {
+  width: 100vw;
+  height: 100vh;
+  padding-top: 40px;
+  box-sizing: border-box;
+  .sm_head {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    border-top: solid 1px #f0f0f0;
+    .sm_h_active {
+      &::after {
+        content: '';
+        width: 100%;
+        height: 2px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: #3681fc;
+      }
+    }
+    span {
+      width: 40%;
+      height: 80%;
+      margin: 0 10px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 18px;
+      position: relative;
+    }
+  }
+  .sm_bottom {
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    .sm_b_save {
+      background-color: #3681fc;
+      color: #fff;
+    }
+    div {
+      flex: 1;
+      height: 100%;
+      font-size: 18px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .sm_form {
+    width: 100%;
+    height: calc(100% - 110px);
+    overflow: auto;
+    // border-top: solid 1px #f0f0f0;
+    box-sizing: border-box;
+    .sm_f_characterList {
+      border-bottom: solid 1px #f0f0f0;
+      padding-bottom: 20px;
+
+      .characterCard {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: 0.3s;
+        background-color: #fff;
+        .cc_image {
+          opacity: 0.4;
+          transition: 0.3s;
+        }
+      }
+    }
+    .sm_f_item {
+      width: 100%;
+      padding: 20px 20px;
+      display: flex;
+      box-sizing: border-box;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: solid 1px #f0f0f0;
+      .sm_f_item_label {
+        width: 60px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        justify-content: flex-start;
+        span {
+          color: red;
+        }
+      }
+      .sm_f_item_middle {
+        flex: 1;
+        margin: 0 10px;
+        // width: 100px;
+        height: 100%;
+        // height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        span {
+          margin-left: 15px;
+          font-size: 14px;
+        }
+        .sm_f_input {
+          :deep(.el-input__inner) {
+            border: none;
+            font-size: 16px;
+          }
+        }
+      }
+      .sm_f_item_right {
+        width: auto;
+        height: 100%;
+        .sm_f_avatar {
+          width: 70px;
+          height: 70px;
+        }
+        svg {
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+  }
+}
+
+:deep(.is-active) {
+	.cc_image{
+		opacity: 1 !important;
+	}
+}
+</style>