update

src/assets/css/button.css

@@ -53,6 +53,7 @@
   margin-left: 20px;
 }
 
+
 .c_pub_button_return {
   color: #060E17;
   background-color: #F0F4FA;
@@ -197,6 +198,7 @@
   background-image: url(../icon/new/icon_setting.png);
 }
 
+.r_pub_button_op,
 .r_pub_button_retrun {
   color: #0061FF;
   font-size: 14px;
@@ -218,6 +220,19 @@
   background-image: url(../icon/new/icon_return2.png);
 }
 
+.r_pub_button_op::before {
+  content: "";
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  min-height: 14px;
+  background-size: 100% 100%;
+  display: block;
+  margin-right: 7px;
+  background-image: url(../icon/new/u_op.png);
+}
+
+
 .r_pub_button_course {
   color: #fff;
   background-color: #0061FF;

src/components/pages/aiAddCourse/aiBox.vue

@@ -0,0 +1,166 @@
+<template>
+    <div class="ai_body">
+        <div class="ai_body_dialog">
+            <div class="dialog_content" :class="{right: item.role == 2}" v-for="(item, index) in array" :key="index">
+                <div class="role">
+                    <img src="../../../assets/icon/new/role1.png" v-if="item.role == 1">
+                    <img src="../../../assets/icon/new/role2.png" v-else>
+                </div>
+                <div class="content" :class="{content2: item.role == 2}">{{ item.text }}</div>
+            </div>
+        </div>
+        <div class="ai_body_input">
+            <textarea rows="5" class="binfo_input binfo_textarea" cols v-model="courseText" placeholder="在此输入您想了解的内容"
+                style="padding-right: 86px;"></textarea>
+            <div class="c_pub_button_confirm" @click="addContent">发送</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            array: [
+                { text: '你好,有说么可以帮你', role: 1 },
+
+            ],
+            courseText: '',
+        }
+    },
+    methods: {
+        addContent() {
+            if(this.courseText){
+                this.array.push({text: this.courseText, role: 2})
+                this.array.push({text: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', role: 1})
+                this.courseText = ''
+            }
+        }
+    },
+}
+</script>
+
+<style scoped>
+.ai_body {
+    height: 100%;
+    width: calc(100% - 20px);
+    margin: 0 auto;
+}
+
+.binfo_input {
+    width: 100%;
+    margin: 0;
+    padding: 12px 14px;
+    display: block;
+    min-width: 0;
+    outline: none;
+    box-sizing: border-box;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    background: #fff;
+    font-size: 14px;
+    resize: none;
+    font-family: "Microsoft YaHei";
+    min-height: 48px;
+    /* border: 1px solid #3682fc00; */
+    border: 1.5px solid #cad1dc;
+}
+
+.binfo_textarea {
+    border: 1.5px solid #cad1dc;
+    font-size: 14px;
+    resize: none;
+    /* background: #f6f6f6; */
+    font-family: "Microsoft YaHei";
+}
+
+.binfo_textarea::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 6px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.binfo_textarea::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+/*定义滑块 内阴影+圆角*/
+.binfo_textarea::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.binfo_input:focus-visible {
+    border: 1.5px solid #3681fc !important;
+}
+
+.ai_body_input {
+    position: relative;
+}
+
+.c_pub_button_confirm {
+    position: absolute;
+    bottom: 13px;
+    right: 13px;
+}
+
+.ai_body_dialog{
+    padding: 10px 0;
+    box-sizing: border-box;
+    height: calc(100% - 140px);
+    overflow: auto;
+    margin-bottom: 10px;
+}
+
+
+.dialog_content{
+    width: 100%;
+    display: flex;
+}
+
+.dialog_content + .dialog_content{
+    margin-top: 20px;
+}
+
+.dialog_content.right{
+    flex-direction: row-reverse;
+}
+
+.dialog_content.right .role{
+    margin-right: 0;
+    margin-left: 10px;
+}
+
+.dialog_content .role{
+    min-width: 30px;
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+    border-radius: 50%;
+}
+.dialog_content .role > img{
+    height: 100%;
+    width: 100%;
+}
+
+.dialog_content .content{
+    padding: 5px;
+    border-radius: 5px;
+    width: 100%;
+    word-break: break-word;
+    box-sizing: border-box;
+    white-space: pre-line;
+    max-width: 100%;
+    overflow: hidden;
+}
+
+.dialog_content .content2{
+    background: #3681fc;
+    color: #fff;
+}
+</style>