122 lines
2.4 KiB
Vue
122 lines
2.4 KiB
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 });
|
|
}
|
|
setTimeout(() => {
|
|
props.onClose();
|
|
}, 1500);
|
|
});
|
|
</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>
|
|
<text>!</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:nth-child(3) {
|
|
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>
|