生鲜

assets/js/home/index.js

@@ -54,4 +54,61 @@ $(function () {
   $('.index-page .map .select .select-btn').click(function () {
     $('.index-page .map .select .pull-box').fadeToggle()
   })
+
+  let countrylist = [
+    {
+      name: '英国',
+      enName: 'The United Kingdom',
+    },
+    {
+      name: '美国',
+      enName: 'The United States',
+    },
+    {
+      name: '加拿大',
+      enName: 'Canada',
+    },
+    {
+      name: '法国',
+      enName: 'France',
+    },
+    {
+      name: '意大利',
+      enName: 'Italy',
+    },
+    {
+      name: '澳大利亚',
+      enName: 'Australia',
+    },
+    {
+      name: '新西兰',
+      enName: 'New Zealand',
+    },
+    {
+      name: '日本',
+      enName: 'Japan',
+    },
+    {
+      name: '韩国',
+      enName: 'South Korea',
+    },
+    {
+      name: '新加坡',
+      enName: 'Singapore',
+    },
+  ]
+  country(countrylist, '#map')
+  function country(data, el) {
+    $.each(data, function (index, value) {
+      let ele = $(`<div class="country-address">
+      <span>${value.enName}</span>
+      <div class="big-circle">
+        <div class="smail-circle">
+          <div class="circle"></div>
+        </div>
+      </div>
+    </div>`)
+      $(el).append(ele)
+    })
+  }
 })

assets/style/fresh/index.css

@@ -0,0 +1,158 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+p {
+  margin: 0;
+  padding: 0;
+}
+.font72 {
+  font-size: 3.75vw;
+}
+.font65 {
+  font-size: 3.39vw;
+}
+.font60 {
+  font-size: 3.125vw;
+}
+.font46 {
+  font-size: 2.396vw;
+}
+.font26 {
+  font-size: 1.35vw;
+}
+.font24 {
+  font-size: 1.25vw;
+}
+.font22 {
+  font-size: 1.145vw;
+}
+.fresh-page {
+  width: 100%;
+  background-color: #f7f7f7;
+}
+
+.fresh-page .banner {
+  position: relative;
+  width: 100%;
+  height: 41.67vw;
+  background: url('../../images/fresh/fresh-banner.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.fresh-page .banner .app {
+  position: absolute;
+  right: 18.23vw;
+  bottom: 0.35vw;
+  width: 22.03vw;
+  height: 33.59vw;
+  background: url('../../images/fresh/fresh-app.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.fresh-page .banner .banner-info {
+  margin-left: 12.396vw;
+  padding-top: 8.802vw;
+  color: #7bd51e;
+  font-weight: 400;
+  font-family: Source Han Sans CN;
+}
+
+.fresh-page .banner .banner-info p {
+  width: 36.40625vw;
+  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 1.875vw;
+}
+
+.fresh-page .banner .banner-qrcode {
+  margin-left: 12.396vw;
+  margin-top: 5.3vw;
+  display: flex;
+}
+
+.fresh-page .banner .banner-qrcode .qr {
+  width: 6.77vw;
+  height: 6.77vw;
+  margin-right: 1.04vw;
+  background: url('../../images/home/qrcode.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.fresh-page .banner .banner-qrcode .app-link {
+  font-size: 1.145vw;
+  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+  font-weight: 400;
+  color: #ffffff;
+}
+
+.fresh-page .banner .banner-qrcode .app-link span {
+  color: rgba(123, 213, 30, 1);
+}
+.fresh-page .banner .banner-qrcode .qrcode {
+  margin-top: 0.5vw;
+}
+.fresh-page .banner .banner-qrcode .qrcode img {
+  width: 8.75vw;
+  height: 2.55vw;
+}
+
+.fresh-page .experience {
+  padding-top: 8.82vw;
+  padding-bottom: 4.41vw;
+}
+
+.fresh-page .experience h1 {
+  font-family: Source Han Sans CN, Source Han Sans CN-Bold;
+  font-weight: 700;
+  text-align: center;
+  color: #7bd51e;
+  margin-bottom: 0.52vw;
+}
+
+.fresh-page .experience p {
+  font-size: 1.04vw;
+  font-family: Source Han Sans CN, Source Han Sans CN-Normal;
+  font-weight: Normal;
+  text-align: center;
+  color: #8d8c8c;
+  margin-bottom: 1.54vw;
+}
+
+.fresh-page .experience .line {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 2.08vw;
+}
+
+.fresh-page .experience .line .big-line {
+  width: 1.54vw;
+  height: 0.26vw;
+  background: #c7c6c6;
+  border-radius: 3px;
+  margin-right: 5px;
+}
+
+.fresh-page .experience .line .smail-line {
+  width: 0.52vw;
+  height: 0.26vw;
+  background: #c7c6c6;
+  border-radius: 3px;
+}
+
+.fresh-page .experience .experience-info {
+  padding: 0 12.5vw;
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
+
+.fresh-page .experience .experience-info .info-item {
+  width: 22.92vw;
+  height: 23.4375vw;
+  background: #ffffff;
+  border-radius: 20px;
+}

assets/style/header2/index.css

@@ -0,0 +1,137 @@
+.header1-page {
+  width: 100%;
+  height: 70px;
+  padding: 0 12.5vw;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+}
+.header1-page.bg {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.header1-page .logo-img {
+  width: 115px;
+  height: 45px;
+  margin-top: 19px;
+}
+
+.header1-page .menu {
+  width: 393px;
+  display: flex;
+  justify-content: space-between;
+  font-size: 18px;
+  font-family: Gilroy, Gilroy-Bold;
+  font-weight: 700;
+  text-align: left;
+  color: #ffffff;
+  margin-top: 29px;
+}
+
+.header1-page .menu .item {
+  height: 18px;
+  position: relative;
+  cursor: pointer;
+}
+
+.header1-page .menu .item:hover::after {
+  width: 100%;
+}
+.header1-page .menu .item::after {
+  transition: width 0.3s;
+  transition-delay: 0.3s; /*避免短时间内，如果重复触发会导致闪烁闪烁*/
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -17px;
+  height: 4px;
+  width: 0;
+  background: #008cff;
+}
+.header1-page .menu .item:hover .expand2 {
+  width: 608px;
+  width: 340px;
+  padding: 55px 60px;
+}
+.header1-page .menu .item .expand2 {
+  overflow: hidden;
+  transition: all 0.3s;
+  transition-delay: 0.3s;
+  width: 0;
+  height: 261px;
+  background: #ffffff;
+  border-radius: 20px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 35px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  /* justify-content: flex-start; */
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0;
+}
+.header1-page .menu .item .expand2-box {
+  /* width: 50%; */
+  font-family: Gilroy, Gilroy-Medium;
+  line-height: 36px;
+}
+.header1-page .menu .item .expand2-box-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #333333;
+}
+.header1-page .menu .item .expand2-box-content {
+  font-size: 14px;
+  font-weight: 500;
+  color: #999999;
+}
+
+.header1-page .lang-box {
+  /* margin-top: 29px; */
+}
+
+.header1-page .lang-box .lang1 {
+  width: 22px;
+  height: 22px;
+  vertical-align: middle;
+}
+
+.header1-page .lang-box span {
+  color: #ffffff;
+}
+
+.header1-page .lang-box .lang2 {
+  width: 18px;
+  height: 14px;
+  vertical-align: middle;
+}
+
+/*移动端*/
+@media screen and (max-width: 960px) {
+  .header1-page {
+    height: 14vw;
+    padding: 0 4vw;
+  }
+  .header1-page .logo-img {
+    width: 26.8vw;
+    height: 7.77vw;
+    margin-top: 4vw;
+  }
+  .header1-page .lang-box {
+    margin-top: 4vw;
+  }
+  .header1-page .lang-box .lang1 {
+    display: none;
+  }
+  .header1-page .menu {
+    display: none;
+  }
+}

assets/style/home/index.css

@@ -180,6 +180,7 @@ p {
 }
 
 .index-page .map {
+  position: relative;
   width: 100%;
   height: 56.25vw;
   background: url('../../images/home/map.png') no-repeat;
@@ -219,6 +220,7 @@ p {
   background: linear-gradient(270deg, #00a8ff 0%, #008cff 100%);
   box-shadow: 7.98px 15.01px 32px 0px #d3e1ef;
   border-radius: 12px;
+  padding: 0 1.56vw;
   cursor: pointer;
   text-align: center;
   line-height: 2.81vw;
@@ -226,6 +228,14 @@ p {
   font-size: 1.25vw;
   font-weight: 600;
   z-index: 3;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.index-page .map .select .select-btn img {
+  width: 12px;
+  height: 12px;
 }
 
 .index-page .map .select .pull-box {
@@ -250,6 +260,133 @@ p {
   font-weight: 700;
 }
 
+.index-page .map .country-address {
+  position: absolute;
+}
+
+.index-page .map .country-address:nth-of-type(2) {
+  top: 12.5vw;
+  left: 38vw;
+}
+
+.index-page .map .country-address:nth-of-type(3) {
+  top: 15.56vw;
+  left: 78.125vw;
+}
+.index-page .map .country-address:nth-of-type(4) {
+  top: 12.56vw;
+  left: 73.125vw;
+}
+.index-page .map .country-address:nth-of-type(5) {
+  top: 12.5vw;
+  left: 38vw;
+}
+
+.index-page .map .country-address:nth-of-type(6) {
+  top: 12.5vw;
+  left: 38vw;
+}
+.index-page .map .country-address:nth-of-type(7) {
+  top: 26.41vw;
+  left: 57.45vw;
+}
+.index-page .map .country-address:nth-of-type(8) {
+  top: 28.41vw;
+  left: 61.8vw;
+}
+
+.index-page .map .country-address:nth-of-type(9) {
+  top: 16.56vw;
+  left: 58.125vw;
+}
+
+.index-page .map .country-address:nth-of-type(10) {
+  top: 16.86vw;
+  left: 56.125vw;
+}
+
+.index-page .map .country-address:nth-of-type(11) {
+  top: 21.41vw;
+  left: 52.45vw;
+}
+
+.index-page .map .country-address span {
+  position: absolute;
+  left: -100%;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.09vw;
+  font-family: Gilroy, Gilroy-Bold;
+  font-weight: 700;
+  color: #028cfb;
+  color: #000000;
+}
+
+.index-page .map .country-address:nth-of-type(2) span {
+  top: 0;
+}
+
+.index-page .map .country-address:nth-of-type(3) span {
+  left: -200%;
+}
+
+.index-page .map .country-address:nth-of-type(5) span {
+  top: auto;
+  left: auto;
+  right: -50%;
+}
+
+.index-page .map .country-address:nth-of-type(6) span {
+  top: auto;
+  left: 50%;
+  bottom: -30%;
+  transform: translateX(-50%);
+}
+
+.index-page .map .country-address:nth-of-type(8) span {
+  left: -150%;
+}
+
+.index-page .map .country-address:nth-of-type(9) span {
+  left: auto;
+  right: -70%;
+}
+
+.index-page .map .country-address:nth-of-type(10) span {
+  left: 50%;
+  top: auto;
+  bottom: -100%;
+}
+
+.index-page .map .country-address .big-circle {
+  width: 2.97vw;
+  height: 2.97vw;
+  width: 2.97vw;
+  height: 2.97vw;
+  background-color: rgba(0, 140, 251, 0.1);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.index-page .map .country-address .big-circle .smail-circle {
+  width: 1.35vw;
+  height: 1.35vw;
+  background-color: #8acbfd;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.index-page .map .country-address .big-circle .smail-circle .circle {
+  width: 0.42vw;
+  height: 0.42vw;
+  background-color: #008ef9;
+  border-radius: 50%;
+}
+
 .index-page .map .select .pull-box .pull-item:last-child {
   border: none;
 }

components/header2.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="../assets/style/header2/index.css" />
+  </head>
+  <body>
+    <header class="header1-page">
+      <img class="logo-img" src="../assets/images/common/fresh-logo.png" />
+      <div class="menu">
+        <div class="item">Products</div>
+        <div class="item">
+          Partners
+          <div class="expand2">
+            <div class="expand2-box">
+              <div class="expand2-box-title">For riders</div>
+              <div class="expand2-box-content">Satisfy your Chinese stomach</div>
+            </div>
+            <div class="expand2-box">
+              <div class="expand2-box-title">For merchants</div>
+              <div class="expand2-box-content">Asian fresh food and grocery</div>
+            </div>
+            <!-- <div class="expand2-box">
+              <div class="expand2-box-title">For talents</div>
+              <div class="expand2-box-content">Panda group purchase provides...</div>
+            </div> -->
+          </div>
+        </div>
+        <!-- <div class="item">About</div> -->
+        <div class="lang-box">
+          <img class="lang1" src="../assets/images/common/fresh-lang.png" />
+          <span>Language</span>
+        </div>
+      </div>
+    </header>
+    <header class="full-screen">
+      <div class="header">
+        <img class="logo" src="../assets/images/common/logo2.png" />
+        <img onclick="setFullscreenState()" class="close" src="../assets/images/common/close.png" />
+      </div>
+      <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>
+    <script type="module" src="../assets/js/common/index.js" defer></script>
+    <script src="../assets/js/header1/index.js" defer></script>
+  </body>
+</html>

fresh.html

@@ -0,0 +1,62 @@
+<!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/fresh/index.css" />
+  </head>
+  <body>
+    <!--#include file="./components/header2.html"-->
+    <div class="fresh-page">
+      <!-- banner -->
+      <div class="banner">
+        <div class="app"></div>
+        <div class="banner-info">
+          <h1 class="font65">海外生活必备</h1>
+          <h1 class="font65">线上超市APP</h1>
+          <p class="font26">PandaFresh熊猫优鲜，是HungryPanda旗下面向海外华人的 生鲜商超类一站式购物平台。</p>
+        </div>
+        <div class="banner-qrcode">
+          <div class="qr"></div>
+          <div class="app-link">
+            <p class="link-text">
+              立即扫码或应用商店搜索
+              <span>“PandaFresh”</span>
+            </p>
+            <p class="link-text">下载并领取新人专享大额红包</p>
+            <div class="qrcode">
+              <img src="./assets/images/home/goole.png" alt="" />
+              <img src="./assets/images/home/ios.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 体验区 -->
+      <div class="experience">
+        <h1>一站式购物体验</h1>
+        <p>随时随地手机加购下单，无需出门采购，即时配送到家，在线解决售后问题，新鲜不等待！</p>
+        <div class="line">
+          <span class="big-line"></span>
+          <span class="smail-line"></span>
+        </div>
+        <div class="experience-info">
+          <div class="info-item">
+            <img src="./assets/images/fresh/place.png" alt="" />
+            <div class="line">
+              <span class="big-line"></span>
+              <span class="smail-line"></span>
+            </div>
+            <h3>在线下单</h3>
+            <h3>即时配送</h3>
+            <p>自有配送物流团队</p>
+            <p>最快30分钟内送达</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

index.html

@@ -23,10 +23,10 @@
           <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="" />
+          <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="" />
+            <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="" />
@@ -101,11 +101,15 @@
       </div>
 
       <!-- 地图 -->
-      <div class="map">
+      <div class="map" id="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="select-btn">
+            <img src=".../../assets/images/home/left.png" alt="" />
+            <span>Australia</span>
+            <img src=".../../assets/images/home/right.png" alt="" />
+          </div>
           <div class="pull-box">
             <div class="pull-item">Sydney</div>
             <div class="pull-item">Sydney</div>
@@ -129,7 +133,7 @@
           <div class="map-img"></div>
         </div>
       </div>
-      <header class="footer-full">
+      <!-- <header class="footer-full">
         <div class="list-box1">
           <div class="accordion" id="accordionExample">
             <div class="accordion-item">
@@ -208,7 +212,7 @@
             </div>
           </div>
         </div>
-      </header>
+      </header> -->
     </div>
     <!--#include file="./components/footer1.html"-->
   </body>