187 lines
3.1 KiB
Vue
187 lines
3.1 KiB
Vue
<template>
|
|
<div :class="prefixCls">
|
|
<mf-dialog
|
|
:visible="visible"
|
|
:footer="false"
|
|
hideTitle
|
|
unmountOnClose
|
|
fullscreen
|
|
:class="`${prefixCls}-wrapper`"
|
|
:modal-class="`${prefixCls}-dialog`">
|
|
<mf-video
|
|
autoplay
|
|
:controls="false"
|
|
modelValue="https://images.iqyjsnwv.com/tmp/hello-BCSGJ8fP.mp4" />
|
|
<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>
|
|
export default {
|
|
name: 'mf-forbidden',
|
|
data() {
|
|
return {
|
|
prefixCls: 'mf-forbidden'
|
|
}
|
|
},
|
|
props: {
|
|
visible: Boolean
|
|
},
|
|
methods: {
|
|
cancel() {
|
|
this.$router.replace('/403')
|
|
},
|
|
ok() {
|
|
this.$store.dispatch('main/setForbidden', false)
|
|
}
|
|
}
|
|
}
|
|
</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>
|