|
|
@@ -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;
|
|
|
@@ -188,12 +195,16 @@
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
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 {
|
|
|
@@ -212,48 +223,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 +303,7 @@
|
|
|
vertical-align: top;
|
|
|
overflow-x: auto;
|
|
|
padding-bottom: 12px;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
/* 隐藏滚动条 */
|
|
|
.aboutus-page .box5-content .cards::-webkit-scrollbar {
|
|
|
@@ -286,7 +327,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 +349,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 +383,178 @@
|
|
|
.aboutus-page .box5-content .card:hover .name{
|
|
|
color: #008bff;
|
|
|
}
|
|
|
+
|
|
|
+.aboutus-page .box6-content{
|
|
|
+ width: 100%;
|
|
|
+ height: calc(36.45vw + 6.97vw);
|
|
|
+ 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;
|
|
|
+ cursor: default;
|
|
|
+}
|
|
|
+.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: 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;
|
|
|
+ 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: 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: 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;
|
|
|
+ }
|
|
|
+}
|
