460 lines
14 KiB
HTML
460 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
<title>小程序首页 · 分区菜单 Demo</title>
|
|
<style>
|
|
:root {
|
|
--brand-green: #0a9f6d;
|
|
--brand-green-dark: #087f57;
|
|
--brand-green-soft: #e9f9f2;
|
|
--bg-page: #f5f8f7;
|
|
--surface: #ffffff;
|
|
--text-primary: #1f2a26;
|
|
--text-muted: #6b7b74;
|
|
--border: #dcebe4;
|
|
--region-market: #ea9518;
|
|
--region-oa: #10aa1a;
|
|
--shadow-soft: 0 4px 16px rgba(15, 41, 30, 0.08);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
|
|
color: var(--text-primary);
|
|
background:
|
|
radial-gradient(900px 420px at 10% -10%, rgba(10, 159, 109, 0.14), transparent 55%),
|
|
radial-gradient(700px 380px at 90% 0%, rgba(234, 149, 24, 0.12), transparent 50%),
|
|
linear-gradient(180deg, #eef6f2 0%, #f7faf9 40%, #f3f6f5 100%);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
gap: 28px;
|
|
padding: 28px 16px 48px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.doc {
|
|
width: min(320px, 100%);
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 18px 16px;
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
.doc h1 {
|
|
margin: 0 0 8px;
|
|
font-size: 18px;
|
|
color: var(--brand-green-dark);
|
|
}
|
|
.doc p {
|
|
margin: 0 0 10px;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
color: var(--text-muted);
|
|
}
|
|
.doc ul {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: var(--text-primary);
|
|
}
|
|
.swatch {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 3px;
|
|
vertical-align: -1px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.phone {
|
|
width: 375px;
|
|
max-width: 100%;
|
|
background: #111;
|
|
border-radius: 36px;
|
|
padding: 12px;
|
|
box-shadow: 0 18px 50px rgba(15, 41, 30, 0.18);
|
|
}
|
|
.phone-screen {
|
|
background: var(--bg-page);
|
|
border-radius: 28px;
|
|
overflow: hidden;
|
|
min-height: 720px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.status-bar {
|
|
height: 28px;
|
|
padding: 8px 20px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #0a9f6d 0%, #087f57 100%);
|
|
}
|
|
|
|
.home-header {
|
|
background: linear-gradient(160deg, #0a9f6d 0%, #087f57 72%, #066648 100%);
|
|
color: #fff;
|
|
padding: 8px 20px 28px;
|
|
border-radius: 0 0 22px 22px;
|
|
}
|
|
.brand {
|
|
font-size: 13px;
|
|
opacity: 0.9;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.hello {
|
|
margin-top: 10px;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
}
|
|
.meta {
|
|
margin-top: 8px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
opacity: 0.92;
|
|
}
|
|
.logout {
|
|
padding: 4px 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.45);
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.home-body {
|
|
flex: 1;
|
|
padding: 12px 14px 24px;
|
|
margin-top: -14px;
|
|
}
|
|
|
|
.banner {
|
|
height: 120px;
|
|
border-radius: 14px;
|
|
background:
|
|
linear-gradient(120deg, rgba(10, 159, 109, 0.35), rgba(234, 149, 24, 0.28)),
|
|
#d7ebe2;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 12px 14px;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.region {
|
|
background: var(--surface);
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-soft);
|
|
border: 1px solid rgba(220, 235, 228, 0.9);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.region-hd {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 11px 14px;
|
|
color: #fff;
|
|
}
|
|
.region-hd__left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
.region-hd__mark {
|
|
width: 4px;
|
|
height: 16px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
}
|
|
.region-hd__title {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.region-hd__hint {
|
|
font-size: 11px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.region--market .region-hd { background: var(--region-market); }
|
|
.region--oa .region-hd { background: var(--region-oa); }
|
|
|
|
.region-bd {
|
|
padding: 14px 10px 12px;
|
|
}
|
|
|
|
.menu-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 10px 6px;
|
|
}
|
|
|
|
.menu-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-height: 72px;
|
|
padding: 8px 4px 6px;
|
|
border-radius: 12px;
|
|
cursor: default;
|
|
user-select: none;
|
|
}
|
|
.menu-card:hover {
|
|
background: #f3faf6;
|
|
}
|
|
|
|
.menu-icon {
|
|
position: relative;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
background: #eef2f1;
|
|
color: #3d524a;
|
|
box-shadow: inset 0 0 0 1px rgba(15, 41, 30, 0.06);
|
|
}
|
|
.menu-icon--plain {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
font-size: 22px;
|
|
}
|
|
.menu-icon--amber { background: #fff4e5; color: #c27803; }
|
|
.menu-icon--green { background: #e9f9f2; color: #0a9f6d; }
|
|
.menu-icon--rose { background: #ffe4e6; color: #e11d48; }
|
|
.menu-icon--slate { background: #eef2f1; color: #3d524a; }
|
|
|
|
.badge {
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -6px;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
padding: 0 4px;
|
|
border-radius: 8px;
|
|
background: #fa5151;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
box-shadow: 0 0 0 1.5px #fff;
|
|
}
|
|
|
|
.menu-title {
|
|
font-size: 11px;
|
|
line-height: 1.25;
|
|
text-align: center;
|
|
color: var(--text-primary);
|
|
max-width: 72px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.role-tag {
|
|
display: inline-block;
|
|
margin-top: -2px;
|
|
padding: 1px 5px;
|
|
border-radius: 999px;
|
|
font-size: 9px;
|
|
line-height: 1.3;
|
|
background: rgba(234, 149, 24, 0.12);
|
|
color: #c27803;
|
|
border: 1px solid rgba(234, 149, 24, 0.28);
|
|
}
|
|
.role-tag--manager {
|
|
background: rgba(16, 170, 26, 0.1);
|
|
color: #0d8a16;
|
|
border-color: rgba(16, 170, 26, 0.28);
|
|
}
|
|
|
|
.alt-note {
|
|
margin-top: 8px;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.phone-label {
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<aside class="doc">
|
|
<h1>分区菜单 Demo</h1>
|
|
<p>小程序首页菜单按业务区域分组：同一区域共享标题栏色带，区域内为 4 列宫格。</p>
|
|
<ul>
|
|
<li><span class="swatch" style="background:#ea9518"></span>市场部 <code>#ea9518</code></li>
|
|
<li><span class="swatch" style="background:#10aa1a"></span>OA工作流 <code>#10aa1a</code></li>
|
|
<li>标题栏白字 + 左侧短竖条</li>
|
|
<li>叶子名称保留「（专员）/（经理）」区分</li>
|
|
<li>无权限区域整块不展示（本 Demo 两区均展示）</li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<div>
|
|
<div class="phone-label">375px · 首页菜单区域</div>
|
|
<div class="phone">
|
|
<div class="phone-screen">
|
|
<div class="status-bar">
|
|
<span>9:41</span>
|
|
<span>▮▮▮ ▉</span>
|
|
</div>
|
|
|
|
<header class="home-header">
|
|
<div class="brand">中科兴皖 · 移动工作台</div>
|
|
<div class="hello">您好，张三</div>
|
|
<div class="meta">
|
|
<span>市场专员 · 华东一区</span>
|
|
<span class="logout">退出登录</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="home-body">
|
|
<div class="banner">品牌宣传位 · 4:3 / 视频轮播</div>
|
|
|
|
<!-- 市场部区域 -->
|
|
<section class="region region--market">
|
|
<div class="region-hd">
|
|
<div class="region-hd__left">
|
|
<span class="region-hd__mark" aria-hidden="true"></span>
|
|
<span class="region-hd__title">市场部</span>
|
|
</div>
|
|
<span class="region-hd__hint">存储现场</span>
|
|
</div>
|
|
<div class="region-bd">
|
|
<div class="menu-grid">
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--amber">预</div>
|
|
<div class="menu-title">预签约订单（专员）</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--amber">协</div>
|
|
<div class="menu-title">协议单（专员）</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--amber">催</div>
|
|
<div class="menu-title">催缴信息（专员）</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--amber">缴</div>
|
|
<div class="menu-title">缴费信息（专员）</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--amber">样</div>
|
|
<div class="menu-title">样本信息（专员）</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--amber">运</div>
|
|
<div class="menu-title">运费信息（专员）</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--green">预</div>
|
|
<div class="menu-title">预签约订单（经理）</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--green">协</div>
|
|
<div class="menu-title">协议单（经理）</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--green">催</div>
|
|
<div class="menu-title">催缴信息（经理）</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--green">缴</div>
|
|
<div class="menu-title">缴费信息（经理）</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--green">样</div>
|
|
<div class="menu-title">样本信息（经理）</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--green">运</div>
|
|
<div class="menu-title">运费信息（经理）</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- OA工作流区域 -->
|
|
<section class="region region--oa">
|
|
<div class="region-hd">
|
|
<div class="region-hd__left">
|
|
<span class="region-hd__mark" aria-hidden="true"></span>
|
|
<span class="region-hd__title">OA工作流</span>
|
|
</div>
|
|
<span class="region-hd__hint">审批协同</span>
|
|
</div>
|
|
<div class="region-bd">
|
|
<div class="menu-grid">
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--plain">✈️</div>
|
|
<div class="menu-title">发起审批</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--slate">📝</div>
|
|
<div class="menu-title">草稿箱</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--rose">
|
|
⏳
|
|
<span class="badge">3</span>
|
|
</div>
|
|
<div class="menu-title">待办中心</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--green">✅</div>
|
|
<div class="menu-title">已办中心</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--slate">📤</div>
|
|
<div class="menu-title">我发起的</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--amber">📨</div>
|
|
<div class="menu-title">抄送我的</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--amber">
|
|
@
|
|
<span class="badge">1</span>
|
|
</div>
|
|
<div class="menu-title">提到我的</div>
|
|
</div>
|
|
<div class="menu-card">
|
|
<div class="menu-icon menu-icon--green">🔔</div>
|
|
<div class="menu-title">开启微信通知</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<p class="alt-note">图标为占位；落地时沿用现有 path→icon 映射与空置策略</p>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|