Merge branch 'master' of http://115.29.66.169:10080/cyz/panda_web

about_us.html

@@ -87,16 +87,159 @@
     </div>
     <div class="box5-content">
         <div class="title">Milestone</div>
+        <div class="split"></div>
         <div class="page-box">
-            <img src="./assets/images/about_us/arrow2.png" />
-            <img src="./assets/images/about_us/arrow3.png" />
+            <div onclick="lastPage()" class="img first"></div>
+            <div onclick="nextPage()" class="img last"></div>
         </div>
-        <div class="card">
-            <div class="title">2021</div>
+        <div class="cards">
+            <div class="card">
+                <div class="split"></div>
+                <div class="dot"></div>
+                <div class="card-title">2021</div>
+                <div class="list">
+                    <div class="name">April1</div>
+                    <div class="desc">Launched the business of VouchersPanda</div>
+                </div>
+                <div class="list">
+                    <div class="name">March</div>
+                    <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">April2</div>
+                    <div class="desc">Launched the business of VouchersPanda</div>
+                </div>
+                <div class="list">
+                    <div class="name">March</div>
+                    <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">April3</div>
+                    <div class="desc">Launched the business of VouchersPanda</div>
+                </div>
+                <div class="list">
+                    <div class="name">March</div>
+                    <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">April4</div>
+                    <div class="desc">Launched the business of VouchersPanda</div>
+                </div>
+                <div class="list">
+                    <div class="name">March</div>
+                    <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">April5</div>
+                    <div class="desc">Launched the business of VouchersPanda</div>
+                </div>
+                <div class="list">
+                    <div class="name">March</div>
+                    <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">April6</div>
+                    <div class="desc">Launched the business of VouchersPanda</div>
+                </div>
+                <div class="list">
+                    <div class="name">March</div>
+                    <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">April7</div>
+                    <div class="desc">Launched the business of VouchersPanda</div>
+                </div>
+                <div class="list">
+                    <div class="name">March</div>
+                    <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 class="list">
+                    <div class="name">March</div>
+                    <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">April9</div>
+                    <div class="desc">Launched the business of VouchersPanda</div>
+                </div>
+                <div class="list">
+                    <div class="name">March</div>
+                    <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">April10</div>
+                    <div class="desc">Launched the business of VouchersPanda</div>
+                </div>
+                <div class="list">
+                    <div class="name">March</div>
+                    <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">April11</div>
+                    <div class="desc">Launched the business of VouchersPanda</div>
+                </div>
+                <div class="list">
+                    <div class="name">March</div>
+                    <div class="desc">Launched the business of Panda Fresh</div>
+                </div>
+            </div>
         </div>
     </div>
 </div>
-<script type="module" src="./assets/js/common/index.js"></script>
-<script type="module" src="./assets/js/about_us/index.js"></script>
+<script type="module" src="./assets/js/common/index.js" defer></script>
+<script src="./assets/js/about_us/index.js" defer></script>
 </body>
 </html>

assets/js/about_us/index.js

@@ -13,7 +13,21 @@ let swiper = new Swiper("#swiper1", {
     }
 });
 
-//执行动画
-$(function (){
-
-})
+//上一页、下一页
+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');
+    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');
+    pageNum +=1;
+    $(".aboutus-page .box5-content .cards").animate({
+        scrollLeft: ($(window).width()*0.25*(pageNum-1)*3 + 20*(pageNum-1)*3)
+    },300)
+}

assets/style/about_us/index.css

@@ -1,3 +1,7 @@
+.aboutus-page{
+    overflow-x: hidden;
+}
+
 /* 轮播图 */
 .aboutus-page .swiper {
     width: 100%;
@@ -209,8 +213,9 @@
 }
 .aboutus-page .box5-content {
     height: 48.59vw;
-    padding: 6.25vw 12.5vw;
+    padding: 6.25vw 0;
     text-align: center;
+    position: relative;
 }
 .aboutus-page .box5-content .title{
     font-size: 72px;
@@ -218,41 +223,121 @@
     font-weight: 300;
     color: #018cff;
     text-align: center;
-    margin-bottom: 3.12vw;
 }
 .aboutus-page .box5-content .page-box {
-   text-align: right;
+    text-align: right;
+    padding-right: 12.5vw;
 }
-.aboutus-page .box5-content .page-box img{
+.aboutus-page .box5-content .page-box .img{
     width: 3.125vw;
     height: 3.125vw;
     margin-bottom: 2.08vw;
+    display: inline-block;
 }
-.aboutus-page .box5-content .page-box img:first-child{
+.aboutus-page .box5-content .page-box .first{
     margin-right: 10px;
+    background-image: url("../../../assets/images/about_us/arrow2.png");
+    background-size: 100% 100%;
 }
-.aboutus-page .box5-content .page-box img.first:first-child{
-    margin-right: 10px;
+
+.aboutus-page .box5-content .page-box .last{
+    background-image: url("../../../assets/images/about_us/arrow2.png");
+    background-size: 100% 100%;
     transform: rotate(180deg);
 }
-.aboutus-page .box5-content .page-box img.last:last-child{
+
+.aboutus-page .box5-content .page-box .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{
+    transform: rotate(0deg);
+}
+.aboutus-page .box5-content .cards{
+    position: absolute;
+    top: 17.34vw;
+    margin: 0 12.5vw;
+    white-space: nowrap;
+    width: 100%;
+    vertical-align: top;
+    overflow-x: auto;
+    padding-bottom: 12px;
+}
+/* 隐藏滚动条 */
+.aboutus-page .box5-content .cards::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
 .aboutus-page .box5-content .card{
+    transition: all 0.3s;
     width: 25vw;
-    height: 25vw;
     background: #ffffff;
     border-radius: 24px;
     margin-right: 20px;
-    padding: 73px 45px 39px 73px;
+    padding: 3.8vw 2.34vw 2.03vw 2.34vw;
+    box-sizing: border-box;
     text-align: left;
+    position: relative;
+    display: inline-block;
+    white-space: normal;
 }
 .aboutus-page .box5-content .card:hover{
-    box-shadow: 0 12px 12px 0 rgba(0,0,0,0.1);
+    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
 }
-.aboutus-page .box5-content .title{
+.aboutus-page .box5-content .card .card-title{
     font-size: 42px;
     font-family: DINPro, DINPro-Bold;
     font-weight: 700;
+    color: #242A30;
+    margin-bottom: 2.18vw;
+}
+.aboutus-page .box5-content .split{
+    width: 100%;
+    height: 1px;
+    background: #e5e5e5;
+    position: absolute;
+    top: 24.895vw;
+    left: 0;
+}
+.aboutus-page .box5-content .card .split{
+    position: absolute;
+    top: 7.55vw;
+    left: 0;
+}
+.aboutus-page .box5-content .card .dot{
+    background: #e5e5e5;
+    position: absolute;
+    top: calc(7.55vw - 1.7px);
+    left: 2.34vw;
+    border-radius: 50%;
+    width: 5px;
+    height: 5px;
+}
+.aboutus-page .box5-content .card .name{
+    font-size: 24px;
+    font-family: Gilroy, Gilroy-Bold;
+    font-weight: 700;
+    color: #242A30;
+    margin-bottom: 0.46vw;
+}
+.aboutus-page .box5-content .card .desc{
+    font-size: 16px;
+    font-family: Gilroy, Gilroy-Medium;
+    font-weight: 500;
+    color: #242a30;
+    margin-bottom: 2.08vw;
+}
+
+.aboutus-page .box5-content .card:hover .card-title{
+    color: #008bff;
+}
+.aboutus-page .box5-content .card:hover .split,.dot{
+    background: #008bff;
+}
+.aboutus-page .box5-content .card:hover .dot{
+    background: #008bff;
+}
+.aboutus-page .box5-content .card:hover .name{
     color: #008bff;
 }