|
|
@@ -1,146 +1,233 @@
|
|
|
<template>
|
|
|
- <div class="search" v-loading="loading">
|
|
|
- <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" @click="sendAiIdea('不同国家的垃圾分类标准和方法？')">1.垃圾分类标准：不同国家的垃圾分类标准和方法？</div>
|
|
|
- <div class="s_t_c_a_r_c_item" @click="sendAiIdea('可回收垃圾的处理流程和再利用方法？')">2.可回收垃圾处理：可回收垃圾的处理流程和再利用方法？</div>
|
|
|
- <div class="s_t_c_a_r_c_item" @click="sendAiIdea('有害垃圾对环境和人体健康的潜在影响？')">3.有害垃圾的影响：有害垃圾对环境和人体健康的潜在影响？</div>
|
|
|
- </div>
|
|
|
- <div class="s_t_c_a_r_time">{{ new Date().toLocaleString().replace(/\//ig,'-') }}</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.role =='user'">
|
|
|
- <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.time}}</div>
|
|
|
- </div>
|
|
|
- <div class="s_t_c_u_right">
|
|
|
- <span>我</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="s_t_c_ai" v-if="item.role =='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_content" v-if="item.type==0">{{ item.content }}</div>
|
|
|
- <div class="s_t_c_a_r_contentImage" v-if="item.type==1">
|
|
|
- <span>为你找到以下图片</span>
|
|
|
- <!-- <el-image
|
|
|
+ <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.role == 'user'">
|
|
|
+ <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.time }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="s_t_c_u_right">
|
|
|
+ <span>我</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="s_t_c_ai" v-if="item.role == 'ai'">
|
|
|
+ <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"
|
|
|
+ v-loading="loading && index == chatList.length - 1"
|
|
|
+ v-if="item.type == 0"
|
|
|
+ >{{ item.content }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="s_t_c_a_r_contentImage"
|
|
|
+ v-loading="loading && index == chatList.length - 1"
|
|
|
+ v-if="item.type == 1"
|
|
|
+ >
|
|
|
+ <span style="margin-bottom: 10px;">为您找到以下图片:</span>
|
|
|
+ <!-- <el-image
|
|
|
style="width: 45%;height: 125px;margin: 1% 1.5%;"
|
|
|
v-for="(item,index) in item.content"
|
|
|
:key="index"
|
|
|
:src="item"
|
|
|
:preview-src-list="item">
|
|
|
</el-image> -->
|
|
|
- <img v-for="(item,index) in item.content" @click.stop="$hevueImgPreview(item)" :key="index" :src="item">
|
|
|
- </div>
|
|
|
- <div class="s_t_c_a_r_time">{{item.time}}</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="s_bottom">
|
|
|
- <div class="s_b_btnArea">
|
|
|
- <!-- <div class="s_b_ba-item" @click.stop="choiceRole()">选择角色</div> -->
|
|
|
- <div class="s_b_ba-item">
|
|
|
- <el-checkbox style="display: flex;" v-model="imageCheck">图片</el-checkbox>
|
|
|
- </div>
|
|
|
- <div class="s_b_ba-item">
|
|
|
- <el-checkbox style="display: flex;" v-model="videoCheck">视频</el-checkbox>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="s_b_inputArea">
|
|
|
- <div class="s_b_tape" @click="goTape()"></div>
|
|
|
- <div class="s_b_input">
|
|
|
- <el-input 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>
|
|
|
+ <img
|
|
|
+ v-for="(item, index) in item.content"
|
|
|
+ @click.stop="$hevueImgPreview(item)"
|
|
|
+ :key="index"
|
|
|
+ :src="item"
|
|
|
+ />
|
|
|
+ <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.time }}</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">
|
|
|
+ <el-checkbox
|
|
|
+ :disabled="loading"
|
|
|
+ style="display: flex;"
|
|
|
+ v-model="imageCheck"
|
|
|
+ >图片</el-checkbox
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="s_b_ba-item">
|
|
|
+ <el-checkbox
|
|
|
+ :disabled="loading"
|
|
|
+ style="display: flex;"
|
|
|
+ v-model="videoCheck"
|
|
|
+ >视频</el-checkbox
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="s_b_inputArea">
|
|
|
+ <div class="s_b_tape" @click="goTape()"></div>
|
|
|
+ <div class="s_b_input">
|
|
|
+ <el-input
|
|
|
+ :disabled="loading"
|
|
|
+ @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>
|
|
|
- export default {
|
|
|
- data(){
|
|
|
- return{
|
|
|
- text:"",
|
|
|
- loading:false,
|
|
|
- imageCheck:false,
|
|
|
- videoCheck:false,
|
|
|
- chatList:[
|
|
|
- {
|
|
|
- role:"ai",
|
|
|
- content:`您好，有什么可以帮助您的吗？`,
|
|
|
- time:new Date().toLocaleString().replace(/\//ig,'-'),
|
|
|
- type:0,
|
|
|
- },
|
|
|
-// {
|
|
|
-// role:"user",
|
|
|
-// content:"正十三边形的每个角是多少度？",
|
|
|
-// time:"2023-11-11 11:10:11"
|
|
|
-// },
|
|
|
-// {
|
|
|
-// role:"ai",
|
|
|
-// content:`小朋友们，你们知道正十三边形吗？就像我们班有13个好朋友站成一个圈圈一样。如果我们想知道每个人转身看向下一个人需要转多少度，我们可以这样想：首先，所有朋友手拉手围成的圈圈是360度，对吧？但是，我们不能直接算每个人转身的角度，因为那是外面的角度，我们要算里面的角度，就像每个人转身时脚尖指向圈心的角度。
|
|
|
-// 我们先用一个小技巧，算出所有内角加起来是多少度。方法是：(13-2)乘以180度，得到1980度。这是因为，想象成一个多边形，它可以分成11个三角形，每个三角形的角度和是180度。
|
|
|
-// 然后，我们把1980度平分给13个角，就是每个角的度数了。算一算，1980除以13等于152度。所以，正十三边形的每个角是152度。就像每个人转身看下一个朋友，每个人需要转152度一样。`,
|
|
|
-// time:"2023-11-11 11:10:11"
|
|
|
-// },
|
|
|
- ],
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- choiceRole(){
|
|
|
- this.cardType = 1;
|
|
|
- },
|
|
|
- sendFile(){
|
|
|
- this.$message.info("点击了附件")
|
|
|
- },
|
|
|
- goTape(){
|
|
|
- this.$message.info(`点击了语音`)
|
|
|
- },
|
|
|
- send(){
|
|
|
- this.loading = true;
|
|
|
- setTimeout(()=>{
|
|
|
-
|
|
|
- this.chatList.push({
|
|
|
- role:"user",
|
|
|
- content:this.text,
|
|
|
- time:new Date().toLocaleString().replace(/\//ig,'-')
|
|
|
- })
|
|
|
-
|
|
|
- let aiContent="对不起，这个问题我回答不了。"
|
|
|
- let type = 0;
|
|
|
-
|
|
|
- switch(this.text){
|
|
|
- case "帮我查找几张常见的不同类型的垃圾图片":
|
|
|
- aiContent = ['https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721713253471000.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731713253488299.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741713253506303.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751713253523152.png'];
|
|
|
- type = 1;
|
|
|
- break;
|
|
|
- case "帮我查找一些B站的视频，介绍垃圾如何处理":
|
|
|
- aiContent = `当然，以下是关于垃圾处理的一些B站视频链接：
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ text: "",
|
|
|
+ loading: false,
|
|
|
+ imageCheck: false,
|
|
|
+ videoCheck: false,
|
|
|
+ imgNumList:[
|
|
|
+ 'U1','U2','U3','U4'
|
|
|
+ ],
|
|
|
+ wantSearch: [
|
|
|
+ {
|
|
|
+ index: 1,
|
|
|
+ title: "垃圾分类标准",
|
|
|
+ label: "不同国家的垃圾分类标准和方法？"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 2,
|
|
|
+ title: "可回收垃圾处理",
|
|
|
+ label: "可回收垃圾的处理流程和再利用方法？"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 3,
|
|
|
+ title: "有害垃圾的影响",
|
|
|
+ label: "有害垃圾对环境和人体健康的潜在影响？"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ chatList: [
|
|
|
+ {
|
|
|
+ role: "ai",
|
|
|
+ content: `您好，有什么可以帮助您的吗？`,
|
|
|
+ time: new Date().toLocaleString().replace(/\//gi, "-"),
|
|
|
+ type: 0
|
|
|
+ }
|
|
|
+ // {
|
|
|
+ // role:"user",
|
|
|
+ // content:"正十三边形的每个角是多少度？",
|
|
|
+ // time:"2023-11-11 11:10:11"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // role:"ai",
|
|
|
+ // content:`小朋友们，你们知道正十三边形吗？就像我们班有13个好朋友站成一个圈圈一样。如果我们想知道每个人转身看向下一个人需要转多少度，我们可以这样想：首先，所有朋友手拉手围成的圈圈是360度，对吧？但是，我们不能直接算每个人转身的角度，因为那是外面的角度，我们要算里面的角度，就像每个人转身时脚尖指向圈心的角度。
|
|
|
+ // 我们先用一个小技巧，算出所有内角加起来是多少度。方法是：(13-2)乘以180度，得到1980度。这是因为，想象成一个多边形，它可以分成11个三角形，每个三角形的角度和是180度。
|
|
|
+ // 然后，我们把1980度平分给13个角，就是每个角的度数了。算一算，1980除以13等于152度。所以，正十三边形的每个角是152度。就像每个人转身看下一个朋友，每个人需要转152度一样。`,
|
|
|
+ // time:"2023-11-11 11:10:11"
|
|
|
+ // },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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() {
|
|
|
+ if (this.loading) return this.$message.info("请稍等");
|
|
|
+ if(this.text.trim().length==0)return this.$message.info("请输入内容")
|
|
|
+ this.loading = true;
|
|
|
+ this.chatList.push({
|
|
|
+ role: "user",
|
|
|
+ content: this.text,
|
|
|
+ time: new Date().toLocaleString().replace(/\//gi, "-")
|
|
|
+ });
|
|
|
+
|
|
|
+ this.chatList.push({
|
|
|
+ role: "ai",
|
|
|
+ content: "",
|
|
|
+ type: 0,
|
|
|
+ time: new Date().toLocaleString().replace(/\//gi, "-")
|
|
|
+ });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ let aiContent = "对不起，这个问题我回答不了。";
|
|
|
+ let type = 0;
|
|
|
+
|
|
|
+ switch (this.text) {
|
|
|
+ case "帮我查找几张常见的不同类型的垃圾图片":
|
|
|
+ aiContent = [
|
|
|
+ "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721713253471000.png",
|
|
|
+ "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731713253488299.png",
|
|
|
+ "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741713253506303.png",
|
|
|
+ "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751713253523152.png"
|
|
|
+ ];
|
|
|
+ type = 1;
|
|
|
+ break;
|
|
|
+ case "帮我查找一些B站的视频，介绍垃圾如何处理":
|
|
|
+ aiContent = `当然，以下是关于垃圾处理的一些B站视频链接：
|
|
|
1.【科普短视频】垃圾会被怎么处理? - 这个视频通过简短的内容向观众展示垃圾处理的过程。
|
|
|
https://www.bilibili.com/video/BV1UD4y1U71a
|
|
|
|
|
|
@@ -149,19 +236,19 @@ https://www.bilibili.com/video/BV1bt41157wH
|
|
|
|
|
|
3.【环保短片】震撼环保公益短片《致我们的地球》- 这部短片通过震撼的画面和内容，强调了环保问题的重要性。
|
|
|
https://www.bilibili.com/video/BV1ZD4y1U7H7/ `;
|
|
|
- type = 0;
|
|
|
- break;
|
|
|
- case "不同国家的垃圾分类标准和方法？":
|
|
|
- aiContent=`好的，我们来聊聊不同国家是怎么分类垃圾的。垃圾分类就像是帮助垃圾找到它们正确的家，这样我们的环境才能更干净，地球也会更健康。
|
|
|
+ type = 0;
|
|
|
+ break;
|
|
|
+ case "不同国家的垃圾分类标准和方法？":
|
|
|
+ aiContent = `好的，我们来聊聊不同国家是怎么分类垃圾的。垃圾分类就像是帮助垃圾找到它们正确的家，这样我们的环境才能更干净，地球也会更健康。
|
|
|
•日本：日本的垃圾分类做得非常细致。他们不仅仅是分可回收和不可回收，而是将垃圾分成很多种类，比如瓶子、罐头、纸张、塑料等等。在日本，居民需要按照当地的规定把垃圾分类好，然后放在特定的垃圾袋里，在指定的时间拿出去扔。如果分类错了，垃圾收集者可能不会带走垃圾哦。
|
|
|
•德国：德国也非常重视垃圾分类。他们有一种叫做“绿点”的系统，很多包装上都有一个绿色的点。这意味着制造商已经支付了回收费用。德国人会把纸、塑料、玻璃和金属分开收集。他们甚至有专门的容器来收集旧衣服和鞋子。
|
|
|
•美国：美国的垃圾分类方法比较简单，通常分为可回收物、有机物和其他垃圾。可回收物包括纸张、塑料、玻璃和金属等。有些城市还有专门的食物垃圾桶，用来收集厨余垃圾，这些可以被转化为肥料或者生产能源。
|
|
|
•瑞典：瑞典几乎可以回收利用所有的垃圾。他们非常擅长把垃圾变成资源，比如将燃烧垃圾产生的热能用来供暖和供电。瑞典人也会把垃圾分类成多种类，确保每种垃圾都能找到最合适的处理方式。
|
|
|
-通过这些例子，我们可以看到，虽然不同国家的垃圾分类方法和标准不一样，但他们都有一个共同的目标，那就是保护我们的环境，让地球变得更美好。所以，我们每个人在日常生活中也要努力做好垃圾分类，为保护地球出一份力！`
|
|
|
- type = 0;
|
|
|
- break;
|
|
|
- case "可回收垃圾的处理流程和再利用方法？":
|
|
|
- aiContent = `好的，我们来聊聊可回收垃圾的处理流程和再利用方法，就像是给垃圾进行一次神奇的变身之旅。
|
|
|
+通过这些例子，我们可以看到，虽然不同国家的垃圾分类方法和标准不一样，但他们都有一个共同的目标，那就是保护我们的环境，让地球变得更美好。所以，我们每个人在日常生活中也要努力做好垃圾分类，为保护地球出一份力！`;
|
|
|
+ type = 0;
|
|
|
+ break;
|
|
|
+ case "可回收垃圾的处理流程和再利用方法？":
|
|
|
+ aiContent = `好的，我们来聊聊可回收垃圾的处理流程和再利用方法，就像是给垃圾进行一次神奇的变身之旅。
|
|
|
首先，可回收垃圾是指那些可以被再次利用的垃圾，比如塑料瓶、纸张、玻璃瓶和金属罐头盒等。这些垃圾如果被正确处理，就可以变成新的东西，而不是被扔掉占用地球的空间。
|
|
|
第一步：收集和分类
|
|
|
想象一下，你在家里帮忙把不同的垃圾放在不同的垃圾桶里。比如，把塑料瓶放在一个桶里，把纸张放在另一个桶里。这样做的目的是为了让垃圾更容易被处理和回收。在学校或者社区，也有专门的垃圾桶来收集这些可回收的材料。
|
|
|
@@ -173,26 +260,36 @@ https://www.bilibili.com/video/BV1ZD4y1U7H7/ `;
|
|
|
这些被处理过的材料，比如碎纸或者塑料颗粒，会被送到不同的工厂，变成新的产品。例如，旧报纸可以被制成新的纸张或者纸板，塑料瓶可以变成塑料椅子或者玩具，玻璃瓶可以熔化后再制成新的玻璃制品。
|
|
|
第五步：重新使用
|
|
|
最后，这些新制成的物品会被送到商店，人们可以再次购买使用。这样一来，我们就完成了一次“垃圾变宝贝”的神奇旅程。
|
|
|
-通过这个流程，我们不仅节省了资源，减少了垃圾，还帮助保护了我们的环境。所以，下次当你要扔东西时，记得先想想这个东西能不能被回收，然后放到正确的垃圾桶里哦！这样你也成为了保护地球的小小英雄！`
|
|
|
- type = 0;
|
|
|
- break;
|
|
|
- case "有害垃圾对环境和人体健康的潜在影响？":
|
|
|
- type = 0;
|
|
|
- break;
|
|
|
- }
|
|
|
-
|
|
|
- if(this.imageCheck){
|
|
|
- aiContent = ['https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721713253471000.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731713253488299.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741713253506303.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751713253523152.png'];
|
|
|
- type = 1;
|
|
|
- this.chatList.push({
|
|
|
- role:"ai",
|
|
|
- content:aiContent,
|
|
|
- type:type,
|
|
|
- time:new Date().toLocaleString().replace(/\//ig,'-')
|
|
|
- })
|
|
|
- }
|
|
|
- if(this.videoCheck){
|
|
|
- aiContent = `当然，以下是关于垃圾处理的一些B站视频链接：
|
|
|
+通过这个流程，我们不仅节省了资源，减少了垃圾，还帮助保护了我们的环境。所以，下次当你要扔东西时，记得先想想这个东西能不能被回收，然后放到正确的垃圾桶里哦！这样你也成为了保护地球的小小英雄！`;
|
|
|
+ type = 0;
|
|
|
+ break;
|
|
|
+ case "有害垃圾对环境和人体健康的潜在影响？":
|
|
|
+ type = 0;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.imageCheck) {
|
|
|
+ aiContent = [
|
|
|
+ "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721713253471000.png",
|
|
|
+ "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731713253488299.png",
|
|
|
+ "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741713253506303.png",
|
|
|
+ "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751713253523152.png"
|
|
|
+ ];
|
|
|
+ type = 1;
|
|
|
+ this.chatList[this.chatList.length - 1].content = aiContent;
|
|
|
+ this.chatList[this.chatList.length - 1].type = type;
|
|
|
+ this.chatList[
|
|
|
+ this.chatList.length - 1
|
|
|
+ ].time = new Date().toLocaleString().replace(/\//gi, "-");
|
|
|
+ // this.chatList.push({
|
|
|
+ // role:"ai",
|
|
|
+ // content:aiContent,
|
|
|
+ // type:type,
|
|
|
+ // time:new Date().toLocaleString().replace(/\//ig,'-')
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ if (this.videoCheck) {
|
|
|
+ aiContent = `当然，以下是关于垃圾处理的一些B站视频链接：
|
|
|
1.【科普短视频】垃圾会被怎么处理? - 这个视频通过简短的内容向观众展示垃圾处理的过程。
|
|
|
https://www.bilibili.com/video/BV1UD4y1U71a
|
|
|
|
|
|
@@ -201,367 +298,398 @@ https://www.bilibili.com/video/BV1ZD4y1U7H7/ `;
|
|
|
|
|
|
3.【环保短片】震撼环保公益短片《致我们的地球》- 这部短片通过震撼的画面和内容，强调了环保问题的重要性。
|
|
|
https://www.bilibili.com/video/BV1ZD4y1U7H7/ `;
|
|
|
- type = 0;
|
|
|
- this.chatList.push({
|
|
|
- role:"ai",
|
|
|
- content:aiContent,
|
|
|
- type:type,
|
|
|
- time:new Date().toLocaleString().replace(/\//ig,'-')
|
|
|
- })
|
|
|
- }
|
|
|
- if(!this.imageCheck&&!this.videoCheck){
|
|
|
- this.chatList.push({
|
|
|
- role:"ai",
|
|
|
- content:aiContent,
|
|
|
- type:type,
|
|
|
- time:new Date().toLocaleString().replace(/\//ig,'-')
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
+ type = 0;
|
|
|
+ this.chatList[this.chatList.length - 1].content = aiContent;
|
|
|
+ this.chatList[this.chatList.length - 1].type = type;
|
|
|
+ this.chatList[
|
|
|
+ this.chatList.length - 1
|
|
|
+ ].time = new Date().toLocaleString().replace(/\//gi, "-");
|
|
|
+ // this.chatList.push({
|
|
|
+ // role:"ai",
|
|
|
+ // content:aiContent,
|
|
|
+ // type:type,
|
|
|
+ // time:new Date().toLocaleString().replace(/\//ig,'-')
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ if (!this.imageCheck && !this.videoCheck) {
|
|
|
+ this.chatList[this.chatList.length-1].content = aiContent;
|
|
|
+ this.chatList[this.chatList.length-1].type = type;
|
|
|
+ this.chatList[this.chatList.length-1].time = new Date().toLocaleString().replace(/\//ig,'-');
|
|
|
this.text = "";
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
|
|
|
- });
|
|
|
- this.loading = false;
|
|
|
- },5000)
|
|
|
- // this.chatList.push({
|
|
|
- // role:"user",
|
|
|
- // content:this.text,
|
|
|
- // time:"2023-11-11 11:10:11"
|
|
|
- // },{
|
|
|
- // role:"ai",
|
|
|
- // content:`小朋友，你真棒！`,//这里需要调用接口
|
|
|
- // time:"2023-11-11 11:10:11"
|
|
|
- // })
|
|
|
- // this.text = "";
|
|
|
- // // 元素滚动条触底
|
|
|
- // this.$nextTick(() => {
|
|
|
- // this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
|
|
|
- // });
|
|
|
- },
|
|
|
- sendAiIdea(text){
|
|
|
- this.text = text;
|
|
|
- this.send();
|
|
|
- },
|
|
|
- sendImage(){
|
|
|
- this.$message.info("发送图片")
|
|
|
- },
|
|
|
- sendVideo(){
|
|
|
- this.$message.info("发送视频")
|
|
|
- },
|
|
|
- },
|
|
|
- }
|
|
|
+ // this.chatList.push({
|
|
|
+ // role: "ai",
|
|
|
+ // content: aiContent,
|
|
|
+ // type: type,
|
|
|
+ // time: new Date().toLocaleString().replace(/\//gi, "-")
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
|
|
|
+ });
|
|
|
+ this.loading = false;
|
|
|
+ }, 5000);
|
|
|
+ // this.chatList.push({
|
|
|
+ // role:"user",
|
|
|
+ // content:this.text,
|
|
|
+ // time:"2023-11-11 11:10:11"
|
|
|
+ // },{
|
|
|
+ // role:"ai",
|
|
|
+ // content:`小朋友，你真棒！`,//这里需要调用接口
|
|
|
+ // time:"2023-11-11 11:10:11"
|
|
|
+ // })
|
|
|
+ // this.text = "";
|
|
|
+ // // 元素滚动条触底
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ sendAiIdea(text) {
|
|
|
+ if (this.loading) return this.$message.info("请稍等");
|
|
|
+ this.text = text;
|
|
|
+ this.send();
|
|
|
+ },
|
|
|
+ sendImage() {
|
|
|
+ this.$message.info("发送图片");
|
|
|
+ },
|
|
|
+ sendVideo() {
|
|
|
+ this.$message.info("发送视频");
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.search{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.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;
|
|
|
-}
|
|
|
-
|
|
|
-.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%;
|
|
|
- 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;
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.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_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%;;
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
|
|
|
|
-.s_t_c_ai{
|
|
|
- box-sizing: border-box;
|
|
|
- padding-right: 35px;
|
|
|
+.s_t_c_a_r_contentImage > span {
|
|
|
+ display: block;
|
|
|
}
|
|
|
|
|
|
-.s_t_c_a_right{
|
|
|
- min-width: 90%;
|
|
|
- height: auto;
|
|
|
+.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_content{
|
|
|
- width: auto;
|
|
|
- max-width: 100%;
|
|
|
- height: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 10px;
|
|
|
- background-color: #F6F8FF;
|
|
|
- border-radius: 2px 8px 8px 8px;
|
|
|
+.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_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: 5px;
|
|
|
- color: #666666;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.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;
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
|
|
|
|
-.s_t_c_a_left{
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin-right: 5px
|
|
|
+.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_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_t_c_u_right {
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 5px;
|
|
|
}
|
|
|
|
|
|
-.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_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_b_inputArea{
|
|
|
- width: 100%;
|
|
|
- height: 55px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-top: solid 1px #EDEDED;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+.s_t_c_ai {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 35px;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
-.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;
|
|
|
+.aiCopy{
|
|
|
+ position: absolute;
|
|
|
+ right: 5px;
|
|
|
+ bottom: 0%;
|
|
|
+ transform: translate(0,-30%);
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
-.s_b_input{
|
|
|
- width: 65%;
|
|
|
- height: 45px;
|
|
|
- background-color: #F3F3F3;
|
|
|
- border-radius: 50px;
|
|
|
- margin: 0 10px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+.s_t_c_a_right {
|
|
|
+ min-width: 90%;
|
|
|
+ height: auto;
|
|
|
}
|
|
|
|
|
|
-.s_b_i_left{
|
|
|
- width: calc(100% - 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>
|
|
|
+.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: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.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%;
|
|
|
+ height: 45px;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ border-radius: 50px;
|
|
|
+ margin: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_i_left {
|
|
|
+ width: calc(100% - 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>
|
