style(PosterCheckin): 调整打卡进度点样式并添加海报标题显示
- 将打卡进度点从大圆点改为小圆点并移除数字 - 调整进度文本字体大小 - 在海报底部添加标题显示区域
Showing
1 changed file
with
7 additions
and
4 deletions
| ... | @@ -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 | 点击预览 | ... | ... |
-
Please register or login to post a comment