154 lines
2.7 KiB
Vue
154 lines
2.7 KiB
Vue
<template>
|
|
<view class="laser-thinking-shell">
|
|
<image class="background-image" src="/static/background/exhibitionSuccess.png" mode="aspectFill" />
|
|
|
|
<view class="gift-box">
|
|
<image class="gift-image" src="/static/nft/lihe.png" mode="aspectFit" />
|
|
</view>
|
|
|
|
<view class="progress-container">
|
|
<view class="progress-bar-wrapper">
|
|
<view class="progress-bar">
|
|
<view class="progress-fill" :style="{ width: progress + '%' }"></view>
|
|
</view>
|
|
<view class="progress-icon" :style="{ left: progress + '%' }">
|
|
<view class="icon-circle"></view>
|
|
</view>
|
|
</view>
|
|
<text class="progress-text">{{ Math.round(progress) }}%</text>
|
|
<text class="loading-text">Thinking</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
progress: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.laser-thinking-shell {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
|
|
.background-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.gift-box {
|
|
position: absolute;
|
|
top: 25%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 480rpx;
|
|
height: 480rpx;
|
|
z-index: 2;
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%,
|
|
100% {
|
|
transform: translateX(-50%) translateY(0) rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: translateX(-50%) translateY(-20rpx) rotate(2deg);
|
|
}
|
|
}
|
|
|
|
.gift-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.progress-container {
|
|
position: absolute;
|
|
bottom: 25%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 600rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
z-index: 3;
|
|
}
|
|
|
|
.progress-bar-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 40rpx;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
border: 2rpx solid rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #ff6b9d 0%, #ffa8c5 50%, #ffb6d9 100%);
|
|
border-radius: 20rpx;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.progress-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
transition: left 0.3s ease;
|
|
}
|
|
|
|
.icon-circle {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, #ffb6d9 0%, #ff6b9d 100%);
|
|
border-radius: 50%;
|
|
border: 4rpx solid #ffffff;
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: 56rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 36rpx;
|
|
color: #ffffff;
|
|
letter-spacing: 6rpx;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|