优化：页面设计组件支持圆角和间距

components/page/diyComponents/banner/index.vue

@@ -1,14 +1,15 @@
 <template>
-  <view class="diy-banner" :style="{ height: `${imgHeights[swiperIndex]}px` }">
+  <view class="diy-banner"
+    :style="{ padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx`, background: itemStyle.background, height: `${imgHeights[swiperIndex]}px` }">
     <!-- 图片轮播 -->
     <swiper :autoplay="autoplay" class="swiper-box" :duration="duration" :circular="true" :interval="itemStyle.interval * 1000"
-      @change="onChangeItem">
-      <swiper-item v-for="(dataItem, index) in dataList" :key="index">
+      @change="onChangeItem" :style="{ borderRadius: `${itemStyle.borderRadius * 2}rpx` }">
+      <swiper-item class="swiper-item" v-for="(dataItem, index) in dataList" :key="index">
         <image mode="widthFix" class="slide-image" :src="dataItem.imgUrl" @click="onLink(dataItem.link)" @load="onLoadImage" />
       </swiper-item>
     </swiper>
     <!-- 指示点 -->
-    <view class="indicator-dots" :class="itemStyle.btnShape">
+    <view class="indicator-dots" :class="itemStyle.btnShape" :style="{ '--padding-top': `${itemStyle.paddingTop * 2}rpx` }">
       <view class="dots-item" :class="{ active: swiperIndex == index }" :style="{ backgroundColor: itemStyle.btnColor }"
         v-for="(dataItem, index) in dataList" :key="index"></view>
     </view>
@@ -32,7 +33,7 @@
         indicatorDots: false, // 是否显示面板指示点
         autoplay: true, // 是否自动切换
         duration: 800, // 滑动动画时长
-        imgHeights: [], // 图片的高度
+        imgHeights: [], // 每张图片对应的容器高度
         swiperIndex: 0 // 当前banne所在滑块指针
       }
     },
@@ -44,14 +45,12 @@
       // 计算图片高度
       onLoadImage({ detail }) {
         const app = this
-        // 获取图片真实宽度
-        const { width, height } = detail
-        // 宽高比
-        const ratio = width / height
-        // 计算的高度值
-        const viewHeight = app.windowWidth / ratio
-        // 把每一张图片的高度记录到数组里
-        app.imgHeights.push(viewHeight)
+        // 图片的宽高比
+        const ratio = detail.width / detail.height
+        // 计算容器高度值
+        const viewHeight = (app.windowWidth - (app.itemStyle.paddingLeft * 2)) / ratio
+        // 每张图片对应的容器高度
+        app.imgHeights.push(viewHeight + (app.itemStyle.paddingTop * 2))
       },
 
       // 记录当前指针
@@ -65,65 +64,65 @@
 <style lang="scss" scoped>
   .diy-banner {
     position: relative;
+  }
 
-    // swiper组件
-    .swiper-box {
-      height: 100%;
+  // swiper组件
+  .swiper-box {
+    height: 100%;
+    overflow: hidden;
 
-      .slide-image {
-        width: 100%;
-        height: 100%;
-        margin: 0 auto;
-        display: block;
-      }
-    }
+    .swiper-item {}
 
-    // 指示点
-    .indicator-dots {
+    .slide-image {
       width: 100%;
-      height: 28rpx;
-      padding: 0 20rpx;
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 20rpx;
-      opacity: 0.8;
-      display: flex;
-      justify-content: center;
+      height: 100%;
+      margin: 0 auto;
+      display: block;
+    }
+  }
 
-      .dots-item {
-        width: 16rpx;
-        height: 16rpx;
-        margin-right: 8rpx;
-        background-color: #fff;
+  // 指示点
+  .indicator-dots {
+    --padding-top: 0;
+    height: 28rpx;
+    padding: 0 20rpx;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: calc(var(--padding-top) + 20rpx);
+    opacity: 0.8;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-        &:last-child {
-          margin-right: 0;
-        }
+    .dots-item {
+      margin-right: 8rpx;
+      width: 16rpx;
+      height: 16rpx;
+      background-color: #fff;
 
-        &.active {
-          background-color: #313131 !important;
-        }
+      &:last-child {
+        margin-right: 0;
       }
 
-      // 圆形
-      &.round .dots-item {
-        width: 16rpx;
-        height: 16rpx;
-        border-radius: 20rpx;
+      &.active {
+        background-color: #313131 !important;
       }
+    }
 
-      // 正方形
-      &.square .dots-item {
-        width: 16rpx;
-        height: 16rpx;
-      }
+    // 长方形
+    &.rectangle .dots-item {
+      width: 32rpx;
+      height: 16rpx;
+    }
 
-      // 长方形
-      &.rectangle .dots-item {
-        width: 22rpx;
-        height: 14rpx;
-      }
+    // 正方形
+    &.square .dots-item {}
+
+    // 圆形
+    &.round .dots-item {
+      border-radius: 20rpx;
     }
+
   }
 </style>

components/page/diyComponents/hotZone/index.vue

@@ -1,8 +1,8 @@
 <template>
   <!-- 热区 -->
   <view class="diy-hotZone"
-    :style="{ paddingBottom: `${itemStyle.paddingTop * 2}rpx`, background: itemStyle.background }">
-    <view class="bg-image" :style="{ padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx 0` }">
+    :style="{ padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx`, background: itemStyle.background }">
+    <view class="bg-image" :style="{ borderRadius: `${itemStyle.borderRadius * 2}rpx` }">
       <image class="image" :src="data.imgUrl" mode="widthFix"></image>
     </view>
     <view class="zone-item" v-for="(item, index) in data.maps" :key="index"
@@ -44,12 +44,11 @@
 <style lang="scss" scoped>
   .diy-hotZone {
     position: relative;
-    width: 100%;
     overflow: hidden;
   }
 
   .bg-image {
-    width: 100%;
+    overflow: hidden;
     z-index: 1;
 
     .image {
@@ -61,6 +60,5 @@
   .zone-item {
     position: absolute;
     z-index: 2;
-    // background-color: red;
   }
-</style>
+</style>

components/page/diyComponents/image/index.vue

@@ -1,7 +1,9 @@
 <template>
   <!-- 单图组 -->
-  <view class="diy-imageSingle" :style="{ paddingBottom: `${itemStyle.paddingTop * 2}rpx`, background: itemStyle.background }">
-    <view class="item-image" v-for="(dataItem, index) in dataList" :key="index" :style="{ padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx 0` }">
+  <view class="diy-imageSingle"
+    :style="{ padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx`, background: itemStyle.background }">
+    <view class="item-image" v-for="(dataItem, index) in dataList" :key="index"
+      :style="{ marginBottom: `${itemStyle.itemMargin * 2}rpx`, borderRadius: `${itemStyle.borderRadius * 2}rpx` }">
       <view class="nav-to" @click="onLink(dataItem.link)">
         <image class="image" :src="dataItem.imgUrl" mode="widthFix"></image>
       </view>
@@ -13,35 +15,30 @@
   import mixin from '../mixin'
 
   export default {
-    name: "Images",
-
-    /**
-     * 组件的属性列表
-     * 用于组件自定义设置
-     */
     props: {
       itemIndex: String,
       itemStyle: Object,
       params: Object,
       dataList: Array
     },
-
     mixins: [mixin],
-
-    /**
-     * 组件的方法列表
-     * 更新属性和数据的方法与更新页面数据的方法类似
-     */
     methods: {
 
     }
-
   }
 </script>
 
 <style lang="scss" scoped>
-  .diy-imageSingle .item-image .image {
-    display: block;
-    width: 100%;
+  .item-image {
+    overflow: hidden;
+
+    &:last-child {
+      margin-bottom: 0 !important;
+    }
+
+    .image {
+      display: block;
+      width: 100%;
+    }
   }
-</style>
+</style>