156 lines
2.7 KiB
Vue
156 lines
2.7 KiB
Vue
<template>
|
|
<view v-if="visible" class="guide-start-modal">
|
|
<view class="modal-mask" @click="handleClose"></view>
|
|
<view class="modal-content">
|
|
<view class="modal-icon">🧭</view>
|
|
<view class="modal-title">新手指引</view>
|
|
<view class="modal-divider"></view>
|
|
<view class="modal-desc">完成引导可获得</view>
|
|
<view class="modal-rewards">
|
|
<view class="reward-item">
|
|
<text class="reward-icon">⭐</text>
|
|
<text class="reward-value">经验</text>
|
|
</view>
|
|
<view class="reward-item">
|
|
<text class="reward-icon">💎</text>
|
|
<text class="reward-value">钻石</text>
|
|
</view>
|
|
</view>
|
|
<view class="modal-buttons">
|
|
<view class="modal-btn primary-btn" @click="handleStart">去做</view>
|
|
<view class="modal-btn secondary-btn" @click="handleClose">关闭</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { closeGuideStartModal } from '@/utils/guideConfig'
|
|
|
|
export default {
|
|
name: 'GuideStartModal',
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
methods: {
|
|
handleStart() {
|
|
this.$emit('start')
|
|
},
|
|
handleClose() {
|
|
closeGuideStartModal()
|
|
this.$emit('close')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.guide-start-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.modal-content {
|
|
position: relative;
|
|
width: 560rpx;
|
|
background: #fff;
|
|
border-radius: 24rpx;
|
|
padding: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-icon {
|
|
font-size: 80rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.modal-divider {
|
|
width: 100%;
|
|
height: 1rpx;
|
|
background: #eee;
|
|
margin: 24rpx 0;
|
|
}
|
|
|
|
.modal-desc {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.modal-rewards {
|
|
display: flex;
|
|
gap: 48rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.reward-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.reward-icon {
|
|
font-size: 48rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.reward-value {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.modal-buttons {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.modal-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.primary-btn {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
.secondary-btn {
|
|
background: #f5f5f5;
|
|
color: #666;
|
|
}
|
|
</style>
|