Home Explore Help
Register Sign In
cyz
/
panda_web
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

更新代码

cyz 3 years ago
parent
c10e8604a9
commit
8f3d207b9d
14 changed files with 225 additions and 23 deletions
Split View Show Diff Stats
  1. 18 9
      about_us.html
  2. BIN
      assets/images/common/bg1.png
  3. BIN
      assets/images/common/other-app1.png
  4. BIN
      assets/images/common/other-app2.png
  5. BIN
      assets/images/common/other-app3.png
  6. BIN
      assets/images/common/other-app4.png
  7. BIN
      assets/images/common/other-app5.png
  8. BIN
      assets/images/common/other-app6.png
  9. BIN
      assets/images/common/other-app7.png
  10. 0 3
      assets/js/about_us/index.js
  11. 94 11
      assets/style/about_us/index.css
  12. 6 0
      assets/style/common/index.css
  13. 83 0
      assets/style/footer1/index.css
  14. 24 0
      assets/style/header1/index.css

+ 18 - 9
about_us.html
View File 

@@ -2,12 +2,14 @@
 
 <html>

 <head>

     <meta charset="utf-8"/>

+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

     <title>关于我们</title>

     <link rel="stylesheet" href="./assets/style/common/index.css"/>

     <link rel="stylesheet" href="./assets/style/about_us/index.css"/>

 </head>

 <body>

 <div class="aboutus-page">

+   <!-- pc端-->

     <div id="swiper1" class="swiper">

         <div class="swiper-wrapper">

             <div class="swiper-slide">

@@ -20,6 +22,7 @@
 
         <div class="swiper-pagination"></div>

     </div>

     <div class="box1">

+        <!--头部-->

         <!--#include file="./components/header1.html"-->

         <div class="box1-content">

             <div class="box1-title">

@@ -72,13 +75,17 @@
 
             <div class="cards">

                 <div class="card">

                     <div class="num">60</div>

+                    <div class="tip">Major cities sand ergions</div>

                     <img src="./assets/images/about_us/box4-icon1.png" />

                 </div>

                 <div class="card">

+                    <div class="num">60</div>

+                    <div class="tip">Major cities sand ergions</div>

                     <img src="./assets/images/about_us/box4-icon2.png" />

                 </div>

                 <div class="card">

-

+                    <div class="num">60</div>

+                    <div class="tip">Major cities sand ergions</div>

                     <img src="./assets/images/about_us/box4-icon3.png" />

                 </div>

             </div>

@@ -200,25 +207,25 @@
 
                     <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 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, 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 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, 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 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, 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 class="arrow">VIEW MORE<i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>

                 </div>

             </div>

             <div class="cards index2 first">

@@ -226,29 +233,31 @@
 
                     <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 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</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</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</div>

+                    <div class="arrow">VIEW MORE<i class="fa fa-long-arrow-right" aria-hidden="true"></i></div>

                 </div>

             </div>

         </div>

     </div>

+    <!--头部-->

+    <!--#include file="./components/footer1.html"-->

 </div>

 <script type="module" src="./assets/js/common/index.js" defer></script>

 <script src="./assets/js/about_us/index.js" defer></script>

BIN
assets/images/common/bg1.png
View File


BIN
assets/images/common/other-app1.png
View File


BIN
assets/images/common/other-app2.png
View File


BIN
assets/images/common/other-app3.png
View File


BIN
assets/images/common/other-app4.png
View File


BIN
assets/images/common/other-app5.png
View File


BIN
assets/images/common/other-app6.png
View File


BIN
assets/images/common/other-app7.png
View File


+ 0 - 3
assets/js/about_us/index.js
View File 

@@ -56,9 +56,6 @@ function switchCard(){
 
         $('.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');

+ 94 - 11
assets/style/about_us/index.css
View File 

@@ -1,6 +1,4 @@
 
-.aboutus-page{

-    overflow-x: hidden;

-}

+

 

 /* 轮播图 */

 .aboutus-page .swiper {

@@ -125,6 +123,14 @@
 
     text-align: left;

     color: #ffffff;

 }

+.aboutus-page .box3-content .tip{

+    font-size: 1.14vw;

+    font-family: NexaBold, NexaBold-Regular;

+    font-weight: 400;

+    text-align: left;

+    color: #333333;

+    line-height: 1.19vw;

+}

 

 .aboutus-page .box3-content .box3-title {

     opacity: 0.7;

@@ -178,7 +184,8 @@
 
 .aboutus-page .box4-content .box4 .card {

     position: relative;

     display: flex;

-    align-items: center;

+    flex-flow: column;

+    justify-content: center;

     width: 8.33vw;

     height: 8.33vw;

     background: white;

@@ -194,6 +201,10 @@
 
     text-align: left;

     color: #008cff;

     line-height: 23px;

+    margin: 1vw 0 0.7vw 0;

+}

+.aboutus-page .box4-content .box4 .card .tip {

+    font-size: 1vw;

 }

 

 .aboutus-page .box4-content .box4.pic {

@@ -375,7 +386,7 @@
 
 

 .aboutus-page .box6-content{

     width: 100%;

-    height: 36.45vw;

+    height: calc(36.45vw + 6.97vw);

     background: #008cff;

     padding: 0 12.5vw;

     box-sizing: border-box;

@@ -433,6 +444,7 @@
 
 .aboutus-page .box6-content .cards.last .card{

     display: none;

     transition: all 0.8s;

+    cursor: default;

 }

 .aboutus-page .box6-content .cards.first{

     z-index: 100;

@@ -447,31 +459,102 @@
 
     font-size: 0.729vw;

     font-family: Gilroy, Gilroy-Bold;

     font-weight: 700;

-    text-align: center;

-    color: #008bff;

+    text-align: left;

+    color: #242a30;

     margin-bottom: 0.93vw;

 }

+.aboutus-page .box6-content .card:hover .date{

+    color: #008bff;

+}

 .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;

+    overflow: hidden;

+    text-overflow: ellipsis;

+    display: -webkit-box;

+    -webkit-box-orient: vertical;

+    -webkit-line-clamp: 2;

+    word-break: break-all;

+}

+.aboutus-page .box6-content .card:hover .card-title{

+    color: #008bff;

 }

 .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;

+    color: #242A30;

+    margin-bottom: 1.4vw;

+    overflow: hidden;

+    text-overflow: ellipsis;

+    display: -webkit-box;

+    -webkit-box-orient: vertical;

+    -webkit-line-clamp: 2;

+    word-break: break-all;

 }

 

 .aboutus-page .box6-content .cards .card .arrow{

     font-size: 0.729vw;

     font-family: Gilroy, Gilroy-Bold;

     font-weight: 700;

-    text-align: center;

+    text-align: left;

+    color: #242A30;

+}

+

+.aboutus-page .box6-content .cards .card .arrow i{

+    margin-left: 10px;

+}

+

+.aboutus-page .box6-content .card:hover .arrow{

     color: #008bff;

 }

+

+

+/*移动端*/

+@media screen and (max-width: 960px) {

+    .aboutus-page .swiper-slide img {

+        height: 90.66vw;

+        object-fit: cover;

+    }

+    .aboutus-page .box1 {

+        height: 90.66vw;

+    }

+    .aboutus-page .box1-content{

+        margin: 16.93vw auto 0 auto;

+        width: 82.4vw;

+        text-align: center;

+    }

+    .aboutus-page .box1-title{

+        font-size: 8vw;

+        width: 100%;

+        line-height: 1;

+        text-align: center;

+    }

+    .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{

+        width: 40vw;

+        height: 10.8vw;

+    }

+    .aboutus-page .box2-content img{

+        width: 59.06vw;

+        height: 33.86vw;

+    }

+    .aboutus-page .box2-content div{

+        font-size: 3.7vw;

+        display: block;

+        width: 88vw;

+        margin: 4vw auto 8vw auto;

+        height: auto;

+        word-break: break-all;

+    }

+}

+ 6 - 0
assets/style/common/index.css
View File 

@@ -5,6 +5,8 @@
 
 @import "https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css";

 /*css特效*/

 @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";

 

 /*字体*/

 @font-face{

@@ -16,3 +18,7 @@
 
 .hide-ele{

     display: none;

 }

+body{

+    -webkit-overflow-scrolling: touch;

+    overflow-scrolling: touch;

+}

+ 83 - 0
assets/style/footer1/index.css
View File 

@@ -0,0 +1,83 @@
 
+.footer-page{

+   position: relative;

+}

+.footer-page .bg{

+    position: absolute;

+    top: -6.97vw;

+    left: 0;

+    width: 100%;

+    height: calc(24.32vw + 1.71vw);

+    margin-bottom: 33px;

+    background-image: url("../../../assets/images/common/bg1.png");

+    background-size: 100% 100%;

+    padding: 6.97vw 12.55vw 0 12.55vw;

+    box-sizing: border-box;

+}

+

+.footer-page .content{

+    padding-top: 1.71vw;

+    display: flex;

+    justify-content: space-between;

+}

+.footer-page .content .left .down{

+    font-size: 1.56vw;

+    font-family: Gilroy, Gilroy-Bold;

+    font-weight: 700;

+    text-align: left;

+    color: #018cff;

+    margin-bottom: 1.3vw;

+}

+

+.footer-page .content .left img{

+    width: 7.81vw;

+    height: 2.5vw;

+}

+

+.footer-page .content .right{

+    display: flex;

+    justify-content: space-between;

+    width: 40.36vw;

+}

+.footer-page .content .right .item {

+    display: flex;

+    justify-content: space-around;

+    flex-flow: column;

+}

+.footer-page .content .right .item .title{

+    font-size: 0.93vw;

+    font-family: EuclidSquare, EuclidSquare-Medium;

+    font-weight: 500;

+    color: #242a30;

+    line-height: 3.8vw;

+}

+.footer-page .content .right .item .link{

+    font-size: 0.729vw;

+    font-family: EuclidSquare, EuclidSquare-Medium;

+    font-weight: 500;

+    color: #8E9DAA;

+    line-height: 1.56vw;

+}

+

+.split{

+    width: 75vw;

+    height: 1px;

+    opacity: 0.2;

+    background: #a0acb7;

+    margin: 3.38vw auto 0 auto;

+}

+

+.footer-page .bottom{

+    display: flex;

+    justify-content: space-between;

+    margin-top: 1.4vw;

+}

+.footer-page .bottom .copyright {

+    font-size: 14px;

+    font-family: EuclidSquare, EuclidSquare-Medium;

+    font-weight: 500;

+    color: #97a5b0;

+}

+.footer-page .bottom img{

+    width: 1.87vw;

+    height: 1.87vw;

+}

+ 24 - 0
assets/style/header1/index.css
View File 

@@ -108,3 +108,27 @@
 
   height: 14px;

   vertical-align: middle;

 }

+

+

+

+

+/*移动端*/

+@media screen and (max-width: 960px) {

+  .header1-page {

+    height: 8vw;

+  }

+  .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;

+  }

+}