539 lines
13 KiB
YAML
539 lines
13 KiB
YAML
# Vue模板配置文件
|
|
# 为不同图片类型预定义Vue组件模板
|
|
|
|
vue_templates:
|
|
lotus.jpg:
|
|
theme: "荷花主题"
|
|
style: "传统优雅"
|
|
template: |
|
|
<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('{{ title_content }}')
|
|
const subtitle = ref('{{ subtitle_content }}')
|
|
const logoText = ref('{{ logo_content }}')
|
|
</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>
|
|
|
|
nku.png:
|
|
theme: "南开大学"
|
|
style: "学术正式"
|
|
template: |
|
|
<template>
|
|
<div class="poster-container nku-theme">
|
|
<div class="background-layer">
|
|
<img src="../outputs/background.png" alt="背景" class="background-image" />
|
|
</div>
|
|
<div class="content-layer">
|
|
<div class="header-section">
|
|
<img src="../outputs/nku.png" alt="南开大学logo" class="nku-logo" />
|
|
</div>
|
|
<div class="title-section">
|
|
<h1 class="main-title nku-title">{{ title }}</h1>
|
|
<h2 class="subtitle nku-subtitle">{{ subtitle }}</h2>
|
|
</div>
|
|
<div class="main-content nku-content">
|
|
<div class="academic-decoration">
|
|
<div class="knowledge-symbol"></div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-section">
|
|
<div class="university-info">
|
|
<span class="university-name">{{ logoText }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const title = ref('{{ title_content }}')
|
|
const subtitle = ref('{{ subtitle_content }}')
|
|
const logoText = ref('{{ logo_content }}')
|
|
</script>
|
|
|
|
<style scoped>
|
|
.poster-container {
|
|
width: 1080px;
|
|
height: 1920px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(180deg, #7E0C6E, #4a0845);
|
|
}
|
|
|
|
.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.3;
|
|
}
|
|
|
|
.content-layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.header-section {
|
|
position: absolute;
|
|
top: 8%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.nku-logo {
|
|
width: 120px;
|
|
height: auto;
|
|
}
|
|
|
|
.title-section {
|
|
position: absolute;
|
|
top: 25%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
width: 85%;
|
|
}
|
|
|
|
.nku-title {
|
|
font-size: 58px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
|
|
margin-bottom: 25px;
|
|
font-family: 'Microsoft YaHei', sans-serif;
|
|
}
|
|
|
|
.nku-subtitle {
|
|
font-size: 28px;
|
|
color: #f0f0f0;
|
|
margin-bottom: 40px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.nku-content {
|
|
position: absolute;
|
|
top: 55%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 80%;
|
|
}
|
|
|
|
.knowledge-symbol {
|
|
width: 150px;
|
|
height: 150px;
|
|
background: rgba(255,255,255,0.1);
|
|
border: 3px solid rgba(255,255,255,0.3);
|
|
border-radius: 50%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.knowledge-symbol::before {
|
|
content: '知';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 48px;
|
|
color: #ffffff;
|
|
font-family: 'SimSun', serif;
|
|
}
|
|
|
|
.footer-section {
|
|
position: absolute;
|
|
bottom: 8%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.university-name {
|
|
font-size: 22px;
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
letter-spacing: 2px;
|
|
}
|
|
</style>
|
|
|
|
stamp.jpg:
|
|
theme: "印章装饰"
|
|
style: "传统文化"
|
|
template: |
|
|
<template>
|
|
<div class="poster-container stamp-theme">
|
|
<div class="background-layer">
|
|
<img src="../outputs/background.png" alt="背景" class="background-image" />
|
|
</div>
|
|
<div class="content-layer">
|
|
<div class="title-section">
|
|
<h1 class="main-title stamp-title">{{ title }}</h1>
|
|
<h2 class="subtitle stamp-subtitle">{{ subtitle }}</h2>
|
|
</div>
|
|
<div class="main-content stamp-content">
|
|
<div class="stamp-decoration">
|
|
<img src="../outputs/stamp.jpg" alt="印章" class="stamp-image" />
|
|
</div>
|
|
</div>
|
|
<div class="footer-section">
|
|
<div class="traditional-footer">
|
|
<span class="logo-text">{{ logoText }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const title = ref('{{ title_content }}')
|
|
const subtitle = ref('{{ subtitle_content }}')
|
|
const logoText = ref('{{ logo_content }}')
|
|
</script>
|
|
|
|
<style scoped>
|
|
.poster-container {
|
|
width: 1080px;
|
|
height: 1920px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(45deg, #faf0e6, #f5e6d3);
|
|
}
|
|
|
|
.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.4;
|
|
}
|
|
|
|
.content-layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.title-section {
|
|
position: absolute;
|
|
top: 18%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
width: 85%;
|
|
}
|
|
|
|
.stamp-title {
|
|
font-size: 56px;
|
|
font-weight: bold;
|
|
color: #8B4513;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
|
|
margin-bottom: 20px;
|
|
font-family: 'SimSun', serif;
|
|
}
|
|
|
|
.stamp-subtitle {
|
|
font-size: 26px;
|
|
color: #A0522D;
|
|
margin-bottom: 40px;
|
|
line-height: 1.5;
|
|
font-family: 'KaiTi', cursive;
|
|
}
|
|
|
|
.stamp-content {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 60%;
|
|
text-align: center;
|
|
}
|
|
|
|
.stamp-image {
|
|
width: 200px;
|
|
height: 200px;
|
|
object-fit: contain;
|
|
filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
|
|
}
|
|
|
|
.footer-section {
|
|
position: absolute;
|
|
bottom: 12%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 20px;
|
|
color: #8B4513;
|
|
font-weight: 500;
|
|
font-family: 'SimSun', serif;
|
|
}
|
|
</style>
|
|
|
|
background.png:
|
|
theme: "通用背景"
|
|
style: "简约现代"
|
|
template: |
|
|
<template>
|
|
<div class="poster-container modern-theme">
|
|
<div class="background-layer">
|
|
<img src="../outputs/background.png" alt="背景" class="background-image" />
|
|
</div>
|
|
<div class="content-layer">
|
|
<div class="title-section">
|
|
<h1 class="main-title modern-title">{{ title }}</h1>
|
|
<h2 class="subtitle modern-subtitle">{{ subtitle }}</h2>
|
|
</div>
|
|
<div class="main-content modern-content">
|
|
<div class="modern-decoration">
|
|
<div class="geometric-shape"></div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-section">
|
|
<div class="modern-footer">
|
|
<span class="logo-text">{{ logoText }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const title = ref('{{ title_content }}')
|
|
const subtitle = ref('{{ subtitle_content }}')
|
|
const logoText = ref('{{ logo_content }}')
|
|
</script>
|
|
|
|
<style scoped>
|
|
.poster-container {
|
|
width: 1080px;
|
|
height: 1920px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.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.7;
|
|
}
|
|
|
|
.content-layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.title-section {
|
|
position: absolute;
|
|
top: 22%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
width: 90%;
|
|
}
|
|
|
|
.modern-title {
|
|
font-size: 60px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
|
|
margin-bottom: 25px;
|
|
font-family: 'Microsoft YaHei', sans-serif;
|
|
}
|
|
|
|
.modern-subtitle {
|
|
font-size: 30px;
|
|
color: #f0f0f0;
|
|
margin-bottom: 40px;
|
|
line-height: 1.4;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.modern-content {
|
|
position: absolute;
|
|
top: 55%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 70%;
|
|
}
|
|
|
|
.geometric-shape {
|
|
width: 180px;
|
|
height: 180px;
|
|
background: rgba(255,255,255,0.1);
|
|
border: 2px solid rgba(255,255,255,0.3);
|
|
transform: rotate(45deg);
|
|
margin: 0 auto;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.footer-section {
|
|
position: absolute;
|
|
bottom: 10%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 24px;
|
|
color: #ffffff;
|
|
font-weight: 400;
|
|
letter-spacing: 1px;
|
|
}
|
|
</style>
|