Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4ec2f2a8 1 parent 299eb849

fix(AdPage): 优化广告页面布局和样式 

重构广告页面背景图片的实现方式，使用image标签替代view+backgroundImage
调整分享按钮位置从右上角改为左上角
修复排行榜卡片文字高度限制问题
Inline Side-by-side
Showing 4 changed files with 25 additions and 23 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 17:12:24 4 + * @LastEditTime: 2025-09-19 17:26:08
5 * @FilePath: /lls_program/src/components/RankingCard.vue 5 * @FilePath: /lls_program/src/components/RankingCard.vue
6 * @Description: 排行榜卡片组件 6 * @Description: 排行榜卡片组件
7 --> 7 -->
...@@ -600,7 +600,7 @@ defineExpose({ ...@@ -600,7 +600,7 @@ defineExpose({
600 -webkit-box-orient: vertical; 600 -webkit-box-orient: vertical;
601 white-space: normal; 601 white-space: normal;
602 line-height: 1.2; 602 line-height: 1.2;
603 - max-height: 52rpx; 603 + max-height: 60rpx;
604 } 604 }
605 605
606 .leader-name { 606 .leader-name {
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-19 14:27:33 4 + * @LastEditTime: 2025-09-19 17:28:31
5 * @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue 5 * @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue
6 * @Description: 活动海报页面 - 展示活动信息并处理定位授权 6 * @Description: 活动海报页面 - 展示活动信息并处理定位授权
7 --> 7 -->
......
...@@ -7,19 +7,20 @@ ...@@ -7,19 +7,20 @@
7 } 7 }
8 8
9 .ad-background { 9 .ad-background {
10 - width: 100%; 10 + position: absolute;
11 - height: 100%; 11 + top: 0;
12 - background-size: cover; 12 + left: 0;
13 - background-position: center; 13 + width: 100vw;
14 - background-repeat: no-repeat; 14 + height: 100vh;
15 - position: relative; 15 + object-fit: cover;
16 - cursor: pointer; 16 + object-position: center;
17 + z-index: 1;
17 } 18 }
18 19
19 .share-button-container { 20 .share-button-container {
20 position: absolute; 21 position: absolute;
21 top: 30rpx; 22 top: 30rpx;
22 - right: 30rpx; 23 + left: 30rpx;
23 z-index: 10; 24 z-index: 10;
24 } 25 }
25 26
......
...@@ -8,20 +8,21 @@ ...@@ -8,20 +8,21 @@
8 <template> 8 <template>
9 <view class="ad-page"> 9 <view class="ad-page">
10 <!-- 背景图片 --> 10 <!-- 背景图片 -->
11 - <view 11 + <image
12 + :src="adImageUrl"
12 class="ad-background" 13 class="ad-background"
13 - :style="{ backgroundImage: adImageUrl ? `url(${adImageUrl})` : '' }" 14 + mode="aspectFill"
14 @tap="handleImageClick" 15 @tap="handleImageClick"
15 - > 16 + />
16 - <!-- 右上角分享按钮 --> 17 +
17 - <view class="share-button-container" @tap.stop> 18 + <!-- 右上角分享按钮 -->
18 - <button 19 + <view class="share-button-container" @tap.stop>
19 - class="share-button" 20 + <button
20 - open-type="share" 21 + class="share-button"
21 - > 22 + open-type="share"
22 - 推荐给朋友 23 + >
23 - </button> 24 + 推荐给朋友
24 - </view> 25 + </button>
25 </view> 26 </view>
26 27
27 <!-- 加载状态 --> 28 <!-- 加载状态 -->
......