
@@ -252,19 +274,23 @@ export default {
new WOW().init()
},
methods: {
- toPart(i){
- this.active = i
- document.querySelector(`#part${i}`).scrollIntoView()
- },
- // 置顶
- topping() {
- document.documentElement.scrollTop = 0
- document.body.scrollTop = 0
- },
- // 问卷调查
- toQues() {
- window.open('https://www.wjx.cn/vm/wB0RcMm.aspx')
- },
+ // 轮播图翻页
+ carouselSwitch(name, dir) {
+ dir ? this.$refs[name].next() : this.$refs[name].prev()
+ },
+ toPart(i){
+ this.active = i
+ document.querySelector(`#part${i}`).scrollIntoView()
+ },
+ // 置顶
+ topping() {
+ document.documentElement.scrollTop = 0
+ document.body.scrollTop = 0
+ },
+ // 问卷调查
+ toQues() {
+ window.open('https://www.wjx.cn/vm/wB0RcMm.aspx')
+ }
}
};
@@ -278,6 +304,7 @@ export default {
position: relative;
height: 688px;
background: url(../../../assets/img/index/banner-1.png) 0 0/cover no-repeat,
+ url(../../../assets/img/index/banner-3.png) 0 0/auto no-repeat,
url(../../../assets/img/index/banner-2.png) top right/auto no-repeat;
background-color: #0F5BED;
.text {
@@ -371,7 +398,7 @@ export default {
transform: rotateY(180deg)
}
h6 {
- margin-top: 40px;
+ transform: scale(1.1);
}
}
}
@@ -389,16 +416,19 @@ export default {
.text{
font-size: 14px;
color: #637493;
+ transition: .3s;
}
}
}
.service {
position: relative;
- background-color: #0653FF;
- // background: #fff url(../../../assets/img/index/service.png) 0 0/100% 100% no-repeat;
+ background: #0653FF url(../../../assets/img/index/service4.png) 0 0/100% 100% no-repeat;
.i-title {
color: #fff;
}
+ .en {
+ color: #467DF9;
+ }
.service-pic {
display: flex;
align-items: center;
@@ -443,10 +473,10 @@ export default {
}
&:hover {
img {
- transform: rotateY(180deg)
+ transform: rotateY(180deg)
}
h6 {
- margin-top: 40px;
+ transform: scale(1.1);
}
}
}
@@ -501,10 +531,10 @@ export default {
}
&:hover {
img {
- transform: rotateY(180deg)
+ transform: rotateY(180deg);
}
- h6 {
- margin-top: 40px;
+ .text {
+ transform: scale(1.1);
}
}
}
@@ -522,6 +552,93 @@ export default {
.text{
font-size: 14px;
color: #757F92;
+ transition: .3s;
+ }
+ }
+ .carousel {
+ width: 500px;
+ margin-left: 50px;
+ }
+ .arrow {
+ position: absolute;
+ top: 157px;
+ width: 21px;
+ height: 21px;
+ background: url(../../../assets/img/index/arrow.png) no-repeat;
+ cursor: pointer;
+ &:hover {
+ background-image: url(../../../assets/img/index/arrow-active.png);
+ }
+ }
+ .a-left {
+ left: 32px;
+ transform: rotate(180deg);
+ }
+ .a-right {
+ right: 6px;
+ }
+ .pro-bg1 {
+ position: relative;
+ width: 594px;
+ height: 365px;
+ img {
+ position: absolute;
+ transition: .5s;
+ }
+ .bg1 {
+ top: 23px;
+ left: 0;
+ }
+ .bg2 {
+ bottom: 0;
+ right: 8px;
+ }
+ .bg3 {
+ top: 256px;
+ right: 0;
+ }
+ &:hover {
+ .bg1 {
+ transform: scale(1.1);
+ }
+ .bg2 {
+ transform: scale(1.3);
+ }
+ .bg3 {
+ transform: scale(1.3);
+ }
+ }
+ }
+ .pro-bg2 {
+ position: relative;
+ width: 594px;
+ height: 365px;
+ img {
+ position: absolute;
+ transition: .5s;
+ }
+ .bg1 {
+ top: 23px;
+ right: 0;
+ }
+ .bg2 {
+ bottom: 0;
+ left: 8px;
+ }
+ .bg3 {
+ top: 256px;
+ left: 0;
+ }
+ &:hover {
+ .bg1 {
+ transform: scale(1.1);
+ }
+ .bg2 {
+ transform: scale(1.3);
+ }
+ .bg3 {
+ transform: scale(1.3);
+ }
}
}
}
@@ -608,231 +725,6 @@ export default {
color: #0B1D30;
line-height: 28px;
}
- .pro-bg1 {
- position: relative;
- width: 578px;
- height: 410px;
- img {
- position: absolute;
- transition: .5s;
- }
- .bg1 {
- top: 0;
- left: 0;
- }
- .bg2 {
- top: 24px;
- right: 0;
- animation: rotate 15s linear infinite;
- }
- .bg3 {
- top: 15px;
- left: 27px;
- }
- .bg4 {
- top: 102px;
- left: 72px;
- }
- .bg5 {
- top: 102px;
- left: 180px;
- }
- .bg6 {
- top: 102px;
- left: 288px;
- }
- .bg7 {
- top: 55px;
- right: 9px;
- }
- .bg8 {
- top: 181px;
- left: 14px;
- }
- .bg9 {
- top: 195px;
- left: 180px;
- }
- .bg10 {
- top: 181px;
- right: 142px;
- }
- .bg11 {
- top: 189px;
- right: 34px;
- }
- .bg12 {
- bottom: 45px;
- left: 180px;
- }
- &:hover {
- .bg3 {
- transform: scale(1.1);
- }
- .bg4, .bg5, .bg6, .bg7, .bg8, .bg9, .bg10, .bg11, .bg12 {
- transform: translateY(-10px);
- }
- }
- }
- .pro-bg2 {
- position: relative;
- width: 674px;
- height: 360px;
- img {
- position: absolute;
- transition: .5s;
- }
- .bg1 {
- top: 0;
- left: 68px;
- }
- .bg2 {
- top: 24px;
- left: 97px;
- }
- .bg3 {
- top: 94px;
- left: 139px;
- }
- .bg4 {
- top: 58px;
- left: 0;
- }
- .bg5 {
- top: 64px;
- right: 0;
- }
- &:hover {
- .bg2 {
- transform: scale(1.1);
- }
- .bg3 {
- transform: scale(1.3);
- }
- .bg4 {
- transform: translate(-135px, -10px);
- }
- .bg5 {
- transform: translate(50px, -20px);
- }
- }
- }
- .pro-bg3 {
- position: relative;
- width: 584px;
- height: 360px;
- img {
- position: absolute;
- transition: .5s;
- }
- .bg1 {
- top: 0;
- left: 0;
- }
- .bg2 {
- bottom: 0;
- right: 0;
- animation: rotate 10s linear infinite;
- }
- .bg3 {
- top: 15px;
- left: 13px;
- }
- .bg4 {
- bottom: 0;
- left: 0;
- }
- .bg5 {
- top: 0;
- right: 0;
- }
- &:hover {
- .bg3 {
- transform: scale(1.1);
- }
- .bg4 {
- transform: translate(-20px, 20px);
- }
- .bg5 {
- transform: translateY(-20px);
- }
- }
- }
- .pro-bg4 {
- position: relative;
- width: 580px;
- height: 360px;
- img {
- position: absolute;
- transition: .5s;
- }
- .bg1 {
- top: 0;
- left: 0;
- }
- .bg2 {
- bottom: -40px;
- right: -20px;
- animation: rotate 10s linear infinite;
- }
- .bg3 {
- top: 40px;
- left: 30px;
- width: 530px;
- box-shadow: 2px 2px 3px #f1f1f1, -2px -2px 4px #f1f1f1;
- }
- .bg4 {
- top: 140px;
- left: -20px;
- width: 120px;
- height: 100px;
- }
- &:hover {
- .bg3 {
- transform: scale(1.1);
- }
- .bg4 {
- transform: translate(135px, 70px);
- }
- }
- }
- .pro-bg5 {
- position: relative;
- width: 580px;
- height: 360px;
- img {
- position: absolute;
- transition: .5s;
- }
- .bg1 {
- top: 0;
- left: 0;
- }
- .bg2 {
- bottom: -40px;
- right: -20px;
- animation: rotate 10s linear infinite;
- }
- .bg3 {
- top: 40px;
- left: 30px;
- width: 530px;
- box-shadow: 2px 2px 3px #f1f1f1, -2px -2px 4px #f1f1f1;
- }
- .bg4 {
- top: 150px;
- right: 40px;
- width: 295px;
- }
- &:hover {
- .bg3 {
- transform: scale(1.1);
- }
- .bg4 {
- transform: translate(-80px, 25px) scale(1.1);
- }
- }
- }
}
.none{
padding: 50px 0;