fix

assets/js/common/index.js

@@ -2,18 +2,32 @@
 import 'http://code.jquery.com/jquery-2.1.1.min.js'
 //轮播图
 import Swiper from 'https://unpkg.com/swiper@8/swiper-bundle.esm.browser.min.js'
-window.Swiper = Swiper;
+window.Swiper = Swiper
 
 /**
  * 执行动画
  * @param ele 元素的选择器
  * @description 如果元素滚动至距离底部150px以上，添加css动效
  */
-window.showAnimate = function (ele,className){
-    //监听页面滚动
-    window.onscroll = function(event){
-        if($(ele).offset().top <= $(window).height() + $(window).scrollTop() - 150){
-            $(ele).addClass(className);
-        }
+window.showAnimate = function (ele, className) {
+  //监听页面滚动
+  window.onscroll = function (event) {
+    if ($(ele).offset().top <= $(window).height() + $(window).scrollTop() - 150) {
+      $(ele).addClass(className)
     }
+  }
 }
+
+let swiper = new Swiper('#swiper1', {
+  pagination: {
+    el: '.swiper-pagination',
+  },
+  loop: true, //循环
+  observer: true, //修改swiper自己或子元素时，自动初始化swiper
+  observeParents: true, //修改swiper的父元素时，自动初始化swiper
+  speed: 500,
+  autoplay: {
+    disableOnInteraction: false, //触碰后自动轮播也不会停止
+    delay: 3000,
+  },
+})

assets/style/home/index.css

@@ -50,14 +50,12 @@ p {
 .index-page .getApp .where {
   padding-top: 14.58vw;
   margin-left: 12.5vw;
-  font-size: 3.125vw;
   color: #242a30;
 }
 
 .index-page .getApp .answer {
   margin-top: 1.18vw;
   margin-left: 12.5vw;
-  font-size: 1.25vw;
   color: #959799;
 }
 
@@ -67,6 +65,10 @@ p {
   margin-left: 12.5vw;
 }
 
+.index-page .getApp .app {
+  display: none;
+}
+
 .index-page .getApp .qrcodebox .qrcode {
   width: 9.375vw;
   height: 9.375vw;
@@ -93,18 +95,20 @@ p {
 
 .index-page .take-out .food-title {
   text-align: center;
-  font-size: 60px;
   color: #242a30;
   padding-top: 10.89vw;
 }
 
 .index-page .take-out .food-answer {
   text-align: center;
-  font-size: 1.25vw;
   color: #242a30;
   margin-top: 1.18vw;
 }
 
+.index-page .take-out .take-out-body .take-out-imgs {
+  display: none;
+}
+
 .index-page .take-out .take-out-body {
   margin-top: 1.18vw;
   height: 21.46vw;
@@ -144,15 +148,15 @@ p {
   transform: translateY(-50%);
 }
 
-.index-page .take-out .take-out-body .whiteColor {
+.index-page .take-out .whiteColor {
   color: #fff;
 }
 
-.index-page .take-out .take-out-body .blueColor {
+.index-page .take-out .blueColor {
   color: #018cff;
 }
 
-.index-page .take-out .take-out-body .grayColor {
+.index-page .take-out .grayColor {
   color: #242a30;
 }
 
@@ -258,12 +262,16 @@ p {
 }
 
 @media screen and (max-width: 960px) {
+  /* 750 */
   .font72 {
     font-size: 9.6vw;
   }
   .font60 {
     font-size: 8vw;
   }
+  .font48 {
+    font-size: 6.4vw;
+  }
   .font24 {
     font-size: 3.2vw;
   }
@@ -272,4 +280,90 @@ p {
     background: url('../../images//home/phone/banner-pho.png') no-repeat;
     background-size: 100% 100%;
   }
+
+  .index-page .getApp {
+    height: 66.67vw;
+    background: url('../../images//home/phone/getApp.png') no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .index-page .getApp .whereapp {
+    width: 53.33vw;
+    word-break: break-all;
+  }
+
+  .index-page .getApp .where,
+  .index-page .getApp .answer {
+    margin-left: 4vw;
+    color: #242a30;
+  }
+
+  .index-page .getApp .qrcodebox {
+    margin-left: 4vw;
+  }
+
+  .index-page .getApp .qrcodebox .qrcode {
+    width: 18.67vw;
+    height: 18.67vw;
+  }
+
+  .index-page .getApp .qrcodebox .tobox .ios {
+    width: 33.33vw;
+    height: 8.27vw;
+  }
+
+  .index-page .getApp .app {
+    position: absolute;
+    display: block;
+    bottom: 0;
+    right: 0;
+    width: 39.6vw;
+    height: 59.87vw;
+  }
+
+  .index-page .take-out {
+    position: relative;
+    height: 112.8vw;
+  }
+
+  .index-page .take-out .food-title {
+    margin-left: 4vw;
+    text-align: left;
+  }
+
+  .index-page .take-out .food-answer {
+    margin-left: 4vw;
+    text-align: left;
+  }
+
+  .index-page .take-out .take-out-body {
+    display: none;
+  }
+
+  .index-page .take-out .take-out-imgs {
+    display: block;
+    position: relative;
+  }
+
+  .index-page .take-out .take-out-imgs .take-out-img {
+    position: absolute;
+    width: 50.67vw;
+    height: 50.67vw;
+    top: 4vw;
+    right: 16.53vw;
+  }
+
+  .index-page .take-out .take-out-imgs .take-out-people {
+    right: 6.4vw;
+  }
+
+  .index-page .take-out .swiper {
+    margin-top: 44.27vw;
+    margin-left: 4vw;
+  }
+
+  .index-page .take-out .swiper .img-info {
+    width: 55.33vw;
+    word-break: break-all;
+  }
 }

index.html

@@ -17,8 +17,10 @@
         <div class="font24">Asian food delivery platform</div>
       </div>
       <div class="getApp">
-        <div class="where">Have you got the app?</div>
-        <div class="answer">Get yours now-available on the iOS and Android app stores!</div>
+        <div class="whereapp">
+          <div class="where font60">Have you got the app?</div>
+          <div class="answer font24">Get yours now-available on the iOS and Android app stores!</div>
+        </div>
         <div class="qrcodebox">
           <img class="qrcode" src="./assets//images/home/qrcode.png" alt="" />
           <div class="tobox">
@@ -26,10 +28,15 @@
             <img class="ios" src="./assets//images/home/goole.png" alt="" />
           </div>
         </div>
+        <img class="app" src="./assets/images/home/phone/app.png" alt="" />
       </div>
       <div class="take-out">
-        <div class="food-title">Hungry for more than food?</div>
-        <div class="food-answer">Operating in 10 Countries Around the World</div>
+        <div class="food-title font60 font48">Hungry for more than food?</div>
+        <div class="food-answer font24">Operating in 10 Countries Around the World</div>
+        <div class="take-out-imgs">
+          <img class="take-out-img" src="./assets/images/home/take-out-shadow.png" alt="" />
+          <img class="take-out-img take-out-people" src="./assets/images/home/take-out-people.png" alt="" />
+        </div>
         <div class="take-out-body">
           <div class="img-box">
             <img class="take-out-img" src="./assets/images/home/take-out-shadow.png" alt="" />
@@ -54,6 +61,27 @@
             <div class="toway blueColor">Ride with us</div>
           </div>
         </div>
+        <div id="swiper1" class="swiper">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <div class="img-info">
+                <h1 class="take-out-title whiteColor">Deliver</h1>
+                <div class="about whiteColor">with HungryPanda</div>
+                <p class="whiteColor">On your schedule and on your own terms with considerable bonus.</p>
+                <div class="toway whiteColor">Ride with us</div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="img-info">
+                <h1 class="take-out-title blueColor">Partner</h1>
+                <div class="about blueColor">with HungryPanda</div>
+                <p class="grayColor">To discover new digitalized operation model to attract more consumers.</p>
+                <div class="toway blueColor">Ride with us</div>
+              </div>
+            </div>
+          </div>
+          <div class="swiper-pagination"></div>
+        </div>
       </div>
       <div class="map">
         <h1>Asian Flavor Everywhere</h1>