update

src/App.vue

@@ -26,7 +26,7 @@ import {
 const osTheme = useOsTheme()
 const store = useStore()
 const show = computed(() => store.loading)
-const theme = computed(() => (osTheme.value !== 'dark' ? darkTheme : lightTheme))
+const theme = computed(() => (osTheme.value === 'dark' ? darkTheme : lightTheme))
 </script>
 <style>
 @import './assets/global.css';

src/assets/global.css

@@ -1,13 +1,10 @@
 #app,
-#app>div,
 html,
 body {
   margin: 0;
   padding: 0;
-  width: 100vw;
-  height: 100vh;
-  min-width: 70vw;
-  min-height: 50vh;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
 }
 
@@ -15,7 +12,7 @@ body {
   box-sizing: border-box;
 }
 /* 隐藏滚动条 */
-&::-webkit-scrollbar {
+*::-webkit-scrollbar {
   width: 0 !important;
   display: none;
 }

src/pages/index.vue

@@ -105,7 +105,7 @@ const selectedKey = ref(route.name)
 </script>
 <style lang="scss" scoped>
 :deep(.n-menu) {
-  --n-item-height: 40px;
+  --n-item-height: 55px;
   height: 100%;
   padding: 0;
 

src/pages/room/create.vue

@@ -0,0 +1,11 @@
+<template>
+        <div>创建</div>
+</template>
+    
+<script setup lang='ts'>
+    
+</script>
+    
+<style>
+    
+</style>

src/pages/room/index.vue

@@ -1,8 +1,99 @@
 <template>
-  <div>room</div>
+  <div class="room">
+    <div class="room-title">
+      你的房间<span>4</span>
+    </div>
+    <div class="room-content">
+      <template
+        v-for="(item, index) in roomList"
+        :key="index"
+      >
+        <div class="room-content-item">
+          {{ index }}
+        </div>
+      </template>
+    </div>
+    <div class="room-bar">
+      <span>创建你的房间</span>
+      <n-button type="warning">
+        创建
+      </n-button>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
+import { ref } from 'vue'
+
+const roomList = ref([
+  { 1: 1 },
+  { 1: 1 },
+  { 1: 1 },
+  { 1: 1 },
+  { 1: 1 },
+  { 1: 1 },
+  { 1: 1 },
+  { 1: 1 }
+])
 </script>
 <style lang="scss" scoped>
+.room {
+  width: 100%;
+  height: 100%;
+  padding: 40px 4% 0 4%;
+  min-width: 354px;
+  position: relative;
+
+  &-title {
+    font-size: 18px;
+
+    &>span:last-child {
+      font-size: 16px;
+      background: red;
+      border-radius: 10px;
+      margin-left: 10px;
+      padding: 0 10px;
+    }
+  }
+
+  &-content {
+    margin-top: 20px;
+    padding-bottom: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    height: calc(100% - 46px);
+    overflow-y: auto;
+    gap: 20px 3.2%;
+
+    &-item {
+      width: 100%;
+      min-width: 286px;
+      max-width: 300px;
+      height: 180px;
+      background: #40464D;
+      box-shadow: 0px 4px 20px -2px rgba(50, 50, 71, 0.02), 0px 0px 5px 0px rgba(12, 26, 75, 0.04);
+      border-radius: 12px;
+      cursor: pointer;
+      overflow: hidden;
+    }
+
+  }
 
+  &-bar {
+    width: 70%;
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 0;
+    bottom: 0;
+    left: 55%;
+    transform: translate(-50%,0);
+    :deep(.n-button) {
+      --n-width: 30%;
+      max-width: 200px;
+      --n-border-radius: 10px;
+    }
+  }
+}
 </style>

src/pages/room/route.ts

@@ -13,6 +13,11 @@ export default {
       path: '',
       name: 'room',
       component: () => import('./index.vue')
+    },
+    {
+      path: '/create',
+      name: 'create',
+      component: () => import('./create.vue')
     }
   ]
 } as RouteRecordRaw