添加升级显示

src/components/UserUpgrade.vue

@@ -0,0 +1,80 @@
+<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(() => {
+  updateUser({ ...user.value, lvl: props.lvl });
+});
+</script>
+
+<template>
+  <view class="content" :style="{ display: show ? 'flex' : 'none' }">
+    <image src="../static/user-upgrade.png" mode="widthFix" />
+    <image class="" src="../static/shining-bg.png" mode="widthFix" />
+    <view>
+      <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 > image:first-child {
+  width: 50vw;
+  position: absolute;
+  top: calc(50% - 30vw);
+}
+.content > image:nth-child(2) {
+  width: 80vw;
+}
+.content > view:nth-child(3) {
+  color: #fff;
+  display: flex;
+  font-size: 20px;
+  font-weight: bold;
+  margin-top: -6vw;
+}
+.content > view:nth-child(3) > 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>