shoot-miniprograms/src/components/UserUpgrade.vue

<script setup>
import { onMounted } from "vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const { updateUser } = store;
const props = defineProps({
  lvl: {
    type: Number,
    default: 0,
  },
  show: {
    type: Boolean,
    default: false,
  },
  onClose: {
    type: Function,
    default: () => {},
  },
});
onMounted(() => {
  if (props.lvl > user.value.lvl) {
    updateUser({ ...user.value, lvl: props.lvl });
  }
});
</script>

<template>
  <view class="content" :style="{ display: show ? 'flex' : 'none' }">
    <view>
      <image
        class="scale-in"
        src="../static/user-upgrade.png"
        mode="widthFix"
      />
      <image
        class="scale-in bg-effect"
        src="../static/shining-bg.png"
        mode="widthFix"
      />
      <image
        class="scale-in bg-effect"
        src="../static/gold-shining.png"
        mode="widthFix"
      />
    </view>
    <view class="text-content">
      <image src="../static/update-text-bg.png" />
      <text>恭喜你升级到</text>
      <text>射灵{{ lvl }}级</text>
    </view>
    <button @click="onClose" hover-class="none">关闭</button>
  </view>
</template>

<style scoped>
.content {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #232323;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  color: red;
}
.content > view:first-child {
  position: relative;
}

.content > view:first-child > image:first-child {
  animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.content > view:first-child > image:first-child {
  width: 50vw;
  margin: 20vw;
}
.bg-effect {
  position: absolute;
  width: 80vw;
  left: calc(50% - 40vw);
  z-index: -1;
  transform: scale(0);
  opacity: 0;
}
.text-content {
  color: #fff;
  display: flex;
  font-size: 20px;
  font-weight: bold;
  margin-top: -6vw;
  position: relative;
  line-height: 60px;
}
.text-content > image:first-child {
  position: absolute;
  width: 80vw;
  left: calc(50% - 40vw);
  height: 60px;
}
.text-content > text:last-child {
  color: #fed847;
}
.content > button:last-child {
  color: #fff9;
  font-size: 20px;
  border: 1px solid #fff;
  padding: 10px;
  width: 50vw;
  border-radius: 20px;
  margin-top: 10vw;
}
</style>