james
f24dfb6f4e
Four hero compositions (A: pinned left rail / B: right user rail / C: short banner / D: stacked banners) for the 1200x450 home hero area, with A marked as the confirmed direction. Referenced by openspec/changes/pin-home-category-menu/proposal.md.
492 lines
27 KiB
HTML
492 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>VMall 首页 Hero 区视觉方案对比</title>
|
||
<style>
|
||
:root {
|
||
--red: #ca151e;
|
||
--ink: #1a1a1a;
|
||
--muted: #888;
|
||
--line: #e5e5e5;
|
||
--bg: #f5f5f5;
|
||
--chrome-bg: #fafaf7;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||
background: var(--chrome-bg);
|
||
color: var(--ink);
|
||
line-height: 1.6;
|
||
}
|
||
a { color: inherit; }
|
||
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
|
||
|
||
/* ---------- proposal chrome ---------- */
|
||
.page-head {
|
||
max-width: 1240px; margin: 0 auto; padding: 48px 20px 24px;
|
||
}
|
||
.page-head .kicker {
|
||
font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--red);
|
||
font-weight: 700;
|
||
}
|
||
.page-head h1 { font-size: 30px; margin: 8px 0 10px; letter-spacing: -0.01em; }
|
||
.page-head p.decision { max-width: 760px; color: #555; font-size: 15px; }
|
||
.page-head p.decision strong { color: var(--ink); }
|
||
|
||
.overview {
|
||
max-width: 1240px; margin: 28px auto 8px; padding: 0 20px;
|
||
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
|
||
}
|
||
.ov-card {
|
||
display: block; text-decoration: none; background: #fff;
|
||
border: 1px solid var(--line); border-radius: 10px; padding: 18px;
|
||
transition: border-color .15s, transform .15s;
|
||
}
|
||
.ov-card:hover { border-color: var(--red); transform: translateY(-2px); }
|
||
.ov-card .tag { font-size: 11px; font-weight: 700; color: var(--red); letter-spacing: .12em; }
|
||
.ov-card h2 { font-size: 17px; margin: 4px 0 6px; }
|
||
.ov-card p { font-size: 13px; color: var(--muted); }
|
||
.ov-card .pick {
|
||
display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700;
|
||
color: #fff; background: var(--red); border-radius: 999px; padding: 2px 10px;
|
||
}
|
||
.ov-card .pick.alt { background: #999; }
|
||
|
||
.option { max-width: 1240px; margin: 56px auto; padding: 0 20px; }
|
||
.option > header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
|
||
.option > header .num {
|
||
font-size: 13px; font-weight: 800; color: #fff; background: var(--ink);
|
||
border-radius: 6px; padding: 3px 10px; letter-spacing: .08em;
|
||
}
|
||
.option > header h2 { font-size: 24px; }
|
||
.option .thesis { margin: 10px 0 18px; max-width: 820px; color: #444; font-size: 14.5px; }
|
||
.option .thesis em { font-style: normal; color: var(--red); font-weight: 600; }
|
||
|
||
.meta {
|
||
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||
gap: 12px; margin: 18px 0 26px;
|
||
}
|
||
.meta .cell { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
|
||
.meta .cell h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
|
||
.meta .cell ul { list-style: none; font-size: 13px; color: #444; }
|
||
.meta .cell li { padding: 2px 0 2px 14px; position: relative; }
|
||
.meta .cell li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); opacity: .7; }
|
||
|
||
.frame-wrap { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px; overflow-x: auto; }
|
||
.frame-label { font-size: 11px; color: var(--muted); margin-bottom: 10px; letter-spacing: .08em; }
|
||
|
||
/* ---------- mall mock shared ---------- */
|
||
.mall { width: 1200px; flex: none; font-size: 14px; background: var(--bg); }
|
||
.topbar { height: 30px; background: #f7f7f7; border-bottom: 1px solid var(--line);
|
||
display: flex; align-items: center; justify-content: space-between; padding: 0 0; font-size: 12px; color: #666; }
|
||
.topbar span { padding: 0 8px; }
|
||
.hdr-main { display: flex; align-items: center; gap: 40px; padding: 18px 0; background: #fff; }
|
||
.logo { font-size: 30px; font-weight: 800; color: var(--red); letter-spacing: -0.02em; }
|
||
.search { flex: 1; max-width: 560px; display: flex; height: 36px; border: 2px solid var(--red); }
|
||
.search .input { flex: 1; padding: 0 12px; color: #bbb; font-size: 13px; display: flex; align-items: center; background:#fff; }
|
||
.search .btn { width: 88px; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; }
|
||
.hdr-links { margin-left: auto; font-size: 13px; color: #555; display: flex; gap: 18px; }
|
||
.nav { background: #2b2b2b; color: #fff; display: flex; align-items: stretch; height: 40px; }
|
||
.nav .cats-title { width: 240px; background: var(--red); display: flex; align-items: center; padding: 0 16px; font-weight: 600; }
|
||
.nav ul { list-style: none; display: flex; align-items: stretch; }
|
||
.nav li { display: flex; align-items: center; padding: 0 26px; font-size: 14px; }
|
||
.nav li.on { background: rgba(255,255,255,.12); }
|
||
|
||
.hero { display: flex; background: #fff; }
|
||
|
||
/* sidebar */
|
||
.side { width: 240px; flex: none; background: rgba(30,30,30,.92); color: #fff; padding: 8px 0; position: relative; }
|
||
.side li { list-style: none; padding: 9px 16px; cursor: pointer; }
|
||
.side li.on, .side li:hover { background: #fff; }
|
||
.side li.on .c1, .side li:hover .c1 { color: var(--red); }
|
||
.side li.on .c2, .side li:hover .c2 { color: var(--red); }
|
||
.side .c1 { display: block; font-size: 14px; font-weight: 500; }
|
||
.side .c2 { font-size: 12px; color: #bbb; margin-right: 8px; }
|
||
|
||
/* flyout */
|
||
.flyout {
|
||
position: absolute; left: 240px; top: 0; width: 700px; min-height: 100%;
|
||
background: #fff; color: var(--ink); box-shadow: 0 4px 18px rgba(0,0,0,.18);
|
||
padding: 18px 26px; display: none; z-index: 5;
|
||
}
|
||
.flyout.show { display: block; }
|
||
.flyout .row { display: flex; border-bottom: 1px solid var(--line); padding: 10px 0; }
|
||
.flyout .row:last-child { border-bottom: 0; }
|
||
.flyout .rt { width: 110px; font-weight: 700; font-size: 13px; }
|
||
.flyout .ri { font-size: 12.5px; color: #777; }
|
||
.flyout .ri span { display: inline-block; margin: 0 16px 6px 0; }
|
||
.flyout .ri span:hover { color: var(--red); }
|
||
|
||
/* banners */
|
||
.banner { position: relative; overflow: hidden; flex: 1; }
|
||
.banner .slide { position: absolute; inset: 0; display: flex; flex-direction: column;
|
||
align-items: flex-start; justify-content: center; padding: 0 70px; color: #fff; }
|
||
.slide .big { font-size: 42px; font-weight: 800; letter-spacing: .02em; }
|
||
.slide .sub { font-size: 17px; opacity: .92; margin-top: 8px; }
|
||
.slide .cta { margin-top: 22px; background: #fff; color: var(--ink); font-size: 13px;
|
||
font-weight: 700; padding: 8px 22px; border-radius: 999px; }
|
||
.g1 { background: linear-gradient(105deg, #b11018 0%, #e0412a 55%, #f2832f 100%); }
|
||
.g2 { background: linear-gradient(105deg, #173a6b 0%, #2456a6 60%, #3d8bd4 100%); }
|
||
.g3 { background: linear-gradient(105deg, #0c5c4c 0%, #14957a 60%, #4cc39a 100%); }
|
||
.dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
|
||
.dots i { width: 22px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.45); }
|
||
.dots i.on { background: #fff; }
|
||
.crop-note {
|
||
position: absolute; right: 12px; top: 10px; font-size: 10.5px; color: rgba(255,255,255,.85);
|
||
background: rgba(0,0,0,.28); padding: 2px 8px; border-radius: 999px;
|
||
}
|
||
|
||
/* option B right rail */
|
||
.rail { width: 240px; flex: none; background: #fff; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
|
||
.rail .user { padding: 18px 16px; border-bottom: 1px solid var(--line); text-align: center; }
|
||
.rail .avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg,#f3b,#ca151e); margin: 0 auto 8px; }
|
||
.rail .user p { font-size: 12.5px; color: #666; }
|
||
.rail .user .btns { margin-top: 8px; display: flex; gap: 8px; justify-content: center; }
|
||
.rail .user .btns b { font-size: 12px; padding: 3px 14px; border-radius: 999px; font-weight: 600; }
|
||
.rail .user .btns .login { background: var(--red); color: #fff; }
|
||
.rail .user .btns .reg { border: 1px solid var(--line); color: #555; }
|
||
.rail .entries { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
|
||
.rail .entries i { background: #fff; font-style: normal; font-size: 11px; color: #666; padding: 12px 0; text-align: center; display:block; }
|
||
.rail .notice { margin-top: auto; padding: 12px 14px; font-size: 12px; color: #888; border-top: 1px solid var(--line); }
|
||
.rail .notice b { color: var(--ink); display: block; margin-bottom: 4px; font-size: 12.5px; }
|
||
|
||
/* option C lower fill */
|
||
.hero-c { display: grid; grid-template-columns: 240px 1fr 1fr; grid-template-rows: 300px 150px; background: #fff; }
|
||
.hero-c .side { grid-row: 1 / 3; }
|
||
.hero-c .banner { grid-column: 2 / 4; }
|
||
.tile { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
|
||
.tile + .tile { border-left: 1px solid var(--line); }
|
||
.tile .t-in { padding: 26px; }
|
||
.tile h4 { font-size: 19px; }
|
||
.tile p { font-size: 12.5px; color: #888; margin-top: 4px; }
|
||
.tile .go { color: var(--red); font-size: 12px; font-weight: 700; margin-top: 10px; display: inline-block; }
|
||
.tile.t1 { background: linear-gradient(120deg, #fff 55%, #fdeaea); }
|
||
.tile.t2 { background: linear-gradient(120deg, #fff 55%, #e9f3fd); }
|
||
|
||
/* option D stacked banners */
|
||
.hero-d { display: flex; background: #fff; }
|
||
.stack { flex: 1; display: grid; grid-template-rows: 290px 160px; }
|
||
.stack .banner { border-bottom: 4px solid #fff; }
|
||
.stack .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
|
||
.stack .duo .mini { position: relative; overflow: hidden; color: #fff; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; }
|
||
.stack .duo .mini h4 { font-size: 20px; }
|
||
.stack .duo .mini p { font-size: 12px; opacity: .9; margin-top: 4px; }
|
||
|
||
/* strip under hero (shared, shown in A) */
|
||
.strip { display: flex; gap: 20px; margin-top: 16px; }
|
||
.quick { width: 240px; flex: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
|
||
background: var(--line); border: 1px solid var(--line); }
|
||
.quick i { background: #fff; font-style: normal; font-size: 11.5px; color: #777; text-align: center; padding: 12px 0; display: block; }
|
||
.promos { flex: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
|
||
.promos .p { height: 120px; border-radius: 2px; display: flex; align-items: flex-end; padding: 10px 14px; color: #fff; font-size: 13px; font-weight: 700; }
|
||
|
||
footer.close { max-width: 1240px; margin: 60px auto 40px; padding: 24px 20px; border-top: 1px solid var(--line);
|
||
color: #666; font-size: 13.5px; }
|
||
footer.close b { color: var(--ink); }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.ov-card { transition: none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="page-head">
|
||
<div class="kicker">Visual Proposal · VMall Home Hero</div>
|
||
<h1>类目侧栏常驻后，banner 轮播怎么摆？</h1>
|
||
<p class="decision">
|
||
已定决策：<strong>类目侧栏首页常驻左侧、不自动隐藏；头部不再随滚动收起；banner 保持 450px 高、左右裁切</strong>。
|
||
本页比较的是这 1200×450 黄金区域内的四种构图。四个方案共享同一份类目数据（6 个一级类目）与 3 张 banner，差异只在布局与信息层级。
|
||
方案 A 是上次讨论确认的方向，其余三个用于验证它是否真的是最优。
|
||
</p>
|
||
</header>
|
||
|
||
<nav class="overview" aria-label="方案总览">
|
||
<a class="ov-card" href="#opt-a">
|
||
<span class="tag">OPTION A</span>
|
||
<h2>左栏通栏 · JD 式</h2>
|
||
<p>侧栏 240 + banner 950 同高 450，banner 居中裁切。最经典的 B2B2C 首页。</p>
|
||
<span class="pick">已确认方向</span>
|
||
</a>
|
||
<a class="ov-card" href="#opt-b">
|
||
<span class="tag">OPTION B</span>
|
||
<h2>三段式 · 加右侧用户栏</h2>
|
||
<p>侧栏 240 + banner 700 + 240 用户栏（登录入口/快捷入口/公告），信息密度最高。</p>
|
||
<span class="pick alt">对比项</span>
|
||
</a>
|
||
<a class="ov-card" href="#opt-c">
|
||
<span class="tag">OPTION C</span>
|
||
<h2>矮 banner · 侧栏下沉</h2>
|
||
<p>banner 缩到 300 高，侧栏 450 贯穿，下方补两张促销瓷贴。类目存在感最强。</p>
|
||
<span class="pick alt">对比项</span>
|
||
</a>
|
||
<a class="ov-card" href="#opt-d">
|
||
<span class="tag">OPTION D</span>
|
||
<h2>侧栏 + 双层 banner</h2>
|
||
<p>右侧上下两层：主 banner 290 + 两张活动位 160。一屏承载更多营销位。</p>
|
||
<span class="pick alt">对比项</span>
|
||
</a>
|
||
</nav>
|
||
|
||
<!-- ================= OPTION A ================= -->
|
||
<section class="option" id="opt-a">
|
||
<header><span class="num">A</span><h2>左栏通栏 · JD 式（已确认方向）</h2></header>
|
||
<p class="thesis">
|
||
侧栏与 banner 同高 450 并排放满 1200 网格，banner 等比缩到约 950 宽后<em>居中裁切左右两侧</em>。
|
||
hover 一级类目时白色面板向右展开、盖住 banner（对应你给的图 2）。下方的快捷入口条 240px 宽，恰好与侧栏列宽对齐，页面左缘形成一条整齐的纵向轨道。
|
||
</p>
|
||
|
||
<div class="frame-wrap">
|
||
<div class="frame-label">LIVE MOCK · 1200px · hover 侧栏第一行可看到展开面板</div>
|
||
<div class="mall">
|
||
<div class="topbar"><span>欢迎来到 VMall</span><span>我的订单 · 我的收藏 · 客户服务 · 网站导航</span></div>
|
||
<div class="hdr-main">
|
||
<div class="logo">VMall</div>
|
||
<div class="search"><div class="input">iphone</div><div class="btn">搜索</div></div>
|
||
<div class="hdr-links"><span>我的商城</span><span>我的购物车</span></div>
|
||
</div>
|
||
<div class="nav">
|
||
<div class="cats-title">全部商品分类</div>
|
||
<ul><li class="on">首页</li><li>店铺街</li><li>秒杀</li><li>拼团</li><li>积分商城</li><li>帮助中心</li></ul>
|
||
</div>
|
||
|
||
<div class="hero" style="height:450px">
|
||
<ul class="side" id="sideA">
|
||
<li data-fly="flyA1"><span class="c1">手机数码</span><span class="c2">智能手机</span><span class="c2">影音娱乐</span></li>
|
||
<li data-fly="flyA2"><span class="c1">电脑办公</span><span class="c2">笔记本电脑</span><span class="c2">外设产品</span></li>
|
||
<li><span class="c1">家用电器</span><span class="c2">厨房电器</span><span class="c2">清洁电器</span></li>
|
||
<li><span class="c1">服饰鞋包</span><span class="c2">男装</span><span class="c2">箱包</span></li>
|
||
<li><span class="c1">美妆个护</span><span class="c2">面部护肤</span><span class="c2">个人护理</span></li>
|
||
<li><span class="c1">食品生鲜</span><span class="c2">休闲零食</span><span class="c2">生鲜果蔬</span></li>
|
||
<div class="flyout" id="flyA1">
|
||
<div class="row"><span class="rt">智能手机</span><span class="ri"><span>旗舰机型</span><span>千元机</span></span></div>
|
||
<div class="row"><span class="rt">影音娱乐</span><span class="ri"><span>真无线耳机</span><span>蓝牙音箱</span></span></div>
|
||
</div>
|
||
<div class="flyout" id="flyA2">
|
||
<div class="row"><span class="rt">笔记本电脑</span><span class="ri"><span>轻薄本</span><span>游戏本</span></span></div>
|
||
<div class="row"><span class="rt">外设产品</span><span class="ri"><span>键盘</span><span>显示器</span></span></div>
|
||
</div>
|
||
</ul>
|
||
<div class="banner">
|
||
<div class="slide g1"><span class="crop-note">1200×450 原图 · 居中裁切至 950</span>
|
||
<div class="big">手机数码节</div><div class="sub">旗舰机型低至 5 折起</div><span class="cta">立即抢购</span></div>
|
||
<div class="dots"><i class="on"></i><i></i><i></i></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="strip">
|
||
<div class="quick"><i>充值</i><i>机票</i><i>电影票</i><i>酒店</i><i>火车票</i><i>礼品卡</i></div>
|
||
<div class="promos">
|
||
<div class="p g2">品牌闪购</div><div class="p g3">生鲜特惠</div><div class="p g1">新品首发</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="meta">
|
||
<div class="cell"><h3>优势</h3><ul>
|
||
<li>改动最小：现有 CategoryMenu 加 pinned 模式即可，DOM 结构基本不动</li>
|
||
<li>与 tigshop 参考一致，用户心智成本为零</li>
|
||
<li>banner 视觉面积最大，营销冲击力最强</li>
|
||
<li>侧栏 240 与下方 quick 条对齐，左缘整齐</li>
|
||
</ul></div>
|
||
<div class="cell"><h3>代价</h3><ul>
|
||
<li>banner 从 1200 缩到 950，左右各裁 ~125px，设计图需保证主体居中</li>
|
||
<li>首屏没有用户/公告位的位置</li>
|
||
</ul></div>
|
||
<div class="cell"><h3>最适合</h3><ul>
|
||
<li>营销驱动、banner 是核心转化位的商城</li>
|
||
<li>追求与成熟 B2B2C 一致的稳妥落地</li>
|
||
</ul></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= OPTION B ================= -->
|
||
<section class="option" id="opt-b">
|
||
<header><span class="num">B</span><h2>三段式 · 右侧加用户栏</h2></header>
|
||
<p class="thesis">
|
||
同样是侧栏常驻，但右侧再切出 240px 给用户栏：登录/注册入口、六个快捷入口、公告。
|
||
banner 只剩约 700px 宽。这是京东首页的经典三段式，<em>信息密度最高</em>，但 banner 被压缩得最狠。
|
||
</p>
|
||
|
||
<div class="frame-wrap">
|
||
<div class="frame-label">MOCK · 1200px</div>
|
||
<div class="mall">
|
||
<div class="nav">
|
||
<div class="cats-title">全部商品分类</div>
|
||
<ul><li class="on">首页</li><li>店铺街</li><li>秒杀</li><li>拼团</li><li>积分商城</li><li>帮助中心</li></ul>
|
||
</div>
|
||
<div class="hero" style="height:450px">
|
||
<ul class="side">
|
||
<li><span class="c1">手机数码</span><span class="c2">智能手机</span><span class="c2">影音娱乐</span></li>
|
||
<li><span class="c1">电脑办公</span><span class="c2">笔记本电脑</span><span class="c2">外设产品</span></li>
|
||
<li><span class="c1">家用电器</span><span class="c2">厨房电器</span><span class="c2">清洁电器</span></li>
|
||
<li><span class="c1">服饰鞋包</span><span class="c2">男装</span><span class="c2">箱包</span></li>
|
||
<li><span class="c1">美妆个护</span><span class="c2">面部护肤</span><span class="c2">个人护理</span></li>
|
||
<li><span class="c1">食品生鲜</span><span class="c2">休闲零食</span><span class="c2">生鲜果蔬</span></li>
|
||
</ul>
|
||
<div class="banner">
|
||
<div class="slide g2"><span class="crop-note">banner 压缩至 ~700px</span>
|
||
<div class="big" style="font-size:34px">电脑办公季</div><div class="sub">轻薄本直降千元</div><span class="cta">去看看</span></div>
|
||
<div class="dots"><i class="on"></i><i></i><i></i></div>
|
||
</div>
|
||
<aside class="rail">
|
||
<div class="user">
|
||
<div class="avatar"></div>
|
||
<p>Hi，欢迎来 VMall</p>
|
||
<div class="btns"><b class="login">登录</b><b class="reg">注册</b></div>
|
||
</div>
|
||
<div class="entries"><i>优惠券</i><i>积分</i><i>收藏</i><i>足迹</i><i>发票</i><i>客服</i></div>
|
||
<div class="notice"><b>商城公告</b>国庆大促 9.28 开启，全场满 300 减 50…</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="meta">
|
||
<div class="cell"><h3>优势</h3><ul>
|
||
<li>首屏放下登录转化 + 快捷入口 + 公告，功能密度最高</li>
|
||
<li>未登录用户的引导路径最短</li>
|
||
</ul></div>
|
||
<div class="cell"><h3>代价</h3><ul>
|
||
<li>banner 只剩 700px，营销位严重缩水，450 高下显得局促</li>
|
||
<li>多一块全新组件（用户栏），mock 数据和状态都要新增</li>
|
||
<li>首屏信息噪声大，与"突出 banner"的目标冲突</li>
|
||
</ul></div>
|
||
<div class="cell"><h3>最适合</h3><ul>
|
||
<li>用户运营重于品牌营销的阶段</li>
|
||
<li>有强公告/通知诉求的 B 端占比高的商城</li>
|
||
</ul></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= OPTION C ================= -->
|
||
<section class="option" id="opt-c">
|
||
<header><span class="num">C</span><h2>矮 banner · 侧栏下沉贯穿</h2></header>
|
||
<p class="thesis">
|
||
banner 压到 300 高，侧栏保持 450 贯穿整个 hero；banner 下方的 150px 空隙用两张促销瓷贴填平。
|
||
<em>类目成为 hero 的视觉主轴</em>，banner 退居其次——适合把类目导航当核心入口的商城。
|
||
注意：这与已确认的"banner 保持 450"不一致，选它意味着推翻第 3 条决策。
|
||
</p>
|
||
|
||
<div class="frame-wrap">
|
||
<div class="frame-label">MOCK · 1200px</div>
|
||
<div class="mall">
|
||
<div class="nav">
|
||
<div class="cats-title">全部商品分类</div>
|
||
<ul><li class="on">首页</li><li>店铺街</li><li>秒杀</li><li>拼团</li><li>积分商城</li><li>帮助中心</li></ul>
|
||
</div>
|
||
<div class="hero-c" style="height:450px">
|
||
<ul class="side">
|
||
<li><span class="c1">手机数码</span><span class="c2">智能手机</span><span class="c2">影音娱乐</span></li>
|
||
<li><span class="c1">电脑办公</span><span class="c2">笔记本电脑</span><span class="c2">外设产品</span></li>
|
||
<li><span class="c1">家用电器</span><span class="c2">厨房电器</span><span class="c2">清洁电器</span></li>
|
||
<li><span class="c1">服饰鞋包</span><span class="c2">男装</span><span class="c2">箱包</span></li>
|
||
<li><span class="c1">美妆个护</span><span class="c2">面部护肤</span><span class="c2">个人护理</span></li>
|
||
<li><span class="c1">食品生鲜</span><span class="c2">休闲零食</span><span class="c2">生鲜果蔬</span></li>
|
||
</ul>
|
||
<div class="banner">
|
||
<div class="slide g3"><span class="crop-note">banner 缩至 300 高</span>
|
||
<div class="big" style="font-size:30px">生鲜特惠周</div><div class="sub">产地直供 · 次日达</div><span class="cta">去逛逛</span></div>
|
||
<div class="dots" style="bottom:10px"><i class="on"></i><i></i><i></i></div>
|
||
</div>
|
||
<div class="tile t1"><div class="t-in"><h4>秒杀专场</h4><p>每日 10 点更新 · 低至 1 折</p><span class="go">立即开抢 ›</span></div></div>
|
||
<div class="tile t2"><div class="t-in"><h4>拼团广场</h4><p>2 人成团 · 好物拼着买</p><span class="go">去拼团 ›</span></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="meta">
|
||
<div class="cell"><h3>优势</h3><ul>
|
||
<li>类目导航存在感最强，引导深逛</li>
|
||
<li>多两个直达秒杀/拼团的营销入口，与导航条形成呼应</li>
|
||
</ul></div>
|
||
<div class="cell"><h3>代价</h3><ul>
|
||
<li>banner 只有 300 高，主视觉被明显削弱</li>
|
||
<li>推翻已确认的 450 高决策</li>
|
||
<li>hero 区视觉碎成三块，不如 A 整体</li>
|
||
</ul></div>
|
||
<div class="cell"><h3>最适合</h3><ul>
|
||
<li>类目 SKU 极多、搜索之外的浏览主要靠类目树</li>
|
||
<li>营销位预算少、banner 只有一两张时</li>
|
||
</ul></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= OPTION D ================= -->
|
||
<section class="option" id="opt-d">
|
||
<header><span class="num">D</span><h2>侧栏 + 双层 banner</h2></header>
|
||
<p class="thesis">
|
||
侧栏 450 不变，右侧纵向切成两层：主 banner 290 高（保持裁切策略），下面两张 160 高的活动位。
|
||
轮播仍是主角，但<em>首屏多承载两个固定营销位</em>，活动位的图不需要轮播、常显。
|
||
</p>
|
||
|
||
<div class="frame-wrap">
|
||
<div class="frame-label">MOCK · 1200px</div>
|
||
<div class="mall">
|
||
<div class="nav">
|
||
<div class="cats-title">全部商品分类</div>
|
||
<ul><li class="on">首页</li><li>店铺街</li><li>秒杀</li><li>拼团</li><li>积分商城</li><li>帮助中心</li></ul>
|
||
</div>
|
||
<div class="hero-d" style="height:450px">
|
||
<ul class="side">
|
||
<li><span class="c1">手机数码</span><span class="c2">智能手机</span><span class="c2">影音娱乐</span></li>
|
||
<li><span class="c1">电脑办公</span><span class="c2">笔记本电脑</span><span class="c2">外设产品</span></li>
|
||
<li><span class="c1">家用电器</span><span class="c2">厨房电器</span><span class="c2">清洁电器</span></li>
|
||
<li><span class="c1">服饰鞋包</span><span class="c2">男装</span><span class="c2">箱包</span></li>
|
||
<li><span class="c1">美妆个护</span><span class="c2">面部护肤</span><span class="c2">个人护理</span></li>
|
||
<li><span class="c1">食品生鲜</span><span class="c2">休闲零食</span><span class="c2">生鲜果蔬</span></li>
|
||
</ul>
|
||
<div class="stack">
|
||
<div class="banner">
|
||
<div class="slide g1"><span class="crop-note">主 banner 290 高</span>
|
||
<div class="big" style="font-size:30px">服饰新风尚</div><div class="sub">秋装新品满 299 减 60</div><span class="cta">选购</span></div>
|
||
<div class="dots" style="bottom:10px"><i class="on"></i><i></i><i></i></div>
|
||
</div>
|
||
<div class="duo">
|
||
<div class="mini g2"><h4>家电焕新季</h4><p>以旧换新补贴 10%</p></div>
|
||
<div class="mini g3"><h4>美妆超级品类日</h4><p>爆款精华买一赠一</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="meta">
|
||
<div class="cell"><h3>优势</h3><ul>
|
||
<li>首屏营销位最多（1 轮播 + 2 常显），运营位不打架</li>
|
||
<li>常显活动位不受轮播切换影响，曝光稳定</li>
|
||
</ul></div>
|
||
<div class="cell"><h3>代价</h3><ul>
|
||
<li>与下方 promos 条功能重叠，首屏上下都是瓷贴</li>
|
||
<li>主 banner 被压到 290，比 C 还矮</li>
|
||
<li>多一组 mock 数据与组件</li>
|
||
</ul></div>
|
||
<div class="cell"><h3>最适合</h3><ul>
|
||
<li>运营活动密集、常显位需求强的商城</li>
|
||
<li>愿意牺牲主视觉高度换曝光位</li>
|
||
</ul></div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="close">
|
||
<b>我的建议：维持方案 A。</b>它零新增组件、与参考站一致、banner 面积最大；B/C/D 的额外营销位在当前 mock 阶段没有真实内容支撑，且 B/C/D 都以压缩 banner 为代价，与"优化 banner 轮播"的初衷相悖。
|
||
如果看完想改方向，告诉我选哪个（或组合，如 A + D 的常显位）；确认后我把最终决策写进 <b>pin-home-category-menu</b> 这个 OpenSpec change。
|
||
</footer>
|
||
|
||
<script>
|
||
// Option A flyout interaction
|
||
document.querySelectorAll('#sideA li[data-fly]').forEach(function (li) {
|
||
var panel = document.getElementById(li.getAttribute('data-fly'));
|
||
li.addEventListener('mouseenter', function () { panel.classList.add('show'); });
|
||
li.addEventListener('mouseleave', function () { panel.classList.remove('show'); });
|
||
li.addEventListener('focusin', function () { panel.classList.add('show'); });
|
||
li.addEventListener('focusout', function () { panel.classList.remove('show'); });
|
||
li.setAttribute('tabindex', '0');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|