121 lines
2.2 KiB
Vue
121 lines
2.2 KiB
Vue
<template>
|
|
<div class="poster-container lotus-theme">
|
|
<div class="background-layer">
|
|
<img src="../outputs/lotus.jpg" alt="荷花背景" class="background-image" />
|
|
</div>
|
|
<div class="content-layer">
|
|
<div class="title-section">
|
|
<h1 class="main-title lotus-title">{{ title }}</h1>
|
|
<h2 class="subtitle lotus-subtitle">{{ subtitle }}</h2>
|
|
</div>
|
|
<div class="main-content lotus-content">
|
|
<div class="decoration-elements">
|
|
<div class="lotus-decoration"></div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-section">
|
|
<div class="logo-area">
|
|
<span class="logo-text">{{ logoText }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const title = ref('端午节')
|
|
const subtitle = ref('粽叶飘香，龙舟竞渡')
|
|
const logoText = ref('')
|
|
</script>
|
|
|
|
<style scoped>
|
|
.poster-container {
|
|
width: 1080px;
|
|
height: 1920px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #f8f4e6, #e8dcc0);
|
|
}
|
|
|
|
.background-layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.background-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.content-layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.title-section {
|
|
position: absolute;
|
|
top: 20%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
width: 80%;
|
|
}
|
|
|
|
.lotus-title {
|
|
font-size: 64px;
|
|
font-weight: bold;
|
|
color: #2d5016;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
|
margin-bottom: 20px;
|
|
font-family: 'SimSun', serif;
|
|
}
|
|
|
|
.lotus-subtitle {
|
|
font-size: 32px;
|
|
color: #4a6741;
|
|
margin-bottom: 40px;
|
|
font-family: 'KaiTi', cursive;
|
|
}
|
|
|
|
.lotus-content {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 70%;
|
|
}
|
|
|
|
.lotus-decoration {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: radial-gradient(circle, rgba(255,192,203,0.6), rgba(255,182,193,0.3));
|
|
border-radius: 50%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.footer-section {
|
|
position: absolute;
|
|
bottom: 10%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 24px;
|
|
color: #2d5016;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|