适配移动端

src/main.ts

@@ -2,9 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import { createPinia } from 'pinia'
 import naive from '@/assets/native-plugin'
-import {
-  createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw
-} from 'vue-router'
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import Icon from '@/components/icon.vue'
 import 'virtual:svg-icons-register'
 import piniaPersist from 'pinia-plugin-persist'

src/pages/room/index.vue

@@ -37,11 +37,9 @@ const roomList = ref([
 </script>
 <style lang="scss" scoped>
 .room {
-  width: 100%;
   height: 100%;
   padding: 40px 4% 0 4%;
-  min-width: 354px;
-  position: relative;
+  min-width: 327px;
 
   &-title {
     font-size: 18px;
@@ -61,14 +59,14 @@ const roomList = ref([
     display: flex;
     flex-wrap: wrap;
     align-content: flex-start;
-    height: calc(100% - 46px);
+    height: calc(100% - 86px);
     overflow-y: auto;
-    gap: 20px 3.2%;
+    gap: 15px;
 
     &-item {
-      width: 100%;
-      min-width: 286px;
-      max-width: 300px;
+      /* 增长1 不缩小 基础宽度200px */
+      flex: 1 0 286px;
+      max-width: 100%;
       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);
@@ -80,15 +78,12 @@ const roomList = ref([
   }
 
   &-bar {
-    width: 70%;
-    position: fixed;
+    width: 100%;
+    height: 40px;
     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;