更新最新代码
This commit is contained in:
@@ -0,0 +1,187 @@
|
||||
/* pages/pet/achievements.wxss */
|
||||
@import '../../styles/common.wxss';
|
||||
|
||||
page {
|
||||
background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
scroll-view.page-bg {
|
||||
height: 100vh;
|
||||
padding-top: 196rpx;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%);
|
||||
}
|
||||
|
||||
/* ===== 顶部导航(与其他页面一致,fixed 定位与微信胶囊对齐) ===== */
|
||||
.top-nav-card {
|
||||
background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%);
|
||||
}
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #C96A85;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 右侧占位,保持标题真正居中 */
|
||||
.nav-spacer {
|
||||
width: 56rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 24rpx 32rpx;
|
||||
}
|
||||
|
||||
/* ===== 成就概览 ===== */
|
||||
.ach-summary {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #FFD3E0, #FFB6C6 55%, #FF9AB0);
|
||||
border-radius: 32rpx;
|
||||
padding: 40rpx 40rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 24rpx;
|
||||
color: #fff;
|
||||
box-shadow: 0 12rpx 30rpx rgba(255, 140, 170, 0.22);
|
||||
}
|
||||
.ach-deco {
|
||||
position: absolute;
|
||||
font-size: 60rpx;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.ach-deco-1 {
|
||||
top: 24rpx;
|
||||
left: 32rpx;
|
||||
}
|
||||
.ach-deco-2 {
|
||||
bottom: 24rpx;
|
||||
right: 32rpx;
|
||||
}
|
||||
.ach-count {
|
||||
font-size: 88rpx;
|
||||
font-weight: 800;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
.ach-total {
|
||||
font-size: 40rpx;
|
||||
font-weight: 400;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.ach-progress-text {
|
||||
font-size: 26rpx;
|
||||
opacity: 0.85;
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.ach-progress-track {
|
||||
height: 14rpx;
|
||||
background: rgba(255,255,255,0.3);
|
||||
border-radius: 999rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ach-progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #FFE066, #FFD700);
|
||||
border-radius: 999rpx;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
.ach-percent {
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* ===== 成就列表 ===== */
|
||||
.ach-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.ach-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
padding: 28rpx;
|
||||
background: linear-gradient(160deg, #FFF8FA 0%, #FFF0F4 100%);
|
||||
border: 2rpx solid rgba(255,190,210,0.3);
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(255, 140, 170, 0.08);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.ach-card.locked {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.ach-card-icon {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(135deg, #FFD3E0, #FFB6C6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48rpx;
|
||||
flex-shrink: 0;
|
||||
box-shadow: inset 0 0 0 2rpx rgba(255,107,129,0.15);
|
||||
}
|
||||
.ach-card.locked .ach-card-icon {
|
||||
background: #F5F5F5;
|
||||
box-shadow: inset 0 0 0 2rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
.ach-card-info {
|
||||
flex: 1;
|
||||
}
|
||||
.ach-card-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
.ach-card-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #5A4A4E;
|
||||
}
|
||||
.ach-card-desc {
|
||||
font-size: 24rpx;
|
||||
color: #B08A8A;
|
||||
display: block;
|
||||
}
|
||||
.ach-card-time {
|
||||
font-size: 20rpx;
|
||||
color: #C9A8A8;
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.ach-card-status {
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ach-card-status.unlocked {
|
||||
background: #E8F5E9;
|
||||
color: #66BB6A;
|
||||
}
|
||||
.ach-card-status.locked-badge {
|
||||
background: #F5F5F5;
|
||||
color: #C9A8A8;
|
||||
}
|
||||
|
||||
@import '../../styles/design.wxss';
|
||||
|
||||
@import '../../styles/journal.wxss';
|
||||
|
||||
.adopt-card,.stat-card,.action-card,.dynamics-card,.ach-card { background:#FFFDF8; border:1rpx solid #E9DDD0; box-shadow:none; }.adopt-title,.ach-card-name { color:#352E2A; }.adopt-desc,.ach-card-desc { color:#85776D; }.ach-summary { background:#F4E2E3; color:#943C58; box-shadow:none; }.ach-deco { display:none; }
|
||||
|
||||
@import '../../styles/button-theme.wxss';
|
||||
|
||||
@import '../../styles/typography.wxss';
|
||||
Reference in New Issue
Block a user