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> |
||||
<div class="header" ref="exitHeader"> |
||||
<div class="inner" style="width: 100%"> |
||||
<div class="logo" @click="toIndex" style="float: left"> |
||||
<img src="../../assets/img/logo.png" alt=""> |
||||
</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 class="header" |
||||
ref="exitHeader"> |
||||
<div class="inner" |
||||
style="width: 100%"> |
||||
<div class="logo" |
||||
@click="toIndex" |
||||
style="float: left"> |
||||
<img src="../../assets/img/logo.png" |
||||
alt=""> |
||||
</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> |
||||
</template> |
||||
<script> |
||||
import { mapState,mapActions } from 'vuex' |
||||
import { mapState, mapActions } from 'vuex' |
||||
import Setting from '@/setting' |
||||
import util from '@/libs/util' |
||||
import Cookie from 'js-cookie' |
||||
export default { |
||||
data() { |
||||
return { |
||||
token: util.local.get(Setting.tokenKey), |
||||
}; |
||||
data () { |
||||
return { |
||||
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(){ |
||||
this.$route.query.manager && Cookie.set('manager', 1) |
||||
exit () { |
||||
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(){ |
||||
this.$refs.nav.jump({ |
||||
index: '/index/list', |
||||
title: '首页' |
||||
}) |
||||
}, |
||||
exit(){ |
||||
const url = location.href |
||||
let href = process.env.NODE_ENV === 'development' ? |
||||
`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 |
||||
}, |
||||
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)' |
||||
} |
||||
}) |
||||
}, |
||||
}, |
||||
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 |
||||
} |
||||
immediate: true |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.header{ |
||||
width:100%; |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
height: 68px; |
||||
// background-color: #fff; |
||||
background-color: rgb(244,245,248); |
||||
z-index: 1001; |
||||
.logo{ |
||||
width: 500px; |
||||
margin-left: 42px; |
||||
cursor: pointer; |
||||
img{ |
||||
width: 100%; |
||||
} |
||||
.header { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
height: 68px; |
||||
// background-color: #fff; |
||||
background-color: rgb(244, 245, 248); |
||||
z-index: 1001; |
||||
.logo { |
||||
width: 500px; |
||||
margin-left: 42px; |
||||
cursor: pointer; |
||||
img { |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,300 +1,320 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<img class="sth bg" src="@/assets/img/index-bg.png" alt=""> |
||||
<div class="case" @click="setShowBusiness(true)">业务选择</div> |
||||
<div class="wrap"> |
||||
<img class="sth bg" |
||||
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"> |
||||
<!-- <img width="100%" v-lazy="lazy1" alt="" @click="toPart('/counter')"> --> |
||||
<img width="100%" v-lazy="lazy2" alt="" @click="showComing" /> |
||||
<!-- src="@/assets/img/integrated-counter.png" --> |
||||
<!-- <div class="name" @click="showComing">国际结算部</div> --> |
||||
</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> |
||||
|
||||
<!-- <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> |
||||
<div class="sth international cp"> |
||||
<!-- <img width="100%" v-lazy="lazy1" alt="" @click="toPart('/counter')"> --> |
||||
<img width="100%" |
||||
v-lazy="lazy2" |
||||
alt="" |
||||
@click="showComing" /> |
||||
<!-- src="@/assets/img/integrated-counter.png" --> |
||||
<!-- <div class="name" @click="showComing">国际结算部</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"> |
||||
<!-- <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 style="width: 20%;margin: auto"> |
||||
<img style="width: 100%" v-lazy="lazy7" alt=""> |
||||
</div> |
||||
<p class="text">敬请期待</p> |
||||
</div> |
||||
<div class="coming" |
||||
:class="{active: comingVisible}"> |
||||
<div style="width: 20%;margin: auto"> |
||||
<img style="width: 100%" |
||||
v-lazy="lazy7" |
||||
alt=""> |
||||
</div> |
||||
<p class="text">敬请期待</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapMutations, mapState } from 'vuex'; |
||||
import saveSystemModule from '@/mixins/saveSystemModule' |
||||
export default { |
||||
name: 'index', |
||||
mixins: [ saveSystemModule ], |
||||
data() { |
||||
return { |
||||
caseVisible: true, |
||||
comingVisible: false, |
||||
timer: null, |
||||
lazy1: require('@/assets/img/integrated-counter.png'), |
||||
lazy2: require('@/assets/img/international.png'), |
||||
lazy3: require('@/assets/img/manager-index.png'), |
||||
lazy4: require('@/assets/img/credit-dep.png'), |
||||
lazy5: require('@/assets/img/company-finance.png'), |
||||
lazy6: require('@/assets/img/personal-finance.png'), // @/assets/svg/coming.svg |
||||
lazy7: require('@/assets/svg/coming.svg') |
||||
} |
||||
}, |
||||
created() { |
||||
if(!sessionStorage.getItem('firstLoad2')) { |
||||
const loading = this.$loading({ |
||||
lock: true, |
||||
// text: 'Loading', |
||||
text: '努力加载中，请稍等...', |
||||
spinner: 'el-icon-loading', |
||||
background: 'rgba(0, 0, 0, 0.7)' |
||||
}); |
||||
setTimeout(() => { |
||||
loading.close(); |
||||
sessionStorage.setItem('firstLoad2', true) |
||||
}, 1000); |
||||
} |
||||
name: 'index', |
||||
mixins: [saveSystemModule], |
||||
data () { |
||||
return { |
||||
caseVisible: true, |
||||
comingVisible: false, |
||||
timer: null, |
||||
lazy1: require('@/assets/img/integrated-counter.png'), |
||||
lazy2: require('@/assets/img/international.png'), |
||||
lazy3: require('@/assets/img/manager-index.png'), |
||||
lazy4: require('@/assets/img/credit-dep.png'), |
||||
lazy5: require('@/assets/img/company-finance.png'), |
||||
lazy6: require('@/assets/img/personal-finance.png'), // @/assets/svg/coming.svg |
||||
lazy7: require('@/assets/svg/coming.svg') |
||||
} |
||||
}, |
||||
created () { |
||||
if (!sessionStorage.getItem('firstLoad2')) { |
||||
const loading = this.$loading({ |
||||
lock: true, |
||||
// text: 'Loading', |
||||
text: '努力加载中，请稍等...', |
||||
spinner: 'el-icon-loading', |
||||
background: 'rgba(0, 0, 0, 0.7)' |
||||
}); |
||||
setTimeout(() => { |
||||
loading.close(); |
||||
sessionStorage.setItem('firstLoad2', true) |
||||
}, 1000); |
||||
} |
||||
|
||||
if(!this.businessKey) { |
||||
this.setShowBusiness(true) |
||||
} |
||||
}, |
||||
mounted() { |
||||
let token = this.getQueryVariable('token') |
||||
let cid = this.getQueryVariable('cid') |
||||
let systemId = this.getQueryVariable('systemId') |
||||
let stopTime = this.getQueryVariable('stopTime') |
||||
let timestamp =+stopTime; |
||||
if (token != null){ |
||||
sessionStorage.setItem('token', token) |
||||
sessionStorage.setItem('cid', cid) |
||||
sessionStorage.setItem('systemId', systemId) |
||||
sessionStorage.setItem('timestamp', timestamp) |
||||
if (!this.businessKey) { |
||||
this.setShowBusiness(true) |
||||
} |
||||
}, |
||||
mounted () { |
||||
let token = this.getQueryVariable('token') |
||||
let cid = this.getQueryVariable('cid') |
||||
let systemId = this.getQueryVariable('systemId') |
||||
let stopTime = this.getQueryVariable('stopTime') |
||||
let timestamp = +stopTime; |
||||
if (token != null) { |
||||
sessionStorage.setItem('token', token) |
||||
sessionStorage.setItem('cid', cid) |
||||
sessionStorage.setItem('systemId', systemId) |
||||
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: { |
||||
...mapState({ |
||||
showBusiness: state => state.system.showBusiness, |
||||
businessKey: state => state.system.businessKey |
||||
}) |
||||
toPart (path) { |
||||
this.$router.push(path) |
||||
}, |
||||
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 |
||||
} |
||||
} |
||||
}, |
||||
toPart(path){ |
||||
this.$router.push(path) |
||||
}, |
||||
showComing(){ |
||||
this.comingVisible = true |
||||
clearTimeout(this.timer) |
||||
this.timer = setTimeout(() => { |
||||
this.comingVisible = false |
||||
},1500) |
||||
} |
||||
showComing () { |
||||
this.comingVisible = true |
||||
clearTimeout(this.timer) |
||||
this.timer = setTimeout(() => { |
||||
this.comingVisible = false |
||||
}, 1500) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
// 标牌文字 |
||||
@mixin nameTip { |
||||
width: 200px; |
||||
height: 70px; |
||||
line-height: 60px; |
||||
text-align: center; |
||||
font-size: 20px; |
||||
background: url(../../../assets/img/index-btn-bg.png); |
||||
// background-position: center center; |
||||
background-size: 100%; |
||||
color: #fff; |
||||
border-radius: 16px; |
||||
// box-shadow: 0 6px 8px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); |
||||
z-index: 100; |
||||
} |
||||
|
||||
// 标牌文字 |
||||
@mixin nameTip { |
||||
width: 200px; |
||||
height: 70px; |
||||
line-height: 60px; |
||||
text-align: center; |
||||
font-size: 20px; |
||||
background: url(../../../assets/img/index-btn-bg.png); |
||||
// background-position: center center; |
||||
background-size: 100%; |
||||
color: #fff; |
||||
border-radius: 16px; |
||||
// box-shadow: 0 6px 8px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); |
||||
z-index: 100; |
||||
} |
||||
|
||||
.wrap{ |
||||
position: relative; |
||||
min-height: calc(100vh - 68px); |
||||
.sth{ |
||||
position: absolute; |
||||
&.cp{ |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.bg{ |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
.wrap { |
||||
position: relative; |
||||
min-height: calc(100vh - 68px); |
||||
.sth { |
||||
position: absolute; |
||||
&.cp { |
||||
cursor: pointer; |
||||
} |
||||
.integrated-counter{ |
||||
top: -14%; |
||||
left: 24%; |
||||
width: 43%; |
||||
transition: all .5s; |
||||
&:hover{ |
||||
margin-top: -10px; |
||||
} |
||||
.name{ |
||||
position: absolute; |
||||
top: 23%; |
||||
left: 20%; |
||||
@include nameTip; |
||||
} |
||||
} |
||||
.bg { |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.integrated-counter { |
||||
top: -14%; |
||||
left: 24%; |
||||
width: 43%; |
||||
transition: all 0.5s; |
||||
&:hover { |
||||
margin-top: -10px; |
||||
} |
||||
.international{ |
||||
top: -9%; |
||||
left: 72%; |
||||
width: 28%; |
||||
transition: all .5s; |
||||
// &:hover{ |
||||
// margin-top: -10px; |
||||
// } |
||||
// img{ |
||||
// transition: all .5s; |
||||
// &:hover{ |
||||
// margin-top: -10px; |
||||
// } |
||||
// } |
||||
.name{ |
||||
position: absolute; |
||||
top: 23%; |
||||
right: 0; |
||||
@include nameTip; |
||||
} |
||||
|
||||
.name { |
||||
position: absolute; |
||||
top: 23%; |
||||
left: 20%; |
||||
@include nameTip; |
||||
} |
||||
.manager{ |
||||
bottom: 0; |
||||
left: 57%; |
||||
width: 39%; |
||||
transition: all .5s; |
||||
&:hover{ |
||||
bottom: 10px; |
||||
} |
||||
.name { |
||||
position: absolute; |
||||
top: 65%; |
||||
left: 37%; |
||||
@include nameTip; |
||||
} |
||||
} |
||||
.international { |
||||
top: -9%; |
||||
left: 72%; |
||||
width: 28%; |
||||
transition: all 0.5s; |
||||
// &:hover{ |
||||
// margin-top: -10px; |
||||
// } |
||||
// img{ |
||||
// transition: all .5s; |
||||
// &:hover{ |
||||
// margin-top: -10px; |
||||
// } |
||||
// } |
||||
.name { |
||||
position: absolute; |
||||
top: 23%; |
||||
right: 0; |
||||
@include nameTip; |
||||
} |
||||
.credit-dep{ |
||||
top: 31%; |
||||
left: 0; |
||||
width: 20%; |
||||
transition: all .5s; |
||||
// &:hover{ |
||||
// top: 29%; |
||||
// } |
||||
} |
||||
.manager { |
||||
bottom: 0; |
||||
left: 57%; |
||||
width: 39%; |
||||
transition: all 0.5s; |
||||
&:hover { |
||||
bottom: 10px; |
||||
} |
||||
.company-finance{ |
||||
top: 52%; |
||||
left: 9%; |
||||
width: 28%; |
||||
transition: all .5s; |
||||
// &:hover{ |
||||
// top: 50%; |
||||
// } |
||||
.name { |
||||
position: absolute; |
||||
top: 65%; |
||||
left: 37%; |
||||
@include nameTip; |
||||
} |
||||
.personal-finance{ |
||||
bottom: 0; |
||||
left: 25%; |
||||
width: 30%; |
||||
transition: all .5s; |
||||
// &:hover{ |
||||
// bottom: 10px; |
||||
// } |
||||
} |
||||
.credit-dep { |
||||
top: 31%; |
||||
left: 0; |
||||
width: 20%; |
||||
transition: all 0.5s; |
||||
// &: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{ |
||||
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; |
||||
// } |
||||
.company-finance { |
||||
top: 53%; |
||||
} |
||||
@media(max-width: 1440px){ |
||||
.credit-dep{ |
||||
top: 32%; |
||||
} |
||||
.company-finance{ |
||||
top: 53%; |
||||
} |
||||
.personal-finance{ |
||||
top: 72%; |
||||
} |
||||
.integrated-counter{ |
||||
width: 44%; |
||||
} |
||||
.personal-finance { |
||||
top: 72%; |
||||
} |
||||
@media(max-width: 1300px){ |
||||
& { |
||||
min-height: calc(100vh - 76px); |
||||
} |
||||
.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; |
||||
@media (max-width: 1300px) { |
||||
& { |
||||
min-height: calc(100vh - 76px); |
||||
} |
||||
} |
||||
} |
||||
.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> |
||||
Loading…
Reference in new issue