<template>
|
<div class="vip-poster-container">
|
<van-nav-bar
|
title="推广海报"
|
left-arrow
|
@click-left="$router.go(-1)"
|
/>
|
|
<div class="poster-content">
|
<div class="poster-image">
|
<img :src="posterInfo.image_url" alt="推广海报" />
|
</div>
|
|
<div class="poster-info">
|
<h3>{{ posterInfo.title }}</h3>
|
<p>{{ posterInfo.description }}</p>
|
</div>
|
|
<div class="poster-actions">
|
<van-button type="primary" block @click="savePoster">保存海报</van-button>
|
<van-button plain type="primary" block @click="sharePoster">分享海报</van-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "Poster",
|
data() {
|
return {
|
posterInfo: {
|
image_url: '', // 海报图片地址
|
title: 'VIP推广海报',
|
description: '邀请好友成为VIP，赚取丰厚佣金'
|
}
|
}
|
},
|
|
methods: {
|
savePoster() {
|
// 保存海报逻辑
|
this.$toast('海报已保存到相册')
|
},
|
|
sharePoster() {
|
// 分享海报逻辑
|
this.$toast('分享成功')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.vip-poster-container {
|
.poster-content {
|
padding: 15px;
|
|
.poster-image {
|
text-align: center;
|
margin-bottom: 20px;
|
|
img {
|
max-width: 100%;
|
border-radius: 8px;
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
}
|
}
|
|
.poster-info {
|
text-align: center;
|
margin-bottom: 30px;
|
|
h3 {
|
font-size: 18px;
|
color: #333;
|
margin-bottom: 10px;
|
}
|
|
p {
|
font-size: 14px;
|
color: #666;
|
line-height: 1.5;
|
}
|
}
|
|
.poster-actions {
|
.van-button {
|
margin-bottom: 15px;
|
}
|
}
|
}
|
}
|
</style>
|
