fix

assets/style/index.css

@@ -1,4 +1,15 @@
-.banner {
+.index-page h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+  padding: 0;
+}
+.index-page {
+  width: 100%;
+}
+.index-page .banner {
   position: relative;
   width: 100%;
   height: 42.135vw;
@@ -7,7 +18,7 @@
   z-index: 3;
 }
 
-.getApp {
+.index-page .getApp {
   position: relative;
   width: 100%;
   height: 41.67vw;
@@ -16,80 +27,208 @@
   background-size: 100% 100%;
 }
 
-.where {
+.index-page .getApp .where {
   padding-top: 14.58vw;
   margin-left: 12.5vw;
   font-size: 60px;
   color: #242a30;
 }
 
-.answer {
+.index-page .getApp .answer {
   margin-top: 1.18vw;
   margin-left: 12.5vw;
   font-size: 24px;
   color: #959799;
 }
 
-.qrcodebox {
+.index-page .getApp .qrcodebox {
   display: flex;
   margin-top: 4.17vw;
   margin-left: 12.5vw;
 }
 
-.qrcode {
+.index-page .getApp .qrcodebox .qrcode {
   width: 9.375vw;
   height: 9.375vw;
   margin-right: 2.08vw;
 }
 
-.tobox {
+.index-page .getApp .qrcodebox .tobox {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
 
-.ios {
+.index-page .getApp .qrcodebox .tobox .ios {
   width: 6.98vw;
   height: 2.08vw;
   cursor: pointer;
 }
 
-.take-out {
-  width: 100vw;
+.index-page .take-out {
+  width: 100%;
   height: 46.67vw;
   background-color: #fff;
 }
 
-.food-title {
+.index-page .take-out .food-title {
   text-align: center;
   font-size: 60px;
   color: #242a30;
-  margin-top: 10.89vw;
+  padding-top: 10.89vw;
 }
 
-.food-answer {
+.index-page .take-out .food-answer {
   text-align: center;
   font-size: 24px;
   color: #242a30;
   margin-top: 1.18vw;
 }
 
-.take-out-body {
+.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;
 }
 
-.img-box {
+.index-page .take-out .take-out-body .img-box {
   position: relative;
-  margin-left: 7.1875vw;
+  width: 25.781vw;
+  height: 100%;
 }
 
-.take-out-img {
+.index-page .take-out .take-out-body .img-box .take-out-img {
   position: absolute;
   width: 21.46vw;
   height: 21.46vw;
 }
 
-.take-out-people {
+.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 .take-out-body .whiteColor {
+  color: #fff;
+}
+
+.index-page .take-out .take-out-body .blueColor {
+  color: #018cff;
+}
+
+.index-page .take-out .take-out-body .grayColor {
+  color: #242a30;
+}
+
+.index-page .take-out .take-out-body .take-out-title {
+  font-size: 72px;
+  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: 24px;
+  font-weight: 500;
+  width: 15.208vw;
+  letter-spacing: -0.6px;
+  text-shadow: 13.5px 23.38px 54px 0px rgba(3, 3, 3, 0.38);
+}
+
+.index-page .take-out .take-out-body p {
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: -0.4px;
+}
+
+.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/index/map.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.index-page .map h1 {
+  font-size: 72px;
+  font-weight: 400;
+  color: #018cfb;
+  padding-top: 7.708vw;
+  margin-left: 12.448vw;
+}
+
+.index-page .map p {
+  width: 42.71vw;
+  font-size: 24px;
+  font-weight: 500;
+  color: #242a30;
+  line-height: 30px;
+  margin-left: 12.448vw;
+  word-break: break-all;
+}
+
+.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: 24px;
+  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;
+}

index.html

@@ -0,0 +1,74 @@
+<!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/index.css" />
+  </head>
+  <body>
+    <div class="index-page">
+      <div class="box1">
+        <!-- #include file="./components/header1.html" -->
+      </div>
+      <div class="banner"></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="qrcodebox">
+          <img class="qrcode" src="./assets//images/index/qrcode.png" alt="" />
+          <div class="tobox">
+            <img class="ios" src="./assets//images/index/ios.png" alt="" />
+            <img class="ios" src="./assets//images/index/goole.png" alt="" />
+          </div>
+        </div>
+      </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="take-out-body">
+          <div class="img-box">
+            <img class="take-out-img" src="./assets/images/index/take-out-shadow.png" alt="" />
+            <img class="take-out-img take-out-people" src="./assets/images/index/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>
+      <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>
+</html>