<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>
