style: 更换首页图片

src/api/edge/device.ts

@@ -4,6 +4,6 @@ export const restPassword = (id: string) => server.post(`/edge/operations/${id}/
 
 export const _control = (deviceId: string) => server.get(`/edge/remote/${deviceId}/url`)
 
-export const _stopControl = (deviceId: string) => server.get(`/edge/remote/${deviceId}/stop`, {})
+export const _stopControl = (deviceId: string) => server.post(`/edge/remote/${deviceId}/stop`)
 
 

src/views/home/components/PlatformPicCard.vue

@@ -4,11 +4,11 @@
             <span>平台架构图</span>
             <p>PLATFORM ARCHITECTURE DIAGRAM</p>
         </div>
-        <img
-            :src="props.image || '/images/home/content.png'"
-            class="bj"
-            alt=""
-        />
+      <div class='plaid'></div>
+      <div
+        class='bj'
+        :style='{ backgroundImage: `url(${props.image || "/images/home/content.png"})`}'
+      ></div>
     </div>
 </template>
 
@@ -26,16 +26,34 @@ const props = defineProps({
     background-color: #fff;
     border-bottom: 1px solid #2f54eb;
     height: 458px;
-    .bj {
-        display: block;
+
+    .plaid {
+      background: repeating-linear-gradient(90deg, transparent, transparent 35px, rgba(#000, .1) 36px),
+              repeating-linear-gradient(0deg, transparent, transparent 35px, rgba(#000, .1) 36px);
+      position: absolute;
+      top: 0;
+      left: 0;
       width: 100%;
       height:100%;
+      z-index: 1;
+    }
+
+    .bj {
+        position: relative;
+        z-index: 2;
+        display: block;
+        width: 100%;
+        height: calc(100% - 50px);
+        margin-top: 40px;
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
     }
 
     .title {
         position: absolute;
         width: 100%;
-        z-index: 2;
+        z-index: 3;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;