测试activityPoster
This commit is contained in:
parent
7d1f0bc651
commit
ac431927b7
@ -3,7 +3,7 @@ module.exports = {
|
||||
title: '',
|
||||
// baseApi: '//h5.ufutx.net/api' // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
|
||||
baseApi: '//sh5.ufutx.net/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
|
||||
baseApiV2: '//sh5.ufutx.net/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
|
||||
baseApiV2: '//love.ufutx.cn/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
|
||||
baseApiV3: '//eval.fulllinkai.net/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
|
||||
// baseApi: '//api.ufutx.net/mock' // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
|
||||
// APPID: 'xxx',
|
||||
|
||||
@ -1,92 +1,46 @@
|
||||
<template>
|
||||
<div class="poster-generator-container">
|
||||
<!-- 表单选择区域 -->
|
||||
<div class="input-section">
|
||||
<van-field
|
||||
v-model="selectedActivityTitle"
|
||||
label="选择活动"
|
||||
placeholder="请选择活动"
|
||||
readonly
|
||||
:label-width="60"
|
||||
@click="showActivityPicker = true"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="sponsorName"
|
||||
label="主办方"
|
||||
placeholder="请选择主办方"
|
||||
readonly
|
||||
:label-width="60"
|
||||
@click="showSponsorPicker = true"
|
||||
/>
|
||||
<div class="input-card">
|
||||
<div class="card-header">
|
||||
<span class="header-icon">📋</span>
|
||||
<span class="header-title">选择活动</span>
|
||||
</div>
|
||||
<div class="activity-selector" @click="showActivityPicker = true">
|
||||
<div class="selector-label">活动名称</div>
|
||||
<div class="selector-value" :class="{ placeholder: !selectedActivityTitle }">
|
||||
<span class="selector-text">{{ selectedActivityTitle || '点击选择活动' }}</span>
|
||||
</div>
|
||||
<div class="selector-arrow">
|
||||
<van-icon name="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 活动选择弹窗 -->
|
||||
<van-popup
|
||||
v-model="showActivityPicker"
|
||||
position="bottom"
|
||||
round
|
||||
class="activity-popup"
|
||||
>
|
||||
<van-popup v-model:show="showActivityPicker" position="bottom" round class="activity-popup">
|
||||
<div class="activity-picker-header">
|
||||
<span class="cancel-btn" @click="showActivityPicker = false">取消</span>
|
||||
<span class="title">选择活动</span>
|
||||
<span class="confirm-btn" @click="showActivityPicker = false">确定</span>
|
||||
</div>
|
||||
<div class="scroll-wrapper">
|
||||
<van-list
|
||||
v-model="listLoading"
|
||||
:finished="listFinished"
|
||||
finished-text="没有更多活动了"
|
||||
@load="onLoadMore"
|
||||
>
|
||||
<div
|
||||
v-for="item in activityList"
|
||||
:key="item.id"
|
||||
class="activity-item"
|
||||
@click="onSelectActivity(item)"
|
||||
>
|
||||
<van-list v-model:loading="listLoading" :finished="listFinished" finished-text="没有更多活动了"
|
||||
@load="onLoadMore">
|
||||
<div v-for="item in activityList" :key="item.id" class="activity-item"
|
||||
:class="{ active: selectedActivity?.id === item.id }" @click="onSelectActivity(item)">
|
||||
<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>
|
||||
</van-list>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<!-- 主办方选择弹窗 -->
|
||||
<van-popup
|
||||
v-model="showSponsorPicker"
|
||||
position="bottom"
|
||||
round
|
||||
class="activity-popup"
|
||||
>
|
||||
<div class="activity-picker-header">
|
||||
<span class="cancel-btn" @click="showSponsorPicker = false">取消</span>
|
||||
<span class="title">选择主办方</span>
|
||||
<span class="confirm-btn" @click="showSponsorPicker = false">确定</span>
|
||||
</div>
|
||||
<div class="scroll-wrapper">
|
||||
<div
|
||||
v-for="(item, index) in sponsorList"
|
||||
:key="index"
|
||||
class="activity-item"
|
||||
@click="onSelectSponsor(item)"
|
||||
>
|
||||
<div class="activity-title">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
|
||||
<!-- 海报生成容器（隐藏布局） -->
|
||||
<!-- 隐藏海报区域（样式保持原样） -->
|
||||
<div ref="posterRef" class="poster-wrapper hidden-poster">
|
||||
<div class="poster-card">
|
||||
<div class="poster-content">
|
||||
<img
|
||||
src="https://images.health.ufutx.com/202604/13/8fa1b3080a60f97ef3f75e1370a6217c.jpeg"
|
||||
alt="海报背景"
|
||||
/>
|
||||
<img src="https://images.health.ufutx.com/202604/13/8fa1b3080a60f97ef3f75e1370a6217c.jpeg" alt="海报背景图" />
|
||||
<div class="poster-content-wrapper">
|
||||
<div class="poster-title">
|
||||
<p class="poster-title-text">{{ selectedActivity?.Subtitle || '河南·襄城站' }}</p>
|
||||
@ -117,135 +71,119 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<!-- 操作按钮组 -->
|
||||
<div class="btn-group">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
:disabled="isGenerating"
|
||||
@click="generatePoster"
|
||||
>
|
||||
<span v-if="!isGenerating">生成海报</span>
|
||||
<span v-else>生成中...</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="posterImg"
|
||||
class="btn btn-secondary"
|
||||
@click="downloadPoster"
|
||||
>
|
||||
下载海报
|
||||
<button class="btn btn-primary" :disabled="isGenerating" @click="generatePoster">
|
||||
<van-loading v-if="isGenerating" size="20px" color="#fff" />
|
||||
<span v-else>✨ 生成海报</span>
|
||||
</button>
|
||||
<button v-if="posterImg && !isWeChatEnv" class="btn btn-secondary" @click="downloadPoster"> 📥 下载海报</button>
|
||||
</div>
|
||||
|
||||
<!-- 海报预览 -->
|
||||
<!-- 生成预览区域 -->
|
||||
<div v-if="posterImg" class="generated-poster-preview">
|
||||
<h4 class="preview-title">海报生成成功（长按保存/点击预览）</h4>
|
||||
<img :src="posterImg" class="preview-img" @click="showImagePreview" />
|
||||
<div class="preview-header">
|
||||
<div class="preview-icon">🎉</div>
|
||||
<h4 class="preview-title">{{ isWeChatEnv ? '长按图片保存到手机' : '点击图片预览大图' }}</h4>
|
||||
</div>
|
||||
<img :src="posterImg" alt="生成的海报" class="preview-img" @click="showImagePreviewFn(posterImg)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { nextTick, onMounted, ref, watch } from 'vue'
|
||||
import html2canvas from 'html2canvas'
|
||||
import { showDialog, showImagePreview, showLoadingToast, showToast } from 'vant'
|
||||
import requestApp from '@/utils/requestApp'
|
||||
import QRCode from 'qrcode'
|
||||
import axios from 'axios'
|
||||
import { weXinShare } from '@/plugins/wxShare'
|
||||
|
||||
export default {
|
||||
name: 'ActivityPoster',
|
||||
data() {
|
||||
return {
|
||||
// 主办方配置
|
||||
sponsorName: '友福同享（襄城县）智能科技有限公司',
|
||||
sponsorList: [
|
||||
'友福同享（深圳）智能科技有限公司',
|
||||
'友福粤越（惠州）智能科技有限公司',
|
||||
'友福同享（南昌）智能科技有限公司',
|
||||
'友福同享（天津）智能科技有限公司',
|
||||
'友福同享（襄城县）智能科技有限公司',
|
||||
'友福同享（哈尔滨）智能科技有限公司'
|
||||
],
|
||||
showSponsorPicker: false,
|
||||
// 🔥 主办方：从活动接口自动获取，无需手动选择
|
||||
const sponsorName = ref('')
|
||||
|
||||
// 活动相关
|
||||
activityList: [],
|
||||
selectedActivity: null,
|
||||
selectedActivityTitle: '',
|
||||
showActivityPicker: false,
|
||||
listLoading: false,
|
||||
listFinished: false,
|
||||
const posterRef = ref(null)
|
||||
const posterImg = ref('')
|
||||
const isGenerating = ref(false)
|
||||
const isWeChatEnv = ref(false)
|
||||
const qrcodeCanvas = ref(null)
|
||||
|
||||
// 海报相关
|
||||
posterImg: '',
|
||||
isGenerating: false,
|
||||
isWeChatEnv: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.detectWeChatEnv()
|
||||
this.getActivityList()
|
||||
},
|
||||
watch: {
|
||||
selectedActivity: {
|
||||
handler: async function(val) {
|
||||
if (val && val.id && this.$refs.qrcodeCanvas) {
|
||||
const openId = localStorage.getItem('openid') || ''
|
||||
const link = `https://love.ufutx.cn/api/official/live/wechat/FamilyAuth?merchant_id=44&serve_tab=&from_openid=${openId}&url=https%3A%2F%2Flove.ufutx.cn%2Fpu%2F%23%2FactivityDetails%2F${val.id}`
|
||||
await QRCode.toCanvas(this.$refs.qrcodeCanvas, link, {
|
||||
const activityList = ref([])
|
||||
const selectedActivity = ref(null)
|
||||
const selectedActivityTitle = ref('')
|
||||
const showActivityPicker = ref(false)
|
||||
const listLoading = ref(false)
|
||||
const listFinished = ref(true)
|
||||
const openId = ref('')
|
||||
|
||||
// 监听选中的活动：自动填充主办方 + 生成二维码
|
||||
watch(selectedActivity, async (newVal) => {
|
||||
if (newVal && newVal.id && qrcodeCanvas.value) {
|
||||
// 自动从活动数据中读取主办方
|
||||
sponsorName.value = newVal.sponsor || ''
|
||||
openId.value = localStorage.getItem('openid')
|
||||
const link = `https://love.ufutx.cn/api/official/live/wechat/FamilyAuth?merchant_id=44&serve_tab=&from_openid=${openId.value}&url=https%3A%2F%2Flove.ufutx.cn%2Fpu%2F%23%2FactivityDetails%2F${newVal.id}`
|
||||
await QRCode.toCanvas(qrcodeCanvas.value, link, {
|
||||
width: 76,
|
||||
margin: 1,
|
||||
color: { dark: '#000000', light: '#ffffff' }
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取活动列表
|
||||
async getActivityList() {
|
||||
this.listLoading = true
|
||||
try {
|
||||
const res = await axios({
|
||||
url: '/sh5/uftx/community/activity/list',
|
||||
method: 'get'
|
||||
})
|
||||
if (res.code === 0 && Array.isArray(res.data)) {
|
||||
this.activityList = res.data
|
||||
} else {
|
||||
this.$toast('活动列表获取失败')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
this.$toast('网络异常，请重试')
|
||||
} finally {
|
||||
this.listLoading = false
|
||||
this.listFinished = true
|
||||
}
|
||||
},
|
||||
// 选择活动
|
||||
onSelectActivity(item) {
|
||||
this.selectedActivity = item
|
||||
this.selectedActivityTitle = item.title
|
||||
this.showActivityPicker = false
|
||||
},
|
||||
// 选择主办方
|
||||
onSelectSponsor(item) {
|
||||
this.sponsorName = item
|
||||
this.showSponsorPicker = false
|
||||
},
|
||||
onLoadMore() {
|
||||
this.listFinished = true
|
||||
},
|
||||
|
||||
// 时间格式化
|
||||
formatDateToShow(timeStr) {
|
||||
const getData = () => {
|
||||
listLoading.value = true
|
||||
weXinShare('https://image.fulllinkai.com/202310/28/88e931a50ec0a8094fb46191b389457e.png', `https://health.ufutx.cn/go_html/role_apply#/activityPoster`, '活动海报生成「saas」', '查看详情')
|
||||
requestApp({ url: '/sh5/uftx/community/activity/list', method: 'get' })
|
||||
.then((res) => {
|
||||
if (res.code === 0 && Array.isArray(res.data)) {
|
||||
activityList.value = res.data
|
||||
// 默认选中第一个活动，自动填充主办方
|
||||
// if (res.data.length > 0) {
|
||||
// onSelectActivity(res.data[0]);
|
||||
// }
|
||||
} else {
|
||||
showToast('活动列表获取失败')
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('获取活动列表失败：', err)
|
||||
showToast('活动列表获取失败，请重试')
|
||||
})
|
||||
.finally(() => {
|
||||
listLoading.value = false
|
||||
listFinished.value = true
|
||||
})
|
||||
}
|
||||
|
||||
const detectWeChatEnv = () => {
|
||||
const userAgent = navigator.userAgent.toLowerCase()
|
||||
isWeChatEnv.value = /micromessenger/.test(userAgent)
|
||||
}
|
||||
|
||||
// 选择活动：自动填充主办方
|
||||
const onSelectActivity = (item) => {
|
||||
selectedActivity.value = item
|
||||
selectedActivityTitle.value = item.title
|
||||
showActivityPicker.value = false
|
||||
generatePoster()
|
||||
}
|
||||
|
||||
const onLoadMore = () => {
|
||||
listLoading.value = false
|
||||
listFinished.value = true
|
||||
}
|
||||
|
||||
const formatDateToShow = (timeStr) => {
|
||||
if (!timeStr) return ''
|
||||
const date = new Date(timeStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}年${month}月${day}日`
|
||||
},
|
||||
formatDateToChinese(timeStr) {
|
||||
}
|
||||
|
||||
const formatDateToChinese = (timeStr) => {
|
||||
if (!timeStr) {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
@ -256,133 +194,83 @@ export default {
|
||||
const [datePart] = timeStr.split(' ')
|
||||
const [year, month, day] = datePart.split('-')
|
||||
return `${year}/${month}/${day}`
|
||||
},
|
||||
formatTime(timeStr) {
|
||||
}
|
||||
|
||||
const formatTime = (timeStr) => {
|
||||
if (!timeStr) return '14:00'
|
||||
const [, timePart] = timeStr.split(' ')
|
||||
return timePart.slice(0, 5)
|
||||
},
|
||||
}
|
||||
|
||||
// 微信环境检测
|
||||
detectWeChatEnv() {
|
||||
this.isWeChatEnv = /micromessenger/.test(navigator.userAgent.toLowerCase())
|
||||
},
|
||||
// 图片预览
|
||||
showImagePreview() {
|
||||
window.open(this.posterImg)
|
||||
},
|
||||
const showImagePreviewFn = (img) => {
|
||||
return showImagePreview([img])
|
||||
}
|
||||
|
||||
// 生成海报
|
||||
async generatePoster() {
|
||||
if (!this.selectedActivity) {
|
||||
this.$dialog.alert({ message: '请先选择活动！' })
|
||||
const generatePoster = async () => {
|
||||
try {
|
||||
if (!selectedActivity.value) {
|
||||
showDialog({ message: '请先选择活动！' })
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
this.isGenerating = true
|
||||
await this.$nextTick()
|
||||
const canvas = await html2canvas(this.$refs.posterRef, {
|
||||
isGenerating.value = true
|
||||
const toast = showLoadingToast({
|
||||
message: '海报生成中...',
|
||||
forbidClick: true,
|
||||
duration: 0
|
||||
})
|
||||
|
||||
await nextTick()
|
||||
const posterElement = posterRef.value
|
||||
if (!posterElement) {
|
||||
isGenerating.value = false
|
||||
toast.close()
|
||||
return
|
||||
}
|
||||
|
||||
const canvas = await html2canvas(posterElement, {
|
||||
useCORS: true,
|
||||
scale: 3,
|
||||
backgroundColor: null,
|
||||
logging: false
|
||||
logging: false,
|
||||
imageTimeout: 10000
|
||||
})
|
||||
this.posterImg = canvas.toDataURL('image/png')
|
||||
this.$toast('海报生成成功')
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
this.$dialog.alert({ message: '生成失败，请重试' })
|
||||
} finally {
|
||||
this.isGenerating = false
|
||||
}
|
||||
},
|
||||
|
||||
// 下载海报
|
||||
downloadPoster() {
|
||||
posterImg.value = canvas.toDataURL('image/png', 1.0)
|
||||
toast.close()
|
||||
showToast({ message: '海报生成成功！', icon: 'success' })
|
||||
} catch (err) {
|
||||
console.error('生成海报失败：', err)
|
||||
showToast({ message: '生成海报失败，请重试！', icon: 'fail' })
|
||||
} finally {
|
||||
isGenerating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function downloadPoster() {
|
||||
if (!posterImg.value) return
|
||||
const link = document.createElement('a')
|
||||
link.href = this.posterImg
|
||||
const fileName = `${this.selectedActivity.title || '活动'}海报.png`
|
||||
link.download = fileName.replace(/[^a-zA-Z0-9_\u4e00-\u9fa5]/g, '')
|
||||
link.href = posterImg.value
|
||||
// 修复文件名括号闭合、正则多余/的问题
|
||||
const fileName = `[${selectedActivity.value?.title || '活动'}]海报.png`
|
||||
link.download = fileName.replace(/[\\/:*?"<>|]/g, '')
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
detectWeChatEnv()
|
||||
getData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 基础样式 */
|
||||
.poster-generator-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
box-sizing: border-box;
|
||||
<style scoped>
|
||||
img {
|
||||
display: inline-block !important;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.input-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.activity-popup {
|
||||
height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.activity-picker-header {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.scroll-wrapper {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
color: #18ca6e;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
font-size: 15px;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 海报隐藏容器 */
|
||||
.poster-wrapper {
|
||||
width: 375px;
|
||||
height: 788px;
|
||||
@ -394,40 +282,59 @@ export default {
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.poster-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: #333333;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.poster-content img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.poster-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
/* 海报文字样式 */
|
||||
.poster-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 262px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
letter-spacing: 4px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.poster-title-text {
|
||||
color: #0d2f73;
|
||||
font-size: 20px;
|
||||
.poster-title .poster-title-text {
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
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 {
|
||||
@ -435,9 +342,15 @@ export default {
|
||||
left: 0;
|
||||
top: 446px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #0e2965;
|
||||
letter-spacing: 0.8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sponsor-name .name {
|
||||
font-size: 14px;
|
||||
color: #0e2965;
|
||||
}
|
||||
|
||||
.poster-qrcode {
|
||||
@ -447,14 +360,16 @@ export default {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.poster-qrcode-image {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
background: #fff;
|
||||
padding: 3px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
background-color: #ffffff;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.poster-time-wrap {
|
||||
@ -463,91 +378,340 @@ export default {
|
||||
top: 630px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #0e2866;
|
||||
justify-content: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.poster-date {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: #0e2866;
|
||||
}
|
||||
|
||||
.poster-time {
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #0e2866;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.start-time {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.poster-address {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 720px;
|
||||
width: 100%;
|
||||
max-height: 50px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
._text-warp {
|
||||
.poster-address ._text-warp {
|
||||
max-width: 80%;
|
||||
background: #fff;
|
||||
padding: 4px 16px;
|
||||
border-radius: 32px;
|
||||
font-size: 14px;
|
||||
color: #0f2967;
|
||||
font-weight: 500;
|
||||
background: white;
|
||||
border-radius: 32px;
|
||||
padding: 4px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
._title {
|
||||
.poster-address ._title {
|
||||
width: 76px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.poster-address ._text {
|
||||
text-align: left;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ========== 以下为美化后的外部样式（选择器、按钮、预览区域） ========== */
|
||||
.poster-generator-container {
|
||||
min-height: 100vh;
|
||||
padding: 20px 16px 40px;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e9eef3 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* 输入卡片 */
|
||||
.input-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.input-card:hover {
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 20px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
background: linear-gradient(135deg, #18ca6e, #0f9d58);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.activity-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px 12px 20px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.activity-selector:active {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.selector-label {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.selector-value {
|
||||
flex: 1;
|
||||
margin: 0 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #1f2937;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.selector-text {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
max-width: 100%;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.selector-value.placeholder .selector-text {
|
||||
color: #9ca3af;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.selector-arrow {
|
||||
color: #9ca3af;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.activity-popup {
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 20px 20px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.activity-picker-header {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
font-size: 15px;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
font-size: 15px;
|
||||
color: #18ca6e;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.scroll-wrapper {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.activity-item:active {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.activity-item.active {
|
||||
background: #f0fdf4;
|
||||
border-left: 3px solid #18ca6e;
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* 按钮组 */
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin: 30px 0;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
padding: 12px 0;
|
||||
padding: 14px 20px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 60px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #18ca6e;
|
||||
|
||||
&:disabled {
|
||||
background: #95d8b7;
|
||||
cursor: not-allowed;
|
||||
background: linear-gradient(135deg, #18ca6e, #0f9d58);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(24, 202, 110, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: scale(0.97);
|
||||
box-shadow: 0 2px 6px rgba(24, 202, 110, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.7;
|
||||
transform: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #2c3e50;
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-secondary:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* 预览区域 */
|
||||
.generated-poster-preview {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: white;
|
||||
border-radius: 28px;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.preview-icon {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.preview-img {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.preview-img:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
/* 适配小屏幕 */
|
||||
@media (max-width: 420px) {
|
||||
.poster-generator-container {
|
||||
padding: 16px 12px 32px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -52,7 +52,7 @@ module.exports = {
|
||||
productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
|
||||
devServer: {
|
||||
port: 8080, // 端口
|
||||
open: false, // 启动后打开浏览器
|
||||
open: true, // 启动后打开浏览器
|
||||
overlay: {
|
||||
// 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
|
||||
warnings: false,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user