perf: 修改窗口屏皮肤

base-manager-ui/admin/src/pages/basicset/surface/windowskin/WindowSkin.vue

@@ -3,24 +3,17 @@
     <!-- 窗口屏 横板 -->
     <div
       :id="componentsId"
-      class="window-skin-across flex jcb aic"
+      class="window-skin-across flex flexc jcb aic"
       v-if="imageResolution === '1'"
       :style="{
         background: filterItem('1', 0),
       }"
     >
-      <div class="left flex flexc jcc aic">
-        <p class="title">异地社保</p>
-        <p class="code" :style="{ color: filterItem('7', 0) }">A08</p>
-        <!-- <p><img width="100" src="../../../../assets/img/lvma.png" /></p> -->
-      </div>
-      <div class="right flex1 flex flexc aic">
-        <div class="header flex aic jcc">
-          <!-- <img src="../../../../assets/img/logo.png" /> -->
-          <div>
-            <h1 :style="{ color: filterItem('7', 0) }">政务服务中心</h1>
-          </div>
+      <div class="top flex aic">
+        <div class="code" :style="{ color: filterItem('7', 0) }">A08</div>
+        <div class="title">异地社保</div>
       </div>
+      <div class="center flex aic jcb">
         <div class="call-out flex aic">
           <div class="call-out-now flex flexc aic jcb">
             <p class="call-out-title">正在办理</p>
@@ -47,14 +40,14 @@
             </p>
           </div>
         </div>
-        <ul class="list">
+        <ul class="list flex1">
           <li>社保办理</li>
           <li>公积金办理</li>
           <li>退休补偿金办理</li>
         </ul>
-        <!-- 底部banner -->
-        <div class="footer-banner">Banner展示区</div>
       </div>
+      <!-- 底部banner -->
+      <div class="footer-banner flex aic jcc">Banner展示区</div>
     </div>
     <!-- 空数据显示 -->
     <div class="empty flex aic jcc" v-else>
@@ -128,30 +121,35 @@ export default {
 .window-skin-across {
   width: 1000px;
   height: 562px;
-  padding: 20px;
+  padding: 10px;
   background-image: linear-gradient(#26c5ff, #2c66ff);
   background-repeat: no-repeat !important;
   background-position: center !important;
   background-size: cover !important;
-  .left {
-    width: 38%;
-    height: 100%;
-    margin-right: 20px;
-    border-radius: 10px;
+  .top {
+    width: 100%;
+    height: 40%;
+    margin-bottom: 10px;
+    gap: 150px;
+    padding: 0px 20px;
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.5);
     box-shadow: 0px 0px 33px 5px rgba(0, 0, 0, 0.15);
-    .title {
-      font-size: 40px;
-      font-weight: 600;
-    }
     .code {
-      font-size: 120px;
+      font-size: 150px;
       font-weight: bold;
     }
+    .title {
+      font-size: 50px;
+      font-weight: 600;
     }
-  .right {
-    height: 100%;
+  }
+  .center {
+    width: 100%;
+    height: 40%;
     padding: 10px;
-    border-radius: 10px;
+    gap: 20px;
+    border-radius: 4px;
     background-color: #fff;
     box-shadow: 0px 0px 33px 5px rgba(0, 0, 0, 0.15);
     h1 {
@@ -161,11 +159,11 @@ export default {
       font-weight: 600;
     }
     .call-out {
-      width: 100%;
-      height: 150px;
-      border-radius: 10px;
-      margin-top: 20px;
+      width: 60%;
+      height: 100%;
+      border-radius: 4px;
       padding: 10px 0px;
+      background: #f2f7fe;
     }
     p {
       margin: 0px;
@@ -203,8 +201,10 @@ export default {
       );
     }
     .list {
-      width: 100%;
-      margin-top: 20px;
+      height: 100%;
+      background: #f2f7fe;
+      border-radius: 4px;
+      margin: 0px;
       li {
         font-size: 20px;
         margin-bottom: 10px;
@@ -212,18 +212,17 @@ export default {
         color: #000;
       }
     }
+  }
   .footer-banner {
     width: 100%;
-      height: 100px;
-      margin-top: 20px;
+    height: 19%;
+    margin-top: 10px;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100%;
     border: 1px dashed #ccc;
     font-size: 20px;
-      text-align: center;
-      line-height: 100px;
-    }
+    color: #fff;
   }
 }
 </style>