修改首页样式

README.md

@@ -7,3 +7,5 @@
 swiper 
 
 周四专享 顺序位
+
+首页切图
\ No newline at end of file

index.html

@@ -10,6 +10,8 @@
     content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover" />
   <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>
 
+  <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.1/swiper-bundle.min.js"></script>
+  <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.1/swiper-bundle.min.css" rel="stylesheet">
   <!-- 这里是浏览器适配 -->
   <script>
     !(function (e, i) {
@@ -212,24 +214,25 @@
   <!-- 首页样式 -->
   <style>
     .independent {
-      width: 6.89rem;
+      width: 7.06rem;
       position: absolute;
       pointer-events: auto;
-      left: 50%;transform: translateX(-50%);
+      left: 50%;
+      transform: translateX(-50%);
       border-radius: 0.15rem;
       height: 2rem;
     }
 
     .huadongrequ {
-      top: 1.55rem;
-      height: 1.8rem;
+      top: .2rem;
+      height: 1.85rem;
     }
 
     .remenhuodong {
-      top: 4.35rem;
+      top: 3.1rem;
     }
     .change-place {
-      top: 6.32rem;
+      top: 5.32rem;
       position: absolute;
       width: 7.5rem;
       height: 6rem;
@@ -291,13 +294,13 @@
     }
     .bottom-container {
       position: absolute;
-      top: 15.4rem;
+      top: 14.3rem;
       width: 7.5rem;
       height: 9.8rem;
     }
     .shape {
       position: absolute;
-      width: 3.3rem;
+      width: 3.37rem;
       height: 1.65rem;
       border-radius: .15rem;
     }
@@ -305,7 +308,7 @@
       left: .32rem;
     }
     .right-shape {
-      right: .32rem;
+      right: .2rem;
     }
     .top-55 {
       top: .55rem;
@@ -326,10 +329,15 @@
       left: .3rem;
     }
     .center-square {
-      left: 2.7rem;
+      left: 2.8rem;
     }
     .right-square {
-      right: .32rem;
+      right: .25rem;
+    }
+    .swiper-img {
+      width: 100%;
+      height: 100%;
+      object-fit:contain;
     }
   </style>
   <!-- 二级页面 每日品牌好券 -->
@@ -437,16 +445,23 @@
       <div class="bgBox">
         <img class="bg" src="home_bg.png" />
       </div>
-
       <!-- 滑动热区 -->
-      <div class="independent huadongrequ"></div>
+      <div class="independent huadongrequ swiper-container">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <img class="swiper-img" src="baner_card.png" alt="" srcset="">
+          </div>
+          <div class="swiper-slide">255</div>
+          <div class="swiper-slide">277772</div>
+        </div>
+      </div>
       <!-- 热门活动 -->
       <div onclick="jumpUrl('home',7)" class="independent remenhuodong"></div>
       <!-- 位置可换的div -->
       <div class="change-place">
         <!-- 周四专享 -->
         <div class="zhousizhuanxiang" id="thursday_top">
-          <img src="./mode_thursday.png">
+          <img src="mode_thursday.png">
           <span class="btn-click" onclick="showPop('ThursdayPage')"></span>
         </div>
         <!-- 精选大牌 -->
@@ -461,7 +476,7 @@
         </div>
         <!-- 周四专享 -->
         <div class="zhousizhuanxiang" id="thursday_bottom">
-          <img src="./mode_thursday.png">
+          <img src="mode_thursday.png">
           <span class="btn-click" onclick="showPop('ThursdayPage')"></span>
         </div>
       </div>
@@ -541,7 +556,25 @@
   </div>
 </body>
 
+<!-- 初始化swiper相关 -->
 <script>
+
+var swiper = new Swiper('.huadongrequ', {
+  autoplay: true,
+  delay: 3000,
+  loop: true,
+    on: {
+      slideChangeTransitionStart: async (e) => {
+        console.log('onSlideChange ', e.realIndex)
+      },
+    }
+  })
+</script>
+
+<script>
+
+  console.log('swiper',Swiper)
+
   // 这里进行星期四判断 只做顺序
   const thursday_top = document.getElementById("thursday_top");
   const thursday_bottom = document.getElementById("thursday_bottom");