更新

about_us.html

@@ -89,8 +89,8 @@
         <div class="title">Milestone</div>
         <div class="split"></div>
         <div class="page-box">
-            <div onclick="lastPage()" class="img first"></div>
-            <div onclick="nextPage()" class="img last"></div>
+            <div onclick="lastPage()" class="img first1"></div>
+            <div onclick="nextPage()" class="img last1"></div>
         </div>
         <div class="cards">
             <div class="card">
@@ -184,56 +184,67 @@
                     <div class="desc">Launched the business of Panda Fresh</div>
                 </div>
             </div>
-            <div class="card">
-                <div class="split"></div>
-                <div class="dot"></div>
-                <div class="card-title">2021</div>
-                <div class="list">
-                    <div class="name">April8</div>
-                    <div class="desc">Launched the business of VouchersPanda</div>
+        </div>
+    </div>
+    <div class="box6-content">
+        <div class="tool">
+            <div class="title">News</div>
+            <div class="page-box">
+                <div onclick="lastPage2()" class="img first2"></div>
+                <div onclick="nextPage2()" class="img last2"></div>
+            </div>
+        </div>
+        <div class="cards-box">
+            <div class="cards index1 last">
+                <div class="card">
+                    <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</div>
                 </div>
-                <div class="list">
-                    <div class="name">March</div>
-                    <div class="desc">Launched the business of Panda Fresh</div>
+                <div class="card">
+                    <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</div>
                 </div>
-            </div>
-            <div class="card">
-                <div class="split"></div>
-                <div class="dot"></div>
-                <div class="card-title">2021</div>
-                <div class="list">
-                    <div class="name">April9</div>
-                    <div class="desc">Launched the business of VouchersPanda</div>
+                <div class="card">
+                    <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</div>
                 </div>
-                <div class="list">
-                    <div class="name">March</div>
-                    <div class="desc">Launched the business of Panda Fresh</div>
+                <div class="card">
+                    <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</div>
                 </div>
             </div>
-            <div class="card">
-                <div class="split"></div>
-                <div class="dot"></div>
-                <div class="card-title">2021</div>
-                <div class="list">
-                    <div class="name">April10</div>
-                    <div class="desc">Launched the business of VouchersPanda</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</div>
                 </div>
-                <div class="list">
-                    <div class="name">March</div>
-                    <div class="desc">Launched the business of Panda Fresh</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</div>
                 </div>
-            </div>
-            <div class="card">
-                <div class="split"></div>
-                <div class="dot"></div>
-                <div class="card-title">2021</div>
-                <div class="list">
-                    <div class="name">April11</div>
-                    <div class="desc">Launched the business of VouchersPanda</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</div>
                 </div>
-                <div class="list">
-                    <div class="name">March</div>
-                    <div class="desc">Launched the business of Panda Fresh</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</div>
                 </div>
             </div>
         </div>

assets/js/about_us/index.js

@@ -16,18 +16,81 @@ let swiper = new Swiper("#swiper1", {
 //上一页、下一页
 var pageNum = 1;//默认第一页
 function lastPage(){
-    $('.aboutus-page .box5-content .page-box .img.first').addClass('active');
-    $('.aboutus-page .box5-content .page-box .img.last').removeClass('active');
+    $('.aboutus-page .box5-content .page-box .img.first1').addClass('active');
+    $('.aboutus-page .box5-content .page-box .img.last1').removeClass('active');
     pageNum = pageNum>1?pageNum-1:1;
     $(".aboutus-page .box5-content .cards").animate({
         scrollLeft: ($(window).width()*0.25*(pageNum-1)*3 + 20*(pageNum-1)*3)
     },300)
 }
 function nextPage(){
-    $('.aboutus-page .box5-content .page-box .img.last').addClass('active');
-    $('.aboutus-page .box5-content .page-box .img.first').removeClass('active');
+    $('.aboutus-page .box5-content .page-box .img.last1').addClass('active');
+    $('.aboutus-page .box5-content .page-box .img.first1').removeClass('active');
     pageNum +=1;
     $(".aboutus-page .box5-content .cards").animate({
         scrollLeft: ($(window).width()*0.25*(pageNum-1)*3 + 20*(pageNum-1)*3)
     },300)
 }
+
+//切换卡片
+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
+        })
+        setTimeout(function () {
+
+        },800)
+    }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
+        })
+    }
+}
+
+//上一页、下一页
+function lastPage2(){
+    switchCard();
+    $('.aboutus-page .box6-content .page-box .img.first2').addClass('active');
+    $('.aboutus-page .box6-content .page-box .img.last2').removeClass('active');
+}
+function nextPage2(){
+    switchCard();
+    $('.aboutus-page .box6-content .page-box .img.first2').removeClass('active');
+    $('.aboutus-page .box6-content .page-box .img.last2').addClass('active');
+}

assets/style/about_us/index.css

@@ -188,7 +188,7 @@
 }
 
 .aboutus-page .box4-content .box4 .card .num {
-    font-size: 48px;
+    font-size: 2.5vw;
     font-family: SamsungSharpSans, SamsungSharpSans-Medium;
     font-weight: 500;
     text-align: left;
@@ -212,48 +212,77 @@
     object-fit: fill;
 }
 .aboutus-page .box5-content {
-    height: 48.59vw;
+    height: 32vw;
     padding: 6.25vw 0;
     text-align: center;
     position: relative;
 }
 .aboutus-page .box5-content .title{
-    font-size: 72px;
+    font-size: 3.75vw;
     font-family: Gilroy, Gilroy-Light;
     font-weight: 300;
     color: #018cff;
     text-align: center;
 }
-.aboutus-page .box5-content .page-box {
+/* 分页 */
+.aboutus-page .page-box {
     text-align: right;
     padding-right: 12.5vw;
 }
-.aboutus-page .box5-content .page-box .img{
+.aboutus-page .page-box .img{
     width: 3.125vw;
     height: 3.125vw;
     margin-bottom: 2.08vw;
     display: inline-block;
+    cursor: pointer;
+    background-size: 100% 100%;
+    line-height: 3.125vw;
 }
-.aboutus-page .box5-content .page-box .first{
+/*白色背景*/
+.aboutus-page .page-box .first1{
     margin-right: 10px;
     background-image: url("../../../assets/images/about_us/arrow2.png");
-    background-size: 100% 100%;
 }
 
-.aboutus-page .box5-content .page-box .last{
+.aboutus-page .page-box .last1{
     background-image: url("../../../assets/images/about_us/arrow2.png");
-    background-size: 100% 100%;
     transform: rotate(180deg);
 }
 
-.aboutus-page .box5-content .page-box .active{
+.aboutus-page .page-box .first1.active{
     background-image: url("../../../assets/images/about_us/arrow3.png")!important;
-    background-size: 100% 100%;
     transform: rotate(180deg);
 }
-.aboutus-page .box5-content .page-box .last.active{
+.aboutus-page .page-box .last1.active{
+    background-image: url("../../../assets/images/about_us/arrow3.png")!important;
+    transform: rotate(180deg);
+}
+.aboutus-page .page-box .last1.active{
+    transform: rotate(0deg);
+}
+/*蓝色背景*/
+.aboutus-page .page-box .first2{
+    margin-right: 10px;
+    background-image: url("../../../assets/images/about_us/arrow4.png");
+}
+
+.aboutus-page .page-box .last2{
+    background-image: url("../../../assets/images/about_us/arrow4.png");
+    transform: rotate(180deg);
+}
+
+.aboutus-page .page-box .first2.active{
+    background-image: url("../../../assets/images/about_us/arrow5.png")!important;
+    transform: rotate(180deg);
+}
+.aboutus-page .page-box .last2.active{
+    background-image: url("../../../assets/images/about_us/arrow5.png")!important;
+    transform: rotate(180deg);
+}
+.aboutus-page .page-box .last2.active{
     transform: rotate(0deg);
 }
+
 .aboutus-page .box5-content .cards{
     position: absolute;
     top: 17.34vw;
@@ -263,6 +292,7 @@
     vertical-align: top;
     overflow-x: auto;
     padding-bottom: 12px;
+    text-align: left;
 }
 /* 隐藏滚动条 */
 .aboutus-page .box5-content .cards::-webkit-scrollbar {
@@ -286,7 +316,7 @@
     box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
 }
 .aboutus-page .box5-content .card .card-title{
-    font-size: 42px;
+    font-size: 2.18vw;
     font-family: DINPro, DINPro-Bold;
     font-weight: 700;
     color: #242A30;
@@ -308,21 +338,22 @@
 .aboutus-page .box5-content .card .dot{
     background: #e5e5e5;
     position: absolute;
-    top: calc(7.55vw - 1.7px);
+    top: 7.55vw;
     left: 2.34vw;
     border-radius: 50%;
     width: 5px;
     height: 5px;
+    transform: translateY(-50%);
 }
 .aboutus-page .box5-content .card .name{
-    font-size: 24px;
+    font-size: 1.25vw;
     font-family: Gilroy, Gilroy-Bold;
     font-weight: 700;
     color: #242A30;
     margin-bottom: 0.46vw;
 }
 .aboutus-page .box5-content .card .desc{
-    font-size: 16px;
+    font-size: 0.83vw;
     font-family: Gilroy, Gilroy-Medium;
     font-weight: 500;
     color: #242a30;
@@ -341,3 +372,106 @@
 .aboutus-page .box5-content .card:hover .name{
     color: #008bff;
 }
+
+.aboutus-page .box6-content{
+    width: 100%;
+    height: 36.45vw;
+    background: #008cff;
+    padding: 0 12.5vw;
+    box-sizing: border-box;
+}
+
+.aboutus-page .box6-content .tool{
+    padding-top: 4.68vw;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2.91vw;
+}
+.aboutus-page .box6-content .tool .title{
+    font-size: 4.479vw;
+    font-family: Gilroy, Gilroy-Light;
+    font-weight: 300;
+    text-align: center;
+    color: #ffffff;
+}
+.aboutus-page .box6-content .tool .page-box{
+    padding-right: 0;
+}
+.aboutus-page .box6-content .tool .page-box .img{
+    margin-bottom: 0;
+}
+
+.aboutus-page .box6-content .cards-box{
+    width: 100%;
+    position: relative;
+}
+
+.aboutus-page .box6-content .cards{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    top: 0;
+    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 .card{
+    width: 17.8vw;
+    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;
+}
+.aboutus-page .box6-content .cards.first{
+    z-index: 100;
+}
+.aboutus-page .box6-content .cards.last .card div{
+    display: none;
+}
+.aboutus-page .box6-content .cards.last .card:first-child{
+    display: block;
+}
+.aboutus-page .box6-content .cards .card .date{
+    font-size: 0.729vw;
+    font-family: Gilroy, Gilroy-Bold;
+    font-weight: 700;
+    text-align: center;
+    color: #008bff;
+    margin-bottom: 0.93vw;
+}
+.aboutus-page .box6-content .cards .card .card-title{
+    font-size: 1.25vw;
+    font-family: Gilroy, Gilroy-Bold;
+    font-weight: 700;
+    text-align: left;
+    color: #242a30;
+    margin-bottom: 2.34vw;
+}
+.aboutus-page .box6-content .cards .card .desc{
+    font-size: 0.83vw;
+    font-family: Gilroy, Gilroy-Medium;
+    font-weight: 500;
+    text-align: left;
+    color: #242a30;
+    margin-bottom: 0.14vw;
+}
+
+.aboutus-page .box6-content .cards .card .arrow{
+    font-size: 0.729vw;
+    font-family: Gilroy, Gilroy-Bold;
+    font-weight: 700;
+    text-align: center;
+    color: #008bff;
+}