feat: 添加排号机1280x1024皮肤模板

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

@@ -135,6 +135,74 @@
         </div>
       </div>
     </div>
+    <!-- 排号机 1280x1024 -->
+    <div
+      class="across-skin-2 flex flexc"
+      :id="componentsId"
+      v-else-if="resolution === '1280x1024'"
+      :style="{
+        background: filterItem('1', 0),
+      }"
+    >
+      <div class="header flex flexc aic jcc">
+        <div class="title" :style="{ color: filterItem('2', 0) }">
+          政务服务中心
+        </div>
+        <div class="date" :style="{ color: filterItem('3', 0) }">
+          2023/01/03 星期一 12:00:00
+        </div>
+      </div>
+      <div class="surface-preview-main flex flex1">
+        <div class="banner">
+          <img src="../../../../assets/img/pjq.png" alt="" />
+        </div>
+        <div class="meuns ">
+          <div
+            class="meuns-item"
+            v-for="(v, i) in filterNav('4')"
+            :key="v.id"
+            :class="{ border: !filterItem('4', i) }"
+            :style="{
+              background: filterItem('4', i),
+            }"
+          ></div>
+        </div>
+      </div>
+      <div class="data-total flex aic jca">
+        <div class="flex flexc aic">
+          <div :style="{ color: filterItem('5', 0) }">今日取号</div>
+          <div :style="{ color: filterItem('6', 0) }">888次</div>
+        </div>
+        <div class="flex flexc aic">
+          <div :style="{ color: filterItem('5', 0) }">累计取号量</div>
+          <div :style="{ color: filterItem('6', 0) }">888次</div>
+        </div>
+        <div class="flex flexc aic">
+          <div :style="{ color: filterItem('5', 0) }">当前等待人数</div>
+          <div :style="{ color: filterItem('6', 0) }">888人</div>
+        </div>
+        <div class="flex flexc aic">
+          <div :style="{ color: filterItem('5', 0) }">平均等待时间</div>
+          <div :style="{ color: filterItem('6', 0) }">8.8分钟</div>
+        </div>
+      </div>
+      <div class="info" :style="{ color: filterItem('9', 0) }">
+        <div class="flex aic jca mb15">
+          <div>
+            <span>主办单位：</span>
+            <span>XXXXXX服务中心</span>
+          </div>
+          <div>
+            <span>承办单位：</span>
+            <span>XXXXXX中心</span>
+          </div>
+        </div>
+        <div class="flex aic jca">
+          <span>技术支持：<span>XXXXXXX有限公司</span></span>
+          <span>蜀XXXXXXX号@XXXXXXX</span>
+        </div>
+      </div>
+    </div>
     <!-- 空数据显示 -->
     <div class="empty flex aic jcc" v-else>
       <a-empty
@@ -378,4 +446,62 @@ export default {
     color: #fff;
   }
 }
+.across-skin-2 {
+  width: 1000px;
+  height: 800px;
+  padding: 50px;
+  color: #fff;
+  background-image: linear-gradient(#26c5ff, #2c66ff);
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  background-size: 100% 100% !important;
+  gap: 30px;
+  .header {
+    color: #fff;
+    .title {
+      font-size: 30px;
+      font-weight: 600;
+    }
+    .date {
+      font-size: 16px;
+    }
+  }
+  .surface-preview-main {
+    gap: 20px;
+  }
+  .banner {
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
+    }
+  }
+  .meuns {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    gap: 10px;
+  }
+  .meuns-item {
+    height: 100%;
+    width: 100%;
+    border-radius: 4px;
+    background-size: 100% 100% !important;
+    background-repeat: no-repeat;
+  }
+  .border {
+    border: 1px dashed #ececec;
+  }
+  .data-total {
+    color: #fff;
+  }
+  .info {
+    color: #fff;
+  }
+}
 </style>