From 9fb82c2a1b9b6fc2cef44f8b95e58a1ac934bfb3 Mon Sep 17 00:00:00 2001
From: zhangzhiyi <zhangzhiyi@birantech.com>
Date: Sun, 21 May 2023 18:54:14 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E5=8D=A1=E7=89=87=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E9=87=8D=E6=96=B0=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/tabs/device-control.vue | 75 +++++++++++++++++++-------------
 1 file changed, 44 insertions(+), 31 deletions(-)

diff --git a/src/view/tabs/device-control.vue b/src/view/tabs/device-control.vue
index a8eff0b..b23b8ee 100644
--- a/src/view/tabs/device-control.vue
+++ b/src/view/tabs/device-control.vue
@@ -16,6 +16,7 @@
                         'air-quality-liang': item.airQuality === '良',
                         'air-quality-cha': item.airQuality === '差',
                     }"
+                    @click="goToDetail(item)"
                 >
                     <div class="content-top">
                         <div class="device-name">{{ item.name }}</div>
@@ -38,7 +39,7 @@
                                 </span>
                                 <span v-for="i in item.unitArr" class="unit">{{ i }}</span>
                             </div>
-                            <div class="close-btn" @click="switchDevice(item)">
+                            <div class="close-btn" @click.stop="switchDevice(item)">
                                 <img src="@/assets/imgs/device-control/power_on@2x.png" v-show="item.openFlg">
                                 <img src="@/assets/imgs/device-control/shutdown@2x.png" v-show="!item.openFlg">
                             </div>
@@ -61,6 +62,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
+import router from "@/router";
 
 const deviceList: any = ref<any[]>([]);
 
@@ -126,6 +128,17 @@ const allShutDown = () => {
         }
     })
 }
+
+/**
+ * 进入详情页面
+ * @param item 点击的设备信息
+ */
+const goToDetail = (item: any) => {
+    router.push({
+        path: '/device-detail',
+        query: {}
+    })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -139,7 +152,7 @@ const allShutDown = () => {
 
     .title {
         width: 100%;
-        padding: 35px 0;
+        padding: 70px 0;
         position: relative;
         flex-shrink: 0;
 
@@ -147,40 +160,39 @@ const allShutDown = () => {
             text-align: center;
             color: #FFF;
             font-weight: 400;
-            font-size: 40px;
+            font-size: 80px;
         }
 
         .all-close-btn {
             color: #FFF;
-            font-size: 32px;
-            padding: 14px 18px;
+            font-size: 64px;
+            padding: 28px 36px;
             background: #394457;
-            border-radius: 16px;
+            border-radius: 32px;
             position: absolute;
-            top: 25px;
-            right: 24px;
+            top: 50px;
+            right: 48px;
         }
     }
 
     .container {
         flex: 1;
-        overflow: auto;
     }
 
     .content {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
-        padding: 0 24px;
+        padding: 0 48px;
 
         .device-card {
-            width: 326px;
-            height: 146px;
             box-sizing: border-box;
+            width: 620px;
+            height: 292px;
             background: #20252E;
-            border-radius: 16px;
-            padding: 22px 24px 10px 24px;
-            margin-bottom: 20px;
+            border-radius: 32px;
+            padding: 44px 48px 20px 48px;
+            margin-bottom: 40px;
 
             .content-top {
                 display: flex;
@@ -188,15 +200,15 @@ const allShutDown = () => {
 
                 .device-name {
                     color: #FFF;
-                    font-size: 24px;
-                    margin-right: 10px;
-                    padding: 6px 0;
+                    font-size: 48px;
+                    margin-right: 20px;
+                    padding: 12px 0;
                 }
 
                 .status-border {
-                    font-size: 20px;
-                    padding: 6px 10px;
-                    border-radius: 16px;
+                    font-size: 40px;
+                    padding: 12px 20px;
+                    border-radius: 32px;
 
                     span {
                         display: inline-block;
@@ -215,7 +227,7 @@ const allShutDown = () => {
             }
 
             .content-btm {
-                margin-top: 18px;
+                margin-top: 36px;
                 font-family: Roboto-Light, Roboto;
 
                 // 关机
@@ -229,9 +241,9 @@ const allShutDown = () => {
                 }
 
                 .status {
-                    font-size: 40px;
+                    font-size: 80px;
                     font-weight: 300;
-                    margin-right: 4px;
+                    margin-right: 8px;
                 }
 
                 .hot {
@@ -243,12 +255,12 @@ const allShutDown = () => {
                 }
 
                 .unit {
-                    font-size: 18px;
+                    font-size: 36px;
                     font-weight: 400;
                 }
 
                 .air-quality {
-                    font-size: 40px;
+                    font-size: 80px;
                 }
             }
 
@@ -256,11 +268,12 @@ const allShutDown = () => {
             .device-btm {
                 display: flex;
                 justify-content: space-between;
+                align-items: center;
 
                 .close-btn {
-                    width: 60px;
-                    height: 60px;
-
+                    width: 120px;
+                    height: 120px;
+                    
                     img {
                         width: 100%;
                     }
@@ -274,7 +287,7 @@ const allShutDown = () => {
                 align-items: flex-end;
             }
         }
-
+        
         .air-quality-you {
             background: url('@/assets/imgs/device-control/air_quality_you@2x.png') no-repeat;
             background-size: cover;
@@ -291,4 +304,4 @@ const allShutDown = () => {
         }
     }
 }
-</style>
+</style>
\ No newline at end of file