首頁 探索 說明
註冊 登入
genlitex
/
prototype_design
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

zbytest003-2025-02-19 02:51:54

genlitex 3 月之前
父節點
9643e913a0
當前提交
9a4bd84ff4
共有 6 個文件被更改，包括 117 次插入 和 7 次删除
統一視圖 顯示文件統計
  1. 0 0
      dist/assets/index-D75QqSs1.css
  2. 4 0
      dist/assets/index-Dc6CRab3.js
  3. 0 4
      dist/assets/index-malWbV8K.js
  4. 2 2
      dist/index.html
  5. 7 1
      src/router/index.js
  6. 104 0
      src/views/NewChatPage.vue

文件差異過大導致無法顯示
+ 0 - 0
dist/assets/index-D75QqSs1.css


文件差異過大導致無法顯示
+ 4 - 0
dist/assets/index-Dc6CRab3.js


文件差異過大導致無法顯示
+ 0 - 4
dist/assets/index-malWbV8K.js


+ 2 - 2
dist/index.html
查看文件 

@@ -4,8 +4,8 @@
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Prototype Design</title>
 
     <title>Prototype Design</title>
 
-    <script type="module" crossorigin src="/prototype/3000/assets/index-malWbV8K.js"></script>
 
-    <link rel="stylesheet" crossorigin href="/prototype/3000/assets/index-Btspm7_H.css">
 
+    <script type="module" crossorigin src="/ide/proxy/6008/assets/index-Dc6CRab3.js"></script>
 
+    <link rel="stylesheet" crossorigin href="/ide/proxy/6008/assets/index-D75QqSs1.css">
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

+ 7 - 1
src/router/index.js
查看文件 

@@ -1,11 +1,17 @@
 
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import HomeView from '../views/HomeView.vue'
 
 import HomeView from '../views/HomeView.vue'
 
+import NewChatPage from '../views/NewChatPage.vue'
 
 
 
 const routes = [
 
 const routes = [
 
   {
 
   {
 
     path: '/',
 
     path: '/',
 
-    name: 'home',
 
+    name: 'Home',
 
     component: HomeView
 
     component: HomeView
 
+  },
 
+  {
 
+    path: '/chat',
 
+    name: 'NewChatPage',
 
+    component: NewChatPage
 
   }
 
   }
 
 ]
 
 ]

+ 104 - 0
src/views/NewChatPage.vue
查看文件 

@@ -0,0 +1,104 @@
 
+<template>
 
+  <div class="chat-page">
 
+    <aside class="sidebar">
 
+      <header>Contact List</header>
 
+      <ul>
 
+        <li v-for="contact in contacts" :key="contact.id">
 
+          {{ contact.name }}
 
+        </li>
 
+      </ul>
 
+    </aside>
 
+    <main class="chat-area">
 
+      <div class="message-bubble sent">Sent Message</div>
 
+      <div class="message-bubble received">Received Message</div>
 
+    </main>
 
+    <footer>
 
+      <input type="text" placeholder="Type a message...">
 
+      <button>Send</button>
 
+      <button>Upload</button>
 
+    </footer>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: 'NewChatPage',
 
+  data() {
 
+    return {
 
+      contacts: [
 
+        { id: 1, name: 'Contact 1' },
 
+        { id: 2, name: 'Contact 2' },
 
+        // Add more contacts as needed
 
+      ]
 
+    };
 
+  }
 
+};
 
+</script>
 
+
 
+<style scoped>
 
+.chat-page {
 
+  display: flex;
 
+  height: 100vh;
 
+}
 
+
 
+.sidebar {
 
+  width: 250px;
 
+  background-color: #08002E;
 
+  color: white;
 
+  font-weight: bold;
 
+  text-align: center;
 
+}
 
+
 
+.chat-area {
 
+  flex-grow: 1;
 
+  background-color: gray;
 
+  padding: 1rem;
 
+}
 
+
 
+.message-bubble {
 
+  margin: 0.5rem 0;
 
+  border-radius: 10px;
 
+  padding: 0.5rem 1rem;
 
+  word-wrap: break-word;
 
+}
 
+
 
+.sent {
 
+  background-color: purple;
 
+  color: white;
 
+}
 
+
 
+.received {
 
+  background-color: lightgray;
 
+  color: black;
 
+}
 
+
 
+input[type="text"] {
 
+  width: calc(100% - 60px);
 
+  border-radius: 5px;
 
+  padding: 0.5rem;
 
+}
 
+
 
+button {
 
+  border-radius: 5px;
 
+  padding: 0.5rem 1rem;
 
+}
 
+
 
+.upload-button {
 
+  background-color: purple;
 
+  color: white;
 
+  border: none;
 
+  cursor: pointer;
 
+}
 
+
 
+.send-button {
 
+  background-color: purple;
 
+  color: white;
 
+  border: none;
 
+  cursor: pointer;
 
+}
 
+
 
+footer {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+</style>

部分文件因文件數量過多而無法顯示