720 lines
14 KiB
Vue
720 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<div class="wealth-level-page">
|
|||
|
|
<!-- 顶部导航栏 -->
|
|||
|
|
<div class="header">
|
|||
|
|
<div class="back-btn" @click="goBack">
|
|||
|
|
<i class="icon-back">‹</i>
|
|||
|
|
</div>
|
|||
|
|
<div class="title-section">
|
|||
|
|
<h1 class="main-title">财富等级</h1>
|
|||
|
|
<span class="sub-title">主播等级</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="help-btn" @click="showHelp">
|
|||
|
|
<i class="icon-help">?</i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 等级进度环形图 -->
|
|||
|
|
<div class="level-progress-section">
|
|||
|
|
<div class="progress-ring-container">
|
|||
|
|
<!-- 等级标签 -->
|
|||
|
|
<div class="level-labels">
|
|||
|
|
<div
|
|||
|
|
class="level-label"
|
|||
|
|
v-for="(level, index) in levels"
|
|||
|
|
:key="index"
|
|||
|
|
:class="{ active: currentLevelIndex >= index }"
|
|||
|
|
>
|
|||
|
|
<span class="level-name">{{ level.name }}</span>
|
|||
|
|
<div
|
|||
|
|
class="level-dot"
|
|||
|
|
:class="{ active: currentLevelIndex >= index }"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 中心头像和信息 -->
|
|||
|
|
<div class="center-info">
|
|||
|
|
<div class="avatar">
|
|||
|
|
<img :src="userAvatar" alt="用户头像" />
|
|||
|
|
</div>
|
|||
|
|
<div class="experience-info">
|
|||
|
|
<div class="current-exp">
|
|||
|
|
<span class="exp-number">{{ currentExp }}</span>
|
|||
|
|
<span class="exp-label">当前经验</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="next-level-exp">
|
|||
|
|
<span class="exp-number">{{ nextLevelExp }}</span>
|
|||
|
|
<span class="exp-label">距离下一个等级</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 进度弧线 -->
|
|||
|
|
<svg class="progress-ring" viewBox="0 0 200 200">
|
|||
|
|
<circle
|
|||
|
|
class="progress-ring-bg"
|
|||
|
|
cx="100"
|
|||
|
|
cy="100"
|
|||
|
|
r="85"
|
|||
|
|
fill="none"
|
|||
|
|
stroke="#2a2a2a"
|
|||
|
|
stroke-width="4"
|
|||
|
|
/>
|
|||
|
|
<circle
|
|||
|
|
class="progress-ring-progress"
|
|||
|
|
cx="100"
|
|||
|
|
cy="100"
|
|||
|
|
r="85"
|
|||
|
|
fill="none"
|
|||
|
|
stroke="#00ff88"
|
|||
|
|
stroke-width="4"
|
|||
|
|
stroke-linecap="round"
|
|||
|
|
:stroke-dasharray="circumference"
|
|||
|
|
:stroke-dashoffset="progressOffset"
|
|||
|
|
transform="rotate(-90 100 100)"
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 当前等级卡片 -->
|
|||
|
|
<div class="current-level-card">
|
|||
|
|
<div class="level-badge">
|
|||
|
|
<img :src="currentLevel.badge" alt="等级徽章" />
|
|||
|
|
</div>
|
|||
|
|
<div class="level-info">
|
|||
|
|
<h2 class="level-title">{{ currentLevel.name }}</h2>
|
|||
|
|
<p class="level-description">{{ currentLevel.description }}</p>
|
|||
|
|
<div class="level-progress-bar">
|
|||
|
|
<div class="progress-track">
|
|||
|
|
<div
|
|||
|
|
class="progress-fill"
|
|||
|
|
:style="{ width: levelProgress + '%' }"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-labels">
|
|||
|
|
<span>Lv.{{ currentLevel.level }}</span>
|
|||
|
|
<span>Lv.{{ currentLevel.level + 1 }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p class="next-level-requirement">{{ nextLevelRequirement }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 每日奖励 -->
|
|||
|
|
<div class="daily-rewards-section">
|
|||
|
|
<h3 class="section-title">每日奖励</h3>
|
|||
|
|
<div class="reward-item">
|
|||
|
|
<div class="reward-icon">
|
|||
|
|
<img src="/icons/coin.png" alt="金币" />
|
|||
|
|
</div>
|
|||
|
|
<div class="reward-info">
|
|||
|
|
<p class="reward-title">段位达到富豪8</p>
|
|||
|
|
<p class="reward-desc">可每日领取金币</p>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
class="claim-btn"
|
|||
|
|
@click="claimDailyReward"
|
|||
|
|
:disabled="dailyRewardClaimed"
|
|||
|
|
>
|
|||
|
|
{{ dailyRewardClaimed ? "已领取" : "立即领取" }}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 等级需求及福利 -->
|
|||
|
|
<div class="level-benefits-section">
|
|||
|
|
<h3 class="section-title">等级需求及福利</h3>
|
|||
|
|
<div class="benefits-grid">
|
|||
|
|
<div
|
|||
|
|
class="benefit-item"
|
|||
|
|
v-for="(benefit, index) in levelBenefits"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<div class="benefit-icon">
|
|||
|
|
<img :src="benefit.icon" alt="福利图标" />
|
|||
|
|
</div>
|
|||
|
|
<p class="benefit-value">{{ benefit.value }}</p>
|
|||
|
|
<p class="benefit-desc">{{ benefit.description }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 财富特权 -->
|
|||
|
|
<div class="wealth-privileges-section">
|
|||
|
|
<h3 class="section-title">财富特权</h3>
|
|||
|
|
<div class="privileges-grid">
|
|||
|
|
<div
|
|||
|
|
class="privilege-item"
|
|||
|
|
v-for="(privilege, index) in wealthPrivileges"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<div class="privilege-icon">
|
|||
|
|
<img :src="privilege.icon" alt="特权图标" />
|
|||
|
|
</div>
|
|||
|
|
<p class="privilege-name">{{ privilege.name }}</p>
|
|||
|
|
<p class="privilege-level">{{ privilege.level }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "WealthLevelPage",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 用户信息
|
|||
|
|
userAvatar: "",
|
|||
|
|
currentExp: 1608,
|
|||
|
|
nextLevelExp: 1608,
|
|||
|
|
currentLevelIndex: 1,
|
|||
|
|
dailyRewardClaimed: false,
|
|||
|
|
|
|||
|
|
// 等级配置
|
|||
|
|
levels: [
|
|||
|
|
{ name: "新人", value: 0 },
|
|||
|
|
{ name: "富豪", value: 1000 },
|
|||
|
|
{ name: "星爵", value: 5000 },
|
|||
|
|
{ name: "星侯", value: 15000 },
|
|||
|
|
{ name: "星王", value: 50000 },
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
// 当前等级信息
|
|||
|
|
currentLevel: {
|
|||
|
|
name: "星爵",
|
|||
|
|
level: 1,
|
|||
|
|
description: "进30天保段已成功",
|
|||
|
|
badge: "",
|
|||
|
|
requirement: 10000,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 等级福利
|
|||
|
|
levelBenefits: [
|
|||
|
|
{
|
|||
|
|
icon: "",
|
|||
|
|
value: "100万",
|
|||
|
|
description: "所需经验值",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: "",
|
|||
|
|
value: "100万",
|
|||
|
|
description: "保段经验值",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: "",
|
|||
|
|
value: "100万",
|
|||
|
|
description: "每日可领",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: "",
|
|||
|
|
value: "吉普",
|
|||
|
|
description: "专属座驾",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
// 财富特权
|
|||
|
|
wealthPrivileges: Array(12)
|
|||
|
|
.fill()
|
|||
|
|
.map((_, index) => ({
|
|||
|
|
name: "吉普",
|
|||
|
|
level: "富豪6解锁",
|
|||
|
|
icon: "",
|
|||
|
|
})),
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
computed: {
|
|||
|
|
// 计算圆形进度条
|
|||
|
|
circumference() {
|
|||
|
|
return 2 * Math.PI * 85;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
progressOffset() {
|
|||
|
|
const progress = this.levelProgress / 100;
|
|||
|
|
return this.circumference - progress * this.circumference;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 计算当前等级进度
|
|||
|
|
levelProgress() {
|
|||
|
|
const currentLevelExp = this.levels[this.currentLevelIndex].value;
|
|||
|
|
const nextLevelExp =
|
|||
|
|
this.levels[this.currentLevelIndex + 1]?.value ||
|
|||
|
|
currentLevelExp + 10000;
|
|||
|
|
const progress =
|
|||
|
|
((this.currentExp - currentLevelExp) /
|
|||
|
|
(nextLevelExp - currentLevelExp)) *
|
|||
|
|
100;
|
|||
|
|
return Math.min(Math.max(progress, 0), 100);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 下一等级需求
|
|||
|
|
nextLevelRequirement() {
|
|||
|
|
const nextLevel = this.levels[this.currentLevelIndex + 1];
|
|||
|
|
if (nextLevel) {
|
|||
|
|
const remaining = nextLevel.value - this.currentExp;
|
|||
|
|
return `距离下一个段位还差${remaining.toLocaleString()}经验`;
|
|||
|
|
}
|
|||
|
|
return "已达到最高等级";
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 返回上一页
|
|||
|
|
goBack() {
|
|||
|
|
this.$router.go(-1);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 显示帮助
|
|||
|
|
showHelp() {
|
|||
|
|
this.$toast("帮助信息");
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 领取每日奖励
|
|||
|
|
claimDailyReward() {
|
|||
|
|
if (this.dailyRewardClaimed) return;
|
|||
|
|
|
|||
|
|
this.dailyRewardClaimed = true;
|
|||
|
|
this.$toast("领取成功！");
|
|||
|
|
|
|||
|
|
// 这里可以调用API
|
|||
|
|
this.apiClaimDailyReward();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// API调用示例
|
|||
|
|
async apiClaimDailyReward() {
|
|||
|
|
try {
|
|||
|
|
// const response = await this.$api.claimDailyReward()
|
|||
|
|
console.log("API: 领取每日奖励");
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("领取失败:", error);
|
|||
|
|
this.dailyRewardClaimed = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取用户等级数据
|
|||
|
|
async fetchUserLevelData() {
|
|||
|
|
try {
|
|||
|
|
// const response = await this.$api.getUserLevel()
|
|||
|
|
// this.currentExp = response.currentExp
|
|||
|
|
// this.currentLevelIndex = response.levelIndex
|
|||
|
|
console.log("API: 获取用户等级数据");
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("获取数据失败:", error);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
mounted() {
|
|||
|
|
this.fetchUserLevelData();
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.wealth-level-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 50%, #f5f5f5 50%);
|
|||
|
|
color: #fff;
|
|||
|
|
padding-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 顶部导航 */
|
|||
|
|
.header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 44px 20px 20px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back-btn,
|
|||
|
|
.help-btn {
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back-btn:hover,
|
|||
|
|
.help-btn:hover {
|
|||
|
|
background: rgba(255, 255, 255, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-back {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-help {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-section {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin: 0 0 4px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sub-title {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 等级进度环形图 */
|
|||
|
|
.level-progress-section {
|
|||
|
|
padding: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-ring-container {
|
|||
|
|
position: relative;
|
|||
|
|
width: 280px;
|
|||
|
|
height: 280px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-labels {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-label {
|
|||
|
|
position: absolute;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-label:nth-child(1) {
|
|||
|
|
top: 10px;
|
|||
|
|
left: 20px;
|
|||
|
|
} /* 新人 */
|
|||
|
|
.level-label:nth-child(2) {
|
|||
|
|
top: 40px;
|
|||
|
|
right: 10px;
|
|||
|
|
} /* 富豪 */
|
|||
|
|
.level-label:nth-child(3) {
|
|||
|
|
bottom: 40px;
|
|||
|
|
right: 10px;
|
|||
|
|
} /* 星爵 */
|
|||
|
|
.level-label:nth-child(4) {
|
|||
|
|
bottom: 10px;
|
|||
|
|
left: 20px;
|
|||
|
|
} /* 星侯 */
|
|||
|
|
.level-label:nth-child(5) {
|
|||
|
|
top: 50%;
|
|||
|
|
right: 0;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
} /* 星王 */
|
|||
|
|
|
|||
|
|
.level-name {
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-label.active .level-name {
|
|||
|
|
color: #00ff88;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-dot {
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #333;
|
|||
|
|
border: 2px solid #555;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-dot.active {
|
|||
|
|
background: #00ff88;
|
|||
|
|
border-color: #00ff88;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.center-info {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
text-align: center;
|
|||
|
|
z-index: 3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin: 0 auto 16px;
|
|||
|
|
border: 3px solid #00ff88;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.experience-info {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
width: 200px;
|
|||
|
|
margin-top: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.current-exp,
|
|||
|
|
.next-level-exp {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.exp-number {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #00ff88;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.exp-label {
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #999;
|
|||
|
|
margin-top: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-ring {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
transform: rotate(-90deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-ring-progress {
|
|||
|
|
transition: stroke-dashoffset 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 当前等级卡片 */
|
|||
|
|
.current-level-card {
|
|||
|
|
margin: 20px;
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-badge {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
margin-right: 16px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-badge img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: contain;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-info {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin: 0 0 4px 0;
|
|||
|
|
color: #00ff88;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-description {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #ccc;
|
|||
|
|
margin: 0 0 12px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-progress-bar {
|
|||
|
|
margin: 8px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-track {
|
|||
|
|
height: 4px;
|
|||
|
|
background: #333;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-fill {
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, #00ff88, #00ccff);
|
|||
|
|
border-radius: 2px;
|
|||
|
|
transition: width 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-labels {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.next-level-requirement {
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: #999;
|
|||
|
|
margin: 8px 0 0 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 每日奖励和福利区域 */
|
|||
|
|
.daily-rewards-section,
|
|||
|
|
.level-benefits-section,
|
|||
|
|
.wealth-privileges-section {
|
|||
|
|
background: #fff;
|
|||
|
|
color: #333;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin: 0 0 16px 0;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reward-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16px;
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reward-icon {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reward-icon img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: contain;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reward-info {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reward-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin: 0 0 2px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reward-desc {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #666;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.claim-btn {
|
|||
|
|
background: #00ff88;
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.claim-btn:hover:not(:disabled) {
|
|||
|
|
background: #00e67a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.claim-btn:disabled {
|
|||
|
|
background: #ccc;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 福利网格 */
|
|||
|
|
.benefits-grid,
|
|||
|
|
.privileges-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(4, 1fr);
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefit-item,
|
|||
|
|
.privilege-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 12px;
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefit-icon,
|
|||
|
|
.privilege-icon {
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefit-icon img,
|
|||
|
|
.privilege-icon img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: contain;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefit-value,
|
|||
|
|
.privilege-name {
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin: 0 0 2px 0;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefit-desc,
|
|||
|
|
.privilege-level {
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #666;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 响应式设计 */
|
|||
|
|
@media (max-width: 375px) {
|
|||
|
|
.progress-ring-container {
|
|||
|
|
width: 240px;
|
|||
|
|
height: 240px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.experience-info {
|
|||
|
|
width: 160px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefits-grid,
|
|||
|
|
.privileges-grid {
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|