fix

assets/js/header1/index.js

@@ -1,26 +1,26 @@
 //监听页面滚动
-$(window).scroll(function(event){
-    let winTop = $(window).scrollTop();
-    if(winTop>50){
-        $('.header1-page').addClass('bg')
-    }else{
-        $('.header1-page').removeClass('bg')
-    }
-});
+$(window).scroll(function (event) {
+  let winTop = $(window).scrollTop()
+  if (winTop > 50) {
+    $('.header1-page').addClass('bg')
+  } else {
+    $('.header1-page').removeClass('bg')
+  }
+})
 
-var showFullscreenState = false;
-function setFullscreenState(){
-    showFullscreenState = !showFullscreenState;
-    if(showFullscreenState){
-        $(window).scrollTop(0);
-    }
-    $('.full-screen').css({
-        'display': showFullscreenState?'block':'none'
-    })
-    $('body').css({
-        'overflow': showFullscreenState?'hidden':'auto'
-    })
-    $('body').css({
-        'position': showFullscreenState?'fixed':'unset'
-    })
+var showFullscreenState = false
+function setFullscreenState() {
+  showFullscreenState = !showFullscreenState
+  if (showFullscreenState) {
+    $(window).scrollTop(0)
+  }
+  $('.full-screen').css({
+    display: showFullscreenState ? 'block' : 'none',
+  })
+  $('body').css({
+    overflow: showFullscreenState ? 'hidden' : 'auto',
+  })
+  $('body').css({
+    position: showFullscreenState ? 'fixed' : 'unset',
+  })
 }

assets/js/home/index.js

@@ -0,0 +1,57 @@
+$(function () {
+  //轮播图
+  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,
+    },
+  })
+
+  $('.index-page .take-out .take-out-body .img-box1 .img-info').hover(
+    function () {
+      $('.index-page .take-out .take-out-body .img-box1 .take-out-img').fadeToggle()
+      $('.index-page .take-out .take-out-body .img-box1').addClass('whiteColor')
+      $('.index-page .take-out .take-out-body .img-box1 .img-info p').addClass('whiteColor')
+    },
+    function () {
+      $('.index-page .take-out .take-out-body .img-box1 .take-out-img').fadeToggle()
+      $('.index-page .take-out .take-out-body .img-box1').removeClass('whiteColor')
+      $('.index-page .take-out .take-out-body .img-box1 .img-info p').removeClass('whiteColor')
+    }
+  )
+  $('.index-page .take-out .take-out-body .img-box2 .img-info').hover(
+    function () {
+      $('.index-page .take-out .take-out-body .img-box2 .take-out-img').fadeToggle()
+      $('.index-page .take-out .take-out-body .img-box2').addClass('whiteColor')
+      $('.index-page .take-out .take-out-body .img-box2 .img-info p').addClass('whiteColor')
+    },
+    function () {
+      $('.index-page .take-out .take-out-body .img-box2 .take-out-img').fadeToggle()
+      $('.index-page .take-out .take-out-body .img-box2').removeClass('whiteColor')
+      $('.index-page .take-out .take-out-body .img-box2 .img-info p').removeClass('whiteColor')
+    }
+  )
+  $('.index-page .take-out .take-out-body .img-box3 .img-info').hover(
+    function () {
+      $('.index-page .take-out .take-out-body .img-box3 .take-out-img').fadeToggle()
+      $('.index-page .take-out .take-out-body .img-box3').addClass('whiteColor')
+      $('.index-page .take-out .take-out-body .img-box3 .img-info p').addClass('whiteColor')
+    },
+    function () {
+      $('.index-page .take-out .take-out-body .img-box3 .take-out-img').fadeToggle()
+      $('.index-page .take-out .take-out-body .img-box3').removeClass('whiteColor')
+      $('.index-page .take-out .take-out-body .img-box3 .img-info p').removeClass('whiteColor')
+    }
+  )
+
+  $('.index-page .map .select .select-btn').click(function () {
+    $('.index-page .map .select .pull-box').fadeToggle()
+  })
+})

assets/style/contact_us/index.css

@@ -0,0 +1,74 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+p {
+  margin: 0;
+  padding: 0;
+}
+.contact_us {
+  width: 100%;
+}
+
+.font40 {
+  font-size: 2.08vw;
+}
+
+.font24 {
+  font-size: 1.25vw;
+}
+
+.contact_us .blueColor {
+  color: #018cff;
+}
+
+.contact_us .grayColor {
+  color: #818391;
+}
+
+.contact_us .header {
+  width: 100%;
+  height: 29.69vw;
+  background: url('../../images/contact_us/contact_us_bg.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.contact_us .main {
+  padding-top: 7.5vw;
+  padding-bottom: 6.97vw;
+  background-color: #fff;
+}
+
+.contact_us .gray {
+  background-color: #fcfcfc;
+}
+
+.contact_us .contact-info {
+  padding-left: 19.58vw;
+  padding-right: 17.92vw;
+}
+
+.contact_us .contact-info h1 {
+  font-family: Gilroy, Gilroy-Bold;
+  font-weight: 700;
+  letter-spacing: -0.4px;
+  font-size: 2.08vw;
+  color: #018cff;
+  margin-top: 5.21vw;
+  padding-top: 2.08vw;
+}
+
+.contact_us .contact-info p,
+.contact_us .contact-info a {
+  color: #818391;
+  font-size: 1.25vw;
+  font-family: Gilroy, Gilroy-Regular;
+  font-weight: 400;
+  line-height: 2.5vw;
+}
+
+.contact_us .contact-info a {
+  text-decoration: underline;
+  cursor: pointer;
+}

assets/style/home/index.css

@@ -65,10 +65,6 @@ p {
   margin-left: 12.5vw;
 }
 
-.index-page .getApp .app {
-  display: none;
-}
-
 .index-page .getApp .qrcodebox .qrcode {
   width: 9.375vw;
   height: 9.375vw;
@@ -105,11 +101,6 @@ p {
   margin-top: 1.18vw;
 }
 
-.index-page .take-out .take-out-imgs,
-.index-page .take-out .swiper {
-  display: none;
-}
-
 .index-page .take-out .take-out-body {
   margin-top: 1.18vw;
   height: 21.46vw;
@@ -127,6 +118,7 @@ p {
 }
 
 .index-page .take-out .take-out-body .img-box .take-out-img {
+  display: none;
   position: absolute;
   width: 21.46vw;
   height: 21.46vw;
@@ -145,12 +137,7 @@ p {
 .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;
+  top: 5.21vw;
 }
 
 .index-page .take-out .blueColor {
@@ -161,6 +148,10 @@ p {
   color: #242a30;
 }
 
+.index-page .take-out .whiteColor {
+  color: #fff;
+}
+
 .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);
@@ -173,14 +164,14 @@ p {
   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;
+  margin-bottom: 1.56vw;
 }
 
 .index-page .take-out .take-out-body p {
   font-size: 16px;
   font-weight: 400;
   letter-spacing: -0.4px;
-  margin-bottom: 2.19vw;
+  margin-bottom: 1.82vw;
 }
 
 .index-page .take-out .take-out-body .toway {
@@ -188,10 +179,6 @@ p {
   font-weight: 700;
 }
 
-.index-page .every {
-  display: none;
-}
-
 .index-page .map {
   width: 100%;
   height: 56.25vw;
@@ -199,10 +186,6 @@ p {
   background-size: 100% 100%;
 }
 
-.index-page .maph5 {
-  display: none;
-}
-
 .index-page .map h1 {
   font-size: 3.75vw;
   font-weight: 400;
@@ -271,6 +254,27 @@ p {
   border: none;
 }
 
+.index-page .getApp .app {
+  display: none;
+}
+
+.index-page .take-out .take-out-imgs,
+.index-page .take-out .swiper {
+  display: none;
+}
+
+.index-page .every {
+  display: none;
+}
+
+.index-page .maph5 {
+  display: none;
+}
+
+.index-page .footer-full {
+  display: none;
+}
+
 @media screen and (max-width: 960px) {
   /* 750 */
   .font100 {
@@ -291,6 +295,9 @@ p {
   .font24 {
     font-size: 3.2vw;
   }
+  .footer-page {
+    display: none;
+  }
   .index-page .banner {
     height: 89.2vw;
     background: url('../../images//home/phone/banner-pho.png') no-repeat;
@@ -314,6 +321,14 @@ p {
     color: #242a30;
   }
 
+  .index-page .getApp .where {
+    padding-top: 5.33vw;
+  }
+
+  .index-page .getApp .answer {
+    margin-top: 3.73vw;
+  }
+
   .index-page .getApp .qrcodebox {
     margin-left: 4vw;
   }
@@ -339,8 +354,7 @@ p {
 
   .index-page .take-out {
     position: relative;
-    height: 112.8vw;
-    padding-bottom: 10.67vw;
+    height: auto;
   }
 
   .index-page .take-out .food-title {
@@ -388,7 +402,6 @@ p {
 
   .index-page .take-out .swiper .img-info .about {
     margin-top: 2.4vw;
-    margin-bottom: 2.93vw;
   }
 
   .index-page .take-out .swiper .img-info .grayColor {
@@ -477,4 +490,44 @@ p {
     background: url('../../images/home/phone/map-pho.png') no-repeat;
     background-size: 100% 100%;
   }
+
+  .index-page .footer-full {
+    display: block;
+    position: static;
+  }
+
+  .index-page .footer-full .header {
+    width: 100%;
+    height: 15.73vw;
+    background: #008cff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4vw;
+  }
+
+  .index-page .footer-full .header .logo {
+    width: 26.8vw;
+    height: 7.73vw;
+  }
+  .index-page .footer-full .header .close {
+    width: 4.66vw;
+    height: 4.66vw;
+  }
+  .index-page .footer-full .title {
+    font-size: 4.8vw;
+    font-family: NexaBold, NexaBold-Regular;
+    font-weight: 400;
+    text-align: justifyLeft;
+    color: #242a30;
+    line-height: 9.6vw;
+  }
+  .index-page .footer-full .link {
+    font-size: 3.73vw;
+    font-family: NexaBold, NexaBold-Regular;
+    font-weight: 400;
+    text-align: justifyLeft;
+    color: #97a5b0;
+    line-height: 7.46vw;
+  }
 }

contact_us.html

@@ -0,0 +1,252 @@
+<!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/contact_us/index.css" />
+  </head>
+  <body>
+    <!--#include file="./components/header1.html"-->
+    <div class="contact_us">
+      <header class="header"></header>
+      <div class="main">
+        <div class="contact-info">
+          <h1>General Contact Information</h1>
+          <hr />
+          <div id="content"></div>
+        </div>
+        <div class="contact-info gray">
+          <h1>General inquiries:</h1>
+          <hr />
+          <a href="javascript:;">info@wolt.com</a>
+        </div>
+        <div class="contact-info">
+          <h1>Merchant inquiries:</h1>
+          <hr />
+          <div id="merchant"></div>
+        </div>
+        <div class="contact-info gray">
+          <h1>Marketing and cooperation inquiries:</h1>
+          <hr />
+          <p>
+            <span>Azerbaijan:</span>
+            <a href="javascript:;">marketing.azerbaijan@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Cyprus:</span>
+            <a href="javascript:;">marketing.cyprus@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Croatia:</span>
+            <a href="javascript:;">marketing.croatia@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Czech Republic:</span>
+            <a href="javascript:;">marketing.czechia@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Denmark:</span>
+            <a href="javascript:;">support@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Estonia:</span>
+            <a href="javascript:;">marketing.estonia@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Finland:</span>
+            <a href="javascript:;">marketing.finland@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Georgia:</span>
+            <a href="javascript:;">marketing.georgia@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Norway:</span>
+            <a href="javascript:;">restaurants.norway@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Germany:</span>
+            <a href="javascript:;">marketing.germany@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Greece:</span>
+            <a href="javascript:;">marketing.greece@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Hungary:</span>
+            <a href="javascript:;">marketing.hungary@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Israel:</span>
+            <a href="javascript:;">marketing.israel@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Japan:</span>
+            <a href="javascript:;">marketing.japan@hungrypanda.com</a>
+          </p>
+          <p>
+            <span>Kazakhstan:</span>
+            <a href="javascript:;">marketing.kazakhstan@hungrypanda.com</a>
+          </p>
+        </div>
+        <div class="contact-info">
+          <h1>Support:</h1>
+          <hr />
+          <p>
+            <span></span>
+            <a href="javascript:;">Please visit our support page</a>
+          </p>
+        </div>
+        <div class="contact-info gray">
+          <h1>For Media</h1>
+          <hr />
+          <p>
+            <span>Media: press@ wolt. com</span>
+            <a href="javascript:;"></a>
+          </p>
+          <p>
+            <span>Want to tell your friends how amazing Wolt is?</span>
+            <a href="javascript:;"></a>
+          </p>
+          <p>
+            <span>Media: press@ wolt. com</span>
+            <a href="javascript:;"></a>
+          </p>
+          <p>
+            <span>We' re all over Facebook, Twitter and Instagram.</span>
+            <a href="javascript:;"></a>
+          </p>
+          <p>
+            <span>We' re @ woltapp everywhere.Follow us to build up an appetite.</span>
+            <a href="javascript:;"></a>
+          </p>
+          <p>
+            <span>Contact Support</span>
+            <a href="javascript:;"></a>
+          </p>
+          <p>
+            <span>
+              If you didn' t find a suitable answer in our FAQ above, please feel free to contact us directly right
+              away:
+            </span>
+            <a href="javascript:;"></a>
+          </p>
+          <p>
+            <span>Drop us a line at</span>
+            <a href="javascript:;">support@ wolt. com</a>
+          </p>
+          <p>
+            <span>Use the live chat inside the Wolt app on your phone</span>
+            <a href="javascript:;"></a>
+          </p>
+        </div>
+      </div>
+    </div>
+    <!--#include file="./components/footer1.html"-->
+  </body>
+  <script>
+    window.onload = function () {
+      let info = [
+        {
+          title: 'HungryPanda Ltd',
+          text: '',
+        },
+        {
+          title: 'Arkadiankatu 6',
+          text: '',
+        },
+        {
+          title: '00100 London',
+          text: '',
+        },
+        {
+          title: 'London,the UK',
+          text: '',
+        },
+        {
+          title: 'Business ID:2646674-9',
+          text: '',
+        },
+        {
+          title: 'Electronic invoicing operator(in Finland):Liaison Operator address:003708599126',
+          text: '',
+        },
+        {
+          title: 'Company EDI-ID:003726466749(Wolt Enterprises Oy)',
+          text: '',
+        },
+        {
+          title: 'OVT-code:003726466749',
+          text: '',
+        },
+      ]
+      let merchant = [
+        {
+          title: 'Croatia:',
+          text: 'info.croatia@hungrypanda.com',
+        },
+        {
+          title: 'Czech Republic:',
+          text: 'support@hungrypanda.com',
+        },
+        {
+          title: 'Denmark:',
+          text: 'Estonia:taavi.loog@hungrypanda.com',
+        },
+        {
+          title: 'Finland',
+          text: 'restaurants.finland@hungrypanda.com',
+        },
+        {
+          title: 'Georgia',
+          text: 'medea.dolidze@hungrypanda.com',
+        },
+        {
+          title: 'Greece',
+          text: 'alexandros.chalkias@hungrypanda.com',
+        },
+        {
+          title: 'Hungary',
+          text: 'restaurantshungary@hungrypanda.com',
+        },
+        {
+          title: 'Latvia',
+          text: 'andrejs.gavars@hungrypanda.com',
+        },
+        {
+          title: 'Lithuania',
+          text: 'Norway:restaurants.norway@hungrypanda.com',
+        },
+        {
+          title: 'Poland',
+          text: 'agnieszka.orlanska@hungrypanda.com',
+        },
+        {
+          title: 'Serbia',
+          text: 'restaurants.serbia@hungrypanda.com',
+        },
+        {
+          title: 'Slovakia',
+          text: 'Sweden:patrick@hungrypanda.com',
+        },
+        {
+          title: 'Kazakhstan',
+          text: 'restaurants.kz@hungrypanda.com',
+        },
+      ]
+
+      content(info, '#content')
+      content(merchant, '#merchant')
+
+      function content(data, el) {
+        $.each(data, function (index, value) {
+          let ele = $(`<p><span>${value.title}</span><a href="javascript:;">${value.text}</a></p>`)
+          $(el).append(ele)
+        })
+      }
+    }
+  </script>
+</html>

index.html

@@ -39,27 +39,35 @@
           <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">
+          <div class="img-box blueColor img-box1">
             <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>
+              <h1 class="take-out-title">Deliver</h1>
+              <div class="about">with HungryPanda</div>
+              <p class="grayColor">On your schedule and on your own terms with considerable bonus.</p>
+              <div class="toway">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 class="img-box blueColor img-box2">
+            <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">Partner</h1>
+              <div class="about">with HungryPanda</div>
+              <p class="grayColor">To discover new digitalized operation model to attract more consumers.</p>
+              <div class="toway">Ride with us</div>
+            </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 class="img-box blueColor img-box3">
+            <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">Working</h1>
+              <div class="about">with HungryPanda</div>
+              <p class="grayColor">To achieve your ambition with passion, creation and cooperation.</p>
+              <div class="toway">Ride with us</div>
+            </div>
           </div>
         </div>
         <!-- 移动端轮播 -->
@@ -121,7 +129,89 @@
           <div class="map-img"></div>
         </div>
       </div>
+      <header class="footer-full">
+        <div class="list-box1">
+          <div class="accordion" id="accordionExample">
+            <div class="accordion-item">
+              <h2 class="accordion-header" id="headingOne">
+                <button
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#collapseOne"
+                  aria-expanded="true"
+                  aria-controls="collapseOne"
+                >
+                  <span class="title">Partner with HungryPanda</span>
+                </button>
+              </h2>
+              <div
+                id="collapseOne"
+                class="accordion-collapse collapse"
+                aria-labelledby="headingOne"
+                data-bs-parent="#accordionExample"
+              >
+                <div class="accordion-body">
+                  <div class="link">For Merchants</div>
+                  <div class="link">For Riders</div>
+                  <div class="link">For Talent</div>
+                </div>
+              </div>
+            </div>
+            <div class="accordion-item">
+              <h2 class="accordion-header" id="headingTwo">
+                <button
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#collapseTwo"
+                  aria-expanded="false"
+                  aria-controls="collapseTwo"
+                >
+                  <span class="title">Discover HungryPanda</span>
+                </button>
+              </h2>
+              <div
+                id="collapseTwo"
+                class="accordion-collapse collapse"
+                aria-labelledby="headingTwo"
+                data-bs-parent="#accordionExample"
+              >
+                <div class="accordion-body">
+                  <div class="link">For Merchants</div>
+                  <div class="link">For Riders</div>
+                  <div class="link">For Talent</div>
+                </div>
+              </div>
+            </div>
+            <div class="accordion-item">
+              <h2 class="accordion-header" id="headingThree">
+                <button
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#collapseThree"
+                  aria-expanded="false"
+                  aria-controls="collapseThree"
+                >
+                  <span class="title">Products</span>
+                </button>
+              </h2>
+              <div
+                id="collapseThree"
+                class="accordion-collapse collapse"
+                aria-labelledby="headingThree"
+                data-bs-parent="#accordionExample"
+              >
+                <div class="accordion-body">Products</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
     </div>
+    <!--#include file="./components/footer1.html"-->
   </body>
   <script type="module" src="./assets/js/common/index.js" defer></script>
+  <script type="module" src="./assets/js/home/index.js" defer></script>
 </html>