feat: 聊天室前端布局

Yi.Bbs.Vue3/src/layout/ChatLayout.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="chat-body" >
+
+<RouterView />
+    </div>
+</template>
+<style scoped>
+.chat-body
+{
+    height: 100%;
+    /* padding: 5%; */
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-wrap: wrap;
+}
+</style>

Yi.Bbs.Vue3/src/router/index.js

@@ -3,6 +3,7 @@ import Layout from "../layout/Index.vue";
 import NotFound from "../views/error/404.vue";
 import LoginLayout from "../layout/LoginLayout.vue";
 import ActivityLayout from "../layout/activity/Index.vue";
+import ChatLayout from "../layout/ChatLayout.vue"
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   scrollBehavior(to, from, savedPosition) {
@@ -140,6 +141,24 @@ const router = createRouter({
         },
       ],
     },
+
+    {
+      path: "/chat",
+      name: "chat",
+      component: ChatLayout,
+      redirect: "/chat/main",
+      children: [
+        {
+          name: "main",
+          path: "main",
+          component: () => import("../views/chathub/Index.vue"),
+          meta: {
+            title: "聊天室",
+          },
+        }
+      ],
+    },
+
     { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },
   ],
 });

Yi.Bbs.Vue3/src/views/chathub/Index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="body">
+
+      <div class="left"></div>
+
+      <div class="middle">
+        <div class="header"></div>
+        <div class="user-list"></div>
+      </div>
+
+      <div class="right">
+        <div class="header"></div>
+        <div class="content"></div>
+        <div class="bottom"></div>
+      </div>
+    </div>
+
+</template>
+<style scoped lang="scss">
+.body {
+    height: 790px;
+    width: 1400px;
+  display: flex;
+  justify-content: center;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+}
+.left {
+  background-color: #2a2a2a;
+  width: 70px;
+}
+
+.middle {
+  background-color: #dadbdc;
+  width: 380px;
+  .header {
+    height: 75px;
+    background: #f7f7f7;
+  }
+  .user-list {
+  }
+}
+.right {
+  background-color: #f5f5f5;
+  width: 950px;
+  .header {
+    height: 75px;
+    background: #f7f7f7;
+    border: 1px solid #e7e7e7;
+  }
+  .content {
+    height: 580px;
+  }
+  .bottom {
+    height: calc(100% - 655px);
+    background: #f7f7f7;
+    border: 1px solid #e7e7e7;
+  }
+}
+</style>