|
@@ -10,23 +10,28 @@
|
|
|
</view>
|
|
</view>
|
|
|
<view class="header-placeholder"></view>
|
|
<view class="header-placeholder"></view>
|
|
|
|
|
|
|
|
- <!-- 等级 Switcher -->
|
|
|
|
|
- <view class="swiper-container">
|
|
|
|
|
|
|
+ <!-- 等级 Swiper -->
|
|
|
|
|
+ <view class="swiper-container" v-if="!pageLoading">
|
|
|
<swiper
|
|
<swiper
|
|
|
class="level-swiper"
|
|
class="level-swiper"
|
|
|
previous-margin="80rpx"
|
|
previous-margin="80rpx"
|
|
|
next-margin="80rpx"
|
|
next-margin="80rpx"
|
|
|
:current="currentIndex"
|
|
:current="currentIndex"
|
|
|
@change="swiperChange">
|
|
@change="swiperChange">
|
|
|
- <swiper-item v-for="(level, index) in levels" :key="index" @click="changeLevel(index)">
|
|
|
|
|
- <view class="level-card" :class="'level-card-' + (index + 1)" :style="{transform: currentIndex === index ? 'scale(1)' : 'scale(0.9)'}">
|
|
|
|
|
|
|
+ <swiper-item v-for="(level, index) in processedLevels" :key="index" @click="changeLevel(index)">
|
|
|
|
|
+ <view class="level-card" :style="{
|
|
|
|
|
+ transform: currentIndex === index ? 'scale(1)' : 'scale(0.9)',
|
|
|
|
|
+ backgroundImage: 'url(' + level.backgroundUrl + ')',
|
|
|
|
|
+ backgroundSize: 'cover',
|
|
|
|
|
+ backgroundPosition: 'center'
|
|
|
|
|
+ }">
|
|
|
<view class="card-content">
|
|
<view class="card-content">
|
|
|
<view class="card-header">
|
|
<view class="card-header">
|
|
|
- <view class="level-badge">{{ level.id }}</view>
|
|
|
|
|
|
|
+ <view class="level-badge">L{{ index + 1 }}</view>
|
|
|
<view class="current-badge" v-if="level.isCurrent">当前等级</view>
|
|
<view class="current-badge" v-if="level.isCurrent">当前等级</view>
|
|
|
</view>
|
|
</view>
|
|
|
<text class="level-name">{{ level.name }}</text>
|
|
<text class="level-name">{{ level.name }}</text>
|
|
|
- <text class="level-score">{{ level.score }}</text>
|
|
|
|
|
|
|
+ <text class="level-score">所需积分: {{ level.upgradePoints || 0 }}</text>
|
|
|
<!-- Crown graphic overlay -->
|
|
<!-- Crown graphic overlay -->
|
|
|
<image class="crown-overlay" src="/static/icons/crown.svg" mode="aspectFit"></image>
|
|
<image class="crown-overlay" src="/static/icons/crown.svg" mode="aspectFit"></image>
|
|
|
</view>
|
|
</view>
|
|
@@ -37,7 +42,7 @@
|
|
|
<view class="swiper-dots">
|
|
<view class="swiper-dots">
|
|
|
<view
|
|
<view
|
|
|
class="dot"
|
|
class="dot"
|
|
|
- v-for="(item, index) in levels"
|
|
|
|
|
|
|
+ v-for="(item, index) in processedLevels"
|
|
|
:key="index"
|
|
:key="index"
|
|
|
:class="{ active: currentIndex === index }">
|
|
:class="{ active: currentIndex === index }">
|
|
|
</view>
|
|
</view>
|
|
@@ -45,35 +50,38 @@
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 权益标题 -->
|
|
<!-- 权益标题 -->
|
|
|
- <view class="benefits-title-row">
|
|
|
|
|
- <text class="benefits-title">{{ currentLevel.id }} 专属权益</text>
|
|
|
|
|
- <text class="benefits-count">({{ currentLevel.benefits.length }})</text>
|
|
|
|
|
|
|
+ <view class="benefits-title-row" v-if="!pageLoading && currentLevel">
|
|
|
|
|
+ <text class="benefits-title">专属权益</text>
|
|
|
|
|
+ <text class="benefits-count">({{ currentLevel.benefits ? currentLevel.benefits.length : 0 }})</text>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 权益列表 -->
|
|
<!-- 权益列表 -->
|
|
|
- <view class="benefits-grid">
|
|
|
|
|
|
|
+ <view class="benefits-grid" v-if="!pageLoading && currentLevel">
|
|
|
<view
|
|
<view
|
|
|
class="benefit-item"
|
|
class="benefit-item"
|
|
|
v-for="(benefit, index) in currentLevel.benefits"
|
|
v-for="(benefit, index) in currentLevel.benefits"
|
|
|
:key="index"
|
|
:key="index"
|
|
|
@click="showBenefitDetail(benefit)">
|
|
@click="showBenefitDetail(benefit)">
|
|
|
<view class="benefit-icon-wrapper">
|
|
<view class="benefit-icon-wrapper">
|
|
|
- <image class="benefit-icon" :src="benefit.icon" mode="aspectFit" v-if="benefit.icon"></image>
|
|
|
|
|
|
|
+ <image class="benefit-icon" :src="benefit.iconUrl" mode="aspectFit" v-if="benefit.iconUrl"></image>
|
|
|
<view class="benefit-icon-placeholder" v-else>{{ benefit.name[0] }}</view>
|
|
<view class="benefit-icon-placeholder" v-else>{{ benefit.name[0] }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
<text class="benefit-name">{{ benefit.name }}</text>
|
|
<text class="benefit-name">{{ benefit.name }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <view class="empty-benefits" v-if="!currentLevel.benefits || currentLevel.benefits.length === 0">
|
|
|
|
|
+ <text>该等级暂无特殊权益</text>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 权益详情弹窗 -->
|
|
<!-- 权益详情弹窗 -->
|
|
|
<view class="popup-mask" :class="{ 'show': isPopupShow }" @click="closePopup" @touchmove.stop.prevent>
|
|
<view class="popup-mask" :class="{ 'show': isPopupShow }" @click="closePopup" @touchmove.stop.prevent>
|
|
|
<view class="popup-modal" @click.stop>
|
|
<view class="popup-modal" @click.stop>
|
|
|
<view class="popup-icon-wrapper">
|
|
<view class="popup-icon-wrapper">
|
|
|
- <image class="benefit-icon-large" :src="currentBenefit.icon" mode="aspectFit" v-if="currentBenefit && currentBenefit.icon"></image>
|
|
|
|
|
|
|
+ <image class="benefit-icon-large" :src="currentBenefit.iconUrl" mode="aspectFit" v-if="currentBenefit && currentBenefit.iconUrl"></image>
|
|
|
<view class="benefit-icon-placeholder-large" v-else>{{ currentBenefit ? currentBenefit.name[0] : '' }}</view>
|
|
<view class="benefit-icon-placeholder-large" v-else>{{ currentBenefit ? currentBenefit.name[0] : '' }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
<text class="popup-title">{{ currentBenefit ? currentBenefit.name : '' }}</text>
|
|
<text class="popup-title">{{ currentBenefit ? currentBenefit.name : '' }}</text>
|
|
|
- <text class="popup-desc">{{ currentBenefit ? currentBenefit.desc : '' }}</text>
|
|
|
|
|
|
|
+ <text class="popup-desc">{{ currentBenefit ? currentBenefit.statement : '' }}</text>
|
|
|
<button class="popup-btn" @click="closePopup">我知道了</button>
|
|
<button class="popup-btn" @click="closePopup">我知道了</button>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -82,68 +90,77 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+import { getMyProfile, listAllLevelConfigs, listAllLevelRights } from '@/api/fulfiller'
|
|
|
|
|
+
|
|
|
export default {
|
|
export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- currentIndex: 2, // 默认选中 L3
|
|
|
|
|
- levels: [
|
|
|
|
|
- {
|
|
|
|
|
- id: 'L1',
|
|
|
|
|
- name: '青铜履约者',
|
|
|
|
|
- score: '需成长值 0',
|
|
|
|
|
- isCurrent: false,
|
|
|
|
|
- benefits: [
|
|
|
|
|
- { name: '新手任务', desc: '完成新手任务可获得额外奖励', icon: '/static/icons/reward.svg' }
|
|
|
|
|
- ]
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- id: 'L2',
|
|
|
|
|
- name: '白银履约者',
|
|
|
|
|
- score: '需成长值 200',
|
|
|
|
|
- isCurrent: false,
|
|
|
|
|
- benefits: [
|
|
|
|
|
- { name: '新手任务', desc: '完成新手任务可获得额外奖励', icon: '/static/icons/reward.svg' },
|
|
|
|
|
- { name: '优先派单', desc: '系统将优先为您派送附近的优质订单', icon: '' }
|
|
|
|
|
- ]
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- id: 'L3',
|
|
|
|
|
- name: '黄金履约者',
|
|
|
|
|
- score: '需成长值 500',
|
|
|
|
|
- isCurrent: true,
|
|
|
|
|
- benefits: [
|
|
|
|
|
- { name: '极速提现', desc: '提现申请 2 小时内极速到账,无需等待。', icon: '' },
|
|
|
|
|
- { name: '晋升奖励', desc: '晋升等级可获得现金红包奖励。', icon: '/static/icons/reward.svg' },
|
|
|
|
|
- { name: '优先派单', desc: '系统将优先为您派送附近的优质订单。', icon: '' }
|
|
|
|
|
- ]
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- id: 'L4',
|
|
|
|
|
- name: '钻石履约者',
|
|
|
|
|
- score: '需成长值 2000',
|
|
|
|
|
- isCurrent: false,
|
|
|
|
|
- benefits: [
|
|
|
|
|
- { name: '专属客服', desc: '享受 7x24 小时专属客服通道。', icon: '/static/icons/service.svg' },
|
|
|
|
|
- { name: '生日礼包', desc: '生日当天获赠专属礼包。', icon: '/static/icons/reward.svg' },
|
|
|
|
|
- { name: '装备免费换', desc: '每年可免费更换一套履约装备。', icon: '' },
|
|
|
|
|
- { name: '医疗互助', desc: '享受平台提供的医疗互助保障。', icon: '' }
|
|
|
|
|
- ]
|
|
|
|
|
- }
|
|
|
|
|
- ],
|
|
|
|
|
|
|
+ currentIndex: 0,
|
|
|
|
|
+ profile: null,
|
|
|
|
|
+ levels: [], // 从后端获取的等级配置
|
|
|
|
|
+ rightsList: [], // 从后端获取的所有权益列表
|
|
|
isPopupShow: false,
|
|
isPopupShow: false,
|
|
|
- currentBenefit: null
|
|
|
|
|
|
|
+ currentBenefit: null,
|
|
|
|
|
+ pageLoading: true
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
|
currentLevel() {
|
|
currentLevel() {
|
|
|
- return this.levels[this.currentIndex];
|
|
|
|
|
|
|
+ return this.processedLevels[this.currentIndex];
|
|
|
|
|
+ },
|
|
|
|
|
+ // 合并等级与对应的权益详细信息
|
|
|
|
|
+ processedLevels() {
|
|
|
|
|
+ if (!this.levels.length) return [];
|
|
|
|
|
+ return this.levels.map(lvl => {
|
|
|
|
|
+ // 筛选出属于该等级的权益
|
|
|
|
|
+ const benefits = (lvl.rights || []).map(rightId => {
|
|
|
|
|
+ return this.rightsList.find(r => r.id === rightId)
|
|
|
|
|
+ }).filter(Boolean); // 过滤掉未找到的
|
|
|
|
|
+
|
|
|
|
|
+ return {
|
|
|
|
|
+ ...lvl,
|
|
|
|
|
+ isCurrent: this.profile && this.profile.level === lvl.lvNo,
|
|
|
|
|
+ benefits: benefits
|
|
|
|
|
+ }
|
|
|
|
|
+ }).sort((a,b) => a.lvNo - b.lvNo); // 确保按级别排序
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+ async onLoad() {
|
|
|
|
|
+ await this.initData();
|
|
|
|
|
+ },
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ async initData() {
|
|
|
|
|
+ this.pageLoading = true;
|
|
|
|
|
+ uni.showLoading({ title: '加载中...' });
|
|
|
|
|
+ try {
|
|
|
|
|
+ // 并行加载个人信息、等级配置、权益列表
|
|
|
|
|
+ const [profileRes, levelsRes, rightsRes] = await Promise.all([
|
|
|
|
|
+ getMyProfile(),
|
|
|
|
|
+ listAllLevelConfigs(),
|
|
|
|
|
+ listAllLevelRights()
|
|
|
|
|
+ ]);
|
|
|
|
|
+
|
|
|
|
|
+ this.profile = profileRes.data;
|
|
|
|
|
+ this.levels = levelsRes.data || [];
|
|
|
|
|
+ this.rightsList = rightsRes.data || [];
|
|
|
|
|
+
|
|
|
|
|
+ // 默认定位到用户当前等级
|
|
|
|
|
+ if (this.profile) {
|
|
|
|
|
+ const idx = this.processedLevels.findIndex(lvl => lvl.lvNo === this.profile.level);
|
|
|
|
|
+ if (idx !== -1) {
|
|
|
|
|
+ this.currentIndex = idx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ console.error('初始化等级页面失败:', err);
|
|
|
|
|
+ uni.showToast({ title: '数据加载失败', icon: 'none' });
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ this.pageLoading = false;
|
|
|
|
|
+ uni.hideLoading();
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
navBack() {
|
|
navBack() {
|
|
|
- uni.navigateBack({
|
|
|
|
|
- delta: 1
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ uni.navigateBack();
|
|
|
},
|
|
},
|
|
|
swiperChange(e) {
|
|
swiperChange(e) {
|
|
|
this.currentIndex = e.detail.current;
|
|
this.currentIndex = e.detail.current;
|
|
@@ -163,7 +180,6 @@ export default {
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
<style>
|
|
|
-/* ... Header styles keep same ... */
|
|
|
|
|
page {
|
|
page {
|
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
@@ -216,12 +232,8 @@ page {
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1);
|
|
box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1);
|
|
|
|
|
+ background-color: #eee;
|
|
|
}
|
|
}
|
|
|
-/* Gradients */
|
|
|
|
|
-.level-card-1 { background: linear-gradient(135deg, #E0E0E0 0%, #BDBDBD 100%); }
|
|
|
|
|
-.level-card-2 { background: linear-gradient(135deg, #CFD8DC 0%, #B0BEC5 100%); }
|
|
|
|
|
-.level-card-3 { background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%); }
|
|
|
|
|
-.level-card-4 { background: linear-gradient(135deg, #4FC3F7 0%, #039BE5 100%); }
|
|
|
|
|
|
|
|
|
|
.card-content {
|
|
.card-content {
|
|
|
padding: 30rpx;
|
|
padding: 30rpx;
|
|
@@ -236,9 +248,10 @@ page {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
align-items: flex-start;
|
|
|
- margin-bottom: auto; /* Push content down */
|
|
|
|
|
|
|
+ margin-bottom: auto;
|
|
|
}
|
|
}
|
|
|
.level-badge {
|
|
.level-badge {
|
|
|
|
|
+ background: rgba(255,255,255,0.2);
|
|
|
border: 1px solid rgba(255,255,255,0.6);
|
|
border: 1px solid rgba(255,255,255,0.6);
|
|
|
padding: 2rpx 12rpx;
|
|
padding: 2rpx 12rpx;
|
|
|
border-radius: 10rpx;
|
|
border-radius: 10rpx;
|
|
@@ -258,11 +271,11 @@ page {
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
margin-bottom: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
|
- text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
|
|
|
|
|
|
|
+ text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
|
|
|
}
|
|
}
|
|
|
.level-score {
|
|
.level-score {
|
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
|
- color: rgba(255,255,255,0.8);
|
|
|
|
|
|
|
+ color: rgba(255,255,255,0.9);
|
|
|
margin-bottom: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
}
|
|
|
.crown-overlay {
|
|
.crown-overlay {
|
|
@@ -271,11 +284,10 @@ page {
|
|
|
right: -30rpx;
|
|
right: -30rpx;
|
|
|
width: 260rpx;
|
|
width: 260rpx;
|
|
|
height: 260rpx;
|
|
height: 260rpx;
|
|
|
- opacity: 0.1;
|
|
|
|
|
|
|
+ opacity: 0.15;
|
|
|
z-index: 1;
|
|
z-index: 1;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/* Dots */
|
|
|
|
|
.swiper-dots {
|
|
.swiper-dots {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
@@ -317,7 +329,7 @@ page {
|
|
|
padding: 0 20rpx;
|
|
padding: 0 20rpx;
|
|
|
}
|
|
}
|
|
|
.benefit-item {
|
|
.benefit-item {
|
|
|
- width: 25%; /* 4 items per row */
|
|
|
|
|
|
|
+ width: 25%;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -326,7 +338,7 @@ page {
|
|
|
.benefit-icon-wrapper {
|
|
.benefit-icon-wrapper {
|
|
|
width: 88rpx;
|
|
width: 88rpx;
|
|
|
height: 88rpx;
|
|
height: 88rpx;
|
|
|
- background-color: #F8F8F8; /* Or very light color based on current level? Keep simple for now */
|
|
|
|
|
|
|
+ background-color: #F8F8F8;
|
|
|
border-radius: 24rpx;
|
|
border-radius: 24rpx;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -337,42 +349,44 @@ page {
|
|
|
width: 44rpx;
|
|
width: 44rpx;
|
|
|
height: 44rpx;
|
|
height: 44rpx;
|
|
|
}
|
|
}
|
|
|
-.benefit-icon-placeholder {
|
|
|
|
|
- font-size: 36rpx;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- color: #FFB300;
|
|
|
|
|
-}
|
|
|
|
|
.benefit-name {
|
|
.benefit-name {
|
|
|
- font-size: 22rpx; /* Smaller font as requested matching image roughly */
|
|
|
|
|
|
|
+ font-size: 22rpx;
|
|
|
color: #666;
|
|
color: #666;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/* Modal */
|
|
|
|
|
|
|
+.empty-benefits {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding: 60rpx 0;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ color: #ccc;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.popup-mask {
|
|
.popup-mask {
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
top: 0;
|
|
top: 0;
|
|
|
left: 0;
|
|
left: 0;
|
|
|
right: 0;
|
|
right: 0;
|
|
|
bottom: 0;
|
|
bottom: 0;
|
|
|
- background-color: rgba(0,0,0,0.5); /* Semi-transparent black */
|
|
|
|
|
|
|
+ background-color: rgba(0,0,0,0.5);
|
|
|
z-index: 999;
|
|
z-index: 999;
|
|
|
- display: none; /* Hidden by default */
|
|
|
|
|
|
|
+ display: none;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
}
|
|
}
|
|
|
.popup-mask.show {
|
|
.popup-mask.show {
|
|
|
- display: flex; /* Show when active */
|
|
|
|
|
|
|
+ display: flex;
|
|
|
}
|
|
}
|
|
|
.popup-modal {
|
|
.popup-modal {
|
|
|
- width: 480rpx; /* Narrower width */
|
|
|
|
|
|
|
+ width: 520rpx;
|
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
|
border-radius: 30rpx;
|
|
border-radius: 30rpx;
|
|
|
padding: 50rpx 40rpx;
|
|
padding: 50rpx 40rpx;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.2); /* Drop shadow */
|
|
|
|
|
|
|
+ box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.2);
|
|
|
}
|
|
}
|
|
|
.popup-icon-wrapper {
|
|
.popup-icon-wrapper {
|
|
|
width: 120rpx;
|
|
width: 120rpx;
|
|
@@ -388,31 +402,26 @@ page {
|
|
|
width: 60rpx;
|
|
width: 60rpx;
|
|
|
height: 60rpx;
|
|
height: 60rpx;
|
|
|
}
|
|
}
|
|
|
-.benefit-icon-placeholder-large {
|
|
|
|
|
- font-size: 50rpx;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- color: #FFB300;
|
|
|
|
|
-}
|
|
|
|
|
.popup-title {
|
|
.popup-title {
|
|
|
- font-size: 32rpx;
|
|
|
|
|
|
|
+ font-size: 34rpx;
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
color: #333;
|
|
color: #333;
|
|
|
margin-bottom: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
}
|
|
|
.popup-desc {
|
|
.popup-desc {
|
|
|
- font-size: 26rpx;
|
|
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
color: #666;
|
|
color: #666;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- line-height: 1.5;
|
|
|
|
|
|
|
+ line-height: 1.6;
|
|
|
margin-bottom: 40rpx;
|
|
margin-bottom: 40rpx;
|
|
|
}
|
|
}
|
|
|
.popup-btn {
|
|
.popup-btn {
|
|
|
- width: 80%;
|
|
|
|
|
- height: 72rpx;
|
|
|
|
|
- line-height: 72rpx;
|
|
|
|
|
- background-color: #212121;
|
|
|
|
|
|
|
+ width: 90%;
|
|
|
|
|
+ height: 80rpx;
|
|
|
|
|
+ line-height: 80rpx;
|
|
|
|
|
+ background: linear-gradient(90deg, #333 0%, #111 100%);
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
|
- border-radius: 36rpx;
|
|
|
|
|
|
|
+ border-radius: 40rpx;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|