fix

assets/style/home/index.css

@@ -105,7 +105,8 @@ p {
   margin-top: 1.18vw;
 }
 
-.index-page .take-out .take-out-body .take-out-imgs {
+.index-page .take-out .take-out-imgs,
+.index-page .take-out .swiper {
   display: none;
 }
 
@@ -187,6 +188,10 @@ p {
   font-weight: 700;
 }
 
+.index-page .every {
+  display: none;
+}
+
 .index-page .map {
   width: 100%;
   height: 56.25vw;
@@ -194,6 +199,10 @@ p {
   background-size: 100% 100%;
 }
 
+.index-page .maph5 {
+  display: none;
+}
+
 .index-page .map h1 {
   font-size: 3.75vw;
   font-weight: 400;
@@ -237,6 +246,7 @@ p {
 }
 
 .index-page .map .select .pull-box {
+  display: none;
   position: absolute;
   top: 2.81vw;
   left: 0;
@@ -263,6 +273,9 @@ p {
 
 @media screen and (max-width: 960px) {
   /* 750 */
+  .font100 {
+    font-size: 13.33vw;
+  }
   .font72 {
     font-size: 9.6vw;
   }
@@ -272,6 +285,9 @@ p {
   .font48 {
     font-size: 6.4vw;
   }
+  .font36 {
+    font-size: 4.8vw;
+  }
   .font24 {
     font-size: 3.2vw;
   }
@@ -324,6 +340,7 @@ p {
   .index-page .take-out {
     position: relative;
     height: 112.8vw;
+    padding-bottom: 10.67vw;
   }
 
   .index-page .take-out .food-title {
@@ -358,12 +375,106 @@ p {
   }
 
   .index-page .take-out .swiper {
+    display: block;
     margin-top: 44.27vw;
     margin-left: 4vw;
   }
 
   .index-page .take-out .swiper .img-info {
     width: 55.33vw;
+    padding-bottom: 8vw;
+    word-break: break-all;
+  }
+
+  .index-page .take-out .swiper .img-info .about {
+    margin-top: 2.4vw;
+    margin-bottom: 2.93vw;
+  }
+
+  .index-page .take-out .swiper .img-info .grayColor {
+    color: #282828;
+  }
+  .swiper-horizontal > .swiper-pagination-bullets,
+  .swiper-pagination-bullets.swiper-pagination-horizontal,
+  .swiper-pagination-custom,
+  .swiper-pagination-fraction {
+    bottom: 0;
+  }
+
+  .index-page .every {
+    display: block;
+    padding: 9.33vw 8.8vw 7.33vw 4vw;
+    background: #f7f7f7;
+  }
+
+  .index-page .every .title {
+    font-family: NexaBold, NexaBold-Regular;
+    font-weight: 400;
+    color: #282828;
+    letter-spacing: -2.4px;
+    margin-bottom: 2.67vw;
+  }
+
+  .index-page .every .content {
+    color: #282828;
+    letter-spacing: -0.24px;
     word-break: break-all;
+    font-weight: 400;
+    font-family: EuclidSquare, EuclidSquare-Regular;
+  }
+
+  .index-page .map {
+    display: none;
+  }
+
+  .index-page .maph5 {
+    display: block;
+    width: 100%;
+  }
+
+  .index-page .maph5 .head-maph5 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 12.4vw;
+    background: #3a9ff2;
+    color: #ffffff;
+    font-family: Gilroy, Gilroy-Bold;
+    font-weight: 700;
+    padding-left: 3.73vw;
+    padding-right: 4vw;
+    box-sizing: border-box;
+  }
+
+  .index-page .maph5 .head-maph5 .select {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 9.07vw;
+    height: 9.07vw;
+    border: 0.53vw solid #ffffff;
+    border-radius: 1.6vw;
+  }
+
+  .index-page .maph5 .head-maph5 .select .open {
+    width: 2.27vw;
+    height: 1.47vw;
+  }
+
+  .index-page .maph5 .map-bg {
+    width: 100%;
+    height: 90.67vw;
+    padding-top: 6.4vw;
+    background: url('../../images/home/phone/map-bg-pho.png') no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .index-page .maph5 .map-bg .map-img {
+    width: 88.4vw;
+    height: 42.27vw;
+    margin: 0 auto;
+    background: url('../../images/home/phone/map-pho.png') no-repeat;
+    background-size: 100% 100%;
   }
 }

index.html

@@ -16,6 +16,7 @@
         <p class="font60">With' The Taste Of Home</p>
         <div class="font24">Asian food delivery platform</div>
       </div>
+      <!-- app下载方式 -->
       <div class="getApp">
         <div class="whereapp">
           <div class="where font60">Have you got the app?</div>
@@ -61,28 +62,37 @@
             <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>
+                <h1 class="take-out-title blueColor font100">Deliver</h1>
+                <div class="about font48">with HungryPanda</div>
+                <p class="grayColor font24">On your schedule and on your own terms with considerable bonus.</p>
               </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>
+                <h1 class="take-out-title blueColor font100">Partner</h1>
+                <div class="about font48">with HungryPanda</div>
+                <p class="grayColor font24">To discover new digitalized operation model to attract more consumers.</p>
               </div>
             </div>
           </div>
           <div class="swiper-pagination"></div>
         </div>
       </div>
+
+      <!-- 移动端 -->
+      <div class="every">
+        <div class="title font48">Asian Flavor Everywhere</div>
+        <div class="content font24">
+          Choosing from over 60,000 restaurants across 10 countries, to enjoy the authentic Asian flavors.
+        </div>
+      </div>
+
+      <!-- 地图 -->
       <div class="map">
         <h1>Asian Flavor Everywhere</h1>
         <p>Choosing from over 60,000 restaurants across 10 countries, to enjoy the authentic Asian flavors.</p>
@@ -99,6 +109,18 @@
           </div>
         </div>
       </div>
+      <!-- 移动端地图 -->
+      <div class="maph5">
+        <div class="head-maph5 font36">
+          <div class="country">Australia</div>
+          <div class="select">
+            <img class="open" src="./assets/images/home/phone/open.png" alt="" />
+          </div>
+        </div>
+        <div class="map-bg">
+          <div class="map-img"></div>
+        </div>
+      </div>
     </div>
   </body>
   <script type="module" src="./assets/js/common/index.js" defer></script>