You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.1 KiB
102 lines
2.1 KiB
<script lang="ts" setup> |
|
import { onMounted, ref } from 'vue' |
|
import { Button } from 'ant-design-vue' |
|
import { CloseOutlined } from '@ant-design/icons-vue' |
|
|
|
// import { useUserStore } from '@/store/moules/userStore/index' |
|
|
|
const a = ref(false) |
|
onMounted(() => { |
|
|
|
}) |
|
// 关闭弹窗 |
|
function handleClose() { |
|
a.value = false |
|
} |
|
</script> |
|
|
|
<template> |
|
<transition name="modal"> |
|
<div v-if="a" class="modal-mask"> |
|
<div class="modal-wrapper"> |
|
<div class="modal-container"> |
|
<div class="modal-body"> |
|
<Button class="btn"> |
|
领取并前往使用 |
|
</Button> |
|
</div> |
|
</div> |
|
<div class="close" @click="handleClose"> |
|
<CloseOutlined /> |
|
</div> |
|
</div> |
|
</div> |
|
</transition> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
.modal-mask { |
|
position: fixed; |
|
z-index: 1000; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background-color: rgba(0, 0, 0, 0.1); |
|
.close { |
|
position: absolute; |
|
top: 40px; |
|
right: 40px; |
|
width: 27px; |
|
height: 27px; |
|
background-color: rgba(0, 0, 0, 0.2); |
|
border-radius: 50%; |
|
line-height: 27px; |
|
text-align: center; |
|
color: #fff; |
|
cursor: pointer; |
|
} |
|
.modal-wrapper { |
|
width: 40vw; |
|
height: 60vh; |
|
position: absolute; |
|
top: 10%; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
background-image: url(@/assets/images/benefit.png); |
|
background-repeat: no-repeat; |
|
background-position: center center; |
|
background-size: contain; |
|
border-radius: 22px; |
|
.modal-body { |
|
.btn { |
|
height: 38px; |
|
background: linear-gradient(180deg, #ffa733 0%, #df5413 100%); |
|
border-radius: 40px; |
|
font-size: 14px; |
|
font-weight: bold; |
|
color: #ffffff; |
|
letter-spacing: 2px; |
|
position: absolute; |
|
bottom: 60px; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
} |
|
} |
|
} |
|
} |
|
.modal-enter-active, |
|
.modal-leave-active { |
|
transition: opacity 0.3s; |
|
} |
|
|
|
.modal-enter-from, |
|
.modal-leave-to { |
|
opacity: 0; |
|
} |
|
|
|
.modal-enter-to, |
|
.modal-leave-from { |
|
opacity: 1; |
|
} |
|
</style>
|
|
|