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

<template>
  <div class="search">
    <div class="s_top" ref="chatRef">
      <!-- <div class="s_t_chat">
        <div class="s_t_c_ai">
          <div class="s_t_c_a_left">
            <span>Ai</span>
          </div>
          <div class="s_t_c_a_right">
            <div class="s_t_c_a_r_content2">
              <div class="s_t_c_a_r_c_title">
                <img :src="require('../../../assets/icon/course/idea.png')" />
                <span>猜你想搜:</span>
              </div>
              <div
                class="s_t_c_a_r_c_item"
                v-for="(item, index) in wantSearch"
                :key="index"
                @click="sendAiIdea(item.label)"
              >
                {{ index + 1 }}.{{ item.title }}：{{ item.label }}
              </div>
            </div>
            <div class="s_t_c_a_r_time">
              {{ new Date().toLocaleString().replace(/\//gi, "-") }}
            </div>
          </div>
        </div>
      </div> -->
      <div class="s_t_chat" v-for="(item, index) in chatList" :key="index">
        <div
          class="s_t_c_user"
          v-if="
            item.content &&
              item.content != 'wanSearch' &&
              item.content != 'getImage'
          "
        >
          <div class="s_t_c_u_left">
            <div class="s_t_c_u_l_content">{{ item.content }}</div>
            <div class="s_t_c_u_l_time">{{ item.createtime }}</div>
          </div>
          <div class="s_t_c_u_right">
            <span>我</span>
          </div>
        </div>

        <div
          class="s_t_c_ai"
          v-if="item.content != 'wanSearch' && item.content != 'getImage'"
        >
          <div class="aiCopy">
            <img
              style="width: 30px;"
              src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%A4%8D%E5%88%B6%E5%9B%BE%E6%A0%871715569581741.png"
              alt=""
            />
          </div>
          <div class="s_t_c_a_left">
            <span>Ai</span>
          </div>
          <div class="s_t_c_a_right">
            <div class="s_t_c_a_r_content" style="display: flex;justify-content: space-between;flex-wrap: wrap;" v-if="item.content.includes('图片')">
              <div  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="s_t_c_a_r_content"
              v-loading="item.loading"
              v-html="item.aiContent"
            ></div>

            <!-- <div
              class="s_t_c_a_r_contentImage"
              v-loading="item.loading"

            >
            
              <span style="margin-bottom: 10px;">为您找到以下图片: {{ item.content }}</span> -->
              <!-- {{ item.aiContent }} -->
              <!-- <img
                v-for="(i, index) in item.aiContent"
                @click.stop="$hevueImgPreview(item)"
                :key="index"
                :src="i.image"
              /> -->
              <!-- <div class="imgNumberBlock">
                <div class="imgNumber" v-for="(i,index) in imgNumList" :key="index+'b'">
                  {{ i }}
                </div>
                <div  class="imgNumber" style="background: none;">
                  <img style="width: 36px;height: 30px;" src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/Frame%20131715569413607.png" alt="">
                </div>
              </div> -->
            <!-- </div> -->
            <!-- <div class="s_t_c_a_r_time">{{ item.createtime }}</div> -->
          </div>
        </div>

        <div class="s_t_chat" v-if="item.content == 'wanSearch'">
          <div class="s_t_c_ai">
            <div class="s_t_c_a_left">
              <el-avatar v-if="item.filename" :src="item.filename"></el-avatar>
              <span v-else>Ai</span>
            </div>
            <div class="s_t_c_a_right">
              <div class="s_t_c_a_r_content2" v-loading="item.loading">
                <div class="s_t_c_a_r_c_title">
                  <img :src="require('../../../assets/icon/course/idea.png')" />
                  <span>猜你想搜:</span>
                </div>
                <div
                  class="s_t_c_a_r_c_item"
                  v-for="(item, index) in item.aiContent"
                  :key="index"
                  @click="sendAiIdea(item.label)"
                >
                  {{ index + 1 }}.{{ item.title }}：{{ item.label }}
                </div>
              </div>
              <div class="s_t_c_a_r_time">{{ item.createtime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="s_bottom">
      <!-- <div class="s_b_ba-item" @click.stop="choiceRole()">选择角色</div> -->

      <div class="s_b_btnArea">
        <div class="s_b_ba-item" @click="clear()">
          清空聊天记录
        </div>
      </div>
      <div class="s_b_inputArea">
        <!-- <div class="s_b_tape" @click="goTape()"></div> -->
        <div class="s_b_input">
          <el-input
            :disabled="loading || chatLoading"
            v-loading="loading || chatLoading"
            @keyup.enter.native="send()"
            class="s_b_i_left"
            v-model="text"
          ></el-input>
          <!-- <div class="s_b_i_right" @click="sendFile()">
            <span></span>
          </div> -->
        </div>
        <div class="s_b_btn" @click="send()">
          <span></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import MarkdownIt from "markdown-it";
export default {
  props: {
    courseDetail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      text: "",
      loading: false,
      chatLoading: false,
      imageCheck: false,
      videoCheck: false,
      userid: this.$route.query.userid,
      courseId: this.$route.query.courseId,
      imgNumList: ["U1", "U2", "U3", "U4"],
      chatList: []
    };
  },
  computed: {
    pan() {
      return (content) => {
        try {
        return JSON.parse(content)
      } catch (error) {
        return []
      }
      };
    }
  },
  methods: {
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
    clear() {
      this.chatList = [];
    },
    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("请输入内容");
      let _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();
      if (_text.indexOf("视频") != -1) {
        _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
## 任务
你的任务是根据用户的请求，结合“课程信息”，在Ted.com等教育网站上搜索相关视频，并且按照“输出格式”将结果输出给用户。
课程信息
课程标题：${this.courseDetail.title}
分类：${this.courseDetail.name ? this.courseDetail.name : "无"}
学生年级：${this.courseDetail.classname ? this.courseDetail.classname : "无"}

## 规则
    1. 输出结果必须真实有效，不要捏造无效的视频链接
    2. 当课程信息中的子条目内容为“无”时，无视这些条目进行输出即可。
    3. 如果没有相关内容，请跟用户表明没有找到相关视频链接内容，然后推荐搜索建议
    4. 在ted.com等教育网站上搜索视频，并且以有序列表的形式将结果输出给用户
    5. 请一步步思考如何根据现有信息推送视频，但是最终输出结果不需要包含你的思考过程，只需要包含视频标题+链接。

# Format example
视频来源: Ted.com
视频标题：How AI could save (not destroy) education
视频内容：介绍了一款AI教育软件
视频链接https://www.ted.com/talks/sal_khan_how_ai_could_save_not_destroy_education
				`;
      } else 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: `getImage`,
          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.insertChat(_uuid);

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

            // } else {
            //   this.$message.warning(res.data.FunctionResponse.result);
            // }
          });

        return;
      }
      console.log(9999);
      //         num=0
      //       	_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
      // ## 任务
      // 你的任务是根据用户的请求，结合以下“课程信息”包含的子条目（“课程标题”，“主题”，“学科”以及“年级”），向用户输出相关的4张图片，将结果2*2的形式返回给用户。
      // 课程信息
      // 课程标题：${this.courseDetail.title}
      // 分类：${this.courseDetail.name?this.courseDetail.name:"无"}
      // 学生年级：${this.courseDetail.classname?this.courseDetail.classname:"无"}

      // ## 规则
      //     1. 输出内容应该与“课程信息”相关，避免提供无关的信息。
      //     2. 当课程信息中的子条目内容为“无”时，无视这些条目进行输出即可。
      //     3. 搜索建议的结果应该符合伦理规范。

      // ## 输出格式
      //     1. 以2*2的格式输出应包括4张相关的图片。
      //       `
      //       }
      let history = [];
      if (_msg) {
        history.push({ role: "user", content: _msg });
      }
      history.push({ role: "user", content: _text });
      let params = {
        model: "gpt-3.5-turbo",
        temperature: 0,
        max_tokens: 4096,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
        messages: history,
        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);
    },
    // 获取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();

          // 处理流数据
        }
      };
    },
    getWAntSearchContent(_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 = "";
      this.scrollBottom();
      _source.onmessage = _e => {
        if (_e.data.replace("'", "").replace("'", "") == "[DONE]") {
          //对话已经完成
          _mdText = _mdText.replace("_", "");
          _mdText = _mdText.replace("```json", "");
          _mdText = _mdText.replace("```", "");
          _source.close();
          this.chatLoading = false;
          this.chatList.find(i => i.uid == _uid).aiContent = JSON.parse(
            _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.scrollBottom();
          // 这里保存对话
          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";
          //转化返回的回复流数据
          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;
        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;
            } else {
              //没有对话记录
              this.loading = false;
            }
            resolve();
          })
          .catch(err => {
            console.log(err);
            this.$message.error("获取对话记录失败");
            this.loading = false;
            resolve();
          });
      });
    },
    sendAiIdea(text) {
      if (this.loading) return this.$message.info("请稍等");
      this.send(text);
    },
    sendImage() {
      this.$message.info("发送图片");
    },
    sendVideo() {
      this.$message.info("发送视频");
    },
    getWantSearch() {
      this.chatLoading = true;
      let _uuid = uuidv4();

      let _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个相关的搜索建议，每个搜索建议需要以问号的方式结束。
			- 请一步步思考如何根据现有信息推送搜索建议，但是不需要输出搜索建议以外的内容。

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

			---
      ## Format example
      [{
          "index": 1,
          "title": "垃圾分类标准",
          "label": "不同国家的垃圾分类标准和方法？"
        },
        {
          "index": 2,
          "title": "可回收垃圾处理",
          "label": "可回收垃圾的处理流程和再利用方法？"
        },
        {
          "index": 3,
          "title": "有害垃圾的影响",
          "label": "有害垃圾对环境和人体健康的潜在影响？"
        }]
			`;
      this.chatList.push({
        role: "user",
        content: `wanSearch`,
        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.chatLoading = false;
            this.$message.warning(res.data.FunctionResponse.result);
          }
        })
        .catch(e => {
          this.chatLoading = false;
          console.log(e);
        });
      this.getWAntSearchContent(_uuid);
    },
    scrollBottom() {
      this.$nextTick(() => {
        this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
      });
    }
  },
  mounted() {
    this.getChatList().then(_ => {
      this.scrollBottom();
      this.getWantSearch();
    });
  }
};
</script>

<style scoped>
.search {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.imgNumberBlock {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  /* padding: 5px 10px; */
}
.imgNumberBlock > .imgNumber {
  width: 18%;
  height: 30px;
  white-space: initial;
  background: rgba(224, 234, 251, 1);
  border-radius: 5px;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}

.s_top {
  width: 100%;
  height: calc(100% - 90px);
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 20px 0;
}

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

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

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

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

.s_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;
  word-break: break-all;
}

.s_t_c_a_r_contentImage > span {
  display: block;
}

.s_t_c_a_r_contentImage > img {
  width: 45%;
  height: 125px;
  margin: 1% 1.5%;
  border-radius: 5px;
  cursor: pointer;
}

.s_t_c_a_r_contentImage {
  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;
}

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

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

.s_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%;
}

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

.aiCopy {
  position: absolute;
  right: 5px;
  bottom: 0%;
  transform: translate(0, -30%);
  cursor: pointer;
}

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

.s_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;
}

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

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

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

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

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

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

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

.s_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%;
}

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

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

.s_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;
}

.s_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;
}

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

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

.s_b_i_left {
  width: 100%;
  line-height: 45px;
  height: 100%;
}

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

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

.s_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;
}

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

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