191 lines
3.3 KiB
Vue
191 lines
3.3 KiB
Vue
<template>
|
||
<div :class="prefixCls">
|
||
<mf-dialog
|
||
:visible="visible"
|
||
:footer="false"
|
||
hideTitle
|
||
unmountOnClose
|
||
fullscreen
|
||
:class="`${prefixCls}-wrapper`"
|
||
:modal-class="`${prefixCls}-dialog`">
|
||
<div :class="`${prefixCls}-shadow`">
|
||
<div :class="`${prefixCls}-title`">
|
||
{{ $t('common.fbTitle') }}
|
||
</div>
|
||
<div :class="`${prefixCls}-content`">
|
||
{{ $t('common.fbContent') }}
|
||
</div>
|
||
<div :class="`${prefixCls}-footer`">
|
||
<mf-button
|
||
size="large"
|
||
type="primary"
|
||
@click="ok">
|
||
{{ $t('common.fbOK') }}
|
||
</mf-button>
|
||
<mf-button
|
||
size="large"
|
||
@click="cancel">
|
||
{{ $t('common.fbCancel') }}
|
||
</mf-button>
|
||
</div>
|
||
</div>
|
||
</mf-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import i18n from '@/lang/i18n'
|
||
|
||
export default {
|
||
name: 'mf-forbidden',
|
||
data() {
|
||
return {
|
||
prefixCls: 'mf-forbidden'
|
||
}
|
||
},
|
||
props: {
|
||
visible: Boolean
|
||
},
|
||
methods: {
|
||
cancel() {
|
||
this.$router.replace('/403')
|
||
},
|
||
ok() {
|
||
// 满18+：关闭弹窗并进入首页
|
||
Promise.resolve(this.$store.dispatch('main/setForbidden', false)).finally(() => {
|
||
// 默认语言：繁体中文（zh_HK）
|
||
this.$store.dispatch('main/setLanguage', 'zh_HK')
|
||
i18n.global.locale = 'zh_HK'
|
||
this.$router.push({ name: 'index' })
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.mf-forbidden {
|
||
overflow: hidden;
|
||
&-wrapper {
|
||
overflow: hidden;
|
||
.arco-modal-wrapper {
|
||
overflow: hidden;
|
||
}
|
||
.arco-modal-mask {
|
||
/* 背景高斯模糊关键属性 */
|
||
backdrop-filter: blur(10px);
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
}
|
||
}
|
||
&-dialog {
|
||
overflow: hidden;
|
||
// width: 428px;
|
||
// height: 258px;
|
||
// background: linear-gradient(0deg, #271433 0%, #e6217a 49%);
|
||
// border-radius: 20px;
|
||
// border: 2px solid #e6217a;
|
||
// top: 45% !important;
|
||
// transform: translateY(-45%) !important;
|
||
|
||
.arco-modal-body {
|
||
padding: 0;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
.arco-spin {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
.mf-dialog-wrap {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mf-video {
|
||
position: absolute;
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
padding: 0 !important;
|
||
video {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
&-title {
|
||
font-size: 28px;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
&-content {
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
margin-top: 40px;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
&-shadow {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
&-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 60px;
|
||
flex-direction: column;
|
||
.mf-button {
|
||
width: 300px;
|
||
height: 50px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
border-radius: 10px;
|
||
margin-bottom: 30px;
|
||
border-radius: 25px;
|
||
|
||
&:last-child {
|
||
color: #ffffff;
|
||
background-color: #1a1a1a;
|
||
&:hover {
|
||
background-color: #262626;
|
||
}
|
||
&:active {
|
||
background-color: #0d0d0d;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
.mf-forbidden {
|
||
&-title {
|
||
font-size: 24px;
|
||
}
|
||
|
||
&-dialog {
|
||
.mf-video {
|
||
video {
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|