|
|
@@ -108,15 +108,20 @@
|
|
|
li{
|
|
|
width: 25%;display: inline-block;padding:24px;border-right: 2px solid #FFF;box-sizing: border-box;transition: 0.3s;
|
|
|
//左侧图片区域
|
|
|
- .link-left{width: 48px;height: 48px;float: left;background: #4d90fe;}
|
|
|
+ .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: 64px;}
|
|
|
- p{@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 24px;margin:0 0 16px 64px;}
|
|
|
+ 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: 24px;margin:0 0 16px 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}
|
|
|
}
|
|
|
|
|
|
@@ -153,7 +158,7 @@
|
|
|
@include setFontStyle(-6);
|
|
|
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{display: block;background: #2B5CFD;opacity:0;border-radius: 4px;color: rgba(255, 255, 255, 0.85);cursor: pointer;width: 120px;height: 32px;line-height: 32px;text-align: center;margin: 0 auto;transition: .3s all linear;}
|
|
|
+ a{width: 120px;height: 32px;line-height: 32px;opacity:0;margin: 0 auto;}
|
|
|
}
|
|
|
}
|
|
|
li:nth-child(1){
|
|
|
@@ -165,7 +170,7 @@
|
|
|
li:nth-child(2){
|
|
|
.products-services-img{
|
|
|
background-image: url("~@/assets/images/client/index/" + "index-products-peixun.png");
|
|
|
- i{width:21px;height:32px;top: 18px;left: 43px;background-image: url("~@/assets/images/client/index/" + "index-products-peixun-icon.svg");animation: 3s servicesImgUpDown2 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){
|
|
|
@@ -210,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;
|
|
|
@@ -234,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}
|
|
|
}
|
|
|
@@ -250,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;}
|
|
|
}
|
|
|
|
|
|
/* 为什么选择我们 */
|
|
|
@@ -269,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;}
|
|
|
@@ -309,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;
|
|
|
@@ -324,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;
|
|
|
@@ -333,7 +341,7 @@
|
|
|
transition: 0.3s;
|
|
|
float: left;
|
|
|
}
|
|
|
- .client-content-box{
|
|
|
+ .industry-content-box{
|
|
|
margin-left: 25%;
|
|
|
padding:32px;
|
|
|
height: inherit;
|
|
|
@@ -341,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%;
|
|
|
}
|
|
|
}
|
tanxue
