399 行
16 KiB
HTML
399 行
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
background: #f0f2f5;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
padding: 40px;
|
|
}
|
|
.banner-stage {
|
|
width: 1404px;
|
|
height: 560px;
|
|
border-radius: 48px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 80px;
|
|
box-shadow: 0 16px 48px rgba(0, 168, 84, 0.12);
|
|
}
|
|
|
|
/* Banner 1 翠绿微光 */
|
|
.banner-1 {
|
|
background: linear-gradient(135deg, #E6FBF0 0%, #D8F7E7 50%, #C4F3DC 100%);
|
|
}
|
|
/* Banner 2 清新薄荷蓝青 */
|
|
.banner-2 {
|
|
background: linear-gradient(135deg, #E8FBF7 0%, #DBF6F0 50%, #C6EFE6 100%);
|
|
}
|
|
/* Banner 3 春绿微暖阳 */
|
|
.banner-3 {
|
|
background: linear-gradient(135deg, #ECFAF2 0%, #DEF7EA 50%, #C8F3DD 100%);
|
|
}
|
|
|
|
/* 背景装饰光球 */
|
|
.glow-circle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
pointer-events: none;
|
|
}
|
|
.glow-1 {
|
|
width: 480px;
|
|
height: 480px;
|
|
background: rgba(0, 224, 112, 0.35);
|
|
right: -60px;
|
|
top: -60px;
|
|
}
|
|
.glow-2 {
|
|
width: 380px;
|
|
height: 380px;
|
|
background: rgba(245, 166, 35, 0.22);
|
|
right: 280px;
|
|
bottom: -80px;
|
|
}
|
|
.glow-subtle {
|
|
width: 320px;
|
|
height: 320px;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
left: 80px;
|
|
top: -40px;
|
|
}
|
|
|
|
/* 左侧文案区 */
|
|
.content {
|
|
position: relative;
|
|
z-index: 2;
|
|
max-width: 760px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 24px;
|
|
background: rgba(255, 255, 255, 0.88);
|
|
border: 2px solid rgba(0, 210, 106, 0.4);
|
|
border-radius: 100px;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #00A854;
|
|
box-shadow: 0 4px 16px rgba(0, 168, 84, 0.08);
|
|
margin-bottom: 24px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.tag .dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #00D26A;
|
|
border-radius: 50%;
|
|
}
|
|
.title {
|
|
font-size: 64px;
|
|
font-weight: 800;
|
|
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, #00A854 0%, #00D26A 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: 32px;
|
|
}
|
|
.action-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px 40px;
|
|
background: linear-gradient(135deg, #00E070 0%, #00B85C 100%);
|
|
border-radius: 100px;
|
|
color: #FFFFFF;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
box-shadow: 0 10px 24px rgba(0, 184, 92, 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(254, 243, 199, 0.95);
|
|
border: 2px solid #FCD34D;
|
|
border-radius: 100px;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #B45309;
|
|
}
|
|
.badge-hot .fire {
|
|
color: #F59E0B;
|
|
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(0, 168, 84, 0.16));
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- BANNER 1: 二手好物 -->
|
|
<div class="banner-stage banner-1" id="banner-1">
|
|
<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> 爆款 3 折起起</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(0,168,84,0.12)"/>
|
|
<!-- 立体快递/包裹箱 -->
|
|
<path d="M140 210 L280 160 L360 210 L220 260 Z" fill="url(#boxTop)" stroke="#FFFFFF" stroke-width="3"/>
|
|
<path d="M140 210 L220 260 L220 370 L140 320 Z" fill="url(#boxLeft)"/>
|
|
<path d="M220 260 L360 210 L360 320 L220 370 Z" fill="url(#boxRight)"/>
|
|
<!-- 箱子胶带与绿丝带 -->
|
|
<path d="M200 188 L300 224 L300 342 L200 306 Z" fill="url(#tapeGrad)" opacity="0.95"/>
|
|
<path d="M246 172 L184 194 L184 312 L246 290 Z" fill="url(#tapeGrad2)" opacity="0.92"/>
|
|
<!-- 立体相机 / 数码浮雕 -->
|
|
<g transform="translate(60, 110) scale(0.95)">
|
|
<rect x="20" y="50" width="160" height="110" rx="24" fill="url(#camBody)" stroke="#FFFFFF" stroke-width="4"/>
|
|
<rect x="50" y="30" width="50" height="24" rx="8" fill="#00D26A"/>
|
|
<circle cx="100" cy="105" r="42" fill="url(#camLensBg)" stroke="#FFFFFF" stroke-width="6"/>
|
|
<circle cx="100" cy="105" r="26" fill="url(#camLensGlass)"/>
|
|
<circle cx="86" cy="92" r="8" fill="#FFFFFF" opacity="0.8"/>
|
|
<!-- 闪耀金色徽标 -->
|
|
<circle cx="150" cy="65" r="14" fill="#F5A623"/>
|
|
<circle cx="150" cy="65" r="6" fill="#FFF"/>
|
|
</g>
|
|
<!-- 漂浮金币与折扣卡 -->
|
|
<g transform="translate(290, 80) rotate(15)">
|
|
<ellipse cx="40" cy="40" rx="36" ry="36" fill="url(#goldGrad)" stroke="#FFE082" stroke-width="4"/>
|
|
<text x="40" y="49" font-size="28" font-weight="900" fill="#B45309" text-anchor="middle">¥</text>
|
|
</g>
|
|
<g transform="translate(330, 240) rotate(-12)">
|
|
<ellipse cx="26" cy="26" rx="24" ry="24" fill="url(#goldGrad)" stroke="#FFE082" stroke-width="3"/>
|
|
<text x="26" y="33" font-size="20" font-weight="900" fill="#B45309" text-anchor="middle">%</text>
|
|
</g>
|
|
<!-- 渐变定义 -->
|
|
<defs>
|
|
<linearGradient id="boxTop" x1="140" y1="160" x2="360" y2="260" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#FFFFFF"/>
|
|
<stop offset="1" stop-color="#E2F7EB"/>
|
|
</linearGradient>
|
|
<linearGradient id="boxLeft" x1="140" y1="210" x2="220" y2="370" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#00D26A"/>
|
|
<stop offset="1" stop-color="#009A4E"/>
|
|
</linearGradient>
|
|
<linearGradient id="boxRight" x1="220" y1="210" x2="360" y2="370" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#00BA5E"/>
|
|
<stop offset="1" stop-color="#007B3E"/>
|
|
</linearGradient>
|
|
<linearGradient id="tapeGrad" x1="200" y1="188" x2="300" y2="342" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#FCD34D"/>
|
|
<stop offset="1" stop-color="#F59E0B"/>
|
|
</linearGradient>
|
|
<linearGradient id="tapeGrad2" x1="184" y1="172" x2="246" y2="312" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#FDE68A"/>
|
|
<stop offset="1" stop-color="#D97706"/>
|
|
</linearGradient>
|
|
<linearGradient id="camBody" x1="20" y1="50" x2="180" y2="160" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#334155"/>
|
|
<stop offset="1" stop-color="#0F172A"/>
|
|
</linearGradient>
|
|
<linearGradient id="camLensBg" x1="58" y1="63" x2="142" y2="147" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#00D26A"/>
|
|
<stop offset="1" stop-color="#059669"/>
|
|
</linearGradient>
|
|
<linearGradient id="camLensGlass" x1="74" y1="79" x2="126" y2="131" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#064E3B"/>
|
|
<stop offset="1" stop-color="#022C22"/>
|
|
</linearGradient>
|
|
<linearGradient id="goldGrad" x1="4" y1="4" x2="76" y2="76" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#FDE047"/>
|
|
<stop offset="1" stop-color="#F59E0B"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BANNER 2: 招聘求职 -->
|
|
<div class="banner-stage banner-2" id="banner-2">
|
|
<div class="glow-circle glow-1" style="background: rgba(16, 185, 129, 0.35);"></div>
|
|
<div class="glow-circle glow-2" style="background: rgba(59, 130, 246, 0.18);"></div>
|
|
<div class="glow-circle glow-subtle"></div>
|
|
|
|
<div class="content">
|
|
<div class="tag"><span class="dot" style="background: #10B981;"></span>真实企业 · 官方认证</div>
|
|
<div class="title">同城高薪直聘 <span class="highlight" style="background: linear-gradient(135deg, #059669 0%, #10B981 100%); -webkit-background-clip: text;">急速入职</span></div>
|
|
<div class="subtitle">海量好岗任选 · 直接聊老板 · 薪资透明全覆盖</div>
|
|
<div class="action-row">
|
|
<div class="btn" style="background: linear-gradient(135deg, #10B981 0%, #059669 100%);">去投简历 <span class="btn-arrow">→</span></div>
|
|
<div class="badge-hot" style="background: rgba(220, 252, 231, 0.95); border-color: #86EFAC; color: #166534;"><span class="fire" style="color: #10B981;">⚡</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 110, 280 110, 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, 80) rotate(12)">
|
|
<rect x="0" y="0" width="130" height="150" 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="90" height="8" rx="4" fill="#CBD5E1"/>
|
|
<rect x="20" y="66" width="75" height="8" rx="4" fill="#CBD5E1"/>
|
|
<rect x="20" y="84" width="50" height="8" rx="4" fill="#CBD5E1"/>
|
|
<!-- 红色印章 -->
|
|
<circle cx="85" cy="105" r="22" stroke="#EF4444" stroke-width="3" fill="rgba(239, 68, 68, 0.1)"/>
|
|
<text x="85" y="110" font-size="12" font-weight="900" fill="#EF4444" text-anchor="middle">OFFER</text>
|
|
</g>
|
|
<!-- 金色认证勋章 -->
|
|
<g transform="translate(60, 230)">
|
|
<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="110" x2="280" y2="160" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#34D399"/>
|
|
<stop offset="1" stop-color="#047857"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BANNER 3: 便民到家 -->
|
|
<div class="banner-stage banner-3" id="banner-3">
|
|
<div class="glow-circle glow-1" style="background: rgba(0, 210, 106, 0.32);"></div>
|
|
<div class="glow-circle glow-2" style="background: rgba(245, 166, 35, 0.25);"></div>
|
|
<div class="glow-circle glow-subtle"></div>
|
|
|
|
<div class="content">
|
|
<div class="tag"><span class="dot" style="background: #00D26A;"></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> 首单立减 20元</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(0,210,106,0.12)"/>
|
|
<!-- 温馨小家立体模型 -->
|
|
<path d="M120 230 L230 140 L340 230 L340 360 L120 360 Z" fill="url(#houseFront)" stroke="#FFFFFF" stroke-width="4"/>
|
|
<!-- 屋顶侧面/立体坡屋顶 -->
|
|
<path d="M230 140 L340 230 L310 230 L230 160 Z" fill="#00A854"/>
|
|
<path d="M100 230 L230 120 L360 230" stroke="#00D26A" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
<!-- 窗户 / 发光微黄 -->
|
|
<rect x="150" y="250" width="60" height="60" rx="14" fill="#FEF3C7" stroke="#FFFFFF" stroke-width="4"/>
|
|
<line x1="180" y1="250" x2="180" y2="310" stroke="#F59E0B" stroke-width="3"/>
|
|
<line x1="150" y1="280" x2="210" y2="280" stroke="#F59E0B" stroke-width="3"/>
|
|
<!-- 大门 -->
|
|
<rect x="245" y="260" width="65" height="100" rx="12" fill="#047857" stroke="#FFFFFF" stroke-width="4"/>
|
|
<circle cx="295" cy="310" r="6" fill="#FCD34D"/>
|
|
<!-- 立体维修工具箱与清洁喷雾 -->
|
|
<g transform="translate(60, 270)">
|
|
<rect x="0" y="30" width="110" height="75" rx="16" fill="url(#goldGrad)" stroke="#FFFFFF" stroke-width="3"/>
|
|
<path d="M30 30 C30 12, 80 12, 80 30" stroke="#B45309" stroke-width="8" stroke-linecap="round" fill="none"/>
|
|
<line x1="0" y1="65" x2="110" y2="65" stroke="#FFFFFF" stroke-width="3"/>
|
|
<rect x="44" y="60" width="22" height="14" rx="4" fill="#78350F"/>
|
|
</g>
|
|
<!-- 绿意小树苗 / 盾牌徽章 -->
|
|
<g transform="translate(320, 190)">
|
|
<path d="M40 0 C60 0, 80 15, 80 45 C80 75, 40 95, 40 95 C40 95, 0 75, 0 45 C0 15, 20 0, 40 0 Z" fill="url(#shieldGrad)" stroke="#FFFFFF" stroke-width="4"/>
|
|
<path d="M26 44 L36 54 L56 34" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</g>
|
|
<!-- 渐变定义 -->
|
|
<defs>
|
|
<linearGradient id="houseFront" x1="120" y1="140" x2="340" y2="360" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#FFFFFF"/>
|
|
<stop offset="0.6" stop-color="#F0FDF4"/>
|
|
<stop offset="1" stop-color="#DCFCE7"/>
|
|
</linearGradient>
|
|
<linearGradient id="shieldGrad" x1="0" y1="0" x2="80" y2="95" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#00E070"/>
|
|
<stop offset="1" stop-color="#059669"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|