feature: 调整首页banner UI

pages/index/index.wxml

@@ -8,12 +8,11 @@
       <view style="font-size: 32rpx; color: #333333; margin-top: 14rpx;">{{greeting}}</view>
 
       <!-- banner -->
-      <view wx:if="{{bannerList.length>0}}" class="banner_container">
-
-        <swiper class="swiper" indicator-dots="{{bannerList.length>1}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-active-color="#FFFFFF" indicator-color="#999999">
+      <view wx:if="{{bannerList.length>0}}" class="banner_container" style="width: calc(100vw - 64rpx);   border-radius: 16rpx;">
+        <swiper style="width: calc(100vw - 64rpx);   border-radius: 16rpx;" indicator-dots="{{bannerList.length>1}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-active-color="#FFFFFF" indicator-color="#999999">
           <block wx:for="{{bannerList}}" wx:key="index">
-            <swiper-item>
-              <image mode="widthFix" class="swiper_image" src="{{item.pic}}" data-item="{{item}}" bind:tap="onTapBanner" />
+            <swiper-item style="width: calc(100vw - 64rpx); border-radius: 16rpx;">
+              <image class="banner_item" style="width: calc(100vw - 64rpx);   border-radius: 16px;" src="{{item.pic}}" mode="aspectFill" bindtap="onTapBanner" data-item="{{item}}" lazy-load="true"></image>
             </swiper-item>
           </block>
         </swiper>

pages/index/index.wxss

@@ -115,7 +115,6 @@
   position: absolute;
   top: 14rpx;
   left: 20rpx;
-  width: 48rpx;
   height: 48rpx;
 }
 
@@ -729,23 +728,14 @@
 
 /************************ banner ************************/
 .banner_container {
-  width: 100%;
-  height: 264rpx;
-  margin-top: 32rpx;
-  /* 根据需要调整高度 */
-  overflow: hidden;
-  position: relative;
-  border-radius: 16rpx;
+  margin-top: 24rpx;
+  height: 270rpx;
+  background-color: transparent;
 }
 
-.swiper {
-  width: 100%;
-  height: 264rpx;
-}
-
-.swiper_image {
-  width: 100%;
-  display: block;
+.banner_item {
+  height: 270rpx;
+  background-color: transparent;
 }
 
 /* 设置指示点的大小和颜色 */
@@ -774,12 +764,11 @@
   /* 当前选中指示点的高度（可以比未选中时稍大） */
 }
 
-
 .add_device_public {
   background-color: #6546A3;
   width: 80vw;
   height: 88rpx;
-  margin-top: 64rpx;
+  margin-top: 32rpx;
   margin-left: 5%;
   border-radius: 72rpx;
   display: flex;