perf: 修改样表皮肤

base-manager-ui/admin/src/pages/basicset/surface/sampleFormSkin/SampleFormSkin.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/yangbiao.png" alt="" />
       <!-- 搜索框 -->
       <div class="search-box">
         <div
@@ -66,23 +63,32 @@
       </div>
       <!-- 主体内容 -->
       <div class="main flex aic jcb">
-        <div class="left">热门表单区域</div>
-        <div class="right flex flexc 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="top flex aic jcc"
+            class="btn flex aic jcc"
             :style="{
               background: filterItem('4', 0),
             }"
             :class="{ border: !filterItem('4', 0) }"
           >
-            btn1
+            btn
+          </div>
+          <div class="bottom flex1 flex aic jcc">
+            热门事项
           </div>
-          <div class="bottom flex aic jcc">热门事项</div>
         </div>
       </div>
       <!-- 底部 -->
-      <div class="footer flex aic mt20">
-        <div class="flex1 tac">
+      <div class="footer flex aic jca ">
+        <div class="">
           <span
             :style="{
               color: filterItem('5', 0),
@@ -96,7 +102,7 @@
             >20份</span
           >
         </div>
-        <div class="flex1 tac">
+        <div class="">
           <span
             :style="{
               color: filterItem('5', 0),
@@ -209,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;
@@ -243,39 +246,46 @@ export default {
   }
   .main {
     width: 800px;
-    height: 250px;
+    height: 300px;
     margin-top: 10px;
     color: #fff;
     .left {
-      width: 54%;
+      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: 44%;
-      height: 100%;
-      border-radius: 4px;
-      .top {
-        height: 40%;
+      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%;
+        height: 80px;
         border-radius: 4px;
         background-size: 100% 100% !important;
       }
-      .border {
+      .bottom {
+        margin-top: 10px;
+        border-radius: 4px;
         border: 1px dashed #ececec;
       }
-      .bottom {
-        height: 58%;
-        width: 100%;
+      .border {
         border: 1px dashed #ececec;
-        border-radius: 4px;
       }
     }
   }
   .footer {
+    margin-top: 30px;
     width: 800px;
     color: #fff;
   }

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

 <template>
   <div class="skin-box">
-    <!-- 样表机 横板 -->
+    <!-- 填单机 横板 -->
     <div
       :id="componentsId"
       v-if="imageResolution === '1'"
-      class="sample_form_skin flex flexc aic"
+      class="write_form_skin flex flexc aic"
       :style="{
         background: filterItem('1', 0),
       }"
@@ -187,7 +187,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.sample_form_skin {
+.write_form_skin {
   width: 1000px;
   height: 562.5px;
   padding: 20px;