perf: 修改填单皮肤模板

base-manager-ui/admin/src/pages/basicset/surface/writeFormSkin/WriteFormSkin.vue

@@ -12,7 +12,6 @@
       <!-- 头部 -->
       <div class="header flex aic jcb">
         <div class="left flex aic">
-          <!-- <img class="mr20" src="../../../../assets/img/logo.png" /> -->
           <div
             class="title"
             :style="{
@@ -43,8 +42,6 @@
           </div>
         </div>
       </div>
-      <!-- 标题 -->
-      <img class="title-img" src="../../../../assets/img/tiandan.png" alt="" />
       <!-- 搜索框 -->
       <div class="search-box">
         <div
@@ -66,39 +63,37 @@
       </div>
       <!-- 主体内容 -->
       <div class="main flex aic jcb">
-        <div class="left">热门排行区域</div>
-        <div class="right flex flexc jcb">
-          <div class="top flex aic jcb">
+        <div class="left flex flexc">
+          <div class="app-list flex aic jcc">
+            应用列表
+          </div>
+          <div class="flex1 flex aic jcc">
+            热门表单
+          </div>
+        </div>
+        <div class="right flex flexc">
           <div
-              class="btn1 flex jcc aic"
+            class="btn flex aic jcc"
             :style="{
               background: filterItem('4', 0),
             }"
             :class="{ border: !filterItem('4', 0) }"
           >
-              btn1
+            btn
           </div>
-            <div
-              class="btn2 flex jcc aic"
-              :style="{
-                background: filterItem('4', 1),
-              }"
-              :class="{ border: !filterItem('4', 1) }"
-            >
-              btn2
+          <div class="bottom flex1 flex aic jcc">
+            热门事项
           </div>
         </div>
-          <div class="bottom flex aic jcc">应用区域</div>
-        </div>
       </div>
       <!-- 底部 -->
-      <div class="footer flex aic jca mt20">
-        <div class="flex flexc aic">
+      <div class="footer flex aic jca ">
+        <div class="">
           <span
             :style="{
               color: filterItem('5', 0),
             }"
-            >入驻表单量</span
+            >入驻表单量：</span
           >
           <span
             :style="{
@@ -107,12 +102,12 @@
             >20份</span
           >
         </div>
-        <div class="flex flexc aic">
+        <div class="">
           <span
             :style="{
               color: filterItem('5', 0),
             }"
-            >入驻事项量</span
+            >入驻事项量：</span
           >
           <span
             :style="{
@@ -121,34 +116,6 @@
             >20件</span
           >
         </div>
-        <div class="flex flexc aic">
-          <span
-            :style="{
-              color: filterItem('5', 0),
-            }"
-            >本地打印量</span
-          >
-          <span
-            :style="{
-              color: filterItem('7', 0),
-            }"
-            >20次</span
-          >
-        </div>
-        <div class="flex flexc aic">
-          <span
-            :style="{
-              color: filterItem('5', 0),
-            }"
-            >在线提交量</span
-          >
-          <span
-            :style="{
-              color: filterItem('7', 0),
-            }"
-            >20次</span
-          >
-        </div>
       </div>
     </div>
     <!-- 空数据显示 -->
@@ -248,14 +215,11 @@ export default {
       }
     }
   }
-  .title-img {
-    width: 600px;
-    margin-top: 20px;
-  }
+
   .search-box {
     width: 600px;
     height: 38px;
-    margin-top: 20px;
+    margin-top: 40px;
     background: #ffffff;
     box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
@@ -282,49 +246,46 @@ export default {
   }
   .main {
     width: 800px;
-    height: 250px;
+    height: 300px;
     margin-top: 10px;
     color: #fff;
     .left {
-      width: 49%;
+      width: 50%;
       height: 100%;
       border: 1px dashed #ececec;
       border-radius: 4px;
-      text-align: center;
-      line-height: 200px;
+      .app-list {
+        height: 80px;
+        border-bottom: 1px dashed #ececec;
+        border-radius: 4px;
+      }
     }
     .right {
-      width: 49%;
-      height: 100%;
-      border-radius: 4px;
-      .top {
-        height: 49%;
+      width: 50%;
+      height: 90%;
+      border-radius: 0px 4px 4px 0px;
+      border: 1px dashed #ececec;
+      border-left: none;
+      padding: 10px;
+      .btn {
+        margin: 0px !important;
         width: 100%;
-        .btn1 {
-          height: 100%;
-          width: 54%;
+        height: 80px;
         border-radius: 4px;
         background-size: 100% 100% !important;
       }
-        .btn2 {
-          height: 100%;
-          width: 44%;
+      .bottom {
+        margin-top: 10px;
         border-radius: 4px;
-          background-size: 100% 100% !important;
-        }
-      }
-      .border {
         border: 1px dashed #ececec;
       }
-      .bottom {
-        height: 49%;
-        width: 100%;
+      .border {
         border: 1px dashed #ececec;
-        border-radius: 4px;
       }
     }
   }
   .footer {
+    margin-top: 30px;
     width: 800px;
     color: #fff;
   }