更新代码

about_us.html

@@ -103,6 +103,7 @@
             <div class="card">
                 <div class="split"></div>
                 <div class="dot"></div>
+                <img class="logo" src="./assets/images/common/logo3.png" />
                 <div class="card-title">2021</div>
                 <div class="list">
                     <div class="name">April1</div>
@@ -116,6 +117,7 @@
             <div class="card">
                 <div class="split"></div>
                 <div class="dot"></div>
+                <img class="logo" src="./assets/images/common/logo3.png" />
                 <div class="card-title">2021</div>
                 <div class="list">
                     <div class="name">April2</div>
@@ -129,6 +131,7 @@
             <div class="card">
                 <div class="split"></div>
                 <div class="dot"></div>
+                <img class="logo" src="./assets/images/common/logo3.png" />
                 <div class="card-title">2021</div>
                 <div class="list">
                     <div class="name">April3</div>
@@ -142,6 +145,7 @@
             <div class="card">
                 <div class="split"></div>
                 <div class="dot"></div>
+                <img class="logo" src="./assets/images/common/logo3.png" />
                 <div class="card-title">2021</div>
                 <div class="list">
                     <div class="name">April4</div>
@@ -155,6 +159,7 @@
             <div class="card">
                 <div class="split"></div>
                 <div class="dot"></div>
+                <img class="logo" src="./assets/images/common/logo3.png" />
                 <div class="card-title">2021</div>
                 <div class="list">
                     <div class="name">April5</div>
@@ -168,6 +173,7 @@
             <div class="card">
                 <div class="split"></div>
                 <div class="dot"></div>
+                <img class="logo" src="./assets/images/common/logo3.png" />
                 <div class="card-title">2021</div>
                 <div class="list">
                     <div class="name">April6</div>
@@ -181,6 +187,7 @@
             <div class="card">
                 <div class="split"></div>
                 <div class="dot"></div>
+                <img class="logo" src="./assets/images/common/logo3.png" />
                 <div class="card-title">2021</div>
                 <div class="list">
                     <div class="name">April7</div>
@@ -259,7 +266,7 @@
     <!--头部-->
     <!--#include file="./components/footer1.html"-->
 </div>
-<script type="module" src="./assets/js/common/index.js" defer></script>
+<script type="module" src="./assets/js/common/index.js"></script>
 <script src="./assets/js/about_us/index.js" defer></script>
 </body>
 </html>

assets/js/common/index.js

@@ -11,11 +11,25 @@ import 'https://cdn.staticfile.org/bootstrap/5.1.3/js/bootstrap.min.js';
  * @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

@@ -0,0 +1,369 @@
+.index-page h1,
+h2,
+h3,
+h4,
+h5,
+p {
+  margin: 0;
+  padding: 0;
+}
+.font72 {
+  font-size: 3.75vw;
+}
+.font60 {
+  font-size: 3.125vw;
+}
+.font24 {
+  font-size: 1.25vw;
+}
+.index-page {
+  width: 100%;
+}
+.index-page .banner {
+  position: relative;
+  width: 100%;
+  height: 42.135vw;
+  background: url('../../images/home/banner.png') no-repeat;
+  background-size: 100% 100%;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+}
+
+.index-page .banner p {
+  margin-bottom: 0.76vw;
+  letter-spacing: -1.5px;
+}
+
+.index-page .getApp {
+  position: relative;
+  width: 100%;
+  height: 41.67vw;
+  margin-top: -5.73vw;
+  background: url('../../images/home/getApp.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.index-page .getApp .where {
+  padding-top: 14.58vw;
+  margin-left: 12.5vw;
+  color: #242a30;
+}
+
+.index-page .getApp .answer {
+  margin-top: 1.18vw;
+  margin-left: 12.5vw;
+  color: #959799;
+}
+
+.index-page .getApp .qrcodebox {
+  display: flex;
+  margin-top: 4.17vw;
+  margin-left: 12.5vw;
+}
+
+.index-page .getApp .app {
+  display: none;
+}
+
+.index-page .getApp .qrcodebox .qrcode {
+  width: 9.375vw;
+  height: 9.375vw;
+  margin-right: 2.08vw;
+}
+
+.index-page .getApp .qrcodebox .tobox {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.index-page .getApp .qrcodebox .tobox .ios {
+  width: 6.98vw;
+  height: 2.08vw;
+  cursor: pointer;
+}
+
+.index-page .take-out {
+  width: 100%;
+  height: 46.67vw;
+  background-color: #fff;
+}
+
+.index-page .take-out .food-title {
+  text-align: center;
+  color: #242a30;
+  padding-top: 10.89vw;
+}
+
+.index-page .take-out .food-answer {
+  text-align: center;
+  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;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 7.1875vw;
+  margin-right: 12.5vw;
+}
+
+.index-page .take-out .take-out-body .img-box {
+  position: relative;
+  width: 25.781vw;
+  height: 100%;
+}
+
+.index-page .take-out .take-out-body .img-box .take-out-img {
+  position: absolute;
+  width: 21.46vw;
+  height: 21.46vw;
+}
+
+.index-page .take-out .take-out-body .img-box .take-out-people {
+  position: absolute;
+  left: 4.17vw;
+}
+
+.index-page .take-out .take-out-body .img-info {
+  width: 17.5vw;
+  word-break: break-all;
+}
+
+.index-page .take-out .take-out-body .take-out-img-info {
+  position: absolute;
+  left: 5.3125vw;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.index-page .take-out .whiteColor {
+  color: #fff;
+}
+
+.index-page .take-out .blueColor {
+  color: #018cff;
+}
+
+.index-page .take-out .grayColor {
+  color: #242a30;
+}
+
+.index-page .take-out .take-out-body .take-out-title {
+  font-size: 3.75vw;
+  text-shadow: 13.5px 23.38px 54px 0px rgba(3, 3, 3, 0.38);
+  font-weight: 500;
+}
+
+.index-page .take-out .take-out-body .about {
+  font-size: 1.25vw;
+  font-weight: 500;
+  width: 15.208vw;
+  letter-spacing: -0.6px;
+  text-shadow: 13.5px 23.38px 54px 0px rgba(3, 3, 3, 0.38);
+  margin-bottom: 1.82vw;
+}
+
+.index-page .take-out .take-out-body p {
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: -0.4px;
+  margin-bottom: 2.19vw;
+}
+
+.index-page .take-out .take-out-body .toway {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.index-page .map {
+  width: 100%;
+  height: 56.25vw;
+  background: url('../../images/home/map.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.index-page .map h1 {
+  font-size: 3.75vw;
+  font-weight: 400;
+  color: #018cfb;
+  padding-top: 7.708vw;
+  margin-left: 12.448vw;
+}
+
+.index-page .map p {
+  width: 42.71vw;
+  font-size: 1.25vw;
+  font-weight: 500;
+  color: #242a30;
+  line-height: 30px;
+  margin-left: 12.448vw;
+  word-break: break-all;
+  margin-bottom: 3.125vw;
+  margin-top: 1.35vw;
+}
+
+.index-page .map .select {
+  position: relative;
+  width: 17.97vw;
+  margin-left: 12.448vw;
+}
+
+.index-page .map .select .select-btn {
+  position: absolute;
+  width: 100%;
+  height: 2.81vw;
+  background: linear-gradient(270deg, #00a8ff 0%, #008cff 100%);
+  box-shadow: 7.98px 15.01px 32px 0px #d3e1ef;
+  border-radius: 12px;
+  cursor: pointer;
+  text-align: center;
+  line-height: 2.81vw;
+  color: #fff;
+  font-size: 1.25vw;
+  font-weight: 600;
+  z-index: 3;
+}
+
+.index-page .map .select .pull-box {
+  position: absolute;
+  top: 2.81vw;
+  left: 0;
+  width: 100%;
+  height: 15.1vw;
+  background: #ffffff;
+  border-radius: 0 0 12px 10px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.index-page .map .select .pull-box .pull-item {
+  height: 2.55vw;
+  line-height: 2.55vw;
+  padding-left: 2.08vw;
+  border-bottom: 1px solid #f3f5f7;
+  color: #018cff;
+  font-weight: 700;
+}
+
+.index-page .map .select .pull-box .pull-item:last-child {
+  border: none;
+}
+
+@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;
+  }
+  .index-page .banner {
+    height: 89.2vw;
+    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;
+  }
+}

assets/style/index.css

@@ -1,95 +0,0 @@
-.banner {
-  position: relative;
-  width: 100%;
-  height: 42.135vw;
-  background: url('../images//index/banner.png') no-repeat;
-  background-size: 100% 100%;
-  z-index: 3;
-}
-
-.getApp {
-  position: relative;
-  width: 100%;
-  height: 41.67vw;
-  margin-top: -5.73vw;
-  background: url('../images//index/getApp.png') no-repeat;
-  background-size: 100% 100%;
-}
-
-.where {
-  padding-top: 14.58vw;
-  margin-left: 12.5vw;
-  font-size: 60px;
-  color: #242a30;
-}
-
-.answer {
-  margin-top: 1.18vw;
-  margin-left: 12.5vw;
-  font-size: 24px;
-  color: #959799;
-}
-
-.qrcodebox {
-  display: flex;
-  margin-top: 4.17vw;
-  margin-left: 12.5vw;
-}
-
-.qrcode {
-  width: 9.375vw;
-  height: 9.375vw;
-  margin-right: 2.08vw;
-}
-
-.tobox {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-}
-
-.ios {
-  width: 6.98vw;
-  height: 2.08vw;
-  cursor: pointer;
-}
-
-.take-out {
-  width: 100vw;
-  height: 46.67vw;
-  background-color: #fff;
-}
-
-.food-title {
-  text-align: center;
-  font-size: 60px;
-  color: #242a30;
-  margin-top: 10.89vw;
-}
-
-.food-answer {
-  text-align: center;
-  font-size: 24px;
-  color: #242a30;
-  margin-top: 1.18vw;
-}
-
-.take-out-body {
-  margin-top: 1.18vw;
-}
-
-.img-box {
-  position: relative;
-  margin-left: 7.1875vw;
-}
-
-.take-out-img {
-  position: absolute;
-  width: 21.46vw;
-  height: 21.46vw;
-}
-
-.take-out-people {
-  position: absolute;
-  left: 4.17vw;
-}

index.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>首页</title>
+    <link rel="stylesheet" href="./assets/style/common/index.css" />
+    <link rel="stylesheet" href="./assets/style/home/index.css" />
+  </head>
+  <body>
+    <!--#include file="./components/header1.html"-->
+    <div class="index-page">
+      <div class="banner">
+        <p class="font60">Asian Cuisine</p>
+        <p class="font60">With' The Taste Of Home</p>
+        <div class="font24">Asian food delivery platform</div>
+      </div>
+      <div class="getApp">
+        <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">
+            <img class="ios" src="./assets//images/home/ios.png" alt="" />
+            <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 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="" />
+            <img class="take-out-img take-out-people" src="./assets/images/home/take-out-people.png" alt="" />
+            <div class="img-info take-out-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="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 class="img-info">
+            <h1 class="take-out-title blueColor">Working</h1>
+            <div class="about blueColor">with HungryPanda</div>
+            <p class="grayColor">To achieve your ambition with passion, creation and cooperation.</p>
+            <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>
+        <p>Choosing from over 60,000 restaurants across 10 countries, to enjoy the authentic Asian flavors.</p>
+        <div class="select">
+          <div class="select-btn">Australia</div>
+          <div class="pull-box">
+            <div class="pull-item">Sydney</div>
+            <div class="pull-item">Sydney</div>
+            <div class="pull-item">Sydney</div>
+            <div class="pull-item">Sydney</div>
+            <div class="pull-item">Sydney</div>
+            <div class="pull-item">Sydney</div>
+            <div class="pull-item">Sydney</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+  <script type="module" src="./assets/js/common/index.js" defer></script>
+</html>