console
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f5f5;
padding: 20px;
font-family: 'Microsoft YaHei', sans-serif;
}
.poster {
width: 800px;
height: 1200px;
background: linear-gradient(135deg, #c62828 0%, #d32f2f 50%, #b71c1c 100%);
position: relative;
color: #fffde7;
overflow: hidden;
border: 10px solid #ffd54f;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
padding: 40px;
}
.decoration-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: repeating-linear-gradient(
45deg,
#ffd54f,
#ffd54f 30px,
#c62828 30px,
#c62828 60px
);
z-index: 1;
}
.decoration-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70px;
background: repeating-linear-gradient(
-45deg,
#ffd54f,
#ffd54f 30px,
#c62828 30px,
#c62828 60px
);
z-index: 1;
}
.lantern {
position: absolute;
top: 120px;
left: 50px;
width: 60px;
height: 80px;
background: #ffd54f;
border-radius: 30px 30px 15px 15px;
box-shadow: 0 0 20px rgba(255, 213, 79, 0.7);
z-index: 2;
}
.lantern::after {
content: "";
position: absolute;
bottom: -20px;
left: 25px;
width: 10px;
height: 30px;
background: #ffd54f;
border-radius: 5px;
}
.lantern.right {
left: auto;
right: 50px;
}
.header {
text-align: center;
padding: 130px 0 30px;
position: relative;
z-index: 3;
}
.title {
font-size: 58px;
font-weight: bold;
text-shadow: 0 0 15px rgba(0,0,0,0.5);
margin-bottom: 15px;
letter-spacing: 5px;
color: #ffecb3;
position: relative;
display: inline-block;
}
.title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 6px;
background: linear-gradient(to right, #ffd54f, #ffb300, #ffd54f);
border-radius: 4px;
}
.subtitle {
font-size: 40px;
background: linear-gradient(to right, #ffd54f, #ffb300);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 10px;
font-weight: bold;
margin-top: 20px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.content {
position: relative;
z-index: 3;
padding: 0 40px;
}
.slogan {
text-align: center;
font-size: 38px;
margin: 30px 0;
color: #ffecb3;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
font-weight: bold;
letter-spacing: 2px;
}
.highlight {
background: linear-gradient(to right, #ffb300, #ffd54f);
color: #b71c1c;
padding: 20px 50px;
font-size: 42px;
display: inline-block;
margin: 25px 0;
border-radius: 60px;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
font-weight: bold;
border: 3px solid #fffde7;
text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
}
.offer-box {
display: flex;
justify-content: center;
gap: 50px;
margin: 40px 0;
}
.offer {
width: 280px;
height: 180px;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
color: #c62828;
text-align: center;
padding: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
position: relative;
border: 3px solid #ffd54f;
z-index: 3;
}
.offer::before {
content: "��";
position: absolute;
top: -20px;
right: -20px;
font-size: 50px;
color: #ffb300;
text-shadow: 0 0 10px #ff6f00;
}
.offer-title {
font-size: 32px;
margin-bottom: 15px;
font-weight: bold;
color: #d32f2f;
}
.offer-price {
font-size: 44px;
font-weight: bold;
color: #b71c1c;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.date-box {
text-align: center;
margin: 35px 0;
position: relative;
z-index: 3;
}
.date {
font-size: 38px;
background: rgba(178, 0, 0, 0.4);
padding: 20px 40px;
border-radius: 15px;
display: inline-block;
border: 3px dashed #ffd54f;
color: #ffecb3;
font-weight: bold;
max-width: 90%;
}
.address-box {
text-align: center;
margin-top: 50px;
position: relative;
z-index: 3;
padding: 0 20px;
}
.address {
font-size: 34px;
line-height: 1.5;
background: rgba(178, 0, 0, 0.3);
padding: 25px 30px;
border-radius: 15px;
border: 2px solid #ffd54f;
display: inline-block;
max-width: 100%;
text-align: center;
}
.gold-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
opacity: 0.3;
}
.particle {
position: absolute;
background: #ffd54f;
border-radius: 50%;
opacity: 0.7;
}
@media (max-width: 850px) {
.poster {
transform: scale(0.9);
}
}
</style>
</head>
<body>
<div class="poster">
<div class="decoration-top"></div>
<div class="decoration-bottom"></div>
<div class="lantern"></div>
<div class="lantern right"></div>
<div class="gold-particles" id="particles"></div>
<div class="header">
<div class="title">五彩凉山 · 夏季清凉</div>
<div class="subtitle">凉山火把节开幕之际</div>
</div>
<div class="content">
<div style="text-align:center">
<div class="slogan">西昌索菲亚 感恩回馈</div>
<div class="highlight">10套样板房限量征集</div>
</div>
<div class="offer-box">
<div class="offer">
<div class="offer-title">整装直降</div>
<div class="offer-price">20,000元</div>
</div>
<div class="offer">
<div class="offer-title">定制每㎡直降</div>
<div class="offer-price">599元</div>
</div>
</div>
<div class="date-box">
<div class="date">限时钜惠：7.1 - 7.15</div>
</div>
<div class="address-box">
<div class="address">
西昌市昌平建材城索菲亚整装中心<br>
（四川银行旁）<br>
抢订热线：XXXX-XXXXXXX
</div>
</div>
</div>
</div>
<script>
const particlesContainer = document.getElementById('particles');
const particleCount = 60;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
const left = Math.random() * 90 + 5;
const top = Math.random() * 90 + 5;
const size = Math.random() * 8 + 3;
particle.style.left = `${left}%`;
particle.style.top = `${top}%`;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.opacity = Math.random() * 0.4 + 0.1;
particlesContainer.appendChild(particle);
}
</script>
</body>
</html>