45 lines
1.2 KiB
Vue
45 lines
1.2 KiB
Vue
<template>
|
|
<div style="position: relative; width: 1080px; height: 1920px;">
|
|
<!-- 背景图层 -->
|
|
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
|
|
|
|
<!-- 主体图层 -->
|
|
<div style="position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
|
|
<h1></h1>
|
|
<h2></h2>
|
|
</div>
|
|
|
|
<!-- 活动亮点 -->
|
|
<div style="position: absolute; bottom: 25%; left: 50%; transform: translate(-50%, 0); width: 80%;">
|
|
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
|
|
<div>
|
|
<div></div>
|
|
<h3></h3>
|
|
<p></p>
|
|
</div>
|
|
<div>
|
|
<div></div>
|
|
<h3></h3>
|
|
<p></p>
|
|
</div>
|
|
<div>
|
|
<div></div>
|
|
<h3></h3>
|
|
<p></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页脚 -->
|
|
<div style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; padding-bottom: 20px;">
|
|
<p></p>
|
|
<img style="display: inline-block;" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DragonBoatFestivalPoster'
|
|
}
|
|
</script> |