优化：后台页面设计组件的样式功能

src/views/page/modules/editor/Editor.vue

@@ -88,9 +88,9 @@
               <div class="block-item">
                 <span class="label">搜索框样式</span>
                 <a-radio-group buttonStyle="solid" v-model="curItem.style.searchStyle">
-                  <a-radio-button value="square">方形</a-radio-button>
-                  <a-radio-button value="radius">圆角</a-radio-button>
                   <a-radio-button value="round">圆弧</a-radio-button>
+                  <a-radio-button value="radius">圆角</a-radio-button>
+                  <a-radio-button value="square">方形</a-radio-button>
                 </a-radio-group>
               </div>
               <div class="block-item">
@@ -101,6 +101,59 @@
                   <a-radio-button value="right">居右</a-radio-button>
                 </a-radio-group>
               </div>
+              <div class="block-item">
+                <span class="label">搜索框颜色</span>
+                <div class="item-colorPicker">
+                  <span
+                    class="rest-color"
+                    @click="onEditorResetColor(curItem.style, 'searchBg', '#fff')"
+                  >重置</span>
+                  <colorPicker v-model="curItem.style.searchBg" defaultColor="#fff" />
+                </div>
+              </div>
+              <div class="block-item">
+                <span class="label">文字颜色</span>
+                <div class="item-colorPicker">
+                  <span
+                    class="rest-color"
+                    @click="onEditorResetColor(curItem.style, 'searchFontColor', '#999999')"
+                  >重置</span>
+                  <colorPicker v-model="curItem.style.searchFontColor" defaultColor="#999999" />
+                </div>
+              </div>
+            </div>
+            <div class="block-box">
+              <div class="block-title">组件样式</div>
+              <div class="block-item">
+                <span class="label">背景颜色</span>
+                <div class="item-colorPicker">
+                  <span
+                    class="rest-color"
+                    @click="onEditorResetColor(curItem.style, 'background', '#f1f1f2')"
+                  >重置</span>
+                  <colorPicker v-model="curItem.style.background" defaultColor="#f1f1f2" />
+                </div>
+              </div>
+              <div class="block-item">
+                <span class="label">上下边距</span>
+                <div class="item-slider">
+                  <a-slider v-model="curItem.style.paddingY" :min="0" :max="50" />
+                  <span class="unit-text">
+                    <span>{{ curItem.style.paddingY }}</span>
+                    <span>像素</span>
+                  </span>
+                </div>
+              </div>
+              <div class="block-item">
+                <span class="label">左右边距</span>
+                <div class="item-slider">
+                  <a-slider v-model="curItem.style.paddingX" :min="0" :max="50" />
+                  <span class="unit-text">
+                    <span>{{ curItem.style.paddingX }}</span>
+                    <span>像素</span>
+                  </span>
+                </div>
+              </div>
             </div>
           </a-tab-pane>
         </a-tabs>
@@ -258,6 +311,16 @@
           <a-tab-pane key="2" tab="样式设置">
             <div class="block-box">
               <div class="block-title">内容样式</div>
+              <div class="block-item">
+                <span class="label">文字大小</span>
+                <div class="item-slider">
+                  <a-slider v-model="curItem.style.fontSize" :min="10" :max="18" />
+                  <span class="unit-text">
+                    <span>{{ curItem.style.fontSize }}</span>
+                    <span>像素</span>
+                  </span>
+                </div>
+              </div>
               <div class="block-item">
                 <span class="label">文字颜色</span>
                 <div class="item-colorPicker">
@@ -440,6 +503,26 @@
                   </span>
                 </div>
               </div>
+              <div class="block-item">
+                <span class="label">左右边距</span>
+                <div class="item-slider">
+                  <a-slider v-model="curItem.style.paddingLeft" :min="0" :max="50" />
+                  <span class="unit-text">
+                    <span>{{ curItem.style.paddingLeft }}</span>
+                    <span>像素</span>
+                  </span>
+                </div>
+              </div>
+              <div class="block-item">
+                <span class="label">背景颜色</span>
+                <div class="item-colorPicker">
+                  <span
+                    class="rest-color"
+                    @click="onEditorResetColor(curItem.style, 'background', '#ffffff')"
+                  >重置</span>
+                  <colorPicker v-model="curItem.style.background" defaultColor="#ffffff" />
+                </div>
+              </div>
             </div>
           </a-tab-pane>
         </a-tabs>
@@ -832,6 +915,16 @@
                   <a-radio-button :value="4">4个</a-radio-button>
                   <a-radio-button :value="5">5个</a-radio-button>
                 </a-radio-group>
+              </div>
+               <div class="block-item">
+                <span class="label">图片大小</span>
+                <div class="item-slider">
+                  <a-slider v-model="curItem.style.imageSize" :min="30" :max="90" />
+                  <span class="unit-text">
+                    <span>{{ curItem.style.imageSize }}</span>
+                    <span>像素</span>
+                  </span>
+                </div>
               </div>
               <div class="block-item">
                 <span class="label">文字颜色</span>

src/views/page/modules/phone/Phone.vue

@@ -139,7 +139,7 @@
           <div
             v-else-if="item.type == 'video'"
             class="diy-video"
-            :style="{ padding: `${item.style.paddingTop}px 0` }"
+            :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px`, background: item.style.background }"
           >
             <video
               :style="{ height: `${item.style.height}px` }"
@@ -191,9 +191,13 @@
             v-else-if="item.type == 'search'"
             class="diy-search"
             :class="{ sticky: item.params.sticky }"
+            :style="{ background: item.style.background, padding: `${item.style.paddingY}px ${item.style.paddingX}px` }"
           >
             <div class="inner" :class="item.style.searchStyle">
-              <div class="search-input" :style="{ textAlign: item.style.textAlign }">
+              <div
+                class="search-input"
+                :style="{ textAlign: item.style.textAlign, background: item.style.searchBg, color: item.style.searchFontColor }"
+              >
                 <a-icon class="search-icon" :component="PageIcon.search" />
                 <span>{{ item.params.placeholder }}</span>
               </div>
@@ -213,7 +217,10 @@
               <div class="notice__icon">
                 <a-icon class="notice-icon" :component="PageIcon.volumeFill" />
               </div>
-              <div class="notice__text flex-box oneline-hide">
+              <div
+                class="notice__text flex-box oneline-hide"
+                :style="{ fontSize: `${item.style.fontSize}px` }"
+              >
                 <span>{{ item.params.text }}</span>
               </div>
             </div>
@@ -225,18 +232,22 @@
             class="diy-navBar"
             :style="{ padding: `${item.style.paddingTop}px 0`, background: item.style.background, color: item.style.textColor }"
           >
-            <ul class="data-list clearfix" :class="`avg-sm-${item.style.rowsNum}`">
-              <li
+            <div class="data-list clearfix" :class="`avg-sm-${item.style.rowsNum}`">
+              <div
                 class="item-nav"
                 v-for="(dataItm, dataIdx) in item.data"
                 :key="`${index}_${dataIdx}`"
               >
                 <div class="item-image">
-                  <img class="image" :src="dataItm.imgUrl" />
+                  <img
+                    class="image"
+                    :style="{ width: `${item.style.imageSize}px`, height: `${item.style.imageSize}px` }"
+                    :src="dataItm.imgUrl"
+                  />
                 </div>
                 <p class="item-text oneline-hide">{{ dataItm.text }}</p>
-              </li>
-            </ul>
+              </div>
+            </div>
           </div>
 
           <!-- 商品组 -->

src/views/page/modules/phone/style.less

@@ -53,6 +53,8 @@ dl {
     border-top: 0;
     user-select: none;
     line-height: normal;
+    font-family: PingFang-Medium, PingFangSC-Regular, Heiti, Heiti SC, DroidSans, DroidSansFallback, "Microsoft YaHei", sans-serif;
+    -webkit-font-smoothing: antialiased;
 
     .content {
       // overflow-y: auto;
@@ -107,11 +109,11 @@ dl {
           //width: 100%;
           line-height: 30px;
           color: #999999;
-          padding: 0 10px;
+          padding: 0 12px;
           font-size: 13px;
 
           .search-icon {
-            margin-right: 4px;
+            margin-right: 6px;
           }
         }
       }
@@ -195,21 +197,30 @@ dl {
 
     // 导航组
     .diy-navBar {
+      display: flex;
+      flex-direction: column;
+
+      .data-list {
+        margin-bottom: -10px;
+      }
+
       .item-nav {
         float: left;
-        margin: 10px 0;
         text-align: center;
+        margin-bottom: 10px;
+        font-size: 13px;
 
         .item-image {
           text-align: center;
           margin-bottom: 4px;
 
           .image {
-            height: 44px;
+            display: block;
             width: 44px;
+            height: 44px;
+            margin: 0 auto;
           }
         }
-
       }
 
       // 分列布局
@@ -712,7 +723,7 @@ dl {
 
       .notice__text {
         padding-left: 6px;
-        line-height: 18px;
+        // line-height: 18px;
       }
     }