pbl-student-table/src/components/classRoomHelper/component/taskArea.vue

<template>
  <div class="task">
    <div class="taskTop" v-if="false">
      <div class="tt_title">任务时间分配</div>
      <div class="tt_item">
        <div class="tt_i_title">
          <span>课程时间轴</span>
        </div>
        <div class="tt_i_box">
          <img :src="require('../../../assets/icon/course/group.png')" />
        </div>
      </div>

      <div class="tt_item">
        <div class="tt_i_title">
          <span>任务状态</span>
          <span>学生活动中...</span>
        </div>
        <div class="tt_i_box">
          <div class="tt_i_b_item">
            <div class="tt_i_b_title">作业提交</div>
            <div class="tt_i_b_box">
              <div class="tt_i_b_b_item">
                <div>提交人数</div>
                <span>34<span>人</span></span>
              </div>
              <div class="tt_i_b_b_item">
                <div>正确率</div>
                <span>88<span>%</span></span>
              </div>
            </div>
          </div>
          <div class="tt_i_b_item">
            <div class="tt_i_b_title">交流互动</div>
            <div class="tt_i_b_box">
              <div class="tt_i_b_b_item">
                <div>参与人数</div>
                <span>56<span>人</span></span>
              </div>
              <div class="tt_i_b_b_item">
                <div>点赞数</div>
                <span>36<span>个</span></span>
              </div>
              <div class="tt_i_b_b_item">
                <div>评论数</div>
                <span>128<span>条</span></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="t_top" ref="chatRef">
      <div class="t_t_chat" v-for="(item, index) in chatList" :key="index">
        <div class="t_t_c_user" v-if="item.content">
          <div class="t_t_c_u_left">
            <div class="t_t_c_u_l_content">{{ item.content }}</div>
            <div class="t_t_c_u_l_time">{{ item.createtime }}</div>
          </div>
          <div class="t_t_c_u_right">
            <span>我</span>
          </div>
        </div>
        <div class="t_t_c_ai">
          <div class="t_t_c_a_left">
						<el-avatar v-if="item.filename" :src="item.filename"></el-avatar>
              <span v-else>Ai</span>
          </div>
          <div class="t_t_c_a_right">
            <div class="t_t_c_a_r_content" style="display: flex;justify-content: space-between;flex-wrap: wrap;" v-if="item.content.includes('图片')">
              <div
                  v-if="!pan(item.aiContent).length"
                  class="d_t_c_a_r_content"
                  v-loading="item.loading"
                  v-html="item.aiContent"
                ></div>
              <div v-else v-for="i in pan(item.aiContent)">
                  <img style="width: 120px;height: 120px;" :src="i.image" alt=""  @click="previewImg(i.image)">
              </div>
            </div>
            <div
              v-else
              class="t_t_c_a_r_content"
              v-loading="item.loading"
              v-html="item.aiContent"
            ></div>
            <div class="t_t_c_a_r_time">{{ item.createtime }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="t_bottom">
      <div class="t_b_btnArea">
        <!-- <div class="s_b_ba-item" @click.stop="choiceRole()">选择角色</div> -->
        <div class="t_b_ba_item" @click="sendType('智能总结')">智能总结</div>
        <div class="t_b_ba_item" @click="sendType('智能出题')">智能出题</div>
        <!-- <div class="t_b_ba_item" @click="sendType('优秀标兵')">优秀标兵</div> -->
        <div class="t_b_ba_item" @click="sendType('扩展知识')">扩展知识</div>
				<div class="t_b_ba_item" @click="clear()">清空聊天记录</div>
      </div>
      <div class="t_b_inputArea">
        <!-- <div class="t_b_tape" @click="goTape()"></div> -->
        <div class="t_b_input">
          <el-input
            :disabled="loading || chatLoading"
            v-loading="loading || chatLoading"
            @keyup.enter.native="send()"
            class="t_b_i_left"
            v-model="text"
          ></el-input>
          <!-- <div class="t_b_i_right" @click="sendFile()">
						<span></span>
					</div> -->
        </div>
        <div class="t_b_btn" @click="send()">
          <span></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { Loading } from 'element-ui';
import { v4 as uuidv4 } from "uuid";
import MarkdownIt from "markdown-it";
export default {
  props: {
    courseDetail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      userid: this.$route.query.userid,
      courseId: this.$route.query.courseId,
      text: "",
      loading: false,
      chatLoading: false,
      chatList: []
    };
  },
  computed: {
    pan() {
      return (content) => {
        try {
        return JSON.parse(content)
      } catch (error) {
        return []
      }
      };
    }
  },
  methods: {
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
		clear(){
			this.chatList = [];
		},
    // 获取ai对话
    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.chatLoading = false;
          this.scrollBottom();
          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.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.chatList.find(i => i.uid == _uid).aiContent = _mdText;
          this.chatList.find(i => i.uid == _uid).loading = false;
          this.scrollBottom();
          // 处理流数据
        }
      };
    },
    //保存消息
    insertChat(_uid) {
      let _data = this.chatList.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}-studyStudent` //这是对话记录位置
      };
      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.chatList = [];
        this.loading = true;
        this.chatLoading = true;
        let params = {
          userid: this.userid,
          groupid: "602def61-005d-11ee-91d8-005056b8q12w",
          // session_name:``
          session_name: `${this.courseId}-studyStudent`
        };
        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.chatList = _chatList;
              this.loading = false;
              this.chatLoading = false;
            } else {
              //没有对话记录
              this.loading = false;
              this.chatLoading = false;
            }
            resolve();
          })
          .catch(err => {
            console.log(err);
            this.$message.error("获取对话记录失败");
            this.loading = false;
            this.chatLoading = false;
            resolve();
          });
      });
    },
    // choiceRole() {
    //   this.cardType = 1;
    // },
    // sendFile() {
    //   if (this.loading) return this.$message.info("请稍等");
    //   this.$message.info("点击了附件");
    // },
    // goTape() {
    //   if (this.loading) return this.$message.info("请稍等");
    //   this.$message.info(`点击了语音`);
    // },
    send(_text = this.text) {
      if (this.loading || this.chatLoading) return this.$message.info("请稍等");
      if (_text.trim().length == 0) return this.$message.info("请输入内容");
      this.chatLoading = true;
      let _uuid = uuidv4();


      if (_text.indexOf("图片") != -1) {
        // console.log("图片");
        this.text = "";
        let params = {
          page: 1,
          pagesize: 4,
          query: _text
        };
        // this.$message.info(_text);
        this.chatList.push({
          role: "user",
          content: `${_text}`,
          uid: _uuid,
          AI: "AI",
          aiContent: "",
          oldContent: "",
          isShowSynchronization: false,
          filename: "",
          index: this.chatList.length,
          is_mind_map: false,
          loading: true
        });
        this.ajax
          .post("https://gpt.cocorobo.cn/search_image", params)
          .then(res => {
            let data = res.data.FunctionResponse.result;
            // console.log('res',res.data.FunctionResponse.result);
            this.chatList.find(i => i.uid == _uuid).aiContent = JSON.stringify(data);
            this.chatList.find(i => i.uid == _uuid).loading = false;
            this.chatLoading = false;
            this.getAiContent(_uuid);

            // console.log('resresresres',res);
            // if (res.data.FunctionResponse.result == "发送成功") {

            // } else {
            //   this.$message.warning(res.data.FunctionResponse.result);
            // }
          });
          this.scrollBottom();
          return;
      }
      console.log('没停？？？');

      this.chatList.push({
        role: "user",
        content: `${_text}`,
        uid: _uuid,
        AI: "AI",
        aiContent: "",
        oldContent: "",
        isShowSynchronization: false,
        filename: "",
        index: this.chatList.length,
        is_mind_map: false,
        loading: true
      });
      this.scrollBottom();

      let params = {
        model: "gpt-3.5-turbo",
        temperature: 0,
        max_tokens: 4096,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
        messages: [{ role: "user", content: _text }],
        uid: _uuid,
        mind_map_question: ""
      };
      this.text = "";

      this.ajax
        .post("https://gpt4.cocorobo.cn/chat", params)
        .then(res => {
          if (res.data.FunctionResponse.result == "发送成功") {
          } else {
            this.$message.warning(res.data.FunctionResponse.result);
            this.chatLoading = false;
          }
        })
        .catch(e => {
          console.log(e);
          this.chatLoading = false;
        });
      this.getAiContent(_uuid);
    },
    sendType(_text) {
      if (this.loading || this.chatLoading) return this.$message.info("请稍等");
      let _msg = ``;
      if (_text == "扩展知识") {
        // return console.log(this.courseDetail);
        _msg = `
        NOTICE
Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

# Context
## 任务
你的任务是根据用户的请求，结合以下“课程信息”包含的子条目（“课程标题”，“主题”，“学科”以及“年级”），向用户输出相关的扩展知识点，将结果以有序列表的形式返回给用户。
课程信息
课程标题：${this.courseDetail.title}
分类：${this.courseDetail.name?this.courseDetail.name:"无"}
学生年级：${this.courseDetail.classname?this.courseDetail.classname:"无"}

## 规则
1. 内容应该与“课程信息”相关，避免提供无关的信息。
2. 当课程信息中的子条目内容为“无”时，无视这些条目进行即可。
3. 搜索建议的结果应该符合伦理规范。
4. 一步步思考如何根据“课程信息”来输出“扩展知识点”，但是你不需要“扩展知识点”以外的内容。

## 格式要求
1. 应包括5个相关的“扩展知识点”。
2. 搜索建议应以有序列表形式呈现，每个建议包括关键词和简短描述。

# Format example
## 课程标题：垃圾回收
主题：无
学科：无
年级：无
1. 垃圾分类标准：不同国家的垃圾分类标准和方法。
2. 可回收垃圾处理：可回收垃圾的处理流程和再利用方法。
3. 有害垃圾的影响：有害垃圾对环境和人体健康的潜在影响。
4. 垃圾减量化策略：减少垃圾产生的有效策略和实践。
5. 环保教育活动：在学校中推广环保意识的活动和资源。
        `;
      } else if (_text == "智能出题") {
        _msg = `
        NOTICE
Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

# Context
## 任务
你的任务是根据用户的请求，结合以下“课程信息”包含的子条目（“课程标题”，“主题”，“学科”以及“年级”），向用户输出相关的练习题目，将结果以有序列表的形式返回给用户。
课程信息
课程标题：${this.courseDetail.title}
分类：${this.courseDetail.name?this.courseDetail.name:"无"}
学生年级：${this.courseDetail.classname?this.courseDetail.classname:"无"}

## 规则
1. 练习题目内容应该与“课程信息”相关，避免提供无关的信息。
2. 当课程信息中的子条目内容为“无”时，无视这些条目进行输出即可。
3. 一步步思考如何根据“课程信息”输出“练习题目”，但是你不需要输出“练习题目”以外的内容。
4.输出练习题目后，提示用户“希望这些题目能帮到你，如果需要其他类型题目或者更多题目，可以随时向我输入你的需求”

## 格式要求
1. 输出应包括3道相关的“练习题目”。
2. 练习题目默认只包含3道4选1的单选题，除非用户在提示词中更具体地指明了题目类型和数量。
3. 练习题目应以有序列表形式呈现，每个建议包括关键词和简短描述。

# Format example
## 课程标题：垃圾回收
主题：无
学科：无
年级：无
1. 垃圾回收的主要目的是： a) 增加垃圾的数量 b) 减少垃圾的数量 c) 提高垃圾的质量 d) 增加垃圾的种类
2. 以下哪种垃圾是可以回收的？ a) 食物残渣 b) 塑料瓶 c) 湿纸巾 d) 动物粪便
3. 垃圾分类中，玻璃瓶通常属于哪一类？ a) 可回收垃圾 b) 厨余垃圾 c) 有害垃圾 d) 其他垃圾


					`;
      } else if (_text == "智能总结") {
        _msg = `
        NOTICE
Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

# Context
## 任务
你的任务是根据用户的请求，结合以下“课程信息”包含的子条目（“课程标题”，“主题”，“学科”，“年级”以及“学习内容”），对课程进行课程总结，请根据输出格式将内容输出给用户。
课程信息
课程标题：${this.courseDetail.title}
分类：${this.courseDetail.name?this.courseDetail.name:"无"}
学生年级：${this.courseDetail.classname?this.courseDetail.classname:"无"}

## 规则
1. “课程总结”内容应该与“课程信息”相关，避免提供无关的信息。
2. 当课程信息中的子条目内容为“无”时，无视这些条目进行输出即可。
3. 一步步思考如何根据“课程信息”输出“课程总结”。

## 格式要求
1. 以无序列表的形式输出“课程信息”中的“课程标题”，“主题”，“学科”以及“年级”，若这些条目中的内容为“无”，则不需要输出

# Format example
## 课程标题：垃圾回收
学科：无
年级：无
课程信息
课程标题：垃圾回收
学科：自然科学 语文 数学
学习内容：学习内容包含一份引导学生思考为何要进行垃圾回收的文档材料

					`;
      }
      if (!_msg) return;
      // console.log(_msg)
      this.chatLoading = true;
      let _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,
        loading: true
      });
      this.scrollBottom();

      let params = {
        model: "gpt-3.5-turbo",
        temperature: 0,
        max_tokens: 4096,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
        messages: [{ role: "user", content: _msg }],
        uid: _uuid,
        mind_map_question: ""
      };
      this.text = "";

      this.ajax
        .post("https://gpt4.cocorobo.cn/chat", params)
        .then(res => {
          if (res.data.FunctionResponse.result == "发送成功") {
          } else {
            this.$message.warning(res.data.FunctionResponse.result);
            this.chatLoading = false;
          }
        })
        .catch(e => {
          console.log(e);
          this.chatLoading = false;
        });
      this.getAiContent(_uuid);
      // this.send(text);
    },
    // sendImage() {
    //   this.$message.info("发送图片");
    // },
    // sendVideo() {
    //   this.$message.info("发送视频");
    // },
    scrollBottom() {
      this.$nextTick(() => {
        this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
      });
    }
  },
  mounted() {
    this.getChatList().then(_ => {
      this.scrollBottom();
    });
  }
};
</script>

<style scoped>
.task {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.taskTop {
  width: 100%;
  height: 280px;
  box-sizing: border-box;
  padding: 10px;
  overflow-x: hidden;
}

.tt_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.tt_item {
  width: 100%;
  height: auto;
  margin-top: 10px;
}

.tt_i_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tt_i_title > span:nth-of-type(2) {
  box-sizing: border-box;
  padding: 0 10px;
  height: 25px;
  background-color: #effcf5;
  color: #83e0af;
}

.tt_i_box {
  width: 100%;
  height: auto;
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
}

.tt_i_box > img {
  width: 100%;
  height: 50px;
}

.tt_i_b_item {
  width: auto;
  height: 90px;
  background-color: #f6f9ff;
}

.tt_i_b_title {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: solid 1px #e0eafb;
  color: #626466;
}

.tt_i_b_box {
  width: auto;
  height: 60px;
  box-sizing: border-box;
  border: solid 1px #e0eafb;
  border-top: none;
  display: flex;
}

.tt_i_b_b_item {
  width: 70px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: solid 1px #e0eafb;
}

.tt_i_b_box > .tt_i_b_b_item:nth-of-type(1) {
  border-left: none;
}

.tt_i_b_b_item > div {
  font-size: 14px;
  color: #949599;
}

.tt_i_b_b_item > span {
  font-weight: bold;
}

.tt_i_b_b_item > span > span {
  font-size: 12px;
  font-weight: 200;
}

.t_top {
  width: 100%;
  height: calc(100% - 90px);
  /* height: calc(100% - 370px); */
  overflow: auto;
  box-sizing: border-box;
  padding: 20px 0;
}

.t_t_chat {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  flex-direction: column;
}

.t_t_chat > div {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.t_t_c_user {
  box-sizing: border-box;
  padding-left: 35px;
}

.t_t_c_u_left {
  width: 90%;
  height: auto;
}

.t_t_c_u_l_content {
  width: auto;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  color: white;
  background-color: #3681fc;
  border-radius: 8px 2px 8px 8px;
  white-space: pre-line;
}

.t_t_c_u_l_time {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
  color: #9f9f9f;
  margin-top: 5px;
}

.t_t_c_u_right {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  margin-left: 5px;
}

.t_t_c_u_right > span {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #3681fc;
  border-radius: 50%;
}

.t_t_c_ai {
  margin-top: 10px;
  box-sizing: border-box;
  padding-right: 35px;
}

.t_t_c_a_right {
  min-width: 90%;
  height: auto;
}

.t_t_c_a_r_content {
  width: auto;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  background-color: #f6f8ff;
  border-radius: 2px 8px 8px 8px;
  white-space: pre-line;
  word-break: break-all;
}

.t_t_c_a_r_content2 {
  background-color: #f6f8ff;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 2px 8px 8px 8px;
  white-space: pre-line;
  box-shadow: 0 0px 10px #c5cbee;
}

.t_t_c_a_r_c_title {
  display: flex;
  align-items: center;
}
.t_t_c_a_r_c_title > img {
  width: 16px;
  height: 16px;
}

.t_t_c_a_r_c_item {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-top: 5px;
  color: #666666;
  font-size: 14px;
  cursor: pointer;
}

.t_t_c_a_r_c_item:hover {
  border: solid #b8d2fe 1px;
  box-shadow: 0 0 5px 2px #b8d2fe;
}

.t_t_c_a_r_c_title > span {
  font-weight: bold;
}

.t_t_c_a_r_time {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  font-size: 12px;
  color: #9f9f9f;
  margin-top: 5px;
}

.t_t_c_a_left {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  margin-right: 5px;
}

.t_t_c_a_left > span {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #3681fc;
  border-radius: 50%;
}

.t_bottom {
  width: 100%;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.t_b_btnArea {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px;
  overflow-y: hidden;
}

.t_b_ba_item {
  width: auto;
  box-sizing: border-box;
  padding: 0 10px;
  height: 25px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 阴影 */
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.363);
  border-radius: 15px;
  font-size: 14px;
  cursor: pointer;
  margin-right: 10px;
  white-space: nowrap;
  transition: 0.3s;
}

.t_b_ba_item:hover {
  background-color: rgb(236, 236, 236);
}

.t_b_inputArea {
  width: 100%;
  height: 55px;
  box-sizing: border-box;
  border-top: solid 1px #ededed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 10px;
}

.t_b_tape {
  width: 35px;
  height: 35px;
  background: url("../../../assets/icon/course/tape.png") no-repeat;
  background-size: 50% 60%;
  background-position: center;
  cursor: pointer;
}

.t_b_input {
  /* width: 75%; */
  flex: 1;
  height: 45px;
  background-color: #f3f3f3;
  border-radius: 50px;
  margin: 0 10px;
  display: flex;
  overflow: hidden;
  align-items: center;
}

.t_b_i_left {
  /* width: calc(100% - 45px); */
  width: 100%;
  line-height: 45px;
  height: 100%;
}

.t_b_i_left >>> .el-input__inner {
  border: none;
  background-color: #f3f3f3;
  outline: none;
  border-radius: 50px 0 0 50px;
}

.t_b_i_right {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.t_b_i_right > span {
  width: 35px;
  height: 35px;
  background: url("../../../assets/icon/course/file.png") no-repeat;
  background-size: 50% 60%;
  background-position: center;
  cursor: pointer;
}

.t_b_btn {
  width: 40px;
  height: 40px;
  background-color: #3681fc;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}

.t_b_btn > span {
  width: 30px;
  height: 30px;
  background: url("../../../assets/icon/course/send.png") no-repeat;
  background-size: 70% 70%;
  background-position: center;
}

td,
th {
  padding: 10px;
}
</style>