244 行
7.5 KiB
HTML
244 行
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body {
|
|
width: 1404px;
|
|
height: 560px;
|
|
overflow: hidden;
|
|
background: #ffffff;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
}
|
|
.banner-stage {
|
|
width: 1404px;
|
|
height: 560px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 80px;
|
|
background: linear-gradient(135deg, #E6FAF4 0%, #D8F7EE 50%, #C2F0E5 100%);
|
|
}
|
|
.glow-circle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
pointer-events: none;
|
|
}
|
|
.glow-1 {
|
|
width: 520px;
|
|
height: 520px;
|
|
background: rgba(16, 185, 129, 0.32);
|
|
right: -40px;
|
|
top: -60px;
|
|
}
|
|
.glow-2 {
|
|
width: 420px;
|
|
height: 420px;
|
|
background: rgba(59, 130, 246, 0.18);
|
|
right: 320px;
|
|
bottom: -80px;
|
|
}
|
|
.glow-subtle {
|
|
width: 360px;
|
|
height: 360px;
|
|
background: rgba(255, 255, 255, 0.65);
|
|
left: 80px;
|
|
top: -60px;
|
|
}
|
|
.content {
|
|
position: relative;
|
|
z-index: 2;
|
|
max-width: 780px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 26px;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border: 2px solid rgba(16, 185, 129, 0.45);
|
|
border-radius: 100px;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #059669;
|
|
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.08);
|
|
margin-bottom: 24px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.tag .dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #10B981;
|
|
border-radius: 50%;
|
|
}
|
|
.title {
|
|
font-size: 64px;
|
|
font-weight: 900;
|
|
line-height: 1.18;
|
|
color: #1E293B;
|
|
letter-spacing: -0.5px;
|
|
margin-bottom: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
.title span.highlight {
|
|
background: linear-gradient(135deg, #059669 0%, #10B981 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.subtitle {
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
color: #475569;
|
|
line-height: 1.4;
|
|
margin-bottom: 34px;
|
|
}
|
|
.action-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 16px 42px;
|
|
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
|
border-radius: 100px;
|
|
color: #FFFFFF;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
box-shadow: 0 10px 24px rgba(16, 185, 129, 0.32);
|
|
letter-spacing: 1px;
|
|
}
|
|
.btn-arrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: rgba(255, 255, 255, 0.28);
|
|
border-radius: 50%;
|
|
font-size: 20px;
|
|
}
|
|
.badge-hot {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 24px;
|
|
background: rgba(220, 252, 231, 0.95);
|
|
border: 2px solid #86EFAC;
|
|
border-radius: 100px;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #166534;
|
|
}
|
|
.badge-hot .fire {
|
|
color: #10B981;
|
|
font-size: 24px;
|
|
}
|
|
.visual {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 440px;
|
|
height: 440px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.visual svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: drop-shadow(0 20px 32px rgba(16, 185, 129, 0.16));
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="banner-stage">
|
|
<div class="glow-circle glow-1"></div>
|
|
<div class="glow-circle glow-2"></div>
|
|
<div class="glow-circle glow-subtle"></div>
|
|
|
|
<div class="content">
|
|
<div class="tag"><span class="dot"></span>名企急招 · 官方认证</div>
|
|
<div class="title">同城高薪直聘 <span class="highlight">急速入职</span></div>
|
|
<div class="subtitle">海量好岗任选 · 直接聊老板 · 真实高薪看得见</div>
|
|
<div class="action-row">
|
|
<div class="btn">去投简历 <span class="btn-arrow">→</span></div>
|
|
<div class="badge-hot"><span class="fire">⚡</span> 72h 急速反馈</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="visual">
|
|
<svg viewBox="0 0 440 440" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<ellipse cx="220" cy="380" rx="160" ry="24" fill="rgba(16,185,129,0.12)"/>
|
|
<!-- 立体公文包 -->
|
|
<rect x="90" y="160" width="260" height="190" rx="32" fill="url(#caseBody)" stroke="#FFFFFF" stroke-width="4"/>
|
|
<!-- 公文包手柄 -->
|
|
<path d="M160 160 C160 100, 280 100, 280 160" stroke="url(#caseHandle)" stroke-width="18" stroke-linecap="round" fill="none"/>
|
|
<!-- 包带和金锁扣 -->
|
|
<rect x="135" y="160" width="30" height="190" fill="#047857" opacity="0.6"/>
|
|
<rect x="275" y="160" width="30" height="190" fill="#047857" opacity="0.6"/>
|
|
<rect x="195" y="220" width="50" height="40" rx="10" fill="url(#goldGrad)" stroke="#FFFFFF" stroke-width="3"/>
|
|
<circle cx="220" cy="240" r="6" fill="#78350F"/>
|
|
|
|
<!-- 伸出的录取通知书 OFFER -->
|
|
<g transform="translate(190, 60) rotate(10)">
|
|
<rect x="0" y="0" width="140" height="170" rx="16" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="3"/>
|
|
<rect x="20" y="24" width="70" height="12" rx="6" fill="#10B981"/>
|
|
<rect x="20" y="48" width="100" height="8" rx="4" fill="#CBD5E1"/>
|
|
<rect x="20" y="66" width="85" height="8" rx="4" fill="#CBD5E1"/>
|
|
<rect x="20" y="84" width="60" height="8" rx="4" fill="#CBD5E1"/>
|
|
<!-- 红色录取印章 -->
|
|
<circle cx="95" cy="120" r="24" stroke="#EF4444" stroke-width="3" fill="rgba(239, 68, 68, 0.08)"/>
|
|
<text x="95" y="126" font-size="13" font-weight="900" fill="#EF4444" text-anchor="middle">OFFER</text>
|
|
</g>
|
|
|
|
<!-- 飞升上升箭头 -->
|
|
<g transform="translate(320, 220)">
|
|
<circle cx="36" cy="36" r="36" fill="url(#arrowBg)" stroke="#FFFFFF" stroke-width="3"/>
|
|
<path d="M24 44 L44 24 M44 24 H30 M44 24 V38" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</g>
|
|
|
|
<!-- 金色星级徽章 -->
|
|
<g transform="translate(50, 240)">
|
|
<polygon points="40,10 49,28 69,31 54,46 58,66 40,56 22,66 26,46 11,31 31,28" fill="url(#goldGrad)" stroke="#FFF" stroke-width="3"/>
|
|
<circle cx="40" cy="38" r="14" fill="#F59E0B"/>
|
|
<path d="M34 38 L38 42 L46 34" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</g>
|
|
|
|
<defs>
|
|
<linearGradient id="caseBody" x1="90" y1="160" x2="350" y2="350" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#10B981"/>
|
|
<stop offset="0.5" stop-color="#059669"/>
|
|
<stop offset="1" stop-color="#047857"/>
|
|
</linearGradient>
|
|
<linearGradient id="caseHandle" x1="160" y1="100" x2="280" y2="160" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#34D399"/>
|
|
<stop offset="1" stop-color="#047857"/>
|
|
</linearGradient>
|
|
<linearGradient id="goldGrad" x1="0" y1="0" x2="70" y2="70" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#FDE047"/>
|
|
<stop offset="1" stop-color="#F59E0B"/>
|
|
</linearGradient>
|
|
<linearGradient id="arrowBg" x1="0" y1="0" x2="72" y2="72" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#3B82F6"/>
|
|
<stop offset="1" stop-color="#1D4ED8"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|