SanHQin hai 11 meses
pai
achega
c70709717a
Modificáronse 28 ficheiros con 5787 adicións e 1 borrados
  1. 39 0
      src/api/pocAiClassroom.js
  2. BIN=BIN
      src/assets/images/pocAiClassroom/aiAvatar.png
  3. 1 0
      src/assets/images/pocAiClassroom/avatar.svg
  4. BIN=BIN
      src/assets/images/pocAiClassroom/bg1.png
  5. BIN=BIN
      src/assets/images/pocAiClassroom/bg2.png
  6. BIN=BIN
      src/assets/images/pocAiClassroom/character1.png
  7. BIN=BIN
      src/assets/images/pocAiClassroom/character2.png
  8. BIN=BIN
      src/assets/images/pocAiClassroom/character3.png
  9. BIN=BIN
      src/assets/images/pocAiClassroom/character4.png
  10. BIN=BIN
      src/assets/images/pocAiClassroom/character5.png
  11. BIN=BIN
      src/assets/images/pocAiClassroom/character6.png
  12. BIN=BIN
      src/assets/images/pocAiClassroom/classImage.png
  13. BIN=BIN
      src/assets/images/pocAiClassroom/defaultAvatar.png
  14. 32 0
      src/assets/images/pocAiClassroom/fileIcon.svg
  15. BIN=BIN
      src/assets/images/pocAiClassroom/hello.gif
  16. BIN=BIN
      src/assets/images/pocAiClassroom/taskSuccess.png
  17. BIN=BIN
      src/assets/images/pocAiClassroom/userAvatar.png
  18. 37 1
      src/router/router.config.js
  19. 1462 0
      src/views/pocAiClassroom/chatArea.vue
  20. 296 0
      src/views/pocAiClassroom/component/chapterCard.vue
  21. 471 0
      src/views/pocAiClassroom/component/settingsDialog.vue
  22. 97 0
      src/views/pocAiClassroom/component/txtView.vue
  23. 252 0
      src/views/pocAiClassroom/component/vpdf.vue
  24. 201 0
      src/views/pocAiClassroom/component/vword.vue
  25. 1928 0
      src/views/pocAiClassroom/doTask.vue
  26. 842 0
      src/views/pocAiClassroom/index.vue
  27. 38 0
      src/views/pocAiClassroom/pocClass.vue
  28. 91 0
      src/views/pocAiClassroom/startIndex.vue

+ 39 - 0
src/api/pocAiClassroom.js

@@ -0,0 +1,39 @@
+// axios
+import request2 from '@/utils/request2'
+import request from '@/utils/request'
+
+export function getChatListRequest(data){//获取聊天记录
+	return request2({
+		url: 'https://gpt4.cocorobo.cn/get_agent_park_chat',
+    method: 'post',
+    data,
+    hideloading: true
+	})
+}
+
+export function insertChatListRequest(data){//保存聊天记录
+	return request2({
+		url: 'https://gpt4.cocorobo.cn/insert_chat',
+    method: 'post',
+    data,
+    hideloading: true
+	})
+}
+
+export function aiChatRequest(data){//聊天请求
+	return request2({
+		url: 'https://gpt4.cocorobo.cn/chat',
+    method: 'post',
+    data,
+    hideloading: true
+	})
+}
+
+export function aiRoleChatRequest(data){//聊天请求
+	return request2({
+		url: 'https://gpt4.cocorobo.cn/ai_agent_park_chat_new',
+    method: 'post',
+    data,
+    hideloading: true
+	})
+}

BIN=BIN
src/assets/images/pocAiClassroom/aiAvatar.png


+ 1 - 0
src/assets/images/pocAiClassroom/avatar.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724726041765" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4516" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1024 512c0-281.6-230.4-512-512-512S0 230.4 0 512s230.4 512 512 512 512-230.4 512-512z m-512 448c-249.6 0-448-198.4-448-448s198.4-448 448-448 448 198.4 448 448-198.4 448-448 448z" fill="#000000" p-id="4517"></path><path d="M627.2 505.6c44.8-38.4 76.8-89.6 76.8-153.6 0-108.8-83.2-192-192-192s-192 83.2-192 192c0 64 32 115.2 76.8 153.6-102.4 44.8-172.8 147.2-172.8 262.4 0 19.2 12.8 32 32 32s32-12.8 32-32c0-121.6 102.4-224 224-224s224 102.4 224 224c0 19.2 12.8 32 32 32s32-12.8 32-32c0-115.2-70.4-217.6-172.8-262.4zM512 480c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128-57.6 128-128 128z" fill="#000000" p-id="4518"></path></svg>

BIN=BIN
src/assets/images/pocAiClassroom/bg1.png


BIN=BIN
src/assets/images/pocAiClassroom/bg2.png


BIN=BIN
src/assets/images/pocAiClassroom/character1.png


BIN=BIN
src/assets/images/pocAiClassroom/character2.png


BIN=BIN
src/assets/images/pocAiClassroom/character3.png


BIN=BIN
src/assets/images/pocAiClassroom/character4.png


BIN=BIN
src/assets/images/pocAiClassroom/character5.png


BIN=BIN
src/assets/images/pocAiClassroom/character6.png


BIN=BIN
src/assets/images/pocAiClassroom/classImage.png


BIN=BIN
src/assets/images/pocAiClassroom/defaultAvatar.png


+ 32 - 0
src/assets/images/pocAiClassroom/fileIcon.svg

@@ -0,0 +1,32 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1986_1598)">
+<path d="M4.3999 12V2C4.3999 1.44772 4.84762 1 5.3999 1H10.3079C10.6182 1 10.9108 1.14397 11.1001 1.38972L13.7921 4.88409C13.9268 5.059 13.9999 5.27358 13.9999 5.49437V12C13.9999 12.5523 13.5522 13 12.9999 13H5.3999C4.84762 13 4.3999 12.5523 4.3999 12Z" fill="url(#paint0_linear_1986_1598)"/>
+<g filter="url(#filter0_bd_1986_1598)">
+<path d="M2 14V4C2 3.44772 2.44772 3 3 3H8.00455C8.25861 3 8.50315 3.0967 8.68849 3.27046L11.2839 5.70369C11.4856 5.89274 11.6 6.15682 11.6 6.43323V14C11.6 14.5523 11.1523 15 10.6 15H3C2.44772 15 2 14.5523 2 14Z" fill="white" fill-opacity="0.2" shape-rendering="crispEdges"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.80005 7.5C3.80005 7.22386 4.06868 7 4.40005 7H8.00005C8.33142 7 8.60005 7.22386 8.60005 7.5C8.60005 7.77614 8.33142 8 8.00005 8H4.40005C4.06868 8 3.80005 7.77614 3.80005 7.5Z" fill="white" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.80005 9.5C3.80005 9.22386 4.06868 9 4.40005 9H9.80005C10.1314 9 10.4 9.22386 10.4 9.5C10.4 9.77614 10.1314 10 9.80005 10H4.40005C4.06868 10 3.80005 9.77614 3.80005 9.5Z" fill="white" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.80005 11.5C3.80005 11.2239 4.06868 11 4.40005 11H9.80005C10.1314 11 10.4 11.2239 10.4 11.5C10.4 11.7761 10.1314 12 9.80005 12H4.40005C4.06868 12 3.80005 11.7761 3.80005 11.5Z" fill="white" fill-opacity="0.4"/>
+</g>
+<defs>
+<filter id="filter0_bd_1986_1598" x="-2" y="-1" width="17.6001" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1986_1598"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.2" dy="0.2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0811095 0 0 0 0 0.410123 0 0 0 0 0.648375 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1986_1598" result="effect2_dropShadow_1986_1598"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1986_1598" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1986_1598" x1="9.1999" y1="1" x2="9.1999" y2="13" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6EEED7"/>
+<stop offset="1" stop-color="#5CD0F7"/>
+</linearGradient>
+<clipPath id="clip0_1986_1598">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

BIN=BIN
src/assets/images/pocAiClassroom/hello.gif


BIN=BIN
src/assets/images/pocAiClassroom/taskSuccess.png


BIN=BIN
src/assets/images/pocAiClassroom/userAvatar.png


+ 37 - 1
src/router/router.config.js

@@ -208,5 +208,41 @@ export const constantRouterMap = [
       title: 'CocoAI',
       keepAlive: false
     }
-  }
+  },
+	{
+		path:"/pocAiClassroom",
+		name:"pocAiClassroom",
+		component:()=>import('@/views/pocAiClassroom/index.vue'),
+		meta:{
+			title:"POC课堂",
+			keepAlive: false
+		}
+	},
+	{
+		path:"/pocAiChat",
+		name:"pocAiChat",
+		component:()=>import('@/views/pocAiClassroom/chatArea.vue'),
+		meta:{
+			title:"聊聊天",
+			keepAlive: false
+		}
+	},
+	{
+		path:"/pocDoTask",
+		name:"pocDoTask",
+		component:()=>import('@/views/pocAiClassroom/doTask.vue'),
+		meta:{
+			title:"做练习",
+			keepAlive: false
+		}
+	},
+	{
+		path:"/pocClass",
+		name:"pocClass",
+		component:()=>import('@/views/pocAiClassroom/pocClass.vue'),
+		meta:{
+			title:"上课",
+			keepAlive: false
+		}
+	},
 ]

+ 1462 - 0
src/views/pocAiClassroom/chatArea.vue

@@ -0,0 +1,1462 @@
+<template>
+  <div class="pocAi">
+    <div class="pa_background">
+      <img src="../../assets/images/pocAiClassroom/bg2.png" />
+    </div>
+    <div class="pa_documentArea" ref="documentAreaRef" v-show="showFileArea">
+      <div
+        ref="dialogRef"
+        class="pa_da_dialog"
+        @mouseenter="dialogMouse(0)"
+        @mouseleave="dialogMouse(1)"
+        :style="
+          fullFileDialog
+            ? 'width:100vw;height:100vh;border-radius:0;left:0;top:0'
+            : `left:${dialogPosition.x}px;top:${dialogPosition.y}px`
+        "
+      >
+        <div
+          class="pa_da_d_head"
+          ref="dialogHeadRef"
+          v-show="showDialogBtn || alwaysShowDialogBtn"
+					@touchstart="startMove"
+        >
+          <div class="pa_da_d_h_left">
+            <span
+              v-text="showFile.fileName ? showFile.fileName : '查看文件'"
+            ></span>
+          </div>
+          <div class="pa_da_d_h_right">
+            <!-- <span
+              @click.stop="alwaysShowDialogBtnFn"
+              :class="alwaysShowDialogBtn ? 'pa_da_d_h_r_active' : ''"
+            >
+              <svg
+                t="1725429783868"
+                class="icon"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="8906"
+                width="200"
+                height="200"
+              >
+                <path
+                  d="M935.15 375.34c0-25.38-9.88-49.23-27.83-67.17L727.96 128.8c-37.04-37.04-97.31-37.04-134.35 0L338.53 383.89l-72.74-30.44c-35.71-14.94-76.48-6.91-103.85 20.46l-38.15 38.15c-37.04 37.04-37.04 97.31 0 134.35L282 704.62 127.5 859.13c-13.67 13.67-13.67 35.83 0 49.5 6.83 6.83 15.79 10.25 24.75 10.25s17.92-3.42 24.75-10.25l154.5-154.51 158.21 158.21c17.94 17.94 41.8 27.83 67.18 27.83s49.23-9.88 67.17-27.83l38.15-38.15c27.37-27.37 35.4-68.14 20.46-103.85l-30.44-72.74L907.32 442.5c17.95-17.93 27.83-41.79 27.83-67.16z m-77.33 17.67l-262.2 262.2c-15.85 15.85-20.5 39.45-11.85 60.12l34.32 82.02c3.93 9.4 1.82 20.13-5.38 27.33l-38.15 38.15c-4.72 4.72-11 7.32-17.68 7.32s-12.96-2.6-17.68-7.32L173.29 496.91c-9.75-9.75-9.75-25.61 0-35.36l38.15-38.15c4.8-4.8 11.16-7.34 17.65-7.34 3.25 0 6.54 0.64 9.68 1.95l82.02 34.32c20.68 8.65 44.28 4 60.12-11.85l262.2-262.2c9.75-9.75 25.61-9.75 35.36 0l179.36 179.36c9.74 9.77 9.74 25.63-0.01 35.37z"
+                  p-id="8907"
+                ></path>
+              </svg>
+            </span> -->
+            <span v-if="!fullFileDialog" @click.stop="fullFileDialogFn()">
+              <svg
+                t="1725429213369"
+                class="icon"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="5406"
+                width="200"
+                height="200"
+              >
+                <path
+                  d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z"
+                  p-id="5407"
+                ></path>
+              </svg>
+            </span>
+            <span v-else @click.stop="fullFileDialogFn()">
+              <svg
+                t="1725429227791"
+                class="icon"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="5560"
+                width="200"
+                height="200"
+              >
+                <path
+                  d="M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z"
+                  p-id="5561"
+                ></path>
+              </svg>
+            </span>
+
+            <span @click.stop="showFileArea = !showFileArea">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M14.8669 5.77596C15.0444 5.59845 15.0444 5.31064 14.8669 5.13313C14.6894 4.95562 14.4016 4.95562 14.2241 5.13313L9.99996 9.35729L5.77595 5.13326C5.59844 4.95575 5.31064 4.95575 5.13313 5.13326C4.95562 5.31077 4.95562 5.59857 5.13313 5.77608L9.35714 10.0001L5.1333 14.224C4.95579 14.4015 4.95579 14.6893 5.1333 14.8668C5.31081 15.0443 5.59861 15.0443 5.77612 14.8668L9.99996 10.6429L14.2239 14.8669C14.4014 15.0444 14.6892 15.0444 14.8667 14.8669C15.0443 14.6894 15.0443 14.4016 14.8667 14.2241L10.6428 10.0001L14.8669 5.77596Z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div class="pa_da_d_content">
+          <vword
+            style="width: 100%; height: 100% ; overflow: hidden"
+            class="fullStyle"
+            v-if="
+              showFile.type == 2 && !['pdf', 'txt'].includes(showFile.suffix)
+            "
+            :pdfUrl="
+              'https://view.officeapps.live.com/op/view.aspx?src=' +
+                showFile.url
+            "
+          />
+          <vpdf
+            style="width: 100%;  height: 100%; overflow: hidden"
+            class="fullStyle"
+            :pdfUrl="showFile.url"
+            v-if="showFile.type == 2 && ['pdf'].includes(showFile.suffix)"
+          />
+
+          <txtView
+            style="width: 100%;height: 100%"
+            v-if="showFile.type == 2 && ['txt'].includes(showFile.suffix)"
+            :url="showFile.url"
+          />
+
+          <div class="pa_da_Image" v-if="showFile.type == 1">
+            <el-image
+              style="width: 100%;height: 100%;"
+              fit="cover"
+              :src="showFile.url"
+              :preview-src-list="[showFile.url]"
+            >
+            </el-image>
+          </div>
+
+          <div class="pa_da_Video" v-if="showFile.type == 3">
+            <video-player
+              style="width: 100%;max-height:100%;display: flex;justify-content: center;align-items: center;overflow: auto;"
+              :playsinline="true"
+              :options="showFile.videoOption"
+            ></video-player>
+          </div>
+        </div>
+        <div
+          class="pa_da_d_bottom"
+          v-show="showDialogBtn || alwaysShowDialogBtn"
+        >
+          <div></div>
+          <div>
+            <div class="pa_da_d_b_r_contentList">
+              <span @click.stop="showDialogFileList = !showDialogFileList">
+                <img
+                  src="../../assets/images/pocAiClassroom/fileIcon.svg"
+                />
+                内容列表
+              </span>
+
+              <div class="pa_da_d_b_r_cl_fileList" v-if="showDialogFileList" v-click-outside="()=>showDialogFileList = false">
+                <div
+                  v-for="(item, index) in fileList"
+                  :key="index"
+                  :class="
+                    showFile.url === item.fileUrl
+                      ? 'pa_da_d_b_r_cl_fl_active'
+                      : ''
+                  "
+                  @click.stop="showFileFn(item)"
+                >
+                  <span>{{ item.fileName }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pa_chatArea">
+      <div class="pa_ca_back" @click.stop="back()">返回</div>
+      <!-- <div class="pa_ca_header">
+        <span v-text="chatTitle"></span>
+      </div> -->
+      <div class="pa_ca_chat" v-loading="loading">
+        <div
+          class="pa_ca_c_list"
+          ref="chatListRef"
+        >
+          <div v-for="(item, index) in chatList" :key="index">
+            <div class="userChat" v-if="item.content">
+              <div class="uc_left">
+                <div class="chatName">科科</div>
+                <div class="chatMessage">
+                  <span v-text="item.content"></span>
+                  <div class="cm_btnArea">
+                    <span @click.stop="copy(item.content)">
+                      <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M2.76904 1.3171C2.76904 0.588877 3.35938 -0.00146484 4.08761 -0.00146484H10.6804C11.4087 -0.00146484 11.999 0.588876 11.999 1.3171V7.90992C11.999 8.63814 11.4087 9.22849 10.6804 9.22849H4.08761C3.35938 9.22849 2.76904 8.63814 2.76904 7.90992V1.3171ZM4.08761 0.987458C3.90555 0.987458 3.75797 1.13504 3.75797 1.3171V7.90992C3.75797 8.09198 3.90555 8.23956 4.08761 8.23956H10.6804C10.8625 8.23956 11.0101 8.09198 11.0101 7.90992V1.3171C11.0101 1.13504 10.8625 0.987458 10.6804 0.987458H4.08761Z"
+                          fill="#333333"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M1.31856 3.75748C1.13651 3.75748 0.988923 3.90506 0.988923 4.08712V10.6799C0.988923 10.862 1.13651 11.0096 1.31856 11.0096H7.91139C8.09344 11.0096 8.24103 10.862 8.24103 10.6799V9.85584C8.24103 9.58275 8.46241 9.36138 8.73549 9.36138C9.00857 9.36138 9.22995 9.58275 9.22995 9.85584V10.6799C9.22995 11.4082 8.63961 11.9985 7.91139 11.9985H1.31856C0.590342 11.9985 0 11.4082 0 10.6799V4.08712C0 3.3589 0.590341 2.76855 1.31856 2.76855H2.14267C2.41575 2.76855 2.63713 2.98993 2.63713 3.26302C2.63713 3.5361 2.41575 3.75748 2.14267 3.75748H1.31856Z"
+                          fill="#333333"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div class="uc_right">
+                <el-avatar
+                  class="chatAvatar"
+                  :src="require('../../assets/images/pocAiClassroom/defaultAvatar.png')"
+                ></el-avatar>
+              </div>
+            </div>
+            <div class="aiChat">
+              <div class="ac_left">
+                <el-avatar
+                  class="chatAvatar"
+                  :src="require('../../assets/images/pocAiClassroom/character1.png')"
+                ></el-avatar>
+              </div>
+              <div class="ac_right">
+                <div class="chatName"><span>圆鼓鼓的大胖鱼</span></div>
+                <div
+                  class="chatMessage"
+                  v-loading="item.loading"
+                  :style="item.loading ? 'border:none' : ''"
+                >
+                  <span v-html="item.aiContent"></span>
+                  <div class="cm_btnArea">
+                    <span @click.stop="copy(item.aiContent)">
+                      <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M2.76904 1.3171C2.76904 0.588877 3.35938 -0.00146484 4.08761 -0.00146484H10.6804C11.4087 -0.00146484 11.999 0.588876 11.999 1.3171V7.90992C11.999 8.63814 11.4087 9.22849 10.6804 9.22849H4.08761C3.35938 9.22849 2.76904 8.63814 2.76904 7.90992V1.3171ZM4.08761 0.987458C3.90555 0.987458 3.75797 1.13504 3.75797 1.3171V7.90992C3.75797 8.09198 3.90555 8.23956 4.08761 8.23956H10.6804C10.8625 8.23956 11.0101 8.09198 11.0101 7.90992V1.3171C11.0101 1.13504 10.8625 0.987458 10.6804 0.987458H4.08761Z"
+                          fill="#333333"
+                        />
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M1.31856 3.75748C1.13651 3.75748 0.988923 3.90506 0.988923 4.08712V10.6799C0.988923 10.862 1.13651 11.0096 1.31856 11.0096H7.91139C8.09344 11.0096 8.24103 10.862 8.24103 10.6799V9.85584C8.24103 9.58275 8.46241 9.36138 8.73549 9.36138C9.00857 9.36138 9.22995 9.58275 9.22995 9.85584V10.6799C9.22995 11.4082 8.63961 11.9985 7.91139 11.9985H1.31856C0.590342 11.9985 0 11.4082 0 10.6799V4.08712C0 3.3589 0.590341 2.76855 1.31856 2.76855H2.14267C2.41575 2.76855 2.63713 2.98993 2.63713 3.26302C2.63713 3.5361 2.41575 3.75748 2.14267 3.75748H1.31856Z"
+                          fill="#333333"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <!-- <template v-html="item.aiContent"></template> -->
+                </div>
+                <div class="ac_r_btnArea">
+                  <span @click.stop="checkFile()">查看文件</span>
+                  <!-- <span @click.stop="sendChat('A')">A:不知道</span>
+                  <span @click.stop="sendChat('B')">B:选A</span>
+                  <span @click.stop="sendChat('C')">C:选B</span> -->
+                </div>
+                <!-- <div class="ac_r_time">2024-08-26 14:31:45</div> -->
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="pa_ca_c_bottom"
+         
+        >
+          <div class="pa_ca_c_b_inputArea">
+            <textarea
+              id="myTextarea"
+              ref="textAreaRef"
+              min-rows="1"
+              max-rows="5"
+              v-model="chatValue"
+              placeholder="你有任何想法,可以随时告诉我呀"
+              autosize="none"
+              :disabled="source != null"
+            ></textarea>
+            <div class="pa_ca_c_b_btnArea">
+              <span class="pa_ca_c_b_ba_btn" @click="sendChat">
+                <svg
+                  t="1724748020468"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="7309"
+                  width="200"
+                  height="200"
+                >
+                  <path
+                    d="M931.392 11.264L45.12 530.688c-28.736 16.896-43.52 39.424-45.12 61.248v8.128c2.048 26.112 23.04 49.984 61.632 60.416l171.968 46.592a34.304 34.304 0 0 0 41.28-25.536 35.584 35.584 0 0 0-23.808-43.136L79.68 592l873.408-511.872-95.232 703.488c-1.408 10.432-9.152 15.68-18.752 12.992l-365.632-100.288 296.32-305.856a36.416 36.416 0 0 0 0-50.24 33.728 33.728 0 0 0-48.704 0l-324.8 335.36a110.72 110.72 0 0 0-7.872 9.088 35.52 35.52 0 0 0-16.128 30.784 104 104 0 0 0-5.248 32.64v206.4c0 49.664 53.568 79.168 93.568 51.712l166.272-114.368c10.24-6.976 16-19.136 15.232-31.872a35.712 35.712 0 0 0-19.2-29.504 33.28 33.28 0 0 0-34.24 2.304L435.84 937.856v-178.432l385.472 105.6c49.6 13.632 97.472-19.072 104.576-71.808l97.152-717.568c8.448-60.48-40-94.72-91.648-64.384z"
+                    p-id="7310"
+                  ></path>
+                </svg>
+              </span>
+              <!-- <el-button
+                class="pa_ca_c_b_ba_btn"
+                type="primary"
+                @click="sendChat"
+                >发送</el-button
+              > -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import vpdf from "./component/vpdf.vue";
+import vword from "./component/vword.vue";
+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'
+
+// 自定义指令,用于处理点击外部区域的事件
+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: {
+    vpdf,
+    vword,
+    txtView
+  },
+  data() {
+    return {
+      userId: this.$store.state.user.userinfo.userid,
+      org: this.$store.state.user.userinfo.org,
+      oid: this.$store.state.user.userinfo.organizeid,
+      showFileIndex: 0,
+      showFileArea: true,
+      fullFileDialog: false,
+      showDialogBtn: false,
+      alwaysShowDialogBtn: true,
+      showDialogFileList: false,
+      dialogIsMove: false,
+      dialogPosition: {
+				dialogWidth:0,
+				dialogHeight:0,
+        x: 10,
+        y: 10,
+        oldX: 0,
+        oldY: 0
+      },
+      chatValue: "",
+      source: null,
+      loading: false,
+      chatTitle: "第一章 声音的原理",
+      showFileUrl:
+        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724641221681.jpg",
+      chatList: [
+        {
+          loading: false,
+          role: "user",
+          content: "哇卡哇卡",
+          uid: "d601788a-5ece-11ef-826e-12e77c4cb76b",
+          AI: "AI",
+          aiContent:
+            "<p>&quot;哇卡哇卡&quot; 是夏奇拉(Shakira)的一首非常知名的歌曲,全名是《Waka Waka (This Time for Africa)》。这首歌是2010年南非世界杯的官方主题曲,充满了非洲音乐元素和动感节奏,广受欢迎。如果你对这首歌或其意义感兴趣,可以分享更多你的想法!</p>\n",
+          oldContent:
+            "<p>&quot;哇卡哇卡&quot; 是夏奇拉(Shakira)的一首非常知名的歌曲,全名是《Waka Waka (This Time for Africa)》。这首歌是2010年南非世界杯的官方主题曲,充满了非洲音乐元素和动感节奏,广受欢迎。如果你对这首歌或其意义感兴趣,可以分享更多你的想法!</p>\n",
+          isShowSynchronization: false,
+          filename: "",
+          index: 0,
+          is_mind_map: false,
+          fileid: "",
+          createtime: "2024-08-20 08:33:11"
+        },
+        {
+          loading: false,
+          role: "user",
+          content: "最近中国有什么好的游戏可以玩吗\n",
+          uid: "e23485ec-5ece-11ef-826e-12e77c4cb76b",
+          AI: "AI",
+          aiContent:
+            "<p>最近中国有几款备受关注的游戏,以下是其中一些推荐:</p>\n<ol>\n<li>\n<p><strong>《原神》</strong> - 这是一款由miHoYo开发的开放世界角色扮演游戏,以其精美的画面和开放的世界探索而受到广泛好评。</p>\n</li>\n<li>\n<p><strong>《崩坏:星穹铁道》</strong> - 也是miHoYo开发的作品,作为《崩坏》系列的新作,这款游戏结合了科幻元素和回合制战斗机制。</p>\n</li>\n<li>\n<p><strong>《阴阳师》</strong> - 由网易开发的卡牌策略游戏,以其独特的美术风格和丰富的剧情设定而受到玩家喜爱。</p>\n</li>\n<li>\n<p><strong>《和平精英》</strong> - 这是一款由腾讯光子工作室群开发的多人在线战术竞技类游戏,是中国版的《PUBG Mobile》。</p>\n</li>\n<li>\n<p><strong>《剑网3:缘起》</strong> - 西山居开发的一款大型多人在线角色扮演游戏(MMORPG),以其经典的武侠元素和深厚的剧情吸引了大量玩家。</p>\n</li>\n</ol>\n<p>这些游戏在画质、玩法和社交性方面各有特色,你可以根据自己的兴趣和偏好进行选择体验。</p>\n",
+          oldContent:
+            "<p>最近中国有几款备受关注的游戏,以下是其中一些推荐:</p>\n<ol>\n<li>\n<p><strong>《原神》</strong> - 这是一款由miHoYo开发的开放世界角色扮演游戏,以其精美的画面和开放的世界探索而受到广泛好评。</p>\n</li>\n<li>\n<p><strong>《崩坏:星穹铁道》</strong> - 也是miHoYo开发的作品,作为《崩坏》系列的新作,这款游戏结合了科幻元素和回合制战斗机制。</p>\n</li>\n<li>\n<p><strong>《阴阳师》</strong> - 由网易开发的卡牌策略游戏,以其独特的美术风格和丰富的剧情设定而受到玩家喜爱。</p>\n</li>\n<li>\n<p><strong>《和平精英》</strong> - 这是一款由腾讯光子工作室群开发的多人在线战术竞技类游戏,是中国版的《PUBG Mobile》。</p>\n</li>\n<li>\n<p><strong>《剑网3:缘起》</strong> - 西山居开发的一款大型多人在线角色扮演游戏(MMORPG),以其经典的武侠元素和深厚的剧情吸引了大量玩家。</p>\n</li>\n</ol>\n<p>这些游戏在画质、玩法和社交性方面各有特色,你可以根据自己的兴趣和偏好进行选择体验。</p>\n",
+          isShowSynchronization: false,
+          filename: "",
+          index: 1,
+          is_mind_map: false,
+          fileid: "",
+          createtime: "2024-08-20 08:33:32"
+        },
+        {
+          loading: false,
+          role: "user",
+          content: "你这是多少年的数据了",
+          uid: "eaa6c091-5ece-11ef-826e-12e77c4cb76b",
+          AI: "AI",
+          aiContent:
+            "<p>我掌握的数据截止到2023年,是经过培训和处理的历史数据。有什么我可以帮你的吗?</p>\n",
+          oldContent:
+            "<p>我掌握的数据截止到2023年,是经过培训和处理的历史数据。有什么我可以帮你的吗?</p>\n",
+          isShowSynchronization: false,
+          filename: "",
+          index: 2,
+          is_mind_map: false,
+          fileid: "",
+          createtime: "2024-08-20 08:33:46"
+        },
+        {
+          loading: false,
+          role: "user",
+          content: "巴黎奥运会怎么样了",
+          uid: "f9188e27-5ece-11ef-826e-12e77c4cb76b",
+          AI: "AI",
+          aiContent:
+            "<p>截至我最近的更新信息,巴黎奥运会将在2024年举行。具体情况包括:</p>\n<ol>\n<li>\n<p><strong>日期和地点</strong>:巴黎奥运会计划于2024年7月26日至8月11日举行。比赛将在法国巴黎及其周边地区的各大场馆进行。</p>\n</li>\n<li>\n<p><strong>项目</strong>:2024年巴黎奥运会预计将包括32个大项,覆盖从田径到游泳等传统项目,同时可能也会引入一些新的项目或调整现有项目的设置。</p>\n</li>\n<li>\n<p><strong>准备工作</strong>:巴黎方面正在积极进行场馆建设与改造、城市基础设施的提升以及各种筹备工作,以确保赛事顺利进行。</p>\n</li>\n<li>\n<p><strong>可持续性与创新</strong>:巴黎奥运会提出了“可持续性”与“创新”的理念,致力于通过多种方式(如使用临时设施、推广绿色交通等)减少对环境的影响。</p>\n</li>\n</ol>\n<p>具体的进展和变化可能会随着时间推移有所不同。要了解更多的信息和最新动态,可以关注巴黎奥组委的官方网站或相关的新闻报道。</p>\n",
+          oldContent:
+            "<p>截至我最近的更新信息,巴黎奥运会将在2024年举行。具体情况包括:</p>\n<ol>\n<li>\n<p><strong>日期和地点</strong>:巴黎奥运会计划于2024年7月26日至8月11日举行。比赛将在法国巴黎及其周边地区的各大场馆进行。</p>\n</li>\n<li>\n<p><strong>项目</strong>:2024年巴黎奥运会预计将包括32个大项,覆盖从田径到游泳等传统项目,同时可能也会引入一些新的项目或调整现有项目的设置。</p>\n</li>\n<li>\n<p><strong>准备工作</strong>:巴黎方面正在积极进行场馆建设与改造、城市基础设施的提升以及各种筹备工作,以确保赛事顺利进行。</p>\n</li>\n<li>\n<p><strong>可持续性与创新</strong>:巴黎奥运会提出了“可持续性”与“创新”的理念,致力于通过多种方式(如使用临时设施、推广绿色交通等)减少对环境的影响。</p>\n</li>\n</ol>\n<p>具体的进展和变化可能会随着时间推移有所不同。要了解更多的信息和最新动态,可以关注巴黎奥组委的官方网站或相关的新闻报道。</p>\n",
+          isShowSynchronization: false,
+          filename: "",
+          index: 3,
+          is_mind_map: false,
+          fileid: "",
+          createtime: "2024-08-20 08:34:10"
+        },
+        {
+          loading: false,
+          role: "user",
+          content: "巴黎奥运会有哪些国家参加",
+          uid: "0aedaebd-5ecf-11ef-826e-12e77c4cb76b",
+          AI: "AI",
+          aiContent:
+            "<p>巴黎奥运会将于2024年举行,由于奥运会是由国际奥林匹克委员会(IOC)组织的,通常大多数国家都会派代表团参加,包括几乎所有联合国成员国和一些地区或地区代表队。截至目前,具体参赛的国家和地区名单尚未最终确定,但预计将会有200多个国家和地区参加。如果你想了解最新的参赛国家名单,建议关注国际奥林匹克委员会的官方网站或相关最新新闻。</p>\n",
+          oldContent:
+            "<p>巴黎奥运会将于2024年举行,由于奥运会是由国际奥林匹克委员会(IOC)组织的,通常大多数国家都会派代表团参加,包括几乎所有联合国成员国和一些地区或地区代表队。截至目前,具体参赛的国家和地区名单尚未最终确定,但预计将会有200多个国家和地区参加。如果你想了解最新的参赛国家名单,建议关注国际奥林匹克委员会的官方网站或相关最新新闻。</p>\n",
+          isShowSynchronization: false,
+          filename: "",
+          index: 4,
+          is_mind_map: false,
+          fileid: "",
+          createtime: "2024-08-20 08:34:40"
+        }
+      ],
+      fileList: [
+        {
+          //docx
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%A0%A1%E7%BA%A7%E5%88%9B%E5%AE%A2%E9%A1%B9%E7%9B%AE%E7%BB%93%E9%A2%98%E7%94%B3%E8%AF%B7%E4%B9%A6-%E5%88%9B%E6%96%B0%E5%88%9B%E4%B8%9A%E5%AD%A6%E9%99%A21724638848483.docx",
+          fileId: "file-xUxtMlJu7PoDBvzZg1JCegtM",
+          fileName: "这是一个DOCX文件"
+        },
+        {
+          //xlsx
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724640873576.xlsx",
+          fileId: "file-61KteMZxNwzjJQFRdlwtdpmg",
+          fileName: "这是一个XLSX文件"
+        },
+        {
+          //ppt
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724641111983.pptx",
+          fileId: "",
+          fileName: "这是一个PPT文件"
+        },
+        {
+          //pdf
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%88%9B%E4%BD%9C%E4%B8%AD%E5%BF%83%E5%8E%9F%E5%9E%8B%E5%9B%BE1724641155668.pdf",
+          fileId: "file-1ldbT8Ztg5QQPUucJs2FpLAJ",
+          fileName: "这是一个PDF文件"
+        },
+        {
+          //jpg
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724641221681.jpg",
+          fileId: "",
+          fileName: "这是一个JPG文件"
+        },
+        {
+          //mp4
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/c3e87dc3-d5ab-4a1f-a519-63d903a270f8%2F2024-08-09+17-07-50.mp4",
+          fileId: "",
+          fileName: "这是一个MP4文件"
+        },
+        {
+          //txt
+          fileUrl:
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/ktgc31724643097906.txt",
+          fileId: "file-YSVSAsDGvtiWJQ6mWf7ZdupA",
+          fileName: "这是一个TXT文件"
+        }
+      ],
+      canonical: {
+        Image: /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i,
+        File: /^https?:\/\/(.+\/)+.+(\.(docx|doc|xlsx|ppt|pdf|pptx|txt))$/i,
+        video: /^https?:\/\/(.+\/)+.+(\.(avi|wmv|mpg|mpeg|mov|rm|ram|mp4|swf|flv))$/i
+      }
+    };
+  },
+	directives: {
+    "click-outside": clickOutside // 注册自定义指令
+  },
+  computed: {
+		dialogWidth(){
+			if(!this.$refs.documentAreaRef)return 0
+			return this.$refs.documentAreaRef.offsetWidth
+		},
+    showFile() {
+      let result = {
+        type: 0,
+        suffix: "",
+        url: "",
+        videoOption: null,
+        fileName: ""
+      }; //0:无 1:图片 2:文件 3:视频
+      if (this.showFileUrl) {
+        result.url = this.showFileUrl;
+        result.fileName = this.fileList.find(
+          i => i.fileUrl == this.showFileUrl
+        ).fileName;
+        if (this.canonical.Image.test(this.showFileUrl)) {
+          result.type = 1;
+          result.suffix = this.showFileUrl.split(".").pop();
+        } else if (this.canonical.File.test(this.showFileUrl)) {
+          result.type = 2;
+          result.suffix = this.showFileUrl.split(".").pop();
+        } else if (this.canonical.video.test(this.showFileUrl)) {
+          result.type = 3;
+          result.videoOption = {
+            playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+            autoplay: false, //如果true,浏览器准备好时开始回放。
+            muted: false, // 默认情况下将会消除任何音频。
+            loop: false, // 导致视频一结束就重新开始。
+            preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
+            language: "zh-CN",
+            aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
+            fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
+            sources: this.showFileUrl,
+            // poster: "https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=600y500", // 你的封面地址
+            notSupportedMessage: "此视频暂无法播放,请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+            controlBar: {
+              timeDivider: true,
+              durationDisplay: true,
+              remainingTimeDisplay: false,
+              fullscreenToggle: true // 全屏按钮
+            }
+          };
+          result.suffix = this.showFileUrl.split(".").pop();
+        }
+      }
+      return result;
+    }
+  },
+  methods: {
+    chatListScrollBottom() {
+      this.$nextTick(() => {
+        this.$refs.chatListRef.scrollTop = this.$refs.chatListRef.scrollHeight;
+      });
+    },
+    sendChat(_text = this.chatValue) {
+      if (this.source) return this.$message.info("还在对话中,请稍等");
+      if (typeof _text !== "string") _text = this.chatValue;
+      if (!_text.trim()) return;
+      this.chatValue = "";
+      var OpenCC = require("opencc-js");
+      let converter = OpenCC.Converter({
+        from: "cn",
+        to: "hk"
+      });
+      const _uuid = uuidv4();
+      this.chatList.push({
+        role: "user",
+        content: `${_text}`,
+        uid: _uuid,
+        AI: "AI",
+        aiContent: "",
+        oldContent: "",
+        isShowSynchronization: false,
+        filename: "",
+        index: this.chatList.length,
+        is_mind_map: false,
+        createtime: new Date().toLocaleString().replaceAll("/", "-"),
+        loading: true
+      });
+      this.chatListScrollBottom();
+
+      // 连续对话设置
+      let _historyMessage = [];
+
+      _historyMessage.push({ role: "user", content: _text });
+
+      let params = {
+        assistant_id: "f8e1ebb2-2e0d-11ef-8bf4-12e77c4cb76b",
+        userId: this.userId,
+        message: _text,
+        session_name: `${_uuid}-pocAi-md`,
+        uid: _uuid,
+        file_ids: [],
+        model: "gpt-4o-2024-08-06"
+      };
+
+      aiRoleChatRequest(params)
+        .then(res => {
+          if (
+            converter(res.FunctionResponse.result) == converter("发送成功")
+          ) {
+          } else {
+            console.log(res.FunctionResponse.result);
+          }
+        })
+        .catch(e => {
+          console.log(e);
+        });
+      this.getAtAuContent(_uuid);
+    },
+    getAtAuContent(_uid) {
+      this.source = new EventSource(
+        `https://gpt4.cocorobo.cn/question/${_uid}`
+      );
+      let _allText = "";
+      let _mdText = "";
+      const md = new MarkdownIt();
+      this.source.onmessage = _e => {
+        let _eData = JSON.parse(_e.data);
+        if (_eData.content.replace("'", "").replace("'", "") == "[DONE]") {
+          let _result = [];
+          if ("result" in _eData) {
+            _result = _eData.result;
+            for (let i = 0; i < _result.length; i++) {
+              _mdText = _mdText.replace(_result[i].text, _result[i].fileName);
+            }
+          }
+          _mdText = _mdText.replace("_", "");
+          this.chatList.find(i => i.uid == _uid).aiContent = _mdText;
+          this.chatList.find(i => i.uid == _uid).isalltext = true;
+          this.chatList.find(i => i.uid == _uid).isShowSynchronization = true;
+          this.chatList.find(i => i.uid == _uid).loading = false;
+          this.source.close();
+          this.source = null;
+          this.chatListScrollBottom();
+          this.insertChat(_uid);
+        } else {
+          // _index += 1;
+          let _text = _eData.content.replace("'", "").replace("'", "");
+          if (_allText == "") {
+            _allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
+          } else {
+            _allText += _text;
+          }
+          _mdText = _allText + "_";
+          _mdText = _mdText.replace(/\\n/g, "\n");
+          _mdText = _mdText.replace(/\\/g, "");
+
+          if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
+          //转化返回的回复流数据
+          _mdText = md.render(_mdText);
+          // if (_index == 10) {
+          this.chatList.find(i => i.uid == _uid).aiContent = _mdText;
+          this.chatList.find(i => i.uid == _uid).loading = false;
+          this.chatListScrollBottom();
+          // _index = 0;
+          // }
+          // 处理流数据
+        }
+      };
+    },
+    //保存消息
+    insertChat(_uid) {
+      if (_uid == "") return;
+      let _data = this.chatList.find(i => i.uid == _uid);
+      if (!_data) return;
+      let params = {
+        userId: this.userId,
+        userName: "qgt",
+        groupId: "qwertyuiop-poc",
+        answer: _data.aiContent,
+        problem: _data.content,
+        file_id: _data.fileid ? _data.fileid : "",
+        alltext: _data.aiContent,
+        type: "chat",
+        filename: _data.filename,
+        session_name: `pocAi-md` //这是对话记录位置
+      };
+			insertChatListRequest(params)
+        .then(res => {});
+    },
+    // 获取对应的聊天记录
+    getChatList() {
+      return new Promise((resolve, reject) => {
+        if (this.loading) return this.$message.info("请稍等...");
+        this.chatList = [];
+        this.loading = true;
+        let params = {
+          userid: this.userId,
+          groupid: "qwertyuiop-poc",
+          // session_name:``
+          session_name: `pocAi-md`
+        };
+        getChatListRequest(params)
+          .then(res => {
+            let _data = JSON.parse(res.FunctionResponse);
+            if (_data.length > 0) {
+              let _chatList = [];
+              for (let i = 0; i < _data.length; i++) {
+                _chatList.push({
+                  loading: false,
+                  role: "user",
+                  content: _data[i].problem,
+                  uid: _data[i].id,
+                  AI: "AI",
+                  aiContent: _data[i].answer,
+                  oldContent: _data[i].answer,
+                  isShowSynchronization: false,
+                  filename: _data[i].filename,
+                  index: i,
+                  is_mind_map: false,
+                  fileid: _data[i].fileid
+                });
+              }
+              this.chatList = _chatList;
+              this.loading = false;
+            } else {
+              //没有对话记录
+              this.loading = false;
+            }
+            this.chatListScrollBottom();
+            resolve();
+          })
+          .catch(err => {
+            console.log(err);
+            this.$message.error("获取对话记录失败");
+            this.loading = false;
+            resolve();
+          });
+      });
+    },
+    checkFile(url = "") {
+      if (url) {
+        this.showFileUrl = url;
+      } else {
+        const _index = Math.floor(Math.random() * this.fileList.length);
+        this.showFileUrl = this.fileList[_index].fileUrl;
+      }
+      this.showFileArea = true;
+    },
+    back() {
+      this.$router.push(
+        `/pocAiClassroom`
+      );
+    },
+    copy(_content) {
+      // 创建临时textarea元素
+      const tempInput = document.createElement("textarea");
+      tempInput.value = _content.replace(/<[^>]+>/g, ""); // 设置要复制的内容
+      // 隐藏元素
+      tempInput.style.position = "absolute";
+      tempInput.style.left = "-9999px";
+      // 将元素添加到DOM中
+      document.body.appendChild(tempInput);
+      // 选中元素内容
+      tempInput.select();
+      // 执行复制操作
+      document.execCommand("copy");
+      // 移除临时元素
+      document.body.removeChild(tempInput);
+      this.$toast.success("复制成功");
+    },
+    alwaysShowDialogBtnFn() {
+      this.alwaysShowDialogBtn = !this.alwaysShowDialogBtn;
+    },
+    fullFileDialogFn() {
+      this.fullFileDialog = !this.fullFileDialog;
+    },
+    dialogMouse(type = 1) {
+      // console.log(e.offsetY)
+      // const y = e.offsetY;
+      // console.log(this.$refs.dialogRef.offsetHeight)
+      // // const height = this.$refs.dialogRef
+      // if(y <= (100+50)){
+      // 	this.showDialogBtn = true;
+      // }else if(y>=(700-50)){
+      // 	this.showDialogBtn = true;
+      // }else{
+      // 	if(this.showDialogFileList)return;
+      // 	this.showDialogBtn = false;
+      // }
+      // this.showDialogBtn = true
+      // console.log(e)
+			if(this.alwaysShowDialogBtn)return;
+      if (type == 1) {
+        this.showDialogBtn = false;
+				this.showDialogFileList = false;
+      } else if (type == 0) {
+        this.showDialogBtn = true;
+      }
+    },
+    showFileFn(item) {
+      this.showFileUrl = item.fileUrl;
+      this.showDialogFileList = false;
+    },
+    //移动Dialog框
+    startMove(e) {
+      if (this.fullFileDialog) return;
+			console.log("开始移动")
+      this.dialogIsMove = true;
+      this.dialogPosition.oldX = e.touches[0].clientX - this.dialogPosition.x;
+      this.dialogPosition.oldY = e.touches[0].clientY - this.dialogPosition.y;
+      // document.addEventListener("mousemove", this.moveDialog);
+      // document.addEventListener("mouseup", this.stopMove);
+
+			document.addEventListener('touchmove', this.moveDialog)
+			document.addEventListener('touchend', this.stopMove)
+    },
+    moveDialog(e) {
+      if (this.dialogIsMove) {
+        // 获取窗口的宽度和高度
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+
+        // 获取对话框的宽度和高度
+				console.log(this.$refs.dialogRef.offsetWidth,this.$refs.dialogRef.offsetHeight,windowWidth,windowHeight)
+        const dialogWidth = this.$refs.dialogRef.offsetWidth;
+        const dialogHeight = this.$refs.dialogRef.offsetHeight;
+
+        // 计算新位置
+        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 (newX > windowWidth - dialogWidth) newX = windowWidth - dialogWidth;
+        if (newY > windowHeight - dialogHeight)
+          newY = windowHeight - dialogHeight;
+
+        // 更新对话框的位置
+        this.dialogPosition.x = newX;
+        this.dialogPosition.y = newY;
+        // this.dialogPosition.x = e.clientX - this.dialogPosition.oldX;
+        // this.dialogPosition.y = e.clientY - this.dialogPosition.oldY;
+      }
+    },
+    stopMove() {
+      this.dialogIsMove = false;
+			document.removeEventListener('touchmove', this.moveDialog)
+			document.removeEventListener('touchend', this.stopMove)
+      // document.removeEventListener("mousemove", this.moveDialog);
+      // document.removeEventListener("mouseup", this.stopMove);
+    }
+  },
+  mounted() {
+    this.getChatList();
+		this.$nextTick(()=>{
+		})
+  }
+};
+</script>
+
+<style scoped>
+.pocAi {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
+  box-sizing: border-box;
+  background-color: black;
+}
+
+.pa_background {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0.7;
+  z-index: 1;
+}
+
+.pa_background > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pa_documentArea {
+  width: 0;
+  height: 0;
+  box-sizing: border-box;
+  z-index: 4;
+}
+
+.pa_da_dialog {
+  width: calc(100vw - 20px);
+  height: 300px;
+  background-color: #fff;
+  opacity: 1;
+  border-radius: 8px;
+  position: fixed;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 2px solid #ffffff8c;
+  box-shadow: 0px 8px 10px -5px #00000014;
+
+  box-shadow: 0px 16px 24px 2px #0000000a;
+
+  box-shadow: 0px 6px 30px 5px #0000000d;
+}
+
+.pa_da_d_head {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  position: absolute;
+	cursor: move;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.9) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+
+.pa_da_d_head {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.9) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+
+.pa_da_d_h_left {
+  font-size: 18px;
+}
+
+.pa_da_d_h_left > span {
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  margin-left: 10px;
+  color: #fff;
+}
+
+.pa_da_d_h_right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pa_da_d_h_r_active {
+  background: #ffffff38;
+  border-radius: 8px;
+}
+
+.pa_da_d_h_right > span {
+  width: 25px;
+  height: 25px;
+  margin-right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pa_da_d_h_right > span > svg {
+  width: 90%;
+  height: 90%;
+  fill: #fff;
+  cursor: pointer;
+}
+
+.pa_da_d_content {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  overflow: auto;
+  z-index: 2;
+  position: relative;
+}
+
+.pa_da_d_bottom {
+  width: 100%;
+  height: 50px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  z-index: 3;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.9) 100%
+  );
+}
+
+.pa_da_d_b_r_contentList {
+  width: 150px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 20px;
+  position: relative;
+}
+
+.pa_da_d_b_r_contentList > span {
+  padding: 7px 15px;
+  background: #ffffff38;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.pa_da_d_b_r_contentList > span > img {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.pa_da_d_b_r_cl_fileList {
+  width: 180px;
+  height: 200px;
+  position: absolute;
+  bottom: 45px;
+  right: 10px;
+  background: #00000099;
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 4px;
+  box-shadow: 0px 5px 5px -3px #0000001a;
+
+  box-shadow: 0px 8px 10px 1px #0000000f;
+
+  box-shadow: 0px 3px 14px 2px #0000000d;
+  overflow: auto;
+}
+
+.pa_da_d_b_r_cl_fileList > div {
+  width: 100%;
+  height: 30px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 6px;
+  box-sizing: border-box;
+  padding: 0 10px;
+  transition: 0.3s;
+}
+
+.pa_da_d_b_r_cl_fileList > div > span {
+  font-size: 14px;
+  cursor: pointer;
+  color: #ffffff8c;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+
+.pa_da_d_b_r_cl_fileList > .pa_da_d_b_r_cl_fl_active {
+  background-color: #3681fc !important;
+  color: #ffffff8c !important;
+}
+
+.pa_da_d_b_r_cl_fileList > .pa_da_d_b_r_cl_fl_active > span {
+  color: #fff !important;
+}
+.pa_da_d_b_r_cl_fileList > div:hover {
+  background-color: #ffffff36;
+}
+
+.pa_da_head {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: flex-end;
+  background-color: #fff;
+}
+
+.pa_da_head > span {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.pa_da_Image {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #e2e2e2;
+  box-sizing: border-box;
+  padding: 20px;
+}
+
+.pa_da_Video {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #e2e2e2;
+  box-sizing: border-box;
+  padding: 20px 20px 40px 20px;
+}
+
+.pa_da_Video >>> .video-js {
+  width: 100%;
+  height: 100%;
+}
+
+.pa_da_Video >>> .vjs-big-play-button {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.pa_chatArea {
+  width: 100vw;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 2;
+}
+
+.pa_ca_back {
+  font-size: 20px;
+  cursor: pointer;
+	z-index: 3;
+}
+
+.pa_ca_back {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+	color: #fff;
+}
+
+.pa_ca_header {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+.pa_ca_chat {
+  width: 100%;
+  box-sizing: border-box;
+  height: calc(100%);
+}
+
+.pa_ca_c_list {
+  width: 100%;
+  height: calc(100% - 60px);
+  overflow: auto;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  /* padding: 50px 0; */
+  box-sizing: border-box;
+  /* background-color: red; */
+}
+
+.pa_ca_c_bottom {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  box-sizing: border-box;
+}
+
+.pa_ca_c_b_inputArea {
+  width: 95%;
+
+  height: 85%;
+  background-color: #fff;
+  border-radius: 100px;
+  box-shadow: 0 0 10px #ccc;
+  display: flex;
+  align-items: center;
+}
+.pa_ca_c_b_btnArea {
+  width: 60px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.pa_ca_c_b_ba_btn {
+  width: 40px;
+  height: 40px;
+  margin-right: 5px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  /* background-color: red; */
+  background-image: linear-gradient(to left, #4977eb 0%, #005bea 100%);
+}
+
+.pa_ca_c_b_ba_btn > svg {
+  fill: #fff;
+  width: 23px;
+  height: 23px;
+}
+
+.pa_ca_c_b_inputArea > textarea {
+  resize: none;
+  min-height: 50px;
+  height: calc(100% - 40px);
+  background: none;
+  margin: 7px 0;
+  width: calc(100% - 60px);
+  font-size: 16px;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: auto;
+  margin-left: 20px;
+}
+
+#myTextarea::-webkit-input-placeholder {
+  /* Chrome, Opera, Safari */
+  font-size: 14px; /* 修改placeholder字体大小 */
+  color: grey; /* 修改placeholder文字颜色 */
+}
+
+#myTextarea:-moz-placeholder {
+  /* Firefox 18- */
+  font-size: 14px; /* 修改placeholder字体大小 */
+  color: grey; /* 修改placeholder文字颜色 */
+  opacity: 1; /* 修复Firefox的透明度问题 */
+}
+
+#myTextarea::-moz-placeholder {
+  /* Firefox 19+ */
+  font-size: 14px; /* 修改placeholder字体大小 */
+  color: grey; /* 修改placeholder文字颜色 */
+  opacity: 1; /* 修复Firefox的透明度问题 */
+}
+
+#myTextarea:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  font-size: 14px; /* 修改placeholder字体大小 */
+  color: grey; /* 修改placeholder文字颜色 */
+}
+
+.userChat {
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+
+.uc_left {
+  max-width: 90vw;
+  width: auto;
+  height: auto;
+  padding: 10px 0px 10px 0;
+}
+
+.uc_left > .chatName {
+  text-align: right;
+}
+
+.uc_left > .chatMessage {
+  border-radius: 10px 2px 10px 10px;
+  background-color: #e0eafb;
+	padding: 10px 20px;
+}
+
+.uc_left > .chatMessage > .cm_btnArea {
+  left: -35px;
+}
+
+/* .uc_left > span {
+  width: auto;
+  height: auto;
+  padding: 20px 20px;
+  background-color: #4a7ff4;
+  border-radius: 10px;
+  color: #fff;
+} */
+
+.uc_right {
+  padding: 10px 20px 10px 10px;
+}
+
+.aiChat {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  /* padding: 20px 0; */
+}
+
+.ac_left {
+  padding: 10px 10px 10px 20px;
+}
+
+.ac_right {
+  width: auto;
+  height: auto;
+  padding: 10px 0px 10px 0;
+}
+
+.chatMessage {
+  max-width: 50vw;
+  background-color: #ffffff;
+  border: solid 1px #000000e5;
+  color: black;
+  padding: 0px 20px;
+  border-radius: 2px 8px 8px 8px;
+  font-size: 16px;
+  position: relative;
+  box-shadow: 0px 4px 10px 0px #1d398314;
+  box-shadow: 1px 1px 20px 4px #1d39830d;
+	word-break: break-all
+}
+
+.cm_btnArea {
+  width: 30px;
+  height: 100%;
+  position: absolute;
+  right: -35px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.cm_btnArea > span {
+  width: 15px;
+  height: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin-bottom: 5px;
+}
+
+.cm_btnArea > span > svg {
+  width: 100%;
+  height: 100%;
+}
+
+.chatMessage >>> ol {
+  margin-left: 25px;
+}
+
+.chatMessage >>> ul {
+  margin-left: 25px;
+}
+
+.ac_r_time {
+  margin-top: 10px;
+  font-size: 16px;
+  color: #8f8f8f;
+}
+
+.ac_r_btnArea {
+  margin-top: 5px;
+  width: auto;
+  display: flex;
+  align-items: center;
+  height: auto;
+}
+.ac_r_btnArea > span {
+  max-height: 60px;
+  padding: 5px 10px 5px 10px;
+  background: #ffffff8c;
+  border: 1px solid #ffffff8c;
+  border-radius: 6px;
+  cursor: pointer;
+  color: black;
+  font-size: 14px;
+  margin-right: 20px;
+}
+
+.chatAvatar {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  background: #fff;
+  border-radius: 100%;
+}
+
+
+
+.chatName {
+  font-size: 18px;
+  /* color: rgb(80, 80, 80); */
+  color: #ffffff8c;
+  margin-bottom: 8px;
+}
+</style>

+ 296 - 0
src/views/pocAiClassroom/component/chapterCard.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="chapterCard" >
+    <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_image">
+          <el-image
+            style="width: 100%;height: 100%;"
+            :src="require('../../../assets/images/pocAiClassroom/classImage.png')"
+          ></el-image>
+          <span v-text="item.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>
+              {{ subjectList.find(i => i.value === item.subject).label }}
+            </div>
+          </div>
+        </div>
+        <div class="cc_b_i_btnArea" v-if="showBtnAreaIndex===index">
+          <span
+            class="cc_b_i_ba_goClass"
+            v-if="[0].includes(item.type)"
+            @click.stop="goClass(item)"
+            >去上课</span
+          >
+          <span
+            class="cc_b_i_ba_doWorks"
+            v-if="[0, 1].includes(item.type)"
+            @click.stop="goWorks(item)"
+            >做练习</span
+          >
+        </div>
+      </div>
+    </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: {
+    data: {
+      type: Object,
+      default: () => {}
+    },
+    subjectList: {
+      type: Array,
+      default: () => []
+    }
+  },
+	directives: {
+    "click-outside": clickOutside // 注册自定义指令
+  },
+  data() {
+    return {
+      userId: this.$route.query.userid,
+      org: this.$route.query.org,
+      oid: this.$route.query.oid,
+			showBtnAreaIndex:"",
+    };
+  },
+  methods: {
+    goClass(item) {
+			this.$router.push(
+          `/pocClass?userid=${this.userId}&org=${this.org}&oid=${this.oid}`
+        );
+    },
+    goWorks(item) {
+      this.$router.push(
+        `/pocDoTask?userid=${this.userId}&org=${this.org}&oid=${this.oid}`
+      );
+    },
+		handleClickOutside(){
+			this.showBtnAreaIndex = ""
+		}
+  }
+};
+</script>
+
+<style scoped>
+.chapterCard {
+  width: 100%;
+  height: auto;
+  margin-top: 30px;
+  position: relative;
+}
+
+.cc_title {
+  margin: 20px 0;
+  font-size: 22px;
+}
+
+.cc_box {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.cc_b_item {
+  width: 120px;
+  height: 90px;
+  margin-right: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 40px;
+  background-color: #fff;
+  padding: 16px;
+  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;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+	opacity: 1;
+	transition: .3s;
+}
+
+.cc_b_i_image > span {
+  position: absolute;
+  font-size: 14px;
+  color: black;
+  display: block;
+  max-width: 95%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.cc_b_i_message {
+  width: 100%;
+  height: 45px;
+  display: flex;
+  margin-top: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cc_b_i_message > div > span {
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.cc_b_i_message > div > div {
+  font-size: 12px;
+  padding: 2px;
+  background-color: #e0eafb;
+  border-radius: 3px;
+  color: #3681fc;
+  font-weight: bold;
+}
+
+.cc_b_i_btnArea {
+  width: 100%;
+  height: 45px;
+  position: absolute;
+  bottom: 0px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  display: none;
+}
+
+.cc_b_i_btnArea > span {
+  flex: 1;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 4px;
+  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;
+  transition: 0.3s;
+}
+
+.cc_b_i_btnArea > span:active {
+  color: #3681fc;
+  border-color: #e0eafb;
+}
+
+.cc_b_i_btnArea > span:nth-of-type(2n) {
+  margin-left: 5px;
+}
+
+/* .cc_b_item:hover .cc_b_i_image>.cc_b_i_btnArea{
+	display: flex;
+} */
+
+/* .cc_b_i_image {
+  width: 100%;
+  height: 260px;
+  background-color: #fff;
+  border-radius: 10px;
+  overflow: hidden;
+	position: relative;
+}
+
+.cc_b_i_btnArea{
+	width: 100%;
+	height: 50px;
+	position: absolute;
+	bottom: 5px;
+	display: none;
+	justify-content: space-around;
+	align-items: center;
+	padding: 0 10px;
+	box-sizing: border-box;
+	
+} */
+
+/* .cc_b_i_btnArea>span:nth-of-type(2n){
+	margin-left: 10px;
+}
+
+.cc_b_i_title {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cc_b_i_title > span {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 20px;
+} */
+</style>

+ 471 - 0
src/views/pocAiClassroom/component/settingsDialog.vue

@@ -0,0 +1,471 @@
+<template>
+  <div>
+    <el-dialog
+      :center="true"
+      :visible.sync="show"
+      :close-on-click-modal="true"
+      width="95vw"
+      class="settingsDialog"
+    >
+      <!-- <div v-if="showDialog == true" class="a-dialog" v-el-drag-dialog> -->
+      <div class="sd_top">
+        <div class="sd_t_topTit">设置</div>
+        <div class="sd_t_right">
+          <span @click.stop="close()">×</span>
+        </div>
+      </div>
+      <div class="sd_box">
+        <div class="sd_b_head">
+          <span
+            :class="[showType == 0 ? 'sd_b_h_active' : '']"
+            @click.stop="changeShowType(0)"
+            >个人信息</span
+          >
+          <span
+            :class="[showType == 1 ? 'sd_b_h_active' : '']"
+            @click.stop="changeShowType(1)"
+            >学伴资料
+          </span>
+        </div>
+
+        <div class="sd_b_main">
+          <div class="sd_b_m_type" v-show="showType == 0">
+            <div class="sd_b_m_t_avatarArea">
+              <el-image
+                class="sd_b_m_t1_avatar"
+                :src="form.avatar"
+                fit="cover"
+              ></el-image>
+            </div>
+            <div class="sd_b_m_t_formArea">
+              <div class="sd_b_m_t_fa_item">
+                <span class="sd_b_m_t_fa_i_inputLabel">姓名</span>
+
+                <div class="sd_b_m_t_fa_i_inputArea">
+                  <el-input
+                    class="sd_b_m_t_fa_i_input"
+                    v-model="form.userName"
+                    placeholder="请输入姓名"
+                  ></el-input>
+                </div>
+              </div>
+
+              <div class="sd_b_m_t_fa_item">
+                <span class="sd_b_m_t_fa_i_inputLabel">年级</span>
+                <div class="sd_b_m_t_fa_i_inputArea">
+                  <el-select
+                    v-model="form.grade"
+                    placeholder="请选择年级"
+                    class="sd_b_m_t_fa_i_input"
+                  >
+                    <el-option
+                      v-for="(item, index) in gradeList"
+                      :key="index"
+                      :label="item"
+                      :value="index"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+            </div>
+            <div class="sd_b_m_t_bottomArea">
+              <span @click.stop="saveSefMessage()">保存修改</span>
+            </div>
+          </div>
+          <div class="sd_b_m_type" v-show="showType == 1">
+            <div class="sd_b_m_t_avatarArea">
+              <div class="sd_b_m_t_characterList">
+                <el-carousel
+                  :interval="4000"
+                  type="card"
+                  height="150px"
+                  :autoplay="false"
+                  :initial-index="form.characterIndex"
+                  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>
+            <div class="sd_b_m_t_formArea">
+              <div class="sd_b_m_t_fa_item">
+                <span class="sd_b_m_t_fa_i_inputLabel">昵称</span>
+
+                <div class="sd_b_m_t_fa_i_inputArea">
+                  <div>{{ form.characterName }}</div>
+                </div>
+              </div>
+
+              <div class="sd_b_m_t2_fa_item">
+                <span class="sd_b_m_t_fa_i_inputLabel">性格</span>
+                <div class="sd_b_m_t2_fa_i_inputArea">
+                  <textarea v-model="form.personality" disabled></textarea>
+                </div>
+              </div>
+            </div>
+            <div class="sd_b_m_t_bottomArea">
+              <span @click.stop="updateCharacter()">更新学伴设置</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    gradeList: {
+      type: Array,
+      default: () => []
+    },
+    characterList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      show: false,
+      showType: 0, //0:个人信息 1:学伴资料
+      form: {
+        avatar: require("../../../assets/images/pocAiClassroom/defaultAvatar.png"),
+        userName: "科科",
+        grade: 7,
+        characterIndex: 0,
+        characterName: "迷人的大反派",
+        personality:
+          "心思细腻,能够敏锐捕捉到别人的需求,喜欢支持和鼓励他人,富有耐心"
+      }
+    };
+  },
+  methods: {
+    open(data, type = 0) {
+      this.form.userName = data.userName;
+      this.form.grade = data.grade;
+      this.form.characterIndex = data.choseCharacter;
+      this.form.personality = data.personality;
+      let character = this.characterList.find(
+        i => i.index == data.choseCharacter
+      );
+      this.form.characterName = character.name;
+      this.form.personality = character.personality;
+      this.showType = type;
+      this.show = true;
+    },
+    close() {
+      this.show = false;
+      this.init();
+    },
+    init() {
+      this.$nextTick(() => {
+        this.form = {
+          avatar: require("../../../assets/images/pocAiClassroom/defaultAvatar.png"),
+          userName: "",
+          grade: 0,
+          characterIndex: 0,
+          characterName: "",
+          personality:""
+        };
+      });
+    },
+    changeShowType(newType) {
+      this.showType = newType;
+    },
+    saveSefMessage() {
+      this.$emit("changeUserInfo", {
+        avatar: this.form.avatar,
+        userName: this.form.userName,
+        grade: this.form.grade
+      });
+    },
+    updateCharacter() {
+      this.$emit("changeCharacterInfo",{
+        index: this.form.characterIndex,
+        name: this.form.characterName,
+        personality: this.form.personality
+      });
+    },
+    changeCharacter(_index) {
+      this.form.characterIndex = _index;
+      this.form.characterName = this.characterList[_index].name;
+      this.form.personality = this.characterList[_index].personality;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.settingsDialog >>> .el-dialog {
+  min-width: 95vw;
+  max-width: 700px;
+  height: 500px;
+  max-height: 80%;
+  box-shadow: 0px 0 8px 0px #555555;
+  border-radius: 8px;
+  background-color: #fff;
+  /* top: 0px; */
+  /* margin: 0 auto; */
+  overflow: hidden;
+}
+.settingsDialog >>> .el-dialog__body {
+  height: 100%;
+  min-width: 95vw;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding-bottom: 50px;
+  padding-top: 10px;
+}
+.settingsDialog >>> .el-dialog__header {
+  display: none;
+}
+
+.sd_top {
+  /* background: #adadad; */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  height: 54px;
+  border-radius: 8px 8px 0 0;
+  user-select: none;
+  font-size: 24px;
+  font-weight: bold;
+  color: black;
+  /* border-bottom: 1px #ccc solid; */
+}
+.sd_top >>> .el-input__icon {
+  line-height: 32px;
+}
+
+.sd_t_right {
+  cursor: pointer;
+}
+
+.sd_box {
+  width: 100%;
+  padding: 0 30px 20px 30px;
+  box-sizing: border-box;
+  height: calc(100% - 30px);
+}
+
+.sd_b_head {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sd_b_head > span {
+  font-size: 24px;
+  width: 220px;
+  margin: 0 10px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+
+.sd_b_h_active::after {
+  position: relative;
+  content: "";
+  width: 100%;
+  height: 3px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background-color: #3681fc;
+}
+
+.sd_b_main {
+  width: 100%;
+  height: calc(100% - 60px);
+}
+
+.sd_b_m_type {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.sd_b_m_t_avatarArea {
+  width: 100%;
+  max-height: 150px;
+  min-height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sd_b_m_t_characterList {
+  width: 100%;
+  height: 100%;
+	margin: auto;
+	margin-top: 10px;
+}
+
+.sd_b_m_t_characterList >>> .is-active .cc_image {
+  opacity: 1;
+}
+
+.characterCard {
+  height: 100%;
+  width: 90%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.3s;
+  background-color: #fff;
+}
+
+.cc_image {
+  opacity: 0.4;
+  transition: 0.3s;
+}
+
+.sd_b_m_t1_avatar {
+  width: 100px;
+  height: 100px;
+}
+
+.sd_b_m_t_formArea {
+  width: 100%;
+  height: calc(100% - 220px);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sd_b_m_t_fa_item {
+  width: 100%;
+  height: 60px;
+  border-radius: 6px;
+  background-color: #f0f2f5;
+  border: 1px solid #e7e7e7;
+  margin-bottom: 20px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.sd_b_m_t_fa_i_inputLabel {
+  width: 90px;
+  height: 45px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: 20px;
+  font-size: 20px;
+  border-right: 2px solid #e7e7e7;
+}
+
+.sd_b_m_t_fa_i_inputArea {
+  width: calc(100% - 110px);
+  height: 45px;
+  margin: 0 10px;
+}
+
+.sd_b_m_t_fa_i_inputArea > div {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: default;
+  font-size: 16px;
+}
+
+.sd_b_m_t_bottomArea {
+  width: 100%;
+  height: 70px;
+	margin-top: 20px;
+}
+
+.sd_b_m_t_bottomArea > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 20px;
+  width: 100%;
+  height: 90%;
+  background-color: #3681fc;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.sd_b_m_t_fa_i_input {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+}
+
+.sd_b_m_t_fa_i_input >>> .el-input__inner {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+}
+
+.sd_b_m_t_fa_i_input >>> .el-input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  font-size: 16px;
+  background-color: transparent;
+}
+
+.sd_b_m_t2_fa_item {
+  width: 100%;
+  height: 50px;
+  max-height: 50px;
+  border-radius: 6px;
+  background-color: #f0f2f5;
+  border: 1px solid #e7e7e7;
+  margin-bottom: 20px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  /* padding-top: 7.5px; */
+  box-sizing: border-box;
+}
+
+.sd_b_m_t2_fa_i_inputArea {
+  width: calc(100% - 110px);
+  height: 100%;
+  max-height: 50px;
+}
+
+.sd_b_m_t2_fa_i_inputArea > textarea {
+  height: 90%;
+  width: calc(100%);
+  margin: 0 0px 5px 10px;
+  font-size: 16px;
+  background: none;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: auto;
+}
+</style>

+ 97 - 0
src/views/pocAiClassroom/component/txtView.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="txtView" v-loading="loading">
+		<div class="tv_content" v-text="content"></div>
+	</div>
+</template>
+
+<script>
+import "../../../utils/aws-sdk-2.235.1.min.js";
+
+const getFile = url => {
+  return new Promise((resolve, reject) => {
+    var credentials = {
+      accessKeyId: "AKIATLPEDU37QV5CHLMH",
+      secretAccessKey: "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"
+    }; //秘钥形式的登录上传
+    window.AWS.config.update(credentials);
+    window.AWS.config.region = "cn-northwest-1"; //设置区域
+    let url2 = url;
+    let _url2 = "";
+    if (
+      url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+    ) {
+      _url2 = url2.split(
+        "https://view.officeapps.live.com/op/view.aspx?src="
+      )[1];
+    } else {
+      _url2 = url2;
+    }
+    var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+    let name = decodeURIComponent(
+      _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
+    );
+    var params = {
+      Bucket: "ccrb",
+      Key: name
+    };
+    s3.getObject(params, function(err, data) {
+      if (err) {
+        console.log(err, err.stack);
+        resolve({ data: 1 });
+      } else {
+        const fileContent = data.Body.toString("utf-8");
+        resolve({ data: fileContent });
+      } // sxuccessful response
+    });
+    // axios({
+  });
+};
+export default {
+  props: {
+    url: {
+      type: String,
+      default: ""
+    },
+  },
+	data(){
+		return{
+			content:"",
+			loading:""
+		}
+	},
+	methods: {
+		getTxtContent() {
+			if(!this.url)return;
+			this.loading = true;
+			getFile(this.url).then(res=>{
+				this.loading = false;
+				this.content = res.data;
+			})
+		},
+	},
+	mounted(){
+		this.getTxtContent();
+	}
+};
+</script>
+
+<style scoped>
+.txtView{
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	background-color: #ececec;
+	padding: 40px 20px;
+}
+
+.tv_content{
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	background-color: #fff;
+	overflow: auto;
+	word-wrap: break-word;
+	border-radius: 3px;
+	white-space: pre;
+}
+</style>

+ 252 - 0
src/views/pocAiClassroom/component/vpdf.vue

@@ -0,0 +1,252 @@
+<template>
+  <!--使用 pdfvuer 实现 滑动浏览 单印章-->
+  <div class="pdf">
+    <div class="loading" v-show="isloading">
+      <span>pdf可能会加载时间有点长,请耐心等待...</span>
+    </div>
+    <!-- <div id="contentArea" class="show" v-if="!loading">
+      <pdf :scale.sync="scale" :resize="true" ref="wrapper" class="p-pdf" :src="pdfData" v-for="i in numPages" :key="i"
+        :id="i" :page="i" style="width: 100%">
+      </pdf>
+    </div> -->
+    <iframe ref="viframe" style="width: 100%; height: 100%; border: none"
+      :src="'https://cloud.cocorobo.cn/pdf.js/web/viewer.html?file=' + pdfUrl"></iframe>
+    <!-- <div class="rightArea">
+      <div class="toolGroup">
+        <div class="page">第 {{ page }} / {{ numPages }} 页</div>
+        <el-button type="primary" @click.stop="prePage">上一页</el-button>
+        <el-button type="primary" @click.stop="nextPage">下一页</el-button>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+// import pdfvuer from "pdfvuer"; // pdfvuer 版本为@1.6.1
+// import "pdfjs-dist/build/pdf.worker.entry";
+// const PDF = require("pdfjs-dist");
+// PDF.GlobalWorkerOptions.workerSrc = "../../common/pdf.worker.js";
+
+export default {
+  name: "Pdfvuer",
+  components: {
+    // pdf: pdfvuer,
+  },
+  props: {
+    // 当前pdf路径
+    pdfUrl: {
+      type: String,
+      default:
+        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
+    },
+    ppage: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      page: 1, // 当前页
+      numPages: 0, // 总页数
+      pdfData: undefined,
+      inputPage: 1, // 输入的页码
+      isloading: false,
+      scale: "page-width",
+    };
+  },
+  mounted() {
+    // this.isloading = this.$loading.service({
+    //   background: "rgba(255, 255, 255, 0.7)",
+    //   target: document.querySelector(".loading"),
+    //   text: "加载中...",
+    //   spinner: "",
+    // });
+    this.isloading = false;
+    this.$refs.viframe.onload = function () {
+      this.isloading = false
+    }
+    console.log(this.isloading);
+    // this.getPdf();
+  },
+  beforeDestroy() { },
+  watch: {
+    pdfUrl: function (s) {
+      // this.isloading = this.$loading.service({
+      //   background: "rgba(255, 255, 255, 0.7)",
+      //   target: document.querySelector(".loading"),
+      //   text: "加载中...",
+      //   spinner: "",
+      // });
+      this.isloading = false;
+      this.$refs.viframe.onload = function () {
+        this.isloading = false
+      }
+      // this.getPdf();
+    },
+  },
+  methods: {
+    // 获取 pdf 信息
+    getPdf() {
+      this.pdfData = pdfvuer.createLoadingTask({
+        url: this.pdfUrl,
+        cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/",
+        cMapPacked: true,
+      });
+      this.pdfData
+        .then((pdf) => {
+          // this.isloading.close();
+          this.isloading = false
+          this.numPages = pdf.numPages;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 上一页
+    prePage() {
+      let page = this.page;
+      page = page > 1 ? page - 1 : 1;
+      this.page = page;
+    },
+    // 下一页
+    nextPage() {
+      let page = this.page;
+      page = page < this.numPages ? page + 1 : this.numPages;
+      this.page = page;
+    },
+  },
+};
+</script>
+<style scoped>
+.loading {
+  height: 100%;
+  width: 100%;
+  /* background: #000; */
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* background-color: rgba(255, 255, 255, 0.7); */
+  background-color: rgba(255, 255, 255, 1);
+  z-index: 9;
+  font-size: 20px;
+  color: #007fff;
+}
+
+.pdf {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.pdf .show {
+  margin: auto;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.pdf .show .p-pdf {
+  overflow: hidden;
+}
+
+.pdf .show .p-pdf .line {
+  position: absolute;
+  width: 50px;
+  right: -50px;
+  background: rgb(255, 186, 96);
+  height: 2px;
+}
+
+.pdf .show .p-pdf span {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+}
+
+.pdf .show .p-pdf span+span {
+  margin-top: 10px;
+}
+
+.pdfbox {
+  /* border: 3px solid #000; */
+  /* box-sizing: border-box; */
+  /* border-radius: 4px; */
+  /* overflow: hidden; */
+}
+
+.pdf .pdf_footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 10px 0;
+  width: 100%;
+  height: 75px;
+  background-color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.pdf .pdf_footer .info {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: center;
+}
+
+.pdf .p-pdf .viewerContainer {
+  width: 100%;
+}
+
+/* .pdf .pdf_footer .info div {
+  width: 30%;
+} */
+.pdf .pdf_footer .operate {
+  margin: 10px 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+
+.pdf .pdf_footer .operate div {
+  text-align: center;
+  font-size: 15px;
+}
+
+.pdf .pdf_footer .operate .btn {
+  cursor: pointer;
+  margin: 5px 10px;
+  width: 100px;
+  border-radius: 10px;
+  padding: 5px;
+  color: #fff;
+  background-color: #066ebe;
+}
+
+.pdf::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.pdf::-webkit-scrollbar {
+  border-radius: 10px;
+  background-color: #b8bdc9;
+}
+
+/*定义滑块 内阴影+圆角*/
+.pdf::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
+  background-color: #2c5ab3;
+}
+</style>

+ 201 - 0
src/views/pocAiClassroom/component/vword.vue

@@ -0,0 +1,201 @@
+<template>
+  <!--使用 pdfvuer 实现 滑动浏览 单印章-->
+  <div class="pdf">
+    <div class="loading" v-if="isloading">
+      <span>可能会加载时间有点长,请耐心等待...</span>
+    </div>
+    <iframe
+      ref="viframe"
+      style="width: 100%; height: 100%; border: none"
+      :src="pdfUrl"
+    ></iframe>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "Pdfvuer",
+  components: {
+    // pdf: pdfvuer,
+  },
+  props: {
+    // 当前pdf路径
+    pdfUrl: {
+      type: String,
+      default:
+        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
+    },
+    ppage: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      page: 1, // 当前页
+      numPages: 0, // 总页数
+      pdfData: undefined,
+      inputPage: 1, // 输入的页码
+      isloading: false,
+      scale: "page-width",
+    };
+  },
+  mounted() {
+    let _this = this;
+    _this.isloading = true;
+    _this.$refs.viframe.onload = function () {
+      _this.isloading = false;
+    };
+    console.log(_this.isloading);
+    // this.getPdf();
+  },
+  beforeDestroy() {},
+  watch: {
+    pdfUrl: function (s) {
+      let _this = this;
+      _this.isloading = true;
+      _this.$refs.viframe.onload = function () {
+        _this.isloading = false;
+      };
+      console.log(_this.isloading);
+      // this.getPdf();
+    },
+  },
+  methods: {
+  },
+};
+</script>
+<style scoped>
+.loading {
+  height: 100%;
+  width: 100%;
+  /* background: #000; */
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* background-color: rgba(255, 255, 255, 0.7); */
+  background-color: rgba(255, 255, 255, 1);
+  z-index: 9;
+  font-size: 20px;
+  color: #007fff;
+}
+
+.pdf {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.pdf .show {
+  margin: auto;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.pdf .show .p-pdf {
+  overflow: hidden;
+}
+
+.pdf .show .p-pdf .line {
+  position: absolute;
+  width: 50px;
+  right: -50px;
+  background: rgb(255, 186, 96);
+  height: 2px;
+}
+
+.pdf .show .p-pdf span {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+}
+
+.pdf .show .p-pdf span + span {
+  margin-top: 10px;
+}
+
+.pdfbox {
+  /* border: 3px solid #000; */
+  /* box-sizing: border-box; */
+  /* border-radius: 4px; */
+  /* overflow: hidden; */
+}
+
+.pdf .pdf_footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 10px 0;
+  width: 100%;
+  height: 75px;
+  background-color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.pdf .pdf_footer .info {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: center;
+}
+
+.pdf .p-pdf .viewerContainer {
+  width: 100%;
+}
+
+/* .pdf .pdf_footer .info div {
+  width: 30%;
+} */
+.pdf .pdf_footer .operate {
+  margin: 10px 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+
+.pdf .pdf_footer .operate div {
+  text-align: center;
+  font-size: 15px;
+}
+
+.pdf .pdf_footer .operate .btn {
+  cursor: pointer;
+  margin: 5px 10px;
+  width: 100px;
+  border-radius: 10px;
+  padding: 5px;
+  color: #fff;
+  background-color: #066ebe;
+}
+
+.pdf::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.pdf::-webkit-scrollbar {
+  border-radius: 10px;
+  background-color: #b8bdc9;
+}
+
+/*定义滑块 内阴影+圆角*/
+.pdf::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
+  background-color: #2c5ab3;
+}
+</style>

+ 1928 - 0
src/views/pocAiClassroom/doTask.vue

@@ -0,0 +1,1928 @@
+<template>
+  <div class="doTask">
+    <!-- <div class="dt_back" @click.stop="back()">返回</div> -->
+    <div class="dt_main" v-if="!isSubmit">
+      <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_message">
+            {{ taskMessage.grade }}<span>|</span>{{ taskMessage.semester }}<span>|</span>{{ taskMessage.edition
+            }}<span>|</span>{{ taskMessage.subject }}
+          </div>
+        </div>
+        <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">
+                <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>
+            </div>
+
+            <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 class="dt_m_box">
+        <div class="dt_m_b_left">
+          <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 class="dt_m_b_l_title">{{ classTitle }}</div> -->
+          <div class="dt_m_b_l_task">
+            <div class="dt_m_b_l_t_title">
+              {{ showTaskIndex + 1 }}.
+              <span>{{ typeof taskList[showTaskIndex].answer == 'object' ? '[多选题]' : '[单选题]' }}</span
+              >{{ taskList[showTaskIndex].teststitle }}
+            </div>
+            <div class="dt_m_b_l_t_choseList">
+              <div
+                :class="[
+                  'dt_m_b_l_t_cl_item',
+                  typeof taskList[showTaskIndex].answer == 'object'
+                    ? taskList[showTaskIndex].answer2.includes(index)
+                      ? 'dt_m_b_l_t_cl_itemActive'
+                      : ''
+                    : taskList[showTaskIndex].answer2 === index
+                    ? 'dt_m_b_l_t_cl_itemActive'
+                    : ''
+                ]"
+                v-for="(item, index) in taskList[showTaskIndex].checkList"
+                @click.stop="choseAnswer(index)"
+                :key="showTaskIndex + '-' + index"
+              >
+                <div>
+                  <span></span>
+                </div>
+                <span v-if="item.imgType == 1"
+                  ><span>{{ choseList[index] }}.</span><img :src="item.src" @click.stop="$hevueImgPreview(item.src)"
+                /></span>
+                <span v-else
+                  ><span>{{ choseList[index] }}.{{ item }}</span></span
+                >
+              </div>
+            </div>
+          </div>
+          <div class="dt_m_b_l_bottom">
+            <div class="dt_m_b_l_b_seekAssist" v-show="!showSeekAssist" @click.stop="seekAssist()">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M16.0911 7.91C16.0911 4.394 13.1601 1.563 9.60806 1.727C6.44706 1.873 3.87806 4.432 3.72106 7.593C3.59906 10.037 4.89706 12.189 6.86206 13.3V15.434C6.86206 15.911 7.24906 16.299 7.72706 16.299H12.0801C12.5571 16.299 12.9451 15.912 12.9451 15.434V13.3C14.8221 12.237 16.0911 10.222 16.0911 7.91Z"
+                  fill="#AECCFE"
+                />
+                <path
+                  d="M10.2181 1.729C10.4281 1.807 11.9881 2.424 13.2791 3.889C15.2841 6.165 15.2821 9.617 13.2351 11.856C12.9801 12.135 12.6881 12.412 12.3561 12.682C12.1591 12.842 12.0411 13.08 12.0411 13.333V15.047C12.0411 15.241 11.9011 15.407 11.7091 15.432C11.6531 15.439 11.5921 15.443 11.5251 15.443H7.95805C7.43905 15.443 7.17406 15.443 7.05206 15.189C7.12906 15.763 6.45606 16.227 8.51006 16.227H11.7931C11.7581 16.252 11.7191 16.276 11.6741 16.298H12.0781C12.2001 16.298 12.3151 16.273 12.4201 16.227H12.4961L12.4891 16.194C12.6261 16.12 12.7406 16.0102 12.8203 15.8764C12.9001 15.7426 12.9421 15.5898 12.9421 15.434V13.3C14.8211 12.238 16.0901 10.222 16.0901 7.91C16.0911 4.597 13.4891 1.894 10.2181 1.729Z"
+                  fill="#3681FC"
+                />
+                <path
+                  d="M7.76294 7.91C7.76294 8.19089 7.81827 8.46904 7.92576 8.72856C8.03326 8.98807 8.19081 9.22387 8.38944 9.4225C8.58806 9.62112 8.82386 9.77868 9.08338 9.88617C9.3429 9.99367 9.62104 10.049 9.90194 10.049C10.1828 10.049 10.461 9.99367 10.7205 9.88617C10.98 9.77868 11.2158 9.62112 11.4144 9.4225C11.6131 9.22387 11.7706 8.98807 11.8781 8.72856C11.9856 8.46904 12.0409 8.19089 12.0409 7.91C12.0409 7.6291 11.9856 7.35095 11.8781 7.09144C11.7706 6.83192 11.6131 6.59612 11.4144 6.3975C11.2158 6.19887 10.98 6.04131 10.7205 5.93382C10.461 5.82632 10.1828 5.771 9.90194 5.771C9.62104 5.771 9.3429 5.82632 9.08338 5.93382C8.82386 6.04131 8.58806 6.19887 8.38944 6.3975C8.19081 6.59612 8.03326 6.83192 7.92576 7.09144C7.81827 7.35095 7.76294 7.6291 7.76294 7.91Z"
+                  fill="#FFAF77"
+                />
+                <path
+                  d="M9.78495 9.95702C10.0519 9.97802 10.3139 9.98802 10.5669 9.99102C11.5139 9.77102 12.2199 8.92302 12.2199 7.90902C12.2199 6.72702 11.2619 5.77002 10.0809 5.77002C9.93995 5.77002 9.80295 5.78402 9.66895 5.81002L9.94795 5.97402C9.94795 5.97402 11.1929 6.75002 11.1929 7.84102C11.1929 8.93302 10.4069 9.72802 9.78495 9.95702Z"
+                  fill="#E67F36"
+                />
+                <path
+                  d="M12.442 7.91009C12.442 6.51009 11.303 5.37109 9.90301 5.37109C8.50301 5.37109 7.36401 6.51009 7.36401 7.91009C7.36401 9.17409 8.29301 10.2251 9.50301 10.4181V13.9381C9.50301 14.1591 9.68201 14.3381 9.90301 14.3381C10.124 14.3381 10.303 14.1591 10.303 13.9381V10.4181C11.513 10.2251 12.442 9.17409 12.442 7.91009ZM9.90201 9.64909C8.94301 9.64909 8.16301 8.86909 8.16301 7.91009C8.16301 6.95109 8.94301 6.17109 9.90201 6.17109C10.861 6.17109 11.641 6.95109 11.641 7.91009C11.641 8.86909 10.861 9.64909 9.90201 9.64909Z"
+                  fill="#211D38"
+                />
+                <path
+                  d="M12.0781 16.6981H7.72611C7.02911 16.6981 6.46111 16.1311 6.46111 15.4341V13.5291C4.39811 12.2651 3.20011 10.0051 3.32111 7.57311C3.48811 4.22611 6.24111 1.48211 9.59011 1.32711C11.4111 1.24311 13.1381 1.88811 14.4521 3.14311C15.7671 4.39911 16.4921 6.09211 16.4921 7.90911C16.4921 10.2011 15.2921 12.3331 13.3431 13.5281V15.4331C13.3431 16.1311 12.7761 16.6981 12.0781 16.6981ZM9.90511 2.12011C9.81311 2.12011 9.72011 2.12211 9.62711 2.12611C6.68611 2.26211 4.26711 4.67211 4.12111 7.61211C4.01111 9.81811 5.13711 11.8641 7.05911 12.9511C7.12065 12.986 7.17184 13.0366 7.20749 13.0978C7.24314 13.1589 7.26199 13.2283 7.26211 13.2991V15.4331C7.26211 15.6891 7.47011 15.8971 7.72711 15.8971H12.0801C12.3361 15.8971 12.5451 15.6891 12.5451 15.4331V13.3001C12.5451 13.1561 12.6231 13.0231 12.7481 12.9521C14.5651 11.9251 15.6931 9.99311 15.6931 7.91011C15.6931 6.31311 15.0571 4.82611 13.9011 3.72211C12.8121 2.68311 11.4021 2.12011 9.90511 2.12011Z"
+                  fill="#211D38"
+                />
+                <path
+                  d="M4.6361 9.55986C4.5271 9.55986 4.4261 9.48786 4.3951 9.37786C4.2271 8.78086 4.1581 8.15986 4.1891 7.53186C4.2071 7.17586 4.2581 6.82186 4.3421 6.47786C4.3751 6.34386 4.4121 6.20986 4.4541 6.07986C4.46416 6.04857 4.4803 6.01957 4.50159 5.99454C4.52288 5.9695 4.5489 5.94891 4.57817 5.93395C4.60743 5.91899 4.63936 5.90996 4.67213 5.90737C4.70489 5.90478 4.73784 5.90868 4.7691 5.91886C4.9001 5.96086 4.9731 6.10186 4.9301 6.23386C4.8921 6.35186 4.8581 6.47386 4.8281 6.59586C4.7521 6.90986 4.7051 7.23286 4.6891 7.55686C4.6601 8.13086 4.7241 8.69786 4.8771 9.24286C4.9141 9.37586 4.8371 9.51386 4.7041 9.55086C4.6811 9.55686 4.6591 9.55986 4.6361 9.55986ZM5.1211 5.41986C5.0801 5.41986 5.0381 5.40986 5.0001 5.38786C4.97137 5.37193 4.94607 5.35049 4.92565 5.32478C4.90522 5.29906 4.89007 5.26956 4.88106 5.23798C4.87205 5.2064 4.86935 5.17335 4.87314 5.14072C4.87692 5.1081 4.8871 5.07654 4.9031 5.04786C5.2636 4.40034 5.74536 3.82827 6.3221 3.36286C6.4291 3.27586 6.5871 3.29286 6.6741 3.39986C6.7611 3.50686 6.7441 3.66486 6.6371 3.75186C6.1071 4.18086 5.6711 4.69886 5.3401 5.29186C5.2941 5.37286 5.2091 5.41986 5.1211 5.41986ZM7.5241 3.19586C7.4321 3.19586 7.3431 3.14486 7.2991 3.05586C7.2381 2.93186 7.2891 2.78186 7.4131 2.72086C7.6881 2.58586 7.9781 2.47186 8.2731 2.38186C8.4051 2.34186 8.5451 2.41686 8.5851 2.54886C8.6251 2.68086 8.5501 2.82086 8.4181 2.86086C8.1491 2.94186 7.8851 3.04586 7.6341 3.16986C7.5991 3.18786 7.5611 3.19586 7.5241 3.19586Z"
+                  fill="white"
+                />
+                <path
+                  d="M12.7521 18.612H7.0521C6.8311 18.612 6.6521 18.433 6.6521 18.212C6.6521 17.991 6.8311 17.812 7.0521 17.812H12.7521C12.9731 17.812 13.1521 17.991 13.1521 18.212C13.1521 18.433 12.9731 18.612 12.7521 18.612Z"
+                  fill="#211D38"
+                />
+                <path
+                  d="M8.51611 7.9342C8.50411 7.9342 8.49211 7.9332 8.47911 7.9312C8.44659 7.92645 8.41532 7.91533 8.3871 7.89848C8.35888 7.88163 8.33427 7.85937 8.31466 7.83299C8.29506 7.80661 8.28086 7.77662 8.27287 7.74473C8.26488 7.71285 8.26326 7.67971 8.26811 7.6472C8.32011 7.2922 8.44511 7.0272 8.68411 6.7602C8.70588 6.73519 8.7324 6.71475 8.76214 6.70009C8.79188 6.68543 8.82423 6.67683 8.85733 6.67479C8.89042 6.67275 8.92359 6.67732 8.9549 6.68822C8.98621 6.69912 9.01505 6.71614 9.03972 6.73829C9.06439 6.76045 9.08441 6.78728 9.09861 6.81724C9.11281 6.84721 9.12091 6.87969 9.12243 6.91281C9.12396 6.94594 9.11888 6.97903 9.10749 7.01017C9.09611 7.04131 9.07864 7.06987 9.05611 7.0942C8.88511 7.2852 8.80011 7.4662 8.76211 7.7192C8.75417 7.77878 8.72484 7.83345 8.67958 7.87301C8.63432 7.91256 8.57622 7.93431 8.51611 7.9342Z"
+                  fill="white"
+                />
+                <path
+                  d="M4.24707 14.5559C4.22293 14.5019 4.18838 14.4532 4.14541 14.4125C4.10243 14.3719 4.05187 14.3401 3.99661 14.3191C3.94135 14.298 3.88248 14.288 3.82336 14.2897C3.76425 14.2914 3.70604 14.3047 3.65207 14.3289L3.35107 14.4639L3.21607 14.1629C3.19193 14.1089 3.15738 14.0602 3.11441 14.0195C3.07143 13.9789 3.02087 13.9471 2.96561 13.9261C2.91035 13.905 2.85148 13.895 2.79236 13.8967C2.73325 13.8983 2.67504 13.9117 2.62107 13.9359C2.39407 14.0379 2.29307 14.3039 2.39407 14.5309L2.52907 14.8319L2.22807 14.9669C2.00107 15.0689 1.90007 15.3349 2.00107 15.5619C2.03662 15.6411 2.09434 15.7084 2.16726 15.7556C2.24019 15.8028 2.3252 15.8279 2.41207 15.8279C2.47307 15.8279 2.53607 15.8149 2.59607 15.7889L2.89707 15.6539L3.03207 15.9549C3.06762 16.0341 3.12534 16.1014 3.19826 16.1486C3.27119 16.1958 3.3562 16.2209 3.44307 16.2209C3.50407 16.2209 3.56707 16.2079 3.62707 16.1819C3.85407 16.0799 3.95507 15.8139 3.85407 15.5869L3.71907 15.2859L4.02007 15.1509C4.12895 15.1019 4.21398 15.0118 4.25653 14.9003C4.29908 14.7887 4.29568 14.6649 4.24707 14.5559Z"
+                  fill="#FFAF77"
+                />
+                <path
+                  d="M15.677 15.1852C15.677 15.3578 15.7456 15.5234 15.8677 15.6455C15.9898 15.7676 16.1553 15.8362 16.328 15.8362C16.5007 15.8362 16.6662 15.7676 16.7883 15.6455C16.9104 15.5234 16.979 15.3578 16.979 15.1852C16.979 15.0125 16.9104 14.8469 16.7883 14.7249C16.6662 14.6028 16.5007 14.5342 16.328 14.5342C16.1553 14.5342 15.9898 14.6028 15.8677 14.7249C15.7456 14.8469 15.677 15.0125 15.677 15.1852Z"
+                  fill="#E2E5F1"
+                />
+              </svg>
+
+              <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>
+
+              <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
+              > -->
+            </div>
+          </div>
+        </div>
+        <!-- <div class="dt_m_b_right">
+          
+
+          <div class="dt_m_b_r_taskList">
+            <div class="dt_m_b_r_tl_head">
+              <div>
+                <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="M2 2.5C2 2.22386 2.22386 2 2.5 2H13.5C13.7761 2 14 2.22386 14 2.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5ZM3 3V13H13V3H3Z"
+                    fill="#E67F36"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M7.24631 5.08406L5.56066 6.76971C5.46689 6.86348 5.33972 6.91616 5.20711 6.91616C5.0745 6.91616 4.94732 6.86348 4.85355 6.76971L4 5.91616L4.70711 5.20905L5.20711 5.70905L6.5392 4.37695L7.24631 5.08406Z"
+                    fill="#E67F36"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M5.4 9.4001C5.06863 9.4001 4.8 9.66873 4.8 10.0001C4.8 10.3315 5.06863 10.6001 5.4 10.6001C5.73137 10.6001 6 10.3315 6 10.0001C6 9.66873 5.73137 9.4001 5.4 9.4001ZM4 10.0001C4 9.2269 4.6268 8.6001 5.4 8.6001C6.1732 8.6001 6.8 9.2269 6.8 10.0001C6.8 10.7733 6.1732 11.4001 5.4 11.4001C4.6268 11.4001 4 10.7733 4 10.0001Z"
+                    fill="#E67F36"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M8 5.5H12V6.5H8V5.5Z"
+                    fill="#E67F36"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M8 9.5H12V10.5H8V9.5Z"
+                    fill="#E67F36"
+                  />
+                </svg>
+
+                <span>答题卡</span>
+              </div>
+
+              <div>
+                共{{ taskList.length }}道题
+                <span>|</span>
+                合计100分
+              </div>
+            </div>
+            <div class="dt_m_b_r_tl_boxList">
+              <span
+                v-for="(item, index) in taskList"
+                :key="index"
+                :class="[
+                  isDoTask(index) ? 'isDoTask' : '',
+                  showTaskIndex == index ? 'inDoTask' : ''
+                ]"
+                @click.stop="showTaskIndex = index"
+                >{{ index + 1 }}</span
+              >
+            </div>
+            <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>
+
+          <div class="dt_m_b_r_bottom">
+            <div
+              @click.stop="saveTask()"
+              v-if="!isDoAllTask && this.showTaskIndex != taskList.length - 1"
+            >
+              保存
+            </div>
+            <div
+              @click.stop="submitTask()"
+              v-if="isDoAllTask || this.showTaskIndex == taskList.length - 1"
+            >
+              确认提交
+            </div>
+          </div>
+        </div> -->
+      </div>
+
+      <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">
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M2 2.5C2 2.22386 2.22386 2 2.5 2H13.5C13.7761 2 14 2.22386 14 2.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5ZM3 3V13H13V3H3Z"
+                fill="#E67F36"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M7.24631 5.08406L5.56066 6.76971C5.46689 6.86348 5.33972 6.91616 5.20711 6.91616C5.0745 6.91616 4.94732 6.86348 4.85355 6.76971L4 5.91616L4.70711 5.20905L5.20711 5.70905L6.5392 4.37695L7.24631 5.08406Z"
+                fill="#E67F36"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M5.4 9.4001C5.06863 9.4001 4.8 9.66873 4.8 10.0001C4.8 10.3315 5.06863 10.6001 5.4 10.6001C5.73137 10.6001 6 10.3315 6 10.0001C6 9.66873 5.73137 9.4001 5.4 9.4001ZM4 10.0001C4 9.2269 4.6268 8.6001 5.4 8.6001C6.1732 8.6001 6.8 9.2269 6.8 10.0001C6.8 10.7733 6.1732 11.4001 5.4 11.4001C4.6268 11.4001 4 10.7733 4 10.0001Z"
+                fill="#E67F36"
+              />
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M8 5.5H12V6.5H8V5.5Z" fill="#E67F36" />
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M8 9.5H12V10.5H8V9.5Z" fill="#E67F36" />
+            </svg>
+
+            <span>答题卡</span>
+          </div>
+
+          <div class="dt_m_b_r_tl_bottom">
+            <div><span class="isDoTask"></span>已答</div>
+            <div><span></span>未答</div>
+            <div><span class="inDoTask"></span>当前</div>
+          </div>
+        </div>
+
+        <div class="dt_m_b_taskList">
+          <div class="dt_m_b_r_tl_boxList">
+            <span
+              v-for="(item, index) in taskList"
+              :key="index"
+              :class="[isDoTask(index) ? 'isDoTask' : '', showTaskIndex == index ? 'inDoTask' : '']"
+              @click.stop="showTaskIndex = index"
+              >{{ index + 1 }}</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="dt_dialogBackground" v-if="showSeekAssist"></div>
+    <div class="dt_character" v-if="showSeekAssist">
+      <img :src="characterList.find(i => userInfo.choseCharacter === i.index).image" />
+
+      <div class="dt_c_message" v-if="showSeekAssist">
+        <span class="dt_c_m_characterName">{{
+          characterList.find(i => userInfo.choseCharacter === i.index)
+            ? characterList.find(i => userInfo.choseCharacter === i.index).name
+            : 'AI'
+        }}</span>
+
+        <span class="dt_c_m_closeIcon" @click.stop="showSeekAssist = 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"
+            />
+          </svg>
+        </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>
+        </div>
+        <div class="dt_c_m_btnArea">
+          <span class="dt_c_m_btn1" @click.stop="doNotKnow()">还是不太明白</span>
+          <span class="dt_c_m_btn2" @click.stop="showSeekAssist = false">明白,去做题👉</span>
+        </div>
+      </div>
+    </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>
+      <div class="dt_m_b_l_title">{{ taskMessage.title }}</div>
+      <div class="dt_is_statistics">
+        <img src="../../assets/images/pocAiClassroom/taskSuccess.png" alt="" />
+        <el-rate class="dt_is_s_star" v-model="star" allow-half disabled></el-rate>
+        <div class="dt_is_s_message">
+          <span>总计题目:{{ showMessage.total }}</span>
+          <span>总答对数量:{{ showMessage.right }}</span>
+          <span>正确率:{{ showMessage.accuracy }}%</span>
+        </div>
+
+        <div class="dt_is_s_taskList">
+          <span
+            v-for="(item, index) in taskList"
+            @click.stop="goDoTask(index)"
+            :class="[
+              typeof item.answer === 'object'
+                ? item.answer2.length != 0
+                  ? isTrueTask(index).no.length == 0 && isTrueTask(index).yes.length == item.answer.length
+                    ? 'isDoYes'
+                    : 'isDoNo'
+                  : 'isNoDo'
+                : item.answer2 !== ''
+                ? item.answer === item.answer2
+                  ? 'isDoYes'
+                  : 'isDoNo'
+                : 'isNoDo'
+            ]"
+            :key="index"
+            >{{ index + 1 }}</span
+          >
+        </div>
+      </div>
+
+      <div class="dt_is_taskList">
+        <div class="dt_is_tl_head">
+          <span>题目回顾</span>
+          <div>
+            <span @click.stop="onlyShowMistake = !onlyShowMistake">只显示错题</span>
+            <el-switch v-model="onlyShowMistake" style="transform: scale(1,1);"></el-switch>
+          </div>
+        </div>
+
+        <div class="dt_is_tl_taskBox">
+          <div
+            class="dt_is_tl_tb_item"
+            v-for="(item, index) in taskList"
+            :ref="'taskItem' + index + 'Ref'"
+            :key="index"
+            v-if="
+              !onlyShowMistake ||
+                (typeof item.answer === 'object'
+                  ? !(isTrueTask(index).no.length == 0 && isTrueTask(index).yes.length == item.answer.length)
+                  : item.answer !== item.answer2)
+            "
+          >
+            <span class="dt_is_tl_tb_i_title"
+              >{{ typeof item.answer == 'object' ? '【多选题】' : '【单选题】' }}{{ index + 1 }}.{{
+                item.teststitle
+              }}</span
+            >
+
+            <div class="dt_is_tl_tb_i_choseList">
+              <span v-for="(item2, index2) in item.checkList" :key="index + '-' + index2">
+                <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>
+            </div>
+
+            <div class="dt_is_tl_tb_i_answer">
+              <div>
+                你的答案:<span v-if="typeof item.answer === 'object'">
+                  <span
+                    v-for="(item3, index3) in item.answer2"
+                    :key="index + '+' + index3"
+                    :style="item.answer.includes(item3) ? 'color:#75BD42' : 'color:#FF5B5B'"
+                    >{{ choseList[item3] }}{{ index3 == item.answer2.length - 1 ? '' : '、' }}</span
+                  > </span
+                ><span v-else :style="item.answer === item.answer2 ? 'color:#75BD42' : 'color:#FF5B5B'">{{
+                  choseList[item.answer2]
+                }}</span>
+              </div>
+
+              <div>
+                正确答案:<span style="color:#75BD42">{{
+                  typeof item.answer === 'object'
+                    ? item.answer.map(i => choseList[i]).join('、')
+                    : choseList[item.answer]
+                }}</span>
+              </div>
+            </div>
+
+            <div class="dt_is_tl_tb_i_analyze">
+              <div>答案解析:<span v-text="item.analyze"></span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Dialog } from 'vant'
+export default {
+  data() {
+    return {
+      showTaskIndex: 0,
+      time: 0,
+      time2: 0,
+      startTime: 0,
+      timer: null,
+			userId: this.$store.state.user.userinfo.userid,
+      org: this.$store.state.user.userinfo.org,
+      oid: this.$store.state.user.userinfo.organizeid,
+      showSeekAssist: false,
+      choseList: [
+        'A',
+        'B',
+        'C',
+        'D',
+        'E',
+        'F',
+        'G',
+        'H',
+        'I',
+        'J',
+        'K',
+        'L',
+        'M',
+        'N',
+        'O',
+        'P',
+        'Q',
+        'R',
+        'S',
+        'T',
+        'U',
+        'V',
+        'W',
+        'X',
+        'Y',
+        'Z'
+      ],
+      taskList: [
+        {
+          teststitle: '请从以下选项中选出一个由三个不同字母组成的组合。',
+          checkList: ['abc', 'aaa', 'bca', 'ccc'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '本题考核学生对字母的识别能力以及对字母组合的理解。学生需要识别每个选项中的字母,并判断是否由三个不同的字母组成。选项1(abc)和选项3(bca)都由三个不同的字母组成,但根据题目要求,选项1是正确答案。',
+          answer2: '',
+          uuid: '2b29f3aa-3389-4415-85aa-613f72e23de6',
+          isSubmit: false
+        },
+        {
+          teststitle: '哪种动物会飞?',
+          checkList: ['狗', '猫', '鸟', '鱼'],
+          timuList: [],
+          answer: 2,
+          type: '1',
+          analyze: '这道题目考察学生对动物基本特征的了解。鸟是会飞的动物,而狗、猫和鱼都不会飞。',
+          answer2: '',
+          uuid: '55d7fdcb-bedb-4c2f-b6ea-b3b98e7415be',
+          isSubmit: false
+        },
+        {
+          teststitle: '以下哪些动物会飞?',
+          checkList: ['狗', '猫', '鸟', '蝙蝠', '企鹅', '蜜蜂'],
+          timuList: [],
+          answer: [2, 3, 5],
+          type: '2',
+          analyze:
+            '本题考查学生对动物飞行能力的认知。鸟、蝙蝠和蜜蜂都是会飞的动物,而狗、猫和企鹅不会飞。通过这道题,学生需要对多种动物的特征进行分类和识别。',
+          answer2: [],
+          uuid: '764246b9-0ce5-4d75-9035-3de982b3420f',
+          isSubmit: false
+        },
+        {
+          teststitle: '测试',
+          testItem: 4,
+          checkList: [
+            {
+              src: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/1-2740353x15_hanspub1687855155487.jpg',
+              imgType: 1
+            },
+            '测试1',
+            '测试2',
+            '测试3'
+          ],
+          timuList: [
+            {
+              src: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/DSC20210112100951431687855143262.jpg'
+            }
+          ],
+          answer: [2, 0],
+          type: '2',
+          answer2: [],
+          uuid: '157fb875-acec-4dc9-8e60-73b82bb4ed9a',
+          analyze:
+            '题目要求选择正确的答案。根据题目和选项的内容,正确答案是3和1。\n分析考核的知识点包括理解题意和选项内容的能力。',
+          isSubmit: false
+        },
+        {
+          teststitle: '哪种动物生活在水中?',
+          checkList: ['狗', '猫', '鸟', '鱼'],
+          timuList: [],
+          answer: 3,
+          type: '1',
+          analyze: '这道题目考核的是学生对常见动物生活环境的认知能力。鱼是生活在水中的动物,而狗、猫和鸟则不是。',
+          answer2: '',
+          uuid: '723dd167-f480-47e9-b958-353138113742',
+          isSubmit: false
+        },
+        {
+          teststitle: '以下哪些动物既能生活在水中也能生活在陆地上?',
+          checkList: ['青蛙', '鲨鱼', '海豚', '企鹅'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '本题考核学生对动物生活环境的更深入认知。青蛙是两栖动物,既能生活在水中也能生活在陆地上,而鲨鱼和海豚主要生活在水中,企鹅虽然能在陆地上活动,但主要生活在水中。',
+          answer2: '',
+          uuid: 'ca09b084-2fea-4e68-9f8a-325e77c652d3',
+          isSubmit: false
+        },
+        {
+          teststitle: '以下哪种动物既能飞又能游泳?',
+          checkList: ['企鹅', '老鹰', '鸵鸟', '海豚'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '题目考察了学生对动物特征的综合认知。企鹅是唯一一种既能飞(在水中飞行)又能游泳的动物,而老鹰只能飞行,鸵鸟既不能飞也不能游泳,海豚只能游泳。',
+          answer2: '',
+          uuid: 'cdc13cd7-a1c6-4809-b958-d2b37b2aac6b',
+          isSubmit: false
+        },
+        {
+          teststitle: '以下哪种动物能够在水中游泳?',
+          checkList: ['企鹅', '老鹰', '鸵鸟', '猫'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '这道题目考核的是学生对动物特性的了解。企鹅是一种能够在水中游泳的动物,而其他选项中的动物(老鹰、鸵鸟、猫)都不能在水中游泳。',
+          answer2: '',
+          uuid: 'ebed926d-5010-4d2e-9740-b6fe00438420',
+          isSubmit: false
+        },
+
+        {
+          teststitle: '观察以下模式,并选择正确的选项来完成这个模式:cscs, sscs, cscs, sscs, ______',
+          checkList: ['cscs', 'sscs', 'cssc', 'sssc'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '这道题目考察学生对模式识别的能力。题目给出了一个重复的模式:cscs, sscs, cscs, sscs。根据这个模式,下一步应该是cscs。因此,正确答案是选项1。',
+          end: '',
+          answer2: '',
+          uuid: '61ae2659-43c3-4741-b5c2-a543a57a9705',
+          isSubmit: false
+        },
+        {
+          teststitle: '世界上最长的河流是哪一条?',
+          checkList: ['尼罗河', '亚马逊河', '长江', '密西西比河'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '这道题目考核的是学生对世界地理常识的了解。世界上最长的河流是尼罗河,全长约6650公里。通过这道题目,学生可以学习到关于世界河流的基本知识。',
+          answer2: '',
+          uuid: 'b328ebf9-389a-4828-b6c6-9a04426d3216',
+          isSubmit: false
+        },
+        {
+          teststitle: '世界上最高的山峰及其高度',
+          checkList: ['珠穆朗玛峰,高度8848米', '珠穆朗玛峰,高度8000米', '太白山,高度8848米', '刚果盆地,高度8848米'],
+          timuList: [],
+          answer: 0,
+          type: '1',
+          analyze:
+            '本题考察学生对世界上最高山峰珠穆朗玛峰及其高度的了解。珠穆朗玛峰是世界上最高的山峰,其高度为8848米。通过这道题,学生不仅需要知道最高的山峰,还需要记住其具体高度。',
+          answer2: '',
+          uuid: 'e1cf1783-2e9f-40f6-a58f-6c3a7a951173',
+          isSubmit: false
+        }
+      ],
+      taskMessage: {
+        chapter: '第一章',
+        grade: '八年级',
+        semester: '上学期',
+        edition: '人教版',
+        subject: '物理',
+        title: '第四课 测量平均速度'
+      },
+
+      isSubmit: false,
+      star: 4,
+      onlyShowMistake: false,
+      userInfo: {
+        userName: '科科',
+        grade: 7,
+        userAvatar: '',
+        choseCharacter: 0
+      },
+      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'
+        }
+      ]
+    }
+  },
+  computed: {
+    isDoTask() {
+      return _index => {
+        let _result = false
+        const _type = typeof this.taskList[_index].answer == 'object' ? 1 : 0
+        if (_type == 0) {
+          if (this.taskList[_index].answer2 !== '') _result = true
+        } else if (_type == 1) {
+          if (this.taskList[_index].answer2.length > 0) _result = true
+        }
+
+        return _result
+      }
+    },
+    isTrueTask() {
+      return _index => {
+        let _result = {
+          yes: [],
+          no: []
+        }
+        const _type = typeof this.taskList[_index].answer == 'object' ? 1 : 0
+        const _answer = this.taskList[_index].answer
+        const _answer2 = this.taskList[_index].answer2
+        if (_type == 0) {
+          if (_answer === _answer2) {
+            _result.yes = [_answer2]
+            _result.no = []
+          } else {
+            _result.yes = []
+            _result.no = [_answer2]
+          }
+        } else if (_type == 1) {
+          if (_answer.length === _answer2.length && _answer.every(i => _answer2.includes(i))) {
+            _result.yes = _answer2
+            _result.no = []
+          } else {
+            _result.yes = _answer.filter(i => _answer2.includes(i))
+            _result.no = _answer2.filter(i => !_answer.includes(i))
+          }
+        }
+        // let yes2 = _result.yes;
+        // yes2.sort((a,b)=>a-b)
+        // let no2 = _result.no;
+        // no2.sort((a,b)=>a-b)
+        // _result.yes = yes2;
+        // _result.no = no2;
+        return _result
+      }
+    },
+    isDoAllTask() {
+      let _result = true
+      this.taskList.forEach((item, index) => {
+        if (!this.isDoTask(index)) {
+          _result = false
+        }
+      })
+
+      return _result
+    },
+    showTime() {
+      // 更新currentTime,将秒数转换为时分秒格式
+      let hours = Math.floor((this.time + this.time2) / 3600)
+      let minutes = Math.floor(((this.time + this.time2) % 3600) / 60)
+      let seconds = Math.floor((this.time + this.time2) % 60)
+      // this.recordedForm.time = `${hours.toString().padStart(2, "0")}:${minutes
+      // 	.toString()
+      // 	.padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds
+        .toString()
+        .padStart(2, '0')}`
+    },
+    showMessage() {
+      let _result = {
+        total: 0,
+        right: 0,
+        wrong: 0,
+        accuracy: 0
+      }
+      if (!this.isSubmit) return _result
+      _result.total = this.taskList.length
+
+      this.taskList.forEach((item, index) => {
+        if (
+          typeof item.answer === 'object'
+            ? !(this.isTrueTask(index).no.length == 0 && this.isTrueTask(index).yes.length == item.answer.length)
+            : item.answer !== item.answer2
+        ) {
+          _result.wrong++
+        } else {
+          _result.right++
+        }
+      })
+      _result.accuracy = Math.round((_result.right / _result.total) * 100)
+      return _result
+    },
+    schedule() {
+      let _schedule = 0
+      if (this.showTaskIndex == 0) {
+        _schedule = 0
+      } else if (this.showTaskIndex === this.taskList.length) {
+        _schedule = 100
+      } else {
+        _schedule = Math.round(((this.showTaskIndex + 1) / this.taskList.length) * 100)
+      }
+      return _schedule
+    }
+  },
+  methods: {
+    changeTask(type) {
+      if (type == 'prev') {
+        if (this.showTaskIndex > 0) {
+          this.showTaskIndex--
+        } else {
+          this.$toast('已经是第一题啦')
+          // this.$message.warning('已经是第一题啦')
+        }
+      } else if (type == 'next') {
+        if (this.showTaskIndex < this.taskList.length - 1) {
+          this.showTaskIndex++
+        } else {
+          this.$toast('已经是最后一题啦')
+        }
+      }
+    },
+    // 切换章节
+    changeChapter() {
+      console.log('切换章节')
+    },
+    //求助
+    seekAssist() {
+      this.showSeekAssist = true
+    },
+    keepTime() {
+      if (this.timer !== null) {
+        clearInterval(this.timer)
+        this.timer = null
+        this.time += this.time2
+        this.time2 = 0
+      } else {
+        this.startTime = new Date().getTime()
+        this.timer = setInterval(() => {
+          if (this.isSubmit) {
+            clearInterval(this.timer)
+            this.timer = null
+            this.time += this.time2
+            this.time2 = 0
+            return
+          }
+          this.time2 = Math.floor((new Date().getTime() - this.startTime) / 1000)
+        }, 1000)
+      }
+    },
+    endTask() {
+      this.$confirm('确定结束练习吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.back()
+        })
+        .catch(() => {
+          console.log('不结束练习')
+        })
+    },
+    saveTask() {
+      console.log('保存做题')
+    },
+    submitTask(type = 0) {
+      if (!this.isDoAllTask && type == 0) {
+        Dialog.confirm({
+          title: '确认提交',
+          message: `还有未做的题目,是否确定提交`
+        })
+          .then(() => {
+            this.submitTask(1)
+          })
+          .catch(() => {
+            console.log('继续做题')
+          })
+      } else {
+        this.isSubmit = true
+        clearInterval(this.timer)
+        this.timer = null
+        this.sortTaskList()
+      }
+    },
+    back() {
+      this.$router.push(`/pocAiClassroom`)
+    },
+    choseAnswer(_index) {
+      const _type = typeof this.taskList[this.showTaskIndex].answer == 'object' ? 1 : 0
+      if (_type == 0) {
+        if (this.taskList[this.showTaskIndex].answer2 === _index) {
+          this.taskList[this.showTaskIndex].answer2 = ''
+        } else {
+          this.taskList[this.showTaskIndex].answer2 = _index
+        }
+      } else if (_type == 1) {
+        if (this.taskList[this.showTaskIndex].answer2.includes(_index)) {
+          this.taskList[this.showTaskIndex].answer2 = this.taskList[this.showTaskIndex].answer2.filter(
+            item => item != _index
+          )
+        } else {
+          this.taskList[this.showTaskIndex].answer2.push(_index)
+        }
+      }
+    },
+    sortTaskList() {
+      this.taskList.forEach(i => {
+        if (typeof i.answer === 'object') {
+          i.answer.sort((a, b) => a - b)
+          i.answer2.sort((a, b) => a - b)
+        }
+      })
+    },
+    goDoTask(_index) {
+      if (this.$refs['taskItem' + _index + 'Ref'][0]) {
+        this.$refs['taskItem' + _index + 'Ref'][0].scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+          inline: 'start'
+        })
+      }
+    },
+    doNotKnow() {
+      this.$message.info('多想想')
+    }
+  },
+  mounted() {
+    this.keepTime()
+    this.sortTaskList()
+  }
+}
+</script>
+
+<style scoped>
+.doTask {
+  width: 100vw;
+  height: 100vh;
+  /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
+  background-color: #f0f2f5;
+  box-sizing: border-box;
+  overflow: auto;
+  position: relative;
+}
+
+.dt_back {
+  font-size: 24px;
+  cursor: pointer;
+  position: absolute;
+  right: 30px;
+  top: 30px;
+}
+
+.dt_main {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  margin: auto;
+  overflow: hidden;
+  position: relative;
+}
+
+.dt_m_head {
+  width: 100%;
+  height: 150px;
+  display: flex;
+  align-items: flex-end;
+  box-sizing: border-box;
+  justify-content: space-between;
+  position: relative;
+  /* justify-content: center; */
+}
+
+.dt_m_h_left {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  padding-bottom: 10px;
+}
+
+.dt_m_h_right {
+  width: 50%;
+  height: 100%;
+}
+
+.dt_m_h_message {
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0 10px;
+  color: #00000099;
+}
+
+.dt_m_h_message > span {
+  margin: 0 5px;
+}
+
+.dt_m_h_back {
+  padding: 6px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  background-color: #f8f9fa;
+  border: 1px solid #e7e7e7;
+  border-radius: 4px;
+  top: 10px;
+  left: 10px;
+  position: absolute;
+  cursor: pointer;
+}
+
+.dt_m_h_back > svg {
+  width: 25px;
+  height: 25px;
+  margin-right: 10px;
+}
+
+.dt_m_h_chapter {
+  font-size: 18px;
+  margin: 10px 0;
+  box-sizing: border-box;
+  padding: 0 10px;
+}
+
+.dt_m_h_btn {
+  padding: 10px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 5px;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.dt_m_box {
+  width: 100%;
+  height: calc(100% - 300px);
+  border-radius: 10px;
+  display: flex;
+}
+
+.dt_m_b_left {
+  width: calc(100%);
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+  /* border-radius: 10px; */
+  border: 1px solid #e7e7e7;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dt_m_b_l_head {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0px;
+	font-size: 18px;
+
+}
+
+.dt_m_l_h_title {
+  font-size: 18px;
+  font-weight: bold;
+  max-width: calc(100% - 50px);
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dt_m_l_h_changeChapter {
+  font-size: 14px;
+  color: #3681fc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.dt_m_l_h_changeChapter > svg {
+  width: 15px;
+  height: 15px;
+  margin-right: 5px;
+}
+
+.dt_m_b_l_title {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 20px 0;
+}
+
+.dt_m_b_right {
+  width: 300px;
+  margin-left: 30px;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+}
+
+.dt_m_b_r_time {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  padding: 10px 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 0px 0px 0 0;
+  box-sizing: border-box;
+}
+
+.dt_m_b_r_t_head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dt_m_b_r_t_head > svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.dt_m_b_r_t_head > span {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.dt_m_b_r_t_showTime {
+  width: 100%;
+  padding: 2% 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: #f2f6fc;
+  margin-top: 5px;
+}
+
+.dt_m_b_r_t_showTime > span {
+  font-size: 2em;
+  font-weight: bold;
+  color: #0061ff;
+}
+
+.dt_m_b_r_t_schedule {
+  width: 100%;
+  padding: 8px 0 4px 0;
+  /* height: 50px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.dt_m_b_r_t_btn {
+  width: 100%;
+  padding: 5px 0;
+  border-radius: 8px;
+  margin-top: 10px;
+  background-color: #f0f2f5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.dt_m_b_r_t_s_box {
+  width: 100%;
+  height: 8px;
+  border-radius: 5px;
+  background-color: #f0f2f5;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.dt_m_b_r_t_s_b_inner {
+  height: 100%;
+  border-radius: 5px;
+  background-color: #3681fc;
+}
+
+.dt_m_b_r_t_s_b_round {
+  width: 15px;
+  height: 15px;
+  border-radius: 100%;
+  background-color: #3681fc;
+  position: absolute;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dt_m_b_r_t_s_b_round > span {
+  position: absolute;
+  top: -15px;
+  font-weight: bold;
+  color: #3681fc;
+}
+
+.dt_m_b_r_template {
+  width: 100%;
+  height: auto;
+  margin-bottom: 30px;
+  margin-top: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.dt_m_b_r_template > div {
+  font-size: 26px;
+  display: flex;
+  align-items: center;
+  margin-right: 25px;
+}
+
+.dt_m_b_r_template > div > span {
+  width: 35px;
+  height: 35px;
+  display: flex;
+  margin-right: 10px;
+  border-radius: 8px;
+  border: solid 2px #325395;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.dt_m_b_r_template > div:nth-of-type(1) > span {
+  background-color: #dae3f5;
+}
+
+.dt_m_b_r_taskList {
+  width: 100%;
+  height: calc(100% - 400px);
+  overflow: auto;
+  margin: 20px 0;
+  box-sizing: border-box;
+  padding: 20px;
+  background-color: #fff;
+}
+
+.dt_m_b_r_tl_head {
+  width: 100%;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.dt_m_b_r_tl_head > div:nth-of-type(1) {
+  font-size: 24px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+}
+
+.dt_m_b_r_tl_head > div:nth-of-type(1) > svg {
+  width: 25px;
+  height: 25px;
+  margin-right: 5px;
+}
+
+.dt_m_b_r_tl_head > div:nth-of-type(2) {
+  font-size: 18px;
+  margin-top: 15px;
+  color: #00000066;
+}
+
+.dt_m_b_r_tl_head > div:nth-of-type(2) > span {
+  margin: 0 5px;
+}
+
+.dt_m_b_r_tl_boxList {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 10px 5px;
+}
+
+.dt_m_b_r_tl_boxList > span {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 5px;
+  background-color: #fff;
+  border-radius: 8px;
+  border: solid 2px #e7e7e7;
+  float: left;
+  margin: 0 6px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  font-size: 18px;
+  /* font-weight: bold; */
+}
+
+.dt_m_b_r_tl_bottom {
+  width: auto;
+  height: auto;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.dt_m_b_r_tl_bottom > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  margin-right: 10px;
+}
+
+.dt_m_b_r_tl_bottom > div > span {
+  width: 15px;
+  height: 15px;
+  margin-right: 5px;
+  background-color: #fff;
+  border-radius: 3px;
+  border: solid 1px #e7e7e7;
+}
+
+/* .dt_m_b_r_taskList > span {
+  width: 47px;
+  height: 47px;
+  margin-right: 12px;
+  border-radius: 8px;
+  border: solid 2px #325395;
+  box-sizing: border-box;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  float: left;
+  margin-bottom: 10px;
+  cursor: pointer;
+  font-size: 20px;
+  font-weight: bold;
+  transition: 0.3s;
+} */
+
+.isDoTask {
+  background-color: #e0eafb !important;
+  border-color: #aeccfe !important;
+  color: #3681fc !important;
+}
+
+.inDoTask {
+  background-color: #3681fc !important;
+  border-color: #0061ff !important;
+  color: #fff !important;
+}
+
+.dt_m_b_r_bottom {
+  width: 100%;
+  height: 60px;
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dt_m_b_r_bottom > div {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #3681fc;
+  font-size: 24px;
+  font-weight: bold;
+  border-radius: 10px;
+  box-sizing: border-box;
+  border: solid 2px #3681fc;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.dt_m_b_l_task {
+  width: 100%;
+  height: calc(100% - 80px);
+  overflow: auto;
+  box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 10px 20px;
+}
+
+.dt_m_b_l_t_cl_item {
+  font-size: 18px;
+  display: flex;
+  width: 100%;
+  height: auto;
+  align-items: flex-start;
+  margin: 20px 0;
+  background-color: #f2f6fc;
+  padding: 5px 10px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  border: 2px solid #e7e7e7;
+  transition: 0.2s;
+}
+
+.dt_m_b_l_t_cl_item > div {
+  min-width: 20px;
+  min-height: 20px;
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border-radius: 100%;
+  margin-right: 10px;
+  border: solid 2px #3681fc;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  top: 5px;
+}
+
+.dt_m_b_l_t_cl_item > div > span {
+  width: 13px;
+  height: 13px;
+  border-radius: 100%;
+  display: none;
+  margin: auto;
+  background-color: #3681fc;
+}
+
+.dt_m_b_l_t_cl_itemActive > div > span {
+  display: flex;
+}
+
+.dt_m_b_l_t_cl_itemActive {
+  border-color: #3681fc;
+}
+
+.dt_m_b_l_t_cl_itemActive > span {
+  color: #3681fc;
+}
+
+.dt_m_b_l_t_cl_item > span {
+  display: flex;
+  /* align-items: flex-start; */
+  /* justify-content: center; */
+  cursor: pointer;
+  word-break: break-all;
+  float: left;
+  text-align: left;
+}
+
+.dt_m_b_l_t_cl_item > span > img {
+  max-width: 80%;
+  cursor: pointer;
+}
+
+.dt_m_b_l_t_cl_item > span > span {
+  margin: 3px;
+}
+
+.dt_m_b_l_t_title {
+  font-size: 20px;
+  height: auto;
+  width: 100%;
+}
+
+.dt_m_b_l_t_title > span {
+  font-weight: bold;
+}
+.dt_m_b_l_t_choseList {
+  width: 100%;
+  height: auto;
+  margin: 20px 0;
+}
+
+.dt_m_b_l_bottom {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  background-color: #f8f9fa;
+  border-top: 1px solid #f0f2f5;
+  justify-content: space-between;
+  padding: 0 10px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.dt_m_b_l_b_seekAssist {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  white-space: nowrap;
+  z-index: 3;
+}
+
+.dt_m_b_l_b_seekAssist > svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.dt_m_b_l_b_seekAssist > span {
+  font-size: 18px;
+  text-decoration: underline;
+}
+
+.dt_m_b_l_b_btnArea {
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dt_m_b_l_b_btnArea > span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 15px;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+  margin-left: 10px;
+  background-color: #fff;
+  white-space: nowrap;
+  z-index: 3;
+}
+
+.dt_m_b_l_b_ba_btnPrev {
+  background-color: #e0eafb !important;
+  color: #3681fc;
+}
+
+.dt_m_b_l_b_ba_btnNext {
+  background-color: #3681fc !important;
+  color: white;
+}
+
+.dt_m_b_l_b_ba_save {
+  color: #3681fc;
+  border: solid 1px #3681fc;
+  background-color: #fff;
+  box-sizing: border-box;
+}
+
+.dt_isSubmit {
+  width: 100vw;
+  margin: auto;
+  height: 100vh;
+  background-color: #fff;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 10px 20px;
+}
+
+.dt_is_statistics {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.dt_is_statistics > img {
+  width: 180px;
+  height: 180px;
+  margin-bottom: -30px;
+}
+
+.dt_is_s_star {
+	margin-top: 10px;
+  transform: scale(1.4, 1.4);
+}
+
+.dt_is_s_message {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 40px;
+}
+.dt_is_s_message > span {
+  margin: 0 10px;
+	white-space: nowrap;
+  font-size: 16px;
+}
+
+.dt_is_s_taskList {
+  max-width: 90%;
+  width: auto;
+  height: auto;
+  margin-top: 30px;
+}
+
+.dt_is_s_taskList > span {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  border-radius: 4px;
+  border: solid 2px #325395;
+  box-sizing: border-box;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  float: left;
+  margin-bottom: 10px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: bold;
+  transition: 0.3s;
+}
+
+.isDoYes {
+  background-color: #c8e5b3 !important;
+  border-color: #c8e5b3 !important;
+}
+
+.isDoNo {
+  background-color: #f5b7bf !important;
+  border-color: #f5b7bf !important;
+}
+
+.isNoDo {
+  background-color: #f5b7bf !important;
+  border-color: #f5b7bf !important;
+}
+
+.dt_is_taskList {
+  width: 100%;
+  height: auto;
+}
+
+.dt_is_tl_head {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dt_is_tl_head > span {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.dt_is_tl_head > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dt_is_tl_head > div > span {
+  font-size: 16px;
+  margin-right: 10px;
+}
+
+.dt_is_tl_taskBox {
+  width: 100%;
+  height: auto;
+  margin: 10px 0;
+  box-sizing: border-box;
+  border: solid 1px #f2f2f2;
+  padding: 5px 10px 210px 10px;
+}
+
+.dt_is_tl_tb_item {
+  width: 100%;
+  height: auto;
+  padding: 10px 0 20px 0;
+  /* border-bottom: solid 1px black; */
+}
+
+.dt_is_tl_tb_i_title {
+  font-size: 18px;
+}
+.dt_is_tl_tb_i_choseList {
+  width: 100%;
+  height: auto;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0 10px;
+}
+
+.dt_is_tl_tb_i_choseList > span {
+  margin-bottom: 20px;
+  font-size: 16px;
+  display: flex;
+  text-align: start;
+  cursor: default;
+  word-break: break-all;
+  float: left;
+}
+
+.dt_is_tl_tb_i_choseList > span > span {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  cursor: pointer;
+  word-break: break-all;
+  float: left;
+}
+
+.dt_is_tl_tb_i_choseList > span > span > img {
+  max-width: 90%;
+}
+
+.dt_is_tl_tb_i_answer {
+  font-size: 16px;
+  box-sizing: border-box;
+  padding-left: 10px;
+}
+
+.dt_is_tl_tb_i_answer > div {
+  margin-bottom: 10px;
+}
+
+.dt_dialogBackground {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(180deg, rgba(32, 51, 80, 0) 0%, rgba(73, 116, 182, 0.6) 100%);
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.dt_character {
+  position: fixed;
+  bottom: 0;
+  left: 1%;
+  z-index: 1;
+}
+
+.dt_character > img {
+  width: 300px;
+  z-index: 2;
+	left: -50px;
+	top: -130%;
+	position: absolute;
+}
+
+.dt_c_message {
+  width: calc(100vw - 20px);
+  height: 200px;
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  background: linear-gradient(180deg, #fafcff 0%, #e7eefe 100%);
+  border-radius: 6px;
+  padding: 10px 10px 10px 10px;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 5;
+}
+
+.dt_c_m_characterName {
+  padding: 5px 10px;
+  background-color: #3681fc;
+  border-radius: 6px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  position: absolute;
+  left: -10px;
+  top: -20px;
+}
+
+.dt_c_m_closeIcon {
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+
+.dt_c_m_closeIcon > svg {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.dt_is_tl_tb_i_analyze {
+  font-size: 16px;
+  box-sizing: border-box;
+  margin-top: 20px;
+  padding-left: 10px;
+}
+
+.dt_c_m_message {
+  max-width: 100%;
+  font-size: 18px;
+  padding: 10px 30px;
+}
+
+.dt_c_m_message > span {
+  font-weight: bold;
+}
+
+.dt_c_m_btnArea {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.dt_c_m_btnArea > span {
+  padding: 5px 10px;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  margin-left: 20px;
+  cursor: pointer;
+  background-color: #fdfeff;
+  box-sizing: border-box;
+}
+
+.dt_c_m_btn1 {
+  color: #00000099;
+}
+
+.dt_c_m_btn2 {
+  background-color: #3681fc !important;
+  color: #fff;
+  padding: 5px 10px !important;
+}
+
+.dt_m_bottom {
+  width: 100%;
+  height: 150px;
+  background-color: #fff;
+}
+
+.dt_m_b_h_title {
+  margin-right: 20px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.dt_m_b_h_title > svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.dt_m_b_head {
+  width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 10px;
+}
+
+.dt_m_b_taskList {
+  width: 100%;
+  height: calc(100% - 30px);
+}
+</style>

+ 842 - 0
src/views/pocAiClassroom/index.vue

@@ -0,0 +1,842 @@
+<template>
+  <div class="pocAiClass">
+    <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">
+        <div class="p_h_r_box">
+          <div>
+            <span @click.stop="settings()">
+              <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="M1.07817 8.26844C0.973943 8.10465 0.973943 7.89535 1.07817 7.73156L4.57817 2.23156C4.66995 2.08734 4.82905 2 5 2L11 2C11.1709 2 11.3301 2.08734 11.4218 2.23156L14.9218 7.73156C15.0261 7.89535 15.0261 8.10465 14.9218 8.26844L11.4218 13.7684C11.3301 13.9127 11.1709 14 11 14L5 14C4.82905 14 4.66995 13.9127 4.57817 13.7684L1.07817 8.26844ZM5.27447 13L10.7255 13L13.9073 8L10.7255 3L5.27447 3L2.09265 8L5.27447 13Z"
+                  fill="black"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5ZM5.5 8C5.5 6.61929 6.61929 5.5 8 5.5C9.38071 5.5 10.5 6.61929 10.5 8C10.5 9.38071 9.38071 10.5 8 10.5C6.61929 10.5 5.5 9.38071 5.5 8Z"
+                  fill="black"
+                />
+              </svg>
+            </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 class="pac_screen">
+      <el-select
+        v-model="subject"
+        class="pac_s_select"
+				style="width: 48%;"
+        size="medium"
+        placeholder="请选择学科"
+      >
+        <el-option label="全部学科" value=""></el-option>
+        <el-option
+          v-for="(item, index) in subjectList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+
+      <el-select
+        v-model="edition"
+        class="pac_s_select"
+				style="width: 48%;"
+        size="medium"
+        placeholder="请选择版本"
+      >
+        <el-option label="全部版本" value=""></el-option>
+        <el-option
+          v-for="(item, index) in editionList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+
+      <el-input placeholder="搜索" v-model="searchValue" class="pac_s_select" style="width: 80%;">
+        <i
+          slot="suffix"
+          @click.stop="search()"
+          style="cursor: pointer;"
+          class="el-input__icon el-icon-search"
+        ></i>
+      </el-input>
+
+			<span class="pac_s_reset" @click.stop="reset()">重置</span>
+    </div>
+    <!-- <div class="pac_subjectList">
+      <span
+        :class="[subject == index ? 'pac_sl_active' : '']"
+        v-for="(item, index) in subjectList"
+        :key="index"
+        @click.stop="changeSubject(index)"
+        >{{ item }}</span
+      >
+    </div> -->
+
+    <!-- <div class="pac_editionList">
+      <span
+        :class="[edition == index ? 'pac_el_active' : '']"
+        v-for="(item, index) in editionList"
+        :key="index"
+        @click.stop="changeEdition(index)"
+        >{{ item }}</span
+      >
+    </div> -->
+
+    <div class="pac_box">
+      <chapterCard
+        v-for="(item, index) in classList"
+        :key="index"
+        :data="item"
+        :subjectList="subjectList"
+      />
+    </div>
+
+    <div class="pac_footDialog" v-if="showDialog">
+      <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
+            "
+          />
+        </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'
+          }}</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"
+            >
+              <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"
+              />
+            </svg>
+          </span>
+          <div class="pac_fd_b_r_message">
+            Hi,{{
+              userInfo.userName
+            }}同学,欢迎回来!你是否开始下一节课的学习,学习<span>【运动的快慢】</span>?
+          </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
+            >
+          </div>
+        </div>
+      </div>
+      <!-- <div class="pac_fd_left">
+        <el-image
+          class="pac_fd_l_hello"
+          :src="require('../../../assets/icon/pocAiClassroom/hello.gif')"
+        ></el-image>
+      </div>
+      <div class="pac_fd_right">
+        <div class="pac_fd_r_messageArea">
+          <div class="pac_fd_r_ma_message">
+            Hi,科科同学,欢迎回来!你是否开始下一课的学习,学习【运动的快慢】?
+          </div>
+          <div class="pac_fd_r_ma_btnArea">
+            <span @click.stop="dialogBtn(1)">好,开始学习新内容</span>
+            <span @click.stop="dialogBtn(2)">我想复习上一节课</span>
+            <span @click.stop="dialogBtn(3)">我想聊聊天</span>
+          </div>
+          <span class="pac_fd_r_ma_closeIcon" @click.stop="dialogBtn(0)"
+            >×</span
+          >
+        </div>
+      </div> -->
+    </div>
+		<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";
+export default {
+  components: {
+    chapterCard,
+		settingsDialog
+  },
+  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: "",
+      grade: 7,
+      showDialog: true,
+      userInfo: {
+        userName: "科科",
+				grade:7,
+				userAvatar:require("../../assets/images/pocAiClassroom/defaultAvatar.png"),
+        choseCharacter: 0,
+      },
+      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",  
+        }
+      ],
+      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: "政治" }
+      ],
+      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版" }
+      ],
+      classList: [
+        {
+          title: "第一章",
+          allClass: [
+            {
+              title: "长度和时间的测量",
+              type: 0,
+              isComplete: true,
+              subject: 0,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741724834676182.png"
+            },
+            {
+              title: "运动的描述",
+              type: 0,
+              subject: 0,
+              isComplete: true,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.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%8751724834771676.png"
+            },
+            {
+              title: "单元测试",
+              type: 1,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png"
+            }
+          ]
+        },
+        {
+          title: "第二章",
+          allClass: [
+            {
+              title: "长度和时间的测量",
+              type: 0,
+              subject: 0,
+              isComplete: true,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png"
+            },
+            {
+              title: "运动的描述",
+              type: 0,
+              subject: 0,
+              isComplete: true,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8771724834845597.png"
+            },
+            {
+              title: "运动的快慢",
+              type: 0,
+              subject: 0,
+              isComplete: true,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8781724834847977.png"
+            },
+            {
+              title: "测量平均速度",
+              type: 0,
+              subject: 0,
+              isComplete: true,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8791724834873373.png"
+            },
+            {
+              title: "长度和时间的测量",
+              type: 0,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8761724834777931.png"
+            },
+            {
+              title: "运动的描述",
+              type: 0,
+              subject: 0,
+              isComplete: false,
+              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: "单元测试",
+              type: 1,
+              subject: 0,
+              isComplete: false,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711724834666052.png"
+            }
+          ]
+        },
+        {
+          title: "第三章",
+          allClass: [
+            {
+              title: "长度和时间的测量",
+              type: 0,
+              isComplete: true,
+              subject: 0,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741724834676182.png"
+            },
+            {
+              title: "运动的描述",
+              type: 0,
+              subject: 0,
+              isComplete: true,
+              image:
+                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731724834767532.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%8751724834771676.png"
+            },
+            {
+              title: "单元测试",
+              type: 1,
+              subject: 0,
+              isComplete: false,
+              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);
+    },
+    // changeSubject(newIndex) {
+    //   if (this.subject == newIndex) return;
+    //   this.subject = newIndex;
+    // },
+    // changeEdition(newIndex) {
+    //   if (this.edition == newIndex) return;
+    //   this.edition = newIndex;
+    // },
+    dialogBtn(type = 0) {
+      if (type == 0) {
+        this.showDialog = false;
+      } else if (type == 1) {
+        this.$router.push(
+          `/pocClass`
+        );
+        // console.log("开始学习新的内容");
+      } else if (type == 2) {
+        this.$router.push(
+          `/pocClass`
+        );
+        // console.log("复习上一节课");
+      } else if (type == 3) {
+        this.$router.push(
+          `/pocAiChat`
+        );
+      }
+    },
+		reset(){
+			this.subject="";
+      this.edition="";
+      this.searchValue="";
+		},
+    settings() {
+      this.$refs.settingsDialogRef.open(this.userInfo);
+    },
+    search() {
+      console.log("搜索", this.searchValue);
+    },
+		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();
+		}
+  },
+  mounted() {
+		// window.addEventListener("orientationchange",()=>{alert("切换了方向")})
+	}
+};
+</script>
+
+<style scoped>
+.pocAiClass {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
+  background-color: #f0f2f5;
+  box-sizing: border-box;
+  padding: 0 20px;
+}
+
+.pac_head {
+  width: 100%;
+  height: auto;
+  margin-top: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+
+.pac_h_left {
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pac_h_left > span {
+  font-size: 22px;
+}
+
+.pac_h_right {
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.p_h_r_box {
+	width: 40px;
+  height: 40px;
+  border-radius: 8px;
+}
+
+.p_h_r_box > div {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.p_h_r_box > div > div {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.p_h_r_box > div > span {
+  width: 40px;
+  height: 40px;
+}
+
+.p_h_r_box > div > span > svg {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.pac_screen {
+  width: 100%;
+  height: auto;
+  margin-top: 10px;
+  display: flex;
+	flex-wrap: wrap;
+  align-items: center;
+	justify-content: space-between;
+}
+
+.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;
+}
+
+.pac_s_select >>> .el-input {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+}
+
+.pac_s_select >>> .el-input > .el-input__inner {
+  width: 100%;
+  height: 100%;
+}
+
+.pac_s_select >>> .el-input__inner {
+  font-size: 16px;
+}
+
+.pac_box {
+  width: 100%;
+  height: auto;
+  /* margin-top: 20px; */
+	overflow: auto;
+}
+
+.pac_fd_left {
+  width: 200px;
+  height: 200px;
+}
+
+.pac_fd_l_hello {
+  width: 100%;
+  height: 100%;
+}
+
+.pac_fd_right {
+  flex: 1;
+  height: 200px;
+  display: flex;
+  align-items: center;
+}
+
+.pac_fd_r_messageArea {
+  width: 100%;
+  height: 90%;
+  background-color: #dae3f5;
+  box-sizing: border-box;
+  padding: 30px 30px 20px 30px;
+  border: solid 3px #fff;
+  border-radius: 0 20px 0 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+.pac_fd_r_ma_message {
+  width: 100%;
+  flex: 1;
+  font-size: 26px;
+}
+
+.pac_fd_r_ma_btnArea {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.pac_fd_r_ma_btnArea > span {
+  margin-left: 30px;
+  background-color: #fff;
+  padding: 14px 20px;
+  border-radius: 10px;
+  cursor: pointer;
+  border: solid 2px #4874cb;
+}
+
+.pac_fd_r_ma_btnArea > span:nth-of-type(1) {
+  background-color: #4874cb;
+  color: #fff;
+}
+
+.pac_fd_r_ma_closeIcon {
+  font-size: 30px;
+  font-weight: bold;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+  color: #fff;
+}
+
+.pac_footDialog {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  /* background-color: red; */
+}
+
+.pac_fd_closeArea {
+  width: 100%;
+  height: 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;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pac_fd_b_left {
+  width: 130px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: 1;
+	left: 0;
+	bottom: 100%;
+}
+
+.pac_fd_b_left > img {
+  position: absolute;
+  bottom: 0px;
+	left: 0px;
+  width: 300px;
+  transform: translate(-60px,80px);
+}
+
+.pac_fd_b_right {
+  width: 96%;
+
+  height: 100%;
+  background: linear-gradient(180deg, #fafcff 0%, #e7eefe 100%);
+  border-radius: 6px;
+  padding: 32px 24px 24px 24px;
+  box-sizing: border-box;
+  z-index: 2;
+  position: relative;
+}
+
+.pac_fd_b_r_characterName {
+  padding: 10px 15px;
+  background-color: #3681fc;
+  border-radius: 6px;
+  color: white;
+  font-weight: bold;
+  font-size: 16px;
+  position: absolute;
+  left: 0px;
+  top: -20px;
+}
+
+.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_message {
+  max-width: 100%;
+  font-size: 16px;
+  padding: 0px 30px;
+}
+
+.pac_fd_b_r_message > span {
+  font-weight: bold;
+}
+
+.pac_fd_b_r_btnArea {
+  position: absolute;
+  bottom: 10px;
+  right: 30px;
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.pac_fd_b_r_btnArea > span {
+  padding: 5px 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  margin-left: 5px;
+	white-space: nowrap;
+  cursor: pointer;
+  background-color: #fdfeff;
+  box-sizing: border-box;
+}
+
+.pac_fd_b_r_ba_btn1 {
+  color: #00000099;
+}
+
+.pac_fd_b_r_ba_btn2 {
+  border: 2px solid #3681fc;
+  background-color: #ffffffe5 !important;
+}
+
+.pac_fd_b_r_ba_btn3 {
+  background-color: #3681fc !important;
+  color: white;
+}
+</style>

+ 38 - 0
src/views/pocAiClassroom/pocClass.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="chatArea">
+		<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>
+
+export default {
+
+  data() {
+    return {
+			userId: this.$store.state.user.userinfo.userid,
+      org: this.$store.state.user.userinfo.org,
+      oid: this.$store.state.user.userinfo.organizeid,
+    };
+  },
+  methods: {
+
+  },
+  mounted() {
+    
+  }
+};
+</script>
+
+<style scoped>
+.chatArea{
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+}
+
+.ca_iframe{
+	width: 100%;
+	height: 100%;
+}
+</style>

+ 91 - 0
src/views/pocAiClassroom/startIndex.vue

@@ -0,0 +1,91 @@
+<template>
+	<div class="startIndex">
+		<div class="si_start">
+			<div class="si_s_heardImage"></div>
+			<div class="si_s_messageArea">
+				<span>Hi~同学!😆</span>
+				<span>我是智能学伴,是陪你学习和聊天的小伙伴!😎</span>
+				<span>有什么问题,你都可以随时召唤我🫡</span>
+				<span>请你先帮我取一个名字吧😜</span>
+			</div>
+			<div class="si_s_inputArea">
+				<div class="si_s_inputLeft"></div>
+				<span></span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped>
+.startIndex{
+	width: 100vw;
+	height: 100vh;
+	overflow: auto;
+	background-image: radial-gradient( #BBCDFF 0%, #BBCDFF 1%, #e6dee9 100%);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	justify-content: center;
+}
+
+.si_start{
+	width: auto;
+	height: auto;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.si_s_messageArea{
+	display: flex;
+	flex-direction: column;
+	padding: 30px;
+	background-color: #fff;
+	border-radius: 10px;
+	border: solid 2px black;
+}
+
+.si_s_messageArea>span{
+	color:#6F93F0;
+	font-size: 20px;
+}
+
+.si_s_inputArea{
+	margin-top: 20px;
+	width: 250px;
+	height: 50px;
+	background-color: #fff;
+	border: solid 2px black;
+	border-radius: 0 10px 10px 10px;
+}
+.si_s_inputLeft{
+	width: 200px;
+	height: 50px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.si_s_inputArea>span{
+	width: 50px;
+	height: 50px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: gray;
+}
+</style>