perf: 修改排号机皮肤模板

base-manager-ui/admin/src/pages/basicset/surface/queuingSkin/LandscapeMode.vue

@@ -12,7 +12,7 @@
       <div class="surface-preview-main">
         <div class="skin-header">
           <h1 class="skin-header-title" :style="{ color: filterItem('2', 0) }">
-            政务服务中心
+            自助排队取号系统
           </h1>
           <div class="skin-header-time" :style="{ color: filterItem('3', 0) }">
             <p class="show-time">16:14:00</p>
@@ -20,9 +20,6 @@
           </div>
         </div>
         <div class="skin-content">
-          <div class="skin-content-left">
-            <img src="../../../../assets/img/Banner.png" alt="" />
-          </div>
           <div class="skin-content-right">
             <div
               v-for="(v, i) in filterNav('4')"
@@ -59,13 +56,13 @@
           </div>
           <div class="skin-footer-records">
             <p :style="{ color: filterItem('9', 0) }">
-              主办单位：四川省青霆科技有限公司
+              主办单位：XXXXXX有限公司
             </p>
             <p :style="{ color: filterItem('9', 0) }">
-              承办单位：四川省青霆科技有限公司
+              承办单位：XXXXXX有限公司
             </p>
             <p :style="{ color: filterItem('9', 0) }">
-              技术：四川省青霆科技有限公司
+              技术：XXXXXX有限公司
             </p>
             <p :style="{ color: filterItem('9', 0) }">版权所有</p>
           </div>
@@ -249,6 +246,7 @@ export default {
       display: flex;
       justify-content: space-between;
       height: 100px;
+      margin-bottom: 40px;
       align-items: center;
       .skin-header-title {
         font-size: 22px;
@@ -268,46 +266,36 @@ export default {
     .skin-content {
       flex: 1;
       display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      width: 80%;
-      margin-left: 10%;
-      .skin-content-left {
-        width: 48%;
-        height: 100%;
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-          border-radius: 10px;
-        }
-      }
+      justify-content: flex-end;
+      width: 96%;
+      margin-left: 2%;
+
       .skin-content-right {
-        width: 48%;
+        width: 600px;
         height: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        align-content: space-between;
+        display: grid;
+        grid-template-columns: repeat(4, 150px);
+        gap: 10px;
         div {
-          width: 176px;
-          height: 108px;
+          width: 150px;
+          height: 150px;
           border-radius: 10px;
           background-repeat: no-repeat !important;
           background-position: center !important;
           background-size: 100% 100% !important;
           text-align: center;
           line-height: 108px;
+          &:nth-child(3) {
+            grid-column: 3 / span 2;
+          }
+          &:nth-child(4) {
+            grid-column: 2 / span 1;
+          }
         }
 
         .border {
           border: 1px dashed #ececec;
         }
-        img {
-          width: 176px;
-          height: 108px;
-          border-radius: 10px;
-        }
       }
     }
     .skin-footer {