|
|
@@ -102,9 +102,35 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ /* 认识我们*/
|
|
|
+ .client-link-box{
|
|
|
+ background: #F7F9FB;
|
|
|
+ li{
|
|
|
+ width: 25%;display: inline-block;padding:24px;border-right: 2px solid #FFF;box-sizing: border-box;transition: 0.3s;
|
|
|
+ //左侧图片区域
|
|
|
+ .link-left{
|
|
|
+ width: 60px;height: 60px;float: left;background-image: url("~@/assets/images/client/index/" + "index-linkLeft-bg.png");text-align:center;transition: 0.3s;
|
|
|
+ img{display: inline-block;margin-top: 18px;}
|
|
|
+ }
|
|
|
+
|
|
|
+ h1{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;margin-left: 74px;}
|
|
|
+ p{@include setFontStyle(-6);height:48px;color: rgba(0,0,0,0.65);line-height: 22px;margin-left:74px;@include multi-line-ellipsis(2);}
|
|
|
+ }
|
|
|
+ li:last-child{border-right: 0;}
|
|
|
+ li:hover{
|
|
|
+ background: #F3F3F3;
|
|
|
+ cursor: pointer;
|
|
|
+ //左侧图片区域
|
|
|
+ .link-left{background-image: url("~@/assets/images/client/index/" + "index-linkLeft-bg-a.png");}
|
|
|
+ h1{color: #2B5CFD}
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
/* 产品和服务 */
|
|
|
.products-services-box{
|
|
|
- padding: 116px 0 30px;
|
|
|
+ padding: 136px 0 32px;
|
|
|
+ margin: 0 -29px;
|
|
|
li{
|
|
|
width: 33.33%;
|
|
|
display: inline-block;
|
|
|
@@ -112,10 +138,12 @@
|
|
|
position: relative;
|
|
|
//头部图片
|
|
|
.products-services-img{
|
|
|
- height: 173px;
|
|
|
+ width: 96px;
|
|
|
+ height: 120px;
|
|
|
position: absolute;
|
|
|
top: -80px;
|
|
|
left: 50%;
|
|
|
+ margin-left: -48px;
|
|
|
transition: .3s all linear;
|
|
|
i{
|
|
|
display: block;
|
|
|
@@ -124,44 +152,45 @@
|
|
|
}
|
|
|
//内容区域
|
|
|
.products-services-content{
|
|
|
- padding: 110px 32px 48px 32px;
|
|
|
+ padding: 66px 42px 32px;
|
|
|
transition: .3s all linear;
|
|
|
+ margin: 0 29px;
|
|
|
@include setFontStyle(-6);
|
|
|
- h2{@include setFontStyle(2);color: rgba(0,0,0,0.85);text-align: center;margin-bottom: 16px;}
|
|
|
+ h2{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin-bottom: 16px;}
|
|
|
p{line-height: 22px;color: rgba(0,0,0,0.65);margin-bottom: 32px;text-align: justify;min-height: 136px;@include multi-line-ellipsis(6);max-height: 136px}
|
|
|
- a{background: #2B5CFD;border-radius: 4px;color: rgba(255, 255, 255, 0.85);cursor: pointer;width: 120px;height: 32px;line-height: 32px;display: block;text-align: center;margin: 0 auto;}
|
|
|
+ a{width: 120px;height: 32px;line-height: 32px;opacity:0;margin: 0 auto;}
|
|
|
}
|
|
|
}
|
|
|
li:nth-child(1){
|
|
|
.products-services-img{
|
|
|
- width: 148px;
|
|
|
- margin-left: -74px;
|
|
|
background-image: url("~@/assets/images/client/index/" + "index-products-kaoshi.png");
|
|
|
- i{width:57px;height:41px;top: 28px;left: 50px;background-image: url("~@/assets/images/client/index/" + "index-products-kaoshi-icon.png");animation: 3s servicesImgUpDown linear infinite;}
|
|
|
+ i{width:38px;height:28px;top: 28px;left: 35px;background-image: url("~@/assets/images/client/index/" + "index-products-kaoshi-icon.svg");animation: 3s servicesImgUpDown linear infinite;}
|
|
|
}
|
|
|
}
|
|
|
li:nth-child(2){
|
|
|
.products-services-img{
|
|
|
- width: 138px;
|
|
|
- margin-left: -69px;
|
|
|
background-image: url("~@/assets/images/client/index/" + "index-products-peixun.png");
|
|
|
- i{width:31px;height:45px;top: 28px;left: 60px;background-image: url("~@/assets/images/client/index/" + "index-products-peixun-icon.png");animation: 3s servicesImgUpDown linear infinite;}
|
|
|
+ i{width:21px;height:32px;top: 18px;left: 42px;background-image: url("~@/assets/images/client/index/" + "index-products-peixun-icon.svg");animation: 3s servicesImgUpDown2 linear infinite;}
|
|
|
}
|
|
|
}
|
|
|
li:nth-child(3){
|
|
|
.products-services-img{
|
|
|
- width: 155px;
|
|
|
- margin-left: -77px;
|
|
|
background-image: url("~@/assets/images/client/index/" + "index-products-kejian.png");
|
|
|
- i{width:48px;height:48px;top: 35px;left: 45px;background-image: url("~@/assets/images/client/index/" + "index-products-kejian-icon.png");transform:rotate(0);animation: 4s servicesImgRotate linear infinite;}
|
|
|
+ i{width:34px;height:33px;top: 25px;left: 25px;background-image: url("~@/assets/images/client/index/" + "index-products-kejian-icon.svg");transform:rotate(0);animation: 4s servicesImgRotate linear infinite;}
|
|
|
}
|
|
|
}
|
|
|
//小图标动画效果
|
|
|
//饼图动画效果
|
|
|
@keyframes servicesImgUpDown {
|
|
|
0%, to {top: 28px}
|
|
|
- 50% {top: 40px;}
|
|
|
+ 50% {top: 38px;}
|
|
|
}
|
|
|
+
|
|
|
+ @keyframes servicesImgUpDown2 {
|
|
|
+ 0%, to {top: 18px}
|
|
|
+ 50% {top: 28px;}
|
|
|
+ }
|
|
|
+
|
|
|
@keyframes servicesImgRotate{
|
|
|
from {transform:rotate(0);}
|
|
|
to {transform:rotate(360deg);}
|
|
|
@@ -169,12 +198,13 @@
|
|
|
// li-鼠标悬浮效果
|
|
|
li:hover{
|
|
|
//头部图片
|
|
|
- .products-services-img{top: -100px;}
|
|
|
+ .products-services-img{top: -90px;}
|
|
|
//内容区域
|
|
|
.products-services-content{
|
|
|
cursor: default;
|
|
|
box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
|
|
|
border-radius: 8px;
|
|
|
+ a{opacity: 1;}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -185,20 +215,20 @@
|
|
|
padding-bottom: 80px;
|
|
|
// 行业ul
|
|
|
.industry-box{
|
|
|
- margin-top: 8px;
|
|
|
+ margin-top: 10px;
|
|
|
li{
|
|
|
- width: 25%;display: inline-block;margin-top: 32px;height: 147px;overflow: hidden;
|
|
|
+ width: 25%;display: inline-block;margin-top: 38px;height: 112px;overflow: hidden;
|
|
|
img{margin: 0 auto;display: block;transition: all .2s linear;}
|
|
|
div{transition: all .25s linear;text-align: center;}
|
|
|
- h2{@include setFontStyle(2);color: rgba(0,0,0,0.85);text-align: center;margin: 24px 0 16px;}
|
|
|
+ h2{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin: 18px 0 10px;}
|
|
|
p{@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 22px;margin: 0 8px 8px;min-height: 48px;@include multi-line-ellipsis(2);max-height: 48px;}
|
|
|
- a{@include setFontStyle(-6);display: block;color: #2B5CFD;line-height: 24px;margin: 0 auto;}
|
|
|
+ a{@include setFontStyle(-6);display: block;color: #2B5CFD;margin: 0 auto;transition: .3s all linear;}
|
|
|
}
|
|
|
+ a:hover{cursor: pointer;color: #2249C9;}
|
|
|
li:hover:not(:last-child) {
|
|
|
img{opacity: 0;transform: translateY(10px);}
|
|
|
div{margin-top: -147px}
|
|
|
- h2{@include setFontStyle(-2);margin-top: 80px;}
|
|
|
- a{cursor: pointer;}
|
|
|
+ h2{@include setFontStyle(-2);margin-top: 90px;}
|
|
|
}
|
|
|
li:last-child:hover{
|
|
|
cursor: pointer;
|
|
|
@@ -209,12 +239,12 @@
|
|
|
/* 超过10万家客户的信任之选 */
|
|
|
.client-customer-box{
|
|
|
.customer-img-box{
|
|
|
- margin: 40px 0 80px;
|
|
|
+ padding-bottom: 80px;
|
|
|
li{
|
|
|
width: 20%;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
- img{margin: 16px auto;transition: all 0.5s;}
|
|
|
+ img{margin: 48px 30px 0;transition: all 0.5s;}
|
|
|
li:hover{
|
|
|
img{transform: scale(1.1);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 8px}
|
|
|
}
|
|
|
@@ -225,17 +255,15 @@
|
|
|
.client-cert-box{
|
|
|
background: #F9FAFF;
|
|
|
padding-bottom: 80px;
|
|
|
- .client-title{padding-bottom: 8px;}
|
|
|
.cert-img-box{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- margin: 32px 0;
|
|
|
+ margin: 48px 0;
|
|
|
span{display:block;background: #E8ECFF;border-radius: 8px;padding:10px;overflow: hidden;}
|
|
|
img{width: 180px;height:260px;transition: all 0.5s;}
|
|
|
img:hover{transform: scale(1.14);}
|
|
|
}
|
|
|
- a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;text-align: center;@include setFontStyle(-4);display:block;background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);}
|
|
|
- a:hover{cursor: pointer}
|
|
|
+ a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;}
|
|
|
}
|
|
|
|
|
|
/* 为什么选择我们 */
|
|
|
@@ -244,25 +272,25 @@
|
|
|
.chose-img-box{
|
|
|
li{
|
|
|
width: 25%;display: inline-block;
|
|
|
- div{width: 190px;height: 190px;border-radius:50%;position:relative;margin: 40px auto 24px;transition: all 0.3s;background-size: cover}
|
|
|
- i{width: 62px;height: 62px;position: absolute;top: 65px;left: 45px;background-size: cover;}
|
|
|
- h2{@include setFontStyle(2);text-align: center;color: rgba(0,0,0,0.85);}
|
|
|
+ div{width: 190px;height: 190px;border-radius:50%;position:relative;margin: 48px auto 24px;transition: all 0.3s;background-size: cover}
|
|
|
+ i{width: 62px;height: 62px;position: absolute;top: 63px;left: 45px;background-size: cover;}
|
|
|
+ h2{@include setFontStyle(-2);text-align: center;color: rgba(0,0,0,0.85);}
|
|
|
}
|
|
|
li:nth-child(1){
|
|
|
div{background-image: url("~@/assets/images/client/index/" + "index-chose-service.png");}
|
|
|
- i{background-image: url("~@/assets/images/client/index/" + "index-chose-service-icon.png");animation: 3s choseImgUpDown1 linear infinite;}
|
|
|
+ i{background-image: url("~@/assets/images/client/index/" + "index-chose-service-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
|
|
|
}
|
|
|
li:nth-child(2){
|
|
|
div{background-image: url("~@/assets/images/client/index/" + "index-chose-system.png");}
|
|
|
- i{background-image: url("~@/assets/images/client/index/" + "index-chose-system-icon.png");top: 30px;left: 55px;animation: 3s choseImgUpDown2 linear infinite;}
|
|
|
+ i{background-image: url("~@/assets/images/client/index/" + "index-chose-system-icon.svg");top: 30px;left: 50px;animation: 3s choseImgUpDown2 linear infinite;}
|
|
|
}
|
|
|
li:nth-child(3){
|
|
|
div{background-image: url("~@/assets/images/client/index/" + "index-chose-tech.png");}
|
|
|
- i{background-image: url("~@/assets/images/client/index/" + "index-chose-tech-icon.png");animation: 3s choseImgUpDown1 linear infinite;}
|
|
|
+ i{background-image: url("~@/assets/images/client/index/" + "index-chose-tech-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
|
|
|
}
|
|
|
li:nth-child(4){
|
|
|
div{background-image: url("~@/assets/images/client/index/" + "index-chose-operate.png");}
|
|
|
- i{background-image: url("~@/assets/images/client/index/" + "index-chose-operate-icon.png");top: 50px;animation: 3s choseImgUpDown3 linear infinite;}
|
|
|
+ i{background-image: url("~@/assets/images/client/index/" + "index-chose-operate-icon.svg");animation: 3s choseImgUpDown3 linear infinite;}
|
|
|
}
|
|
|
li:hover{
|
|
|
div{box-shadow: 0 3px 9px rgba(43, 92, 253,0.25);transform: translateY(-10px);cursor: pointer;}
|
|
|
@@ -284,10 +312,15 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- /* 行业资讯 */
|
|
|
+ /* 新闻资讯 */
|
|
|
.client-industry-information{
|
|
|
- background: #F9FAFF;
|
|
|
+ background-image: url("~@/assets/images/client/index/" + "index-industry-bg.png");
|
|
|
+ background-position: center;
|
|
|
padding-bottom: 80px;
|
|
|
+ // 标题
|
|
|
+ .client-title{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
// 轮播组件
|
|
|
.el-carousel{
|
|
|
margin-top: 40px;
|
|
|
@@ -299,7 +332,7 @@
|
|
|
.el-carousel__item{
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 8px;
|
|
|
- .client-img-box{
|
|
|
+ .industry-img-box{
|
|
|
width: 25%;
|
|
|
height: 360px;
|
|
|
background-repeat: no-repeat;
|
|
|
@@ -308,7 +341,7 @@
|
|
|
transition: 0.3s;
|
|
|
float: left;
|
|
|
}
|
|
|
- .client-content-box{
|
|
|
+ .industry-content-box{
|
|
|
margin-left: 25%;
|
|
|
padding:32px;
|
|
|
height: inherit;
|
|
|
@@ -316,15 +349,15 @@
|
|
|
position: relative;
|
|
|
h1{@include setFontStyle(2);color: rgba(0,0,0,0.85);margin-bottom: 16px;@include multi-line-ellipsis(2);line-height: 30px;max-height: 60px;}
|
|
|
p{@include setFontStyle(-4);color: rgba(0,0,0,0.64);line-height: 24px;@include multi-line-ellipsis(6);margin-bottom: 24px;max-height: 144px;}
|
|
|
- a{width: 132px;height: 32px;line-height:32px;display: inline-block;@include setFontStyle(-4);background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);text-align: center;
|
|
|
- position: absolute;bottom: 32px;}
|
|
|
+ a{width: 132px;height: 32px;line-height:32px;position: absolute;bottom: 32px;}
|
|
|
}
|
|
|
}
|
|
|
.el-carousel__item.is-active{
|
|
|
height: 350px;
|
|
|
- box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);
|
|
|
- .client-img-box{width: 50%;}
|
|
|
- .client-content-box{
|
|
|
+ //box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);
|
|
|
+ box-shadow: 0 2px 8px 0 rgba(146, 143, 143, 0.76);
|
|
|
+ .industry-img-box{width: 50%;}
|
|
|
+ .industry-content-box{
|
|
|
margin-left: 50%;
|
|
|
}
|
|
|
}
|
wangguoyu
