|
|
@@ -0,0 +1,118 @@
|
|
|
+<template>
|
|
|
+ <div class="chat-container">
|
|
|
+ <aside class="sidebar">
|
|
|
+ <h2>需求</h2>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in demandList" :key="index">
|
|
|
+ {{ item }}
|
|
|
+ <a href="#"><i class="fa fa-eye"></i></a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </aside>
|
|
|
+ <main class="chat-main">
|
|
|
+ <header class="chat-header">
|
|
|
+ <!-- Header Content -->
|
|
|
+ </header>
|
|
|
+ <section class="chat-body">
|
|
|
+ <div class="user-input">
|
|
|
+ <input type="text" placeholder="请输入内容..." v-model="userInput" @keyup.enter="sendMessage">
|
|
|
+ <button @click="sendMessage" class="send-button">发送</button>
|
|
|
+ <input type="file" class="upload-button">
|
|
|
+ </div>
|
|
|
+ <div class="chat-bubble">
|
|
|
+ <p>{{ userInput }}</p>
|
|
|
+ <p>正在建设中...</p>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { defineComponent } from 'vue';
|
|
|
+import { Button, Input, Upload } from 'ant-design-vue';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'ChatView',
|
|
|
+ components: {
|
|
|
+ AButton: Button,
|
|
|
+ AInput: Input,
|
|
|
+ AUpload: Upload,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ demandList: ['需求1', '需求2', '需求3'],
|
|
|
+ userInput: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ sendMessage() {
|
|
|
+ // Handle sending message logic
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.chat-container {
|
|
|
+ display: flex;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar {
|
|
|
+ width: 15%;
|
|
|
+ background-color: purple;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-main {
|
|
|
+ flex-grow: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-header {
|
|
|
+ height: 10%;
|
|
|
+ background: linear-gradient(to bottom, #ffcc00, #ff9900);
|
|
|
+}
|
|
|
+
|
|
|
+.chat-body {
|
|
|
+ display: flex;
|
|
|
+ height: 80%;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.user-input {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+}
|
|
|
+
|
|
|
+.send-button {
|
|
|
+ background-color: green;
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+ padding: 10px 20px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-button {
|
|
|
+ background-color: blue;
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+ padding: 10px 20px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-bubble {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ margin: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+</style>
|
genlitex
