设备卡片页面重新提交

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;
+            font-size: 64px;
-            padding: 14px 18px;
+            padding: 28px 36px;
             background: #394457;
-            border-radius: 16px;
+            border-radius: 32px;
             position: absolute;
-            top: 25px;
+            top: 50px;
-            right: 24px;
+            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;
+            border-radius: 32px;
-            padding: 22px 24px 10px 24px;
+            padding: 44px 48px 20px 48px;
-            margin-bottom: 20px;
+            margin-bottom: 40px;
 
             .content-top {
                 display: flex;
@@ -188,15 +200,15 @@ const allShutDown = () => {
 
                 .device-name {
                     color: #FFF;
-                    font-size: 24px;
+                    font-size: 48px;
-                    margin-right: 10px;
+                    margin-right: 20px;
-                    padding: 6px 0;
+                    padding: 12px 0;
                 }
 
                 .status-border {
-                    font-size: 20px;
+                    font-size: 40px;
-                    padding: 6px 10px;
+                    padding: 12px 20px;
-                    border-radius: 16px;
+                    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;
+                    width: 120px;
-                    height: 60px;
+                    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>