修改首页样式，解决首页面的一些问题

admin/src/layout/components/NavbarItem.vue

@@ -87,9 +87,7 @@ export default {
       ItemIndex: "/home",
     };
   },
-  mounted() {
-    console.log(this.ItemIndex);
-  },
+  mounted() {},
   methods: {
     select(index, indexPath) {
       this.ItemIndex = index;

admin/src/views/home/index.vue

@@ -123,7 +123,7 @@
             <span>/&nbsp; 共10间</span>
           </div>
           <div class="main-floor">
-            <div class="room-num" v-for="i in 12" :key="i">
+            <div class="room-num" v-for="item in 12" :key="item">
               <el-popover
                 placement="right"
                 trigger="click"
@@ -138,7 +138,13 @@
                   <div>清扫</div>
                   <div>取消</div>
                 </div>
-                <div class="card" slot="reference">
+                <div
+                  @click="EachRoom(i, item, $event)"
+                  :class="i + '' + item == clickId ? 'cardId' : ''"
+                  class="card"
+                  :id="i + '' + item"
+                  slot="reference"
+                >
                   <div class="title">
                     <span>17栋1单元2层01房</span>
                     <div class="state">空闲</div>
@@ -252,6 +258,7 @@ export default {
   name: "Home",
   data() {
     return {
+      clickId: "",
       // 门锁管理
       doorLock: false,
       // 批量数据
@@ -370,42 +377,11 @@ export default {
     )[2].children[0].innerText = ">";
   },
   methods: {
-    handleCheckChange(data, checked, indeterminate) {
-      console.log(data, checked, indeterminate);
-    },
-    loadNode(node, resolve) {
-      if (node.level === 0) {
-        return resolve([{ name: "region1" }, { name: "region2" }]);
-      }
-      if (node.level > 3) return resolve([]);
-
-      var hasChild;
-      if (node.data.name === "region1") {
-        hasChild = true;
-      } else if (node.data.name === "region2") {
-        hasChild = false;
-      } else {
-        hasChild = Math.random() > 0.5;
-      }
-
-      setTimeout(() => {
-        var data;
-        if (hasChild) {
-          data = [
-            {
-              name: "zone" + this.count++,
-            },
-            {
-              name: "zone" + this.count++,
-            },
-          ];
-        } else {
-          data = [];
-        }
-
-        resolve(data);
-      }, 500);
+    EachRoom(i, item, $event) {
+      // console.log($event.currentTarget.id);
+      this.clickId = $event.currentTarget.id;
     },
+    // 控制水电
     dialogShow(e) {
       this.dialogVisible = true;
       this.title = e.target.innerHTML;
@@ -597,6 +573,8 @@ export default {
               font-size: 12px;
               font-weight: 400;
               color: #000;
+              box-sizing: border-box;
+              border: 1px solid transparent;
               display: flex;
               flex-direction: column;
               // div {
@@ -690,6 +668,10 @@ export default {
                 }
               }
             }
+            .cardId {
+              border: 1px solid rgba(41, 109, 227, 1);
+              box-sizing: border-box;
+            }
             .el-dropdown-link {
               cursor: pointer;
               color: #409eff;