|
|
|
@ -3,18 +3,23 @@ |
|
|
|
|
<img class="sth bg" src="@/assets/img/index-bg.png" alt=""> |
|
|
|
|
<div class="case">项目案例</div> |
|
|
|
|
|
|
|
|
|
<div class="sth integrated-counter"> |
|
|
|
|
<div class="sth integrated-counter cp"> |
|
|
|
|
<img width="100%" src="@/assets/img/integrated-counter.png" alt="" @click="toPart('/counter')"> |
|
|
|
|
<div class="name">综合柜台</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<img class="sth international" src="@/assets/img/international.png" alt=""> |
|
|
|
|
<img class="sth manager" src="@/assets/img/manager.png" alt="" @click="toPart('/lobbyManager')"> |
|
|
|
|
<img class="sth credit-dep" src="@/assets/img/credit-dep.png" alt=""> |
|
|
|
|
<img class="sth company-finance" src="@/assets/img/company-finance.png" alt=""> |
|
|
|
|
<img class="sth personal-finance" src="@/assets/img/personal-finance.png" alt=""> |
|
|
|
|
<img class="sth international cp" src="@/assets/img/international.png" alt="" @click="showComing"> |
|
|
|
|
<img class="sth manager cp" src="@/assets/img/manager-index.png" alt="" @click="toPart('/lobbyManager')"> |
|
|
|
|
<img class="sth credit-dep cp" src="@/assets/img/credit-dep.png" alt="" @click="showComing"> |
|
|
|
|
<img class="sth company-finance cp" src="@/assets/img/company-finance.png" alt="" @click="showComing"> |
|
|
|
|
<img class="sth personal-finance cp" src="@/assets/img/personal-finance.png" alt="" @click="showComing"> |
|
|
|
|
|
|
|
|
|
<vCase></vCase> |
|
|
|
|
|
|
|
|
|
<div class="coming" :class="{active: comingVisible}"> |
|
|
|
|
<img src="@/assets/svg/coming.svg" alt=""> |
|
|
|
|
<p class="text">敬请期待</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
@ -25,6 +30,8 @@ export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
caseVisible: true, |
|
|
|
|
comingVisible: false, |
|
|
|
|
timer: null |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
@ -37,6 +44,13 @@ export default { |
|
|
|
|
toPart(path){ |
|
|
|
|
this.$router.push(path) |
|
|
|
|
}, |
|
|
|
|
showComing(){ |
|
|
|
|
this.comingVisible = true |
|
|
|
|
clearTimeout(this.timer) |
|
|
|
|
this.timer = setTimeout(() => { |
|
|
|
|
this.comingVisible = false |
|
|
|
|
},1500) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
@ -53,11 +67,12 @@ export default { |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
.integrated-counter{ |
|
|
|
|
top: 0; |
|
|
|
|
left: 20%; |
|
|
|
|
width: 35%; |
|
|
|
|
width: 43%; |
|
|
|
|
img{ |
|
|
|
|
transition: all .5s; |
|
|
|
|
&:hover{ |
|
|
|
@ -84,12 +99,12 @@ export default { |
|
|
|
|
width: 28%; |
|
|
|
|
} |
|
|
|
|
.manager{ |
|
|
|
|
top: 57%; |
|
|
|
|
left: 65%; |
|
|
|
|
width: 34%; |
|
|
|
|
top: 48%; |
|
|
|
|
left: 52%; |
|
|
|
|
width: 39%; |
|
|
|
|
transition: all .5s; |
|
|
|
|
&:hover{ |
|
|
|
|
top: calc(57% - 10px); |
|
|
|
|
top: calc(48% - 10px); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.credit-dep{ |
|
|
|
@ -103,7 +118,7 @@ export default { |
|
|
|
|
width: 30%; |
|
|
|
|
} |
|
|
|
|
.personal-finance{ |
|
|
|
|
top: 80%; |
|
|
|
|
top: 78%; |
|
|
|
|
left: 31%; |
|
|
|
|
width: 30%; |
|
|
|
|
} |
|
|
|
@ -120,5 +135,40 @@ export default { |
|
|
|
|
background: url(../../../assets/img/case.png) 0 0 /cover no-repeat; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
@media(max-width: 1440px){ |
|
|
|
|
.credit-dep{ |
|
|
|
|
top: 36%; |
|
|
|
|
} |
|
|
|
|
.company-finance{ |
|
|
|
|
top: 58%; |
|
|
|
|
} |
|
|
|
|
.personal-finance{ |
|
|
|
|
top: 74%; |
|
|
|
|
} |
|
|
|
|
.integrated-counter{ |
|
|
|
|
width: 44%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.coming{ |
|
|
|
|
position: fixed; |
|
|
|
|
top: -200%; |
|
|
|
|
left: 50%; |
|
|
|
|
width: 376px; |
|
|
|
|
padding: 40px 0; |
|
|
|
|
text-align: center; |
|
|
|
|
transform: translate(-50%,-50%); |
|
|
|
|
border-radius: 16px; |
|
|
|
|
background-color: rgba(0,0,0,0.80); |
|
|
|
|
transition: all .3s; |
|
|
|
|
&.active{ |
|
|
|
|
top: 50%; |
|
|
|
|
} |
|
|
|
|
.text{ |
|
|
|
|
margin-top: 24px; |
|
|
|
|
font-size: 22px; |
|
|
|
|
font-weight: 400; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |