我的设备组

src/views/groups/index.vue

@@ -12,14 +12,11 @@
         <div class="device-item-top">
         <div class="device-item-top">
           <div
           <div
             class="device-item-img"
             class="device-item-img"
-            style="background: url(./img/ps/img.png) no-repeat center"
+            style="background-image: url(./img/ps/groups.png)"
           ></div>
           ></div>
-          <div class="device-status">
-            <div class="device-icon" style="background-image: url(./img/ps/box.png) "></div>
-            <div class="status" @click="delGroup">解散设备组</div>
-          </div>
         </div>
         </div>
         <div class="device-title">设备组A</div>
         <div class="device-title">设备组A</div>
+        <div class="clear-btn">解除该组</div>
       </div>
       </div>
     </div>
     </div>
     <Des></Des>
     <Des></Des>
@@ -67,13 +64,13 @@ export default {
   display: flex;
   display: flex;
   flex-wrap: wrap;
   flex-wrap: wrap;
   .device-item {
   .device-item {
-    width: 296.5px;
+    width: 200px;
     min-height: 199.5px;
     min-height: 199.5px;
     padding-top: 39px;
     padding-top: 39px;
     margin: 0 24px;
     margin: 0 24px;
     .device-item-create {
     .device-item-create {
       font-size: 52px;
       font-size: 52px;
-      height: 251.5px;
+      height: 200px;
       text-align: center;
       text-align: center;
       display: flex;
       display: flex;
       justify-content: center;
       justify-content: center;
@@ -84,42 +81,35 @@ export default {
       border: 1px solid #848484;
       border: 1px solid #848484;
     }
     }
     .device-item-top {
     .device-item-top {
-      height: 251.5px;
+      height: 200px;
       background: rgba(255, 255, 255, 1);
       background: rgba(255, 255, 255, 1);
-      box-shadow: 0px 4.5px 25px 0px rgba(0, 0, 0, 0.14);
+      // box-shadow: 0px 4.5px 25px 0px rgba(0, 0, 0, 0.14);
+      border: 1px solid #848484;
+      box-sizing: border-box;
       .device-item-img {
       .device-item-img {
         width: 100%;
         width: 100%;
-        height: 167px;
-      }
-    }
-    .device-status {
-      width: 296.5px;
-      height: 84.5px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      .device-icon {
-        width: 68px;
-        height: 44px;
-        margin-right: 18px;
-        background-size: 100%;
-      }
-      .status {
-        color: #28af48;
-        font-size: 18px;
-      }
-      .line {
-        color: #28af48;
-      }
-      .unline {
-        color: #28af48;
+        height: 200px;
+        background-repeat: no-repeat;
+        background-size: 50%;
+        background-position: center;
       }
       }
     }
     }
     .device-title {
     .device-title {
       padding-top: 25px;
       padding-top: 25px;
       font-size: 24px;
       font-size: 24px;
       color: #333333;
       color: #333333;
+      padding-bottom: 20px;
+    }
+    .clear-btn {
+
+      width:133px;
+      height:44px;
+      margin:  0 auto;
+      line-height: 44px;
+      text-align: center;
+      border:1px solid rgba(110,140,249,1);
+      border-radius:3px;
+      color: #6E8CF9;
     }
     }
   }
   }
 }
 }