From a336eb75c117c37932c4071154eadc8e2c16c3b9 Mon Sep 17 00:00:00 2001
From: wangqiujuan0808 <578331299@qq.com>
Date: Wed, 20 Mar 2024 21:01:52 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=82=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/style.css      |  6 +++---
 src/views/Room.vue | 53 ++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/style.css b/src/style.css
index 5213d42..2e9314c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -59,10 +59,10 @@ button:focus-visible {
 }
 
 #app {
-  width: 1920px;
-  height:1080px;
+  width: 100%;
+  height:100%;
   margin: 0 auto;
-  padding: 2rem;
+  /* padding: 2rem; */
   text-align: center;
 }
 
diff --git a/src/views/Room.vue b/src/views/Room.vue
index 3ebc6d9..76e1ce5 100644
--- a/src/views/Room.vue
+++ b/src/views/Room.vue
@@ -17,12 +17,24 @@
             </div>
         </el-card>
         <el-card>
-            <div class="div-1"></div>
-            <div class="div-2"></div>
-            <div class="div-3"></div>
-            <div class="div-4"></div>
-            <div class="div-5"></div>
-            <div class="div-6"></div>
+            <div class="div-1">
+                <span class="name name1">房型信息</span>
+            </div>
+            <div class="div-2">
+                <span class="name name2">灯光信息</span>
+            </div>
+            <div class="div-3">
+                <span class="name name3">空调信息</span>
+            </div>
+            <div class="div-4">
+                <span class="name name4">面板信息</span>
+            </div>
+            <div class="div-5">
+                <span class="name name5">窗帘信息</span>
+            </div>
+            <div class="div-6">
+                <span class="name name6">其他信息</span>
+            </div>
         </el-card>
     </div>
 </template>
@@ -95,6 +107,35 @@ const addRoom = () => {
 
             >div {
                 border: 1px solid #ddd;
+                display: flex;
+                border-radius: 8px;
+                .name {
+                    width: 50px;
+                    color:#fff;
+                    font-size: 18px;
+                    text-align: center;
+                    display: flex;
+                    align-items: center;
+                }
+                .name1 {
+                    background: #de868f;
+                }
+                .name2 {
+                    background: #e99d42;
+                }
+                .name3 {
+                    background: #cba43f;
+                }
+                .name4 {
+                    background: #bfbf3d;
+                }
+                .name5 {
+                    background: #54bcbd;
+                }
+                .name6 {
+                    background: #e99d42;
+                }
+
             }
 
             .div-1 {