|
|
@@ -8,216 +8,63 @@
|
|
|
/* 网站banner */
|
|
|
.client-index-banner{
|
|
|
width: 100%;
|
|
|
- height: 480px;
|
|
|
+ height: 395px;
|
|
|
+ background-color:#031073;
|
|
|
background-image: url("~static/images/client/index/index-banner-background.png");
|
|
|
background-position-x: center;
|
|
|
- .banner-left{
|
|
|
- width:500px;
|
|
|
- display: inline-block;
|
|
|
- h4{@include setFontStyle(40);color: #FFF;letter-spacing: 0;padding-top: 150px;}
|
|
|
- p{@include setFontStyle(4);display: inline-block;background: #6D4FFF;border-radius: 24px;color: #FFF;margin: 24px 5px;padding: 6px 40px;}
|
|
|
- }
|
|
|
- .banner-right{
|
|
|
- width: 611px;
|
|
|
- height: 432px;
|
|
|
- float: right;
|
|
|
- margin-top: 48px;
|
|
|
- background-image: url("~static/images/client/index/index-banner-img.png");
|
|
|
- position: relative;
|
|
|
- .banner-tel-box{
|
|
|
- width: 284px;
|
|
|
- height: 328px;
|
|
|
- background-image: url("~static/images/client/index/index-banner-tel.png");
|
|
|
- position: absolute;
|
|
|
- top: -10px;
|
|
|
- left: 140px;
|
|
|
- //电视屏幕
|
|
|
- img{position: absolute;top: 25px;left: 98px;animation: 5s bannerTel ease infinite;-webkit-animation: 5s bannerTel ease infinite;-moz-animation: 5s bannerTel ease infinite;-o-animation: 5s bannerTel ease infinite;}
|
|
|
- //电视屏幕动画效果
|
|
|
- @keyframes bannerTel{
|
|
|
- from {top: 25px;left: 98px;opacity: 1;}
|
|
|
- to {top: 35px;left: 65px;opacity: 0.1;}
|
|
|
- }
|
|
|
- }
|
|
|
- //饼图
|
|
|
- .banner-pie{
|
|
|
- width: 35px;
|
|
|
- height: 31px;
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- top: 86px;
|
|
|
- right: 62px;
|
|
|
- background-image: url("~static/images/client/index/index-banner-pie.png");
|
|
|
- animation: 5s webPie ease infinite;-webkit-animation: 5s webPie ease infinite;-moz-animation: 5s webPie ease infinite;-o-animation: 5s webPie ease infinite;
|
|
|
- }
|
|
|
- //饼图动画效果
|
|
|
- @keyframes webPie {
|
|
|
- from {top: 86px;opacity: 1;}
|
|
|
- to {top: 50px;opacity: 0;transform: scale(1.3);}
|
|
|
- }
|
|
|
-
|
|
|
- //漂浮小圆点
|
|
|
- .banner-i-run i{
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- background:#51E2F4;
|
|
|
- border-radius: 50%;
|
|
|
- bottom: 150px;
|
|
|
- left: 80px;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- .banner-i-run i:nth-child(1){animation: 5s bannerRunI1 ease infinite;-webkit-animation: 5s bannerRunI1 ease infinite;-moz-animation: 10s bannerRunI1 ease infinite;-o-animation: 5s bannerRunI1 ease infinite;}
|
|
|
- .banner-i-run i:nth-child(2){width:8px;height:8px;bottom: 240px;left: 50px;opacity: 0;animation: 5s bannerRunI2 ease 2s infinite;-webkit-animation: 5s bannerRunI2 ease 2s infinite;-moz-animation: 5s bannerRunI2 ease infinite;-o-animation: 5s bannerRunI2 ease infinite;}
|
|
|
- .banner-i-run i:nth-child(3){width:7px;height:7px;bottom: 220px;left: 110px;opacity: 0;animation: 5s bannerRunI3 ease 3s infinite;-webkit-animation: 5s bannerRunI3 ease 3s infinite;-moz-animation: 5s bannerRunI3 ease infinite;-o-animation: 5s bannerRunI3 ease infinite;}
|
|
|
- .banner-i-run i:nth-child(4){width:9px;height:9px;bottom: 300px;left: 130px;opacity: 0;animation: 5s bannerRunI4 ease 4s infinite;-webkit-animation: 5s bannerRunI4 ease 4s infinite;-moz-animation: 5s bannerRunI4 ease infinite;-o-animation: 5s bannerRunI4 ease infinite;}
|
|
|
- .banner-i-run i:nth-child(5){width:6px;height:6px;bottom: 310px;left: 70px;opacity: 0;animation: 5s bannerRunI5 ease 5s infinite;-webkit-animation: 5s bannerRunI5 ease 5s infinite;-moz-animation: 5s bannerRunI5 ease infinite;-o-animation: 5s bannerRunI5 ease infinite;}
|
|
|
- @keyframes bannerRunI1 {
|
|
|
- 0%{bottom: 150px;opacity: 1;}
|
|
|
- 100%{bottom: 240px;opacity: 0;left: 70px;}
|
|
|
- }
|
|
|
- @keyframes bannerRunI2 {
|
|
|
- //0%{opacity: 0.5;}
|
|
|
- 0%{opacity: 0;}
|
|
|
- 5%{bottom: 240px;opacity: 0.7;}
|
|
|
- 100%{bottom: 410px;opacity: 0;left: 40px;}
|
|
|
- }
|
|
|
- @keyframes bannerRunI3 {
|
|
|
- 0%{opacity: 0;}
|
|
|
- 5%{bottom: 220px;opacity: 0.8;}
|
|
|
- 100%{bottom: 380px;opacity: 0;left: 130px}
|
|
|
- }
|
|
|
- @keyframes bannerRunI4 {
|
|
|
- 0%{opacity: 0;}
|
|
|
- 5%{bottom: 300px;opacity: 0.8;}
|
|
|
- 70%{bottom: 400px;opacity: 0;left: 160px}
|
|
|
- }
|
|
|
- @keyframes bannerRunI5 {
|
|
|
- 0%{opacity: 0;}
|
|
|
- 5%{bottom: 310px;opacity: 0.6;}
|
|
|
- 100%{bottom: 420px;opacity: 0;left: 110px}
|
|
|
- }
|
|
|
- }
|
|
|
+ background-repeat: no-repeat;
|
|
|
}
|
|
|
|
|
|
- /* 认识我们*/
|
|
|
- .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("~static/images/client/index/index-linkLeft-bg.svg");text-align:center;transition: 0.3s;
|
|
|
- i{width:24px;height:24px;display: inline-block;margin-top: 18px;}
|
|
|
+ /* 发展历程*/
|
|
|
+ .client-company-history{
|
|
|
+ background:#f8f8f8;
|
|
|
+ li{
|
|
|
+ width: 25%;display: inline-block;text-align: center;
|
|
|
+ div{border-right:2px solid #e5e5e5;margin: 24px 0;}
|
|
|
+ p{@include setFontStyle(16);margin-bottom: 16px;color: #333;}
|
|
|
+ span{@include setFontStyle(6);}
|
|
|
+ h4{@include setFontStyle(-4);color: #666;}
|
|
|
}
|
|
|
-
|
|
|
- h5{@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:nth-child(1){.link-left i{background-image: url("~static/images/client/index/index-link-img1.svg");}}
|
|
|
- li:nth-child(1):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img1-a.svg");}}
|
|
|
- li:nth-child(2){.link-left i{background-image: url("~static/images/client/index/index-link-img2.svg");}}
|
|
|
- li:nth-child(2):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img2-a.svg");}}
|
|
|
- li:nth-child(3){.link-left i{background-image: url("~static/images/client/index/index-link-img3.svg");}}
|
|
|
- li:nth-child(3):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img3-a.svg");}}
|
|
|
- li:nth-child(4){.link-left i{background-image: url("~static/images/client/index/index-link-img4.svg");}}
|
|
|
- li:nth-child(4):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img4-a.svg");}}
|
|
|
- li:last-child{border-right: 0;}
|
|
|
- li:hover{
|
|
|
- background: #F1F1F1;
|
|
|
- cursor: pointer;
|
|
|
- //左侧图片区域
|
|
|
- .link-left{background-image: url("~static/images/client/index/index-linkLeft-bg-a.svg");}
|
|
|
- h5{color: #2B5CFD}
|
|
|
- }
|
|
|
-
|
|
|
+ li:last-child div{border-right: 0;}
|
|
|
}
|
|
|
|
|
|
/* 产品和服务 */
|
|
|
.products-services-box{
|
|
|
- padding: 136px 0 32px;
|
|
|
+ padding: 48px 0 32px;
|
|
|
li{
|
|
|
- width: 33.33%;
|
|
|
+ width: 100%;
|
|
|
display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
- position: relative;
|
|
|
//头部图片
|
|
|
.products-services-img{
|
|
|
- width: 96px;
|
|
|
- height: 120px;
|
|
|
- position: absolute;
|
|
|
- top: -80px;
|
|
|
- left: 50%;
|
|
|
- margin-left: -48px;
|
|
|
- transition: .3s all linear;
|
|
|
- i{
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
+ width: 640px;
|
|
|
+ height: 485px;
|
|
|
+ float: right;
|
|
|
}
|
|
|
//内容区域
|
|
|
.products-services-content{
|
|
|
- padding: 66px 40px 32px;
|
|
|
- transition: .3s all linear;
|
|
|
+ width: 500px;
|
|
|
+ float: right;
|
|
|
+ padding: 110px 60px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
margin: 0 24px;
|
|
|
@include setFontStyle(-6);
|
|
|
- h5{@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: 70px;text-align: justify;@include multi-line-ellipsis(6);}
|
|
|
- .products-btn-box{display: flex;width: 100%;justify-content: center;}
|
|
|
- a,div,span{width: 120px;height: 32px;display:inline-block;line-height: 32px;opacity:0;margin-right: 24px}
|
|
|
- span{
|
|
|
- width:auto;background: transparent;color: #2B5CFD;margin-right: 0;
|
|
|
- i{width: 8px;height: 8px;display:inline-block;margin-left: 8px; background-image: url("~static/images/client/index/index-products-icon.svg");}
|
|
|
- }
|
|
|
+ h5{@include setFontStyle(4);color: rgba(0,0,0,0.85);}
|
|
|
+ i{width:50px;height:5px;display: block;background: #3e7ce7;margin: 24px 0;}
|
|
|
+ p{line-height: 22px;color: rgba(0,0,0,0.65);margin-bottom: 56px;text-align: justify;}
|
|
|
+ .client-default-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;background: #3e7ce7;border: 1px solid #3e7ce7;box-sizing: border-box;}
|
|
|
+ a,div.client-default-Btn{margin-right: 24px}
|
|
|
+ span.client-default-Btn{background: #fff;color: #3e7ce7;margin-right: 0;}
|
|
|
}
|
|
|
}
|
|
|
li:nth-child(1){
|
|
|
- .products-services-img{
|
|
|
- background-image: url("~static/images/client/index/index-products-kaoshi.png");
|
|
|
- i{width:38px;height:28px;top: 28px;left: 35px;background-image: url("~static/images/client/index/index-products-kaoshi-icon.svg");animation: 3s servicesImgUpDown linear infinite;}
|
|
|
- }
|
|
|
+ .products-services-img{background-image: url("~static/images/client/index/index-products-kaoshi.png");}
|
|
|
}
|
|
|
li:nth-child(2){
|
|
|
- .products-services-img{
|
|
|
- background-image: url("~static/images/client/index/index-products-peixun.png");
|
|
|
- i{width:21px;height:32px;top: 18px;left: 42px;background-image: url("~static/images/client/index/index-products-peixun-icon.svg");animation: 3s servicesImgUpDown2 linear infinite;}
|
|
|
- }
|
|
|
+ .products-services-img{float: left;background-image: url("~static/images/client/index/index-products-peixun.png");}
|
|
|
+ .products-services-content{float: right;}
|
|
|
}
|
|
|
li:nth-child(3){
|
|
|
- .products-services-img{
|
|
|
- background-image: url("~static/images/client/index/index-products-kejian.png");
|
|
|
- i{width:34px;height:33px;top: 25px;left: 25px;background-image: url("~static/images/client/index/index-products-kejian-icon.svg");transform:rotate(0);animation: 4s servicesImgRotate linear infinite;}
|
|
|
- }
|
|
|
- }
|
|
|
- //小图标动画效果
|
|
|
- //饼图动画效果
|
|
|
- @keyframes servicesImgUpDown {
|
|
|
- 0%, to {top: 28px}
|
|
|
- 50% {top: 38px;}
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes servicesImgUpDown2 {
|
|
|
- 0%, to {top: 18px}
|
|
|
- 50% {top: 28px;}
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes servicesImgRotate{
|
|
|
- from {transform:rotate(0);}
|
|
|
- to {transform:rotate(360deg);}
|
|
|
- }
|
|
|
- // li-鼠标悬浮效果
|
|
|
- li:hover{
|
|
|
- //头部图片
|
|
|
- .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,div,span{opacity: 1;}
|
|
|
- span{color: #2249C9;cursor: pointer}
|
|
|
- }
|
|
|
+ .products-services-img{background-image: url("~static/images/client/index/index-products-kejian.png");}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -229,33 +76,45 @@
|
|
|
//tab
|
|
|
.demand-box-tab{
|
|
|
margin-top: 30px;
|
|
|
- .el-tabs__item{width:124px;height: 40px;line-height: 40px;@include setFontStyle(-4);color: rgba(0,0,0,0.85);padding: 0;text-align: center;}
|
|
|
- .el-tabs__item.is-active{background-image: url("~static/images/client/index/index-demand-btnBg.png");color: #fff;}
|
|
|
+ .el-tabs__item{width:124px;height: 40px;line-height: 40px;border-radius: 4px;border: 1px solid #3e7ee7;@include setFontStyle(-4);color: #3e7ee7;padding: 0;text-align: center;margin: 0 12px 32px;}
|
|
|
+ .el-tabs__item.is-active{background-color:#3e7ee7;color: #fff;position: relative}
|
|
|
+ .el-tabs__item.is-active:after{ width: 0; height: 0; content: "";display: inline-block;border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #3e7ee7;
|
|
|
+ position: absolute;bottom: -33px;left: 50%;margin-left: -8px;}
|
|
|
// 免费试用按钮
|
|
|
.client-default-Btn{width: 238px;height: 40px;line-height: 40px;margin: 40px auto 0;}
|
|
|
}
|
|
|
//覆盖饿了么样式
|
|
|
.el-tabs__header{margin: 0 0 48px;}
|
|
|
.demand-box-tab.el-tabs--card>.el-tabs__header{border: 0}
|
|
|
- .demand-box-tab.el-tabs--card>.el-tabs__header .el-tabs__nav{width: 72%;height: 40px;margin: 0 auto;border-color: #ccc;border-bottom: 1px solid #ccc;border-right:0;border-left:0;border-radius: 0;}
|
|
|
+ .demand-box-tab.el-tabs--card>.el-tabs__header .el-tabs__nav{margin: 0 auto;border-color: #ccc;border-bottom: 1px dotted #6c9ce1;border-right:0;border-left:0;border-top:0;border-radius: 0;}
|
|
|
.demand-box-tab .el-tabs__nav-scroll{text-align: center;}
|
|
|
.demand-box-tab .el-tabs__nav{float: none;}
|
|
|
|
|
|
// 考试ul
|
|
|
.demand-tab-list{
|
|
|
+ margin: 0 -18px;
|
|
|
li{
|
|
|
width: 33.33%;display: inline-block;position: relative;margin-bottom: 24px;overflow: hidden;
|
|
|
|
|
|
// 内容区域
|
|
|
- .demand-content-box{height: 300px;margin: 0 6px;background-size: cover;background-repeat: no-repeat;}
|
|
|
+ .demand-content-box{height: 300px;margin: 0 18px;background-color: #fff;background-repeat: no-repeat;background-position: 5px 5px;}
|
|
|
+ //图片区域
|
|
|
+ .demand-img-box{
|
|
|
+ position: absolute;
|
|
|
+ top: 90px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -50px;
|
|
|
+ i{width: 100px;height: 100px;display:block;margin-bottom: 24px;background-repeat: no-repeat;background-size: cover;}
|
|
|
+ h4{@include setFontStyle(-2);color: #272727;text-align: center;}
|
|
|
+ }
|
|
|
// 蒙版
|
|
|
.demand-mask-box{
|
|
|
position: absolute;
|
|
|
- top: 240px;
|
|
|
+ top: 300px;
|
|
|
padding: 20px;
|
|
|
background:rgba(66,66,66,0.65);
|
|
|
transition: 0.5s;
|
|
|
- margin: 0 6px;
|
|
|
+ margin: 0 18px;
|
|
|
color: #fff;
|
|
|
h4{
|
|
|
@include setFontStyle(0);margin-bottom: 24px;text-align: center;
|
|
|
@@ -271,25 +130,31 @@
|
|
|
border-top: 1px solid #fff;
|
|
|
a{margin-right: 8px}
|
|
|
a:last-child{margin-right: 0;}
|
|
|
- img{width: 80px;height: 80px;}
|
|
|
+ img{width: 77px;height: 77px;}
|
|
|
}
|
|
|
}
|
|
|
li:nth-child(1){
|
|
|
+ .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic1.png");}}
|
|
|
.demand-content-box{background-image: url("~static/images/client/index/index-demand-img1.png");}
|
|
|
}
|
|
|
li:nth-child(2){
|
|
|
+ .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic2.png");}}
|
|
|
.demand-content-box{background-image: url("~static/images/client/index/index-demand-img2.png");}
|
|
|
}
|
|
|
li:nth-child(3){
|
|
|
+ .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic3.png");}}
|
|
|
.demand-content-box{background-image: url("~static/images/client/index/index-demand-img3.png");}
|
|
|
}
|
|
|
li:nth-child(4){
|
|
|
+ .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic4.png");}}
|
|
|
.demand-content-box{background-image: url("~static/images/client/index/index-demand-img4.png");}
|
|
|
}
|
|
|
li:nth-child(5){
|
|
|
+ .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic5.png");}}
|
|
|
.demand-content-box{background-image: url("~static/images/client/index/index-demand-img5.png");}
|
|
|
}
|
|
|
li:nth-child(6){
|
|
|
+ .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic6.png");}}
|
|
|
.demand-content-box{background-image: url("~static/images/client/index/index-demand-img6.png");}
|
|
|
}
|
|
|
li:hover{
|
|
|
@@ -303,6 +168,23 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .demand-peixun-list{
|
|
|
+ li:nth-child(1){
|
|
|
+ .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic7.png");}}
|
|
|
+ }
|
|
|
+ li:nth-child(2){
|
|
|
+ .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic6.png");}}
|
|
|
+ }
|
|
|
+ li:nth-child(3){
|
|
|
+ .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic8.png");}}
|
|
|
+ }
|
|
|
+ li:nth-child(4){
|
|
|
+ .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic1.png");}}
|
|
|
+ }
|
|
|
+ li:nth-child(5){
|
|
|
+ .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic3.png");}}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
@@ -323,14 +205,19 @@
|
|
|
|
|
|
/* 我们始终专注教育系统研发更懂用户需求 */
|
|
|
.client-cert-box{
|
|
|
- background: #F9FAFF;
|
|
|
+ background: #005491;
|
|
|
padding-bottom: 80px;
|
|
|
+ .client-title{color: #fff}
|
|
|
.cert-img-box{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin: 48px 0 0;
|
|
|
- span{display:block;background: #E8ECFF;border-radius: 8px;padding: 10px 10px 6px;overflow: hidden;}
|
|
|
- img{width: 154px;height:210px;transition: all 0.5s;}
|
|
|
+ align-items: center;
|
|
|
+ span{display:block;height: max-content;background: #80aac8;padding: 8px 8px 3px;overflow: hidden;}
|
|
|
+ span:nth-child(3){
|
|
|
+ img{width: 320px;height:210px;}
|
|
|
+ }
|
|
|
+ img{width: 170px;height:240px;transition: all 0.5s;}
|
|
|
img:hover{transform: scale(1.14);}
|
|
|
}
|
|
|
a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;}
|
|
|
@@ -340,44 +227,52 @@
|
|
|
.client-chose-box{
|
|
|
padding-bottom: 80px;
|
|
|
.chose-img-box{
|
|
|
+ margin: 48px -14px 0;
|
|
|
li{
|
|
|
- width: 25%;display: inline-block;
|
|
|
- div{width: 152px;height: 152px;border-radius:50%;position:relative;margin: 48px auto 24px;transition: all 0.3s;background-size: cover}
|
|
|
- i{width: 55px;height: 50px;position: absolute;top: 45px;left: 35px;background-size: cover;}
|
|
|
- h5{@include setFontStyle(-2);text-align: center;color: rgba(0,0,0,0.85);}
|
|
|
+ width: 25%;display: inline-block;vertical-align: top;
|
|
|
+ div{height: 260px;background: #f8f8f8;position:relative;text-align: center;margin: 0 14px;}
|
|
|
+ span{width: 100%;height: 200px;display: inline-block;}
|
|
|
+ img{margin: 50px auto 0;}
|
|
|
+ h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);}
|
|
|
}
|
|
|
- li:nth-child(1){
|
|
|
- div{background-image: url("~static/images/client/index/index-chose-service.svg");}
|
|
|
- i{background-image: url("~static/images/client/index/index-chose-service-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
|
|
|
- }
|
|
|
- li:nth-child(2){
|
|
|
- div{background-image: url("~static/images/client/index/index-chose-system.svg");}
|
|
|
- i{background-image: url("~static/images/client/index/index-chose-system-icon.svg");top: 22px;left: 40px;animation: 3s choseImgUpDown2 linear infinite;}
|
|
|
- }
|
|
|
- li:nth-child(3){
|
|
|
- div{background-image: url("~static/images/client/index/index-chose-tech.svg");}
|
|
|
- i{background-image: url("~static/images/client/index/index-chose-tech-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
|
|
|
- }
|
|
|
- li:nth-child(4){
|
|
|
- div{background-image: url("~static/images/client/index/index-chose-operate.svg");}
|
|
|
- i{background-image: url("~static/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;}
|
|
|
- h5{color: #2B5CFD;}
|
|
|
- }
|
|
|
- //选择我们动画效果
|
|
|
- @keyframes choseImgUpDown1 {
|
|
|
- 0%, to {top: 45px;}
|
|
|
- 50% {top: 55px;}
|
|
|
- }
|
|
|
- @keyframes choseImgUpDown2 {
|
|
|
- 0%, to {top: 22px;}
|
|
|
- 50% {top: 32px;}
|
|
|
- }
|
|
|
- @keyframes choseImgUpDown3 {
|
|
|
- 0%, to {top: 40px;}
|
|
|
- 50% {top: 50px;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 新闻资讯 */
|
|
|
+ .client-news-information {
|
|
|
+ background: #f9faff;
|
|
|
+ padding-bottom: 80px;
|
|
|
+
|
|
|
+ .industry-information-box {
|
|
|
+ margin-top: 48px;
|
|
|
+ // 左
|
|
|
+ .industry-information-left {
|
|
|
+ width: 520px;
|
|
|
+ margin-right: 80px;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ color: #333;
|
|
|
+ div {float: left;border-right: 1px solid #dbdbea;padding: 8px 16px 8px 0;}
|
|
|
+ img {width: 520px;height: 210px;margin-bottom: 42px;}
|
|
|
+ h4 {@include setFontStyle(-2);margin-bottom: 16px;color: #222;}
|
|
|
+ i{width:25px;height:12px;float:right;background-image:url("~static/images/client/index/news-information-icon.png")}
|
|
|
+ p {@include setFontStyle(-6);height: 68px;line-height: 22px;padding: 2px 0 0 16px;text-align: justify;@include multi-line-ellipsis(3);}
|
|
|
+ b {@include setFontStyle(-4);font-weight: normal;display: block;margin-bottom: 16px;}
|
|
|
+ span {@include setFontStyle(-6);display: block;color: #666;}
|
|
|
+ }
|
|
|
+
|
|
|
+ // 右
|
|
|
+ .industry-information-right {
|
|
|
+ width: 590px;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+
|
|
|
+ li {border-bottom: 1px solid #ccc;margin-bottom: 16px;}
|
|
|
+ li:last-child {border: 0;}
|
|
|
+ h4 {@include setFontStyle(-4);color: #333;@include single-line-ellipsis;margin-bottom: 12px;}
|
|
|
+ h4:hover {cursor: pointer;color: #3e7ce7;}
|
|
|
+ p {@include setFontStyle(-6);color: #666;@include single-line-ellipsis;margin-bottom: 16px;}
|
|
|
+ span {margin: 0 30px 0 10px;}
|
|
|
}
|
|
|
}
|
|
|
}
|
tanxue
