Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9fb52849 1 parent 68065e87

feat(排行榜): 添加助力榜空状态提示和样式 

- 在助力榜无数据时显示空状态提示和图片
- 调整助力码按钮位置
- 优化空状态下的布局和样式
Inline Side-by-side
Showing 2 changed files with 92 additions and 7 deletions
1 <!-- 1 <!--
2 * @Date: 2025-01-09 00:00:00 2 * @Date: 2025-01-09 00:00:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-19 09:35:49 4 + * @LastEditTime: 2025-09-19 10:58:52
5 * @FilePath: /lls_program/src/components/RankingCard.vue 5 * @FilePath: /lls_program/src/components/RankingCard.vue
6 * @Description: 排行榜卡片组件 6 * @Description: 排行榜卡片组件
7 --> 7 -->
...@@ -43,10 +43,22 @@ ...@@ -43,10 +43,22 @@
43 <!-- 排行榜日期 --> 43 <!-- 排行榜日期 -->
44 <view class="rank-date relative"> 44 <view class="rank-date relative">
45 {{ currentDate }} 45 {{ currentDate }}
46 - <view v-if="activeTab === 'support'" class="absolute font-bold text-white" style="right: 95rpx;" @tap="joinOrganization">助力码</view> 46 + <view v-if="activeTab === 'support'" class="absolute font-bold text-white top-0" style="right: 30rpx;" @tap="joinOrganization">助力码</view>
47 </view> 47 </view>
48 +
49 + <!-- 助力榜空状态提示 -->
50 + <view v-if="activeTab === 'support' && (!supportData || !supportData.families || supportData.families.length === 0)" class="support-empty-state">
51 + <view class="empty-image">
52 + <image src="https://cdn.ipadbiz.cn/lls_prog/images/support_img.png" class="empty-img" />
53 + </view>
54 + <view class="empty-text">
55 + <view class="empty-line">家庭的二、三代小辈</view>
56 + <view class="empty-line">输入助力码，来为大家长助力</view>
57 + </view>
58 + </view>
59 +
48 <!-- 前三名展示 --> 60 <!-- 前三名展示 -->
49 - <view class="top-three"> 61 + <view v-else class="top-three">
50 <!-- 第二名 --> 62 <!-- 第二名 -->
51 <view v-if="topRanks[1]" class="rank-item second"> 63 <view v-if="topRanks[1]" class="rank-item second">
52 <view class="crown"> 64 <view class="crown">
...@@ -687,6 +699,37 @@ defineExpose({ ...@@ -687,6 +699,37 @@ defineExpose({
687 } 699 }
688 } 700 }
689 701
702 + .support-empty-state {
703 + display: flex;
704 + flex-direction: column;
705 + align-items: center;
706 + justify-content: center;
707 + padding: 80rpx 40rpx;
708 + padding-top: 0;
709 + text-align: center;
710 +
711 + .empty-image {
712 +
713 + .empty-img {
714 + width: 400rpx;
715 + height: 400rpx;
716 + }
717 + }
718 +
719 + .empty-text {
720 + .empty-line {
721 + color: rgba(255, 255, 255, 0.9);
722 + font-size: 28rpx;
723 + line-height: 1.5;
724 + margin-bottom: 8rpx;
725 +
726 + &:last-child {
727 + margin-bottom: 0;
728 + }
729 + }
730 + }
731 + }
732 +
690 .my-rank-section { 733 .my-rank-section {
691 background: rgba(255, 255, 255, 0.95); 734 background: rgba(255, 255, 255, 0.95);
692 border-radius: 16rpx; 735 border-radius: 16rpx;
......
1 <!-- 1 <!--
2 * @Date: 2025-09-01 13:07:52 2 * @Date: 2025-09-01 13:07:52
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-19 09:58:37 4 + * @LastEditTime: 2025-09-19 10:58:47
5 * @FilePath: /lls_program/src/pages/FamilyRank/index.vue 5 * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -41,11 +41,22 @@ ...@@ -41,11 +41,22 @@
41 <!-- 排行榜日期 --> 41 <!-- 排行榜日期 -->
42 <view v-if="!loading" class="rank-date relative"> 42 <view v-if="!loading" class="rank-date relative">
43 {{ currentDate }} 43 {{ currentDate }}
44 - <view v-if="activeTab === 'support'" class="absolute font-bold text-white" style="right: 95rpx;" @tap="joinOrganization">助力码</view> 44 + <view v-if="activeTab === 'support'" class="absolute font-bold text-white top-0" style="right: 30rpx;" @tap="joinOrganization">助力码</view>
45 + </view>
46 +
47 + <!-- 助力榜空状态提示 -->
48 + <view v-if="!loading && activeTab === 'support' && (!supportData || !supportData.families || supportData.families.length === 0)" class="support-empty-state">
49 + <view class="empty-image">
50 + <image src="https://cdn.ipadbiz.cn/lls_prog/images/support_img.png" class="empty-img" mode="aspectFit" />
51 + </view>
52 + <view class="empty-text">
53 + <view class="empty-line">家庭的二、三代小辈</view>
54 + <view class="empty-line">输入助力码，来为大家长助力</view>
55 + </view>
45 </view> 56 </view>
46 57
47 <!-- 前三名展示 --> 58 <!-- 前三名展示 -->
48 - <view v-if="!loading && topThreeData.length > 0" class="top-three"> 59 + <view v-else-if="!loading && topThreeData.length > 0" class="top-three">
49 <!-- 第二名 --> 60 <!-- 第二名 -->
50 <view v-if="topThreeData[1]" class="rank-item second"> 61 <view v-if="topThreeData[1]" class="rank-item second">
51 <!-- <view class="crown crown-silver">👑</view> --> 62 <!-- <view class="crown crown-silver">👑</view> -->
...@@ -120,7 +131,7 @@ ...@@ -120,7 +131,7 @@
120 </view> 131 </view>
121 132
122 <!-- 暂无数据 --> 133 <!-- 暂无数据 -->
123 - <view v-else-if="!loading" class="no-data"> 134 + <view v-else-if="!loading && activeTab !== 'support'" class="no-data">
124 <view class="no-data-text">暂无{{ currentRegionName }}排行榜数据</view> 135 <view class="no-data-text">暂无{{ currentRegionName }}排行榜数据</view>
125 </view> 136 </view>
126 </view> 137 </view>
...@@ -523,6 +534,37 @@ onMounted(async () => { ...@@ -523,6 +534,37 @@ onMounted(async () => {
523 } 534 }
524 } 535 }
525 536
537 + .support-empty-state {
538 + display: flex;
539 + flex-direction: column;
540 + align-items: center;
541 + justify-content: center;
542 + padding: 120rpx 40rpx;
543 + text-align: center;
544 + padding-top: 0;
545 +
546 + .empty-image {
547 +
548 + .empty-img {
549 + width: 400rpx;
550 + height: 400rpx;
551 + }
552 + }
553 +
554 + .empty-text {
555 + .empty-line {
556 + color: rgba(255, 255, 255, 0.9);
557 + font-size: 32rpx;
558 + line-height: 1.5;
559 + margin-bottom: 12rpx;
560 +
561 + &:last-child {
562 + margin-bottom: 0;
563 + }
564 + }
565 + }
566 + }
567 +
526 .top-three { 568 .top-three {
527 position: relative; 569 position: relative;
528 display: flex; 570 display: flex;
......