<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>
