hookehuyr

style(PosterCheckin): 调整打卡进度点样式并添加海报标题显示

- 将打卡进度点从大圆点改为小圆点并移除数字
- 调整进度文本字体大小
- 在海报底部添加标题显示区域
...@@ -9,17 +9,16 @@ ...@@ -9,17 +9,16 @@
9 9
10 <!-- 打卡进度 --> 10 <!-- 打卡进度 -->
11 <view class="flex items-center mb-2"> 11 <view class="flex items-center mb-2">
12 - <view class="flex items-center mr-4"> 12 + <view class="flex items-center">
13 <view 13 <view
14 v-for="(point, index) in activityInfo.checkPoints" 14 v-for="(point, index) in activityInfo.checkPoints"
15 :key="index" 15 :key="index"
16 - class="w-6 h-6 rounded-full mr-2 flex items-center justify-center" 16 + class="w-2 h-2 rounded-full mr-2 flex items-center justify-center"
17 :class="point.completed ? 'bg-orange-400' : 'bg-gray-300'" 17 :class="point.completed ? 'bg-orange-400' : 'bg-gray-300'"
18 > 18 >
19 - <text class="text-white text-xs">{{ index + 1 }}</text>
20 </view> 19 </view>
21 </view> 20 </view>
22 - <text class="text-sm text-gray-600">{{ activityInfo.completedCount }}/{{ activityInfo.totalCount }}</text> 21 + <text class="text-xs text-gray-600">{{ activityInfo.completedCount }}/{{ activityInfo.totalCount }}</text>
23 </view> 22 </view>
24 23
25 <!-- 活动截止日期 --> 24 <!-- 活动截止日期 -->
...@@ -37,6 +36,10 @@ ...@@ -37,6 +36,10 @@
37 mode="aspectFit" 36 mode="aspectFit"
38 class="w-full h-full" 37 class="w-full h-full"
39 /> 38 />
39 + <!-- 打卡点标题 -->
40 + <view class="absolute bottom-2 left-2 bg-blue-500 text-white text-xs px-2 py-1 rounded">
41 + {{ posterList[currentPosterIndex]?.title || '海报生成中' }}
42 + </view>
40 <!-- 点击预览提示 --> 43 <!-- 点击预览提示 -->
41 <view @tap="previewPoster" class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded"> 44 <view @tap="previewPoster" class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
42 点击预览 45 点击预览
......