update
This commit is contained in:
parent
fd0993132c
commit
9fffc5c847
@ -26,16 +26,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="scroll-wrapper">
|
<div class="scroll-wrapper">
|
||||||
<van-list
|
<van-list
|
||||||
v-model:loading="listLoading"
|
v-model:loading="listLoading"
|
||||||
:finished="listFinished"
|
:finished="listFinished"
|
||||||
finished-text="没有更多活动了"
|
finished-text="没有更多活动了"
|
||||||
@load="onLoadMore">
|
@load="onLoadMore">
|
||||||
<div
|
<div
|
||||||
v-for="item in activityList"
|
v-for="item in activityList"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
class="activity-item"
|
class="activity-item"
|
||||||
:class="{ active: selectedActivity?.id === item.id }"
|
:class="{ active: selectedActivity?.id === item.id }"
|
||||||
@click="onSelectActivity(item)">
|
@click="onSelectActivity(item)">
|
||||||
<div class="activity-title">{{ item.title }}</div>
|
<div class="activity-title">{{ item.title }}</div>
|
||||||
<div class="activity-time">{{ item.Subtitle }} | {{ formatDateToShow(item.end_time) }}</div>
|
<div class="activity-time">{{ item.Subtitle }} | {{ formatDateToShow(item.end_time) }}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -47,10 +47,13 @@ class="activity-item"
|
|||||||
<div ref="posterRef" class="poster-wrapper hidden-poster">
|
<div ref="posterRef" class="poster-wrapper hidden-poster">
|
||||||
<div class="poster-card">
|
<div class="poster-card">
|
||||||
<div class="poster-content">
|
<div class="poster-content">
|
||||||
<img src="https://images.health.ufutx.com/202604/13/8fa1b3080a60f97ef3f75e1370a6217c.jpeg" alt="海报背景图" />
|
<img src="https://images.health.ufutx.com/202604/15/a90d31b444dd5f8f974b502b42bd4872.jpeg" alt="海报背景图" />
|
||||||
<div class="poster-content-wrapper">
|
<div class="poster-content-wrapper">
|
||||||
<div class="poster-title">
|
<div class="poster-title">
|
||||||
<p class="poster-title-text">{{ selectedActivity?.Subtitle || '河南·襄城站' }}</p>
|
<p class="poster-title-text">{{ formattedTitle }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="poster-subtitle">
|
||||||
|
<p class="poster-subtitle-text">{{ selectedActivity?.Subtitle || '河南·襄城站' }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="sponsor-name">
|
<div class="sponsor-name">
|
||||||
<p class="name">主办:{{ sponsorName }}</p>
|
<p class="name">主办:{{ sponsorName }}</p>
|
||||||
@ -84,7 +87,7 @@ class="activity-item"
|
|||||||
<van-loading v-if="isGenerating" size="20px" color="#fff" />
|
<van-loading v-if="isGenerating" size="20px" color="#fff" />
|
||||||
<span v-else>✨ 生成海报</span>
|
<span v-else>✨ 生成海报</span>
|
||||||
</button>
|
</button>
|
||||||
<button v-if="posterImg && !isWeChatEnv" class="btn btn-secondary" @click="downloadPoster"> 📥 下载海报</button>
|
<button v-if="posterImg && !isWeChatEnv" class="btn btn-secondary" @click="downloadPoster">📥 下载海报</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 生成预览区域 -->
|
<!-- 生成预览区域 -->
|
||||||
@ -131,7 +134,29 @@ export default {
|
|||||||
this.getData()
|
this.getData()
|
||||||
console.log('33')
|
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: {
|
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 中的函数
|
// 替代 script setup 中的函数
|
||||||
async getData() {
|
async getData() {
|
||||||
console.log('33455')
|
console.log('33455')
|
||||||
@ -364,11 +389,11 @@ img {
|
|||||||
.poster-title {
|
.poster-title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 262px;
|
top: 130px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
letter-spacing: 4px;
|
letter-spacing: 4px;
|
||||||
font-size: 20px;
|
font-size: 32px;
|
||||||
font-weight: 400;
|
font-weight: 900;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -387,7 +412,32 @@ img {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
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 {
|
.sponsor-name {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -591,15 +641,16 @@ img {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
.vant-select-icon{
|
}
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
.selector-arrow .van-icon {
|
||||||
}
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 弹窗样式 */
|
/* 弹窗样式 */
|
||||||
.activity-popup {
|
.activity-popup {
|
||||||
height: 70vh;
|
height: 85vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-radius: 20px 20px 0 0;
|
border-radius: 20px 20px 0 0;
|
||||||
@ -638,7 +689,7 @@ img {
|
|||||||
.scroll-wrapper {
|
.scroll-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
margin-bottom: 100px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activity-item {
|
.activity-item {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user