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

@@ -1,8 +1,10 @@
 //DOM操作、Ajax
-import 'http://code.jquery.com/jquery-2.1.1.min.js'
+import 'http://code.jquery.com/jquery-2.1.1.min.js';
 //轮播图
-import Swiper from 'https://unpkg.com/swiper@8/swiper-bundle.esm.browser.min.js'
-window.Swiper = Swiper
+import Swiper from 'https://unpkg.com/swiper@8/swiper-bundle.esm.browser.min.js';
+window.Swiper = Swiper;
+// bootstrap
+import 'https://cdn.staticfile.org/bootstrap/5.1.3/js/bootstrap.min.js';
 
 /**
  * 执行动画

assets/js/header1/index.js

@@ -7,3 +7,20 @@ $(window).scroll(function(event){
         $('.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'
+    })
+}

assets/style/about_us/index.css

@@ -195,7 +195,7 @@
 }
 
 .aboutus-page .box4-content .box4 .card .num {
-    font-size: 2.5vw;
+    font-size: 2.34vw;
     font-family: SamsungSharpSans, SamsungSharpSans-Medium;
     font-weight: 500;
     text-align: left;
@@ -205,6 +205,7 @@
 }
 .aboutus-page .box4-content .box4 .card .tip {
     font-size: 1vw;
+    line-height: 1;
 }
 
 .aboutus-page .box4-content .box4.pic {
@@ -223,7 +224,7 @@
     object-fit: fill;
 }
 .aboutus-page .box5-content {
-    height: 32vw;
+    height: 48.59vw;
     padding: 6.25vw 0;
     text-align: center;
     position: relative;
@@ -356,6 +357,15 @@
     height: 5px;
     transform: translateY(-50%);
 }
+
+.aboutus-page .box5-content .card .logo{
+    width: 2.08vw;
+    height: 1.66vw;
+    position: absolute;
+    top: 3vw;
+    right: 2vw;
+}
+
 .aboutus-page .box5-content .card .name{
     font-size: 1.25vw;
     font-family: Gilroy, Gilroy-Bold;
@@ -435,7 +445,7 @@
 
 .aboutus-page .box6-content .card{
     width: 17.8vw;
-    height: 17.8vw;
+    min-height: 17.8vw;
     background: #ffffff;
     border-radius: 24px;
     padding: 3.17vw 1.56vw;
@@ -551,6 +561,7 @@
     }
     .aboutus-page .box2-content div{
         font-size: 3.7vw;
+        line-height: 4.5vw;
         display: block;
         width: 88vw;
         margin: 4vw auto 8vw auto;

assets/style/common/index.css

@@ -7,18 +7,35 @@
 @import "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css";
 /*字体图标库*/
 @import "https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.1/css/all.min.css";
+/* bootstrap */
+@import "https://cdn.staticfile.org/bootstrap/5.1.3/css/bootstrap.min.css";
 
 /*字体*/
 @font-face{
     font-family: 'Gilroy-Thin';
     src: url('../../fonts/Gilroy-Thin.otf')
 }
+@font-face{
+    font-family: 'NexaBold';
+    src: url('../../fonts/NexaBold.otf')
+}
 
-
-.hide-ele{
-    display: none;
+/* 列表 */
+.list-box1 .accordion-button:not(.collapsed){
+    color: unset;
+    background: unset;
+    box-shadow: unset;
+    border-bottom: 1px solid rgba(0,0,0,.125);
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease /*去掉border的过度效果*/
+}
+.list-box1 .accordion-button:focus{
+    box-shadow: unset;
+}
+.list-box1 .accordion-button::after{
+    width: 11px;
+    height: 11px;
+    background-size: 100% 100%;
 }
-body{
-    -webkit-overflow-scrolling: touch;
-    overflow-scrolling: touch;
+.list-box1 .accordion-button{
+    padding: 4.93vw 4vw;
 }

assets/style/footer1/index.css

@@ -58,7 +58,7 @@
     line-height: 1.56vw;
 }
 
-.split{
+.footer-page .split{
     width: 75vw;
     height: 1px;
     opacity: 0.2;

assets/style/header1/index.css

@@ -11,7 +11,7 @@
   z-index: 9;
 }
 .header1-page.bg {
-  background: #0000004d;
+  background: rgba(0,0,0,0.3);
 }
 
 .header1-page .logo-img {
@@ -115,7 +115,8 @@
 /*移动端*/
 @media screen and (max-width: 960px) {
   .header1-page {
-    height: 8vw;
+    height: 11.77vw;
+    padding: 0 4vw;
   }
   .header1-page .logo-img {
     width: 26.8VW;
@@ -131,4 +132,57 @@
   .header1-page .menu{
     display: none;
   }
+  .aboutus-page .box2{
+    display: none;
+  }
+  .aboutus-page .box3-content{
+    display: none;
+  }
+}
+
+/* 全屏弹出层 */
+.aboutus-page .full-screen{
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  height: 100%;
+  width: 100%;
+  background: white;
+  display: none;
+}
+
+.aboutus-page .full-screen .header{
+  width: 100%;
+  height:15.73vw;
+  background: #008CFF;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 4vw;
+}
+
+.aboutus-page .full-screen .header .logo{
+  width: 26.8vw;
+  height: 7.73vw;
+}
+.aboutus-page .full-screen .header .close{
+  width: 4.66vw;
+  height: 4.66vw;
+}
+.aboutus-page .full-screen .title{
+  font-size: 4.8vw;
+  font-family: NexaBold, NexaBold-Regular;
+  font-weight: 400;
+  text-align: justifyLeft;
+  color: #242a30;
+  line-height: 9.6vw;
+}
+.aboutus-page .full-screen .link{
+  font-size: 3.73vw;
+  font-family: NexaBold, NexaBold-Regular;
+  font-weight: 400;
+  text-align: justifyLeft;
+  color: #97a5b0;
+  line-height: 7.46vw;
 }

components/footer1.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" href="../assets/style/footer1/index.css" />
+	</head>
+	<body>
+		<footer class="footer-page">
+			<div class="bg">
+				<div class="content">
+					<div class="left">
+						<div class="down">Download the App</div>
+						<div class="img-box">
+							<img src="../assets/images/common/other-app1.png" />
+							<img src="../assets/images/common/other-app2.png" />
+							<img src="../assets/images/common/other-app3.png" />
+						</div>
+					</div>
+					<div class="right">
+						<div class="item">
+							<div class="title">Partner with HungryPanda</div>
+							<div class="link">For Merchants</div>
+							<div class="link">For Riders</div>
+							<div class="link">For Talent</div>
+						</div>
+						<div class="item">
+							<div class="title">Partner with HungryPanda</div>
+							<div class="link">For Merchants</div>
+							<div class="link">For Riders</div>
+							<div class="link">For Talent</div>
+						</div>
+						<div class="item">
+							<div class="title">Partner with HungryPanda</div>
+							<div class="link">For Merchants</div>
+							<div class="link">For Riders</div>
+							<div class="link">For Talent</div>
+						</div>
+					</div>
+				</div>
+				<div class="split"></div>
+				<div class="bottom">
+					<div>© HungryPanda 2020-2022 Accessibility statement Terms and conditions</div>
+					<div class="img-box">
+						<img src="../assets/images/common/other-app4.png" />
+						<img src="../assets/images/common/other-app5.png" />
+						<img src="../assets/images/common/other-app6.png" />
+						<img src="../assets/images/common/other-app7.png" />
+					</div>
+				</div>
+			</div>
+		</footer>
+		<script type="module" src="../assets/js/common/index.js"></script>
+	</body>
+</html>

components/header1.html

@@ -4,7 +4,7 @@
 		<link rel="stylesheet" href="../assets/style/header1/index.css" />
 	</head>
 	<body>
-		<div class="header1-page">
+		<header class="header1-page">
 			<img class="logo-img" src="../assets/images/common/logo1.png" />
 			<div class="menu">
 				<div class="item">Products</div>
@@ -27,11 +27,61 @@
 				<div class="item">About</div>
 			</div>
 			<div class="lang-box">
-				<img class="lang1" src="../assets/images/common/lang1.png">
-				<img class="lang2" src="../assets/images/common/lang2.png">
+				<img class="lang1" src="../assets/images/common/lang1.png" />
+				<img onclick="setFullscreenState()" class="lang2" src="../assets/images/common/lang2.png" />
 			</div>
-		</div>
-		<script type="module" src="../assets/js/common/index.js"></script>
-		<script type="module" src="../assets/js/header1/index.js"></script>
+		</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>