zzc/spring-festival-greetings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: index page

Browse Source
This commit is contained in:
zzc
2026-02-24 15:30:03 +08:00
parent b3165a56cf
commit 6c23726e09
1 changed files with 126 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
pages/index/index.vue
View File

@@ -20,14 +20,6 @@
>
</view>
</view>
<view class="header-actions">
<view class="action-btn" @tap="onNoticeTap">
<uni-icons type="notification" size="20" color="#333" />
</view>
<view class="action-btn" @tap="onWalletTap">
<uni-icons type="wallet" size="20" color="#333" />
</view>
</view>
</view>
<!-- 主卡片 (Lucky Status) -->
@@ -96,7 +88,7 @@
</view>
<!-- 大家都在用 -->
<view class="section-container">
<view class="section-container compact-section">
<view class="section-header">
<view class="title-left-decor"></view>
<uni-icons
@@ -107,8 +99,9 @@
/>
<text class="section-title">大家都在用</text>
</view>
<view class="feature-grid">
<view class="feature-card" @tap="navTo('/pages/avatar/index')">
<view class="feature-row">
<view class="feature-item" @tap="navTo('/pages/avatar/index')">
<view class="left-content">
<view class="icon-wrap yellow-bg">
<image
src="/static/icon/guashi.png"
@@ -116,10 +109,15 @@
class="feature-icon"
/>
</view>
<view class="text-content">
<text class="feature-name">制作今日头像</text>
<text class="feature-desc">限定 · 如意边框</text>
</view>
<view class="feature-card" @tap="navTo('/pages/wallpaper/index')">
</view>
<uni-icons type="right" size="14" color="#ccc" />
</view>
<view class="feature-item" @tap="navTo('/pages/wallpaper/index')">
<view class="left-content">
<view class="icon-wrap blue-bg">
<image
src="/static/icon/bizhi.png"
@@ -127,10 +125,14 @@
class="feature-icon"
/>
</view>
<view class="text-content">
<text class="feature-name">好运祝福壁纸</text>
<text class="feature-desc">高清 · 福气盈门</text>
</view>
</view>
<uni-icons type="right" size="14" color="#ccc" />
</view>
</view>
</view>
<!-- 排行榜单 -->
@@ -138,39 +140,33 @@
<view class="section-header">
<view class="title-left-decor"></view>
<text class="section-title">排行榜单</text>
<view class="header-right">
<uni-icons type="refresh" size="14" color="#999" />
<text class="refresh-text">每小时更新</text>
</view>
</view>
<!-- Tabs -->
<view class="rank-tabs">
<view class="rank-tabs-mini">
<view
class="rank-tab"
class="rank-tab-mini"
:class="{ active: currentTab === 'all' }"
@tap="switchTab('all')"
>全部</view
>
<view
class="rank-tab"
class="rank-tab-mini"
:class="{ active: currentTab === 'frame' }"
@tap="switchTab('frame')"
>头像框</view
>
<view
class="rank-tab"
class="rank-tab-mini"
:class="{ active: currentTab === 'card' }"
@tap="switchTab('card')"
>贺卡</view
>
<view
class="rank-tab"
class="rank-tab-mini"
:class="{ active: currentTab === 'wallpaper' }"
@tap="switchTab('wallpaper')"
>壁纸</view
>
</view>
</view>
<!-- Ranking List -->
<view class="rank-list">
@@ -346,19 +342,19 @@ onShareTimeline(() => {
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,29 +591,38 @@ onShareTimeline(() => {
}
/* 大家都在用 */
.feature-grid {
display: flex;
justify-content: space-between;
gap: 24rpx;
.compact-section {
.section-header {
margin-bottom: 20rpx;
}
}
.feature-card {
flex: 1;
background: #fff;
border-radius: 32rpx;
padding: 32rpx;
.feature-row {
display: flex;
flex-direction: column;
gap: 20rpx;
.feature-item {
background: #fff;
border-radius: 24rpx;
padding: 24rpx 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
.left-content {
display: flex;
align-items: center;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
.icon-wrap {
width: 96rpx;
height: 96rpx;
border-radius: 24rpx;
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20rpx;
margin-right: 24rpx;
&.yellow-bg {
background: #fff8e1;
@@ -643,44 +632,51 @@ onShareTimeline(() => {
}
.feature-icon {
width: 56rpx;
height: 56rpx;
width: 40rpx;
height: 40rpx;
}
}
.text-content {
display: flex;
flex-direction: column;
.feature-name {
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 8rpx;
margin-bottom: 4rpx;
}
.feature-desc {
font-size: 20rpx;
font-size: 22rpx;
color: #999;
}
}
}
}
}
/* 排行榜单 */
.rank-tabs {
.rank-tabs-mini {
display: flex;
margin-bottom: 24rpx;
gap: 16rpx;
.rank-tab {
padding: 10rpx 24rpx;
background: #fff;
margin-left: auto; /* Push to right */
background: #eee;
border-radius: 30rpx;
font-size: 24rpx;
padding: 4rpx;
.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);
}
}
}