diff --git a/src/views/activity/activityPoster.vue b/src/views/activity/activityPoster.vue index 0178008..c85d828 100644 --- a/src/views/activity/activityPoster.vue +++ b/src/views/activity/activityPoster.vue @@ -26,16 +26,16 @@
+ v-model:loading="listLoading" + :finished="listFinished" + finished-text="没有更多活动了" + @load="onLoadMore">
+ v-for="item in activityList" + :key="item.id" + class="activity-item" + :class="{ active: selectedActivity?.id === item.id }" + @click="onSelectActivity(item)">
{{ item.title }}
{{ item.Subtitle }} | {{ formatDateToShow(item.end_time) }}
@@ -47,10 +47,13 @@ class="activity-item"
- 海报背景图 + 海报背景图
-

{{ selectedActivity?.Subtitle || '河南·襄城站' }}

+

{{ formattedTitle }}

+
+
+

{{ selectedActivity?.Subtitle || '河南·襄城站' }}

@@ -131,7 +134,29 @@ export default { this.getData() console.log('33') }, + computed: { + formattedTitle() { + if (!this.selectedActivity?.title) return '' + const parts = this.selectedActivity.title.split('•') + console.log('computed parts:', parts) + const lastPart = parts[parts.length - 1].trim() + console.log('computed formattedTitle:', lastPart) + return lastPart + } + }, methods: { + // 格式化标题:切割 · 符号,取最后一个 + // formatTitle(title) { + // if (!title) return '' + // // 按 · 分割,取最后一部分,并去除首尾空格 + // debugger + // const parts = title.split('·') + // console.log(parts) + // debugger + // const lastPart = parts[parts.length - 1].trim() + // return lastPart + // }, + // 替代 script setup 中的函数 async getData() { console.log('33455') @@ -364,11 +389,11 @@ img { .poster-title { position: absolute; left: 0; - top: 262px; + top: 130px; width: 100%; letter-spacing: 4px; - font-size: 20px; - font-weight: 400; + font-size: 32px; + font-weight: 900; display: flex; justify-content: center; padding: 0; @@ -387,7 +412,32 @@ img { overflow: hidden; text-overflow: ellipsis; } +.poster-subtitle { + position: absolute; + left: 0; + top: 262px; + width: 100%; + letter-spacing: 4px; + font-size: 20px; + font-weight: 400; + display: flex; + justify-content: center; + padding: 0; +} +.poster-subtitle .poster-subtitle-text { + text-align: center; + width: 300px; + color: #0d2f73; + line-height: 1.6; + padding: 2px 0; + margin: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} .sponsor-name { position: absolute; left: 0; @@ -591,15 +641,16 @@ img { flex-shrink: 0; width: 16px; height: 16px; - .vant-select-icon{ - width: 16px; - height: 16px; - } +} + +.selector-arrow .van-icon { + width: 16px; + height: 16px; } /* 弹窗样式 */ .activity-popup { - height: 70vh; + height: 85vh; display: flex; flex-direction: column; border-radius: 20px 20px 0 0; @@ -638,7 +689,7 @@ img { .scroll-wrapper { flex: 1; overflow-y: auto; - margin-bottom: 100px; + padding-bottom: 20px; } .activity-item {