about_us.html

@@ -42,7 +42,8 @@
             sharing with in the team.
         </div>
     </div>
-    <div class="box2">
+    <!--PC端-->
+    <div class="box2 pc">
         <div class="box1-content">
             <img class="logo" src="./assets/images/common/logo2.png"/>
             <div class="box1-title">
@@ -69,6 +70,43 @@
             </div>
         </div>
     </div>
+    <!--移动端-->
+    <div class="box2 mobile">
+        <div id="swiper2" class="swiper">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <div class="box1-content">
+                        <img class="logo" src="./assets/images/common/logo2.png"/>
+                        <div class="box1-title">
+                            HungryPanda
+                        </div>
+                        <div class="box1-tip">
+                            HungryPanda is a specialist food delivery platform, providing authentic Chinese food and groceries to
+                            overseas Chinese communities.
+                        </div>
+                        <button class="hvr-wobble-horizontal"></button>
+                    </div>
+                </div>
+                <div class="swiper-slide">
+                    <div class="box3-content">
+                        <div class="box3">
+                            <div class="num">02</div>
+                            <div class="box3-title">Panda Fresh</div>
+                            <div class="box3-tip">HungryPanda is a specialist food delivery platform, providing ...</div>
+                            <img src="./assets/images/about_us/arrow1.png"/>
+                        </div>
+                        <div class="box3">
+                            <div class="num">03</div>
+                            <div class="box3-title">Vouchers Panda</div>
+                            <div class="box3-tip">HungryPanda is a specialist food delivery platform, providing ...</div>
+                            <img src="./assets/images/about_us/arrow1.png"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-pagination"></div>
+        </div>
+    </div>
     <div class="box4-content">
         <div class="box4">
             <div class="title">Exploring Cities</div>
@@ -92,7 +130,8 @@
         </div>
         <div class="box4 pic"></div>
     </div>
-    <div class="box5-content">
+    <!--pc端-->
+    <div class="box5-content pc">
         <div class="title">Milestone</div>
         <div class="split"></div>
         <div class="page-box">
@@ -200,6 +239,35 @@
             </div>
         </div>
     </div>
+    <!--移动端-->
+    <div class="box5-content mobile">
+        <div class="title">Milestone</div>
+        <div class="nav">
+            <div class="nav-title" onclick="eleToCenter(event,'.box5-content .nav')">2022</div>
+            <div class="nav-title" onclick="eleToCenter(event,'.box5-content .nav')">2021</div>
+            <div class="nav-title" onclick="eleToCenter(event,'.box5-content .nav')">2020</div>
+            <div class="nav-title" onclick="eleToCenter(event,'.box5-content .nav')">2019</div>
+            <div class="nav-title" onclick="eleToCenter(event,'.box5-content .nav')">2019</div>
+            <div class="nav-title" onclick="eleToCenter(event,'.box5-content .nav')">2019</div>
+            <div class="nav-title" onclick="eleToCenter(event,'.box5-content .nav')">2019</div>
+            <div class="nav-title" onclick="eleToCenter(event,'.box5-content .nav')">2019</div>
+            <div class="nav-title" onclick="eleToCenter(event,'.box5-content .nav')">2019</div>
+        </div>
+        <div class="content">
+            <div class="name">
+                April
+            </div>
+            <div class="desc">
+                Launched the business of VouchersPanda
+            </div>
+            <div class="name">
+                April
+            </div>
+            <div class="desc">
+                Launched the business of VouchersPanda
+            </div>
+        </div>
+    </div>
     <div class="box6-content">
         <div class="tool">
             <div class="title">News</div>
@@ -209,58 +277,40 @@
             </div>
         </div>
         <div class="cards-box">
-            <div class="cards index1 last">
+            <div class="cards">
                 <div class="card">
+                    <div class="tag"></div>
+                    <div class="bg"></div>
                     <div class="date">March 8, 20221</div>
                     <div class="card-title">HungryPanda pays tribute to everyone who lives seriously</div>
                     <div class="desc">On HungryPanda's platform, there are such a group of people. They are...</div>
                     <div class="arrow">VIEW MORE<i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
                 </div>
                 <div class="card">
+                    <div class="tag"></div>
+                    <div class="bg"></div>
                     <div class="date">March 8, 20222</div>
                     <div class="card-title">HungryPanda pays tribute to everyone who lives seriously</div>
                     <div class="desc">On HungryPanda's platform, there are such a group of people. They are...</div>
                     <div class="arrow">VIEW MORE<i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
                 </div>
                 <div class="card">
+                    <div class="tag"></div>
+                    <div class="bg"></div>
                     <div class="date">March 8, 20223</div>
                     <div class="card-title">HungryPanda pays tribute to everyone who lives seriously</div>
                     <div class="desc">On HungryPanda's platform, there are such a group of people. They are...</div>
                     <div class="arrow">VIEW MORE<i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
                 </div>
                 <div class="card">
+                    <div class="tag"></div>
+                    <div class="bg"></div>
                     <div class="date">March 8, 20224</div>
                     <div class="card-title">HungryPanda pays tribute to everyone who lives seriously</div>
                     <div class="desc">On HungryPanda's platform, there are such a group of people. They are...</div>
                     <div class="arrow">VIEW MORE<i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
                 </div>
             </div>
-            <div class="cards index2 first">
-                <div class="card">
-                    <div class="date">March 8, 20225</div>
-                    <div class="card-title">HungryPanda pays tribute to everyone who lives seriously</div>
-                    <div class="desc">On HungryPanda's platform, there are such a group of people. They are...</div>
-                    <div class="arrow">VIEW MORE<i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
-                </div>
-                <div class="card">
-                    <div class="date">March 8, 20226</div>
-                    <div class="card-title">HungryPanda pays tribute to everyone who lives seriously</div>
-                    <div class="desc">On HungryPanda's platform, there are such a group of people. They are...</div>
-                    <div class="arrow">VIEW MORE<i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
-                </div>
-                <div class="card">
-                    <div class="date">March 8, 20227</div>
-                    <div class="card-title">HungryPanda pays tribute to everyone who lives seriously</div>
-                    <div class="desc">On HungryPanda's platform, there are such a group of people. They are...</div>
-                    <div class="arrow">VIEW MORE<i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
-                </div>
-                <div class="card">
-                    <div class="date">March 8, 20228</div>
-                    <div class="card-title">HungryPanda pays tribute to everyone who lives seriously</div>
-                    <div class="desc">On HungryPanda's platform, there are such a group of people. They are...</div>
-                    <div class="arrow">VIEW MORE<i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>
-                </div>
-            </div>
         </div>
     </div>
     <!--头部-->

assets/js/about_us/index.js

@@ -13,6 +13,22 @@ let swiper = new Swiper("#swiper1", {
     }
 });
 
+//轮播图
+let swiper2 = new Swiper("#swiper2", {
+    pagination: {
+        el: ".swiper-pagination"
+    },
+    loop: true, //循环
+    observer: true,//修改swiper自己或子元素时，自动初始化swiper
+    observeParents: true,//修改swiper的父元素时，自动初始化swiper
+    speed: 500,
+    autoplay: {
+        disableOnInteraction: false,  //触碰后自动轮播也不会停止
+        delay: 3000,
+    }
+});
+
+
 //上一页、下一页
 var pageNum = 1;//默认第一页
 function lastPage(){
@@ -35,49 +51,7 @@ function nextPage(){
 //切换卡片
 switchCard();//初始化
 function switchCard(){
-    if($('.box6-content .cards.index1').hasClass('first')){
-        $('.box6-content .cards.index1').removeClass('first');
-        $('.box6-content .cards.index1').addClass('last');
-        $('.box6-content .cards.index2').removeClass('last');
-        $('.box6-content .cards.index2').addClass('first');
-        $('.box6-content .cards.index1').animate({
-            "opacity": 0.2,
-            "z-index": 0,
-            "transform": 'rotate(-10deg)',
-        },800);
-        $('.box6-content .cards.index1 .card div').animate({
-            "opacity": 0
-        })
-        $('.box6-content .cards.index2').animate({
-            "opacity": 1,
-            "z-index": 100,
-            "transform": 'rotate(0)'
-        },800);
-        $('.box6-content .cards.index2 .card div').animate({
-            "opacity": 1
-        })
-    }else{
-        $('.box6-content .cards.index1').removeClass('last');
-        $('.box6-content .cards.index1').addClass('first');
-        $('.box6-content .cards.index2').removeClass('first');
-        $('.box6-content .cards.index2').addClass('last');
-        $('.box6-content .cards.index2').animate({
-            "opacity": 0.2,
-            "z-index": 0,
-            "transform": 'rotate(-10deg)'
-        },800);
-        $('.box6-content .cards.index2 .card div').animate({
-            "opacity": 0
-        })
-        $('.box6-content .cards.index1').animate({
-            "opacity": 1,
-            "z-index": 100,
-            "transform": 'rotate(0)'
-        },800);
-        $('.box6-content .cards.index1 .card div').animate({
-            "opacity": 1
-        })
-    }
+
 }
 
 //上一页、下一页
@@ -91,3 +65,7 @@ function nextPage2(){
     $('.aboutus-page .box6-content .page-box .img.first2').removeClass('active');
     $('.aboutus-page .box6-content .page-box .img.last2').addClass('active');
 }
+
+
+
+showAnimate('.aboutus-page .box3-content .box3','animate__animated animate__slideInDown');

assets/js/common/index.js

@@ -1,7 +1,7 @@
 //DOM操作、Ajax
 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';
+import Swiper from 'https://cdn.staticfile.org/Swiper/8.2.2/swiper-bundle.esm.browser.min.js';
 window.Swiper = Swiper;
 // bootstrap
 import 'https://cdn.staticfile.org/bootstrap/5.1.3/js/bootstrap.min.js';
@@ -12,24 +12,63 @@ import 'https://cdn.staticfile.org/bootstrap/5.1.3/js/bootstrap.min.js';
  * @description 如果元素滚动至距离底部150px以上，添加css动效
  */
 window.showAnimate = function (ele, className) {
-  //监听页面滚动
-  window.onscroll = function (event) {
-    if ($(ele).offset().top <= $(window).height() + $(window).scrollTop() - 150) {
-      $(ele).addClass(className)
+  //先隐藏元素
+  $(ele).css({
+    'visibility': 'hidden'
+  })
+  /**
+   *
+   * @description 得到元素的坐标信息
+   */
+  function GetRect (element) {
+    let rect = element.getBoundingClientRect() // 距离视窗的距离
+    let top = document.documentElement.clientTop ? document.documentElement.clientTop : 0 // html元素对象的上边框的宽度
+    let left = document.documentElement.clientLeft ? document.documentElement.clientLeft : 0
+    return {
+      top: rect.top - top,
+      bottom: rect.bottom - top,
+      left: rect.left - left,
+      right: rect.right - left
+    }
+  }
+
+  let $box = $(ele)[0]
+  let divH = $box.offsetHeight // div高度
+  let windowH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight // 浏览器高度兼容写法
+  window.onscroll = function () {
+    let obj = GetRect($box)
+    if (obj.top >= windowH) { // 在视口之下
+    }
+    if (obj.top < windowH && obj.bottom >= windowH) { // 正在出现
+    }
+    if (obj.top > 0 && obj.top < windowH && obj.bottom > 0 && obj.bottom < windowH) { // 正在视口中
+      //添加动效
+      if(!$(ele).hasClass(className)){
+        $(ele).css({
+          'visibility': 'unset'
+        })
+        $(ele).addClass(className);
+      }
+    }
+    if (obj.top <= 0 && obj.bottom <= divH && obj.bottom > 0) { // 正在离开视口
+    }
+    if (obj.bottom <= 0) { // 已经离开视口
     }
   }
 }
 
-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,
-  },
-})
+/**
+ * @description 元素滚动至父容器的中间
+ * @param ele 可以传元素的"event"或者"选择器名称"
+ * @fatherEle 滚动父容器的元素
+ */
+window.eleToCenter = function (e,fatherEle){
+  let item = typeof e == 'object'?$(e.target):(e);
+  let container = $(fatherEle);
+  let itemOffset = item.offset();
+  let itemOffsetLeft = itemOffset.left + container.scrollLeft();
+  let centerLeft = ( container.width() - item.width()) / 2 + item.width()*0.5;
+  container.animate({
+    scrollLeft: itemOffsetLeft - centerLeft
+  },300)
+}

assets/style/about_us/index.css

@@ -98,6 +98,17 @@
     justify-content: space-between;
     padding: 0 2.6vw 0 12.5vw;
 }
+.aboutus-page .box2.mobile{
+    display: none;
+    padding: 0;
+}
+.aboutus-page .box2.mobile .swiper-slide{
+    display: flex;
+    align-items: center;
+}
+.aboutus-page .box2.mobile .box1-content{
+    margin: 16.93vw auto 0 auto;
+}
 
 .aboutus-page .box2 .box1-content {
     margin-top: 0;
@@ -117,7 +128,7 @@
 
 .aboutus-page .box3-content .num {
     opacity: 0.7;
-    font-size: 72px;
+    font-size: 3.75vw;
     font-family: Gilroy, Gilroy-Thin;
     font-weight: 200;
     text-align: left;
@@ -134,7 +145,7 @@
 
 .aboutus-page .box3-content .box3-title {
     opacity: 0.7;
-    font-size: 24px;
+    font-size: 1.25vw;
     font-family: Gilroy, Gilroy-Medium;
     font-weight: 500;
     text-align: left;
@@ -144,7 +155,7 @@
 
 .aboutus-page .box3-content .box3-tip {
     opacity: 0.7;
-    font-size: 15px;
+    font-size: 0.78vw;
     font-family: Myriad Pro, Myriad Pro-Regular;
     font-weight: 400;
     text-align: left;
@@ -167,7 +178,7 @@
 }
 
 .aboutus-page .box4-content .box4 .title {
-    font-size: 72px;
+    font-size: 3.75vw;
     font-family: Gilroy, Gilroy-Light;
     font-weight: 300;
     text-align: left;
@@ -189,9 +200,10 @@
     width: 8.33vw;
     height: 8.33vw;
     background: white;
-    border-radius: 25px;
+    border-radius: 1.3vw;
     box-shadow: 7.98px 15.01px 32px 0px rgba(232, 243, 255, 0.66);
     padding: 7px 10px;
+    border: none;
 }
 
 .aboutus-page .box4-content .box4 .card .num {
@@ -206,6 +218,7 @@
 .aboutus-page .box4-content .box4 .card .tip {
     font-size: 1vw;
     line-height: 1;
+    font-family: NexaBold, NexaBold-Regular;
 }
 
 .aboutus-page .box4-content .box4.pic {
@@ -229,6 +242,11 @@
     text-align: center;
     position: relative;
 }
+
+.aboutus-page .box5-content.mobile{
+    display: none;
+}
+
 .aboutus-page .box5-content .title{
     font-size: 3.75vw;
     font-family: Gilroy, Gilroy-Light;
@@ -323,6 +341,7 @@
     position: relative;
     display: inline-block;
     white-space: normal;
+    border: none;
 }
 .aboutus-page .box5-content .card:hover{
     box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
@@ -339,13 +358,15 @@
     height: 1px;
     background: #e5e5e5;
     position: absolute;
-    top: 24.895vw;
+    top: calc(24.895vw + 1px);
     left: 0;
 }
 .aboutus-page .box5-content .card .split{
     position: absolute;
     top: 7.55vw;
     left: 0;
+    transition: all 0.5s;
+    width: 0;
 }
 .aboutus-page .box5-content .card .dot{
     background: #e5e5e5;
@@ -353,7 +374,7 @@
     top: 7.55vw;
     left: 2.34vw;
     border-radius: 50%;
-    width: 5px;
+    width: 0;
     height: 5px;
     transform: translateY(-50%);
 }
@@ -364,6 +385,7 @@
     position: absolute;
     top: 3vw;
     right: 2vw;
+    display: none;
 }
 
 .aboutus-page .box5-content .card .name{
@@ -386,14 +408,18 @@
 }
 .aboutus-page .box5-content .card:hover .split,.dot{
     background: #008bff;
+    width: 100%;
 }
 .aboutus-page .box5-content .card:hover .dot{
     background: #008bff;
+    width: 5px;
 }
 .aboutus-page .box5-content .card:hover .name{
     color: #008bff;
 }
-
+.aboutus-page .box5-content .card:hover .logo{
+    display: block;
+}
 .aboutus-page .box6-content{
     width: 100%;
     height: calc(36.45vw + 6.97vw);
@@ -437,33 +463,50 @@
     left: 0;
     transform-origin:left bottom;
 }
-.aboutus-page .box6-content .cards.last{
-    opacity: 0.2;
-    transform: rotate(-10deg);
-    pointer-events: none;/* 点击穿透 */
+.aboutus-page .box6-content .cards{
+
 }
 
 .aboutus-page .box6-content .card{
+    position: relative;
     width: 17.8vw;
     min-height: 17.8vw;
     background: #ffffff;
     border-radius: 24px;
     padding: 3.17vw 1.56vw;
     box-sizing: border-box;
-}
-.aboutus-page .box6-content .cards.last .card{
-    display: none;
-    transition: all 0.8s;
+    z-index: 1;
     cursor: default;
 }
-.aboutus-page .box6-content .cards.first{
-    z-index: 100;
+
+.aboutus-page .box6-content .card:after{
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: 1.56vw;
+    width: 3.12vw;
+    height: 4px;
+    background: #40d5fa;
+    border-radius: 2px;
+    transition: width 0.5s;
 }
-.aboutus-page .box6-content .cards.last .card div{
-    display: none;
+.aboutus-page .box6-content .card:hover:after{
+    width: calc(100% - 1.56vw * 2);
 }
-.aboutus-page .box6-content .cards.last .card:first-child{
-    display: block;
+
+.aboutus-page .box6-content .card:hover .bg{
+    opacity: 0.2;
+    transition: transform 0.8s;
+    transform-origin: left bottom;
+    transform: rotate(-10deg);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    height: 100%;
+    width: 100%;
+    background: white;
+    border-radius: 24px;
 }
 .aboutus-page .box6-content .cards .card .date{
     font-size: 0.729vw;
@@ -530,36 +573,43 @@
         height: 90.66vw;
         object-fit: cover;
     }
+
     .aboutus-page .box1 {
         height: 90.66vw;
     }
-    .aboutus-page .box1-content{
+
+    .aboutus-page .box1-content {
         margin: 16.93vw auto 0 auto;
         width: 82.4vw;
         text-align: center;
     }
-    .aboutus-page .box1-title{
+
+    .aboutus-page .box1-title {
         font-size: 8vw;
         width: 100%;
         line-height: 1;
         text-align: center;
     }
-    .aboutus-page .box1-tip{
+
+    .aboutus-page .box1-tip {
         font-size: 5.33vw;
         margin: 4vw 0;
         width: 100%;
         text-align: center;
         line-height: 5.33vw;
     }
-    .aboutus-page .box1-content button{
+
+    .aboutus-page .box1-content button {
         width: 40vw;
         height: 10.8vw;
     }
-    .aboutus-page .box2-content img{
+
+    .aboutus-page .box2-content img {
         width: 59.06vw;
         height: 33.86vw;
     }
-    .aboutus-page .box2-content div{
+
+    .aboutus-page .box2-content div {
         font-size: 3.7vw;
         line-height: 4.5vw;
         display: block;
@@ -568,4 +618,206 @@
         height: auto;
         word-break: break-all;
     }
+
+
+    .aboutus-page .box2-content {
+        margin: 9.33vw auto 8vw auto;
+    }
+
+    .aboutus-page .box2.mobile {
+        display: block;
+    }
+
+    .aboutus-page .box2.pc {
+        display: none;
+    }
+
+    .aboutus-page .box2 {
+        height: 106vw;
+        position: relative;
+    }
+
+    .aboutus-page .box2 .box1-content .logo {
+        width: 26.8vw;
+        height: 7.73vw;
+        position: absolute;
+        top: 10.53vw;
+        left: 4vw;
+    }
+
+    .aboutus-page .box3-content {
+        width: 100%;
+        height: 100%;
+    }
+
+    .aboutus-page .box3-content .box3 {
+        display: flex;
+        align-items: center;
+        flex-flow: column;
+        width: 50vw;
+    }
+
+    .aboutus-page .box3-content .num {
+        font-size: 14vw;
+        margin-top: 18vw;
+    }
+
+    .aboutus-page .box3-content .box3-title {
+        font-size: 6.5vw;
+        line-height: 1;
+        text-align: center;
+        margin: 3vw 0;
+        padding: 0 1vw;
+    }
+
+    .aboutus-page .box3-content .box3-tip {
+        font-size: 5vw;
+        line-height: 1.2;
+        text-align: center;
+        margin: 3vw 0;
+        padding: 0 1vw;
+    }
+
+    .aboutus-page .box3-content img {
+        height: auto;
+        margin-top: 0;
+    }
+
+    .aboutus-page .box4-content {
+        display: block;
+        height: auto;
+        background-position: top;
+        background-size: contain;
+        background-repeat: no-repeat;
+    }
+
+    .aboutus-page .box4-content .box4 .cards {
+        width: 100%;
+    }
+
+    .aboutus-page .box4-content .box4 .title {
+        font-family: NexaBold, NexaBold-Regular;
+        font-size: 6.4vw;
+        padding: 15.46vw 0 5.33vw 0;
+        margin: 0;
+        text-align: center;
+    }
+
+    .aboutus-page .box4-content .box4 .card {
+        width: 28vw;
+        height: 28vw;
+        border-radius: 3vw;
+        padding: 4vw 2.66vw;
+    }
+
+    .aboutus-page .box4-content .box4 img {
+        width: 5.33vw;
+        height: 5.33vw;
+        top: 2.66vw;
+        right: 2.66vw;
+    }
+
+    .aboutus-page .box4-content .box4 .card .num {
+        font-size: 8vw;
+        font-family: NexaBold, NexaBold-Regular;
+    }
+
+    .aboutus-page .box4-content .box4 .card .tip {
+        font-size: 2.93vw;
+        margin-top: 3.73vw;
+    }
+
+    .aboutus-page .box4-content .box4.pic {
+        height: 77.6vw;
+        width: 100%;
+        margin-top: 8vw;
+    }
+
+    .aboutus-page .box5-content.pc {
+        display: none;
+    }
+
+    .aboutus-page .box5-content.mobile {
+        display: block;
+    }
+
+    .aboutus-page .box5-content .title {
+        font-size: 6.3vw;
+        font-family: NexaBold, NexaBold-Regular;
+        font-weight: 400;
+        text-align: center;
+        color: #008bff;
+        margin-bottom: 5.33vw;
+    }
+
+    .aboutus-page .box5-content .nav {
+        height: 12.4vw;
+        background: #f2f2f2;
+        padding: 0 8vw;
+        white-space: nowrap;
+        display: block;
+        overflow-y: auto;
+    }
+
+    .aboutus-page .box5-content .nav::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+
+    .aboutus-page .box5-content .nav .nav-title{
+        line-height: 12.4vw;
+        font-size: 4.8vw;
+        font-family: Gilroy, Gilroy-Bold;
+        font-weight: 700;
+        color: #999999;
+        margin-right: 8.66vw;
+        position: relative;
+        display: inline-block;
+    }
+
+    .aboutus-page .box5-content .nav .nav-title:nth-last-child(1){
+        margin-right: 0;
+    }
+    .aboutus-page .box5-content .nav .nav-title:hover:after{
+        content: '';
+        position: absolute;
+        bottom: 1.85vw;
+        left: 50%;
+        transform: translateX(-50%);
+        height: 3px;
+        width: 60%;
+        background: #008bff;
+    }
+    .aboutus-page .box5-content .nav .nav-title:hover{
+        color: #008bff;
+    }
+
+    .aboutus-page .box5-content .content{
+        text-align: left;
+        padding: 1.33vw 8vw 16vw 8vw;
+    }
+    .aboutus-page .box5-content .content .name{
+        font-size: 4.8vw;
+        font-family: NexaBold, NexaBold-Regular;
+        font-weight: 400;
+        text-align: left;
+        color: #333333;
+        margin: 4vw 0 0 0;
+    }
+    .aboutus-page .box5-content .content .desc{
+        font-size: 3.73vw;
+        font-family: Myriad Pro, Myriad Pro-Regular;
+        font-weight: 400;
+        text-align: left;
+        color: #242a30;
+        margin-top: 2.66vw 0 0 0;
+    }
+
+    .aboutus-page .box6-content{
+        display: none;
+    }
+
+    .aboutus-page footer{
+        display: none;
+    }
 }

assets/style/common/index.css

@@ -1,6 +1,6 @@
 @import "./normalize.css";
 /*轮播图*/
-@import "https://unpkg.com/swiper@8/swiper-bundle.min.css";
+@import "https://cdn.staticfile.org/Swiper/8.2.2/swiper-bundle.min.css";
 /*按钮hover特效*/
 @import "https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css";
 /*css特效*/

assets/style/header1/index.css

@@ -11,7 +11,7 @@
   z-index: 9;
 }
 .header1-page.bg {
-  background: rgba(0,0,0,0.3);
+  background: rgba(0,0,0,0.7);
 }
 
 .header1-page .logo-img {