增加创建

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

@@ -10,6 +10,8 @@ body {
 
 * {
   box-sizing: border-box;
+  user-select: none;
+  outline: none;
 }
 /* 隐藏滚动条 */
 *::-webkit-scrollbar {

src/assets/icons/10.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1745395281303" class="icon" viewBox="0 0 1086 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5278" xmlns:xlink="http://www.w3.org/1999/xlink" width="135.75" height="128"><path d="M98.735 723.197c0 0.019 339.86 0.027 339.86 0.027-0.074 0-0.064-514.258-0.064-514.258 0-0.019-339.86-0.027-339.86-0.027 0.074 0 0.064 514.259 0.064 514.259zM62 208.966c0-0.006 0-0.012 0-0.019 0-20.268 16.409-36.702 36.667-36.743h339.928c20.26 0.037 36.67 16.469 36.67 36.735 0 0.009 0 0.020 0 0.029v514.229c0 0.006 0 0.012 0 0.019 0 20.268-16.409 36.702-36.667 36.743h-339.928c-20.26-0.037-36.67-16.469-36.67-36.735 0-0.009 0-0.020 0-0.029v-514.229z" p-id="5279"></path><path d="M163.020 62h36.735v146.939h-36.735v-146.939zM346.693 62h36.735v146.939h-36.735v-146.939zM613.066 300.775c1.515-154.625 42.796-192.858 201.995-192.858 162.303 0 202.042 39.738 202.042 202.042h-36.735c0-142.016-23.29-165.307-165.307-165.307s-165.307 23.29-165.307 165.307v450h-36.735v-459.184h0.046zM980.368 309.958h36.735v652.042h-36.735v-652.042zM282.409 759.958h-36.735c0 162.303 39.738 202.042 202.042 202.042s202.042-39.738 202.042-202.042h-36.735c0 142.016-23.29 165.307-165.307 165.307s-165.307-23.29-165.307-165.307z" p-id="5280"></path></svg>

src/pages/room/create.vue

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

src/pages/room/index.vue

@@ -1,15 +1,27 @@
 <template>
   <div class="room">
     <div class="room-title">
-      你的房间<span>4</span>
+      你的房间: 4
     </div>
     <div class="room-content">
       <template
         v-for="(item, index) in roomList"
         :key="index"
       >
-        <div class="room-content-item">
-          {{ index }}
+        <div
+          class="room-content-item"
+          @click="itemClick"
+        >
+          <div>
+            <p>客厅</p>
+            <div>
+              <Icon
+                name="10"
+                :size="20"
+              />
+              4个设备
+            </div>
+          </div>
         </div>
       </template>
     </div>
@@ -23,7 +35,9 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
 const roomList = ref([
   { 1: 1 },
   { 1: 1 },
@@ -34,6 +48,11 @@ const roomList = ref([
   { 1: 1 },
   { 1: 1 }
 ])
+
+function itemClick() {
+  console.log('跳转到设备list')
+  router.push('/create')
+}
 </script>
 <style lang="scss" scoped>
 .room {
@@ -43,14 +62,6 @@ const roomList = ref([
 
   &-title {
     font-size: 18px;
-
-    &>span:last-child {
-      font-size: 16px;
-      background: red;
-      border-radius: 10px;
-      margin-left: 10px;
-      padding: 0 10px;
-    }
   }
 
   &-content {
@@ -68,11 +79,29 @@ const roomList = ref([
       flex: 1 0 286px;
       max-width: 100%;
       height: 180px;
-      background: #40464D;
+      padding: 10px 20px;
+      background: radial-gradient(circle at right, #40464d00, #40464d75 35%), url(./img/1.png) no-repeat right;
+      background-size: contain;
+      background-blend-mode: overlay;
       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;
+      position: relative;
+
+      &>div>div {
+        display: flex;
+        align-items: center;
+
+        svg {
+          margin-right: 5px;
+          color: var(--n-text-color);
+        }
+      }
+
+      &:hover {
+        scale: 1.01;
+      }
     }
 
   }