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