|
|
@@ -0,0 +1,728 @@
|
|
|
+<template>
|
|
|
+ <div class="ai_body">
|
|
|
+ <div class="ai_body_dialog" v-loading="loading" ref="chatDialog">
|
|
|
+ <div
|
|
|
+ class="dialog_content"
|
|
|
+ v-for="(item) in array"
|
|
|
+ :key="item.uid"
|
|
|
+ >
|
|
|
+ <div v-if="item.content" style="margin-left: auto;">
|
|
|
+ <div class="content content2" v-html="item.content"></div>
|
|
|
+ <div class="role">
|
|
|
+ <img src="../../../assets/icon/new/role2.png" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:10px; margin-right: auto;">
|
|
|
+ <div class="role">
|
|
|
+ <img src="../../../assets/icon/new/role1.png" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ element-loading-background="#f6f9ff"
|
|
|
+ :style="{minHeight: item.loading ? '50px' : 'unset'}"
|
|
|
+ class="content"
|
|
|
+ v-loading="item.loading"
|
|
|
+ v-html="item.aiContent"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ai_body_select" v-if="false">
|
|
|
+ <div class="checkBox" v-if="checkBool">
|
|
|
+ <div class="task">
|
|
|
+ <div class="title">选择需要优化的任务：</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="span" @click="addAllTask()">
|
|
|
+ <div class="check">
|
|
|
+ <img
|
|
|
+ :src="checkImg"
|
|
|
+ alt=""
|
|
|
+ v-if="checkArray.length !== course.length"
|
|
|
+ />
|
|
|
+ <img :src="checkIsImg" alt="" v-else />
|
|
|
+ </div>
|
|
|
+ <span>全选</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="span"
|
|
|
+ v-for="(item, index) in course"
|
|
|
+ :key="index"
|
|
|
+ @click="addTask(index)"
|
|
|
+ >
|
|
|
+ <div class="check">
|
|
|
+ <img
|
|
|
+ :src="checkImg"
|
|
|
+ alt=""
|
|
|
+ v-if="checkArray.indexOf(index) === -1"
|
|
|
+ />
|
|
|
+ <img :src="checkIsImg" alt="" v-else />
|
|
|
+ </div>
|
|
|
+ <span>任务{{ index + 1 }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="part">
|
|
|
+ <div class="title">选择优化的部分：</div>
|
|
|
+ <div class="content">
|
|
|
+ <div
|
|
|
+ class="span"
|
|
|
+ v-for="(item, index) in partArray"
|
|
|
+ :key="index"
|
|
|
+ :class="{ active: part == item.name }"
|
|
|
+ @click="checkPart(item.name)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span
|
|
|
+ class="check"
|
|
|
+ :class="{ isCheck: checkBool }"
|
|
|
+ v-if="!checkArray.length && !part"
|
|
|
+ @click="checkBool = !checkBool"
|
|
|
+ >选择优化内容</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="check"
|
|
|
+ :class="{ isCheck: checkBool }"
|
|
|
+ @click="checkBool = !checkBool"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ <el-tooltip :content="taskName" placement="top" effect="dark">
|
|
|
+ <!-- content to trigger tooltip here -->
|
|
|
+ <span>{{ taskName }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="ai_body_input">
|
|
|
+ <textarea
|
|
|
+ style="padding-right: 85px;"
|
|
|
+ rows="3"
|
|
|
+ @keyup.enter="addContent"
|
|
|
+ class="binfo_input binfo_textarea"
|
|
|
+ cols
|
|
|
+ v-model.trim="courseText"
|
|
|
+ placeholder="在此输入您想了解的内容"
|
|
|
+ ></textarea>
|
|
|
+ <div
|
|
|
+ class="c_pub_button_confirm"
|
|
|
+ v-if="!loading && courseText"
|
|
|
+ @click="addContent"
|
|
|
+ >
|
|
|
+ 发送
|
|
|
+ </div>
|
|
|
+ <div class="c_pub_button_confirm" @click="promptTit" v-else>发送</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import checkImg from "../../../assets/icon/sourceFile/check.png";
|
|
|
+import checkIsImg from "../../../assets/icon/sourceFile/check_is.png";
|
|
|
+import { v4 as uuidv4 } from "uuid";
|
|
|
+import MarkdownIt from "markdown-it";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ unitJson: {
|
|
|
+ type: Array
|
|
|
+ },
|
|
|
+ courseId:{
|
|
|
+ type:String,
|
|
|
+ default:""
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ array: [],
|
|
|
+ courseText: "",
|
|
|
+ checkImg: checkImg,
|
|
|
+ checkIsImg: checkIsImg,
|
|
|
+ userid: this.$route.query.userid,
|
|
|
+ checkArray: [],
|
|
|
+ course: [{ title: "任务1" }, { title: "任务2" }, { title: "任务3" }],
|
|
|
+ partArray: [
|
|
|
+ { name: "全部内容" },
|
|
|
+ { name: "任务设计" },
|
|
|
+ { name: "评价设计" }
|
|
|
+ ],
|
|
|
+ part: "全部内容",
|
|
|
+ checkBool: false,
|
|
|
+ loading: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ unitJson: {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ this.course = this.unitJson[0].chapterInfo[0].taskJson;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ promptTit() {
|
|
|
+ if (!this.loading && !this.courseText) {
|
|
|
+ this.$message({
|
|
|
+ message: "请输入您想要了解的内容",
|
|
|
+ type: "warning"
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: "请回答完毕后再次发送",
|
|
|
+ type: "warning"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addContent() {
|
|
|
+ let message = this.courseText
|
|
|
+ if (this.courseText) {
|
|
|
+ let msg = `
|
|
|
+ ATTENTION: Use '##' to SPLIT SECTIONS, not '#'.Output format carefully referenced "Format example".`
|
|
|
+ if(this.checkArray.length){
|
|
|
+ let task = []
|
|
|
+ if(this.part == "全部内容"){
|
|
|
+ for(var i = 0; i < this.checkArray.length; i++){
|
|
|
+ let _index = this.checkArray[i]
|
|
|
+ task.push(this.course[_index])
|
|
|
+ }
|
|
|
+ }else if(this.part == "任务设计"){
|
|
|
+ for(var i = 0; i < this.checkArray.length; i++){
|
|
|
+ let _index = this.checkArray[i]
|
|
|
+ task.push(this.course[_index])
|
|
|
+ }
|
|
|
+ }else if(this.part == "评价设计"){
|
|
|
+ for(var i = 0; i < this.checkArray.length; i++){
|
|
|
+ let _index = this.checkArray[i]
|
|
|
+ task.push(this.course[_index].eList)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ msg += `
|
|
|
+ --------
|
|
|
+ ## 修改内容
|
|
|
+ ${JSON.stringify(task)}
|
|
|
+ `
|
|
|
+
|
|
|
+ msg += `
|
|
|
+ --------
|
|
|
+ ## 要求
|
|
|
+ ${this.courseText}
|
|
|
+ `
|
|
|
+ message = msg
|
|
|
+ }
|
|
|
+ let _uuid = uuidv4();
|
|
|
+ this.array.push({
|
|
|
+ role: "user",
|
|
|
+ content: `${this.courseText}`,
|
|
|
+ uid: _uuid,
|
|
|
+ AI: "AI",
|
|
|
+ aiContent: "",
|
|
|
+ oldContent: "",
|
|
|
+ isShowSynchronization: false,
|
|
|
+ filename: "",
|
|
|
+ index: this.array.length,
|
|
|
+ is_mind_map: false,
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
|
|
|
+ });
|
|
|
+ let params = JSON.stringify({
|
|
|
+ // model: "gpt-3.5-turbo",
|
|
|
+ model: 'gpt-4o-2024-08-06',
|
|
|
+ temperature: 0,
|
|
|
+ max_tokens: 4096,
|
|
|
+ top_p: 1,
|
|
|
+ frequency_penalty: 0,
|
|
|
+ presence_penalty: 0,
|
|
|
+ messages: [{ role: "user", content: message }],
|
|
|
+ uid: _uuid,
|
|
|
+ mind_map_question: ""
|
|
|
+ });
|
|
|
+ this.courseText = "";
|
|
|
+
|
|
|
+ this.ajax.post("https://gpt4.cocorobo.cn/chat", params).then(res => {
|
|
|
+ if (res.data.FunctionResponse.result == "发送成功") {
|
|
|
+ } else {
|
|
|
+ this.$message.warning(res.data.FunctionResponse.result);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ this.getAiContent(_uuid);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getAiContent(_uid) {
|
|
|
+ let _source = new EventSource(`https://gpt4.cocorobo.cn/stream/${_uid}`); //http://gpt4.cocorobo.cn:8011/stream/ https://gpt4.cocorobo.cn/stream/
|
|
|
+ let _allText = "";
|
|
|
+ let _mdText = "";
|
|
|
+ const md = new MarkdownIt();
|
|
|
+ _source.onmessage = _e => {
|
|
|
+ if (_e.data.replace("'", "").replace("'", "") == "[DONE]") {
|
|
|
+ //对话已经完成
|
|
|
+ _mdText = _mdText.replace("_", "");
|
|
|
+ _source.close();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
|
|
|
+ });
|
|
|
+ this.array.find(i => i.uid == _uid).aiContent = _mdText;
|
|
|
+ this.array.find(i => i.uid == _uid).isalltext = true;
|
|
|
+ this.array.find(i => i.uid == _uid).isShowSynchronization = true;
|
|
|
+ this.array.find(i => i.uid == _uid).loading = false;
|
|
|
+ // 这里保存对话
|
|
|
+ this.insertChat(_uid);
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ //对话还在继续
|
|
|
+ let _text = "";
|
|
|
+ _text = _e.data.replaceAll("'", "");
|
|
|
+ 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);
|
|
|
+ this.array.find(i => i.uid == _uid).aiContent = _mdText;
|
|
|
+ this.array.find(i => i.uid == _uid).loading = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
|
|
|
+ });
|
|
|
+ // 处理流数据
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //保存消息
|
|
|
+ insertChat(_uid) {
|
|
|
+ let _data = this.array.find(i => i.uid == _uid);
|
|
|
+ if (!_data) return;
|
|
|
+ let params = {
|
|
|
+ userId: this.userid,
|
|
|
+ userName: "qgt",
|
|
|
+ groupId: "602def61-005d-11ee-91d8-005056b8q12w",
|
|
|
+ answer: _data.aiContent,
|
|
|
+ problem: _data.content,
|
|
|
+ file_id: _data.fileid ? _data.fileid : "",
|
|
|
+ alltext: _data.aiContent,
|
|
|
+ type: "chat",
|
|
|
+ filename: _data.filename,
|
|
|
+ session_name: `${this.courseId}-addCourse` //这是对话记录位置
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .post("https://gpt4.cocorobo.cn/insert_chat", params)
|
|
|
+ .then(res => {});
|
|
|
+ },
|
|
|
+ // 获取对应的聊天记录
|
|
|
+ getChatList() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ if (this.loading) return this.$message.info("请稍等...");
|
|
|
+ this.array = [];
|
|
|
+ this.loading = true;
|
|
|
+ let params = {
|
|
|
+ userid: this.userid,
|
|
|
+ groupid: "602def61-005d-11ee-91d8-005056b8q12w",
|
|
|
+ // session_name:``
|
|
|
+ session_name: `${this.courseId}-addCourse`
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .post("https://gpt4.cocorobo.cn/get_agent_park_chat", params)
|
|
|
+ .then(res => {
|
|
|
+ let _data = JSON.parse(res.data.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.array = _chatList;
|
|
|
+ this.loading = false;
|
|
|
+ } else {
|
|
|
+ //没有对话记录
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ resolve();
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ this.$message.error("获取对话记录失败");
|
|
|
+ this.loading = false;
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addTask(index) {
|
|
|
+ if (this.checkArray.indexOf(index) !== -1) {
|
|
|
+ this.checkArray.splice(this.checkArray.indexOf(index), 1);
|
|
|
+ } else {
|
|
|
+ this.checkArray.push(index);
|
|
|
+ }
|
|
|
+ console.log(index);
|
|
|
+ },
|
|
|
+ addAllTask() {
|
|
|
+ if (this.checkArray.length === this.course.length) {
|
|
|
+ this.checkArray = [];
|
|
|
+ } else {
|
|
|
+ this.checkArray = [];
|
|
|
+ this.course.forEach((item, index) => {
|
|
|
+ this.checkArray.push(index);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkPart(name) {
|
|
|
+ this.part = name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ courseTextLength() {
|
|
|
+ return this.courseText.length;
|
|
|
+ },
|
|
|
+ taskName() {
|
|
|
+ let task = "";
|
|
|
+ if (this.checkArray.length) {
|
|
|
+ task = "任务";
|
|
|
+ this.checkArray = this.checkArray.sort((a, b) => a - b);
|
|
|
+ let a = JSON.parse(JSON.stringify(this.checkArray));
|
|
|
+ for (let index = 0; index < a.length; index++) {
|
|
|
+ a[index]++;
|
|
|
+ }
|
|
|
+ task += a.join("/");
|
|
|
+ }
|
|
|
+ return task + " " + this.part;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getChatList().then(_ => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ console.log(this.$refs.chatDialog.scrollHeight)
|
|
|
+ this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.ai_body {
|
|
|
+ height: 100%;
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.binfo_input {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 12px 14px;
|
|
|
+ display: block;
|
|
|
+ min-width: 0;
|
|
|
+ outline: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ resize: none;
|
|
|
+ font-family: "Microsoft YaHei";
|
|
|
+ min-height: 48px;
|
|
|
+ /* border: 1px solid #3682fc00; */
|
|
|
+ border: 1.5px solid #cad1dc;
|
|
|
+}
|
|
|
+
|
|
|
+.binfo_textarea {
|
|
|
+ border: 1.5px solid #cad1dc;
|
|
|
+ font-size: 14px;
|
|
|
+ resize: none;
|
|
|
+ /* background: #f6f6f6; */
|
|
|
+ font-family: "Microsoft YaHei";
|
|
|
+}
|
|
|
+
|
|
|
+.binfo_textarea::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 6px;
|
|
|
+ /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+/*定义滚动条轨道 内阴影+圆角*/
|
|
|
+.binfo_textarea::-webkit-scrollbar-track {
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+/*定义滑块 内阴影+圆角*/
|
|
|
+.binfo_textarea::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 10px;
|
|
|
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
|
+ background-color: rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.binfo_input:focus-visible {
|
|
|
+ border: 1.5px solid #3681fc !important;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_input {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: end;
|
|
|
+ margin-top: auto;
|
|
|
+ min-height: fit-content;
|
|
|
+}
|
|
|
+
|
|
|
+.c_pub_button_confirm {
|
|
|
+ /* position: absolute;
|
|
|
+ bottom: 13px;
|
|
|
+ right: 13px; */
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 80px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ right: 12px;
|
|
|
+ bottom: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_dialog {
|
|
|
+ padding: 10px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: calc(100%);
|
|
|
+ overflow: auto;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_content {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_content > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_content + .dialog_content {
|
|
|
+ margin: 15px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_content > div .right {
|
|
|
+ flex-direction: row-reverse;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_content > div .right .role {
|
|
|
+ margin-right: 0;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_content > div .role {
|
|
|
+ min-width: 30px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ margin-right: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_content > div .role > img {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_content > div .content {
|
|
|
+ padding: 10px 10px;
|
|
|
+ border-radius: 2px 8px 8px 8px;
|
|
|
+ width: 100%;
|
|
|
+ word-break: break-word;
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* white-space: pre-line; */
|
|
|
+ max-width: 100%;
|
|
|
+ background: #f6f9ff;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_content > div .content2 {
|
|
|
+ background: #3681fc;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 8px 2px 8px 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .check {
|
|
|
+ background: #e7e7e7;
|
|
|
+ display: flex;
|
|
|
+ width: fit-content;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 21px;
|
|
|
+ font-size: 14px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #0061ff;
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 10px 0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .check::before {
|
|
|
+ content: "";
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: block;
|
|
|
+ background-image: url("../../../assets/icon/course/aiPart.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .check::after {
|
|
|
+ content: "";
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: block;
|
|
|
+ background-image: url("../../../assets/icon/course/aiPart_arrow.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .isCheck {
|
|
|
+ background: #0061ff;
|
|
|
+ display: flex;
|
|
|
+ width: fit-content;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 21px;
|
|
|
+ font-size: 14px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 10px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ max-width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .isCheck > span {
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .isCheck::before {
|
|
|
+ content: "";
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: block;
|
|
|
+ background-image: url("../../../assets/icon/course/aiPart_active.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .isCheck::after {
|
|
|
+ content: "";
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: block;
|
|
|
+ background-image: url("../../../assets/icon/course/aiPart_arrow_active.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 40px;
|
|
|
+ border: 1px solid #e0eafb;
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .task > .title,
|
|
|
+.ai_body_select > .checkBox > .part > .title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .task {
|
|
|
+ height: calc(100% - 60px);
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .part {
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .task > .content {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .task > .content > .span + .span {
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .task > .content > .span {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .task > .content > .span > .check {
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .task > .content > .span > .check > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .part > .content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .part > .content > .span {
|
|
|
+ padding: 3px 6px;
|
|
|
+ border: 1px solid #e0eafb;
|
|
|
+ border-radius: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.ai_body_select > .checkBox > .part > .content > .span.active {
|
|
|
+ color: #0061ff;
|
|
|
+ border-color: #0061ff;
|
|
|
+}
|
|
|
+</style>
|
