细节优化

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

@@ -29,14 +29,14 @@
           :class="{ selected: index === selectedIndex, undrag: inArray(item.type, undragList) }"
           :style="renderItemStyle(item)"
         >
-          <!-- 轮播图 -->
+           <!-- 轮播图 -->
           <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"
+              class="swiper-item"
               v-show="dataIdx <= 1"
               v-for="(dataItem, dataIdx) in item.data"
               :key="`${index}_${dataIdx}_img`"
@@ -45,7 +45,7 @@
               <img class="image" :src="dataItem.imgUrl" />
             </div>
             <div
-              class="dots"
+              class="indicator-dots"
               :class="item.style.btnShape"
               :style="{ '--padding-top': `${item.style.paddingTop}px` }"
             >
@@ -137,7 +137,7 @@
             class="diy-hotZone"
             :style="{ padding: `${item.style.paddingTop}px ${item.style.paddingLeft}px`, background: item.style.background }"
           >
-            <div class="item-image" :style="{ borderRadius: `${item.style.borderRadius}px` }">
+            <div class="bg-image" :style="{ borderRadius: `${item.style.borderRadius}px` }">
               <img class="image" :src="item.data.imgUrl" />
             </div>
           </div>

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

@@ -127,7 +127,7 @@ dl {
       height: auto;
       overflow: hidden;
 
-      .item-image {
+      .swiper-item {
         display: none;
         overflow: hidden;
 
@@ -135,36 +135,39 @@ dl {
         &:first-child {
           display: block;
         }
-      }
 
-      .image {
-        display: block;
-        width: 100%;
+        .image {
+          display: block;
+          width: 100%;
+        }
       }
 
-      .dots {
+      .indicator-dots {
         --padding-top: 0;
         height: 14px;
         padding: 0 10px;
         position: absolute;
         left: 0;
         right: 0;
-        bottom: 10px;
-        bottom: calc(var(--padding-top)  + 10px);
+        bottom: calc(var(--padding-top) + 10px);
         opacity: 0.8;
         display: flex;
         justify-content: center;
         align-items: center;
 
-
-        &-item {
+        .dots-item {
           margin-right: 4px;
-          height: 10px;
-          width: 10px;
+          height: 8px;
+          width: 8px;
+          background-color: #fff;
 
           &:last-child {
             margin-right: 0;
           }
+
+          &.active {
+            background-color: #313131 !important;
+          }
         }
 
         &.rectangle {
@@ -175,15 +178,11 @@ dl {
         }
 
         &.square {
-          .dots-item {
-            // width: 10px;
-          }
+          .dots-item {}
         }
 
         &.round {
           .dots-item {
-            // height: 10px;
-            // width: 10px;
             border-radius: 10px;
           }
         }
@@ -468,24 +467,16 @@ dl {
 
     // 热区组
     .diy-hotZone {
-      display: block;
-      margin: 0;
-      padding: 0;
-      height: auto;
-      overflow: hidden;
 
-      .item-image {
+      .bg-image {
         overflow: hidden;
+        z-index: 1;
 
-        &:last-child {
-          margin-bottom: 0 !important;
+        .image {
+          display: block;
+          width: 100%;
         }
       }
-
-      .image {
-        display: block;
-        width: 100%;
-      }
     }
 
     // 商品组