|
|
@@ -0,0 +1,144 @@
|
|
|
+<template>
|
|
|
+ <div class="chat-container">
|
|
|
+ <div class="sidebar">
|
|
|
+ <h2>需求</h2>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in demandList" :key="index">
|
|
|
+ {{ item }}
|
|
|
+ <i class="eye-icon"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="main-content">
|
|
|
+ <div class="chat-window">
|
|
|
+ <div class="user-message">{{ userInput }}</div>
|
|
|
+ <div class="bot-response">正在建设中...</div>
|
|
|
+ </div>
|
|
|
+ <div class="input-area">
|
|
|
+ <input type="text" v-model="userInput" placeholder="请输入内容...">
|
|
|
+ <button class="send-button">发送</button>
|
|
|
+ <button class="upload-button">上传文件</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ demandList: ['需求1', '需求2', '需求3'],
|
|
|
+ userInput: ''
|
|
|
+ };
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.chat-container {
|
|
|
+ display: flex;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar {
|
|
|
+ width: 15%;
|
|
|
+ background-color: purple;
|
|
|
+ color: white;
|
|
|
+ padding: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar h2 {
|
|
|
+ margin-bottom: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar ul {
|
|
|
+ list-style-type: none;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar li {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar .eye-icon {
|
|
|
+ float: right;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.main-content {
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-window {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ padding: 1rem;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.user-message {
|
|
|
+ background-color: green;
|
|
|
+ color: white;
|
|
|
+ padding: 0.5rem;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.bot-response {
|
|
|
+ background-color: lightgray;
|
|
|
+ padding: 0.5rem;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.input-area {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.input-area input {
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 0.5rem;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.send-button,
|
|
|
+.upload-button {
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.send-button {
|
|
|
+ background-color: blue;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-button {
|
|
|
+ background-color: gray;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .sidebar {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-content {
|
|
|
+ padding: 0.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-window,
|
|
|
+ .input-area {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-area input,
|
|
|
+ .send-button,
|
|
|
+ .upload-button {
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
genlitex
