diff --git a/pages/index/index.vue b/pages/index/index.vue index ec2ac79..39f6723 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -20,14 +20,6 @@ > - - - - - - - - @@ -96,7 +88,7 @@ - + 大家都在用 - - - - + + + + + + + + 制作今日头像 + 限定 · 如意边框 + - 制作今日头像 - 限定 · 如意边框 + - - - + + + + + + + 好运祝福壁纸 + 高清 · 福气盈门 + - 好运祝福壁纸 - 高清 · 福气盈门 + @@ -138,40 +140,34 @@ 排行榜单 - - - 每小时更新 + + 全部 + 头像框 + 贺卡 + 壁纸 - - - 全部 - 头像框 - 贺卡 - 壁纸 - - { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 32rpx; + margin-bottom: 24rpx; .user-info { display: flex; align-items: center; .user-avatar { - width: 88rpx; - height: 88rpx; + width: 64rpx; + height: 64rpx; border-radius: 50%; - border: 4rpx solid #fff; + border: 2rpx solid #fff; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); - margin-right: 20rpx; + margin-right: 16rpx; } .user-texts { @@ -366,34 +362,18 @@ onShareTimeline(() => { flex-direction: column; .year-info { - font-size: 24rpx; + font-size: 20rpx; color: #999; - margin-bottom: 4rpx; + margin-bottom: 2rpx; } .user-name { - font-size: 32rpx; + font-size: 26rpx; font-weight: bold; color: #333; } } } - - .header-actions { - display: flex; - gap: 20rpx; - - .action-btn { - width: 72rpx; - height: 72rpx; - background: #fff; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03); - } - } } /* 主卡片 (Lucky Status) */ @@ -611,76 +591,92 @@ onShareTimeline(() => { } /* 大家都在用 */ -.feature-grid { +.compact-section { + .section-header { + margin-bottom: 20rpx; + } +} + +.feature-row { display: flex; - justify-content: space-between; - gap: 24rpx; + flex-direction: column; + gap: 20rpx; - .feature-card { - flex: 1; + .feature-item { background: #fff; - border-radius: 32rpx; - padding: 32rpx; + border-radius: 24rpx; + padding: 24rpx 32rpx; display: flex; - flex-direction: column; + justify-content: space-between; align-items: center; - box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03); + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03); - .icon-wrap { - width: 96rpx; - height: 96rpx; - border-radius: 24rpx; + .left-content { display: flex; align-items: center; - justify-content: center; - margin-bottom: 20rpx; - &.yellow-bg { - background: #fff8e1; - } - &.blue-bg { - background: #e3f2fd; + .icon-wrap { + width: 72rpx; + height: 72rpx; + border-radius: 16rpx; + display: flex; + align-items: center; + justify-content: center; + margin-right: 24rpx; + + &.yellow-bg { + background: #fff8e1; + } + &.blue-bg { + background: #e3f2fd; + } + + .feature-icon { + width: 40rpx; + height: 40rpx; + } } - .feature-icon { - width: 56rpx; - height: 56rpx; + .text-content { + display: flex; + flex-direction: column; + + .feature-name { + font-size: 28rpx; + font-weight: bold; + color: #333; + margin-bottom: 4rpx; + } + + .feature-desc { + font-size: 22rpx; + color: #999; + } } } - - .feature-name { - font-size: 28rpx; - font-weight: bold; - color: #333; - margin-bottom: 8rpx; - } - - .feature-desc { - font-size: 20rpx; - color: #999; - } } } /* 排行榜单 */ -.rank-tabs { +.rank-tabs-mini { display: flex; - margin-bottom: 24rpx; - gap: 16rpx; + margin-left: auto; /* Push to right */ + background: #eee; + border-radius: 30rpx; + padding: 4rpx; - .rank-tab { - padding: 10rpx 24rpx; - background: #fff; - border-radius: 30rpx; - font-size: 24rpx; + .rank-tab-mini { + padding: 8rpx 20rpx; + border-radius: 26rpx; + font-size: 22rpx; color: #666; transition: all 0.3s; - border: 2rpx solid transparent; &.active { - background: #a85a5a; - color: #fff; - box-shadow: 0 4rpx 12rpx rgba(168, 90, 90, 0.3); + background: #fff; + color: #333; + font-weight: bold; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); } } }