115 lines
2.0 KiB
Vue
115 lines
2.0 KiB
Vue
<template>
|
||
<div class="couplet-display-modal" v-if="visible">
|
||
<div class="modal-overlay"></div>
|
||
<div class="modal-content couplet-content">
|
||
<div class="modal-body">
|
||
<div class="couplet-display">
|
||
<!-- 显示海报图片（后端直接返回） -->
|
||
<div class="poster-image" v-if="couplet.image_url">
|
||
<img :src="couplet.image_url" alt="春联海报" style="width: 100%; max-width: 300px; height: auto;" />
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="close-button-area">
|
||
<div class="share-hint">长按海报分享</div>
|
||
|
||
<img
|
||
src="/static/images/btn_close.png"
|
||
class="close-button-image"
|
||
@click="$emit('close')"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
const props = defineProps({
|
||
visible: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
couplet: {
|
||
type: Object,
|
||
default: () => ({
|
||
share_url: '',
|
||
image_url: ''
|
||
})
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['close'])
|
||
</script>
|
||
|
||
<style scoped>
|
||
.couplet-display-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 999;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.modal-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
}
|
||
|
||
.modal-content {
|
||
position: relative;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.couplet-content {
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.couplet-display {
|
||
text-align: center;
|
||
}
|
||
|
||
.poster-image img {
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.share-hint {
|
||
margin-bottom: 10rpx;
|
||
font-size: 18px;
|
||
color: #fff;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
.close-button-area {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-top: 20rpx;
|
||
z-index: 99;
|
||
}
|
||
|
||
.close-button-image {
|
||
width: 61rpx;
|
||
height: 60rpx;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.close-button-image:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
</style> |