优化：后台页面设计组件支持设置圆角

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

@@ -601,6 +601,29 @@
                 </div>
               </div>
             </div>
+            <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.borderRadius" :min="0" :max="30" />
+                  <span class="unit-text">
+                    <span>{{ curItem.style.borderRadius }}</span>
+                    <span>像素</span>
+                  </span>
+                </div>
+              </div>
+              <div class="block-item">
+                <span class="label">图片间距</span>
+                <div class="item-slider">
+                  <a-slider v-model="curItem.style.itemMargin" :min="0" :max="50" />
+                  <span class="unit-text">
+                    <span>{{ curItem.style.itemMargin }}</span>
+                    <span>像素</span>
+                  </span>
+                </div>
+              </div>
+            </div>
           </a-tab-pane>
         </a-tabs>
       </div>
@@ -645,6 +668,39 @@
             </div>
           </a-tab-pane>
           <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.paddingTop" :min="0" :max="50" />
+                  <span class="unit-text">
+                    <span>{{ curItem.style.paddingTop }}</span>
+                    <span>像素</span>
+                  </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', '#fff')"
+                  >重置</span>
+                  <colorPicker v-model="curItem.style.background" defaultColor="#fff" />
+                </div>
+              </div>
+            </div>
             <div class="block-box">
               <div class="block-title">内容样式</div>
               <div class="block-item">
@@ -676,6 +732,19 @@
                 </div>
               </div>
             </div>
+            <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.borderRadius" :min="0" :max="30" />
+                  <span class="unit-text">
+                    <span>{{ curItem.style.borderRadius }}</span>
+                    <span>像素</span>
+                  </span>
+                </div>
+              </div>
+            </div>
           </a-tab-pane>
         </a-tabs>
       </div>
@@ -916,7 +985,7 @@
                   <a-radio-button :value="5">5个</a-radio-button>
                 </a-radio-group>
               </div>
-               <div class="block-item">
+              <div class="block-item">
                 <span class="label">图片大小</span>
                 <div class="item-slider">
                   <a-slider v-model="curItem.style.imageSize" :min="30" :max="90" />
@@ -1054,7 +1123,6 @@
         <a-tabs>
           <a-tab-pane key="1" tab="内容设置">
             <div class="sub-title">实现点击图片不同位置，跳转不同的链接</div>
-
             <div class="block-box">
               <div class="block-title">
                 <span class="left">背景图片</span>
@@ -1114,6 +1182,19 @@
                 </div>
               </div>
             </div>
+            <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.borderRadius" :min="0" :max="30" />
+                  <span class="unit-text">
+                    <span>{{ curItem.style.borderRadius }}</span>
+                    <span>像素</span>
+                  </span>
+                </div>
+              </div>
+            </div>
           </a-tab-pane>
         </a-tabs>
       </div>

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

@@ -30,15 +30,25 @@
           :style="renderItemStyle(item)"
         >
           <!-- 轮播图 -->
-          <div v-if="item.type == 'banner'" class="diy-banner">
-            <img
-              class="image"
+          <div
+            v-if="item.type == 'banner'"
+            class="diy-banner"
+            :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px`, background: item.style.background }"
+          >
+            <div
+              class="item-image"
+              v-show="dataIdx <= 1"
               v-for="(dataItem, dataIdx) in item.data"
               :key="`${index}_${dataIdx}_img`"
-              v-show="dataIdx <= 1"
-              :src="dataItem.imgUrl"
-            />
-            <div class="dots" :class="item.style.btnShape">
+              :style="{ borderRadius: `${item.style.borderRadius}px` }"
+            >
+              <img class="image" :src="dataItem.imgUrl" />
+            </div>
+            <div
+              class="dots"
+              :class="item.style.btnShape"
+              :style="{ '--padding-top': `${item.style.paddingTop}px` }"
+            >
               <div
                 v-for="(dataItem, dataIdx) in item.data"
                 :key="`${index}_${dataIdx}_dots`"
@@ -52,13 +62,13 @@
           <div
             v-else-if="item.type == 'image'"
             class="diy-image"
-            :style="{ paddingBottom: item.style.paddingTop + 'px', background: item.style.background }"
+            :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px`, background: item.style.background }"
           >
             <div
               class="item-image"
               v-for="(dataItm, dataIdx) in item.data"
               :key="`${index}_${dataIdx}`"
-              :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px 0` }"
+              :style="{ marginBottom: `${item.style.itemMargin}px`, borderRadius: `${item.style.borderRadius}px` }"
             >
               <img class="image" :src="dataItm.imgUrl" />
             </div>
@@ -125,12 +135,9 @@
           <div
             v-else-if="item.type == 'hotZone'"
             class="diy-hotZone"
-            :style="{ paddingBottom: item.style.paddingTop + 'px', background: item.style.background }"
+            :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px`, background: item.style.background }"
           >
-            <div
-              class="item-image"
-              :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px 0` }"
-            >
+            <div class="item-image" :style="{ borderRadius: `${item.style.borderRadius}px` }">
               <img class="image" :src="item.data.imgUrl" />
             </div>
           </div>

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

@@ -127,9 +127,9 @@ dl {
       height: auto;
       overflow: hidden;
 
-      .image {
+      .item-image {
         display: none;
-        width: 100%;
+        overflow: hidden;
 
         // 后台仅显示第一个
         &:first-child {
@@ -137,20 +137,28 @@ dl {
         }
       }
 
+      .image {
+        display: block;
+        width: 100%;
+      }
+
       .dots {
+        --padding-top: 0;
         height: 14px;
         padding: 0 10px;
         position: absolute;
         left: 0;
         right: 0;
         bottom: 10px;
+        bottom: calc(var(--padding-top)  + 10px);
         opacity: 0.8;
         display: flex;
         justify-content: center;
+        align-items: center;
 
 
         &-item {
-          margin-right: 3px;
+          margin-right: 4px;
           height: 10px;
           width: 10px;
 
@@ -162,26 +170,27 @@ dl {
         &.rectangle {
           .dots-item {
             width: 16px;
+            height: 8px;
           }
         }
 
         &.square {
           .dots-item {
-            width: 10px;
+            // width: 10px;
           }
         }
 
         &.round {
           .dots-item {
-            height: 10px;
-            width: 10px;
+            // height: 10px;
+            // width: 10px;
             border-radius: 10px;
           }
         }
       }
     }
 
-    // diy-图片组
+    // 图片组
     .diy-image {
       display: block;
       margin: 0;
@@ -189,6 +198,14 @@ dl {
       height: auto;
       overflow: hidden;
 
+      .item-image {
+        overflow: hidden;
+
+        &:last-child {
+          margin-bottom: 0 !important;
+        }
+      }
+
       .image {
         display: block;
         width: 100%;
@@ -457,6 +474,14 @@ dl {
       height: auto;
       overflow: hidden;
 
+      .item-image {
+        overflow: hidden;
+
+        &:last-child {
+          margin-bottom: 0 !important;
+        }
+      }
+
       .image {
         display: block;
         width: 100%;