|
@@ -0,0 +1,460 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="zh-CN">
|
|
|
|
|
+<head>
|
|
|
|
|
+ <meta charset="UTF-8" />
|
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
|
+ <title>市场部 · 中性 Tag 样式对比</title>
|
|
|
|
|
+ <style>
|
|
|
|
|
+ :root {
|
|
|
|
|
+ --brand: #0a9f6d;
|
|
|
|
|
+ --brand-dark: #087f57;
|
|
|
|
|
+ --brand-soft: #e9f9f2;
|
|
|
|
|
+ --barley: #d6a343;
|
|
|
|
|
+ --barley-soft: #fff7e8;
|
|
|
|
|
+ --text: #18332a;
|
|
|
|
|
+ --muted: #6b7f77;
|
|
|
|
|
+ --border: #dce9e4;
|
|
|
|
|
+ --surface: #fff;
|
|
|
|
|
+ --page: #f4f8f6;
|
|
|
|
|
+ --danger: #ef4444;
|
|
|
|
|
+ --danger-soft: #fef2f2;
|
|
|
|
|
+ --success: #10b981;
|
|
|
|
|
+ --vant-gray: #969799;
|
|
|
|
|
+ }
|
|
|
|
|
+ * { box-sizing: border-box; }
|
|
|
|
|
+ body {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ font-family: "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
|
|
|
|
|
+ color: var(--text);
|
|
|
|
|
+ background:
|
|
|
|
|
+ radial-gradient(900px 360px at 0% -10%, #d1fae5 0%, transparent 55%),
|
|
|
|
|
+ radial-gradient(700px 320px at 100% 0%, #ecfdf5 0%, transparent 50%),
|
|
|
|
|
+ var(--page);
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ }
|
|
|
|
|
+ .wrap { max-width: 980px; margin: 0 auto; padding: 24px 16px 72px; }
|
|
|
|
|
+ h1 { margin: 0 0 8px; font-size: 24px; letter-spacing: -0.02em; }
|
|
|
|
|
+ .lead { margin: 0 0 20px; color: var(--muted); max-width: 720px; }
|
|
|
|
|
+ .note {
|
|
|
|
|
+ margin: 0 0 24px;
|
|
|
|
|
+ padding: 12px 14px;
|
|
|
|
|
+ border: 1px solid var(--border);
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ }
|
|
|
|
|
+ .note strong { color: var(--text); }
|
|
|
|
|
+ .section { margin-bottom: 28px; }
|
|
|
|
|
+ .section h2 {
|
|
|
|
|
+ margin: 0 0 10px;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .section h2 .pill {
|
|
|
|
|
+ font-size: 11px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ padding: 2px 8px;
|
|
|
|
|
+ border-radius: 999px;
|
|
|
|
|
+ background: var(--brand-soft);
|
|
|
|
|
+ color: var(--brand-dark);
|
|
|
|
|
+ }
|
|
|
|
|
+ .card {
|
|
|
|
|
+ border: 1px solid var(--border);
|
|
|
|
|
+ border-radius: 16px;
|
|
|
|
|
+ background: var(--surface);
|
|
|
|
|
+ box-shadow: 0 6px 20px rgb(8 127 87 / 7%);
|
|
|
|
|
+ padding: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .card + .card { margin-top: 12px; }
|
|
|
|
|
+ .card-head {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+ padding-bottom: 12px;
|
|
|
|
|
+ border-bottom: 1px solid #eef4f1;
|
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .idx {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ place-items: center;
|
|
|
|
|
+ width: 30px;
|
|
|
|
|
+ height: 30px;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ background: var(--brand-soft);
|
|
|
|
|
+ color: var(--brand-dark);
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ flex: 0 0 30px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .id-block { flex: 1; min-width: 0; }
|
|
|
|
|
+ .id-block strong { display: block; font-size: 16px; }
|
|
|
|
|
+ .id-block small { color: var(--muted); font-size: 12px; }
|
|
|
|
|
+ .row-tags {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ .hint {
|
|
|
|
|
+ margin: 8px 0 0;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ }
|
|
|
|
|
+ /* —— shared capsule —— */
|
|
|
|
|
+ .tag {
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ width: fit-content;
|
|
|
|
|
+ max-width: 128px;
|
|
|
|
|
+ padding: 5px 12px;
|
|
|
|
|
+ border-radius: 999px;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ line-height: 1.3;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ border: 1px solid transparent;
|
|
|
|
|
+ }
|
|
|
|
|
+ /* existing filled tones (keep as-is) */
|
|
|
|
|
+ .tag--primary { background: var(--brand); color: #fff; }
|
|
|
|
|
+ .tag--success { background: var(--success); color: #fff; }
|
|
|
|
|
+ .tag--warning { background: #ff976a; color: #fff; }
|
|
|
|
|
+ .tag--danger { background: var(--danger); color: #fff; }
|
|
|
|
|
+
|
|
|
|
|
+ /* CURRENT problem: Vant default */
|
|
|
|
|
+ .tag--current-default {
|
|
|
|
|
+ background: var(--vant-gray);
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* Option A: soft slate (Element-like info light) */
|
|
|
|
|
+ .tag--opt-a {
|
|
|
|
|
+ background: #f1f5f9;
|
|
|
|
|
+ color: #475569;
|
|
|
|
|
+ border-color: #e2e8f0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* Option B: soft mint-muted (brand family, not solid primary) */
|
|
|
|
|
+ .tag--opt-b {
|
|
|
|
|
+ background: #eef7f3;
|
|
|
|
|
+ color: #3d5c52;
|
|
|
|
|
+ border-color: #d5e8df;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* Option C: outline / plain neutral */
|
|
|
|
|
+ .tag--opt-c {
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ color: #5b6f67;
|
|
|
|
|
+ border-color: #c5d4cd;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* Option D: barley soft (warm pending, distinct from warning orange fill) */
|
|
|
|
|
+ .tag--opt-d {
|
|
|
|
|
+ background: var(--barley-soft);
|
|
|
|
|
+ color: #9a7020;
|
|
|
|
|
+ border-color: #f0e0b8;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .options {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ @media (min-width: 720px) {
|
|
|
|
|
+ .options { grid-template-columns: 1fr 1fr; }
|
|
|
|
|
+ }
|
|
|
|
|
+ .option {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ border: 2px solid var(--border);
|
|
|
|
|
+ border-radius: 16px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ padding: 14px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ transition: border-color .15s, box-shadow .15s;
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ font: inherit;
|
|
|
|
|
+ color: inherit;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ .option:hover { border-color: #b7d4c8; }
|
|
|
|
|
+ .option.is-selected {
|
|
|
|
|
+ border-color: var(--brand);
|
|
|
|
|
+ box-shadow: 0 0 0 3px var(--brand-soft);
|
|
|
|
|
+ }
|
|
|
|
|
+ .option .opt-title {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .option .opt-title span {
|
|
|
|
|
+ font-size: 11px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: var(--brand-dark);
|
|
|
|
|
+ background: var(--brand-soft);
|
|
|
|
|
+ padding: 2px 8px;
|
|
|
|
|
+ border-radius: 999px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .option .opt-desc {
|
|
|
|
|
+ margin: 8px 0 0;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ }
|
|
|
|
|
+ .compare-existing {
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+ padding-top: 10px;
|
|
|
|
|
+ border-top: 1px dashed var(--border);
|
|
|
|
|
+ }
|
|
|
|
|
+ .compare-existing .label {
|
|
|
|
|
+ font-size: 11px;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .web-admin {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ @media (min-width: 720px) {
|
|
|
|
|
+ .web-admin { grid-template-columns: 1fr 1fr; }
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-tag {
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 24px;
|
|
|
|
|
+ padding: 0 9px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ border: 1px solid transparent;
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-tag--info {
|
|
|
|
|
+ background: #f4f4f5;
|
|
|
|
|
+ border-color: #e9e9eb;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-tag--success {
|
|
|
|
|
+ background: #f0f9eb;
|
|
|
|
|
+ border-color: #e1f3d8;
|
|
|
|
|
+ color: #67c23a;
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-tag--warning {
|
|
|
|
|
+ background: #fdf6ec;
|
|
|
|
|
+ border-color: #faecd8;
|
|
|
|
|
+ color: #e6a23c;
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-tag--primary {
|
|
|
|
|
+ background: #ecf5ff;
|
|
|
|
|
+ border-color: #d9ecff;
|
|
|
|
|
+ color: #409eff;
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-tag--danger {
|
|
|
|
|
+ background: #fef0f0;
|
|
|
|
|
+ border-color: #fde2e2;
|
|
|
|
|
+ color: #f56c6c;
|
|
|
|
|
+ }
|
|
|
|
|
+ .pick-bar {
|
|
|
|
|
+ position: sticky;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ margin: 28px -16px -24px;
|
|
|
|
|
+ padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
|
|
|
|
|
+ background: rgba(255,255,255,.92);
|
|
|
|
|
+ backdrop-filter: blur(8px);
|
|
|
|
|
+ border-top: 1px solid var(--border);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .pick-bar b { color: var(--brand-dark); }
|
|
|
|
|
+ .pick-bar button {
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ border-radius: 999px;
|
|
|
|
|
+ padding: 8px 16px;
|
|
|
|
|
+ background: var(--brand);
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+ .pick-bar button:disabled {
|
|
|
|
|
+ opacity: .45;
|
|
|
|
|
+ cursor: not-allowed;
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
|
|
+</head>
|
|
|
|
|
+<body>
|
|
|
|
|
+ <div class="wrap">
|
|
|
|
|
+ <h1>市场部 · 中性 Tag 样式对比</h1>
|
|
|
|
|
+ <p class="lead">
|
|
|
|
|
+ 上一版把 Element Plus 的 <code>info</code> 映射成了 Vant <code>default</code>(灰底白字),可读但偏「硬」。
|
|
|
|
|
+ 请点选一种<strong>中性态</strong>样式;实心绿 / 橙 / 红等已有语义色保持不变。
|
|
|
|
|
+ </p>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="note">
|
|
|
|
|
+ <strong>web-admin「存储服务」说明:</strong>
|
|
|
|
|
+ Element Plus 默认 <code>el-tag type="info"</code> 是<strong>浅灰底 + 灰字</strong>(light),
|
|
|
|
|
+ <strong>不是</strong>灰底白字,也<strong>不是</strong>无底白字。
|
|
|
|
|
+ 存储服务里大量「待缴费 / 待生效 / 草稿」走 <code>info</code>,视觉接近下方「Web 对照」区。
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <section class="section">
|
|
|
|
|
+ <h2>现状问题 <span class="pill">Vant default</span></h2>
|
|
|
|
|
+ <div class="card">
|
|
|
|
|
+ <div class="card-head">
|
|
|
|
|
+ <span class="idx">1</span>
|
|
|
|
|
+ <span class="id-block">
|
|
|
|
|
+ <strong>欧阳妮妮</strong>
|
|
|
|
|
+ <small>ZKZX34000194</small>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span class="tag tag--current-default">待缴费</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row-tags">
|
|
|
|
|
+ <span class="tag tag--current-default">待缴费</span>
|
|
|
|
|
+ <span class="tag tag--current-default">待生效</span>
|
|
|
|
|
+ <span class="tag tag--current-default">草稿</span>
|
|
|
|
|
+ <span class="tag tag--primary">部分已缴</span>
|
|
|
|
|
+ <span class="tag tag--success">已缴清</span>
|
|
|
|
|
+ <span class="tag tag--warning">催缴中</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p class="hint">灰底白字对比度高,但和「语义实心色」挤在一起时显得脏、抢戏。</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </section>
|
|
|
|
|
+
|
|
|
|
|
+ <section class="section">
|
|
|
|
|
+ <h2>方案选择 <span class="pill">点一张卡片</span></h2>
|
|
|
|
|
+ <div class="options" id="options">
|
|
|
|
|
+ <button type="button" class="option" data-choice="A" data-label="浅灰底深灰字">
|
|
|
|
|
+ <div class="opt-title">方案 A · 浅灰底深灰字 <span>推荐贴近 Web</span></div>
|
|
|
|
|
+ <div class="row-tags">
|
|
|
|
|
+ <span class="tag tag--opt-a">待缴费</span>
|
|
|
|
|
+ <span class="tag tag--opt-a">待生效</span>
|
|
|
|
|
+ <span class="tag tag--opt-a">草稿</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="compare-existing">
|
|
|
|
|
+ <div class="label">同屏已有语义色(不变)</div>
|
|
|
|
|
+ <div class="row-tags">
|
|
|
|
|
+ <span class="tag tag--primary">部分已缴</span>
|
|
|
|
|
+ <span class="tag tag--success">已缴清</span>
|
|
|
|
|
+ <span class="tag tag--warning">催缴中</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p class="opt-desc">接近 Element Plus info light;中性、不抢绿/橙实心标。</p>
|
|
|
|
|
+ </button>
|
|
|
|
|
+
|
|
|
|
|
+ <button type="button" class="option" data-choice="B" data-label="薄荷绿灰底深字">
|
|
|
|
|
+ <div class="opt-title">方案 B · 薄荷绿灰底深字 <span>品牌系</span></div>
|
|
|
|
|
+ <div class="row-tags">
|
|
|
|
|
+ <span class="tag tag--opt-b">待缴费</span>
|
|
|
|
|
+ <span class="tag tag--opt-b">待生效</span>
|
|
|
|
|
+ <span class="tag tag--opt-b">草稿</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="compare-existing">
|
|
|
|
|
+ <div class="label">同屏已有语义色(不变)</div>
|
|
|
|
|
+ <div class="row-tags">
|
|
|
|
|
+ <span class="tag tag--primary">部分已缴</span>
|
|
|
|
|
+ <span class="tag tag--success">已缴清</span>
|
|
|
|
|
+ <span class="tag tag--warning">催缴中</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p class="opt-desc">偏三墙绿氛围,但仍是浅底深字,和实心 primary 区分明显。</p>
|
|
|
|
|
+ </button>
|
|
|
|
|
+
|
|
|
|
|
+ <button type="button" class="option" data-choice="C" data-label="描边中性">
|
|
|
|
|
+ <div class="opt-title">方案 C · 描边中性 <span>最轻</span></div>
|
|
|
|
|
+ <div class="row-tags">
|
|
|
|
|
+ <span class="tag tag--opt-c">待缴费</span>
|
|
|
|
|
+ <span class="tag tag--opt-c">待生效</span>
|
|
|
|
|
+ <span class="tag tag--opt-c">草稿</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="compare-existing">
|
|
|
|
|
+ <div class="label">同屏已有语义色(不变)</div>
|
|
|
|
|
+ <div class="row-tags">
|
|
|
|
|
+ <span class="tag tag--primary">部分已缴</span>
|
|
|
|
|
+ <span class="tag tag--success">已缴清</span>
|
|
|
|
|
+ <span class="tag tag--warning">催缴中</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p class="opt-desc">无填充描边;层级最低,适合「未开始」态,但在密集列表里可能偏淡。</p>
|
|
|
|
|
+ </button>
|
|
|
|
|
+
|
|
|
|
|
+ <button type="button" class="option is-selected" data-choice="D" data-label="大麦黄浅底">
|
|
|
|
|
+ <div class="opt-title">方案 D · 大麦黄浅底 <span>已采纳</span></div>
|
|
|
|
|
+ <div class="row-tags">
|
|
|
|
|
+ <span class="tag tag--opt-d">待缴费</span>
|
|
|
|
|
+ <span class="tag tag--opt-d">待生效</span>
|
|
|
|
|
+ <span class="tag tag--opt-d">草稿</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="compare-existing">
|
|
|
|
|
+ <div class="label">同屏已有语义色(不变)</div>
|
|
|
|
|
+ <div class="row-tags">
|
|
|
|
|
+ <span class="tag tag--primary">部分已缴</span>
|
|
|
|
|
+ <span class="tag tag--success">已缴清</span>
|
|
|
|
|
+ <span class="tag tag--warning">催缴中</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p class="opt-desc">用三墙大麦黄浅底表达「待处理」;需与 warning 实心橙区分(浅底 vs 实心)。</p>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </section>
|
|
|
|
|
+
|
|
|
|
|
+ <section class="section">
|
|
|
|
|
+ <h2>Web 对照 <span class="pill">Element Plus info</span></h2>
|
|
|
|
|
+ <div class="web-admin">
|
|
|
|
|
+ <div class="card">
|
|
|
|
|
+ <div class="label" style="font-size:12px;color:var(--muted);margin-bottom:8px">存储服务常见 info(浅底深/灰字)</div>
|
|
|
|
|
+ <div class="row-tags">
|
|
|
|
|
+ <span class="el-tag el-tag--info">待缴费</span>
|
|
|
|
|
+ <span class="el-tag el-tag--info">待生效</span>
|
|
|
|
|
+ <span class="el-tag el-tag--info">草稿</span>
|
|
|
|
|
+ <span class="el-tag el-tag--success">已缴清</span>
|
|
|
|
|
+ <span class="el-tag el-tag--warning">部分已缴</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p class="hint">无「无底白字」问题;默认也不是灰底白字。</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card">
|
|
|
|
|
+ <div class="label" style="font-size:12px;color:var(--muted);margin-bottom:8px">若选方案 A,移动端中性态将更接近 Web</div>
|
|
|
|
|
+ <div class="row-tags">
|
|
|
|
|
+ <span class="tag tag--opt-a">待缴费</span>
|
|
|
|
|
+ <span class="el-tag el-tag--info">待缴费</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p class="hint">左:移动方案 A · 右:Web info light(圆角规范不同,色感接近)</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </section>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="pick-bar">
|
|
|
|
|
+ <div>已选:<b id="picked">未选择</b></div>
|
|
|
|
|
+ <button type="button" id="confirm" disabled>确认此方案</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+ const options = document.getElementById('options')
|
|
|
|
|
+ const picked = document.getElementById('picked')
|
|
|
|
|
+ const confirmBtn = document.getElementById('confirm')
|
|
|
|
|
+ let current = null
|
|
|
|
|
+
|
|
|
|
|
+ options.addEventListener('click', (e) => {
|
|
|
|
|
+ const btn = e.target.closest('.option')
|
|
|
|
|
+ if (!btn) return
|
|
|
|
|
+ options.querySelectorAll('.option').forEach((el) => el.classList.remove('is-selected'))
|
|
|
|
|
+ btn.classList.add('is-selected')
|
|
|
|
|
+ current = { choice: btn.dataset.choice, label: btn.dataset.label }
|
|
|
|
|
+ picked.textContent = '方案 ' + current.choice + ' · ' + current.label
|
|
|
|
|
+ confirmBtn.disabled = false
|
|
|
|
|
+ if (window.parent !== window) {
|
|
|
|
|
+ window.parent.postMessage({ type: 'brainstorm-select', choice: current.choice, label: current.label }, '*')
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ confirmBtn.addEventListener('click', () => {
|
|
|
|
|
+ if (!current) return
|
|
|
|
|
+ alert('已记录偏好:方案 ' + current.choice + '(' + current.label + ')。请回到对话告诉助手你的选择。')
|
|
|
|
|
+ })
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|