97 lines
5.5 KiB
HTML
97 lines
5.5 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>山峡化工 · UI Pattern 索引</title>
|
||
<link rel="stylesheet" href="shanxia-mp-base.css" />
|
||
<style>
|
||
body { background: #eef3f0; }
|
||
.index-wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; }
|
||
.index-hero { background: var(--header-gradient); color: #fff; border-radius: 20px; padding: 24px 20px; box-shadow: var(--shadow-md); margin-bottom: 20px; }
|
||
.index-hero h1 { font-size: 22px; margin-bottom: 8px; }
|
||
.index-hero p { font-size: 13px; opacity: 0.9; line-height: 1.6; }
|
||
.index-grid { display: grid; gap: 12px; }
|
||
.index-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; gap: 14px; align-items: flex-start; }
|
||
.index-card:hover { box-shadow: var(--shadow-sm); }
|
||
.index-card__icon { width: 44px; height: 44px; border-radius: 12px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; font-size: 12px; }
|
||
.index-card h2 { font-size: 16px; margin-bottom: 4px; }
|
||
.index-card p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
|
||
.index-card__tag { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--brand-green-dark); background: var(--brand-green-soft); padding: 2px 8px; border-radius: 999px; }
|
||
.index-section-title { font-size: 13px; color: var(--text-muted); margin: 20px 0 10px; font-weight: 600; }
|
||
.token-box { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-top: 20px; }
|
||
.token-box h3 { font-size: 14px; margin-bottom: 10px; }
|
||
.class-list { font-size: 11px; color: var(--text-muted); line-height: 1.9; font-family: ui-monospace, monospace; }
|
||
.class-list code { color: var(--brand-green-dark); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="index-wrap">
|
||
<header class="index-hero">
|
||
<h1>UI Pattern 组件库</h1>
|
||
<p>山峡化工小程序通用页面模式。所有样式集中在 <strong>shanxia-mp-base.css</strong>，落地 uni-app 时按 class 映射复用。</p>
|
||
</header>
|
||
|
||
<p class="index-section-title">页面模式（4 个核心 Pattern）</p>
|
||
<div class="index-grid">
|
||
<a class="index-card" href="shanxia-mp-pattern-list.html">
|
||
<div class="index-card__icon" style="background:linear-gradient(145deg,#087f57,#0a9f6d)">LIST</div>
|
||
<div>
|
||
<h2>P-LIST · 标准列表</h2>
|
||
<p>Header / 筛选 Tab / 可点击卡片列表 / 空态 / 骨架屏 / 触底提示</p>
|
||
<span class="index-card__tag">列表办理入口</span>
|
||
</div>
|
||
</a>
|
||
<a class="index-card" href="shanxia-mp-pattern-view.html">
|
||
<div class="index-card__icon" style="background:linear-gradient(145deg,#0a9f6d,#11b37a)">VIEW</div>
|
||
<div>
|
||
<h2>P-VIEW · 查看详情</h2>
|
||
<p>Hero 摘要 + 分块 KV + 时间线 + 附件 + 底栏操作 + 抽屉快捷预览</p>
|
||
<span class="index-card__tag">只读详情</span>
|
||
</div>
|
||
</a>
|
||
<a class="index-card" href="shanxia-mp-pattern-form.html">
|
||
<div class="index-card__icon" style="background:linear-gradient(145deg,#c9922f,#d6a343)">FORM</div>
|
||
<div>
|
||
<h2>P-FORM · 新增/编辑表单</h2>
|
||
<p>分组面板 + 堆叠输入 + 行式选择器 + 附件上传 + 底栏提交</p>
|
||
<span class="index-card__tag">数据录入</span>
|
||
</div>
|
||
</a>
|
||
<a class="index-card" href="shanxia-mp-pattern-feedback.html">
|
||
<div class="index-card__icon" style="background:linear-gradient(145deg,#247a70,#2b8a7e)">UI</div>
|
||
<div>
|
||
<h2>P-FEEDBACK · 弹窗与反馈</h2>
|
||
<p>确认弹窗 / 底部抽屉 / Action Sheet / Toast / 空态 / 骨架屏</p>
|
||
<span class="index-card__tag">交互反馈</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<p class="index-section-title">推荐页面流转</p>
|
||
<div class="token-box">
|
||
<p style="font-size:13px;line-height:1.8;color:var(--text-primary)">
|
||
工作台菜单 → <strong>列表页</strong> → 点击卡片 → <strong>查看详情</strong><br>
|
||
列表 Header「新增」→ <strong>表单页</strong> → 提交 → 返回列表<br>
|
||
详情「更多」→ Action Sheet → 删除 → 确认弹窗 → Toast
|
||
</p>
|
||
</div>
|
||
|
||
<section class="token-box">
|
||
<h3>核心 Class 速查</h3>
|
||
<div class="class-list">
|
||
布局：<code>.mp-navbar</code> <code>.mp-header</code> <code>.mp-footer-bar</code><br>
|
||
列表：<code>.mp-tabs</code> <code>.mp-card--clickable</code> <code>.mp-list-end</code> <code>.mp-empty</code>（方案 B · 组件 <code>mp-empty</code>）<br>
|
||
详情：<code>.mp-detail-hero</code> <code>.mp-block</code> <code>.mp-kv-list</code> <code>.mp-timeline</code><br>
|
||
表单：<code>.mp-form-group</code> <code>.mp-field</code> <code>.mp-field-row</code> <code>.mp-attach-upload</code><br>
|
||
弹窗：<code>.mp-overlay</code> <code>.mp-sheet</code> <code>.mp-dialog</code> <code>.mp-action-sheet</code> <code>.mp-toast</code><br>
|
||
状态：<code>.mp-tag--success|warning|danger|info|muted</code>
|
||
</div>
|
||
<p style="margin-top:12px;font-size:12px;color:var(--text-muted)">
|
||
<a href="shanxia-mp-index.html" style="color:var(--brand-green-dark)">← 返回小程序 Demo 总索引</a>
|
||
</p>
|
||
</section>
|
||
</div>
|
||
</body>
|
||
</html>
|