parent
2cf63091a1
commit
a823365509
6 changed files with 1812 additions and 1646 deletions
File diff suppressed because it is too large
Load Diff
@ -1,91 +1,97 @@ |
|||||||
<template> |
<template> |
||||||
<div class="header" ref="exitHeader"> |
<div class="header" |
||||||
<div class="inner" style="width: 100%"> |
ref="exitHeader"> |
||||||
<div class="logo" @click="toIndex" style="float: left"> |
<div class="inner" |
||||||
<img src="../../assets/img/logo.png" alt=""> |
style="width: 100%"> |
||||||
</div> |
<div class="logo" |
||||||
<div style="float: right;margin:0 60px;font-size: 18px"> |
@click="toIndex" |
||||||
<span style="cursor:pointer" @click="exit"> |
style="float: left"> |
||||||
退出<i class="icon el-icon-s-unfold"></i> |
<img src="../../assets/img/logo.png" |
||||||
</span> |
alt=""> |
||||||
</div> |
</div> |
||||||
</div> |
<div style="float: right;margin:0 60px;font-size: 18px"> |
||||||
|
<span style="cursor:pointer" |
||||||
|
@click="exit"> |
||||||
|
退出<i class="icon el-icon-s-unfold"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
<script> |
<script> |
||||||
import { mapState,mapActions } from 'vuex' |
import { mapState, mapActions } from 'vuex' |
||||||
import Setting from '@/setting' |
import Setting from '@/setting' |
||||||
import util from '@/libs/util' |
import util from '@/libs/util' |
||||||
import Cookie from 'js-cookie' |
import Cookie from 'js-cookie' |
||||||
export default { |
export default { |
||||||
data() { |
data () { |
||||||
return { |
return { |
||||||
token: util.local.get(Setting.tokenKey), |
token: util.local.get(Setting.tokenKey), |
||||||
}; |
}; |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.$route.query.manager && Cookie.set('manager', 1) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
toIndex () { |
||||||
|
this.$refs.nav.jump({ |
||||||
|
index: '/index/list', |
||||||
|
title: '首页' |
||||||
|
}) |
||||||
}, |
}, |
||||||
mounted(){ |
exit () { |
||||||
this.$route.query.manager && Cookie.set('manager', 1) |
const url = location.href |
||||||
|
let href = process.env.NODE_ENV === 'development' ? |
||||||
|
`http://${location.hostname}:8082/#/` : |
||||||
|
`${url.includes('huorantech.cn') ? `https://www.occupationlab.com` : location.origin}${Cookie.get('manager') ? |
||||||
|
'/admin' : |
||||||
|
(url.includes('huorantech.cn') || url.includes('izhixinyun.com')) ? |
||||||
|
'' : |
||||||
|
'/student'}/#/` |
||||||
|
let assessmentId = sessionStorage.getItem('assessmentId') |
||||||
|
if (assessmentId != 'null' && assessmentId != null && assessmentId != '') { |
||||||
|
href += `ass/list` |
||||||
|
} else { |
||||||
|
const cid = sessionStorage.getItem('cid') |
||||||
|
href += `station/preview?courseId=${cid}&curriculumName=银行项目` |
||||||
|
} |
||||||
|
location.href = href |
||||||
}, |
}, |
||||||
methods: { |
}, |
||||||
toIndex(){ |
watch: { |
||||||
this.$refs.nav.jump({ |
'$route.path': { |
||||||
index: '/index/list', |
handler (newVal) { |
||||||
title: '首页' |
this.$nextTick(() => { |
||||||
}) |
console.log(newVal) |
||||||
}, |
if (newVal === '/index/list') { |
||||||
exit(){ |
this.$refs.exitHeader.style.backgroundColor = 'rgb(250, 250, 250)' |
||||||
const url = location.href |
} else { |
||||||
let href = process.env.NODE_ENV === 'development' ? |
this.$refs.exitHeader.style.backgroundColor = 'rgb(244, 245, 248)' |
||||||
`http://${location.hostname}:8082/#/` : |
} |
||||||
`${url.includes('huorantech.cn') ? `http://www.occupationlab.com` : location.origin}${Cookie.get('manager') ? |
}) |
||||||
'/admin' : |
|
||||||
(url.includes('huorantech.cn') || url.includes('izhixinyun.com')) ? |
|
||||||
'' : |
|
||||||
'/student'}/#/` |
|
||||||
let assessmentId = sessionStorage.getItem('assessmentId') |
|
||||||
if (assessmentId != 'null' && assessmentId != null && assessmentId != ''){ |
|
||||||
href += `ass/list` |
|
||||||
}else{ |
|
||||||
const cid = sessionStorage.getItem('cid') |
|
||||||
href += `station/preview?courseId=${cid}&curriculumName=银行项目` |
|
||||||
} |
|
||||||
location.href = href |
|
||||||
}, |
}, |
||||||
}, |
immediate: true |
||||||
watch: { |
|
||||||
'$route.path': { |
|
||||||
handler(newVal) { |
|
||||||
this.$nextTick(() => { |
|
||||||
console.log(newVal) |
|
||||||
if(newVal === '/index/list') { |
|
||||||
this.$refs.exitHeader.style.backgroundColor = 'rgb(250, 250, 250)' |
|
||||||
}else { |
|
||||||
this.$refs.exitHeader.style.backgroundColor = 'rgb(244, 245, 248)' |
|
||||||
} |
|
||||||
}) |
|
||||||
}, |
|
||||||
immediate: true |
|
||||||
} |
|
||||||
} |
} |
||||||
|
} |
||||||
}; |
}; |
||||||
</script> |
</script> |
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||||
.header{ |
.header { |
||||||
width:100%; |
width: 100%; |
||||||
display: flex; |
display: flex; |
||||||
align-items: center; |
align-items: center; |
||||||
position: relative; |
position: relative; |
||||||
height: 68px; |
height: 68px; |
||||||
// background-color: #fff; |
// background-color: #fff; |
||||||
background-color: rgb(244,245,248); |
background-color: rgb(244, 245, 248); |
||||||
z-index: 1001; |
z-index: 1001; |
||||||
.logo{ |
.logo { |
||||||
width: 500px; |
width: 500px; |
||||||
margin-left: 42px; |
margin-left: 42px; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
img{ |
img { |
||||||
width: 100%; |
width: 100%; |
||||||
} |
|
||||||
} |
} |
||||||
} |
} |
||||||
|
} |
||||||
</style> |
</style> |
||||||
@ -1,300 +1,320 @@ |
|||||||
<template> |
<template> |
||||||
<div class="wrap"> |
<div class="wrap"> |
||||||
<img class="sth bg" src="@/assets/img/index-bg.png" alt=""> |
<img class="sth bg" |
||||||
<div class="case" @click="setShowBusiness(true)">业务选择</div> |
src="@/assets/img/index-bg.png" |
||||||
|
alt=""> |
||||||
|
<div class="case" |
||||||
|
@click="setShowBusiness(true)">业务选择</div> |
||||||
|
|
||||||
<!-- 业务选择 --弹框 --> |
<!-- 业务选择 --弹框 --> |
||||||
|
|
||||||
|
|
||||||
<div class="sth integrated-counter cp"> |
|
||||||
<img width="100%" v-lazy="lazy1" alt="" @click="toPart('/counter')"> |
|
||||||
<!-- src="@/assets/img/integrated-counter.png" --> |
|
||||||
<div class="name" @click="toPart('/counter')">综合柜台</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="sth international cp"> |
<div class="sth integrated-counter cp"> |
||||||
<!-- <img width="100%" v-lazy="lazy1" alt="" @click="toPart('/counter')"> --> |
<img width="100%" |
||||||
<img width="100%" v-lazy="lazy2" alt="" @click="showComing" /> |
v-lazy="lazy1" |
||||||
<!-- src="@/assets/img/integrated-counter.png" --> |
alt="" |
||||||
<!-- <div class="name" @click="showComing">国际结算部</div> --> |
@click="toPart('/counter')"> |
||||||
</div> |
<!-- src="@/assets/img/integrated-counter.png" --> |
||||||
|
<div class="name" |
||||||
<!-- <img class="sth international cp" v-lazy="lazy2" alt="" @click="showComing"> --> |
@click="toPart('/counter')">综合柜台</div> |
||||||
<div class="sth manager cp" @click="toPart('/lobbyManager')"> |
</div> |
||||||
<img width="100%" v-lazy="lazy3" alt=""> |
|
||||||
<div class="name">大堂经理</div> |
<div class="sth international cp"> |
||||||
</div> |
<!-- <img width="100%" v-lazy="lazy1" alt="" @click="toPart('/counter')"> --> |
||||||
|
<img width="100%" |
||||||
<img class="sth credit-dep cp" v-lazy="lazy4" alt="" @click="showComing"> |
v-lazy="lazy2" |
||||||
<img class="sth company-finance cp" v-lazy="lazy5" alt="" @click="showComing"> |
alt="" |
||||||
<img class="sth personal-finance cp" v-lazy="lazy6" alt="" @click="showComing"> |
@click="showComing" /> |
||||||
|
<!-- src="@/assets/img/integrated-counter.png" --> |
||||||
|
<!-- <div class="name" @click="showComing">国际结算部</div> --> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- <img class="sth international cp" v-lazy="lazy2" alt="" @click="showComing"> --> |
||||||
|
<div class="sth manager cp" |
||||||
|
@click="toPart('/lobbyManager')"> |
||||||
|
<img width="100%" |
||||||
|
v-lazy="lazy3" |
||||||
|
alt=""> |
||||||
|
<div class="name">大堂经理</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<img class="sth credit-dep cp" |
||||||
|
v-lazy="lazy4" |
||||||
|
alt="" |
||||||
|
@click="showComing"> |
||||||
|
<img class="sth company-finance cp" |
||||||
|
v-lazy="lazy5" |
||||||
|
alt="" |
||||||
|
@click="showComing"> |
||||||
|
<img class="sth personal-finance cp" |
||||||
|
v-lazy="lazy6" |
||||||
|
alt="" |
||||||
|
@click="showComing"> |
||||||
|
|
||||||
<div class="coming" :class="{active: comingVisible}"> |
<div class="coming" |
||||||
<div style="width: 20%;margin: auto"> |
:class="{active: comingVisible}"> |
||||||
<img style="width: 100%" v-lazy="lazy7" alt=""> |
<div style="width: 20%;margin: auto"> |
||||||
</div> |
<img style="width: 100%" |
||||||
<p class="text">敬请期待</p> |
v-lazy="lazy7" |
||||||
</div> |
alt=""> |
||||||
|
</div> |
||||||
|
<p class="text">敬请期待</p> |
||||||
</div> |
</div> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import { mapMutations, mapState } from 'vuex'; |
import { mapMutations, mapState } from 'vuex'; |
||||||
import saveSystemModule from '@/mixins/saveSystemModule' |
import saveSystemModule from '@/mixins/saveSystemModule' |
||||||
export default { |
export default { |
||||||
name: 'index', |
name: 'index', |
||||||
mixins: [ saveSystemModule ], |
mixins: [saveSystemModule], |
||||||
data() { |
data () { |
||||||
return { |
return { |
||||||
caseVisible: true, |
caseVisible: true, |
||||||
comingVisible: false, |
comingVisible: false, |
||||||
timer: null, |
timer: null, |
||||||
lazy1: require('@/assets/img/integrated-counter.png'), |
lazy1: require('@/assets/img/integrated-counter.png'), |
||||||
lazy2: require('@/assets/img/international.png'), |
lazy2: require('@/assets/img/international.png'), |
||||||
lazy3: require('@/assets/img/manager-index.png'), |
lazy3: require('@/assets/img/manager-index.png'), |
||||||
lazy4: require('@/assets/img/credit-dep.png'), |
lazy4: require('@/assets/img/credit-dep.png'), |
||||||
lazy5: require('@/assets/img/company-finance.png'), |
lazy5: require('@/assets/img/company-finance.png'), |
||||||
lazy6: require('@/assets/img/personal-finance.png'), // @/assets/svg/coming.svg |
lazy6: require('@/assets/img/personal-finance.png'), // @/assets/svg/coming.svg |
||||||
lazy7: require('@/assets/svg/coming.svg') |
lazy7: require('@/assets/svg/coming.svg') |
||||||
} |
} |
||||||
}, |
}, |
||||||
created() { |
created () { |
||||||
if(!sessionStorage.getItem('firstLoad2')) { |
if (!sessionStorage.getItem('firstLoad2')) { |
||||||
const loading = this.$loading({ |
const loading = this.$loading({ |
||||||
lock: true, |
lock: true, |
||||||
// text: 'Loading', |
// text: 'Loading', |
||||||
text: '努力加载中，请稍等...', |
text: '努力加载中，请稍等...', |
||||||
spinner: 'el-icon-loading', |
spinner: 'el-icon-loading', |
||||||
background: 'rgba(0, 0, 0, 0.7)' |
background: 'rgba(0, 0, 0, 0.7)' |
||||||
}); |
}); |
||||||
setTimeout(() => { |
setTimeout(() => { |
||||||
loading.close(); |
loading.close(); |
||||||
sessionStorage.setItem('firstLoad2', true) |
sessionStorage.setItem('firstLoad2', true) |
||||||
}, 1000); |
}, 1000); |
||||||
} |
} |
||||||
|
|
||||||
if(!this.businessKey) { |
if (!this.businessKey) { |
||||||
this.setShowBusiness(true) |
this.setShowBusiness(true) |
||||||
} |
} |
||||||
}, |
}, |
||||||
mounted() { |
mounted () { |
||||||
let token = this.getQueryVariable('token') |
let token = this.getQueryVariable('token') |
||||||
let cid = this.getQueryVariable('cid') |
let cid = this.getQueryVariable('cid') |
||||||
let systemId = this.getQueryVariable('systemId') |
let systemId = this.getQueryVariable('systemId') |
||||||
let stopTime = this.getQueryVariable('stopTime') |
let stopTime = this.getQueryVariable('stopTime') |
||||||
let timestamp =+stopTime; |
let timestamp = +stopTime; |
||||||
if (token != null){ |
if (token != null) { |
||||||
sessionStorage.setItem('token', token) |
sessionStorage.setItem('token', token) |
||||||
sessionStorage.setItem('cid', cid) |
sessionStorage.setItem('cid', cid) |
||||||
sessionStorage.setItem('systemId', systemId) |
sessionStorage.setItem('systemId', systemId) |
||||||
sessionStorage.setItem('timestamp', timestamp) |
sessionStorage.setItem('timestamp', timestamp) |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapState({ |
||||||
|
showBusiness: state => state.system.showBusiness, |
||||||
|
businessKey: state => state.system.businessKey |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
...mapMutations({ |
||||||
|
setShowBusiness: 'system/setShowBusiness' |
||||||
|
}), |
||||||
|
getQueryVariable (name) { |
||||||
|
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') |
||||||
|
if (window.location.href.split('?')[1]) { |
||||||
|
var r = window.location.href.split('?')[1].match(reg) |
||||||
|
if (r != null) { |
||||||
|
return (r[2]) |
||||||
|
} else { |
||||||
|
return null |
||||||
} |
} |
||||||
|
} |
||||||
}, |
}, |
||||||
computed: { |
toPart (path) { |
||||||
...mapState({ |
this.$router.push(path) |
||||||
showBusiness: state => state.system.showBusiness, |
|
||||||
businessKey: state => state.system.businessKey |
|
||||||
}) |
|
||||||
}, |
}, |
||||||
methods: { |
showComing () { |
||||||
...mapMutations({ |
this.comingVisible = true |
||||||
setShowBusiness: 'system/setShowBusiness' |
clearTimeout(this.timer) |
||||||
}), |
this.timer = setTimeout(() => { |
||||||
getQueryVariable(name) { |
this.comingVisible = false |
||||||
var reg = new RegExp('(^|&)'+name+'=([^&]*)(&|$)') |
}, 1500) |
||||||
if( window.location.href.split('?')[1]){ |
|
||||||
var r = window.location.href.split('?')[1].match(reg) |
|
||||||
if (r != null){ |
|
||||||
return (r[2]) |
|
||||||
}else{ |
|
||||||
return null |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
toPart(path){ |
|
||||||
this.$router.push(path) |
|
||||||
}, |
|
||||||
showComing(){ |
|
||||||
this.comingVisible = true |
|
||||||
clearTimeout(this.timer) |
|
||||||
this.timer = setTimeout(() => { |
|
||||||
this.comingVisible = false |
|
||||||
},1500) |
|
||||||
} |
|
||||||
} |
} |
||||||
|
} |
||||||
}; |
}; |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||||
// 标牌文字 |
// 标牌文字 |
||||||
@mixin nameTip { |
@mixin nameTip { |
||||||
width: 200px; |
width: 200px; |
||||||
height: 70px; |
height: 70px; |
||||||
line-height: 60px; |
line-height: 60px; |
||||||
text-align: center; |
text-align: center; |
||||||
font-size: 20px; |
font-size: 20px; |
||||||
background: url(../../../assets/img/index-btn-bg.png); |
background: url(../../../assets/img/index-btn-bg.png); |
||||||
// background-position: center center; |
// background-position: center center; |
||||||
background-size: 100%; |
background-size: 100%; |
||||||
color: #fff; |
color: #fff; |
||||||
border-radius: 16px; |
border-radius: 16px; |
||||||
// box-shadow: 0 6px 8px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); |
// box-shadow: 0 6px 8px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); |
||||||
z-index: 100; |
z-index: 100; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
.wrap{ |
.wrap { |
||||||
position: relative; |
position: relative; |
||||||
min-height: calc(100vh - 68px); |
min-height: calc(100vh - 68px); |
||||||
.sth{ |
.sth { |
||||||
position: absolute; |
position: absolute; |
||||||
&.cp{ |
&.cp { |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
|
||||||
} |
|
||||||
.bg{ |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
} |
} |
||||||
.integrated-counter{ |
} |
||||||
top: -14%; |
.bg { |
||||||
left: 24%; |
top: 0; |
||||||
width: 43%; |
left: 0; |
||||||
transition: all .5s; |
width: 100%; |
||||||
&:hover{ |
height: 100%; |
||||||
margin-top: -10px; |
} |
||||||
} |
.integrated-counter { |
||||||
.name{ |
top: -14%; |
||||||
position: absolute; |
left: 24%; |
||||||
top: 23%; |
width: 43%; |
||||||
left: 20%; |
transition: all 0.5s; |
||||||
@include nameTip; |
&:hover { |
||||||
} |
margin-top: -10px; |
||||||
} |
} |
||||||
.international{ |
.name { |
||||||
top: -9%; |
position: absolute; |
||||||
left: 72%; |
top: 23%; |
||||||
width: 28%; |
left: 20%; |
||||||
transition: all .5s; |
@include nameTip; |
||||||
// &:hover{ |
|
||||||
// margin-top: -10px; |
|
||||||
// } |
|
||||||
// img{ |
|
||||||
// transition: all .5s; |
|
||||||
// &:hover{ |
|
||||||
// margin-top: -10px; |
|
||||||
// } |
|
||||||
// } |
|
||||||
.name{ |
|
||||||
position: absolute; |
|
||||||
top: 23%; |
|
||||||
right: 0; |
|
||||||
@include nameTip; |
|
||||||
} |
|
||||||
|
|
||||||
} |
} |
||||||
.manager{ |
} |
||||||
bottom: 0; |
.international { |
||||||
left: 57%; |
top: -9%; |
||||||
width: 39%; |
left: 72%; |
||||||
transition: all .5s; |
width: 28%; |
||||||
&:hover{ |
transition: all 0.5s; |
||||||
bottom: 10px; |
// &:hover{ |
||||||
} |
// margin-top: -10px; |
||||||
.name { |
// } |
||||||
position: absolute; |
// img{ |
||||||
top: 65%; |
// transition: all .5s; |
||||||
left: 37%; |
// &:hover{ |
||||||
@include nameTip; |
// margin-top: -10px; |
||||||
} |
// } |
||||||
|
// } |
||||||
|
.name { |
||||||
|
position: absolute; |
||||||
|
top: 23%; |
||||||
|
right: 0; |
||||||
|
@include nameTip; |
||||||
} |
} |
||||||
.credit-dep{ |
} |
||||||
top: 31%; |
.manager { |
||||||
left: 0; |
bottom: 0; |
||||||
width: 20%; |
left: 57%; |
||||||
transition: all .5s; |
width: 39%; |
||||||
// &:hover{ |
transition: all 0.5s; |
||||||
// top: 29%; |
&:hover { |
||||||
// } |
bottom: 10px; |
||||||
} |
} |
||||||
.company-finance{ |
.name { |
||||||
top: 52%; |
position: absolute; |
||||||
left: 9%; |
top: 65%; |
||||||
width: 28%; |
left: 37%; |
||||||
transition: all .5s; |
@include nameTip; |
||||||
// &:hover{ |
|
||||||
// top: 50%; |
|
||||||
// } |
|
||||||
} |
} |
||||||
.personal-finance{ |
} |
||||||
bottom: 0; |
.credit-dep { |
||||||
left: 25%; |
top: 31%; |
||||||
width: 30%; |
left: 0; |
||||||
transition: all .5s; |
width: 20%; |
||||||
// &:hover{ |
transition: all 0.5s; |
||||||
// bottom: 10px; |
// &:hover{ |
||||||
// } |
// top: 29%; |
||||||
|
// } |
||||||
|
} |
||||||
|
.company-finance { |
||||||
|
top: 52%; |
||||||
|
left: 9%; |
||||||
|
width: 28%; |
||||||
|
transition: all 0.5s; |
||||||
|
// &:hover{ |
||||||
|
// top: 50%; |
||||||
|
// } |
||||||
|
} |
||||||
|
.personal-finance { |
||||||
|
bottom: 0; |
||||||
|
left: 25%; |
||||||
|
width: 30%; |
||||||
|
transition: all 0.5s; |
||||||
|
// &:hover{ |
||||||
|
// bottom: 10px; |
||||||
|
// } |
||||||
|
} |
||||||
|
.case { |
||||||
|
position: absolute; |
||||||
|
top: 92px; |
||||||
|
left: 150px; |
||||||
|
width: 150px; |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
font-size: 24px; |
||||||
|
background: url(../../../assets/img/case.png) 0 0 / cover no-repeat; |
||||||
|
background-size: 150px 50px; |
||||||
|
cursor: pointer; |
||||||
|
// &:hover{ |
||||||
|
// top: 76px; |
||||||
|
// } |
||||||
|
} |
||||||
|
@media (max-width: 1440px) { |
||||||
|
.credit-dep { |
||||||
|
top: 32%; |
||||||
} |
} |
||||||
.case{ |
.company-finance { |
||||||
position: absolute; |
top: 53%; |
||||||
top: 92px; |
|
||||||
left: 150px; |
|
||||||
width: 150px; |
|
||||||
height: 50px; |
|
||||||
line-height: 50px; |
|
||||||
text-align: center; |
|
||||||
color: #fff; |
|
||||||
font-size: 24px; |
|
||||||
background: url(../../../assets/img/case.png) 0 0 /cover no-repeat; |
|
||||||
background-size: 150px 50px; |
|
||||||
cursor: pointer; |
|
||||||
// &:hover{ |
|
||||||
// top: 76px; |
|
||||||
// } |
|
||||||
} |
} |
||||||
@media(max-width: 1440px){ |
.personal-finance { |
||||||
.credit-dep{ |
top: 72%; |
||||||
top: 32%; |
|
||||||
} |
|
||||||
.company-finance{ |
|
||||||
top: 53%; |
|
||||||
} |
|
||||||
.personal-finance{ |
|
||||||
top: 72%; |
|
||||||
} |
|
||||||
.integrated-counter{ |
|
||||||
width: 44%; |
|
||||||
} |
|
||||||
} |
} |
||||||
@media(max-width: 1300px){ |
.integrated-counter { |
||||||
& { |
width: 44%; |
||||||
min-height: calc(100vh - 76px); |
|
||||||
} |
|
||||||
} |
} |
||||||
} |
} |
||||||
.coming{ |
@media (max-width: 1300px) { |
||||||
position: fixed; |
& { |
||||||
top: -200%; |
min-height: calc(100vh - 76px); |
||||||
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; |
|
||||||
} |
} |
||||||
} |
} |
||||||
|
} |
||||||
|
.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.8); |
||||||
|
transition: all 0.3s; |
||||||
|
&.active { |
||||||
|
top: 50%; |
||||||
|
} |
||||||
|
.text { |
||||||
|
margin-top: 24px; |
||||||
|
font-size: 22px; |
||||||
|
font-weight: 400; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
</style> |
</style> |
||||||
Loading…
Reference in new issue