|
@@ -0,0 +1,147 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="chat-container">
|
|
|
|
|
+ <div class="sidebar">
|
|
|
|
|
+ <h3>需求列表</h3>
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li v-for="(item, index) in demandList" :key="index">
|
|
|
|
|
+ <a href="#"><i class="fa fa-eye"></i> {{ item }}</a>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="chat-area">
|
|
|
|
|
+ <div class="chat-header">
|
|
|
|
|
+ <h2>聊天界面</h2>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="chat-body">
|
|
|
|
|
+ <div class="message-list">
|
|
|
|
|
+ <div class="message" v-for="(message, index) in messages" :key="index">
|
|
|
|
|
+ <div class="message-content">
|
|
|
|
|
+ <span class="message-author">{{ message.author }}:</span>
|
|
|
|
|
+ <span class="message-text">{{ message.text }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="chat-footer">
|
|
|
|
|
+ <input type="text" placeholder="请输入内容..." v-model="inputMessage" @keyup.enter="sendMessage()">
|
|
|
|
|
+ <button class="send-button" @click="sendMessage()">发送</button>
|
|
|
|
|
+ <label for="upload-file" class="upload-button">上传文件</label>
|
|
|
|
|
+ <input type="file" id="upload-file" @change="handleFileUpload()">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ demandList: ['需求1', '需求2', '需求3'],
|
|
|
|
|
+ messages: [],
|
|
|
|
|
+ inputMessage: '',
|
|
|
|
|
+ selectedFile: null,
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ sendMessage() {
|
|
|
|
|
+ if (this.inputMessage.trim()) {
|
|
|
|
|
+ this.messages.push({ author: 'User', text: this.inputMessage });
|
|
|
|
|
+ this.inputMessage = '';
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ handleFileUpload() {
|
|
|
|
|
+ this.selectedFile = document.getElementById('upload-file').files[0];
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.chat-container {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ height: 100vh;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.sidebar {
|
|
|
|
|
+ width: 200px;
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ background-color: #f0f2f5;
|
|
|
|
|
+ border-right: 1px solid #ddd;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.chat-area {
|
|
|
|
|
+ flex-grow: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.chat-header {
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ background-color: #409eff;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.chat-body {
|
|
|
|
|
+ flex-grow: 1;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-list {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message {
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-author {
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-text {
|
|
|
|
|
+ margin-left: 5px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.chat-footer {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ border-top: 1px solid #ddd;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.send-button {
|
|
|
|
|
+ background-color: #409eff;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ padding: 5px 15px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.upload-button {
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ color: #409eff;
|
|
|
|
|
+ border: 1px solid #409eff;
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ padding: 5px 15px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.upload-button:hover {
|
|
|
|
|
+ background-color: #e6f7ff;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+input[type="text"] {
|
|
|
|
|
+ flex-grow: 1;
|
|
|
|
|
+ padding: 5px;
|
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ margin-right: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|
genlitex