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

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

      <div class="tt_item">
        <div class="tt_i_title">
          <span>任务状态</span>
          <span>学生活动中...</span>
        </div>
        <div class="tt_i_box">
          <div class="tt_i_b_item">
            <div class="tt_i_b_title">作业提交</div>
            <div class="tt_i_b_box">
              <div class="tt_i_b_b_item">
                <div>提交人数</div>
                <span>34<span>人</span></span>
              </div>
              <div class="tt_i_b_b_item">
                <div>正确率</div>
                <span>88<span>%</span></span>
              </div>
            </div>
          </div>
          <div class="tt_i_b_item">
            <div class="tt_i_b_title">交流互动</div>
            <div class="tt_i_b_box">
              <div class="tt_i_b_b_item">
                <div>参与人数</div>
                <span>56<span>人</span></span>
              </div>
              <div class="tt_i_b_b_item">
                <div>点赞数</div>
                <span>36<span>个</span></span>
              </div>
              <div class="tt_i_b_b_item">
                <div>评论数</div>
                <span>128<span>条</span></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="t_top" ref="chatRef">
      <div class="t_t_chat" v-for="(item, index) in chatList" :key="index">
        <div class="t_t_c_user" v-if="item.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"
              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: []
    };
  },
  methods: {
		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();
      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 == "扩展知识") {
        _msg = `
				  ATTENTION: Use '##' or '####'  to SPLIT SECTIONS, not '#'.Output format carefully referenced "Format example".
					
					---
					## 任务
					你的任务是根据用户的请求，结合“课程信息”，向用户推荐相关的知识点，将结果以有序列表的形式返回给用户。
					## 课程信息（读取【课程中心】相关信息）
					#### 课程标题：${this.courseDetail.title}
					#### 分类：${this.courseDetail.name?this.courseDetail.name:"无"}
					#### 学生年级：${this.courseDetail.classname?this.courseDetail.classname:"无"}

					---
					## 规则
					- 输出结果基于“课程信息”，避免提供无关的信息。
					- 搜索建议的结果符合伦理规范。

					---
					## 输出
					- 输出应包括3个相关的扩展知识点。
					- 请一步步思考如何根据现有信息推送扩展知识点，但是不需要输出扩展知识以外的内容。

					---
					## 输出内容
					搜索建议应以有序列表形式呈现，每个建议包括关键词和简短描述。

					---
					## Format example
					世界奇观众多，数不胜数，本文仅从5000+起步记述，按这个标准，世界第一高峰珠穆朗玛峰、第二高峰乔戈里峰、第四高峰洛子峰、第五高峰马卡鲁峰、第六高峰卓奥友峰均为刚刚及格或者未达标。他们均位于群山腹地，距离低海拔地区较远。
					先说答案：南迦帕尔巴特，海拔8125，距离28公里处相对高度差为7081米，且可直视峰顶。注意这几个条件，因为抛开他们的话，后面会有数据上的争议。但有了这些限制条件，可以说，南迦·帕尔巴特峰几乎在所有排行榜上都是当之无愧的冠军，来看看它的数据：世界海拔第9高峰，位于喜马拉雅山脉的西端"地结"（属于巴控克什米尔地区）上，海拔8125米，被印度河深切环绕。顺着该山西北一条山脊往下，可以直达一片面积还不算很小的平地——该平地最低点的一条河仅有1044米。
					关于麦金利山的说法，麦金利山位于美国阿拉斯加州东南部，海拔6193米，约有5500米的相对高差，不但不是高差最大的山，而且论排名，前30也很难进去。因为这个数据如果放在亚洲实在是比较普通。毕竟相对高差是建立在绝对高度的基础上的，想要相对高差突破7000+，那么你的绝对高度当然要先过这个数。而世界所有的7000+高峰，均位于亚洲的大喜马拉雅和喀喇昆仑地区。除了南迦帕尔巴特峰之外，世界第七高峰海拔8167米的道拉吉里峰和第十高峰海拔8093米的安娜普尔娜峰之间，有一条海拔仅在1050-1500米，宽约20公里的卡利甘达基谷地，这里有着12公里距离，双侧均为6900-7000米高差的恐怖纪录。卡利甘达基峡谷数据和壮观程度要超过雅鲁藏布大峡谷，实为世界第一大峡谷，只是国人为了面子问题佯作不知。
					`;
      } else if (_text == "智能出题") {
        _msg = `
				  ATTENTION: Use '##' or '####'  to SPLIT SECTIONS, not '#'.Output format carefully referenced "Format example".

					---
					## 任务
					你的任务是根据用户的请求，结合“课程信息”，向用户推荐相关的题目，将结果以有序列表的形式返回给用户。
					## 课程信息（读取【课程中心】相关信息）
					#### 课程标题：${this.courseDetail.title}
					#### 分类：${this.courseDetail.name?this.courseDetail.name:"无"}
					#### 学生年级：${this.courseDetail.classname?this.courseDetail.classname:"无"}

					---
					## 规则
					- 输出结果基于“课程信息”，避免提供无关的信息。
					- 搜索建议的结果符合伦理规范。

					---
					## 输出
					- 输出应包括3个相关课程的题目。
					- 请一步步思考如何根据现有信息出题，但是不需要输出相关课程以外的内容。

					---
					## 输出内容
					搜索建议应以有序列表形式呈现，每个建议包括关键词和简短描述。

					---
					## Format example
					题目：如果一个物体的动能是 50J，且其速度是 5 m/s，求该物体的质量。

					答案：2 kg

					题目：写出与 "quick" 同义的词。

					答案：fast

					题目：世界上最高的山是什么山。
					A：喜马拉雅山
					B：珠穆朗玛峰
					C：天山
					D：阿尔卑斯山

					答案：B
					`;
      } else if (_text == "智能总结") {
        _msg = `
				  ATTENTION: Use '##' or '####'  to SPLIT SECTIONS, not '#'.Output format carefully referenced "Format example".

					---
					## 任务
					你的任务是根据用户的请求，结合“课程信息”，向用户推荐相关的课程总结，将结果以有序列表的形式返回给用户。
					## 课程信息（读取【课程中心】相关信息）
					#### 课程标题：${this.courseDetail.title}
					#### 分类：${this.courseDetail.name?this.courseDetail.name:"无"}
					#### 学生年级：${this.courseDetail.classname?this.courseDetail.classname:"无"}

					---
					## 规则
					- 输出结果基于“课程信息”，避免提供无关的信息。
					- 搜索建议的结果符合伦理规范。

					---
					## 输出
					- 输出应对应相关课程的总结。
					- 请一步步思考如何根据现有信息总结课程，但是不需要输出相关课程以外的内容。

					---
					## 输出内容
					搜索建议应以有序列表形式呈现，每个建议包括关键词和简短描述。

					---
					## Format example
					珠穆朗玛峰(中国/尼泊尔边界，海拔8848米)

					世界之巅。

					乔戈里峰(K2，中国/巴基斯坦边界，海拔8611米)

					世界第二高峰，峰顶呈金字塔形，山势险峻异常，是国际登山界公认的8000米以上攀登难度最大的山峰。

					干城章嘉峰(印度/尼泊尔边界，海拔8586米)

					世界第三高峰，全球14座8000米级雪山中位置最靠东的高山，山顶呈工字形，山体巨大，靠近喜马拉雅山脉南麓，远眺壮观异常。

					从70千米外海拔500-2000米的大吉岭地区远眺海拔8586米的世界第三高峰干城章嘉峰，极限高差可达8000+。
					`;
      }
      if (!_msg) return;
      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% - 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>