提交AI聊天样式

ui/packages/ai/AiCopilot.vue

@@ -7,11 +7,17 @@ export default {
   data() {
     return {
       show: false,
-      expand: false
+      expand: false,
+      prompt: ""
     }
   },
   computed: {
     expandBtn: v => v.expand ? "收起" : "展开"
+  },
+  methods: {
+    handleSend() {
+
+    }
   }
 }
 </script>
@@ -26,7 +32,16 @@ export default {
       </div>
       <div class="flex content">
         <div class="left" :class="{expand}"></div>
-        <div class="right"></div>
+        <div class="right flex column gap-14">
+          <div class="fill">
+
+          </div>
+          <div class="sendBox flex gap-14">
+            <el-input type="textarea" class="fill input" autosize resize="none" v-model="prompt" placeholder="请输入..."
+                      @change="handleSend"/>
+            <div class="sendBtn" @click="handleSend"/>
+          </div>
+        </div>
       </div>
     </div>
     <img class="icon" src="https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png" @click="show=true"/>
@@ -101,6 +116,30 @@ export default {
       .right {
         width: 420px;
         height: 100%;
+        padding: 14px;
+
+        .sendBtn {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: url("https://cdn.sinoecare.com/i/2024/06/04/665ed2bbdeb27.png") no-repeat center;
+          background-size: 100% 100%;
+          cursor: pointer;
+        }
+      }
+
+      :deep(.sendBox) {
+        width: 100%;
+
+        .input > textarea {
+          width: 100%;
+          line-height: 40px;
+          border-radius: 22px;
+          border: 1px solid #ddd;
+          padding: 0 14px;
+          box-sizing: border-box;
+          background: #F4F6FA;
+        }
       }
     }
   }