{{ badge.icon }}
{{ badge.name }}
.section {
margin: 20rpx 30rpx;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.section-title {
font-size: 30rpx;
font-weight: bold;
color: $facade-text-strong;
}
.section-more {
font-size: 24rpx;
color: $facade-text-muted;
}
.badge-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background: $app-surface;
border-radius: 20rpx;
padding: 24rpx 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.badge-item {
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 16rpx;
}
.badge-icon-wrap {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8rpx;
font-size: 40rpx;
}
.badge-icon-wrap.unlocked {
background: linear-gradient(135deg, #fdfbfb, #ebedee);
box-shadow: 0 4rpx 16rpx rgba(253,160,91,0.3);
}
.badge-icon-wrap.locked {
background: $facade-fill;
opacity: 0.5;
}
.badge-name {
font-size: 20rpx;
color: $facade-text-muted;
text-align: center;
}