feat: 聊天室前端布局

2024-04-02 18:41:41 +08:00
parent 3bfe4b6980
commit 887ea275f6
3 changed files with 95 additions and 0 deletions
--- a/Yi.Bbs.Vue3/src/views/chathub/Index.vue
+++ b/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>