init
This commit is contained in:
@@ -0,0 +1,64 @@
|
||||
# Stitch Screen → Route 映射（4端1.0版本）
|
||||
|
||||
> 项目 ID: `9513024892894556686` | 同步命令: `pnpm sync:stitch`
|
||||
|
||||
**状态说明：** `done` = 路由与 API 已打通；`ui-aligned` = 已对照 Stitch 原型完成页面级 UI 对齐（preV1 Mock 逻辑保留）。
|
||||
|
||||
## C 端 h5-user
|
||||
|
||||
| 优先级 | Stitch 标题 | screenId | Route | 原型目录 | 状态 |
|
||||
|--------|-------------|----------|-------|----------|------|
|
||||
| P0 | 用户登录页 - C端小程序 | ef33d5a4 | `/login` | user/08_* | done |
|
||||
| P0 | 小程序首页 - 大图商品布局优化 | 6299c14c | `/` | user/28_* | done |
|
||||
| P0 | 商品详情页 | 335c3649 | `/product/:id` | user/12_* | done |
|
||||
| P0 | 确认订单页 - 物流到付版 | 367f698c | `/order/confirm` | user/30_* | done |
|
||||
| P0 | 确认订单页 - 增加跨城物流提醒版 | 6012cab3 | `/order/confirm?cross=1` | user/36_* | done |
|
||||
| P1 | 地址管理列表页 | 69704ee5 | `/addresses` | user/34_* | done |
|
||||
| P1 | 新增地址页面 | d74560d0 | `/addresses/new` | user/32_* | done |
|
||||
| P1 | 我的订单 - 增加补发订单示例 | 132b9ad9 | `/orders` | user/10_* | done |
|
||||
| P1 | 订单详情页 - 支持修改地址版 | 96ee308a | `/orders/:id` | user/40_* | done |
|
||||
| P1 | 订单详情页 - 修改地址确认弹窗 | 0d6b680b | `/orders/:id` (modal) | user/16_* | done |
|
||||
| P1 | 好客权益专页 | 8bda47b8 | `/benefit` | user/02_* | done |
|
||||
| P1 | 好客权益明细页 | 03d85af3 | `/benefit/:id` | user/24_* | done |
|
||||
| P1 | 可用门店列表页 | ffa51fc9 | `/stores` | user/04_* | done |
|
||||
| P1 | 门店详情页 | f8ac6726 | `/stores/:id` | user/22_* | done |
|
||||
| P1 | 餐券核销页 | 5c456aac | `/redeem` | user/14_* | done |
|
||||
| P1 | 餐券核销码页面 | ccfa6298 | `/redeem/code` | user/38_* | done |
|
||||
| P1 | 我的 - 个人中心页 | 70b6f422 | `/mine` | user/18_* | done |
|
||||
| P2 | 微信支付页 | e72f2cf2 | `/pay` | user/26_* | done |
|
||||
| P2 | 定位授权页面 | c5555bc4 | modal | user/06_* | done |
|
||||
| P2 | 订单详情页 - 联系客服弹窗 | d1087155 | `/orders/:id` (modal) | user/20_* | done |
|
||||
|
||||
## 门店 h5-shop
|
||||
|
||||
| 优先级 | Stitch 标题 | screenId | Route | 原型目录 | 状态 |
|
||||
|--------|-------------|----------|-------|----------|------|
|
||||
| P0 | 门店管理登录页 | de65a660 | `/login` | shop/02_* | ui-aligned |
|
||||
| P0 | 门店管理一键登录页 | e76dbb7f | `/login?quick=1` | shop/14_* | ui-aligned |
|
||||
| P0 | 门店管理首页 | 4a4f4a21 | `/` | shop/12_* | ui-aligned |
|
||||
| P0 | 门店核销确认页 (S-01) | 2b153959 | `/redeem` | shop/08_* | ui-aligned |
|
||||
| P1 | 门店核销记录页 (S-02) | 493d65d2 | `/records` | shop/10_* | ui-aligned |
|
||||
| P1 | 门店营业状态页 (S-03) | 329eb254 | `/status` | shop/04_* | ui-aligned |
|
||||
| P1 | 门店核销成功页 | 1af6b007 | `/redeem/success` | shop/06_* | ui-aligned |
|
||||
| P1 | 我的（S-03 Tab 样式） | — | `/mine` | shop/04_* | ui-aligned |
|
||||
|
||||
## 合伙人 h5-partner
|
||||
|
||||
| 优先级 | Stitch 标题 | screenId | Route | 原型目录 | 状态 |
|
||||
|--------|-------------|----------|-------|----------|------|
|
||||
| P0 | 城市合伙人登录页 | e7968455 | `/login` | partner/10_* | ui-aligned |
|
||||
| P0 | 城市合伙人快捷登录页 | f6395fc9 | `/login?quick=1` | partner/02_* | ui-aligned |
|
||||
| P0 | 合伙人工作台首页 | 9564734e | `/` | partner/22_* | ui-aligned |
|
||||
| P0 | 录入新门店 - 基本信息 | a996d705 | `/stores/new?step=1` | partner/16_* | ui-aligned |
|
||||
| P0 | 录入新门店 - 照片上传 | feae43dc | `/stores/new?step=2` | partner/12_* | ui-aligned |
|
||||
| P0 | 录入新门店 - 结算资质 | 5f7a87a5 | `/stores/new?step=3` | partner/08_* | ui-aligned |
|
||||
| P1 | 合伙人门店管理页 | 6899aa96 | `/stores` | partner/06_* | ui-aligned |
|
||||
| P1 | 门店详情编辑页 | dd6ecea7 | `/stores/:id` | user/42_* | ui-aligned |
|
||||
| P1 | 合伙人订单中心页 | b7c630ed | `/orders` | partner/20_* | ui-aligned |
|
||||
| P1 | 城市合伙人订单详情页 | 423aac86 | `/orders/:id` | partner/18_* | ui-aligned |
|
||||
| P1 | 合伙人中心 | c31c874b | `/center` | partner/04_* | ui-aligned |
|
||||
| P1 | 合伙人待确认账单页 | f9b208b8 | `/center/bills` | partner/14_* | ui-aligned |
|
||||
|
||||
## 跳过（preV1 / HQ）
|
||||
|
||||
总部端、推广码、拦截配送、开城管理等 40 个 screen 已归档至 `pages/_archive/`。
|
||||
@@ -0,0 +1,688 @@
|
||||
{
|
||||
"projectId": "9513024892894556686",
|
||||
"projectTitle": "4端1.0版本",
|
||||
"syncedAt": "2026-06-29T08:06:19.313Z",
|
||||
"screens": [
|
||||
{
|
||||
"screenId": "f9b208b809034ac0b4ef718c95caa61b",
|
||||
"title": "合伙人待确认账单页",
|
||||
"category": "partner",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\partner\\02_合伙人待确认账单页_f9b208b8"
|
||||
},
|
||||
{
|
||||
"screenId": "261c69bbc5264d40841d03484d745915",
|
||||
"title": "新增开城页面",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\新增开城页面_261c69bb"
|
||||
},
|
||||
{
|
||||
"screenId": "1af6b0074ec948edbe5b15ddf442c1ad",
|
||||
"title": "门店核销成功页 - 增加用户信息展示",
|
||||
"category": "shop",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\shop\\02_门店核销成功页_增加用户信息展示_1af6b007"
|
||||
},
|
||||
{
|
||||
"screenId": "5b8faa3bdad645edb55e1218db35db82",
|
||||
"title": "申请打款页面",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\申请打款页面_5b8faa3b"
|
||||
},
|
||||
{
|
||||
"screenId": "1aa9156b780948b7804ef4c497f74202",
|
||||
"title": "订单售后详情 - 补发与退款操作",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\订单售后详情_补发与退款操作_1aa9156b"
|
||||
},
|
||||
{
|
||||
"screenId": "9894492aecd046e08defa8d3cba34060",
|
||||
"title": "数据报表中心",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\数据报表中心_9894492a"
|
||||
},
|
||||
{
|
||||
"screenId": "03d85af3bdd140df869b3a3c72b3c7c3",
|
||||
"title": "好客权益明细页",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\02_好客权益明细页_03d85af3"
|
||||
},
|
||||
{
|
||||
"screenId": "ccfa6298eba7462ea2d6b52c1d61d602",
|
||||
"title": "餐券核销码页面",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\04_餐券核销码页面_ccfa6298"
|
||||
},
|
||||
{
|
||||
"screenId": "5b02000ac24748ac8e992f7812230afc",
|
||||
"title": "补发处理页面",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\补发处理页面_5b02000a"
|
||||
},
|
||||
{
|
||||
"screenId": "f6395fc9de6848adbf9109344a064865",
|
||||
"title": "城市合伙人快捷登录页",
|
||||
"category": "partner",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\partner\\04_城市合伙人快捷登录页_f6395fc9"
|
||||
},
|
||||
{
|
||||
"screenId": "329eb2540f4240bebb3a1c281db020b7",
|
||||
"title": "门店营业状态页 (S-03)",
|
||||
"category": "shop",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\shop\\04_门店营业状态页_S_03_329eb254"
|
||||
},
|
||||
{
|
||||
"screenId": "4a4f4a2140b3476c999530d1a7ed288d",
|
||||
"title": "门店管理首页",
|
||||
"category": "shop",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\shop\\06_门店管理首页_4a4f4a21"
|
||||
},
|
||||
{
|
||||
"screenId": "70b6f4222d2d4331a7cdf3e185a4c961",
|
||||
"title": "我的 - 个人中心页",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\06_我的_个人中心页_70b6f422"
|
||||
},
|
||||
{
|
||||
"screenId": "b7c630ed3ae4434a98d9fceaf30574da",
|
||||
"title": "合伙人订单中心页 - 增加待发货与异常示例",
|
||||
"category": "partner",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\partner\\06_合伙人订单中心页_增加待发货与异常示例_b7c630ed"
|
||||
},
|
||||
{
|
||||
"screenId": "638f3386b937437dbf88157a890cf8e9",
|
||||
"title": "生成推广码页 - 拆分下单与核销佣金",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\生成推广码页_拆分下单与核销佣金_638f3386"
|
||||
},
|
||||
{
|
||||
"screenId": "132b9ad9f7be472f9e6c8956c18b15b3",
|
||||
"title": "我的订单 - 增加补发订单示例",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\08_我的订单_增加补发订单示例_132b9ad9"
|
||||
},
|
||||
{
|
||||
"screenId": "dd6ecea758ca4597bdf8260e1bf01411",
|
||||
"title": "门店详情编辑页",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\10_门店详情编辑页_dd6ecea7"
|
||||
},
|
||||
{
|
||||
"screenId": "e72f2cf24af34e2bb29ae2e753bb57a1",
|
||||
"title": "微信支付页",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\12_微信支付页_e72f2cf2"
|
||||
},
|
||||
{
|
||||
"screenId": "033db7f78d8149668551673ad78c1886",
|
||||
"title": "商品管理页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\商品管理页_033db7f7"
|
||||
},
|
||||
{
|
||||
"screenId": "feae43dcbe1e4e388c0490bbab9bd2a3",
|
||||
"title": "录入新门店 - 照片上传",
|
||||
"category": "partner",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\partner\\08_录入新门店_照片上传_feae43dc"
|
||||
},
|
||||
{
|
||||
"screenId": "8bda47b8349443afb19d5b22251e4b21",
|
||||
"title": "好客权益专页",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\14_好客权益专页_8bda47b8"
|
||||
},
|
||||
{
|
||||
"screenId": "efe0608f7b1f4f19a865f53558629381",
|
||||
"title": "补发订单详情页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\补发订单详情页_efe0608f"
|
||||
},
|
||||
{
|
||||
"screenId": "423aac8633d04e59b007a8c397ace9ae",
|
||||
"title": "城市合伙人订单详情页",
|
||||
"category": "partner",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\partner\\10_城市合伙人订单详情页_423aac86"
|
||||
},
|
||||
{
|
||||
"screenId": "c5555bc49c5b43b1be6a285f9cc6968b",
|
||||
"title": "定位授权页面 - 中文版",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\16_定位授权页面_中文版_c5555bc4"
|
||||
},
|
||||
{
|
||||
"screenId": "6012cab3676744ea8fdb65f14c24d87e",
|
||||
"title": "确认订单页 - 增加跨城物流提醒版",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\18_确认订单页_增加跨城物流提醒版_6012cab3"
|
||||
},
|
||||
{
|
||||
"screenId": "6899aa96b0f24c95ba28f8a9186b23a0",
|
||||
"title": "合伙人门店管理页 - 增加搜索筛选",
|
||||
"category": "partner",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\partner\\12_合伙人门店管理页_增加搜索筛选_6899aa96"
|
||||
},
|
||||
{
|
||||
"screenId": "9619e8e055324013b36f7d56753e25fc",
|
||||
"title": "总部管理一键登录页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\总部管理一键登录页_9619e8e0"
|
||||
},
|
||||
{
|
||||
"screenId": "69704ee5a1a04b3780a67f062e3b2378",
|
||||
"title": "地址管理列表页",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\20_地址管理列表页_69704ee5"
|
||||
},
|
||||
{
|
||||
"screenId": "9383549f868043e0a228113645600904",
|
||||
"title": "数据周报页 - 中文版",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\数据周报页_中文版_9383549f"
|
||||
},
|
||||
{
|
||||
"screenId": "b75598101d2c4f0296f1850286c8066d",
|
||||
"title": "财务结算中心 - 流程闭环版",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\财务结算中心_流程闭环版_b7559810"
|
||||
},
|
||||
{
|
||||
"screenId": "5b60e6fd6c814d7d91b25607da834789",
|
||||
"title": "账单明细详情页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\账单明细详情页_5b60e6fd"
|
||||
},
|
||||
{
|
||||
"screenId": "13054560783375411680",
|
||||
"title": "城市合伙人端_需求清单_v2.md",
|
||||
"category": "asset",
|
||||
"route": null,
|
||||
"priority": "skip"
|
||||
},
|
||||
{
|
||||
"screenId": "16919681127871323699",
|
||||
"title": "总部管理端小程序_需求清单_v2.md",
|
||||
"category": "asset",
|
||||
"route": null,
|
||||
"priority": "skip"
|
||||
},
|
||||
{
|
||||
"screenId": "5d018bfe482f4fd6a95f09bd4c09546b",
|
||||
"title": "门店审核记录页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\门店审核记录页_5d018bfe"
|
||||
},
|
||||
{
|
||||
"screenId": "d74560d0542b46ce99b716c291f9bdf2",
|
||||
"title": "新增地址页面",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\22_新增地址页面_d74560d0"
|
||||
},
|
||||
{
|
||||
"screenId": "97d0d532bc144d7eb87dcd483749e70f",
|
||||
"title": "杜康好客全案交付文档",
|
||||
"category": "asset",
|
||||
"route": null,
|
||||
"priority": "skip"
|
||||
},
|
||||
{
|
||||
"screenId": "e76dbb7fc2e547779f9329d0291401d6",
|
||||
"title": "门店管理一键登录页",
|
||||
"category": "shop",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\shop\\08_门店管理一键登录页_e76dbb7f"
|
||||
},
|
||||
{
|
||||
"screenId": "654a772bbc6a46b88ea5221a343b46da",
|
||||
"title": "在线客服对话页 - 补发处理示例",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\在线客服对话页_补发处理示例_654a772b"
|
||||
},
|
||||
{
|
||||
"screenId": "112c139b13ae4e7ab6eda8ffadc8b710",
|
||||
"title": "开城管理页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\开城管理页_112c139b"
|
||||
},
|
||||
{
|
||||
"screenId": "969c535a5dd94df4990e26536f3c0f1d",
|
||||
"title": "推广码管理页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\推广码管理页_969c535a"
|
||||
},
|
||||
{
|
||||
"screenId": "6741142bb6e347019cdc1485e90c46cc",
|
||||
"title": "超时订单详情页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\超时订单详情页_6741142b"
|
||||
},
|
||||
{
|
||||
"screenId": "a5321255c0b441a7beb94a17b347a9e7",
|
||||
"title": "补发订单详情页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\补发订单详情页_a5321255"
|
||||
},
|
||||
{
|
||||
"screenId": "e79684551802423ab570ced4a425f01a",
|
||||
"title": "城市合伙人登录页",
|
||||
"category": "partner",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\partner\\14_城市合伙人登录页_e7968455"
|
||||
},
|
||||
{
|
||||
"screenId": "24a0d6e7798c414ab62a239a6c1afef1",
|
||||
"title": "总部客服中心 - 增加跨城订单处理版",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\总部客服中心_增加跨城订单处理版_24a0d6e7"
|
||||
},
|
||||
{
|
||||
"screenId": "14917765624789278959",
|
||||
"title": "C端小程序_需求清单_v2.md",
|
||||
"category": "asset",
|
||||
"route": null,
|
||||
"priority": "skip"
|
||||
},
|
||||
{
|
||||
"screenId": "5a6520521e3d42bb97452df868a21b06",
|
||||
"title": "添加子账号页面",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\添加子账号页面_5a652052"
|
||||
},
|
||||
{
|
||||
"screenId": "6299c14c8f5b4a0d89b454a09904e8b9",
|
||||
"title": "小程序首页 - 大图商品布局优化",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\24_小程序首页_大图商品布局优化_6299c14c"
|
||||
},
|
||||
{
|
||||
"screenId": "9564734e32dc4c699445f15272c37fd6",
|
||||
"title": "合伙人工作台首页",
|
||||
"category": "partner",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\partner\\16_合伙人工作台首页_9564734e"
|
||||
},
|
||||
{
|
||||
"screenId": "96b05c12a2a147798aa4f51ebed691ad",
|
||||
"title": "合同管理页面",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\合同管理页面_96b05c12"
|
||||
},
|
||||
{
|
||||
"screenId": "dec464d9bd01425ba2766a873421bb86",
|
||||
"title": "跨城发货处理页 - 中文版",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\跨城发货处理页_中文版_dec464d9"
|
||||
},
|
||||
{
|
||||
"screenId": "367f698cf121427da9b0d044142e3414",
|
||||
"title": "确认订单页 - 物流到付版",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\26_确认订单页_物流到付版_367f698c"
|
||||
},
|
||||
{
|
||||
"screenId": "ffa51fc9808445a0aaaa07a9b0b523ce",
|
||||
"title": "可用门店列表页",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\28_可用门店列表页_ffa51fc9"
|
||||
},
|
||||
{
|
||||
"screenId": "5c456aac9410425dbccefb4c9ed25c4e",
|
||||
"title": "餐券核销页",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\30_餐券核销页_5c456aac"
|
||||
},
|
||||
{
|
||||
"screenId": "ef33d5a498ab47f686116432fb07da62",
|
||||
"title": "用户登录页 - C端小程序",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\32_用户登录页_C端小程序_ef33d5a4"
|
||||
},
|
||||
{
|
||||
"screenId": "04a705926c964842b548918017410551",
|
||||
"title": "推广码详情页 - 佣金明细拆分版",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\推广码详情页_佣金明细拆分版_04a70592"
|
||||
},
|
||||
{
|
||||
"screenId": "abae8110b2aa413e905bc07fe3a74866",
|
||||
"title": "我的员工页面",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\我的员工页面_abae8110"
|
||||
},
|
||||
{
|
||||
"screenId": "90bedbd5b2db46e3a01ad84621905b5b",
|
||||
"title": "总部端订单详情 - 全量信息版",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\总部端订单详情_全量信息版_90bedbd5"
|
||||
},
|
||||
{
|
||||
"screenId": "d1087155dd374372b389e7e84d74e15a",
|
||||
"title": "订单详情页 - 联系客服弹窗效果",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\34_订单详情页_联系客服弹窗效果_d1087155"
|
||||
},
|
||||
{
|
||||
"screenId": "3e226e0ce1b4453582e0867bbe8a94e5",
|
||||
"title": "编辑城市页面 - 完善开户行与附件上传",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\编辑城市页面_完善开户行与附件上传_3e226e0c"
|
||||
},
|
||||
{
|
||||
"screenId": "13768084892776257316",
|
||||
"title": "logo.png",
|
||||
"category": "asset",
|
||||
"route": null,
|
||||
"priority": "skip"
|
||||
},
|
||||
{
|
||||
"screenId": "a996d705b1fa468aa3f3a176f02ca2c9",
|
||||
"title": "录入新门店 - 基本信息",
|
||||
"category": "partner",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\partner\\18_录入新门店_基本信息_a996d705"
|
||||
},
|
||||
{
|
||||
"screenId": "eb7a5bdb021940ddb9e591ebc1adb5b2",
|
||||
"title": "子账号管理页面",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\子账号管理页面_eb7a5bdb"
|
||||
},
|
||||
{
|
||||
"screenId": "0b837b08ca3c483e9b12619980a73fb3",
|
||||
"title": "城市参数配置页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\城市参数配置页_0b837b08"
|
||||
},
|
||||
{
|
||||
"screenId": "a8b599d7808541108a5d1b3604ada293",
|
||||
"title": "门店结算明细页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\门店结算明细页_a8b599d7"
|
||||
},
|
||||
{
|
||||
"screenId": "493d65d221044751b2c9167d2af85c3d",
|
||||
"title": "门店核销记录页 (S-02)",
|
||||
"category": "shop",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\shop\\10_门店核销记录页_S_02_493d65d2"
|
||||
},
|
||||
{
|
||||
"screenId": "c31c874b8c0f47a987846e18a2de8cbb",
|
||||
"title": "合伙人中心",
|
||||
"category": "partner",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\partner\\20_合伙人中心_c31c874b"
|
||||
},
|
||||
{
|
||||
"screenId": "61c36cf8a2e14f37998ba9d17d4f27db",
|
||||
"title": "订单中心 - 搜索交互页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\订单中心_搜索交互页_61c36cf8"
|
||||
},
|
||||
{
|
||||
"screenId": "335c364915bb472d97e0ce2e2e60e21c",
|
||||
"title": "商品详情页",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\36_商品详情页_335c3649"
|
||||
},
|
||||
{
|
||||
"screenId": "a8f37483fad045c8aa41410c0560ef5d",
|
||||
"title": "订单中心管理页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\订单中心管理页_a8f37483"
|
||||
},
|
||||
{
|
||||
"screenId": "31a271e5ec774198b70b72dcb8b9d1fa",
|
||||
"title": "添加商品页面",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\添加商品页面_31a271e5"
|
||||
},
|
||||
{
|
||||
"screenId": "b7920bec411a4b5baa8e1d47885e325b",
|
||||
"title": "门店审核管理页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\门店审核管理页_b7920bec"
|
||||
},
|
||||
{
|
||||
"screenId": "6079e1ff71714639ade8b5115125c502",
|
||||
"title": "总部管理中心首页 - 数据聚合与预警版",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\总部管理中心首页_数据聚合与预警版_6079e1ff"
|
||||
},
|
||||
{
|
||||
"screenId": "0e41c1b46ca147ecbe2a7382c19e4501",
|
||||
"title": "财务对账页 - 中文版",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\财务对账页_中文版_0e41c1b4"
|
||||
},
|
||||
{
|
||||
"screenId": "08e4841bf9e54c77bdc2afb33760b551",
|
||||
"title": "拦截配送管理页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\拦截配送管理页_08e4841b"
|
||||
},
|
||||
{
|
||||
"screenId": "de65a6601ab840908079d53a10c2fc50",
|
||||
"title": "门店管理登录页",
|
||||
"category": "shop",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\shop\\12_门店管理登录页_de65a660"
|
||||
},
|
||||
{
|
||||
"screenId": "2b153959031e473cb2c9965146766a86",
|
||||
"title": "门店核销确认页 (S-01)",
|
||||
"category": "shop",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\shop\\14_门店核销确认页_S_01_2b153959"
|
||||
},
|
||||
{
|
||||
"screenId": "0d6b680b635a4f3b8ef2f8c18cec463c",
|
||||
"title": "订单详情页 - 修改地址确认弹窗",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\38_订单详情页_修改地址确认弹窗_0d6b680b"
|
||||
},
|
||||
{
|
||||
"screenId": "6726243396069919766",
|
||||
"title": "门店端H5_需求清单_v2.md",
|
||||
"category": "asset",
|
||||
"route": null,
|
||||
"priority": "skip"
|
||||
},
|
||||
{
|
||||
"screenId": "4c5ea63ed3e249aba60aa6a777d6d82c",
|
||||
"title": "资产明细页面",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\资产明细页面_4c5ea63e"
|
||||
},
|
||||
{
|
||||
"screenId": "3277625eeb8f48b0b2bc416764978407",
|
||||
"title": "预警详情页 - 打款与配送超时预警",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\预警详情页_打款与配送超时预警_3277625e"
|
||||
},
|
||||
{
|
||||
"screenId": "4bf6ead659dd4581a7831e688e461581",
|
||||
"title": "合伙人贡献榜页面",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\合伙人贡献榜页面_4bf6ead6"
|
||||
},
|
||||
{
|
||||
"screenId": "5f7a87a55f8d40f4b5577eb5f291cb15",
|
||||
"title": "录入新门店 - 结算资质",
|
||||
"category": "partner",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\partner\\22_录入新门店_结算资质_5f7a87a5"
|
||||
},
|
||||
{
|
||||
"screenId": "711baaecef7c41b28a5793297027ea44",
|
||||
"title": "总部管理登录页",
|
||||
"category": "skip",
|
||||
"route": null,
|
||||
"priority": "skip",
|
||||
"dir": "pages\\_archive\\总部管理登录页_711baaec"
|
||||
},
|
||||
{
|
||||
"screenId": "f8ac6726b01d4bca9dd7b701a82f7b43",
|
||||
"title": "门店详情页",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\40_门店详情页_f8ac6726"
|
||||
},
|
||||
{
|
||||
"screenId": "13599438412710006731",
|
||||
"title": "全端_Stitch提示词_v2.md",
|
||||
"category": "asset",
|
||||
"route": null,
|
||||
"priority": "skip"
|
||||
},
|
||||
{
|
||||
"screenId": "96ee308a1e5e42d4894102ffa55608bd",
|
||||
"title": "订单详情页 - 支持修改地址版",
|
||||
"category": "user",
|
||||
"route": null,
|
||||
"priority": "P1",
|
||||
"dir": "pages\\user\\42_订单详情页_支持修改地址版_96ee308a"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,288 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>合伙人贡献榜 | Dukang Partner</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-container": "#efeeec",
|
||||
"tertiary": "#37413b",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"ink-black": "#1A1A1A",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"subtle-gray": "#999999",
|
||||
"background": "#faf9f7",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-error": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#b3272c",
|
||||
"outline": "#8d706e",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-container": "#a61d24",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-surface": "#1a1c1b",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"aged-amber": "#FFBF00",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"surface": "#faf9f7",
|
||||
"heritage-red": "#A61D24",
|
||||
"secondary": "#735c00",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-dim": "#dadad8",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"primary": "#820012",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-background": "#1a1c1b"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"gutter-card": "12px",
|
||||
"base": "8px",
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.notch-left {
|
||||
clip-path: circle(6px at 0 50%);
|
||||
}
|
||||
.notch-right {
|
||||
clip-path: circle(6px at 100% 50%);
|
||||
}
|
||||
.glass-effect {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
body {
|
||||
background-color: #FAF9F7;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface select-none overflow-x-hidden">
|
||||
<!-- TopAppBar -->
|
||||
<nav class="fixed top-0 left-0 w-full z-50 bg-surface dark:bg-surface-dim shadow-[0px_4px_20px_rgba(166,29,36,0.05)] h-16">
|
||||
<div class="flex items-center justify-between px-margin-page h-16 w-full max-w-screen-xl mx-auto">
|
||||
<button class="material-symbols-outlined text-heritage-red p-2 -ml-2 hover:bg-surface-container-low transition-colors rounded-full active:scale-95 duration-200">arrow_back</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile dark:text-inverse-on-surface">合伙人贡献榜</h1>
|
||||
<div class="w-10"></div> <!-- Spacer for symmetry -->
|
||||
</div>
|
||||
</nav>
|
||||
<main class="pt-20 pb-32 px-margin-page max-w-screen-xl mx-auto min-h-screen">
|
||||
<!-- FilterTabs -->
|
||||
<div class="flex gap-2 mb-stack-md overflow-x-auto no-scrollbar">
|
||||
<button class="px-6 py-2 rounded-full font-label-md text-label-md bg-heritage-red text-on-primary shadow-sm whitespace-nowrap">本月</button>
|
||||
<button class="px-6 py-2 rounded-full font-label-md text-label-md bg-surface-container-high text-on-surface-variant hover:bg-surface-variant transition-colors whitespace-nowrap">上月</button>
|
||||
<button class="px-6 py-2 rounded-full font-label-md text-label-md bg-surface-container-high text-on-surface-variant hover:bg-surface-variant transition-colors whitespace-nowrap">累计</button>
|
||||
</div>
|
||||
<!-- MyRankingCard -->
|
||||
<div class="relative bg-heritage-red rounded-xl p-5 mb-stack-lg shadow-[0px_4px_20px_rgba(166,29,36,0.15)] overflow-hidden">
|
||||
<!-- Background Accent -->
|
||||
<div class="absolute -right-10 -bottom-10 opacity-10">
|
||||
<span class="material-symbols-outlined text-[120px] text-white" style="font-variation-settings: 'FILL' 1;">stars</span>
|
||||
</div>
|
||||
<div class="relative z-10 flex items-center justify-between text-white">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<div class="w-14 h-14 rounded-full border-2 border-primary-fixed-dim overflow-hidden bg-surface-container">
|
||||
<img class="w-full h-full object-cover" data-alt="A professional studio portrait of a middle-aged Asian male executive wearing a dark business suit, smiling warmly. The lighting is soft and editorial, highlighting clear skin textures against a minimalist warm beige studio background. High-quality digital photography with a premium professional aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBWykjWYXJGGU8ic2Hjwjw6wwBo4qAkMWkrsTQ3EScv7LnH5QxAJ5YwAuLJapixkc0KeIxnGtssPhOViAX4SEJGuu3yarOLEJBTUEgNWv-EkApNtRV_AK5mpEEmjtyvHkD93Uq2RPVwMtgjZMVUOQ0TlZ4GDB7H1yXUFIVz1Lswa-WsfYuPBy0cyfW_cfdZSizN0cEiCK2Pb5ybfVHu75CFezd1Ya1GDj31FlI0nmDOgM_DII6Ek0Z8f63edQQj2Gok2EXG32hNjO8">
|
||||
</div>
|
||||
<div class="absolute -bottom-1 -right-1 bg-aged-amber text-on-secondary-fixed text-[10px] font-bold px-2 py-0.5 rounded-full border border-heritage-red">
|
||||
第 5 名
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-headline-md text-headline-md flex items-center gap-2">
|
||||
陈经理 (我)
|
||||
</div>
|
||||
<div class="text-white/80 font-label-md text-label-md">城市合伙人</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-white/10 flex justify-between relative z-10">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">store</span>
|
||||
<span class="font-label-md text-label-md">本月拓店: 8 间</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">trending_up</span>
|
||||
<span class="font-label-md text-label-md">击败 82% 合伙人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- LeaderboardList -->
|
||||
<div class="space-y-3">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-stack-sm px-1">实时排行</h2>
|
||||
<!-- Rank 1 -->
|
||||
<div class="flex items-center bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent hover:border-heritage-red/10 transition-all duration-300">
|
||||
<div class="flex items-center justify-center w-10">
|
||||
<div class="w-8 h-8 rounded-full bg-aged-amber flex items-center justify-center text-on-secondary-fixed font-bold shadow-sm">1</div>
|
||||
</div>
|
||||
<div class="ml-4 w-12 h-12 rounded-full overflow-hidden bg-surface-container flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="Close-up headshot of a professional Asian businessman with short groomed hair, wearing a clean white shirt. High-end lifestyle photography, clear natural light from a window creating soft highlights. Minimalist, premium office atmosphere background, high clarity and professional grade." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCwgB_cee5rPIIKvcH6z2Lr5nMzVDMGGnM_0E70dk0BnMvRcoQo16NCwyCve7r786vQ1vNuRd2upN5ycI4KCcOixjUcDaGn1J1-usbQHspy_eeg3cSxA5WpXBK-baNn1KZDTOeh9BVLIcHkv4ArWFsOXH2sK4o611rU3q93SXsvewv75j-vmOI68SvEXTPu_RJfZp3-s_lPQiloWIbp2mOxrDhM0UdLhQJigUz40KsPMDn84l5pRHCuFL4ZHVKNyObFNrdEuf8B-JU">
|
||||
</div>
|
||||
<div class="ml-4 flex-grow"><div class="flex items-center justify-between w-full"><div class="flex items-center gap-2"><span class="font-headline-md text-headline-md text-ink-black">陈经理</span><span class="bg-primary-container text-primary-fixed text-[10px] px-2 py-0.5 rounded-sm">内部员工</span></div><div class="text-subtle-gray font-label-md text-label-md text-right">拓店: 12 间</div></div></div>
|
||||
<div class="text-right">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rank 2 -->
|
||||
<div class="flex items-center bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent">
|
||||
<div class="flex items-center justify-center w-10">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 font-bold shadow-sm">2</div>
|
||||
</div>
|
||||
<div class="ml-4 w-12 h-12 rounded-full overflow-hidden bg-surface-container flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="A portrait of an elegant professional woman in her 30s, Asian descent, with styled hair and professional attire. Soft warm studio lighting reflecting off a subtle gold background. High-quality corporate photography, sophisticated and confident expression, pristine detail." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDH-OokzwSiRBmVP0etFqsw6RSpLrIy5f32aKCJg1_OdQEAZWtBurS9lnZXd-Fsz29I4z9rptbKlJP4hOlBr_n5dAs735NWfpBH17keZx98QUkC--UnuifFNzqh1ukxX_h6bk5vyVupLJh2Qw_EtRb02VJzaOWNhprhUKekWkUsm0eNV858h7lSL_20YjGez0H4-4efR1EJK3kU7ST756MZbKsGmtIzORllM2V6MdZqexaHhBvg9jk11dem3x06FXyvPf834V92L8w">
|
||||
</div>
|
||||
<div class="ml-4 flex-grow"><div class="flex items-center justify-between w-full"><div class="flex items-center gap-2"><span class="font-headline-md text-headline-md text-ink-black">李华</span><span class="bg-secondary-container text-on-secondary-container text-[10px] px-2 py-0.5 rounded-sm">城市合伙人</span></div><div class="text-subtle-gray font-label-md text-label-md text-right">拓店: 10 间</div></div></div>
|
||||
<div class="text-right">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rank 3 -->
|
||||
<div class="flex items-center bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent">
|
||||
<div class="flex items-center justify-center w-10">
|
||||
<div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center text-orange-700 font-bold shadow-sm">3</div>
|
||||
</div>
|
||||
<div class="ml-4 w-12 h-12 rounded-full overflow-hidden bg-surface-container flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="Portrait of a friendly looking Asian man in smart casual clothing, creative professional look. Bright, high-key lighting in a modern interior setting with blurred plants in the background. Minimalist and fresh aesthetic, vibrant colors with a soft film grain texture." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCu2mT0vp5dUGDjI9P3X3hh7Uit_C8OYt9K-AH8w6l_RSTPPbsaMJVFKD4KRb9niR3PDGp4bxzmqjTu-BjCFTxG4aYxPLvQW0cE26kQ7RE8C6CMnsF6WTy3gzPLlAR-mnOZH5RQFAVzYYLUWe-9Ye-sWs9RTFJVg7D102BkLWMFaYApO3KLikAGichVqBk-u36NLK5OuYUbkMOFF112bI6MRtfVM5UHKi5LpkihNagKPRbtxvFqtOq2MIsaTWRbcdb3FTv2cXsHnUo">
|
||||
</div>
|
||||
<div class="ml-4 flex-grow"><div class="flex items-center justify-between w-full"><div class="flex items-center gap-2"><span class="font-headline-md text-headline-md text-ink-black">张伟</span><span class="bg-primary-container text-primary-fixed text-[10px] px-2 py-0.5 rounded-sm">内部员工</span></div><div class="text-subtle-gray font-label-md text-label-md text-right">拓店: 9 间</div></div></div>
|
||||
<div class="text-right">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rank 4 -->
|
||||
<div class="flex items-center bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent">
|
||||
<div class="flex items-center justify-center w-10">
|
||||
<div class="text-on-surface-variant font-headline-md">4</div>
|
||||
</div>
|
||||
<div class="ml-4 w-12 h-12 rounded-full overflow-hidden bg-surface-container flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="Close up of a professional male manager, Asian, mid 40s, high contrast photography with deep blacks and rich skin tones. Modern executive vibe, clean minimalist aesthetic, soft focus background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBiWnl89DSeYlFvhfBB3o4nzwT2KHDSsobvqa6NdbTq8kG1vEn2tlIOLEjQE2tC4F9lS1fWeGrCmwaMznJG0ORTeHsLFM-Er0TeidXR12Aag3QaTHRFML1M8qlH4N0GGaaT7Grzee96eL26x77enpNk99sdBjALwXStghuZEeHibDqPSEcTkHLzGgQ-QyPTEAuWN5WafjH0IBbsSCikcWhq18c10Z7OI_lAUmJWcEzho5MJQksXryDZIyQMq7fuaO1tM1EUBNq73tU">
|
||||
</div>
|
||||
<div class="ml-4 flex-grow"><div class="flex items-center justify-between w-full"><div class="flex items-center gap-2"><span class="font-headline-md text-headline-md text-ink-black">王强</span><span class="bg-secondary-container text-on-secondary-container text-[10px] px-2 py-0.5 rounded-sm">城市合伙人</span></div><div class="text-subtle-gray font-label-md text-label-md text-right">拓店: 8 间</div></div></div>
|
||||
<div class="text-right">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rank 6 (Skipping 5 as it's 'Me' up top, showing continuity) -->
|
||||
<div class="flex items-center bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent">
|
||||
<div class="flex items-center justify-center w-10">
|
||||
<div class="text-on-surface-variant font-headline-md">6</div>
|
||||
</div>
|
||||
<div class="ml-4 w-12 h-12 rounded-full overflow-hidden bg-surface-container flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="Portrait of a female entrepreneur, Asian, professional attire, standing in a bright minimalist lobby. Professional lifestyle photography, clean composition, natural lighting, high-end commercial style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAKJ0bXaUNzxYGJqO8IeI0nVqx7McLJfQJqoWfABwPL1sE5bOuXXZqHCmX6BBsqF2M3h3J0LzSORqjDCgPoNzi2HEfZCghXdq7WBmYOIYKsL8HSUvrM5S9EiAwNEKninCvthggSgI6GXR5zW9XbKYuA5BuksnhAkaTkm8DpxKZBlNVFb_QIWlEljQp_-CVLSEubckN3DZQVHyJkX2mDseCueyHDVpt10L8s3PuiGYQQisBgT5MB9hSLSvZZCGMmkNPEVI9EJ0XnqWU">
|
||||
</div>
|
||||
<div class="ml-4 flex-grow"><div class="flex items-center justify-between w-full"><div class="flex items-center gap-2"><span class="font-headline-md text-headline-md text-ink-black">赵美</span><span class="bg-secondary-container text-on-secondary-container text-[10px] px-2 py-0.5 rounded-sm">城市合伙人</span></div><div class="text-subtle-gray font-label-md text-label-md text-right">拓店: 7 间</div></div></div>
|
||||
<div class="text-right">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rank 7 -->
|
||||
<div class="flex items-center bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent">
|
||||
<div class="flex items-center justify-center w-10">
|
||||
<div class="text-on-surface-variant font-headline-md">7</div>
|
||||
</div>
|
||||
<div class="ml-4 w-12 h-12 rounded-full overflow-hidden bg-surface-container flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="Studio headshot of a younger Asian male professional, casual smart attire. Soft directional light, clean warm gray background, premium portrait photography." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZcHysNo9F4453O5x8q5Ix6qlDrVDtxJ037t7GtlcKVrsybKmyVNd2oyPaW2IiRvxsN_CKFheUcRzAwpuNYxNxXI5Ts6EcSR2JZVKBttCDfNcKMtuhOjl-z0_esT4fmR1R949A_LMc63oXup5PerWeLgqbs632yMqDSIbSwLfzafVRDbb8JKuJV6d-qUVneJ6nmDvweWbtcCfealiBDJFjeukgcgJOPiEjNxzSELipZ7T22gu-mAIpKM4SqKA63f9wRPJo_kePnQk">
|
||||
</div>
|
||||
<div class="ml-4 flex-grow"><div class="flex items-center justify-between w-full"><div class="flex items-center gap-2"><span class="font-headline-md text-headline-md text-ink-black">刘洋</span><span class="bg-primary-container text-primary-fixed text-[10px] px-2 py-0.5 rounded-sm">内部员工</span></div><div class="text-subtle-gray font-label-md text-label-md text-right">拓店: 6 间</div></div></div>
|
||||
<div class="text-right">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- FAB for action -->
|
||||
<button class="fixed right-6 bottom-24 w-14 h-14 bg-heritage-red text-white rounded-full flex items-center justify-center shadow-lg active:scale-90 transition-transform duration-150 z-40">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">add</span>
|
||||
</button>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
|
||||
<script>
|
||||
// Simple micro-interactions
|
||||
document.querySelectorAll('button, a').forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
if (window.navigator.vibrate) {
|
||||
window.navigator.vibrate(10);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "合伙人贡献榜页面",
|
||||
"screenId": "4bf6ead659dd4581a7831e688e461581",
|
||||
"syncedAt": "2026-06-29T02:35:01.721Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,272 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>合同管理 - 杜康·城市合伙人</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<!-- Tailwind Configuration -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#37413b",
|
||||
"surface-container": "#efeeec",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-secondary-container": "#745c00",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-bright": "#faf9f7",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"error": "#ba1a1a",
|
||||
"inverse-surface": "#2f3130",
|
||||
"primary-container": "#a61d24",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"surface-tint": "#b3272c",
|
||||
"outline": "#8d706e",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-error": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"subtle-gray": "#999999",
|
||||
"background": "#faf9f7",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"heritage-red": "#A61D24",
|
||||
"secondary": "#735c00",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-dim": "#dadad8",
|
||||
"aged-amber": "#FFBF00",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-surface": "#1a1c1b",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface": "#faf9f7",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-background": "#1a1c1b",
|
||||
"on-primary-fixed": "#410004",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-secondary": "#ffffff",
|
||||
"success-green": "#2D6A4F",
|
||||
"primary": "#820012",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-tertiary-fixed-variant": "#3f4943"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"gutter-card": "12px",
|
||||
"base": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.contract-gradient {
|
||||
background: linear-gradient(135deg, #A61D24 0%, #820012 100%);
|
||||
}
|
||||
.amber-blur {
|
||||
background: rgba(255, 191, 0, 0.1);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-surface-container-low shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex items-center justify-between px-margin-page h-16 w-full max-w-screen-xl mx-auto">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="active:scale-95 duration-200 p-2 -ml-2 rounded-full hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-primary font-bold">合同管理</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">verified_user</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-24 pb-32 px-margin-page max-w-screen-xl mx-auto space-y-stack-lg">
|
||||
<!-- Active Contract Section -->
|
||||
<section>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface flex items-center gap-2">
|
||||
<span class="w-1 h-5 bg-heritage-red rounded-full"></span>
|
||||
当前生效合同
|
||||
</h2>
|
||||
<span class="text-label-md font-label-md bg-success-green/10 text-success-green px-3 py-1 rounded-full">进行中</span>
|
||||
</div>
|
||||
<!-- Hero Card -->
|
||||
<div class="contract-gradient rounded-xl p-6 shadow-xl relative overflow-hidden text-white">
|
||||
<!-- Decorative background elements -->
|
||||
<div class="absolute -right-10 -top-10 w-40 h-40 bg-white/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute right-4 top-4">
|
||||
<span class="material-symbols-outlined text-white/20 text-6xl" style="font-variation-settings: 'FILL' 1;">description</span>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<div class="mb-6">
|
||||
<p class="text-white/70 text-label-md font-label-md mb-1">合同编号</p>
|
||||
<p class="font-headline-md text-headline-md tracking-wider">DK-2025-LY-00892</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 mb-8">
|
||||
<div>
|
||||
<p class="text-white/70 text-label-md font-label-md mb-1">签约日期</p>
|
||||
<p class="font-body-lg text-body-lg">2025年01月01日</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white/70 text-label-md font-label-md mb-1">到期日期</p>
|
||||
<p class="font-body-lg text-body-lg">2025年12月31日</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 bg-white text-heritage-red font-bold py-3 rounded-lg active:scale-95 transition-transform text-body-md">
|
||||
查看详情
|
||||
</button>
|
||||
<button class="flex-1 bg-aged-amber text-on-secondary-fixed font-bold py-3 rounded-lg active:scale-95 transition-transform text-body-md flex items-center justify-center gap-2">
|
||||
申请续约
|
||||
<span class="material-symbols-outlined text-sm">bolt</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Historical Contracts List -->
|
||||
<section>
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-4 flex items-center gap-2">
|
||||
<span class="w-1 h-5 bg-outline rounded-full"></span>
|
||||
历史合同
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<!-- Contract Item 1 -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.04)] border border-outline-variant/10 flex items-center justify-between group active:bg-surface-container-low transition-colors">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-lg bg-surface-container-high flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-outline">contract</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<h3 class="font-headline-md text-body-lg text-on-surface">2024年度城市合作协议</h3>
|
||||
<span class="text-[10px] bg-outline-variant/30 text-on-surface-variant px-1.5 py-0.5 rounded whitespace-nowrap">已过期</span>
|
||||
</div>
|
||||
<p class="text-subtle-gray text-label-md">2024.01.01 - 2024.12.31</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-10 h-10 rounded-full flex items-center justify-center text-primary hover:bg-primary-fixed/20 transition-colors">
|
||||
<span class="material-symbols-outlined">download</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Contract Item 2 -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.04)] border border-outline-variant/10 flex items-center justify-between group active:bg-surface-container-low transition-colors">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-lg bg-surface-container-high flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-outline">contract</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<h3 class="font-headline-md text-body-lg text-on-surface">2023年度区域分销授权</h3>
|
||||
<span class="text-[10px] bg-outline-variant/30 text-on-surface-variant px-1.5 py-0.5 rounded whitespace-nowrap">已过期</span>
|
||||
</div>
|
||||
<p class="text-subtle-gray text-label-md">2023.01.01 - 2023.12.31</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-10 h-10 rounded-full flex items-center justify-center text-primary hover:bg-primary-fixed/20 transition-colors">
|
||||
<span class="material-symbols-outlined">download</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Contract Item 3 -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.04)] border border-outline-variant/10 flex items-center justify-between group active:bg-surface-container-low transition-colors">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-lg bg-surface-container-high flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-outline">contract</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<h3 class="font-headline-md text-body-lg text-on-surface">品牌联合推广协议 (Q3)</h3>
|
||||
<span class="text-[10px] bg-outline-variant/30 text-on-surface-variant px-1.5 py-0.5 rounded whitespace-nowrap">已过期</span>
|
||||
</div>
|
||||
<p class="text-subtle-gray text-label-md">2023.07.01 - 2023.09.30</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-10 h-10 rounded-full flex items-center justify-center text-primary hover:bg-primary-fixed/20 transition-colors">
|
||||
<span class="material-symbols-outlined">download</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Information Notice -->
|
||||
<div class="bg-surface-container rounded-xl p-4 flex gap-3">
|
||||
<span class="material-symbols-outlined text-heritage-red text-xl">info</span>
|
||||
<p class="text-on-surface-variant text-label-md leading-relaxed">
|
||||
所有电子合同均具有法律效力。如需纸质合同原件，请联系所属区域经理或拨打合伙人服务热线：<span class="text-heritage-red font-bold">400-888-9999</span>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="fixed bottom-0 w-full z-50 rounded-t-xl bg-surface-container-lowest border-t border-outline-variant/20 shadow-[0px_-4px_16px_rgba(0,0,0,0.04)]"></nav>
|
||||
<script>
|
||||
// Simple micro-interaction for buttons
|
||||
document.querySelectorAll('button').forEach(btn => {
|
||||
btn.addEventListener('touchstart', function() {
|
||||
this.classList.add('opacity-80');
|
||||
});
|
||||
btn.addEventListener('touchend', function() {
|
||||
this.classList.remove('opacity-80');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "合同管理页面",
|
||||
"screenId": "96b05c12a2a147798aa4f51ebed691ad",
|
||||
"syncedAt": "2026-06-29T02:34:48.019Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,323 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"success-green": "#2D6A4F",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-bright": "#faf9f7",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"tertiary-container": "#4e5852",
|
||||
"heritage-red": "#A61D24",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-surface": "#2f3130",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"background": "#faf9f7",
|
||||
"secondary": "#735c00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"primary-container": "#a61d24",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-error": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"primary": "#820012",
|
||||
"surface": "#faf9f7",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container": "#efeeec",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-secondary-container": "#745c00",
|
||||
"subtle-gray": "#999999",
|
||||
"outline": "#8d706e",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-background": "#1a1c1b",
|
||||
"secondary-container": "#fed65b",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary": "#37413b",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-tint": "#b3272c"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
color: #1a1c1b;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.card-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
.switch-checkbox:checked + .switch-label {
|
||||
background-color: #A61D24;
|
||||
}
|
||||
.switch-checkbox:checked + .switch-label::after {
|
||||
transform: translateX(1.25rem);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-body-md antialiased overflow-x-hidden">
|
||||
<!-- Top App Bar -->
|
||||
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface dark:bg-surface-dim z-50 shadow-sm">
|
||||
<div class="flex items-center">
|
||||
<span class="material-symbols-outlined text-primary cursor-pointer active:opacity-80 transition-opacity" data-icon="arrow_back" style="opacity: 0;">arrow_back</span>
|
||||
</div>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">商品管理</h1>
|
||||
<div class="flex items-center">
|
||||
<span class="material-symbols-outlined text-primary cursor-pointer active:opacity-80 transition-opacity" data-icon="add">add</span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-14 pb-24">
|
||||
<!-- Category Filter -->
|
||||
<section class="sticky top-14 bg-surface/80 backdrop-blur-md z-40 px-margin-page py-4">
|
||||
<div class="flex space-x-3 overflow-x-auto custom-scrollbar">
|
||||
<button class="flex-shrink-0 px-5 py-2 rounded-full bg-heritage-red text-white font-label-md text-label-md shadow-md transition-all active:scale-95">全部</button>
|
||||
<button class="flex-shrink-0 px-5 py-2 rounded-full bg-surface-container-high text-on-surface-variant font-label-md text-label-md hover:bg-surface-container-highest transition-all active:scale-95">清香型</button>
|
||||
<button class="flex-shrink-0 px-5 py-2 rounded-full bg-surface-container-high text-on-surface-variant font-label-md text-label-md hover:bg-surface-container-highest transition-all active:scale-95">酱香型</button>
|
||||
<button class="flex-shrink-0 px-5 py-2 rounded-full bg-surface-container-high text-on-surface-variant font-label-md text-label-md hover:bg-surface-container-highest transition-all active:scale-95">浓香型</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Product List -->
|
||||
<div class="px-margin-page space-y-4 mt-2">
|
||||
<!-- Product Item 1 -->
|
||||
<div class="card-shadow bg-surface-container-lowest rounded-xl p-3 flex items-center space-x-4 border border-heritage-red/5 transition-all active:bg-surface-container">
|
||||
<div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-surface-container-low">
|
||||
<img class="w-full h-full object-cover" data-alt="A professional studio product shot of a premium Chinese Baijiu bottle with elegant red and gold labels. The bottle is placed on a minimalist white platform against a soft, warm off-white background with subtle amber lighting accents. The style is high-end commercial photography, focusing on texture and material detail of the glass and embossed paper label." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAq7d_Zaerq436TC3rIz5h-imza_gIdPXGmxNR3u4U0mtWUNf19qzORjMKaxxeY1s1VY4oAfbsJVGc4RE_XdUSx_SqKbXnBpMO5m6El5u0XjB3HPpgIfp046rL-Ve9AWYqooynfEBOPyZ0P7lLPRl2p5v6DxdN5uJ1tB_4KThXjGDftvcSM5ipKm8gQthZz73KSRfOaGtzKNoKulHvwtU9N8B6IlYM8xc3xnpeGD2Ylk--l2utjDSn4rD5DQ2cMUSHQQPoRCPw-_wQ">
|
||||
</div>
|
||||
<div class="flex-grow min-w-0 flex flex-col justify-between h-24 py-1">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md truncate text-ink-black">杜康·原窖1972</h3>
|
||||
<p class="text-subtle-gray font-label-md text-label-md mt-1">浓香型 | 500ml</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-heritage-red font-bold text-headline-md">¥1,299.00</span>
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-label-md font-label-md text-on-surface-variant">上架</span>
|
||||
<div class="relative inline-block w-10 h-5 align-middle select-none transition duration-200 ease-in">
|
||||
<input checked="" class="switch-checkbox absolute block w-5 h-5 rounded-full bg-white border-2 border-surface-container-highest appearance-none cursor-pointer z-10 outline-none" id="toggle1" name="toggle" type="checkbox">
|
||||
<label class="switch-label block overflow-hidden h-5 rounded-full bg-surface-container-highest cursor-pointer transition-colors duration-200 ease-in after:content-[''] after:absolute after:top-0 after:left-0 after:w-5 after:h-5 after:rounded-full after:bg-white after:shadow-sm after:transition-transform after:duration-200" for="toggle1"></label>
|
||||
</div>
|
||||
<button class="p-1 rounded-full hover:bg-surface-container-high transition-colors text-subtle-gray">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Product Item 2 -->
|
||||
<div class="card-shadow bg-surface-container-lowest rounded-xl p-3 flex items-center space-x-4 border border-heritage-red/5 transition-all active:bg-surface-container">
|
||||
<div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-surface-container-low">
|
||||
<img class="w-full h-full object-cover" data-alt="Close-up of a sophisticated dark glass liquor bottle featuring a traditional Chinese seal stamp in crimson red. The setting is an editorial-style composition with dramatic shadows and a spotlight hitting the metallic gold neck of the bottle. Minimalist light-mode aesthetic with high contrast and premium textures." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDdqJuXyFlpHWgjNJ2ADK1UN1My2RQUjOMhpFYZAx0bY851FHDxq_8WW9DDHfuZT9C5jRgvyMuJTtNFQkenItv9eZkSeWsKc8cJgWo5CqxHlGPmH_BSQs8QunDfO9bng31hMCztktwsCAf53fMqZBWQOSYZ7UJ483pNJII-8kYzcmxuU1P6wQ9628dnzsuT1fHPngESh0ExKL4KywQ123wfWiK5jZy9IzKJpeOkxfmc_NVabVjB3i2RobZ9ehfLM41kk-srykX86c0">
|
||||
</div>
|
||||
<div class="flex-grow min-w-0 flex flex-col justify-between h-24 py-1">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md truncate text-ink-black">杜康·名仕封坛</h3>
|
||||
<p class="text-subtle-gray font-label-md text-label-md mt-1">酱香型 | 500ml</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-heritage-red font-bold text-headline-md">¥2,580.00</span>
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-label-md font-label-md text-on-surface-variant">上架</span>
|
||||
<div class="relative inline-block w-10 h-5 align-middle select-none transition duration-200 ease-in">
|
||||
<input checked="" class="switch-checkbox absolute block w-5 h-5 rounded-full bg-white border-2 border-surface-container-highest appearance-none cursor-pointer z-10 outline-none" id="toggle2" name="toggle" type="checkbox">
|
||||
<label class="switch-label block overflow-hidden h-5 rounded-full bg-surface-container-highest cursor-pointer transition-colors duration-200 ease-in after:content-[''] after:absolute after:top-0 after:left-0 after:w-5 after:h-5 after:rounded-full after:bg-white after:shadow-sm after:transition-transform after:duration-200" for="toggle2"></label>
|
||||
</div>
|
||||
<button class="p-1 rounded-full hover:bg-surface-container-high transition-colors text-subtle-gray">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Product Item 3 -->
|
||||
<div class="card-shadow bg-surface-container-lowest rounded-xl p-3 flex items-center space-x-4 border border-heritage-red/5 opacity-80 transition-all active:bg-surface-container">
|
||||
<div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-surface-container-low grayscale">
|
||||
<img class="w-full h-full object-cover" data-alt="Minimalist product photography of a sleek clear glass bottle containing premium spirit. The bottle has a modern typographic label in black and white. It is positioned asymmetrically on a textured stone surface with light coming from a side window, creating long, soft shadows. Clean, organized, and sophisticated atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCcWF1yV5KZohsIixpqhynOvslF8nS4ZRFH0Qx05xilenilritdBFSfPctmjZYiW6FDpnAJfXk_Y_88DSgRa_WN98-s5JaSMAEUH5XARLPDrzvGKPoUphXw-g7tGjTqD-dg9JTQU18O8AW6sqCPOBTor3rWoTh9T3luTMQZ-I6zmahw6hpUM6Z3UKTExK8btVMixikO2dhVp7pTOCg_ALF3ky05USTF0Oaq0ts27ADNK_uV5rURYgosrC4cE_jAG0amJITLgaYexLs">
|
||||
</div>
|
||||
<div class="flex-grow min-w-0 flex flex-col justify-between h-24 py-1">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md truncate text-ink-black">杜康·珍藏系列</h3>
|
||||
<p class="text-subtle-gray font-label-md text-label-md mt-1">清香型 | 375ml</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-heritage-red font-bold text-headline-md">¥888.00</span>
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-label-md font-label-md text-subtle-gray">下架</span>
|
||||
<div class="relative inline-block w-10 h-5 align-middle select-none transition duration-200 ease-in">
|
||||
<input class="switch-checkbox absolute block w-5 h-5 rounded-full bg-white border-2 border-surface-container-highest appearance-none cursor-pointer z-10 outline-none" id="toggle3" name="toggle" type="checkbox">
|
||||
<label class="switch-label block overflow-hidden h-5 rounded-full bg-surface-container-highest cursor-pointer transition-colors duration-200 ease-in after:content-[''] after:absolute after:top-0 after:left-0 after:w-5 after:h-5 after:rounded-full after:bg-white after:shadow-sm after:transition-transform after:duration-200" for="toggle3"></label>
|
||||
</div>
|
||||
<button class="p-1 rounded-full hover:bg-surface-container-high transition-colors text-subtle-gray">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Product Item 4 -->
|
||||
<div class="card-shadow bg-surface-container-lowest rounded-xl p-3 flex items-center space-x-4 border border-heritage-red/5 transition-all active:bg-surface-container">
|
||||
<div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-surface-container-low">
|
||||
<img class="w-full h-full object-cover" data-alt="A luxurious bottle of Chinese liquor with a heavy wooden gift box in the background. The lighting is golden and warm, highlighting the intricate floral patterns on the porcelain bottle. The scene is elegant and traditional yet clean and modern, fitting for an upscale mobile app gallery." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDQ6e9cHHzYIvUXoP9VCGgkHDBb_enCECM4jjmTtDY2-cespyAY1x7w5pJ-nOgL8AuprA5YMfdAHxyozB0lBwEGM-eTDrPyDNZZs988vI2KOFXcq76tsHTi1u2Qne7S7MZvLRzYbBNAHIQOG9kgV0Hpn6nv-7w9-Ig8luSTsdJ-0L4eL6yD9ZJQPOOsBp0ga7uvKCrqAAm3UnVOpVwdFVGBAXH7IwHOGZQHcGwl1aqZXC_Lak_56yQIqtpDvfoBItXoRik7tDgIOEg">
|
||||
</div>
|
||||
<div class="flex-grow min-w-0 flex flex-col justify-between h-24 py-1">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md truncate text-ink-black">杜康·龙樽御酿</h3>
|
||||
<p class="text-subtle-gray font-label-md text-label-md mt-1">浓香型 | 500ml</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-heritage-red font-bold text-headline-md">¥3,288.00</span>
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-label-md font-label-md text-on-surface-variant">上架</span>
|
||||
<div class="relative inline-block w-10 h-5 align-middle select-none transition duration-200 ease-in">
|
||||
<input checked="" class="switch-checkbox absolute block w-5 h-5 rounded-full bg-white border-2 border-surface-container-highest appearance-none cursor-pointer z-10 outline-none" id="toggle4" name="toggle" type="checkbox">
|
||||
<label class="switch-label block overflow-hidden h-5 rounded-full bg-surface-container-highest cursor-pointer transition-colors duration-200 ease-in after:content-[''] after:absolute after:top-0 after:left-0 after:w-5 after:h-5 after:rounded-full after:bg-white after:shadow-sm after:transition-transform after:duration-200" for="toggle4"></label>
|
||||
</div>
|
||||
<button class="p-1 rounded-full hover:bg-surface-container-high transition-colors text-subtle-gray">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Product Item 5 -->
|
||||
<div class="card-shadow bg-surface-container-lowest rounded-xl p-3 flex items-center space-x-4 border border-heritage-red/5 transition-all active:bg-surface-container">
|
||||
<div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-surface-container-low">
|
||||
<img class="w-full h-full object-cover" data-alt="Modern studio shot of a red-labeled glass bottle on a minimalist pedestal. The atmosphere is clean and high-end, utilizing soft diffuse light and a light-gray paper texture background. The image evokes quality, tradition, and contemporary design, fitting the Heritage Modernism style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfcNRuJovQo8yMfM7S3LGVc-NNEwdqhmgfLBn3vnQtKu213M91aGWHwjdTcc0khZY2GJd4jmm1-U_tOO2U_2ySGSL_StMnhE19EP_Y1nRIeTsb5rwyGwMOAhQCkHg14GiaxFTh84W85MwSP2uyeo_PsYh37_8tn-167CHSZ4HaDVVsAzVqUQEZ-GW7jMoawYcetc6514fFfzA9tJwQPgznUS0DkiXSBVNONXGEIDQk56dgC39ZUWvo_oFkVjCpxEJd44C5qf2HLXA">
|
||||
</div>
|
||||
<div class="flex-grow min-w-0 flex flex-col justify-between h-24 py-1">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md truncate text-ink-black">杜康·白酒品鉴装</h3>
|
||||
<p class="text-subtle-gray font-label-md text-label-md mt-1">组合装 | 100ml*4</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-heritage-red font-bold text-headline-md">¥499.00</span>
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="text-label-md font-label-md text-on-surface-variant">上架</span>
|
||||
<div class="relative inline-block w-10 h-5 align-middle select-none transition duration-200 ease-in">
|
||||
<input checked="" class="switch-checkbox absolute block w-5 h-5 rounded-full bg-white border-2 border-surface-container-highest appearance-none cursor-pointer z-10 outline-none" id="toggle5" name="toggle" type="checkbox">
|
||||
<label class="switch-label block overflow-hidden h-5 rounded-full bg-surface-container-highest cursor-pointer transition-colors duration-200 ease-in after:content-[''] after:absolute after:top-0 after:left-0 after:w-5 after:h-5 after:rounded-full after:bg-white after:shadow-sm after:transition-transform after:duration-200" for="toggle5"></label>
|
||||
</div>
|
||||
<button class="p-1 rounded-full hover:bg-surface-container-high transition-colors text-subtle-gray">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Nav Bar -->
|
||||
|
||||
<script>
|
||||
// Micro-interaction for toggle switches
|
||||
document.querySelectorAll('.switch-checkbox').forEach(toggle => {
|
||||
toggle.addEventListener('change', function() {
|
||||
const statusText = this.closest('.flex').querySelector('.font-label-md');
|
||||
if (this.checked) {
|
||||
statusText.textContent = '上架';
|
||||
statusText.classList.replace('text-subtle-gray', 'text-on-surface-variant');
|
||||
this.closest('.card-shadow').classList.remove('opacity-80');
|
||||
this.closest('.card-shadow').querySelector('img').classList.remove('grayscale');
|
||||
} else {
|
||||
statusText.textContent = '下架';
|
||||
statusText.classList.replace('text-on-surface-variant', 'text-subtle-gray');
|
||||
this.closest('.card-shadow').classList.add('opacity-80');
|
||||
this.closest('.card-shadow').querySelector('img').classList.add('grayscale');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Simple ripple-like effect on chips
|
||||
document.querySelectorAll('button').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
if(this.classList.contains('bg-heritage-red')) return;
|
||||
|
||||
// Reset siblings
|
||||
this.parentElement.querySelectorAll('button').forEach(sib => {
|
||||
sib.classList.remove('bg-heritage-red', 'text-white', 'shadow-md');
|
||||
sib.classList.add('bg-surface-container-high', 'text-on-surface-variant');
|
||||
});
|
||||
|
||||
// Activate current
|
||||
this.classList.remove('bg-surface-container-high', 'text-on-surface-variant');
|
||||
this.classList.add('bg-heritage-red', 'text-white', 'shadow-md');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "商品管理页",
|
||||
"screenId": "033db7f78d8149668551673ad78c1886",
|
||||
"syncedAt": "2026-06-29T02:34:34.496Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@@ -0,0 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@400;600;700&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.chat-container {
|
||||
height: calc(100vh - 64px - 80px);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.chat-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.notch-ticket::before, .notch-ticket::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #faf9f7;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.notch-ticket::before { left: -5px; }
|
||||
.notch-ticket::after { right: -5px; }
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"subtle-gray": "#999999",
|
||||
"primary-container": "#a61d24",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-container": "#efeeec",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-tint": "#b3272c",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-error-container": "#93000a",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"on-background": "#1a1c1b",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"secondary": "#735c00",
|
||||
"on-primary-fixed": "#410004",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"outline": "#8d706e",
|
||||
"tertiary-container": "#4e5852",
|
||||
"primary": "#820012",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"aged-amber": "#FFBF00",
|
||||
"inverse-surface": "#2f3130",
|
||||
"heritage-red": "#A61D24",
|
||||
"surface": "#faf9f7",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"success-green": "#2D6A4F",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-surface": "#1a1c1b",
|
||||
"error-container": "#ffdad6",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-secondary-container": "#745c00",
|
||||
"tertiary": "#37413b",
|
||||
"surface-bright": "#faf9f7",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"background": "#faf9f7",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-error": "#ffffff",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-secondary": "#ffffff",
|
||||
"error": "#ba1a1a"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "8px",
|
||||
"xl": "12px",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"gutter-card": "12px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"base": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-xl": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body-md text-on-surface antialiased">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-margin-page h-16 bg-surface shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="transition-all duration-200 active:opacity-70 text-primary">
|
||||
<span class="material-symbols-outlined">arrow_back_ios</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md text-on-surface">在线客服</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary">more_horiz</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Chat Canvas -->
|
||||
<main class="chat-container mt-16 px-margin-page py-stack-md flex flex-col gap-stack-md overflow-y-auto">
|
||||
<!-- Timestamp -->
|
||||
<div class="flex justify-center my-4">
|
||||
<span class="bg-surface-variant/30 text-subtle-gray px-3 py-1 rounded-full font-label-md text-label-md">10:45</span>
|
||||
</div>
|
||||
<!-- User Message -->
|
||||
<div class="flex justify-end gap-3 max-w-[85%] self-end">
|
||||
<div class="bg-heritage-red text-white p-3 rounded-lg shadow-sm">
|
||||
<p class="font-body-md text-body-md">您好，我收到的酒水有破损，需要处理。</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Service Message -->
|
||||
<div class="flex justify-start gap-3 max-w-[85%] self-start">
|
||||
<div class="w-10 h-10 rounded-full flex-shrink-0 bg-white overflow-hidden border border-outline-variant/20 shadow-sm">
|
||||
<img class="w-full h-full object-cover" data-alt="A sophisticated brand logo for Dukang Liquor, featuring a minimalist white emblem on a deep heritage red background. The style is modern yet rooted in cultural tradition, captured with a soft-focus studio lighting effect to emphasize premium quality and hospitality." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAjl8fTqKH5pGcdHLx7KtawslyIc7zPTJOinzKBl66JtSN1A7qbQ4oThm6jV424-sbJTloGkX0gkmo586MGhle4YaiiCK0KEcSvjCr27PTrep4dGEPhvN0xwfBP9HrPXS0zFpew5H9dDLFUkxEDa8WTZ9enDiX0HWvzJlSjBlOuA9KIDmcJWxHsZb9ptNaJAT_pu6hReH85JpT3ymVOTbHLQTIgNoU4RxZs-7tYMsLjp-b4i74MDdtLd3xRlBGpiuzHx-qDP6q2Eyc"/>
|
||||
</div>
|
||||
<div class="bg-white border border-outline-variant/10 text-on-surface p-3 rounded-lg shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<p class="font-body-md text-body-md">您好，非常抱歉给您带来不便。请提供您的订单号，我们将为您核实并安排补发。</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- User Message -->
|
||||
<div class="flex justify-end gap-3 max-w-[85%] self-end">
|
||||
<div class="bg-heritage-red text-white p-3 rounded-lg shadow-sm">
|
||||
<p class="font-body-md text-body-md">订单号：DK202310279981</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Service Message -->
|
||||
<div class="flex justify-start gap-3 max-w-[85%] self-start">
|
||||
<div class="w-10 h-10 rounded-full flex-shrink-0 bg-white overflow-hidden border border-outline-variant/20 shadow-sm">
|
||||
<img class="w-full h-full object-cover" data-alt="A high-end, minimalist portrait of a professional female customer service representative in a subtle, neutral-toned uniform, set against a soft, clean white background. The lighting is bright and welcoming, reflecting a light-mode aesthetic with a calm, helpful atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDRdNDQRqcvsgkFJq-MfD2uPKxjUyhgxAA6DpM2gcNIbCJvdWUq2DzDd45vFjb_r0dwOxjSCYZ35pNGOSqfv4baLeu4W2vOCEUg_NmBnqUuYQMD3dPJMHDMrBr5wbKg7dngBoOEcyDMftPunIWB6y2cw4qhJiZ7PlnzPJHsjRAZT0sMRPR54i3eOqABFz--1opQ-d91mtPjqkVzcOBr8YbSTaEJUr2ulooYNdGPQACR0_Sya28FoNF5ngSz2onp_WjR6rLssAfdnTo"/>
|
||||
</div>
|
||||
<div class="bg-white border border-outline-variant/10 text-on-surface p-3 rounded-lg shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<p class="font-body-md text-body-md">收到，已为您核实订单。我们已为您安排补发相同商品，系统已自动生成补发订单，配送员将尽快联系您，请保持电话畅通。</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- System Alert / Coupon Style -->
|
||||
<div class="flex justify-center my-6 w-full">
|
||||
<div class="relative notch-ticket bg-white px-6 py-4 rounded-lg border border-aged-amber/30 shadow-[0px_4px_12px_rgba(255,191,0,0.1)] max-w-sm flex flex-col items-center gap-2">
|
||||
<div class="flex items-center gap-2 text-aged-amber">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">confirmation_number</span>
|
||||
<span class="font-label-md text-label-md font-bold">补发申请已发起</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant font-body-md text-body-md text-center">关联订单：<span class="text-primary font-bold">DK202310279981</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Input Bar -->
|
||||
<footer class="fixed bottom-0 left-0 w-full bg-white px-margin-page py-3 pb-8 flex items-center gap-3 border-t border-outline-variant/10 z-50">
|
||||
<button class="text-subtle-gray hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-2xl">add_circle</span>
|
||||
</button>
|
||||
<div class="flex-1 bg-surface-container-low rounded-lg px-4 py-2 flex items-center gap-2">
|
||||
<input class="flex-1 bg-transparent border-none focus:ring-0 text-on-surface font-body-md text-body-md p-0" placeholder="输入消息..." type="text"/>
|
||||
<button class="text-subtle-gray hover:text-aged-amber transition-colors">
|
||||
<span class="material-symbols-outlined text-2xl">mood</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="bg-heritage-red text-white px-5 py-2 rounded-lg font-label-md text-label-md transition-transform active:scale-95 shadow-sm">
|
||||
发送
|
||||
</button>
|
||||
</footer>
|
||||
<!-- Background Decoration / Subtle Red Texture -->
|
||||
<div class="fixed inset-0 pointer-events-none z-[-1] opacity-5">
|
||||
|
||||
</div>
|
||||
<script>
|
||||
// Micro-interaction for smooth scrolling on message load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const container = document.querySelector('.chat-container');
|
||||
container.scrollTop = container.scrollHeight;
|
||||
|
||||
const input = document.querySelector('input');
|
||||
const sendBtn = document.querySelector('button.bg-heritage-red');
|
||||
|
||||
sendBtn.addEventListener('click', () => {
|
||||
if (input.value.trim() !== '') {
|
||||
const msg = document.createElement('div');
|
||||
msg.className = 'flex justify-end gap-3 max-w-[85%] self-end animate-in slide-in-from-right-4 duration-300';
|
||||
msg.innerHTML = `
|
||||
<div class="bg-heritage-red text-white p-3 rounded-lg shadow-sm">
|
||||
<p class="font-body-md text-body-md">${input.value}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(msg);
|
||||
input.value = '';
|
||||
container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
|
||||
input.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') sendBtn.click();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "在线客服对话页 - 补发处理示例",
|
||||
"screenId": "654a772bbc6a46b88ea5221a343b46da",
|
||||
"syncedAt": "2026-06-29T02:34:13.319Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
@@ -0,0 +1,272 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style="width: 390px; height: 1367px; overflow: hidden; position: relative;"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<title>城市参数配置 | HQ Management</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface": "#faf9f7",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface-bright": "#faf9f7",
|
||||
"tertiary": "#37413b",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container": "#efeeec",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"primary-container": "#a61d24",
|
||||
"on-primary-fixed": "#410004",
|
||||
"subtle-gray": "#999999",
|
||||
"success-green": "#2D6A4F",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-tint": "#b3272c",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-secondary-container": "#745c00",
|
||||
"on-surface": "#1a1c1b",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-error-container": "#93000a",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"heritage-red": "#A61D24",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"ink-black": "#1A1A1A",
|
||||
"primary": "#820012",
|
||||
"on-primary": "#ffffff",
|
||||
"on-background": "#1a1c1b",
|
||||
"background": "#faf9f7",
|
||||
"on-error": "#ffffff",
|
||||
"secondary-container": "#fed65b",
|
||||
"secondary": "#735c00",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"outline": "#8d706e"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-md": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
color: #1a1c1b;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.card-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
.notch-badge {
|
||||
clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
|
||||
}
|
||||
/* Custom scrollbar for web view */
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #e2bebc;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-body-md pb-32">
|
||||
<!-- TopAppBar -->
|
||||
<header class="bg-surface dark:bg-surface-dim shadow-sm w-full top-0 sticky flex items-center justify-between px-margin-page h-16 z-50">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-primary hover:bg-surface-container-high transition-colors p-1 rounded-full active:scale-95 duration-150">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile md:text-headline-md text-primary">城市参数配置</h1>
|
||||
</div>
|
||||
<button class="text-primary hover:bg-surface-container-high transition-colors p-1 rounded-full active:scale-95 duration-150">
|
||||
|
||||
</button>
|
||||
</header>
|
||||
<main class="px-margin-page py-4 space-y-4">
|
||||
<!-- PageHeader / Breadcrumb -->
|
||||
<section class="mb-4">
|
||||
<nav class="flex items-center space-x-2 text-subtle-gray mb-1">
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-1.5 h-6 bg-heritage-red rounded-full"></div>
|
||||
<h2 class="font-headline-lg-mobile text-headline-lg-mobile md:text-headline-lg text-ink-black">郑州</h2>
|
||||
</div>
|
||||
</section>
|
||||
<!-- CommissionCard -->
|
||||
<section class="bg-surface-container-lowest card-shadow rounded-xl border border-outline-variant/10 p-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="font-headline-md text-headline-md flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-heritage-red">payments</span>
|
||||
佣金比例配置
|
||||
</h3>
|
||||
</div>
|
||||
<div class="bg-primary/5 border border-primary/10 rounded-lg p-3 flex items-start gap-2 mb-4">
|
||||
<span class="material-symbols-outlined text-heritage-red text-lg mt-0.5">info</span>
|
||||
<p class="text-on-surface-variant font-label-md text-label-md leading-relaxed">
|
||||
待合伙人协商后填入，实时生效。调低比例可能导致合伙人权益受损，请谨慎操作。
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-label-md text-label-md text-subtle-gray ml-1">成交订单佣金比例</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface px-4 pr-10 border border-outline rounded-lg focus:ring-1 focus:ring-heritage-red focus:border-heritage-red transition-all font-headline-md h-10" type="text" value="20.0" placeholder="3">
|
||||
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-subtle-gray font-headline-md">%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-label-md text-label-md text-subtle-gray ml-1">权益核销佣金比例</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface px-4 pr-10 border border-outline rounded-lg focus:ring-1 focus:ring-heritage-red focus:border-heritage-red transition-all font-headline-md h-10" type="text" value="5.0" placeholder="3">
|
||||
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-subtle-gray font-headline-md">%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
|
||||
<div class="relative">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button class="bg-heritage-red text-white px-6 rounded-xl font-label-md text-label-md hover:bg-primary transition-all active:scale-95 shadow-md py-2">
|
||||
保存佣金配置
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- WarehouseCard -->
|
||||
<section class="bg-surface-container-lowest card-shadow rounded-xl border border-outline-variant/10 p-4">
|
||||
<h3 class="font-headline-md text-headline-md flex items-center gap-2 mb-4">
|
||||
<span class="material-symbols-outlined text-heritage-red">local_shipping</span>
|
||||
仓配服务配置
|
||||
</h3>
|
||||
<div class="flex items-center justify-between bg-surface rounded-xl border border-outline-variant/10 p-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-secondary-container/20 rounded-full flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-secondary">electric_moped</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body-md font-semibold text-ink-black">小飞侠即时配送</p>
|
||||
<p class="text-xs text-subtle-gray">API自动派单模式</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toggle Switch -->
|
||||
<button class="w-12 h-6 flex items-center bg-heritage-red rounded-full p-1 transition-colors duration-300 focus:outline-none" onclick="toggleSwitch(this)">
|
||||
<div class="bg-white w-4 h-4 rounded-full shadow-md transform translate-x-6 transition-transform duration-300"></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center gap-2 px-1">
|
||||
<span class="material-symbols-outlined text-success-green text-lg">check_circle</span>
|
||||
<span class="text-label-md text-subtle-gray">已开启小飞侠对接，系统将自动派单至即时配送平台</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- SubAccountCard -->
|
||||
|
||||
</main>
|
||||
<!-- FixedBottomBar -->
|
||||
<div class="fixed bottom-0 left-0 w-full bg-surface-container-lowest/80 backdrop-blur-md px-margin-page pt-4 pb-10 border-t border-outline-variant/20 z-50">
|
||||
<button class="w-full bg-heritage-red text-white py-4 rounded-xl font-headline-md text-headline-md shadow-lg shadow-heritage-red/20 active:scale-[0.98] transition-transform flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">save</span>
|
||||
保存全部配置
|
||||
</button>
|
||||
</div>
|
||||
<!-- Script for interactive elements -->
|
||||
<script>
|
||||
function toggleSwitch(element) {
|
||||
const circle = element.querySelector('div');
|
||||
const isOn = element.classList.contains('bg-heritage-red');
|
||||
|
||||
if (isOn) {
|
||||
element.classList.replace('bg-heritage-red', 'bg-outline');
|
||||
circle.classList.replace('translate-x-6', 'translate-x-0');
|
||||
} else {
|
||||
element.classList.replace('bg-outline', 'bg-heritage-red');
|
||||
circle.classList.replace('translate-x-0', 'translate-x-6');
|
||||
}
|
||||
}
|
||||
|
||||
// Add a micro-interaction to input fields
|
||||
document.querySelectorAll('input').forEach(input => {
|
||||
input.addEventListener('focus', () => {
|
||||
input.parentElement.parentElement.classList.add('scale-[1.01]');
|
||||
});
|
||||
input.addEventListener('blur', () => {
|
||||
input.parentElement.parentElement.classList.remove('scale-[1.01]');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "城市参数配置页",
|
||||
"screenId": "0b837b08ca3c483e9b12619980a73fb3",
|
||||
"syncedAt": "2026-06-29T02:34:52.226Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>子账号管理 - 城市合伙人</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Inter:wght@400;500&family=Be+Vietnam+Pro:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary-container": "#a61d24",
|
||||
"inverse-surface": "#2f3130",
|
||||
"error": "#ba1a1a",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-primary": "#ffffff",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-error": "#ffffff",
|
||||
"subtle-gray": "#999999",
|
||||
"background": "#faf9f7",
|
||||
"surface-tint": "#b3272c",
|
||||
"outline": "#8d706e",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary": "#ffffff",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"ink-black": "#1A1A1A",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary": "#37413b",
|
||||
"surface-container": "#efeeec",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-bright": "#faf9f7",
|
||||
"outline-variant": "#e2bebc",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-secondary-container": "#745c00",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-background": "#1a1c1b",
|
||||
"on-primary-fixed": "#410004",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"primary": "#820012",
|
||||
"success-green": "#2D6A4F",
|
||||
"surface-dim": "#dadad8",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"secondary": "#735c00",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"surface": "#faf9f7",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-surface": "#1a1c1b",
|
||||
"status-blue": "#2A6EBB",
|
||||
"aged-amber": "#FFBF00"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"gutter-card": "12px",
|
||||
"base": "8px",
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-md": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.status-switch-on {
|
||||
transform: translateX(20px);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.paper-texture {
|
||||
background-image: radial-gradient(#e2bebc 0.5px, transparent 0.5px);
|
||||
background-size: 24px 24px;
|
||||
opacity: 0.05;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body-md text-on-background min-h-screen flex flex-col">
|
||||
<!-- TopAppBar from JSON Component Logic -->
|
||||
<header class="sticky top-0 z-50 bg-background dark:bg-on-background flex items-center w-full px-margin-page h-14 flat no shadows">
|
||||
<div class="flex items-center gap-4 w-full">
|
||||
<button class="text-primary dark:text-primary-fixed-dim hover:opacity-80 transition-opacity active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-heritage-red dark:text-primary-fixed-dim">子账号管理</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-grow flex flex-col px-margin-page pb-32">
|
||||
<!-- Search Section -->
|
||||
<div class="mt-stack-md relative group">
|
||||
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-outline">search</span>
|
||||
</div>
|
||||
<input class="w-full h-12 pl-12 pr-4 bg-surface-container-lowest border-none rounded-xl text-body-md focus:ring-1 focus:ring-heritage-red/20 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] transition-all" placeholder="搜索姓名或手机号" type="text">
|
||||
</div>
|
||||
<!-- Dynamic List Section -->
|
||||
<div class="mt-stack-lg space-y-gutter-card overflow-y-auto" id="account-list">
|
||||
<!-- Account Card 1 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-4 flex items-center gap-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent hover:border-heritage-red/10 transition-all duration-300">
|
||||
<div class="w-12 h-12 rounded-full bg-primary-fixed flex items-center justify-center text-heritage-red font-headline-md shrink-0">
|
||||
张
|
||||
</div>
|
||||
<div class="flex-grow min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-headline-md text-ink-black truncate">张建国</span>
|
||||
<span class="px-2 py-0.5 bg-secondary-fixed text-on-secondary-fixed font-label-md text-[10px] rounded-full shrink-0">城市合伙人</span>
|
||||
</div>
|
||||
<div class="text-subtle-gray font-body-md mt-0.5">138 **** 8888</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-3 shrink-0">
|
||||
<button class="w-12 h-6 bg-success-green rounded-full relative transition-colors duration-200" onclick="toggleSwitch(this)">
|
||||
<div class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 translate-x-6"></div>
|
||||
</button>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-outline hover:text-primary transition-colors active:scale-90">
|
||||
<span class="material-symbols-outlined text-[20px]">edit</span>
|
||||
</button>
|
||||
<button class="text-outline hover:text-error transition-colors active:scale-90">
|
||||
<span class="material-symbols-outlined text-[20px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Account Card 2 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-4 flex items-center gap-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent hover:border-heritage-red/10 transition-all duration-300">
|
||||
<div class="w-12 h-12 rounded-full bg-tertiary-fixed flex items-center justify-center text-tertiary font-headline-md shrink-0">
|
||||
李
|
||||
</div>
|
||||
<div class="flex-grow min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-headline-md text-ink-black truncate">李晓梅</span>
|
||||
<span class="px-2 py-0.5 bg-surface-container text-on-surface-variant font-label-md text-[10px] rounded-full shrink-0">内部员工</span>
|
||||
</div>
|
||||
<div class="text-subtle-gray font-body-md mt-0.5">156 **** 0122</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-3 shrink-0">
|
||||
<button class="w-12 h-6 bg-success-green rounded-full relative transition-colors duration-200" onclick="toggleSwitch(this)">
|
||||
<div class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 translate-x-6"></div>
|
||||
</button>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-outline hover:text-primary transition-colors active:scale-90">
|
||||
<span class="material-symbols-outlined text-[20px]">edit</span>
|
||||
</button>
|
||||
<button class="text-outline hover:text-error transition-colors active:scale-90">
|
||||
<span class="material-symbols-outlined text-[20px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Account Card 3 (Inactive Example) -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-4 flex items-center gap-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent opacity-80">
|
||||
<div class="w-12 h-12 rounded-full bg-surface-dim flex items-center justify-center text-subtle-gray font-headline-md shrink-0">
|
||||
王
|
||||
</div>
|
||||
<div class="flex-grow min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-headline-md text-ink-black truncate">王强</span>
|
||||
<span class="px-2 py-0.5 bg-surface-container text-on-surface-variant font-label-md text-[10px] rounded-full shrink-0">内部员工</span>
|
||||
</div>
|
||||
<div class="text-subtle-gray font-body-md mt-0.5">177 **** 3344</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-3 shrink-0">
|
||||
<button class="w-12 h-6 bg-subtle-gray/30 rounded-full relative transition-colors duration-200" onclick="toggleSwitch(this)">
|
||||
<div class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 translate-x-0"></div>
|
||||
</button>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-outline hover:text-primary transition-colors active:scale-90">
|
||||
<span class="material-symbols-outlined text-[20px]">edit</span>
|
||||
</button>
|
||||
<button class="text-outline hover:text-error transition-colors active:scale-90">
|
||||
<span class="material-symbols-outlined text-[20px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Empty State (Hidden by default, shown via logic if needed) -->
|
||||
<div class="hidden flex-grow flex flex-col items-center justify-center text-center mt-stack-lg" id="empty-state">
|
||||
<div class="w-48 h-48 mb-6 relative">
|
||||
<div class="absolute inset-0 paper-texture rounded-full"></div>
|
||||
<img class="w-full h-full object-contain opacity-40 grayscale" data-alt="A refined minimalist illustration of a traditional Chinese liquor vessel (Meiping) rendered in soft neutral tones and subtle heritage red accents. The style is clean and editorial, using whitespace to convey a sense of calm and emptiness. Soft ambient lighting with long, elegant shadows against a warm cream background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD4ynhLWf8SaEMzP1ngbIigrZgzH_aUC_r7qwxIRjAjxqfdgQqLRAvMuT_D5lmdxoe_uF8TbDgy985eZXohWlFXX7kBoWJyY33zV8nAQJXp3Y1FJCfsnr2y4eK0xkrgSODbSo3QkI9s5Fts7_Oq3Aw8YW631lBL01SAnYp5ry-RKhyisNYb6rEViN5XGkcDaRsF6YY--2FDji3WqPrwYKudxMLMi4yU1mbwLxdJLaSAvknc7yuHzssJLHeLAnsA4wCegedMZVJwCfg">
|
||||
</div>
|
||||
<p class="font-headline-md text-outline">暂无账号</p>
|
||||
<p class="text-body-md text-subtle-gray mt-2">点击下方按钮添加首个子账号</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Fixed Footer Button -->
|
||||
<div class="fixed bottom-0 left-0 w-full p-margin-page bg-gradient-to-t from-background via-background to-transparent pointer-events-none">
|
||||
<a class="pointer-events-auto block w-full bg-heritage-red text-white h-14 rounded-xl flex items-center justify-center font-headline-md shadow-[0px_4px_20px_rgba(166,29,36,0.2)] active:scale-[0.98] transition-transform" href="{{DATA:SCREEN:SCREEN_59}}">
|
||||
<span class="material-symbols-outlined mr-2">person_add</span>
|
||||
添加子账号
|
||||
</a>
|
||||
</div>
|
||||
<!-- BottomNavBar logic from JSON - Suppressed on task-focused screen according to shell visibility rules -->
|
||||
<script>
|
||||
function toggleSwitch(btn) {
|
||||
const dot = btn.querySelector('div');
|
||||
const isActive = dot.classList.contains('translate-x-6');
|
||||
|
||||
if (isActive) {
|
||||
dot.classList.replace('translate-x-6', 'translate-x-0');
|
||||
btn.classList.replace('bg-success-green', 'bg-subtle-gray/30');
|
||||
} else {
|
||||
dot.classList.replace('translate-x-0', 'translate-x-6');
|
||||
btn.classList.replace('bg-subtle-gray/30', 'bg-success-green');
|
||||
}
|
||||
}
|
||||
|
||||
// Search highlight interaction (mock)
|
||||
const searchInput = document.querySelector('input');
|
||||
searchInput.addEventListener('focus', () => {
|
||||
searchInput.parentElement.classList.add('scale-[1.01]');
|
||||
});
|
||||
searchInput.addEventListener('blur', () => {
|
||||
searchInput.parentElement.classList.remove('scale-[1.01]');
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "子账号管理页面",
|
||||
"screenId": "eb7a5bdb021940ddb9e591ebc1adb5b2",
|
||||
"syncedAt": "2026-06-29T02:33:52.546Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,310 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>杜康合作伙伴 - 开城管理</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"success-green": "#2D6A4F",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-bright": "#faf9f7",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"tertiary-container": "#4e5852",
|
||||
"heritage-red": "#A61D24",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-surface": "#2f3130",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"background": "#faf9f7",
|
||||
"secondary": "#735c00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"primary-container": "#a61d24",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-error": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"primary": "#820012",
|
||||
"surface": "#faf9f7",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container": "#efeeec",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-secondary-container": "#745c00",
|
||||
"subtle-gray": "#999999",
|
||||
"outline": "#8d706e",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-background": "#1a1c1b",
|
||||
"secondary-container": "#fed65b",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary": "#37413b",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-tint": "#b3272c"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.bento-card {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
border: 1px solid rgba(166, 29, 36, 0.03);
|
||||
}
|
||||
.status-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface dark:bg-surface-dim z-50 shadow-sm">
|
||||
<button class="w-10 h-10 flex items-center justify-start active:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-primary dark:text-primary-fixed-dim">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">开城管理</h1>
|
||||
<button class="w-10 h-10 flex items-center justify-end active:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-primary dark:text-primary-fixed-dim">add</span>
|
||||
</button>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<main class="pt-20 pb-24 px-margin-page space-y-stack-md">
|
||||
<!-- Search & Filter Bar -->
|
||||
<div class="relative flex items-center bg-white rounded-xl px-4 h-12 bento-card whitespace-nowrap">
|
||||
<span class="material-symbols-outlined text-subtle-gray mr-3">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-body-md w-full placeholder:text-subtle-gray mr-3" placeholder="搜索城市或合伙人" type="text">
|
||||
<span class="text-body-md font-semibold text-heritage-red active:opacity-80 transition-opacity">搜索</span>
|
||||
</div>
|
||||
<!-- City Stats Overview (Asymmetric Bento) -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="bg-primary text-white p-4 rounded-xl flex flex-col justify-between h-28 bento-card">
|
||||
<span class="text-label-md opacity-80 uppercase tracking-wider">运营中城市</span>
|
||||
<div class="flex items-end justify-between">
|
||||
<span class="text-headline-xl font-headline-xl leading-none">24</span>
|
||||
<span class="material-symbols-outlined opacity-30 text-4xl">location_city</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded-xl flex flex-col justify-between h-28 bento-card">
|
||||
<span class="text-label-md text-subtle-gray uppercase tracking-wider">待开城申请</span>
|
||||
<div class="flex items-end justify-between">
|
||||
<span class="text-headline-xl font-headline-xl leading-none text-heritage-red">08</span>
|
||||
<span class="material-symbols-outlined text-aged-amber text-4xl">pending_actions</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- City List Section -->
|
||||
<div class="space-y-4">
|
||||
<!-- City Card 1 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden bento-card p-4">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-headline-md text-headline-md text-ink-black">洛阳市</span>
|
||||
<span class="status-tag bg-success-green/10 text-success-green">已开城</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">more_horiz</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-4 gap-x-2 border-y border-surface-container py-4 mb-4">
|
||||
<div class="space-y-1">
|
||||
<p class="text-label-md text-subtle-gray">城市合伙人</p>
|
||||
<p class="font-body-md font-semibold text-on-surface">张大为</p>
|
||||
<p class="text-label-md text-subtle-gray">138 **** 9928</p>
|
||||
</div>
|
||||
<div class="space-y-1 text-right">
|
||||
<p class="text-label-md text-subtle-gray">门店总数</p>
|
||||
<p class="font-headline-md text-headline-md text-heritage-red">156</p>
|
||||
</div>
|
||||
<div class="col-span-2 bg-surface-container-low p-3 rounded-lg flex items-center justify-between">
|
||||
<span class="text-label-md text-subtle-gray">累计流水 (GMV)</span>
|
||||
<span class="font-body-lg text-body-lg font-bold text-ink-black">¥ 2,458,900.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="flex-1 py-2 rounded-lg border border-outline-variant text-label-md font-semibold text-on-surface-variant hover:bg-surface-container-high transition-colors flex items-center justify-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">edit</span> 编辑
|
||||
</button>
|
||||
<button class="flex-1 py-2 rounded-lg border border-outline-variant text-label-md font-semibold text-on-surface-variant hover:bg-surface-container-high transition-colors flex items-center justify-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">pause_circle</span> 暂停
|
||||
</button>
|
||||
<button class="flex-1 py-2 rounded-lg bg-heritage-red text-white text-label-md font-semibold flex items-center justify-center gap-1 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-sm">settings</span> 配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- City Card 2 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden bento-card p-4">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-headline-md text-headline-md text-ink-black">西安市</span>
|
||||
<span class="status-tag bg-aged-amber/10 text-aged-amber">暂停中</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">more_horiz</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-4 gap-x-2 border-y border-surface-container py-4 mb-4">
|
||||
<div class="space-y-1">
|
||||
<p class="text-label-md text-subtle-gray">城市合伙人</p>
|
||||
<p class="font-body-md font-semibold text-on-surface">王建国</p>
|
||||
<p class="text-label-md text-subtle-gray">135 **** 2210</p>
|
||||
</div>
|
||||
<div class="space-y-1 text-right">
|
||||
<p class="text-label-md text-subtle-gray">门店总数</p>
|
||||
<p class="font-headline-md text-headline-md text-subtle-gray">84</p>
|
||||
</div>
|
||||
<div class="col-span-2 bg-surface-container-low p-3 rounded-lg flex items-center justify-between">
|
||||
<span class="text-label-md text-subtle-gray">累计流水 (GMV)</span>
|
||||
<span class="font-body-lg text-body-lg font-bold text-ink-black">¥ 980,500.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="flex-1 py-2 rounded-lg border border-outline-variant text-label-md font-semibold text-on-surface-variant hover:bg-surface-container-high transition-colors flex items-center justify-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">edit</span> 编辑
|
||||
</button>
|
||||
<button class="flex-1 py-2 rounded-lg border border-heritage-red text-heritage-red text-label-md font-semibold hover:bg-heritage-red/5 transition-colors flex items-center justify-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">play_circle</span> 恢复
|
||||
</button>
|
||||
<button class="flex-1 py-2 rounded-lg bg-heritage-red text-white text-label-md font-semibold flex items-center justify-center gap-1 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-sm">settings</span> 配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- City Card 3 (郑州市) -->
|
||||
<div class="bg-white rounded-xl overflow-hidden bento-card p-4">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-headline-md text-headline-md text-ink-black">郑州市</span>
|
||||
<span class="status-tag bg-success-green/10 text-success-green">已开城</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">more_horiz</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-4 gap-x-2 border-y border-surface-container py-4 mb-4">
|
||||
<div class="space-y-1">
|
||||
<p class="text-label-md text-subtle-gray">城市合伙人</p>
|
||||
<p class="font-body-md font-semibold text-on-surface">李明华</p>
|
||||
<p class="text-label-md text-subtle-gray">186 **** 0033</p>
|
||||
</div>
|
||||
<div class="space-y-1 text-right">
|
||||
<p class="text-label-md text-subtle-gray">门店总数</p>
|
||||
<p class="font-headline-md text-headline-md text-heritage-red">312</p>
|
||||
</div>
|
||||
<div class="col-span-2 bg-surface-container-low p-3 rounded-lg flex items-center justify-between">
|
||||
<span class="text-label-md text-subtle-gray">累计流水 (GMV)</span>
|
||||
<span class="font-body-lg text-body-lg font-bold text-ink-black">¥ 5,124,000.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="flex-1 py-2 rounded-lg border border-outline-variant text-label-md font-semibold text-on-surface-variant hover:bg-surface-container-high transition-colors flex items-center justify-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">edit</span> 编辑
|
||||
</button>
|
||||
<button class="flex-1 py-2 rounded-lg border border-outline-variant text-label-md font-semibold text-on-surface-variant hover:bg-surface-container-high transition-colors flex items-center justify-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">pause_circle</span> 暂停
|
||||
</button>
|
||||
<button class="flex-1 py-2 rounded-lg bg-heritage-red text-white text-label-md font-semibold flex items-center justify-center gap-1 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-sm">settings</span> 配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
|
||||
<!-- Background Subtle Accents -->
|
||||
<div class="fixed top-0 right-0 -z-10 w-64 h-64 bg-heritage-red/5 rounded-full blur-3xl"></div>
|
||||
<div class="fixed bottom-20 left-0 -z-10 w-48 h-48 bg-aged-amber/5 rounded-full blur-3xl"></div>
|
||||
<script>
|
||||
// Micro-interaction for cards
|
||||
document.querySelectorAll('.bento-card').forEach(card => {
|
||||
card.addEventListener('touchstart', () => {
|
||||
card.style.transform = 'scale(0.98)';
|
||||
card.style.transition = 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)';
|
||||
});
|
||||
card.addEventListener('touchend', () => {
|
||||
card.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "开城管理页",
|
||||
"screenId": "112c139b13ae4e7ab6eda8ffadc8b710",
|
||||
"syncedAt": "2026-06-29T02:34:55.755Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@@ -0,0 +1,263 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style="width: 390px; height: 1399px; overflow: hidden; position: relative;"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>Dukang HQ Customer Service</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary": "#820012",
|
||||
"surface-bright": "#faf9f7",
|
||||
"surface-container": "#efeeec",
|
||||
"primary-container": "#a61d24",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-secondary-container": "#745c00",
|
||||
"status-blue": "#2A6EBB",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"error": "#ba1a1a",
|
||||
"success-green": "#2D6A4F",
|
||||
"outline-variant": "#e2bebc",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-dim": "#dadad8",
|
||||
"surface": "#faf9f7",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-surface": "#1a1c1b",
|
||||
"secondary": "#735c00",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"tertiary": "#37413b",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-tint": "#b3272c",
|
||||
"aged-amber": "#FFBF00",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-primary": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-background": "#1a1c1b",
|
||||
"background": "#faf9f7",
|
||||
"on-primary-fixed": "#410004",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"subtle-gray": "#999999",
|
||||
"outline": "#8d706e",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-error": "#ffffff",
|
||||
"heritage-red": "#A61D24"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"gutter-card": "12px",
|
||||
"margin-page": "20px",
|
||||
"base": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-xl": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.request-card {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
.status-tab-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background-color: #A61D24;
|
||||
border-radius: 2px;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface min-h-screen pb-24">
|
||||
<!-- TopAppBar -->
|
||||
<header class="flex justify-between items-center px-margin-page h-16 w-full z-40 bg-surface-bright dark:bg-surface-dim shadow-sm top-0 sticky">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="active:scale-95 duration-150 p-1 rounded-full hover:bg-surface-container-highest transition-colors">
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile md:text-headline-md text-heritage-red dark:text-inverse-primary">客服中心</h1>
|
||||
</div>
|
||||
<div class="flex items-center"><button class="flex items-center gap-1 text-subtle-gray hover:text-heritage-red transition-colors active:scale-95 duration-150"><span class="material-symbols-outlined text-[20px]">logout</span><span class="font-label-md">退出</span></button></div>
|
||||
</header>
|
||||
<main class="px-margin-page mt-stack-md space-y-stack-md">
|
||||
<!-- Metric Grid -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="request-card bg-surface-container-lowest p-4 rounded-xl border border-outline-variant/10">
|
||||
<p class="font-label-md text-subtle-gray mb-1">处理补发</p>
|
||||
<div class="flex items-end gap-2">
|
||||
<span class="font-headline-xl text-heritage-red">12</span>
|
||||
<span class="text-xs text-status-blue font-medium mb-1.5 flex items-center">
|
||||
<span class="material-symbols-outlined text-[14px]">trending_up</span> 8%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="request-card bg-surface-container-lowest p-4 rounded-xl border border-outline-variant/10 relative"><div class="absolute -top-1 -right-1 w-5 h-5 bg-heritage-red rounded-full flex items-center justify-center shadow-sm border border-white/20"><span class="text-white text-[10px] font-bold leading-none">5</span></div><p class="font-label-md text-subtle-gray mb-1">待处理跨城</p><div class="flex items-end gap-2"><span class="font-headline-xl text-heritage-red">05</span><span class="text-xs text-status-blue font-medium mb-1.5 flex items-center"><span class="material-symbols-outlined text-[14px]">schedule</span> 待办</span></div></div></div>
|
||||
<!-- Search Bar -->
|
||||
<div class="flex gap-3">
|
||||
<div class="relative flex-1">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-subtle-gray text-[20px]">search</span>
|
||||
<input class="w-full pl-10 pr-4 py-2.5 bg-surface-container-low border-none rounded-xl text-body-md focus:ring-1 focus:ring-heritage-red/20 placeholder:text-subtle-gray" placeholder="输入订单号或手机号" type="text">
|
||||
</div>
|
||||
<button class="aspect-square w-[46px] flex items-center justify-center bg-surface-container-low rounded-xl text-on-surface-variant active:scale-95 duration-150">
|
||||
<span class="material-symbols-outlined">tune</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Status Tabs -->
|
||||
<div class="flex border-b border-outline-variant/20 overflow-x-auto no-scrollbar"><button class="relative py-3 px-4 font-label-md text-heritage-red status-tab-active flex-shrink-0">全部</button><button class="py-3 px-4 font-label-md text-subtle-gray flex-shrink-0">普通订单</button><button class="py-3 px-4 font-label-md text-subtle-gray flex-shrink-0">补发订单</button><button class="py-3 px-4 font-label-md text-subtle-gray flex-shrink-0">跨城订单</button></div>
|
||||
<!-- Request List -->
|
||||
<div class="space-y-4"><div class="request-card bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/5"><div class="px-4 py-3 border-b border-surface-container flex justify-between items-center"><div class="flex flex-col"><span class="text-[10px] text-subtle-gray uppercase tracking-wider font-bold">订单号</span><span class="font-label-md text-on-surface">DK20231024118</span></div><span class="px-2 py-0.5 rounded text-[10px] font-bold bg-secondary-container/20 text-secondary border border-secondary/10">跨城订单</span><span class="ml-2 px-2 py-0.5 rounded text-[10px] font-bold bg-success-green/10 text-success-green border border-success-green/10">拦截配送成功</span></div><div class="p-4 space-y-4"><div class="flex gap-4"><div class="relative w-20 h-20 bg-surface-container-low rounded-lg overflow-hidden flex-shrink-0 border border-outline-variant/10"><div class="w-full h-full bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuD9AkbiluMtstwizoG6W7F2XutDy3URE-16eZhrIY0ODzBLXpKjmq-NFRdRhQtm1VzVeEDSR6ol0iJMzchurmNFwYMFqsDfVj5pDwZEX6tD4GVQGqWcR-pjL4FDUJvKMNED1qJ9L3VSasSytdCFalqzQstbZ60zUiQaHSwsm1b58Zaj41uoE5I0Sw12FUlBy45VjcvSsGU7yrKDq2QqyHzPtTyXitnZW1jzF1O072WnpvJFh2lk2BbHb6IVwzLLhehkdSyNzWARWUE');"></div><div class="absolute bottom-0 left-0 w-full bg-heritage-red/90 text-white text-[8px] py-0.5 text-center font-medium">享 ¥200 好客权益</div></div><div class="flex-1"><h3 class="font-headline-md text-body-lg text-ink-black mb-1">杜康·白水古酿 500ml</h3><p class="text-label-md text-subtle-gray mb-2">数量: x1</p><div class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[16px] text-subtle-gray">call</span><span class="text-body-md text-on-surface-variant">177****5566</span></div></div></div><div class="flex gap-3 pt-2"><button class="flex-1 py-2.5 rounded-xl bg-heritage-red text-white font-label-md active:scale-95 transition-transform">去发货</button><button class="flex-1 py-2.5 rounded-xl border border-outline-variant/20 text-on-surface-variant font-label-md active:scale-95 transition-transform">查看详情</button></div></div></div><div class="request-card bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/5"><div class="px-4 py-3 border-b border-surface-container flex justify-between items-center"><div class="flex flex-col"><span class="text-[10px] text-subtle-gray uppercase tracking-wider font-bold">订单号</span><span class="font-label-md text-on-surface">DK20231024105</span></div><span class="px-2 py-0.5 rounded text-[10px] font-bold bg-surface-container-low text-on-surface-variant border border-outline-variant/10">普通订单</span></div><div class="p-4 space-y-4"><div class="flex gap-4"><div class="w-20 h-20 bg-surface-container-low rounded-lg overflow-hidden flex-shrink-0 border border-outline-variant/10"><div class="w-full h-full bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuD9AkbiluMtstwizoG6W7F2XutDy3URE-16eZhrIY0ODzBLXpKjmq-NFRdRhQtm1VzVeEDSR6ol0iJMzchurmNFwYMFqsDfVj5pDwZEX6tD4GVQGqWcR-pjL4FDUJvKMNED1qJ9L3VSasSytdCFalqzQstbZ60zUiQaHSwsm1b58Zaj41uoE5I0Sw12FUlBy45VjcvSsGU7yrKDq2QqyHzPtTyXitnZW1jzF1O072WnpvJFh2lk2BbHb6IVwzLLhehkdSyNzWARWUE');"></div></div><div class="flex-1"><h3 class="font-headline-md text-body-lg text-ink-black mb-1">杜康·白水古酿 500ml</h3><p class="text-label-md text-subtle-gray mb-2">数量: x2</p><div class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[16px] text-subtle-gray">call</span><span class="text-body-md text-on-surface-variant">186****9999</span></div></div></div><div class="flex gap-3 pt-2"><button class="flex-1 py-2.5 rounded-xl border border-heritage-red text-heritage-red font-label-md active:scale-95 transition-transform">破损补发</button></div></div></div>
|
||||
<!-- Card 1: Reshipment -->
|
||||
<div class="request-card bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/5">
|
||||
<div class="px-4 py-3 border-b border-surface-container flex justify-between items-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[10px] text-subtle-gray uppercase tracking-wider font-bold">订单号</span>
|
||||
<span class="font-label-md text-on-surface">DK20231024001</span>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-secondary-container/20 text-secondary border border-secondary/10">破损补发</span>
|
||||
</div>
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="flex gap-4">
|
||||
<div class="w-20 h-20 bg-surface-container-low rounded-lg overflow-hidden flex-shrink-0 border border-outline-variant/10">
|
||||
<div class="w-full h-full bg-cover bg-center" data-alt="A high-end product photograph of a Dukang Baijiu bottle, featuring elegant calligraphy and a traditional Chinese ceramic design. The bottle is placed on a textured paper surface with dramatic, soft side-lighting that highlights its craftsmanship. The background is a warm, minimalist cream color, creating a sophisticated and heritage-focused atmosphere." style="background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuD9AkbiluMtstwizoG6W7F2XutDy3URE-16eZhrIY0ODzBLXpKjmq-NFRdRhQtm1VzVeEDSR6ol0iJMzchurmNFwYMFqsDfVj5pDwZEX6tD4GVQGqWcR-pjL4FDUJvKMNED1qJ9L3VSasSytdCFalqzQstbZ60zUiQaHSwsm1b58Zaj41uoE5I0Sw12FUlBy45VjcvSsGU7yrKDq2QqyHzPtTyXitnZW1jzF1O072WnpvJFh2lk2BbHb6IVwzLLhehkdSyNzWARWUE");"></div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-headline-md text-body-lg text-ink-black mb-1">杜康·白水古酿 500ml</h3>
|
||||
<p class="text-label-md text-subtle-gray mb-2">数量: x1</p>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-[16px] text-subtle-gray">call</span>
|
||||
<span class="text-body-md text-on-surface-variant">138****8888</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low/50 p-3 rounded-lg">
|
||||
<p class="text-[10px] text-subtle-gray font-bold mb-1 uppercase">说明</p>
|
||||
<p class="text-body-md text-on-surface-variant">快递破损，瓶身裂缝，酒液渗漏，申请补发一瓶同款产品。</p>
|
||||
</div>
|
||||
<div class="flex gap-3 pt-2">
|
||||
<button class="flex-1 py-2.5 rounded-xl border border-heritage-red text-heritage-red font-label-md active:scale-95 transition-transform">查看详情</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2: Refund -->
|
||||
|
||||
<!-- Empty Space For Nav -->
|
||||
<div class="h-10"></div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center h-20 px-4 pb-safe bg-surface-container-lowest border-t border-outline-variant/10 shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] z-50 rounded-t-xl">
|
||||
<button class="flex flex-col items-center justify-center text-subtle-gray hover:text-heritage-red active:scale-90 transition-transform duration-200">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="font-label-md text-label-md">管理中心</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-subtle-gray hover:text-heritage-red active:scale-90 transition-transform duration-200">
|
||||
<span class="material-symbols-outlined">storefront</span>
|
||||
<span class="font-label-md text-label-md">门店审核</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-subtle-gray hover:text-heritage-red active:scale-90 transition-transform duration-200">
|
||||
<span class="material-symbols-outlined">account_balance_wallet</span>
|
||||
<span class="font-label-md text-label-md">结算中心</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-heritage-red bg-secondary-container/20 rounded-xl px-4 py-1 active:scale-90 transition-transform duration-200">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: "FILL" 1;">support_agent</span>
|
||||
<span class="font-label-md text-label-md">客服中心</span>
|
||||
</button>
|
||||
</nav>
|
||||
<script>
|
||||
// Simple Interaction logic
|
||||
document.querySelectorAll('nav button').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
// In a real app, this would handle routing
|
||||
console.log('Navigated to: ' + this.innerText);
|
||||
});
|
||||
});
|
||||
|
||||
// Search highlight interaction
|
||||
const searchInput = document.querySelector('input');
|
||||
searchInput.addEventListener('focus', () => {
|
||||
searchInput.parentElement.classList.add('ring-2', 'ring-heritage-red/10');
|
||||
});
|
||||
searchInput.addEventListener('blur', () => {
|
||||
searchInput.parentElement.classList.remove('ring-2', 'ring-heritage-red/10');
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "总部客服中心 - 增加跨城订单处理版",
|
||||
"screenId": "24a0d6e7798c414ab62a239a6c1afef1",
|
||||
"syncedAt": "2026-06-29T02:34:17.565Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@@ -0,0 +1,449 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>订单详情 - 杜康好客遗产管理系统</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Be+Vietnam+Pro:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"outline": "#8d706e",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"status-blue": "#2A6EBB",
|
||||
"primary": "#820012",
|
||||
"error": "#ba1a1a",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"aged-amber": "#FFBF00",
|
||||
"secondary-container": "#fed65b",
|
||||
"primary-container": "#a61d24",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-container": "#efeeec",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"background": "#faf9f7",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary-container": "#745c00",
|
||||
"tertiary": "#37413b",
|
||||
"on-error-container": "#93000a",
|
||||
"heritage-red": "#A61D24",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"success-green": "#2D6A4F",
|
||||
"surface-dim": "#dadad8",
|
||||
"inverse-surface": "#2f3130",
|
||||
"error-container": "#ffdad6",
|
||||
"surface": "#faf9f7",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-tint": "#b3272c",
|
||||
"subtle-gray": "#999999",
|
||||
"secondary": "#735c00",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-surface": "#1a1c1b",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-background": "#1a1c1b",
|
||||
"ink-black": "#1A1A1A"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-page": "20px",
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"gutter-card": "12px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.paper-texture {
|
||||
background-color: #faf9f7;
|
||||
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
|
||||
}
|
||||
.ticket-notch {
|
||||
position: relative;
|
||||
}
|
||||
.ticket-notch::before, .ticket-notch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.ticket-notch::before { left: -6px; }
|
||||
.ticket-notch::after { right: -6px; }
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background: #820012; border-radius: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md selection:bg-heritage-red/20 custom-scrollbar">
|
||||
<!-- Top Navigation Bar (Shared Component Strategy) -->
|
||||
<header class="bg-surface dark:bg-surface-dim shadow-sm w-full top-0 sticky flex items-center justify-between px-margin-page h-16 z-40">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="active:scale-95 transition-transform p-2 hover:bg-surface-variant/50 rounded-full">
|
||||
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile text-primary">订单详情</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="hidden md:flex gap-6 items-center">
|
||||
<span class="font-label-md text-on-surface-variant cursor-pointer hover:text-primary transition-colors">控制台</span>
|
||||
<span class="font-label-md text-primary font-bold border-b-2 border-primary py-1">订单管理</span>
|
||||
<span class="font-label-md text-on-surface-variant cursor-pointer hover:text-primary transition-colors">报表中心</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-primary cursor-pointer">account_balance_wallet</span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-6xl mx-auto px-margin-page py-base space-y-6 mb-24">
|
||||
<!-- Order Status Banner -->
|
||||
<section class="relative overflow-hidden rounded-xl bg-heritage-red p-6 text-white shadow-lg flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: "FILL" 1;">check_circle</span>
|
||||
<h2 class="font-headline-lg text-headline-lg-mobile">订单已完成</h2>
|
||||
</div>
|
||||
<p class="opacity-90 text-label-md">此订单已于 2023-10-24 14:30:00 完成全部款项结算与权益发放</p>
|
||||
</div>
|
||||
<div class="relative z-10 flex gap-3">
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- Bento Grid Layout for Order Intelligence -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
|
||||
<!-- Left Column: Order Source & Products -->
|
||||
<div class="md:col-span-8 space-y-6">
|
||||
<!-- Channel & Source Card -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5" style="transform: translateY(0px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(166, 29, 36, 0.05) 0px 4px 20px;">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="font-headline-md text-ink-black flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">hub</span> 渠道溯源
|
||||
</h3>
|
||||
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-label-md font-bold">洛阳市中心城区</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-surface-container-low p-4 rounded-lg">
|
||||
<p class="text-subtle-gray text-label-md mb-1">订单渠道来源</p>
|
||||
<p class="font-headline-md text-primary">高端品鉴会 · 特邀</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-low p-4 rounded-lg">
|
||||
<p class="text-subtle-gray text-label-md mb-1">营销识别码</p>
|
||||
<p class="font-headline-md text-ink-black">DK-MKT-2023-998</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Product Information -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5" style="transform: translateY(0px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(166, 29, 36, 0.05) 0px 4px 20px;">
|
||||
<div class="px-6 py-4 border-b border-surface-container flex items-center justify-between">
|
||||
<h3 class="font-headline-md text-ink-black">订购产品清单</h3>
|
||||
<span class="text-subtle-gray text-label-md">共 2 件商品</span>
|
||||
</div>
|
||||
<div class="divide-y divide-surface-container">
|
||||
<!-- Product Item -->
|
||||
<div class="p-6 flex gap-6 items-start">
|
||||
<div class="w-24 h-24 rounded-lg bg-surface flex-shrink-0 relative">
|
||||
<img class="w-full h-full object-cover rounded-lg" data-alt="Close-up studio photography of a premium 50-year-old Dukang white liquor bottle featuring intricate golden phoenix engravings and a rich heritage red silk ribbon. The lighting is dramatic and warm, highlighting the crystalline clarity of the spirit against a dark, minimalist background. Cinematic professional commercial product shot." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQYlFP9_mUhnrKJSzZS3zUshFWY-2_DBF5jjFc16CYVnIh5bcA5XR1HMTuxGv1anqxdYLH20p8Wt1BAAZPUz8dyx7s2zbB2-DuQhLpyTLW2De9jAPKSVA3pP_V14jwT72R4xv77LVT44uRplRtnxfhzMRDLwQZrvXoxkOQp8qqZe8WVz5eslGne18o9SCIPNWYC4P-m2dnMOFrcyNeAQNEOFuatxe02UkVAvY-4IofyqJamXWI3A2lSbzxv828Vbw803BYVIihsAM">
|
||||
<div class="absolute -top-2 -left-2 bg-aged-amber text-on-secondary-container px-2 py-0.5 rounded text-[10px] font-bold shadow-sm">
|
||||
典藏级
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<div class="flex justify-between items-start">
|
||||
<h4 class="font-headline-md text-ink-black mb-1">杜康 · 龙腾四海 (52度浓香型 500ml)</h4>
|
||||
<span class="font-headline-md text-primary">¥2,580.00</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-subtle-gray text-label-md mt-2 justify-between">
|
||||
<span class="">数量: 1</span>
|
||||
<span class="">重量: 1.2kg</span>
|
||||
<span class="flex items-center gap-1 text-success-green whitespace-nowrap">
|
||||
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: "FILL" 1;">verified</span> 已入库
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Product Item 2 -->
|
||||
<div class="p-6 flex gap-6 items-start">
|
||||
<div class="w-24 h-24 rounded-lg bg-surface flex-shrink-0 relative">
|
||||
<img class="w-full h-full object-cover rounded-lg" data-alt="Minimalist top-down view of a classic ceramic liquor vessel with traditional Chinese brush calligraphy and a red wax seal, set on a dark slate background with scattered golden wheat husks. High contrast, elegant composition, muted colors except for the heritage red accents." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCavDEh82PXrLJnDxvlUL13Nqcmg79a5e70V4QGJsMSDzu6tn-HQwTtrs8ptkA0l7dh72c0maP5_V1n2TmoHooEXkvwfEpfZkNfcrQs9GozY0b6ezZ-FRnY8YG-jcqkfG6F-oKl12ylPO5aDuhfvK5AzvBWwCg-eqX3tTbMvtFh6CBw-OukdJCgQGgrPS-m_88GaHi4w7EfoMRntkjeeVA8XHVLQI6rFuKmKY_XKEJCc3Bwggt4TpOcHwxQ5QIAR3UkqdugHK6Bbpk">
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<div class="flex justify-between items-start">
|
||||
<h4 class="font-headline-md text-ink-black mb-1">杜康 · 世代窖藏 (特选版)</h4>
|
||||
<span class="font-headline-md text-primary">¥1,880.00</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-subtle-gray text-label-md mt-2 justify-between">
|
||||
<span class="">数量: 1</span>
|
||||
<span class="">重量: 1.5kg</span>
|
||||
<span class="flex items-center gap-1 text-success-green whitespace-nowrap">
|
||||
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: "FILL" 1;">verified</span> 已入库
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low px-6 py-4 flex justify-end gap-12"><div class="text-right">
|
||||
<p class="text-subtle-gray text-label-md">配送</p>
|
||||
<p class="font-headline-md whitespace-nowrap">小飞侠配送</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-subtle-gray text-label-md">商品总价</p>
|
||||
<p class="font-headline-md">¥4,460.00</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-subtle-gray text-label-md">实付金额</p>
|
||||
<p class="font-headline-xl text-primary">¥4,460.00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Financial & Commission Details -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5" style="transform: translateY(0px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(166, 29, 36, 0.05) 0px 4px 20px;">
|
||||
<h3 class="font-headline-md text-ink-black mb-6 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">payments</span> 财务与佣金明细
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="border border-surface-container rounded-xl overflow-hidden">
|
||||
<div class="bg-surface px-4 py-2 border-b border-surface-container flex justify-between">
|
||||
<span class="font-label-md text-on-surface">订单分销佣金</span>
|
||||
<span class="bg-success-green/10 text-success-green px-2 py-0.5 rounded text-[10px] font-bold">已支付</span>
|
||||
</div>
|
||||
<div class="p-4 bg-white" style="transform: translateY(0px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(166, 29, 36, 0.05) 0px 4px 20px;">
|
||||
<p class="text-headline-lg font-coupon-amount text-primary">¥446.00</p>
|
||||
<p class="text-subtle-gray text-label-md mt-1">计算规则: 固定比例 10%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-surface-container rounded-xl overflow-hidden">
|
||||
<div class="bg-surface px-4 py-2 border-b border-surface-container flex justify-between">
|
||||
<span class="font-label-md text-on-surface">权益核销佣金</span>
|
||||
|
||||
</div>
|
||||
<div class="p-4 bg-white" style="transform: translateY(0px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(166, 29, 36, 0.05) 0px 4px 20px;"><div class="space-y-4">
|
||||
<div class="flex flex-col gap-1 pb-3 border-b border-surface-container">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-[11px] text-on-surface-variant">权益核销佣金 - 杜康·厚德酒家</span>
|
||||
<span class="bg-success-green/10 text-success-green px-2 py-0.5 rounded text-[10px] font-bold">已结算</span>
|
||||
</div>
|
||||
<p class="text-headline-md font-coupon-amount text-ink-black">¥40.00</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-[11px] text-on-surface-variant">权益核销佣金 - 杜康·名仕雅居</span>
|
||||
<span class="bg-aged-amber/10 text-secondary px-2 py-0.5 rounded text-[10px] font-bold">待结算</span>
|
||||
</div>
|
||||
<p class="text-headline-md font-coupon-amount text-ink-black">¥50.00</p>
|
||||
</div>
|
||||
<div class="mt-2 pt-2 border-t border-dashed border-outline-variant/30">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-label-md font-bold text-ink-black">合计佣金</span>
|
||||
<span class="text-headline-md text-primary font-coupon-amount">¥90.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Hospitality Benefits & Meta -->
|
||||
<div class="md:col-span-4 space-y-6">
|
||||
<!-- Hospitality Benefits Card (The "Hero" of this UI) -->
|
||||
<div class="bg-surface-container-high rounded-xl p-6 shadow-md border-2 border-aged-amber/20 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 p-4 opacity-10">
|
||||
<span class="material-symbols-outlined text-[80px]">restaurant</span>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<h3 class="font-headline-md text-primary mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined">card_membership</span> 好客权益 (¥1500)
|
||||
</h3>
|
||||
<div class="bg-white/80 backdrop-blur-sm p-4 rounded-lg ticket-notch mb-6 border-l-4 border-aged-amber">
|
||||
<p class="text-subtle-gray text-label-md uppercase tracking-wider">赠送好客权益总额</p>
|
||||
<p class="font-headline-xl text-primary font-coupon-amount">¥1,500</p>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="flex justify-between text-label-md mb-2">
|
||||
<span class="text-on-surface-variant">权益使用进度</span>
|
||||
<span class="text-primary font-bold">60%</span>
|
||||
</div>
|
||||
<div class="h-2 bg-white rounded-full overflow-hidden">
|
||||
<div class="h-full bg-aged-amber" style="width: 60%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 pt-2">
|
||||
<div>
|
||||
<p class="text-subtle-gray text-[10px]">使用金额</p>
|
||||
<p class="font-headline-md text-ink-black">¥900.00</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-subtle-gray text-[10px]">未使用金额</p>
|
||||
<p class="font-headline-md text-primary">¥600.00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 pt-6 border-t border-primary/10"><p class="text-subtle-gray text-label-md mb-4">核销门店记录</p><div class="space-y-4"><div class="flex items-start gap-3 pb-4 border-b border-dashed border-outline-variant/30"><span class="material-symbols-outlined text-primary mt-1">storefront</span><div class="flex-grow"><div class="flex justify-between items-start"><p class="font-body-md font-bold text-ink-black">杜康·厚德酒家 (洛阳店)</p><p class="text-primary font-bold text-label-md">¥400.00</p></div><p class="text-label-md text-on-surface-variant mt-1">洛阳市涧西区南昌路18号</p><p class="text-[10px] text-subtle-gray mt-1">核销时间: 2023-10-23 18:30</p><div class="flex gap-4 mt-2">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-[10px] text-subtle-gray">环境</span>
|
||||
<div class="flex text-aged-amber">
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-[10px] text-subtle-gray">服务态度</span>
|
||||
<div class="flex text-aged-amber">
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="mt-3 pt-2 border-t border-outline-variant/10 flex justify-between items-center"><div class="flex items-center gap-2"><span class="text-[10px] text-subtle-gray">佣金金额:</span><span class="text-label-md font-bold text-ink-black">¥40.00</span></div><span class="bg-success-green/10 text-success-green px-2 py-0.5 rounded text-[10px] font-bold">已结算</span></div></div></div><div class="flex items-start gap-3"><span class="material-symbols-outlined text-primary mt-1">storefront</span><div class="flex-grow"><div class="flex justify-between items-start"><p class="font-body-md font-bold text-ink-black">杜康·名仕雅居 (涧西店)</p><p class="text-primary font-bold text-label-md">¥500.00</p></div><p class="text-label-md text-on-surface-variant mt-1">洛阳市涧西区辽宁路122号</p><p class="text-[10px] text-subtle-gray mt-1">核销时间: 2023-10-24 12:15</p><div class="flex gap-4 mt-2">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-[10px] text-subtle-gray">环境</span>
|
||||
<div class="flex text-aged-amber">
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 0">star</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-[10px] text-subtle-gray">服务态度</span>
|
||||
<div class="flex text-aged-amber">
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="mt-3 pt-2 border-t border-outline-variant/10 flex justify-between items-center"><div class="flex items-center gap-2"><span class="text-[10px] text-subtle-gray">佣金金额:</span><span class="text-label-md font-bold text-ink-black">¥50.00</span></div><span class="bg-aged-amber/10 text-secondary px-2 py-0.5 rounded text-[10px] font-bold">待结算</span></div></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Receiver & Logistics Meta -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5" style="transform: translateY(0px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(166, 29, 36, 0.05) 0px 4px 20px;">
|
||||
<h3 class="font-headline-md text-ink-black mb-4">收货与物流</h3>
|
||||
<div class="space-y-6">
|
||||
<div class="flex gap-4">
|
||||
<span class="material-symbols-outlined text-primary">person_pin</span>
|
||||
<div>
|
||||
<p class="font-body-md text-ink-black">张 * 宇 <span class="text-subtle-gray ml-2 text-label-md">138****8899</span></p>
|
||||
<p class="text-label-md text-on-surface-variant mt-1">河南省 洛阳市 洛龙区 开元大道 123号 杜康大厦 12层</p>
|
||||
</div>
|
||||
</div><div class="border-t border-dashed border-outline-variant/30 my-4"></div><div class="space-y-2"><div class="flex items-center gap-2"><span class="material-symbols-outlined text-heritage-red">edit_location</span><span class="font-body-md font-bold text-ink-black">更改地址记录</span></div><div class="pl-8"><p class="text-label-md text-on-surface-variant">由 [客户/客服] 修改为：河南省 洛阳市 洛龙区 开元大道 123号 杜康大厦 12层</p><p class="text-[10px] text-subtle-gray mt-1">2023-10-22 14:45:10</p></div></div>
|
||||
<div class="flex gap-4">
|
||||
<span class="material-symbols-outlined text-primary">local_shipping</span>
|
||||
<div class="flex-grow">
|
||||
<p class="font-body-md text-ink-black">顺丰特快 <span class="text-subtle-gray ml-2 text-label-md">SF142857493021</span></p>
|
||||
<div class="mt-3 relative border-l-2 border-surface-container pl-4 space-y-4">
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[21px] top-1 w-2.5 h-2.5 rounded-full bg-heritage-red"></div>
|
||||
<p class="text-label-md text-primary font-bold">已签收 - 客户本人签收</p>
|
||||
<p class="text-[10px] text-subtle-gray">2023-10-23 11:20:00</p>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[21px] top-1 w-2.5 h-2.5 rounded-full bg-subtle-gray"></div>
|
||||
<p class="text-label-md text-on-surface">正在派送中</p>
|
||||
<p class="text-[10px] text-subtle-gray">2023-10-23 08:15:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-dashed border-outline-variant/30 my-4"></div><div class="space-y-4"><div class="flex items-center gap-2"><span class="material-symbols-outlined text-heritage-red">sync_alt</span><span class="font-body-md font-bold text-ink-black">补发物流信息</span></div><p class="text-subtle-gray text-label-md">补发原因：商品破损</p><div class="flex gap-4"><span class="material-symbols-outlined text-primary">local_shipping</span><div class="flex-grow"><p class="font-body-md text-ink-black">顺丰特快 <span class="text-subtle-gray ml-2 text-label-md">SF168923456789</span></p><div class="mt-3 relative border-l-2 border-surface-container pl-4"><div class="relative"><div class="absolute -left-[21px] top-1 w-2.5 h-2.5 rounded-full bg-heritage-red"></div><p class="text-label-md text-primary font-bold">补发任务已下发 - 待揽收</p><p class="text-[10px] text-subtle-gray">2023-10-24 15:00:00</p></div></div></div></div></div></div>
|
||||
</div>
|
||||
<!-- Order Technical Meta -->
|
||||
<div class="rounded-xl text-[11px] text-subtle-gray leading-loose">
|
||||
<p class="">订单 ID: DK_ORD_20231022_X001</p>
|
||||
<p class="">支付流水号: PAY_WXP_99384755102</p>
|
||||
<p class="">下单时间: 2023-10-22 10:15:22</p>
|
||||
<p class="">支付时间: 2023-10-22 10:16:05</p>
|
||||
<p class="">权益到期:永久有效</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Shell (Shared Component Strategy) -->
|
||||
<nav class="fixed bottom-0 w-full z-50 rounded-t-xl bg-surface dark:bg-surface-dim shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] h-16 md:hidden">
|
||||
|
||||
</nav>
|
||||
<!-- Interactive Layer: Hover states and Tooltips (Vanilla JS) -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const cards = document.querySelectorAll('.bg-white');
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('mouseenter', () => {
|
||||
card.style.transform = 'translateY(-2px)';
|
||||
card.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
card.style.boxShadow = '0px 8px 30px rgba(166, 29, 36, 0.08)';
|
||||
});
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = 'translateY(0)';
|
||||
card.style.boxShadow = '0px 4px 20px rgba(166, 29, 36, 0.05)';
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "总部端订单详情 - 全量信息版",
|
||||
"screenId": "90bedbd5b2db46e3a01ad84621905b5b",
|
||||
"syncedAt": "2026-06-29T02:34:59.886Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,237 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport">
|
||||
<title>杜康好客 · 总部管理登录</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#e2bebc",
|
||||
"error": "#ba1a1a",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-surface": "#1a1c1b",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-dim": "#dadad8",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"outline": "#8d706e",
|
||||
"tertiary": "#37413b",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"tertiary-container": "#4e5852",
|
||||
"aged-amber": "#FFBF00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-bright": "#faf9f7",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"success-green": "#2D6A4F",
|
||||
"primary-container": "#a61d24",
|
||||
"primary": "#820012",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"surface-tint": "#b3272c",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"subtle-gray": "#999999",
|
||||
"secondary": "#735c00",
|
||||
"on-background": "#1a1c1b",
|
||||
"background": "#faf9f7",
|
||||
"on-secondary-container": "#745c00",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"surface-container": "#efeeec",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-primary": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-xl": "48px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.premium-card-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
|
||||
.amber-accent-gradient {
|
||||
background: linear-gradient(135deg, #FFBF00 0%, #FFD700 100%);
|
||||
}
|
||||
|
||||
.button-press-active:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body-md text-on-surface antialiased overflow-hidden">
|
||||
<!-- HQQuickLoginPage Container -->
|
||||
<div class="flex flex-col h-screen max-w-md mx-auto relative overflow-hidden">
|
||||
<!-- Background Atmospheric Element -->
|
||||
<div class="absolute -top-24 -right-24 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<div class="absolute -bottom-24 -left-24 w-64 h-64 bg-aged-amber/5 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<!-- Header Section -->
|
||||
<header class="flex flex-col items-center pt-stack-xl pb-stack-lg z-10">
|
||||
<div class="w-[150px] h-[150px] rounded-full overflow-hidden shadow-sm bg-white p-1 border border-surface-container-high">
|
||||
<img alt="Dukang Logo" class="w-full h-full object-contain rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC3aK6_2nIyv7uui_LC5TBgernkZyUS6mVK9Ncum0ctp7mLs8X7ZVQeAFVvDDfV9E_ymWgdy-tAM8T86AFWHdloymr7e_WT8LHAsVb8O6mt9EW8aWXPY5ELLE8fOPlk4PMuMTh2TR-zXkdWtQZPGw__iFJOKYtc26rA-CR5uNkXhG0Qw5DOL6YwLVyP-t3pfCR3G5NXuKgfzfF_nX6l3W8THrAtOC_-hB9LGvi-k68W_rl_Ikw84tIfZ4Dyi6luBLXEvPeX80FY40k">
|
||||
</div>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-heritage-red font-bold mt-4 tracking-tight">
|
||||
杜康好客 · 总部管理
|
||||
</h1>
|
||||
</header>
|
||||
<!-- Identity Card (Visual Focus) -->
|
||||
<main class="flex-grow px-margin-page py-4 z-10">
|
||||
<div class="premium-card-shadow bg-surface-container-lowest rounded-xl p-stack-lg flex flex-col items-center border border-outline-variant/10 relative overflow-hidden">
|
||||
<!-- Decorative Top Edge -->
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-heritage-red/10"></div>
|
||||
<!-- User Avatar -->
|
||||
<div class="w-16 h-16 rounded-full bg-primary-fixed flex items-center justify-center mb-stack-md">
|
||||
<span class="material-symbols-outlined text-[48px] text-heritage-red" style="font-variation-settings: 'FILL' 1;">
|
||||
account_circle
|
||||
</span>
|
||||
</div>
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black font-bold">欢迎回来</h2>
|
||||
<div class="flex flex-col items-center mt-stack-sm space-y-1">
|
||||
<span class="font-body-lg text-body-lg text-on-surface font-medium">超级管理员 (Admin)</span>
|
||||
<span class="font-body-md text-body-md text-subtle-gray tracking-widest">138 **** 8888</span>
|
||||
</div>
|
||||
<!-- Status Badge -->
|
||||
|
||||
</div>
|
||||
<!-- Action Section -->
|
||||
<div class="mt-stack-xl space-y-4">
|
||||
<button class="button-press-active w-full h-14 bg-heritage-red text-white font-headline-md text-headline-md rounded-xl shadow-lg transition-all duration-200 flex items-center justify-center gap-2" onclick="handleLogin()">
|
||||
<span class="material-symbols-outlined">login</span>
|
||||
一键登录
|
||||
</button>
|
||||
<button class="button-press-active w-full h-14 bg-transparent border border-outline text-on-surface-variant font-headline-md text-headline-md rounded-xl transition-all duration-200" onclick="handleSwitchAccount()">
|
||||
切换其他账号
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-6 flex justify-center items-center gap-2">
|
||||
<input class="w-4 h-4 text-heritage-red border-outline rounded focus:ring-heritage-red cursor-pointer" id="terms" type="checkbox">
|
||||
<label class="text-label-md text-subtle-gray" for="terms">
|
||||
我已阅读并同意 <a class="text-heritage-red underline" href="#">《管理系统使用协议》</a>
|
||||
</label>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer Section -->
|
||||
<footer class="w-full pb-safe py-6 text-center z-10">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="flex items-center gap-1.5 text-subtle-gray">
|
||||
<span class="material-symbols-outlined text-[16px]">security</span>
|
||||
<span class="font-label-md text-label-md">杜康数据安全实验室提供技术支持</span>
|
||||
</div>
|
||||
<p class="font-label-md text-label-md text-subtle-gray/60 tracking-wider">
|
||||
安全管理系统 V1.2.0
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Micro-interaction Scripts -->
|
||||
<script>
|
||||
function handleLogin() {
|
||||
const checkbox = document.getElementById('terms');
|
||||
if (!checkbox.checked) {
|
||||
// Visual feedback for checkbox
|
||||
checkbox.parentElement.classList.add('animate-shake');
|
||||
setTimeout(() => checkbox.parentElement.classList.remove('animate-shake'), 400);
|
||||
alert('请先阅读并同意管理系统使用协议');
|
||||
return;
|
||||
}
|
||||
|
||||
// Simulation of login action
|
||||
const btn = document.querySelector('button.bg-heritage-red');
|
||||
const originalText = btn.innerHTML;
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="animate-spin material-symbols-outlined">refresh</span> 登录中...';
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = '<span class="material-symbols-outlined">check_circle</span> 验证成功';
|
||||
btn.classList.replace('bg-heritage-red', 'bg-success-green');
|
||||
}, 1200);
|
||||
}
|
||||
|
||||
function handleSwitchAccount() {
|
||||
console.log('Switching account flow initiated...');
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
.animate-shake {
|
||||
animation: shake 0.2s ease-in-out 0s 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "总部管理一键登录页",
|
||||
"screenId": "9619e8e055324013b36f7d56753e25fc",
|
||||
"syncedAt": "2026-06-29T02:33:50.783Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@@ -0,0 +1,468 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style="width: 390px; height: 1127px; overflow: hidden; position: relative;"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>杜康总部管理中心</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary-container": "#4e5852",
|
||||
"status-blue": "#2A6EBB",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-primary": "#ffffff",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-bright": "#faf9f7",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-error": "#ffffff",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-tint": "#b3272c",
|
||||
"error": "#ba1a1a",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-background": "#1a1c1b",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"surface": "#faf9f7",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"surface-container": "#efeeec",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"aged-amber": "#FFBF00",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"tertiary": "#37413b",
|
||||
"on-secondary-container": "#745c00",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"heritage-red": "#A61D24",
|
||||
"success-green": "#2D6A4F",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"secondary": "#735c00",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"primary": "#820012",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline": "#8d706e",
|
||||
"inverse-surface": "#2f3130",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"on-surface": "#1a1c1b",
|
||||
"background": "#faf9f7",
|
||||
"error-container": "#ffdad6",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"primary-fixed-dim": "#ffb3ae"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"base": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body {
|
||||
background-color: #F9F8F6; /* Heritage Modernism Base */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.bento-item-large {
|
||||
grid-column: span 2;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple 600ms linear;
|
||||
background-color: rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style><style>
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple 600ms linear;
|
||||
background-color: rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style><style>
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple 600ms linear;
|
||||
background-color: rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style><style>
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple 600ms linear;
|
||||
background-color: rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style><style>
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple 600ms linear;
|
||||
background-color: rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style><style>
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple 600ms linear;
|
||||
background-color: rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style><style>
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple 600ms linear;
|
||||
background-color: rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style><style>
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple 600ms linear;
|
||||
background-color: rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style><style>
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple 600ms linear;
|
||||
background-color: rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style><style>
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple 600ms linear;
|
||||
background-color: rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style></head>
|
||||
<body class="font-body-md text-on-surface mb-24">
|
||||
<!-- TopAppBar -->
|
||||
<header class="flex justify-between items-center w-full px-margin-page py-base fixed top-0 z-50 bg-surface dark:bg-surface-dim shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-headline-lg-mobile text-headline-lg-mobile text-heritage-red font-bold">杜康总部管理</span>
|
||||
</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-high transition-colors active:scale-95 duration-150">
|
||||
<span class="material-symbols-outlined text-heritage-red">notifications</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="pt-20 px-margin-page space-y-4">
|
||||
<!-- Data Overview Section -->
|
||||
<section class="mt-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black">今日概况</h2>
|
||||
<span class="text-label-md font-label-md text-subtle-gray">更新于 09:42</span>
|
||||
</div>
|
||||
<div class="space-y-3"><div class="grid grid-cols-4 gap-2">
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 flex flex-col items-center py-3 px-1">
|
||||
<span class="text-[10px] font-label-md text-subtle-gray mb-1">订单数</span>
|
||||
<span class="text-body-md font-bold text-ink-black">156</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 flex flex-col items-center py-3 px-1">
|
||||
<span class="text-[10px] font-label-md text-subtle-gray mb-1">新增用户</span>
|
||||
<span class="text-body-md font-bold text-ink-black">42</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 flex flex-col items-center py-3 px-1">
|
||||
<span class="text-[10px] font-label-md text-subtle-gray mb-1">核销笔数</span>
|
||||
<span class="text-body-md font-bold text-ink-black">132</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 flex flex-col items-center py-3 px-1">
|
||||
<span class="text-[10px] font-label-md text-subtle-gray mb-1">新增门店</span>
|
||||
<span class="text-body-md font-bold text-ink-black">3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 flex flex-col items-center py-3">
|
||||
<span class="text-label-md font-label-md text-subtle-gray mb-1">今日GMV</span>
|
||||
<span class="text-headline-md font-headline-md text-heritage-red">¥12,480</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 flex flex-col items-center py-3">
|
||||
<span class="text-label-md font-label-md text-subtle-gray mb-1">累计GMV</span>
|
||||
<span class="text-headline-md font-headline-md text-ink-black">¥428k</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 flex flex-col items-center py-3">
|
||||
<span class="text-label-md font-label-md text-subtle-gray mb-1">核销金额</span>
|
||||
<span class="text-headline-md font-headline-md text-heritage-red">¥8,640</span>
|
||||
</div>
|
||||
</div></div>
|
||||
</section><section class="mt-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black">待办预警</h2>
|
||||
<button class="text-label-md font-label-md text-heritage-red flex items-center">
|
||||
查看全部 <span class="material-symbols-outlined text-[16px] ml-1">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-error-container/30 border border-error/10 rounded-xl p-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-error">warning</span>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-body-md font-bold text-ink-black">订单 #8802 已超时 2.5h</span>
|
||||
<span class="text-label-md text-subtle-gray">请尽快处理该异常订单</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-error"></div>
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-error/30"></div>
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-error/30"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Functional Bento Grid -->
|
||||
<section>
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black mb-4">核心管理</h2>
|
||||
<div class="bento-grid">
|
||||
<!-- City Management -->
|
||||
<button class="flex flex-col items-start bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 hover:bg-surface-container-high transition-all active:scale-[0.98] duration-150 text-left p-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-primary-fixed-dim/20 flex items-center justify-center mb-2">
|
||||
<span class="material-symbols-outlined text-heritage-red">location_city</span>
|
||||
</div>
|
||||
<span class="font-headline-md text-headline-md text-ink-black">开城管理</span>
|
||||
<span class="text-label-md font-label-md text-subtle-gray mt-1">区域拓展与商圈管理</span>
|
||||
</button>
|
||||
<!-- Order Center -->
|
||||
<button class="flex flex-col items-start bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 hover:bg-surface-container-high transition-all active:scale-[0.98] duration-150 text-left p-4 relative">
|
||||
<div class="w-10 h-10 rounded-lg bg-primary-fixed-dim/20 flex items-center justify-center mb-2">
|
||||
<span class="material-symbols-outlined text-heritage-red">receipt_long</span>
|
||||
</div>
|
||||
<span class="font-headline-md text-headline-md text-ink-black">订单中心</span>
|
||||
<span class="text-label-md font-label-md text-subtle-gray mt-1">全链路订单监控</span>
|
||||
<div class="absolute top-3 right-3 w-5 h-5 bg-heritage-red text-on-primary text-[10px] font-bold flex items-center justify-center rounded-full shadow-sm">2</div></button>
|
||||
<!-- Product Management -->
|
||||
<button class="bento-item-large flex items-center bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 hover:bg-surface-container-high transition-all active:scale-[0.98] duration-150 text-left p-4">
|
||||
<div class="w-12 h-12 rounded-lg bg-primary-fixed-dim/20 flex items-center justify-center mr-4 shrink-0 mb-2">
|
||||
<span class="material-symbols-outlined text-heritage-red" style="font-variation-settings: 'FILL' 1;">liquor</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<span class="font-headline-md text-headline-md text-ink-black block">商品管理</span>
|
||||
<span class="text-label-md font-label-md text-subtle-gray mt-1">杜康系列酒品与餐券库</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">chevron_right</span>
|
||||
</button>
|
||||
<!-- Campaign Management -->
|
||||
|
||||
<!-- Promo Codes -->
|
||||
<button class="flex flex-col items-start bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 hover:bg-surface-container-high transition-all active:scale-[0.98] duration-150 text-left p-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-primary-fixed-dim/20 flex items-center justify-center mb-2">
|
||||
<span class="material-symbols-outlined text-heritage-red">qr_code_2</span>
|
||||
</div>
|
||||
<span class="font-headline-md text-headline-md text-ink-black">推广码</span>
|
||||
<span class="text-label-md font-label-md text-subtle-gray mt-1">渠道推广链路跟踪</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-start bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 hover:bg-surface-container-high transition-all active:scale-[0.98] duration-150 text-left p-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-primary-fixed-dim/20 flex items-center justify-center mb-2">
|
||||
<span class="material-symbols-outlined text-heritage-red">analytics</span>
|
||||
</div>
|
||||
<span class="font-headline-md text-headline-md text-ink-black">数据报表</span>
|
||||
<span class="text-label-md font-label-md text-subtle-gray mt-1">全链路经营数据看板</span>
|
||||
</button></div>
|
||||
</section>
|
||||
<!-- Dynamic Insights (Editorial Style) -->
|
||||
<section class="pb-10">
|
||||
<div class="space-y-4">
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 py-3 bg-surface dark:bg-surface-dim z-50 rounded-t-xl shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] border-t border-outline-variant/20 pb-10">
|
||||
<!-- Active Tab: 管理中心 -->
|
||||
<button class="flex flex-col items-center justify-center text-heritage-red bg-primary-fixed-dim/20 rounded-xl px-3 py-1 active:scale-90 duration-200 transition-all">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">dashboard</span>
|
||||
<span class="font-label-md text-label-md">管理中心</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-tertiary-container opacity-70 hover:bg-surface-container-low active:scale-90 duration-200 transition-all">
|
||||
<span class="material-symbols-outlined">fact_check</span>
|
||||
<span class="font-label-md text-label-md">门店审核</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-tertiary-container opacity-70 hover:bg-surface-container-low active:scale-90 duration-200 transition-all">
|
||||
<span class="material-symbols-outlined">account_balance_wallet</span>
|
||||
<span class="font-label-md text-label-md">结算中心</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-tertiary-container opacity-70 hover:bg-surface-container-low active:scale-90 duration-200 transition-all">
|
||||
<span class="material-symbols-outlined">support_agent</span>
|
||||
<span class="font-label-md text-label-md">客服中心</span>
|
||||
</button>
|
||||
</nav>
|
||||
<script>
|
||||
// Micro-interactions for functional buttons
|
||||
document.querySelectorAll('button').forEach(button => {
|
||||
button.addEventListener('touchstart', function() {
|
||||
this.classList.add('opacity-80');
|
||||
});
|
||||
button.addEventListener('touchend', function() {
|
||||
this.classList.remove('opacity-80');
|
||||
});
|
||||
});
|
||||
|
||||
// Simple mock ripple effect
|
||||
function createRipple(event) {
|
||||
const button = event.currentTarget;
|
||||
const circle = document.createElement("span");
|
||||
const diameter = Math.max(button.clientWidth, button.clientHeight);
|
||||
const radius = diameter / 2;
|
||||
|
||||
circle.style.width = circle.style.height = `${diameter}px`;
|
||||
circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
|
||||
circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
|
||||
circle.classList.add("ripple");
|
||||
|
||||
const ripple = button.getElementsByClassName("ripple")[0];
|
||||
if (ripple) { ripple.remove(); }
|
||||
button.appendChild(circle);
|
||||
}
|
||||
|
||||
// Add custom styles for ripple effect
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple 600ms linear;
|
||||
background-color: rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "总部管理中心首页 - 数据聚合与预警版",
|
||||
"screenId": "6079e1ff71714639ade8b5115125c502",
|
||||
"syncedAt": "2026-06-29T02:34:42.719Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1,261 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary-container": "#a61d24",
|
||||
"on-primary-fixed": "#410004",
|
||||
"subtle-gray": "#999999",
|
||||
"success-green": "#2D6A4F",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-container": "#efeeec",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"tertiary": "#37413b",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface": "#faf9f7",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-error": "#ffffff",
|
||||
"secondary-container": "#fed65b",
|
||||
"secondary": "#735c00",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"outline": "#8d706e",
|
||||
"on-primary": "#ffffff",
|
||||
"on-background": "#1a1c1b",
|
||||
"background": "#faf9f7",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-error-container": "#93000a",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"heritage-red": "#A61D24",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"ink-black": "#1A1A1A",
|
||||
"primary": "#820012",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-tint": "#b3272c",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-secondary-container": "#745c00",
|
||||
"on-surface": "#1a1c1b"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-lg": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-md": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
.heritage-gradient {
|
||||
background: linear-gradient(135deg, #A61D24 0%, #820012 100%);
|
||||
}
|
||||
|
||||
.input-focus-ring:focus-within {
|
||||
border-color: #A61D24;
|
||||
box-shadow: 0 0 0 1px rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
|
||||
.paper-texture {
|
||||
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body-md text-on-background min-h-screen flex flex-col items-center justify-center relative overflow-hidden">
|
||||
<!-- Atmospheric Background Layers -->
|
||||
<div class="fixed inset-0 pointer-events-none z-0">
|
||||
<div class="absolute top-[-10%] right-[-10%] w-[60%] h-[60%] rounded-full bg-heritage-red/5 blur-[120px]"></div>
|
||||
<div class="absolute bottom-[-10%] left-[-10%] w-[50%] h-[50%] rounded-full bg-aged-amber/5 blur-[100px]"></div>
|
||||
<div class="absolute inset-0 paper-texture opacity-20"></div>
|
||||
</div>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="relative z-10 w-full max-w-md px-margin-page py-stack-lg flex flex-col animate-in fade-in slide-in-from-bottom-4 duration-1000">
|
||||
<!-- TopHeader -->
|
||||
<header class="flex flex-col items-center mb-10">
|
||||
<div class="w-32 h-32 mb-4 flex items-center justify-center bg-white rounded-full shadow-[0px_4px_20px_rgba(166,29,36,0.1)] border border-heritage-red/10 p-2">
|
||||
<img class="w-full h-full object-contain rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBxC4t2rFfu-vWvugzBfnEV93y2tnY4lTB9ngky0MpZLh8FKBpCQUP9qTl-9CFqNQS0xuo4BPszpCUi8NWGjcASZ4YIS9s5pnQtg3gRU718qGhIpLwyj-q-8jdanmtVxK6rsUYE58bbf26kNCNNGX3GVHguTQK2T0zaWgJzupfAVs3CponsRLtsMmruGYHGrm-LG0kSk_o138U-yqgOs8nwkhkbLOXsUkPGrkAtfoMi-CqYm3j_8TNF6Uq0XW2TJKG2_8YVQVD3DGo" alt="杜康好客 Logo" style="transform: scale(1.1); transform-origin: center center;">
|
||||
</div>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile md:font-headline-lg md:text-headline-lg text-heritage-red tracking-tight font-bold">
|
||||
杜康好客 · 总部管理
|
||||
</h1>
|
||||
</header>
|
||||
<!-- WelcomeSection -->
|
||||
<section class="mb-8 text-center">
|
||||
<h2 class="font-headline-xl text-headline-xl text-on-surface mb-2">欢迎登录</h2>
|
||||
<p class="font-body-lg text-body-lg text-subtle-gray">总部运营管理系统</p>
|
||||
</section><section class="mb-8">
|
||||
<div class="glass-panel rounded-xl p-6 shadow-lg border border-white/40">
|
||||
<form class="flex flex-col gap-4">
|
||||
<!-- Username Field -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant px-1">账号/手机号</label>
|
||||
<div class="relative flex items-center input-focus-ring bg-white/50 rounded-lg border border-outline-variant overflow-hidden">
|
||||
<span class="material-symbols-outlined absolute left-3 text-subtle-gray">person</span>
|
||||
<input type="text" placeholder="请输入账号" class="w-full bg-transparent border-none py-3 pl-10 pr-4 focus:ring-0 font-body-md text-on-surface" style="transition: 0.5s; opacity: 1; transform: translateY(0px);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password Field -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant px-1">密码</label>
|
||||
<div class="relative flex items-center input-focus-ring bg-white/50 rounded-lg border border-outline-variant overflow-hidden">
|
||||
<span class="material-symbols-outlined absolute left-3 text-subtle-gray">lock</span>
|
||||
<input id="password-input" type="password" placeholder="请输入密码" class="w-full bg-transparent border-none py-3 pl-10 pr-12 focus:ring-0 font-body-md text-on-surface" style="transition: 0.5s; opacity: 1; transform: translateY(0px);">
|
||||
<button type="button" onclick="togglePassword()" class="absolute right-3 flex items-center justify-center text-subtle-gray hover:text-heritage-red transition-colors">
|
||||
<span id="password-toggle-icon" class="material-symbols-outlined">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Options Row -->
|
||||
<div class="flex items-center justify-between mt-1">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" class="w-4 h-4 rounded border-outline-variant text-heritage-red focus:ring-heritage-red/20" style="transition: 0.5s; opacity: 1; transform: translateY(0px);">
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">记住账号</span>
|
||||
</label>
|
||||
<a href="#" class="font-label-md text-label-md text-heritage-red hover:underline">忘记密码?</a>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" class="heritage-gradient text-white rounded-lg py-4 w-full font-bold shadow-md active:scale-95 transition-all mt-6">
|
||||
登录
|
||||
</button><div class="flex items-center gap-4 my-6">
|
||||
<div class="h-px flex-1 bg-outline-variant"></div>
|
||||
<span class="font-label-md text-label-md text-subtle-gray">其他登录方式</span>
|
||||
<div class="h-px flex-1 bg-outline-variant"></div>
|
||||
</div>
|
||||
<button type="button" class="flex items-center justify-center gap-2 bg-white border border-heritage-red/30 text-on-surface rounded-lg py-3 w-full font-bold shadow-sm hover:bg-heritage-red/5 active:scale-95 transition-all">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#07C160">
|
||||
<path d="M8.21 10.05c0-.46.38-.84.84-.84.46 0 .84.38.84.84 0 .46-.38.84-.84.84-.46 0-.84-.38-.84-.84zm6.1 0c0-.46.38-.84.84-.84.46 0 .84.38.84.84 0 .46-.38.84-.84.84-.46 0-.84-.38-.84-.84zM12 4C7.03 4 3 7.58 3 12c0 2.42 1.19 4.58 3.06 6.03l-.77 2.28 2.66-1.33c.64.18 1.33.28 2.05.28.17 0 .33-.01.5-.02-.16-.48-.25-.98-.25-1.51 0-2.9 2.69-5.25 6-5.25.26 0 .51.02.75.05C16.56 9.46 14.5 7.5 12 4zm7.5 8.75c-2.48 0-4.5 1.79-4.5 4s2.02 4 4.5 4c.54 0 1.05-.09 1.53-.25l1.97.98-.57-1.69c1.4-1.08 2.32-2.7 2.32-4.52 0-2.21-2.02-4-4.5-4zm-1.12 2.63c0-.35.28-.63.62-.63.35 0 .63.28.63.63 0 .35-.28.63-.63.63-.34 0-.62-.28-.62-.63zm3 0c0-.35.28-.63.63-.63.34 0 .62.28.62.63 0 .35-.28.63-.62.63-.35 0-.63-.28-.63-.63z"></path>
|
||||
</svg>
|
||||
<span class="font-body-md">微信快捷登录</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<!-- LoginForm Container -->
|
||||
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="fixed bottom-0 w-full py-8 text-center z-10 px-margin-page">
|
||||
<p class="font-label-md text-label-md text-subtle-gray mb-1">
|
||||
© 2026 山西领势酒业有限责任公司 · 总部
|
||||
</p>
|
||||
<p class="font-label-md text-label-md text-subtle-gray/60 flex items-center justify-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]">shield_lock</span>
|
||||
安全管理系统 V1.0.0
|
||||
</p>
|
||||
</footer>
|
||||
<!-- Decorative Corner Element -->
|
||||
<div class="fixed top-0 left-0 p-8 opacity-40 pointer-events-none">
|
||||
<div class="w-32 h-32 border-l border-t border-heritage-red/30"></div>
|
||||
</div>
|
||||
<div class="fixed bottom-0 right-0 p-8 opacity-40 pointer-events-none">
|
||||
<div class="w-32 h-32 border-r border-b border-heritage-red/30"></div>
|
||||
</div>
|
||||
<script>
|
||||
function togglePassword() {
|
||||
const input = document.getElementById('password-input');
|
||||
const icon = document.getElementById('password-toggle-icon');
|
||||
if (input.type === 'password') {
|
||||
input.type = 'text';
|
||||
icon.innerText = 'visibility_off';
|
||||
} else {
|
||||
input.type = 'password';
|
||||
icon.innerText = 'visibility';
|
||||
}
|
||||
}
|
||||
|
||||
// Add subtle animation on load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const formInputs = document.querySelectorAll('input');
|
||||
formInputs.forEach((input, index) => {
|
||||
input.style.opacity = '0';
|
||||
input.style.transform = 'translateY(10px)';
|
||||
setTimeout(() => {
|
||||
input.style.transition = 'all 0.5s ease';
|
||||
input.style.opacity = '1';
|
||||
input.style.transform = 'translateY(0)';
|
||||
}, 200 + (index * 100));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "总部管理登录页",
|
||||
"screenId": "711baaecef7c41b28a5793297027ea44",
|
||||
"syncedAt": "2026-06-29T02:35:25.486Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@@ -0,0 +1,298 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport">
|
||||
<title>我的员工 - 杜康·城市合伙人</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<!-- Custom Design Tokens & Hierarchy -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#37413b",
|
||||
"surface-container": "#efeeec",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-secondary-container": "#745c00",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-bright": "#faf9f7",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"error": "#ba1a1a",
|
||||
"inverse-surface": "#2f3130",
|
||||
"primary-container": "#a61d24",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"surface-tint": "#b3272c",
|
||||
"outline": "#8d706e",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-error": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"subtle-gray": "#999999",
|
||||
"background": "#faf9f7",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"heritage-red": "#A61D24",
|
||||
"secondary": "#735c00",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-dim": "#dadad8",
|
||||
"aged-amber": "#FFBF00",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-surface": "#1a1c1b",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface": "#faf9f7",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-background": "#1a1c1b",
|
||||
"on-primary-fixed": "#410004",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-secondary": "#ffffff",
|
||||
"success-green": "#2D6A4F",
|
||||
"primary": "#820012",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-tertiary-fixed-variant": "#3f4943"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"gutter-card": "12px",
|
||||
"base": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.active-tab {
|
||||
position: relative;
|
||||
color: #820012;
|
||||
font-weight: 600;
|
||||
}
|
||||
.active-tab::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background-color: #A61D24;
|
||||
border-radius: 2px;
|
||||
}
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: #faf9f7;
|
||||
}
|
||||
.glass-header {
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-surface/90 glass-header shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex items-center justify-between px-margin-page h-16 w-full max-w-screen-xl mx-auto">
|
||||
<button aria-label="Back" class="w-10 h-10 flex items-center justify-start text-on-surface active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined">arrow_back_ios</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile text-on-surface">我的员工</h1>
|
||||
<div class="w-10 h-10 flex items-center justify-end">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">more_horiz</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-20 pb-32 min-h-screen">
|
||||
<!-- Search Bar Section -->
|
||||
<div class="px-margin-page mb-6">
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-subtle-gray">search</span>
|
||||
</div>
|
||||
<input class="w-full bg-surface-container-low border-none rounded-xl py-3.5 pl-12 pr-4 focus:ring-2 focus:ring-heritage-red/20 text-body-md placeholder:text-subtle-gray transition-all shadow-sm" placeholder="搜索姓名或手机号" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab Bar Section -->
|
||||
<div class="px-margin-page mb-6 overflow-x-auto no-scrollbar">
|
||||
<div class="flex items-center space-x-8 border-b border-outline-variant/10 min-w-max">
|
||||
<button class="py-3 text-body-md whitespace-nowrap text-on-surface-variant">全部</button>
|
||||
<button class="py-3 text-body-md whitespace-nowrap text-on-surface-variant">内部员工</button>
|
||||
<button class="py-3 text-body-md whitespace-nowrap active-tab text-on-surface">推广员</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Staff List Section -->
|
||||
<div class="px-margin-page space-y-gutter-card">
|
||||
<!-- Staff Card 1 -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/5 active:scale-[0.98] transition-transform duration-200"><div class="flex items-start space-x-4">
|
||||
<div class="w-14 h-14 rounded-full overflow-hidden flex-shrink-0 bg-surface-container border border-outline-variant/20">
|
||||
<img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAq7PIq8jaA0hDNSB4fDAFqyCcmCJKp7kJLx2GPjpWy0zWdswwVyn0VpKlhTZVkFjO1rnZemFMwmwOvozA-XO2ku7wWWpMvkKDIsP0Pm-BQ-cMoy2QdQsFFVmVcNuqWbmSxz3JkqcO51Pc6t4tlUjhloMyEkAC_j3PQt13-r4DU4ayZ0AVW9Jgy3LBxAoW4m8nFTjIyQL9Jg3uqiLdZSKai61MBOaP2iY1e7NjhGKzxDf3A_J5NEfQLiX0z6J9xYUwrLa4dDOo8CDc">
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="font-headline-md text-headline-md text-on-surface">陈经理</span>
|
||||
<span class="bg-primary-fixed/30 text-primary px-2 py-0.5 rounded-full font-label-md text-[10px] leading-none">城市合伙人</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant/40">chevron_right</span>
|
||||
</div>
|
||||
<div class="mt-1.5 flex items-center text-secondary space-x-1.5">
|
||||
<span class="material-symbols-outlined text-[14px]">call</span>
|
||||
<span class="font-label-md tracking-wide">138 **** 9021</span>
|
||||
</div>
|
||||
<div class="mt-6 flex items-center justify-between border-t border-outline-variant/5 pt-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[10px] uppercase tracking-wider font-label-md text-subtle-gray">入职日期</span>
|
||||
<span class="text-body-md text-on-surface-variant mt-0.5">2023-11-15</span>
|
||||
</div>
|
||||
<div class="bg-secondary-container/20 border border-secondary-container/30 px-4 py-2 rounded-lg flex items-baseline space-x-1">
|
||||
<span class="text-on-secondary-container text-[11px] font-medium">本月拓店</span>
|
||||
<span class="text-headline-md font-bold text-secondary">12</span>
|
||||
<span class="text-on-secondary-container text-[11px]">间</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
<!-- Staff Card 2 -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/5 active:scale-[0.98] transition-transform duration-200"><div class="flex items-start space-x-4">
|
||||
<div class="w-14 h-14 rounded-full overflow-hidden flex-shrink-0 bg-surface-container border border-outline-variant/20">
|
||||
<img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBlqK8w99OyCG4nljS2dCWif7BR4HgPwy3WIaLXswWlQB03U7AcnKBo9OzaIeY9nhpCP-VaIlcKbfQJb3iRZNXwXiKdz71QyN8qRqdRZqB--lw9NjZ6Az6mAvm97byRnN0xtQGFh5UaSH1-LFoqv5mDnlUOnZO7F48drpYkgJKZ6JeeIzlAjSM7u0XY_r36nXzfUf4hGzHIjFD8aSzxRDGIIFrss5i0evGqC_EApw3oKelj-xDxuDngzlKHEtA1dEl2VWaVerOMuMs">
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="font-headline-md text-headline-md text-on-surface">李华</span>
|
||||
<span class="bg-surface-container-high text-on-surface-variant px-2 py-0.5 rounded-full font-label-md text-[10px] leading-none">内部员工</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant/40">chevron_right</span>
|
||||
</div>
|
||||
<div class="mt-1.5 flex items-center text-secondary space-x-1.5">
|
||||
<span class="material-symbols-outlined text-[14px]">call</span>
|
||||
<span class="font-label-md tracking-wide">156 **** 8832</span>
|
||||
</div>
|
||||
<div class="mt-6 flex items-center justify-between border-t border-outline-variant/5 pt-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[10px] uppercase tracking-wider font-label-md text-subtle-gray">入职日期</span>
|
||||
<span class="text-body-md text-on-surface-variant mt-0.5">2024-02-01</span>
|
||||
</div>
|
||||
<div class="bg-secondary-container/20 border border-secondary-container/30 px-4 py-2 rounded-lg flex items-baseline space-x-1">
|
||||
<span class="text-on-secondary-container text-[11px] font-medium">本月拓店</span>
|
||||
<span class="text-headline-md font-bold text-secondary">8</span>
|
||||
<span class="text-on-secondary-container text-[11px]">间</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
<!-- Staff Card 3 (Probation) -->
|
||||
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/5 active:scale-[0.98] transition-transform duration-200"><div class="flex items-start space-x-4">
|
||||
<div class="w-14 h-14 rounded-full overflow-hidden flex-shrink-0 bg-surface-container border border-outline-variant/20">
|
||||
<img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAl-qrlxij3wYviJfQ6fidAZcIWhkpPOHUNWZJ1IZiMyl7ukAePS8sPQQsLJT01jrQrvX-OOIBkpGcwX-uABgd23b_ZJPV1bgITY-DkQwwWIs4TpZZcfD6AQLuRQcDz9nuvoqN7V5FTKyy2KW1L-gvEpCfrLMYphqfuVQz5X2nTvCCdX7CE45vnV4g366v6fAME3eJusGOUex-Z7siLBa9GJMk9dkbqm-WfXAV6M1nIeYlCS21PWzJ5mpfU6HI1G46fa4o0AY1IBQo">
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="font-headline-md text-headline-md text-on-surface">张小敏</span>
|
||||
<span class="bg-tertiary-fixed text-tertiary px-2 py-0.5 rounded-full font-label-md text-[10px] leading-none">推广员</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant/40">chevron_right</span>
|
||||
</div>
|
||||
<div class="mt-1.5 flex items-center text-secondary space-x-1.5">
|
||||
<span class="material-symbols-outlined text-[14px]">call</span>
|
||||
<span class="font-label-md tracking-wide">185 **** 7741</span>
|
||||
</div>
|
||||
<div class="mt-6 flex items-center justify-between border-t border-outline-variant/5 pt-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[10px] uppercase tracking-wider font-label-md text-subtle-gray">入职日期</span>
|
||||
<span class="text-body-md text-on-surface-variant mt-0.5">2024-05-12</span>
|
||||
</div>
|
||||
<div class="bg-secondary-container/20 border border-secondary-container/30 px-4 py-2 rounded-lg flex items-baseline space-x-1">
|
||||
<span class="text-on-secondary-container text-[11px] font-medium">本月拓店</span>
|
||||
<span class="text-headline-md font-bold text-secondary">3</span>
|
||||
<span class="text-on-secondary-container text-[11px]">间</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Action Button -->
|
||||
<div class="fixed bottom-0 left-0 w-full p-margin-page bg-surface/80 backdrop-blur-md pb-safe">
|
||||
<button class="w-full h-14 bg-heritage-red text-on-primary font-headline-md rounded-xl shadow-lg active:scale-95 transition-all flex items-center justify-center space-x-2">
|
||||
<span class="material-symbols-outlined">person_add</span>
|
||||
<span class="">添加员工</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Interaction Script -->
|
||||
<script>
|
||||
// Simple tab switching logic for demo
|
||||
const tabs = document.querySelectorAll('.px-margin-page .flex button');
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
tabs.forEach(t => t.classList.remove('active-tab', 'text-on-surface'));
|
||||
tabs.forEach(t => t.classList.add('text-on-surface-variant'));
|
||||
tab.classList.add('active-tab', 'text-on-surface');
|
||||
tab.classList.remove('text-on-surface-variant');
|
||||
});
|
||||
});
|
||||
|
||||
// Search highlight interaction
|
||||
const searchInput = document.querySelector('input');
|
||||
searchInput.addEventListener('focus', () => {
|
||||
searchInput.parentElement.classList.add('ring-2', 'ring-heritage-red/20');
|
||||
});
|
||||
searchInput.addEventListener('blur', () => {
|
||||
searchInput.parentElement.classList.remove('ring-2', 'ring-heritage-red/20');
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "我的员工页面",
|
||||
"screenId": "abae8110b2aa413e905bc07fe3a74866",
|
||||
"syncedAt": "2026-06-29T02:35:30.401Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,293 @@
|
||||
<!DOCTYPE html><html lang="zh-CN"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<title>拦截管理 - 杜康城市伙伴</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary": "#37413b",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"outline": "#8d706e",
|
||||
"aged-amber": "#FFBF00",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"surface-dim": "#dadad8",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-surface": "#1a1c1b",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"background": "#faf9f7",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"surface-tint": "#b3272c",
|
||||
"subtle-gray": "#999999",
|
||||
"secondary": "#735c00",
|
||||
"on-background": "#1a1c1b",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-container": "#efeeec",
|
||||
"heritage-red": "#A61D24",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-secondary-container": "#745c00",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"success-green": "#2D6A4F",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-secondary": "#ffffff",
|
||||
"primary-container": "#a61d24",
|
||||
"primary": "#820012",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-bright": "#faf9f7",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"error-container": "#ffdad6",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-on-surface": "#f1f1ef"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "4px",
|
||||
"base": "8px",
|
||||
"stack-md": "16px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.notch-left, .notch-right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.notch-left { left: -5px; transform: translateY(-50%); }
|
||||
.notch-right { right: -5px; transform: translateY(-50%); }
|
||||
|
||||
.premium-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.scroll-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md min-h-screen pb-32">
|
||||
<!-- Top Navigation -->
|
||||
<header class="w-full sticky top-0 z-50 bg-background flex justify-between items-center px-margin-page h-14 w-full">
|
||||
<button class="active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-primary">拦截管理</h1>
|
||||
<button class="active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-primary">search</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="px-margin-page pt-4 space-y-6">
|
||||
<!-- Search & Filter Area -->
|
||||
<section class="space-y-4">
|
||||
<div class="relative group">
|
||||
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant opacity-60">search</span>
|
||||
<input class="w-full h-12 pl-12 pr-4 bg-surface-container-low border-none rounded-xl focus:ring-1 focus:ring-heritage-red/20 transition-all text-body-md" placeholder="输入订单号或收货人姓名" type="text">
|
||||
</div>
|
||||
<!-- Warning Banner -->
|
||||
<div class="bg-primary/5 border border-primary/10 rounded-xl p-4 flex gap-3">
|
||||
<span class="material-symbols-outlined text-heritage-red text-[20px]">info</span>
|
||||
<p class="text-label-md text-on-surface-variant leading-relaxed">
|
||||
温馨提示：拦截操作将立即停止当前配送流程，请务必与配送员及总部确认原因。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Tabs -->
|
||||
<nav class="flex space-x-8 border-b border-surface-container-highest">
|
||||
<button class="pb-3 text-body-md font-medium text-on-surface-variant relative">
|
||||
全部
|
||||
</button>
|
||||
<button class="pb-3 text-body-md font-semibold text-heritage-red relative">
|
||||
配送中
|
||||
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-heritage-red rounded-full"></span>
|
||||
</button>
|
||||
<button class="pb-3 text-body-md font-medium text-on-surface-variant relative">
|
||||
待配送
|
||||
</button>
|
||||
</nav>
|
||||
<!-- Order List -->
|
||||
<div class="space-y-4">
|
||||
<!-- Order Card 1 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl premium-shadow overflow-hidden border border-surface-container-high">
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-label-md text-on-surface-variant tracking-wider">DK202310279981</span>
|
||||
<span class="px-2.5 py-1 rounded-full bg-secondary-container text-on-secondary-container font-label-md">配送中</span>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="w-20 h-20 bg-surface-container rounded-lg flex-shrink-0 overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="A studio photograph of a premium Chinese Baijiu bottle, Dukang Royal Reserve 15 Years, featuring an elegant glass design with golden detailing. The lighting is soft and cinematic, highlighting the clarity of the liquor and the textured label. The background is a minimalist warm cream tone, reflecting a heritage modernism aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDIIY4v34b8qZ9VnDomAbzr43VvEpyJaCgLa5Wh4JkLV8aJE0CLuCtG8GV-4wrb9tgn0s7ougkZrleaDN53gpuE7pf-p9645i1Aka9Ll-poB7NTGQngb3BTDWhmZDOX2_OfefTNyI2UwGrql5XLF8rsLWE9LRegFdjecpilIiV7RNRIQ3HMKPat6g_-zADv8TBQEl9UFy9to6AYKnixUA4JXb60goXraq8ELGdBAX1mHZKV9VdG2ppQCTO0c0TjaN1n516_vNCiEqA">
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-headline-md text-on-surface truncate">杜康·御享15年</h3>
|
||||
<p class="mt-1 text-label-md text-on-surface-variant">张晓明 · 138****8888</p>
|
||||
<p class="text-label-md text-on-surface-variant truncate">洛阳市洛龙区长夏门街开元大道交叉口...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-surface-container-low flex justify-end gap-3">
|
||||
<button class="px-4 py-2 rounded-lg border border-outline-variant text-on-surface-variant text-label-md font-medium active:scale-95 transition-transform">查看详情</button>
|
||||
<button class="px-4 py-2 rounded-lg bg-heritage-red text-white text-label-md font-medium active:scale-95 transition-transform">拦截配送</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Order Card 2 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl premium-shadow overflow-hidden border border-surface-container-high">
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-label-md text-on-surface-variant tracking-wider">DK202310279945</span>
|
||||
<span class="px-2.5 py-1 rounded-full bg-secondary-container text-on-secondary-container font-label-md">配送中</span>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="w-20 h-20 bg-surface-container rounded-lg flex-shrink-0 overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="Close up shot of a classic Chinese liquor bottle label with traditional calligraphy and a red seal. The bottle is nestled in a high-end gift box with velvet lining. Professional lighting creates a sense of luxury and authenticity, emphasizing the heritage of the Dukang brand. Neutral, sophisticated color palette." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDXSr4jpuxsQqg3jMSCp66vlEHMV-X5gu33oaMGvDEtwr0IiQuayQFu7kRANNvqUN5kw8sNEvi6dJYs6D1fwd4MjiBFs9crwp2WxDapSIcIT6At2thEmGwXvun-s-2ya4ko_N6QZxR9mmiHd0uoSkoVdYWpSNxn_ncie4ZExSDW6sYM9zHvXUjEgwOjRk8Q01WtKbszZAfeboMmAxeZcNFh9f7ipfMFuS9BbRiwOCLmaqDzgb2-kHKVP-M21-6ZUxYw5scvom9bnlw">
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-headline-md text-on-surface truncate">杜康·酒祖窖藏</h3>
|
||||
<p class="mt-1 text-label-md text-on-surface-variant">李庆华 · 155****2233</p>
|
||||
<p class="text-label-md text-on-surface-variant truncate">郑州市金水区未来路街道曼哈顿广场...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-surface-container-low flex justify-end gap-3">
|
||||
<button class="px-4 py-2 rounded-lg border border-outline-variant text-on-surface-variant text-label-md font-medium active:scale-95 transition-transform">查看详情</button>
|
||||
<button class="px-4 py-2 rounded-lg bg-heritage-red text-white text-label-md font-medium active:scale-95 transition-transform">拦截配送</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Order Card 3 (Visual variation for different status) -->
|
||||
<div class="bg-surface-container-lowest rounded-xl premium-shadow overflow-hidden border border-surface-container-high opacity-70">
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-label-md text-on-surface-variant tracking-wider">DK202310279812</span>
|
||||
<span class="px-2.5 py-1 rounded-full bg-surface-variant text-on-surface-variant font-label-md">待配送</span>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="w-20 h-20 bg-surface-container rounded-lg flex-shrink-0 overflow-hidden grayscale">
|
||||
<img class="w-full h-full object-cover" data-alt="Minimalist product photography of a premium Chinese spirit bottle against a soft, clean architectural background. The scene is bright and airy, representing high-quality service and modern distribution. The aesthetic is calm and organized, reflecting the efficiency of the delivery management system." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB_kMraA8rHsrwtk9XaRzzoFOt2w6KAT9Z9MhDu_yePz5p5d9Tek2DYB1_Txf19BjaHI7k0Ty8BcxyrgBWOQU71Pg2mwMY4n0l5k6eEX5I9CksPyaIXBgJfYln-lrUcRdTXObwgpU2dclJnDH3CPNssuGS-_TLErFS77bfMg9dJWupGjp7Px1IJFgV7u3N0qtsc7whSlujTInjDRjDfhpuU_rU48Of9uAtd5ZFlJiYX1pn5J_CvrpvZasXo0BswFN53SYgluyubg6I">
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-headline-md text-on-surface truncate">杜康·御享12年</h3>
|
||||
<p class="mt-1 text-label-md text-on-surface-variant">王建国 · 131****4455</p>
|
||||
<p class="text-label-md text-on-surface-variant truncate">洛阳市涧西区南昌路万达广场办公楼...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-surface-container-low flex justify-end gap-3">
|
||||
<button class="px-4 py-2 rounded-lg border border-outline-variant text-on-surface-variant text-label-md font-medium active:scale-95 transition-transform">查看详情</button>
|
||||
<button class="px-4 py-2 rounded-lg border border-heritage-red/30 text-heritage-red text-label-md font-medium active:scale-95 transition-transform">撤回订单</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
|
||||
<script>
|
||||
// Simple Interaction logic for intercept button
|
||||
document.querySelectorAll('button').forEach(btn => {
|
||||
if (btn.innerText === '拦截配送') {
|
||||
btn.addEventListener('click', function() {
|
||||
const confirmAction = confirm('确定要拦截该订单吗？此操作将立即停止配送。');
|
||||
if (confirmAction) {
|
||||
this.innerText = '正在拦截...';
|
||||
this.disabled = true;
|
||||
this.classList.add('opacity-50');
|
||||
setTimeout(() => {
|
||||
alert('拦截请求已发送，请等待总部审核结果。');
|
||||
this.innerText = '已申请拦截';
|
||||
}, 1500);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Tab switching visual effect
|
||||
const tabs = document.querySelectorAll('nav button');
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
tabs.forEach(t => {
|
||||
t.classList.remove('text-heritage-red', 'font-semibold');
|
||||
t.classList.add('text-on-surface-variant', 'font-medium');
|
||||
const indicator = t.querySelector('span');
|
||||
if (indicator) indicator.remove();
|
||||
});
|
||||
tab.classList.add('text-heritage-red', 'font-semibold');
|
||||
tab.classList.remove('text-on-surface-variant', 'font-medium');
|
||||
const line = document.createElement('span');
|
||||
line.className = 'absolute bottom-0 left-0 w-full h-0.5 bg-heritage-red rounded-full';
|
||||
tab.appendChild(line);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "拦截配送管理页",
|
||||
"screenId": "08e4841bf9e54c77bdc2afb33760b551",
|
||||
"syncedAt": "2026-06-29T02:33:18.012Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
@@ -0,0 +1,317 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>推广码管理 - 杜康合作伙伴</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=Be+Vietnam+Pro:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"success-green": "#2D6A4F",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-bright": "#faf9f7",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"tertiary-container": "#4e5852",
|
||||
"heritage-red": "#A61D24",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-surface": "#2f3130",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"background": "#faf9f7",
|
||||
"secondary": "#735c00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"primary-container": "#a61d24",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-error": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"primary": "#820012",
|
||||
"surface": "#faf9f7",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container": "#efeeec",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-secondary-container": "#745c00",
|
||||
"subtle-gray": "#999999",
|
||||
"outline": "#8d706e",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-background": "#1a1c1b",
|
||||
"secondary-container": "#fed65b",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary": "#37413b",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-tint": "#b3272c"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.notch-left, .notch-right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #faf9f7; /* Matches surface color */
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.notch-left { left: -6px; }
|
||||
.notch-right { right: -6px; }
|
||||
|
||||
.glass-header {
|
||||
backdrop-filter: blur(12px);
|
||||
background: rgba(250, 249, 247, 0.8);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-md antialiased pb-32">
|
||||
<!-- TopAppBar (JSON Mapping) -->
|
||||
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface-container-low z-50 shadow-sm glass-header">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="menu">arrow_back</span>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">推广码管理</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-20 px-margin-page">
|
||||
<!-- Overview Stats Hero -->
|
||||
<section class="mb-stack-lg bg-heritage-red rounded-xl p-6 text-white shadow-lg relative overflow-hidden">
|
||||
<div class="relative z-10">
|
||||
<p class="text-label-md font-label-md opacity-80 mb-1">本月累计推广收益</p>
|
||||
<h2 class="text-headline-xl font-headline-xl mb-4">¥ 128,450.00</h2>
|
||||
<div class="grid grid-cols-3 gap-2 border-t border-white/20 pt-4">
|
||||
<div>
|
||||
<p class="text-[10px] uppercase tracking-wider opacity-70">总扫码</p>
|
||||
<p class="font-bold text-lg">4,291</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] uppercase tracking-wider opacity-70">新增注册</p>
|
||||
<p class="font-bold text-lg">852</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] uppercase tracking-wider opacity-70">转化率</p>
|
||||
<p class="font-bold text-lg">19.8%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative circle -->
|
||||
<div class="absolute -right-12 -top-12 w-48 h-48 bg-white/10 rounded-full blur-3xl"></div>
|
||||
</section>
|
||||
<!-- Search & Filter Bar -->
|
||||
<div class="flex gap-3 mb-stack-md">
|
||||
<div class="relative flex-1">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-subtle-gray text-lg" data-icon="search">search</span>
|
||||
<input class="w-full pl-10 pr-4 py-2.5 bg-white border-none rounded-xl text-sm focus:ring-1 focus:ring-heritage-red shadow-sm" placeholder="搜索城市或场景" type="text">
|
||||
</div>
|
||||
<button class="bg-white p-2.5 rounded-xl shadow-sm text-on-surface-variant">
|
||||
<span class="material-symbols-outlined align-middle" data-icon="filter_list">filter_list</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- CodeList -->
|
||||
<div class="space-y-4">
|
||||
<!-- CodeCard 1 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent hover:border-heritage-red/10 transition-all">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-lg bg-surface-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-heritage-red" data-icon="qr_code_2">qr_code_2</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h3 class="font-headline-md text-headline-md text-ink-black">洛阳市</h3>
|
||||
<span class="px-2 py-0.5 bg-aged-amber/10 text-secondary text-[10px] font-bold rounded uppercase">品鉴会</span>
|
||||
</div>
|
||||
<p class="text-label-md font-label-md text-subtle-gray">ID: DK-PROMO-00129</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-subtle-gray hover:text-heritage-red transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Stats Grid -->
|
||||
<div class="grid grid-cols-3 gap-4 bg-surface rounded-lg p-3 mb-4">
|
||||
<div class="text-center">
|
||||
<p class="text-[10px] text-subtle-gray mb-1">扫码UV</p>
|
||||
<p class="font-semibold text-ink-black">1,240</p>
|
||||
</div>
|
||||
<div class="text-center border-x border-surface-container-highest">
|
||||
<p class="text-[10px] text-subtle-gray mb-1">注册数</p>
|
||||
<p class="font-semibold text-ink-black">312</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-[10px] text-subtle-gray mb-1">GMV</p>
|
||||
<p class="font-semibold text-heritage-red">¥45.2k</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-2">
|
||||
<button class="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg border border-heritage-red text-heritage-red font-semibold text-sm active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="download">download</span>
|
||||
下载码
|
||||
</button>
|
||||
<button class="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg bg-surface-container-high text-on-surface-variant font-semibold text-sm active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="visibility">visibility</span>
|
||||
查看详情
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CodeCard 2 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-lg bg-surface-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-heritage-red" data-icon="qr_code_2">qr_code_2</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h3 class="font-headline-md text-headline-md text-ink-black">郑州市</h3>
|
||||
<span class="px-2 py-0.5 bg-aged-amber/10 text-secondary text-[10px] font-bold rounded uppercase">高端餐饮</span>
|
||||
</div>
|
||||
<p class="text-label-md font-label-md text-subtle-gray">ID: DK-PROMO-00130</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-subtle-gray">
|
||||
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-4 bg-surface rounded-lg p-3 mb-4">
|
||||
<div class="text-center">
|
||||
<p class="text-[10px] text-subtle-gray mb-1">扫码UV</p>
|
||||
<p class="font-semibold text-ink-black">892</p>
|
||||
</div>
|
||||
<div class="text-center border-x border-surface-container-highest">
|
||||
<p class="text-[10px] text-subtle-gray mb-1">注册数</p>
|
||||
<p class="font-semibold text-ink-black">156</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-[10px] text-subtle-gray mb-1">GMV</p>
|
||||
<p class="font-semibold text-heritage-red">¥28.1k</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg border border-heritage-red text-heritage-red font-semibold text-sm">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="download">download</span>
|
||||
下载码
|
||||
</button>
|
||||
<button class="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg bg-surface-container-high text-on-surface-variant font-semibold text-sm">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="visibility">visibility</span>
|
||||
查看详情
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Promotional Banner (Visual Depth) -->
|
||||
<div class="relative w-full h-32 rounded-xl overflow-hidden shadow-md">
|
||||
|
||||
|
||||
</div>
|
||||
<!-- CodeCard 3 -->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation (JSON Mapping) -->
|
||||
|
||||
<!-- Floating Generate Button -->
|
||||
<div class="fixed bottom-20 left-0 w-full px-margin-page pointer-events-none">
|
||||
<button class="w-full pointer-events-auto flex items-center justify-center gap-3 bg-heritage-red text-white py-4 rounded-xl font-bold shadow-2xl active:scale-[0.98] transition-all">
|
||||
<span class="material-symbols-outlined" data-icon="add_circle">add_circle</span>生成新推广码
|
||||
</button>
|
||||
</div>
|
||||
<script>
|
||||
// Micro-interactions
|
||||
document.querySelectorAll('button').forEach(button => {
|
||||
button.addEventListener('touchstart', function() {
|
||||
this.classList.add('opacity-80');
|
||||
});
|
||||
button.addEventListener('touchend', function() {
|
||||
this.classList.remove('opacity-80');
|
||||
});
|
||||
});
|
||||
|
||||
// Floating action button visibility on scroll
|
||||
let lastScroll = 0;
|
||||
const fab = document.querySelector('.fixed.bottom-20');
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
if (currentScroll > lastScroll && currentScroll > 200) {
|
||||
fab.style.transform = 'translateY(120px)';
|
||||
fab.style.opacity = '0';
|
||||
} else {
|
||||
fab.style.transform = 'translateY(0)';
|
||||
fab.style.opacity = '1';
|
||||
}
|
||||
fab.style.transition = 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "推广码管理页",
|
||||
"screenId": "969c535a5dd94df4990e26536f3c0f1d",
|
||||
"syncedAt": "2026-06-29T02:34:07.224Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@@ -0,0 +1,344 @@
|
||||
<!DOCTYPE html><html lang="zh-CN"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>杜康总部 - 推广码详情</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"secondary-fixed": "#ffe088",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-primary": "#ffffff",
|
||||
"aged-amber": "#FFBF00",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"surface-dim": "#dadad8",
|
||||
"secondary": "#735c00",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"primary": "#820012",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"secondary-container": "#fed65b",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-bright": "#faf9f7",
|
||||
"background": "#faf9f7",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-error-container": "#93000a",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"on-secondary-container": "#745c00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-background": "#1a1c1b",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface": "#faf9f7",
|
||||
"outline-variant": "#e2bebc",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-secondary": "#ffffff",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"outline": "#8d706e",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-container": "#efeeec",
|
||||
"error": "#ba1a1a",
|
||||
"primary-container": "#a61d24",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"tertiary": "#37413b"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "4px",
|
||||
"margin-page": "20px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-lg": "32px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"body-md": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.qr-gradient {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f4f3f1 100%);
|
||||
}
|
||||
.notch-ticket {
|
||||
mask-image: radial-gradient(circle at 0px 50%, transparent 8px, black 8.5px),
|
||||
radial-gradient(circle at 100% 50%, transparent 8px, black 8.5px);
|
||||
-webkit-mask-image: radial-gradient(circle at 0px 50%, transparent 8px, black 8.5px),
|
||||
radial-gradient(circle at 100% 50%, transparent 8px, black 8.5px);
|
||||
}
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background min-h-screen text-on-surface font-body-md">
|
||||
<!-- Top AppBar -->
|
||||
<header class="bg-surface-bright dark:bg-surface-dim shadow-[0px_4px_20px_rgba(166,29,36,0.05)] w-full top-0 sticky flex justify-between items-center px-margin-page h-16 z-40">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="active:scale-95 duration-150 text-heritage-red">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile md:text-headline-md text-heritage-red">推广码详情</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-on-surface-variant font-label-md">ID: A-06</span>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center overflow-hidden">
|
||||
<img alt="User Avatar" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCVbKOTwZhfwCraSAkeou28rXeLXBc0IMXcySK8C4HixcIt8t2fd-1Gupj_ue7kejDBaoOL4_ahNg7lXlnxUHz8Y5gfe5mp3XG_Cpa-SCKkfDXMrb29oqFL_ulJCNNlYrTJvF5yi6QF6s7Lh829uzc06Hr1UMWlh9xzOndCY7eF2jI6Vaq96CdJ1xBDpZR_xnI356z5eReesH-SnuIZY8idzQGZgXv-1lXqic8iRg1oMxbCK6coVQlxOcCIaLvvlT7xsJtyPwPzBac">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="px-margin-page pt-stack-md pb-32">
|
||||
<!-- QR Code & Basic Info Section -->
|
||||
<section class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] p-5 mb-stack-md overflow-hidden relative" style="opacity: 1; transform: translateY(0px); transition: 0.6s ease-out;">
|
||||
<div class="flex flex-col md:flex-row gap-6 items-center">
|
||||
<!-- QR Container -->
|
||||
<div class="relative p-4 qr-gradient rounded-lg border border-outline-variant/30">
|
||||
<img alt="QR Code" class="w-32 h-32 md:w-40 md:h-40" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAYkbmte5l6hR_jOesWIOPaT6zS7Lo-Y1h-fuzSEmI1DDerkvkupr3BSRweFn3QFSkuoeGLeoUlAb4D8UlL7YoESniwpQTimd_60kQOcFi1XRdjwj10YOmYEUeogYE-cSY5NqMg_P8kXSCtvLhHdnJzk8zsmpRfNK-FoK_0hlBskE7nlYWRUbbpOCIpgCY3jK9BL-9n8PDkBDTe5kxQGMAQSn3-Sh0PiJn0P_d1L0dcEnpsn4AgbOy-9x5NF7YPiX24-nO_xVRgP4U">
|
||||
<div class="absolute inset-0 border-2 border-heritage-red/10 rounded-lg pointer-events-none"></div>
|
||||
</div>
|
||||
<!-- Details -->
|
||||
<div class="flex-1 space-y-4 w-full">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="font-headline-md text-ink-black mb-1">Luoyang-HQ-001</h2>
|
||||
<span class="bg-secondary-container/30 text-secondary px-3 py-1 rounded-full font-label-md">运行中</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">info</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 border-t border-surface-variant pt-4">
|
||||
<div>
|
||||
<p class="text-subtle-gray font-label-md mb-1 uppercase tracking-wider">所属城市</p>
|
||||
<p class="font-body-lg text-ink-black">洛阳</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-subtle-gray font-label-md mb-1 uppercase tracking-wider">合伙人名称</p>
|
||||
<p class="font-body-lg text-ink-black">龙门大酒店</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-subtle-gray font-label-md mb-1 uppercase tracking-wider">推广场景</p>
|
||||
<p class="font-body-lg text-ink-black">前台摆台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Stats Section (2x2 Grid) -->
|
||||
<section class="grid grid-cols-2 gap-4 mb-stack-md" style="opacity: 1; transform: translateY(0px); transition: 0.6s ease-out;">
|
||||
<div class="bg-surface-container-lowest p-5 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex flex-col justify-between">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="material-symbols-outlined text-heritage-red" style="font-variation-settings: 'FILL' 1;">visibility</span>
|
||||
<span class="text-subtle-gray font-label-md">扫码UV</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-headline-xl font-headline-xl text-heritage-red">1,284</span>
|
||||
<span class="text-success-green font-label-md mt-1">较上月 +12%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-5 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex flex-col justify-between">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="material-symbols-outlined text-heritage-red" style="font-variation-settings: 'FILL' 1;">person_add</span>
|
||||
<span class="text-subtle-gray font-label-md">注册用户</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-headline-xl font-headline-xl text-heritage-red">456</span>
|
||||
<span class="text-subtle-gray font-label-md mt-1">转化率: 35%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-5 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex flex-col justify-between">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="material-symbols-outlined text-heritage-red" style="font-variation-settings: 'FILL' 1;">shopping_cart</span>
|
||||
<span class="text-subtle-gray font-label-md">下单数</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-headline-xl font-headline-xl text-heritage-red">92</span>
|
||||
<span class="text-success-green font-label-md mt-1">+5% 增长</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-5 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex flex-col justify-between relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-16 h-16 bg-aged-amber/10 rounded-bl-full -mr-8 -mt-8"></div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="material-symbols-outlined text-aged-amber" style="font-variation-settings: 'FILL' 1;">payments</span>
|
||||
<span class="text-subtle-gray font-label-md">成交总额 (GMV)</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-headline-xl font-headline-xl text-heritage-red">¥45.2k</span>
|
||||
<span class="text-aged-amber font-label-md mt-1">优质表现</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- List Section: 推广订单明细 -->
|
||||
<section class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] overflow-hidden" style="opacity: 1; transform: translateY(0px); transition: 0.6s ease-out;">
|
||||
<div class="px-5 py-4 border-b border-surface-variant flex justify-between items-center">
|
||||
<h3 class="font-headline-md text-ink-black">推广订单明细</h3>
|
||||
<button class="text-heritage-red font-label-md flex items-center hover:opacity-80">
|
||||
查看全部 <span class="material-symbols-outlined text-[16px] ml-1">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="divide-y divide-surface-variant/50">
|
||||
<!-- List Item 1 -->
|
||||
<div class="px-5 py-4 hover:bg-surface-bright transition-colors">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p class="font-body-lg text-ink-black font-semibold">订单 #2024080101</p>
|
||||
<p class="text-subtle-gray font-label-md">2024-08-01 14:23:45</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-headline-md text-ink-black font-bold">¥1,299.00</p>
|
||||
<div class="flex flex-col gap-1 mt-1"><span class="text-aged-amber font-label-md bg-aged-amber/10 px-2 py-0.5 rounded">下单佣金: ¥80.00</span><span class="text-aged-amber font-label-md bg-aged-amber/10 px-2 py-0.5 rounded">核销佣金: ¥40.00</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- List Item 2 -->
|
||||
<div class="px-5 py-4 hover:bg-surface-bright transition-colors">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p class="font-body-lg text-ink-black font-semibold">订单 #2024080102</p>
|
||||
<p class="text-subtle-gray font-label-md">2024-08-01 15:10:22</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-headline-md text-ink-black font-bold">¥649.00</p>
|
||||
<div class="flex flex-col gap-1 mt-1"><span class="text-aged-amber font-label-md bg-aged-amber/10 px-2 py-0.5 rounded">下单佣金: ¥40.00</span><span class="text-aged-amber font-label-md bg-aged-amber/10 px-2 py-0.5 rounded">核销佣金: ¥20.00</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- List Item 3 -->
|
||||
<div class="px-5 py-4 hover:bg-surface-bright transition-colors">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p class="font-body-lg text-ink-black font-semibold">订单 #2024073109</p>
|
||||
<p class="text-subtle-gray font-label-md">2024-07-31 20:05:11</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-headline-md text-ink-black font-bold">¥2,598.00</p>
|
||||
<div class="flex flex-col gap-1 mt-1"><span class="text-aged-amber font-label-md bg-aged-amber/10 px-2 py-0.5 rounded">下单佣金: ¥160.00</span><span class="text-aged-amber font-label-md bg-aged-amber/10 px-2 py-0.5 rounded">核销佣金: ¥80.00</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- List Item 4 -->
|
||||
<div class="px-5 py-4 hover:bg-surface-bright transition-colors">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p class="font-body-lg text-ink-black font-semibold">订单 #2024073108</p>
|
||||
<p class="text-subtle-gray font-label-md">2024-07-31 18:44:30</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-headline-md text-ink-black font-bold">¥899.00</p>
|
||||
<div class="flex flex-col gap-1 mt-1"><span class="text-aged-amber font-label-md bg-aged-amber/10 px-2 py-0.5 rounded">下单佣金: ¥50.00</span><span class="text-aged-amber font-label-md bg-aged-amber/10 px-2 py-0.5 rounded">核销佣金: ¥30.00</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- List Item 5 -->
|
||||
<div class="px-5 py-4 hover:bg-surface-bright transition-colors">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p class="font-body-lg text-ink-black font-semibold">订单 #2024073012</p>
|
||||
<p class="text-subtle-gray font-label-md">2024-07-30 11:20:15</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-headline-md text-ink-black font-bold">¥1,299.00</p>
|
||||
<div class="flex flex-col gap-1 mt-1"><span class="text-aged-amber font-label-md bg-aged-amber/10 px-2 py-0.5 rounded">下单佣金: ¥80.00</span><span class="text-aged-amber font-label-md bg-aged-amber/10 px-2 py-0.5 rounded">核销佣金: ¥40.00</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Fixed Action Bar -->
|
||||
<footer class="fixed bottom-0 left-0 w-full bg-surface-container-lowest border-t border-outline-variant/10 shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] px-margin-page py-4 flex gap-4 z-50">
|
||||
<button class="flex-1 border-2 border-heritage-red text-heritage-red font-headline-md py-3 rounded-xl active:scale-95 transition-transform duration-150 flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined">download</span>
|
||||
下载推广码
|
||||
</button>
|
||||
<button class="flex-1 bg-surface-container-highest text-error font-headline-md py-3 rounded-xl active:scale-95 transition-transform duration-150 flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined">block</span>
|
||||
停用该码
|
||||
</button>
|
||||
</footer>
|
||||
<script>
|
||||
document.querySelectorAll('button').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const text = this.innerText.trim();
|
||||
if (text.includes('停用')) {
|
||||
if (confirm('确认停用该推广码？停用后扫码将不再追踪数据。')) {
|
||||
alert('已提交停用申请');
|
||||
}
|
||||
} else if (text.includes('下载')) {
|
||||
alert('正在生成高清推广海报...');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const observerOptions = {
|
||||
threshold: 0.1
|
||||
};
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('section').forEach(section => {
|
||||
section.style.opacity = '0';
|
||||
section.style.transform = 'translateY(20px)';
|
||||
section.style.transition = 'all 0.6s ease-out';
|
||||
observer.observe(section);
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "推广码详情页 - 佣金明细拆分版",
|
||||
"screenId": "04a705926c964842b548918017410551",
|
||||
"syncedAt": "2026-06-29T02:34:23.364Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1,331 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style="width: 390px; height: 1239px; overflow: hidden; position: relative;"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Inter:wght@400;500&family=Be+Vietnam+Pro:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.notch-left, .notch-right {
|
||||
position: relative;
|
||||
}
|
||||
.notch-left::before, .notch-right::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background: #faf9f7;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.notch-left::before { left: -4px; border-radius: 0 8px 8px 0; }
|
||||
.notch-right::after { right: -4px; border-radius: 8px 0 0 8px; }
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.custom-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"aged-amber": "#FFBF00",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-container": "#efeeec",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"primary-container": "#a61d24",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"subtle-gray": "#999999",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-primary-fixed": "#410004",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#1a1c1b",
|
||||
"secondary": "#735c00",
|
||||
"on-error-container": "#93000a",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-error": "#ffffff",
|
||||
"outline": "#8d706e",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"background": "#faf9f7",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-surface": "#1a1c1b",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-tint": "#b3272c",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"outline-variant": "#e2bebc",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-dim": "#dadad8",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-bright": "#faf9f7",
|
||||
"secondary-container": "#fed65b",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary": "#820012",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"tertiary": "#37413b"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "4px",
|
||||
"base": "8px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-md": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-md min-h-screen pb-32">
|
||||
<!-- Top App Bar -->
|
||||
<header class="bg-surface dark:bg-on-background shadow-[0px_4px_20px_rgba(166,29,36,0.05)] w-full top-0 sticky z-40 transition-all">
|
||||
<div class="flex justify-between items-center px-margin-page h-16 w-full max-w-7xl mx-auto">
|
||||
<button class="text-heritage-red hover:opacity-80 transition-opacity active:scale-95 duration-150">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="text-headline-md font-headline-md font-bold tracking-tight text-heritage-red">杜康合伙人</h1>
|
||||
<button class="text-heritage-red hover:opacity-80 transition-opacity active:scale-95 duration-150">
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="px-margin-page pt-stack-md space-y-stack-md max-w-md mx-auto">
|
||||
<!-- Page Title & Week Selector -->
|
||||
<section class="space-y-base">
|
||||
<h2 class="text-headline-lg-mobile font-headline-lg-mobile text-ink-black">经营数据周报</h2>
|
||||
<div class="flex gap-stack-sm overflow-x-auto custom-scrollbar pb-base">
|
||||
<div class="flex-none px-4 py-2 rounded-xl bg-heritage-red text-white font-label-md text-label-md shadow-md">
|
||||
10月23日 - 10月29日
|
||||
</div>
|
||||
<div class="flex-none px-4 py-2 rounded-xl bg-surface-container text-on-surface-variant font-label-md text-label-md">
|
||||
10月16日 - 10月22日
|
||||
</div>
|
||||
<div class="flex-none px-4 py-2 rounded-xl bg-surface-container text-on-surface-variant font-label-md text-label-md">
|
||||
10月09日 - 10月15日
|
||||
</div>
|
||||
<div class="flex-none px-4 py-2 rounded-xl bg-surface-container text-on-surface-variant font-label-md text-label-md">
|
||||
10月02日 - 10月08日
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Summary Hero Card -->
|
||||
<section class="relative overflow-hidden rounded-xl bg-white p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
|
||||
<div class="absolute top-0 right-0 -mr-8 -mt-8 opacity-10">
|
||||
<span class="material-symbols-outlined text-[120px] text-heritage-red">analytics</span>
|
||||
</div>
|
||||
<div class="relative z-10 space-y-base">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="text-label-md font-label-md text-subtle-gray uppercase tracking-wider">累计成交额 (GMV)</p>
|
||||
<p class="text-headline-xl font-headline-xl text-heritage-red mt-1">¥1,284,500</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 bg-success-green/10 text-success-green px-2 py-1 rounded-full">
|
||||
<span class="material-symbols-outlined text-[14px]">trending_up</span>
|
||||
<span class="text-label-md font-label-md">12.5%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-stack-md pt-base border-t border-surface-container-highest">
|
||||
<div>
|
||||
<p class="text-label-md font-label-md text-subtle-gray">活跃门店</p>
|
||||
<div class="flex items-end gap-1">
|
||||
<span class="text-headline-md font-headline-md text-ink-black">152</span>
|
||||
<span class="text-label-md font-label-md text-subtle-gray pb-0.5">/ 180</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-md font-label-md text-subtle-gray">订单总量</p>
|
||||
<p class="text-headline-md font-headline-md text-ink-black">3,842</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- New Stores Progress -->
|
||||
<section class="bg-white rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] space-y-stack-md">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-aged-amber" style="font-variation-settings: 'FILL' 1;">storefront</span>
|
||||
<h3 class="text-headline-md font-headline-md text-ink-black">本周新签约门店</h3>
|
||||
</div>
|
||||
<span class="text-headline-md font-headline-md text-aged-amber">14 <span class="text-label-md font-label-md text-subtle-gray">/ 20</span></span>
|
||||
</div>
|
||||
<div class="relative h-3 w-full bg-surface-container-highest rounded-full overflow-hidden">
|
||||
<div class="absolute top-0 left-0 h-full bg-gradient-to-r from-heritage-red to-aged-amber rounded-full transition-all duration-1000" style="width: 70%;"></div>
|
||||
</div>
|
||||
<p class="text-label-md font-label-md text-subtle-gray italic">已完成本周目标的 70%。还差 6 家！</p>
|
||||
</section>
|
||||
<!-- Trend Chart -->
|
||||
<section class="bg-white rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] space-y-stack-md">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-headline-md font-headline-md text-ink-black">每日成交趋势</h3>
|
||||
<span class="text-label-md font-label-md text-subtle-gray">过去 7 天</span>
|
||||
</div>
|
||||
<div class="h-40 w-full flex items-end justify-between px-2 pt-4">
|
||||
<div class="flex flex-col items-center gap-2 w-full">
|
||||
<div class="flex items-end justify-around w-full h-24 gap-2">
|
||||
<div class="w-2 bg-surface-container-highest rounded-t-full h-[40%]"></div>
|
||||
<div class="w-2 bg-surface-container-highest rounded-t-full h-[55%]"></div>
|
||||
<div class="w-2 bg-heritage-red/60 rounded-t-full h-[75%]"></div>
|
||||
<div class="w-2 bg-heritage-red/40 rounded-t-full h-[60%]"></div>
|
||||
<div class="w-2 bg-heritage-red/80 rounded-t-full h-[85%]"></div>
|
||||
<div class="w-2 bg-heritage-red rounded-t-full h-[100%] shadow-sm"></div>
|
||||
<div class="w-2 bg-aged-amber rounded-t-full h-[70%]"></div>
|
||||
</div>
|
||||
<div class="flex justify-around w-full text-[10px] text-subtle-gray font-label-md">
|
||||
<span class="">周一</span><span class="">周二</span><span class="">周三</span><span class="">周四</span><span class="">周五</span><span class="">周六</span><span class="">周日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Store Performance Ranking -->
|
||||
<section class="space-y-base">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-headline-md font-headline-md text-ink-black">门店业绩排行</h3>
|
||||
<button class="text-label-md font-label-md text-heritage-red flex items-center gap-1">
|
||||
查看全部 <span class="material-symbols-outlined text-[14px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-base">
|
||||
<!-- Rank 1 -->
|
||||
<div class="flex items-center gap-stack-md bg-white p-base rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border-l-4 border-aged-amber">
|
||||
<div class="w-10 h-10 rounded-full bg-aged-amber/10 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-aged-amber" style="font-variation-settings: 'FILL' 1;">workspace_premium</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-body-lg text-body-lg text-ink-black font-semibold">龙渊御府</p>
|
||||
<p class="text-label-md font-label-md text-subtle-gray">VIP 宴会旗舰店</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-body-lg font-headline-md text-heritage-red">¥42,800</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rank 2 -->
|
||||
<div class="flex items-center gap-stack-md bg-white p-base rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center">
|
||||
<span class="text-headline-md font-headline-md text-subtle-gray italic">2</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-body-lg text-body-lg text-ink-black font-semibold">杜康文化名酒荟</p>
|
||||
<p class="text-label-md font-label-md text-subtle-gray">品牌体验店</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-body-lg font-headline-md text-ink-black">¥38,400</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rank 3 -->
|
||||
<div class="flex items-center gap-stack-md bg-white p-base rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center">
|
||||
<span class="text-headline-md font-headline-md text-subtle-gray italic">3</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-body-lg text-body-lg text-ink-black font-semibold">望月阁大酒楼</p>
|
||||
<p class="text-label-md font-label-md text-subtle-gray">高端餐饮合作伙伴</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-body-lg font-headline-md text-ink-black">¥31,200</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Partner Insight Card -->
|
||||
<section class="bg-surface-container-low rounded-xl p-stack-md border-2 border-dashed border-heritage-red/10 flex items-start gap-stack-md">
|
||||
<span class="material-symbols-outlined text-heritage-red" style="font-variation-settings: 'FILL' 1;">tips_and_updates</span>
|
||||
<div class="space-y-1">
|
||||
<p class="font-headline-md text-body-md text-ink-black font-bold">合伙人经营策略</p>
|
||||
<p class="text-body-md text-on-surface-variant leading-relaxed">
|
||||
本周 GMV 增长了 12.5%，主要得益于“龙渊御府”的高频核销。建议招募更多类似的高端宴会厅以保持增长势头。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Navigation -->
|
||||
|
||||
<!-- Micro-interaction Script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Animating the progress bar on load
|
||||
const progressBar = document.querySelector('.bg-gradient-to-r');
|
||||
if (progressBar) {
|
||||
progressBar.style.width = '0%';
|
||||
setTimeout(() => {
|
||||
progressBar.style.width = '70%';
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// Simple week selector interaction
|
||||
const selectors = document.querySelectorAll('.flex-none.px-4.py-2');
|
||||
selectors.forEach(selector => {
|
||||
selector.addEventListener('click', () => {
|
||||
selectors.forEach(s => {
|
||||
s.classList.remove('bg-heritage-red', 'text-white', 'shadow-md');
|
||||
s.classList.add('bg-surface-container', 'text-on-surface-variant');
|
||||
});
|
||||
selector.classList.remove('bg-surface-container', 'text-on-surface-variant');
|
||||
selector.classList.add('bg-heritage-red', 'text-white', 'shadow-md');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "数据周报页 - 中文版",
|
||||
"screenId": "9383549f868043e0a228113645600904",
|
||||
"syncedAt": "2026-06-29T02:33:23.047Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,357 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<title>杜康管理中心 - 数据报表</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary": "#ffffff",
|
||||
"subtle-gray": "#999999",
|
||||
"background": "#faf9f7",
|
||||
"on-primary": "#ffffff",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-error": "#ffffff",
|
||||
"surface-tint": "#b3272c",
|
||||
"outline": "#8d706e",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-container": "#a61d24",
|
||||
"inverse-surface": "#2f3130",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-bright": "#faf9f7",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container": "#efeeec",
|
||||
"tertiary": "#37413b",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"ink-black": "#1A1A1A",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"primary": "#820012",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-background": "#1a1c1b",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-surface": "#1a1c1b",
|
||||
"status-blue": "#2A6EBB",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface": "#faf9f7",
|
||||
"secondary": "#735c00",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-dim": "#dadad8",
|
||||
"primary-fixed": "#ffdad7"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "4px",
|
||||
"margin-page": "20px",
|
||||
"stack-lg": "32px",
|
||||
"gutter-card": "12px",
|
||||
"base": "8px",
|
||||
"stack-md": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.bento-card {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.bento-card:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #e2bebc;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.chart-bar {
|
||||
transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- Top AppBar (JSON Derived Structure) -->
|
||||
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-margin-page h-16 bg-surface dark:bg-surface-dim shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="hover:opacity-80 transition-opacity active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-primary dark:text-primary-fixed">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">数据报表</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="flex items-center gap-1 text-on-surface-variant text-label-md font-label-md border border-outline-variant rounded-full px-3 py-1">
|
||||
<span class="material-symbols-outlined text-[18px]">location_on</span>
|
||||
全国
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Canvas -->
|
||||
<main class="pt-20 pb-24 px-margin-page">
|
||||
<!-- Period Selector -->
|
||||
<section class="mb-stack-md">
|
||||
<div class="flex items-center justify-between overflow-x-auto custom-scrollbar gap-2 pb-2">
|
||||
<button class="whitespace-nowrap px-4 py-2 rounded-full bg-heritage-red text-on-primary text-label-md font-label-md shadow-lg shadow-heritage-red/20">今日</button>
|
||||
<button class="whitespace-nowrap px-4 py-2 rounded-full bg-surface-container text-on-surface-variant text-label-md font-label-md hover:bg-surface-container-high transition-colors">本周</button>
|
||||
<button class="whitespace-nowrap px-4 py-2 rounded-full bg-surface-container text-on-surface-variant text-label-md font-label-md hover:bg-surface-container-high transition-colors">本月</button>
|
||||
<button class="whitespace-nowrap px-4 py-2 rounded-full bg-surface-container text-on-surface-variant text-label-md font-label-md hover:bg-surface-container-high transition-colors">自定义</button>
|
||||
<div class="ml-auto">
|
||||
<span class="material-symbols-outlined text-subtle-gray">calendar_today</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Key Metrics Grid -->
|
||||
<section class="grid grid-cols-2 gap-gutter-card mb-stack-lg">
|
||||
<div class="bento-card p-4 rounded-xl flex flex-col justify-between h-32">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-on-surface-variant text-label-md font-label-md">累计用户</span>
|
||||
<span class="material-symbols-outlined text-heritage-red/40">groups</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-headline-lg font-headline-lg text-ink-black">12,840</div>
|
||||
<div class="flex items-center text-[10px] text-success-green mt-1">
|
||||
<span class="material-symbols-outlined text-[12px]">trending_up</span>
|
||||
<span class="ml-0.5">12.5%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bento-card p-4 rounded-xl flex flex-col justify-between h-32">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-on-surface-variant text-label-md font-label-md">累计GMV</span>
|
||||
<span class="material-symbols-outlined text-aged-amber">payments</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-headline-lg font-headline-lg text-ink-black">¥45.2w</div>
|
||||
<div class="flex items-center text-[10px] text-success-green mt-1">
|
||||
<span class="material-symbols-outlined text-[12px]">trending_up</span>
|
||||
<span class="ml-0.5">8.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bento-card p-4 rounded-xl flex flex-col justify-between h-32">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-on-surface-variant text-label-md font-label-md">总订单量</span>
|
||||
<span class="material-symbols-outlined text-heritage-red/40">receipt_long</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-headline-lg font-headline-lg text-ink-black">3,492</div>
|
||||
<div class="flex items-center text-[10px] text-subtle-gray mt-1">
|
||||
<span class="">较昨日持平</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bento-card p-4 rounded-xl flex flex-col justify-between h-32">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-on-surface-variant text-label-md font-label-md">核销总数</span>
|
||||
<span class="material-symbols-outlined text-heritage-red/40">confirmation_number</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-headline-lg font-headline-lg text-ink-black">2,105</div>
|
||||
<div class="flex items-center text-[10px] text-error mt-1">
|
||||
<span class="material-symbols-outlined text-[12px]">trending_down</span>
|
||||
<span class="ml-0.5">2.1%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Charts Section: Order Trend -->
|
||||
<section class="mb-stack-lg">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black">订单趋势</h2>
|
||||
|
||||
</div>
|
||||
<div class="bento-card p-6 rounded-xl aspect-[16/9] flex items-end justify-between relative">
|
||||
<!-- Simple CSS Chart Simulation -->
|
||||
<div class="absolute inset-x-6 bottom-12 top-6 border-b border-surface-container-high flex flex-col justify-between pointer-events-none">
|
||||
<div class="w-full border-t border-surface-container-low border-dashed"></div>
|
||||
<div class="w-full border-t border-surface-container-low border-dashed"></div>
|
||||
<div class="w-full border-t border-surface-container-low border-dashed"></div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 z-10">
|
||||
<div class="chart-bar w-3 bg-surface-container-high rounded-t-full h-12" style="height: 48px;"></div>
|
||||
<span class="text-[10px] text-subtle-gray">周一</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 z-10">
|
||||
<div class="chart-bar w-3 bg-surface-container-high rounded-t-full h-20" style="height: 80px;"></div>
|
||||
<span class="text-[10px] text-subtle-gray">周二</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 z-10">
|
||||
<div class="chart-bar w-3 bg-heritage-red rounded-t-full h-32 shadow-lg shadow-heritage-red/10" style="height: 128px;"></div>
|
||||
<span class="text-[10px] text-on-surface font-bold">周三</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 z-10">
|
||||
<div class="chart-bar w-3 bg-surface-container-high rounded-t-full h-24" style="height: 96px;"></div>
|
||||
<span class="text-[10px] text-subtle-gray">周四</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 z-10">
|
||||
<div class="chart-bar w-3 bg-surface-container-high rounded-t-full h-28" style="height: 112px;"></div>
|
||||
<span class="text-[10px] text-subtle-gray">周五</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 z-10">
|
||||
<div class="chart-bar w-3 bg-surface-container-high rounded-t-full h-36" style="height: 144px;"></div>
|
||||
<span class="text-[10px] text-subtle-gray">周六</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 z-10">
|
||||
<div class="chart-bar w-3 bg-surface-container-high rounded-t-full h-16" style="height: 64px;"></div>
|
||||
<span class="text-[10px] text-subtle-gray">周日</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Charts Section: User Source -->
|
||||
<section class="mb-stack-lg">
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black mb-4">用户来源分布</h2>
|
||||
<div class="bento-card p-6 rounded-xl flex items-center justify-between">
|
||||
<div class="relative w-24 h-24">
|
||||
<!-- Donut Chart Representation -->
|
||||
<svg class="w-full h-full rotate-[-90deg]" viewBox="0 0 36 36">
|
||||
<circle cx="18" cy="18" fill="transparent" r="15.9" stroke="#efeeec" stroke-width="4"></circle>
|
||||
<circle cx="18" cy="18" fill="transparent" r="15.9" stroke="#A61D24" stroke-dasharray="60 100" stroke-width="4"></circle>
|
||||
<circle cx="18" cy="18" fill="transparent" r="15.9" stroke="#FFBF00" stroke-dasharray="25 100" stroke-dashoffset="-60" stroke-width="4"></circle>
|
||||
<circle cx="18" cy="18" fill="transparent" r="15.9" stroke="#735c00" stroke-dasharray="15 100" stroke-dashoffset="-85" stroke-width="4"></circle>
|
||||
</svg>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<span class="text-label-md font-bold text-ink-black">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 ml-8 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-heritage-red"></div>
|
||||
<span class="text-body-md text-on-surface-variant">品鉴会扫码</span>
|
||||
</div>
|
||||
<span class="text-label-md font-bold text-ink-black">60%</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-aged-amber"></div>
|
||||
<span class="text-body-md text-on-surface-variant">微信搜索</span>
|
||||
</div>
|
||||
<span class="text-label-md font-bold text-ink-black">25%</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
||||
<span class="text-body-md text-on-surface-variant">社区团购扫码</span>
|
||||
</div>
|
||||
<span class="text-label-md font-bold text-ink-black">15%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- City Performance Ranking -->
|
||||
<section class="mb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black">城市业绩榜</h2>
|
||||
<button class="text-heritage-red text-label-md font-bold">查看全部</button>
|
||||
</div>
|
||||
<div class="bento-card rounded-xl overflow-hidden">
|
||||
<div class="px-5 py-4 border-b border-surface-container-low flex text-label-md text-subtle-gray uppercase tracking-wider">
|
||||
<div class="w-10">排名</div>
|
||||
<div class="flex-1">城市</div>
|
||||
<div class="w-24 text-right">GMV (元)</div>
|
||||
</div>
|
||||
<div class="divide-y divide-surface-container-low">
|
||||
<div class="px-5 py-4 flex items-center hover:bg-surface-container-lowest transition-colors">
|
||||
<div class="w-10 font-bold text-aged-amber">01</div>
|
||||
<div class="flex-1 font-headline-md text-ink-black">洛阳</div>
|
||||
<div class="w-24 text-right font-headline-md text-heritage-red">158,400</div>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center hover:bg-surface-container-lowest transition-colors">
|
||||
<div class="w-10 font-bold text-subtle-gray">02</div>
|
||||
<div class="flex-1 font-headline-md text-ink-black">郑州</div>
|
||||
<div class="w-24 text-right font-headline-md text-ink-black">124,050</div>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center hover:bg-surface-container-lowest transition-colors">
|
||||
<div class="w-10 font-bold text-subtle-gray">03</div>
|
||||
<div class="flex-1 font-headline-md text-ink-black">西安</div>
|
||||
<div class="w-24 text-right font-headline-md text-ink-black">98,200</div>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center hover:bg-surface-container-lowest transition-colors">
|
||||
<div class="w-10 font-bold text-subtle-gray">04</div>
|
||||
<div class="flex-1 font-headline-md text-ink-black">南阳</div>
|
||||
<div class="w-24 text-right font-headline-md text-ink-black">72,400</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Navigation (JSON Derived) -->
|
||||
|
||||
<script>
|
||||
// Micro-interactions for the "charts"
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const bars = document.querySelectorAll('.chart-bar');
|
||||
bars.forEach((bar, index) => {
|
||||
const finalHeight = bar.style.height || getComputedStyle(bar).height;
|
||||
bar.style.height = '0px';
|
||||
setTimeout(() => {
|
||||
bar.style.height = finalHeight;
|
||||
}, 100 * index);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "数据报表中心",
|
||||
"screenId": "9894492aecd046e08defa8d3cba34060",
|
||||
"syncedAt": "2026-06-29T02:34:11.452Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@@ -0,0 +1,306 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport">
|
||||
<title>HQ Management - 新增开城</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"success-green": "#2D6A4F",
|
||||
"tertiary": "#37413b",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-dim": "#dadad8",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"outline": "#8d706e",
|
||||
"background": "#faf9f7",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary": "#735c00",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-secondary-container": "#745c00",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-container": "#efeeec",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"outline-variant": "#e2bebc",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"ink-black": "#1A1A1A",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"surface-bright": "#faf9f7",
|
||||
"error-container": "#ffdad6",
|
||||
"error": "#ba1a1a",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-primary": "#ffffff",
|
||||
"primary-container": "#a61d24",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-background": "#1a1c1b",
|
||||
"primary": "#820012"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-page": "20px",
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-input-focus:focus-within {
|
||||
border-color: #A61D24;
|
||||
box-shadow: 0 0 0 1px rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
.ios-momentum {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
/* Custom scrollbar for better aesthetic */
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #e3e2e0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen text-on-surface">
|
||||
<!-- TopAppBar from JSON Guidance -->
|
||||
<header class="w-full top-0 sticky bg-surface shadow-sm flex items-center justify-between px-margin-page h-16 w-full z-50">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 -ml-2 rounded-full hover:bg-surface-container-high transition-colors active:scale-95 duration-150 text-primary">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile md:text-headline-md text-primary">新增开城</h1>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<button class="p-2 rounded-full hover:bg-surface-container-high transition-colors active:scale-95 duration-150 text-primary">
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-1 overflow-y-auto pb-32 ios-momentum">
|
||||
<div class="max-w-md mx-auto px-margin-page pt-stack-md space-y-6">
|
||||
<!-- Hero Decorative Header -->
|
||||
<div class="relative overflow-hidden rounded-xl bg-primary h-32 flex items-center px-6 text-white shadow-lg">
|
||||
|
||||
<div class="relative z-10">
|
||||
<h2 class="font-headline-lg text-headline-lg-mobile text-white/90">扩充版图</h2>
|
||||
<p class="font-label-md text-label-md opacity-80 uppercase tracking-widest mt-1">Expansion & Partnership</p>
|
||||
</div>
|
||||
<div class="absolute right-[-20px] top-[-20px] opacity-10">
|
||||
<span class="material-symbols-outlined text-[120px]" style="font-variation-settings: "FILL" 1;">location_city</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- City Info Section -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-5 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="w-1 h-4 bg-heritage-red rounded-full"></div>
|
||||
<h3 class="font-headline-md text-headline-md">城市及合伙人信息</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<!-- Dropdown -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">城市名称</label>
|
||||
<div class="relative group">
|
||||
<select class="w-full h-12 pl-4 pr-10 bg-surface-container rounded-lg border-transparent focus:border-heritage-red focus:ring-0 appearance-none font-body-md text-body-md transition-all">
|
||||
<option disabled="" selected="" value="">选择目标城市</option>
|
||||
<option value="zhengzhou">郑州市 (Zhengzhou)</option>
|
||||
<option value="luoyang">洛阳市 (Luoyang)</option>
|
||||
<option value="kaifeng">开封市 (Kaifeng)</option>
|
||||
<option value="anyang">安阳市 (Anyang)</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-subtle-gray">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Text Inputs -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">合伙人姓名</label>
|
||||
<input class="w-full h-12 px-4 bg-surface-container rounded-lg border-transparent focus:border-heritage-red focus:ring-0 font-body-md text-body-md transition-all placeholder:text-subtle-gray/60" placeholder="输入真实姓名" type="text">
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
|
||||
|
||||
</div><div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">合伙人手机号</label>
|
||||
<div class="flex items-center bg-surface-container rounded-lg border-transparent overflow-hidden group focus-within:ring-1 focus-within:ring-heritage-red">
|
||||
<span class="pl-4 pr-2 font-label-md text-label-md text-subtle-gray border-r border-outline-variant/20">+86</span>
|
||||
<input class="flex-1 h-12 px-3 bg-transparent border-none focus:ring-0 font-body-md text-body-md placeholder:text-subtle-gray/60" placeholder="输入11位手机号" type="tel">
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5 pt-4 border-t border-outline-variant/10">
|
||||
|
||||
|
||||
</div></div>
|
||||
</section>
|
||||
<!-- Contract & Legal Section -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-5 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="w-1 h-4 bg-heritage-red rounded-full"></div>
|
||||
<h3 class="font-headline-md text-headline-md">签约与财务资质</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<!-- Image Upload Placeholder -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">签约合同图片</label>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="aspect-[3/2] bg-surface-container-low rounded-lg border-2 border-dashed border-outline-variant/50 flex flex-col items-center justify-center cursor-pointer hover:border-heritage-red/50 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-subtle-gray mb-1">add_a_photo</span>
|
||||
<span class="font-label-md text-label-md text-subtle-gray">上传首页</span>
|
||||
</div>
|
||||
<div class="aspect-[3/2] bg-surface-container-low rounded-lg border-2 border-dashed border-outline-variant/50 flex flex-col items-center justify-center cursor-pointer hover:border-heritage-red/50 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-subtle-gray mb-1">add_a_photo</span>
|
||||
<span class="font-label-md text-label-md text-subtle-gray">上传末页盖章</span>
|
||||
</div>
|
||||
<div class="aspect-[3/2] bg-surface-container-low rounded-lg border-2 border-dashed border-outline-variant/50 flex flex-col items-center justify-center cursor-pointer hover:border-heritage-red/50 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-subtle-gray mb-1">upload_file</span>
|
||||
<span class="font-label-md text-label-md text-subtle-gray">上传电子附件</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">结算银行卡号</label>
|
||||
<input class="w-full h-12 px-4 bg-surface-container rounded-lg border-transparent focus:border-heritage-red focus:ring-0 font-body-md text-body-md transition-all placeholder:text-subtle-gray/60" placeholder="输入银行卡号" type="number">
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">开户银行</label>
|
||||
<input class="w-full h-12 px-4 bg-surface-container rounded-lg border-transparent focus:border-heritage-red focus:ring-0 font-body-md text-body-md transition-all placeholder:text-subtle-gray/60" placeholder="输入开户银行名称" type="text">
|
||||
</div><div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">开户主姓名</label>
|
||||
<input class="w-full h-12 px-4 bg-surface-container rounded-lg border-transparent focus:border-heritage-red focus:ring-0 font-body-md text-body-md transition-all placeholder:text-subtle-gray/60" placeholder="须与合伙人姓名一致" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Hint/Info -->
|
||||
<div class="flex items-start gap-3 px-2 py-3 bg-aged-amber/10 rounded-lg border border-aged-amber/20">
|
||||
<span class="material-symbols-outlined text-aged-amber text-[20px]">info</span>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">
|
||||
系统将根据手机号<span class="text-heritage-red font-medium">自动生成</span>管理员账号。开城成功后，初始密码将以短信形式发送至合伙人手机。
|
||||
</p>
|
||||
</div>
|
||||
<!-- Spacing for bottom action -->
|
||||
<div class="h-8"></div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Fixed Bottom Action Bar -->
|
||||
<div class="fixed bottom-0 left-0 w-full bg-surface-container-lowest px-margin-page pt-4 pb-8 shadow-[0px_-4px_24px_rgba(0,0,0,0.06)] z-50">
|
||||
<div class="max-w-md mx-auto"><div class="flex gap-3">
|
||||
<button class="flex-1 h-14 border-2 border-heritage-red text-heritage-red rounded-xl font-headline-md text-headline-md active:scale-[0.98] transition-all flex items-center justify-center gap-2 bg-transparent">
|
||||
<span class="material-symbols-outlined">save</span>
|
||||
<span class="">暂存</span>
|
||||
</button>
|
||||
<button class="flex-[2] h-14 bg-heritage-red text-white rounded-xl font-headline-md text-headline-md shadow-md active:scale-[0.98] transition-all flex items-center justify-center gap-2 group" id="submitBtn">
|
||||
<span class="">保存并开城</span>
|
||||
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">rocket_launch</span>
|
||||
</button>
|
||||
</div></div>
|
||||
</div>
|
||||
<!-- Micro-interaction Script -->
|
||||
<script>
|
||||
document.getElementById('submitBtn').addEventListener('click', function() {
|
||||
const btn = this;
|
||||
const originalContent = btn.innerHTML;
|
||||
|
||||
// Simple visual feedback
|
||||
btn.innerHTML = `
|
||||
<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span>正在处理...</span>
|
||||
`;
|
||||
btn.classList.add('opacity-80');
|
||||
btn.disabled = true;
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = `
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
<span>开城指令已发送</span>
|
||||
`;
|
||||
btn.classList.replace('bg-heritage-red', 'bg-success-green');
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalContent;
|
||||
btn.classList.replace('bg-success-green', 'bg-heritage-red');
|
||||
btn.classList.remove('opacity-80');
|
||||
btn.disabled = false;
|
||||
}, 2000);
|
||||
}, 1500);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "新增开城页面",
|
||||
"screenId": "261c69bbc5264d40841d03484d745915",
|
||||
"syncedAt": "2026-06-29T02:33:19.805Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1,265 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>添加商品 - 杜康总部管理系统</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"subtle-gray": "#999999",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-container": "#fed65b",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-background": "#1a1c1b",
|
||||
"heritage-red": "#A61D24",
|
||||
"outline-variant": "#e2bebc",
|
||||
"aged-amber": "#FFBF00",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-error-container": "#93000a",
|
||||
"primary": "#820012",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"tertiary": "#37413b",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#4e5852",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-container": "#efeeec",
|
||||
"on-primary": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"surface": "#faf9f7",
|
||||
"on-secondary-container": "#745c00",
|
||||
"primary-container": "#a61d24",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"secondary": "#735c00",
|
||||
"background": "#faf9f7",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-dim": "#dadad8",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-surface": "#1a1c1b",
|
||||
"outline": "#8d706e",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-tint": "#b3272c",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-surface": "#2f3130"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"base": "8px",
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"gutter-card": "12px",
|
||||
"margin-page": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.heritage-shadow { box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05); }
|
||||
.input-focus:focus { border-color: #A61D24; ring: 0; outline: none; }
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background min-h-screen pb-32">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-background flex items-center justify-between px-margin-page h-14 w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary active:scale-95 transition-transform cursor-pointer" data-icon="arrow_back">arrow_back</span>
|
||||
</div>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-semibold text-primary">添加商品</h1>
|
||||
<div class="w-6"></div> <!-- Spacer for centering -->
|
||||
</header>
|
||||
<main class="mt-14 px-margin-page py-stack-md flex flex-col gap-stack-md">
|
||||
<!-- Image Upload Section -->
|
||||
<section class="bg-surface-container-lowest rounded-lg p-stack-md heritage-shadow">
|
||||
<div class="flex justify-between items-center mb-stack-md">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">商品图片 <span class="text-heritage-red">*</span></h2>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">至少上传1张图片</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-gutter-card">
|
||||
<!-- Filled Image Placeholder -->
|
||||
<div class="aspect-square relative rounded-lg overflow-hidden border border-outline-variant">
|
||||
<img class="w-full h-full object-cover" data-alt="A premium close-up studio photograph of a Dukang liquor bottle, featuring intricate golden calligraphy on a deep white porcelain bottle. The lighting is soft and cinematic, highlighting the elegant curves and high-end texture of the glass. The background is a minimalist warm cream, maintaining the heritage modernism aesthetic of the brand with subtle shadows and a clean, luxury editorial feel." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBFdtEEmeJaf8GdGslgnogsiDwFaQhgoaRQk1RtW29beTB1E3uaszgk_swaSTEGufyIK0-XSsFCj_mtOgBlW36zCRt3ZLQbdT5y7xcRGg0ukbQn1DPIfY4xmEK6GQ3uUhCvDLtXgfrsmnh3tW9gYNiApNKwPGlb72yAP4gA1oXXG3YvZcs7pURc_0z1jxwZHc1M6WG89GAo_QvbrnC9zb5RAaeDwdB1s-bfoz85I5jx2PcXcIROra3e_6019R216EaOhl6VgxsE6BY">
|
||||
<div class="absolute top-1 right-1 bg-black/50 rounded-full p-0.5 text-white cursor-pointer active:scale-90 transition-all">
|
||||
<span class="material-symbols-outlined text-[16px]" data-icon="close">close</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Upload Buttons -->
|
||||
<button class="aspect-square flex flex-col items-center justify-center border-2 border-dashed border-outline-variant rounded-lg bg-surface-container-low active:bg-surface-container-high transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="add_a_photo">add_a_photo</span>
|
||||
<span class="font-label-md text-label-md">上传图片</span>
|
||||
</button>
|
||||
<button class="aspect-square flex flex-col items-center justify-center border-2 border-dashed border-outline-variant rounded-lg bg-surface-container-low opacity-60">
|
||||
<span class="material-symbols-outlined text-on-surface-variant" data-icon="add">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Basic Info Section -->
|
||||
<section class="bg-surface-container-lowest rounded-lg p-stack-md heritage-shadow flex flex-col gap-stack-md">
|
||||
<div>
|
||||
<label class="block font-label-md text-label-md text-on-surface-variant mb-2">商品名称</label>
|
||||
<input class="w-full border border-outline-variant rounded-lg px-4 py-3 font-body-md text-body-md focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 outline-none transition-all" placeholder="请输入商品名称 (2-50字)" type="text">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-md text-label-md text-on-surface-variant mb-2">商品分类</label>
|
||||
<div class="relative">
|
||||
<select class="w-full appearance-none border border-outline-variant rounded-lg px-4 py-3 font-body-md text-body-md bg-transparent focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 outline-none transition-all cursor-pointer">
|
||||
<option disabled="" selected="" value="">请选择分类</option>
|
||||
<option value="1">清香型</option>
|
||||
<option value="2">酱香型</option>
|
||||
<option value="3">浓香型</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant" data-icon="unfold_more">unfold_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-md text-label-md text-on-surface-variant mb-2">商品价格</label>
|
||||
<div class="flex items-center border border-outline-variant rounded-lg px-4 bg-white focus-within:border-heritage-red focus-within:ring-1 focus-within:ring-heritage-red/20 transition-all">
|
||||
<span class="font-headline-md text-headline-md text-heritage-red mr-2">¥</span>
|
||||
<input class="flex-1 py-3 border-none focus:ring-0 font-body-lg text-body-lg" placeholder="0.00" step="0.01" type="number">
|
||||
<span class="font-body-md text-body-md text-on-surface-variant ml-2">元</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Product Description Section -->
|
||||
<section class="bg-surface-container-lowest rounded-lg p-stack-md heritage-shadow">
|
||||
<label class="block font-headline-md text-headline-md text-on-surface mb-stack-md">商品介绍</label>
|
||||
<div class="relative border border-outline-variant rounded-lg bg-surface-bright overflow-hidden">
|
||||
<div class="flex gap-2 p-2 border-b border-outline-variant bg-surface-container-low">
|
||||
<button class="p-1 hover:bg-surface-container-high rounded transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="format_bold">format_bold</span>
|
||||
</button>
|
||||
<button class="p-1 hover:bg-surface-container-high rounded transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="format_list_bulleted">format_list_bulleted</span>
|
||||
</button>
|
||||
<button class="p-1 hover:bg-surface-container-high rounded transition-colors text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="add_photo_alternate">add_photo_alternate</span>
|
||||
</button>
|
||||
</div>
|
||||
<textarea class="w-full p-4 font-body-md text-body-md bg-transparent border-none focus:ring-0 resize-none" placeholder="输入商品的详细描述，展示杜康酒的千年传承与匠心酿造..." rows="6"></textarea>
|
||||
<div class="absolute bottom-2 right-4 font-label-md text-label-md text-subtle-gray">
|
||||
0/500
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Settings Section -->
|
||||
<section class="bg-surface-container-lowest rounded-lg p-stack-md heritage-shadow flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-headline-md text-headline-md text-on-surface">立即上架</span>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">商品发布后将立即显示在商城首页</span>
|
||||
</div>
|
||||
<!-- Toggle Switch -->
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input checked="" class="sr-only peer" type="checkbox">
|
||||
<div class="w-12 h-6 bg-surface-variant rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-heritage-red"></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="h-px bg-outline-variant/30"></div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-headline-md text-headline-md text-on-surface">排序权重</span>
|
||||
<div class="flex items-center border border-outline-variant rounded-lg overflow-hidden h-10">
|
||||
<button class="px-3 h-full hover:bg-surface-container active:bg-surface-container-high transition-colors" onclick="this.nextElementSibling.stepDown()">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="remove">remove</span>
|
||||
</button>
|
||||
<input class="w-16 h-full text-center border-none focus:ring-0 font-body-lg font-semibold bg-transparent" type="number" value="0">
|
||||
<button class="px-3 h-full hover:bg-surface-container active:bg-surface-container-high transition-colors" onclick="this.previousElementSibling.stepUp()">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- BottomNavBar as Footer -->
|
||||
<footer class="fixed bottom-0 left-0 w-full z-50 flex justify-between items-center px-margin-page py-stack-md bg-surface shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] rounded-t-xl">
|
||||
<button class="flex items-center justify-center text-on-surface-variant px-6 py-3 w-full mx-2 border border-outline rounded-lg active:scale-98 transition-all hover:bg-primary-container/10">
|
||||
<span class="material-symbols-outlined mr-2" data-icon="close">close</span>
|
||||
<span class="font-label-md text-label-md">取消</span>
|
||||
</button>
|
||||
<button class="flex items-center justify-center bg-primary text-on-primary rounded-lg px-6 py-3 w-full mx-2 active:scale-98 transition-all hover:bg-primary-container">
|
||||
<span class="material-symbols-outlined mr-2" data-icon="publish">publish</span>
|
||||
<span class="font-label-md text-label-md">保存并发布</span>
|
||||
</button>
|
||||
</footer>
|
||||
<script>
|
||||
// Character counter logic
|
||||
const textarea = document.querySelector('textarea');
|
||||
const counter = document.querySelector('.text-subtle-gray');
|
||||
|
||||
textarea.addEventListener('input', (e) => {
|
||||
const length = e.target.value.length;
|
||||
counter.textContent = `${length}/500`;
|
||||
if (length > 500) {
|
||||
counter.classList.add('text-error');
|
||||
} else {
|
||||
counter.classList.remove('text-error');
|
||||
}
|
||||
});
|
||||
|
||||
// Simple touch feedback
|
||||
document.querySelectorAll('button, .cursor-pointer').forEach(el => {
|
||||
el.addEventListener('touchstart', () => {
|
||||
el.style.opacity = '0.7';
|
||||
});
|
||||
el.addEventListener('touchend', () => {
|
||||
el.style.opacity = '1';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "添加商品页面",
|
||||
"screenId": "31a271e5ec774198b70b72dcb8b9d1fa",
|
||||
"syncedAt": "2026-06-29T02:33:26.374Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -0,0 +1,245 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<title>添加子账号 - 杜康·城市合伙人</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<!-- Theme Configuration -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-error": "#ffffff",
|
||||
"success-green": "#2D6A4F",
|
||||
"heritage-red": "#A61D24",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"secondary": "#735c00",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"outline": "#8d706e",
|
||||
"on-primary-fixed": "#410004",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"error": "#ba1a1a",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#e2bebc",
|
||||
"subtle-gray": "#999999",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"inverse-surface": "#2f3130",
|
||||
"status-blue": "#2A6EBB",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"primary": "#820012",
|
||||
"secondary-container": "#fed65b",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"background": "#faf9f7",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-tint": "#b3272c",
|
||||
"surface-container": "#efeeec",
|
||||
"surface-bright": "#faf9f7",
|
||||
"surface": "#faf9f7",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-primary": "#ffffff",
|
||||
"aged-amber": "#FFBF00",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"tertiary": "#37413b",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"on-secondary-container": "#745c00",
|
||||
"on-background": "#1a1c1b",
|
||||
"on-surface": "#1a1c1b",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"tertiary-container": "#4e5852"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"stack-sm": "4px",
|
||||
"base": "8px",
|
||||
"gutter-card": "12px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.notch-card::before, .notch-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #faf9f7;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.notch-card::before { left: -6px; }
|
||||
.notch-card::after { right: -6px; }
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #A61D24;
|
||||
ring: 0;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen text-on-surface overflow-x-hidden">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 transition-colors duration-200">
|
||||
<div class="flex items-center justify-between px-margin-page h-16 w-full max-w-screen-xl mx-auto">
|
||||
<div class="flex items-center gap-4 flex-grow">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-high active:scale-95 transition-all" onclick="history.back()">
|
||||
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile text-primary text-center w-full">添加子账号</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-grow pt-20 pb-32 px-margin-page max-w-md mx-auto w-full">
|
||||
<!-- Segmented Control -->
|
||||
|
||||
<!-- Form Section -->
|
||||
<section class="space-y-6">
|
||||
<!-- Full Name -->
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">真实姓名 <span class="text-heritage-red">*</span></label>
|
||||
<div class="relative group">
|
||||
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl px-4 py-4 font-body-md text-body-md focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 transition-all" placeholder="请输入员工姓名" type="text">
|
||||
<span class="material-symbols-outlined absolute right-4 top-1/2 -translate-y-1/2 text-outline/50 group-focus-within:text-heritage-red transition-colors">person</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Phone Number -->
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">手机号码 <span class="text-heritage-red">*</span></label>
|
||||
<div class="flex gap-2">
|
||||
<div class="relative flex-grow">
|
||||
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl px-4 py-4 font-body-md text-body-md focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 transition-all" placeholder="请输入11位手机号" type="tel">
|
||||
</div>
|
||||
<button class="px-4 py-4 bg-surface-container-high border border-outline-variant/30 rounded-xl font-label-md text-label-md text-primary hover:bg-surface-container-highest active:scale-95 transition-all whitespace-nowrap">
|
||||
获取验证码
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Role Selection -->
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">分配角色 <span class="text-heritage-red">*</span></label>
|
||||
<div class="relative">
|
||||
<select class="w-full appearance-none bg-surface-container-lowest border border-outline-variant/30 rounded-xl px-4 py-4 font-body-md text-body-md focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 transition-all pr-12"><option value="partner" class="">城市合伙人</option><option value="staff" class="">内部员工</option><option value="promoter" class="">推广员</option></select>
|
||||
<span class="material-symbols-outlined absolute right-4 top-1/2 -translate-y-1/2 text-outline pointer-events-none">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Permissions Preview Card -->
|
||||
|
||||
</section>
|
||||
<!-- Illustration / Mood area (Bento style) -->
|
||||
<div class="mt-stack-lg grid grid-cols-2 gap-3">
|
||||
<div class="col-span-1 h-32 rounded-xl overflow-hidden relative group">
|
||||
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A macro close-up of a beautifully designed traditional Chinese seal carved from precious red stone, pressed onto a piece of high-quality aged rice paper. The lighting is cinematic with sharp shadows and warm amber highlights, emphasizing the texture and the heritage of Dukang liquor craftsmanship." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBSWQkf2M6jMNP_Owt_eFDD61fgWqv_d3xjHBjXXRAFghV62PmhRDkycuqNHfgHMJuAVDNICqFbxu5wapiw-JxMCyhXq-YLWOedbECzI3Zur-yndGR7OYhjJzCnARTjyBYbJSL1LFYCI3fnNZtTigbTw1EvoLs2p_Op-OF56-RR4ZbetZ6mlMebhmIigqHvXUg7vpgThgi6hAt6OKtPbke-enTVR_ko3fj-V64te4bjMh_atRr51oLo_8nlQgKatYNm57QZK14e-jo">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-ink-black/40 to-transparent"></div>
|
||||
</div>
|
||||
<div class="col-span-1 h-32 rounded-xl bg-primary-container p-4 flex flex-col justify-end text-white relative overflow-hidden">
|
||||
<span class="material-symbols-outlined absolute top-2 right-2 text-white/20 text-4xl">loyalty</span>
|
||||
<p class="font-label-md text-[10px] uppercase tracking-widest opacity-80">Heritage Security</p>
|
||||
<p class="font-headline-md text-sm leading-tight">安全赋能<br>共创杜康</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Action Area -->
|
||||
<div class="fixed bottom-0 w-full bg-surface/80 backdrop-blur-lg border-t border-outline-variant/10 px-margin-page pb-8 pt-4 z-50">
|
||||
<button class="w-full bg-heritage-red text-white py-4 rounded-xl font-headline-md text-headline-md-mobile shadow-[0px_4px_20px_rgba(166,29,36,0.2)] active:scale-[0.98] transition-all hover:brightness-110 flex items-center justify-center gap-2">
|
||||
确认创建
|
||||
<span class="material-symbols-outlined">person_add</span>
|
||||
</button>
|
||||
<p class="text-center mt-3 font-label-md text-label-md text-subtle-gray">
|
||||
创建即代表同意 <span class="text-primary underline">合伙人管理协议</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Micro-interaction Script -->
|
||||
<script>
|
||||
function switchTab(type) {
|
||||
const internalTab = document.getElementById('tab-internal');
|
||||
const partnerTab = document.getElementById('tab-partner');
|
||||
|
||||
if (type === 'internal') {
|
||||
internalTab.classList.add('bg-surface', 'shadow-sm', 'text-primary', 'font-bold');
|
||||
internalTab.classList.remove('text-on-surface-variant');
|
||||
partnerTab.classList.remove('bg-surface', 'shadow-sm', 'text-primary', 'font-bold');
|
||||
partnerTab.classList.add('text-on-surface-variant');
|
||||
} else {
|
||||
partnerTab.classList.add('bg-surface', 'shadow-sm', 'text-primary', 'font-bold');
|
||||
partnerTab.classList.remove('text-on-surface-variant');
|
||||
internalTab.classList.remove('bg-surface', 'shadow-sm', 'text-primary', 'font-bold');
|
||||
internalTab.classList.add('text-on-surface-variant');
|
||||
}
|
||||
}
|
||||
|
||||
// Simple form animation
|
||||
const inputs = document.querySelectorAll('input, select');
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('focus', () => {
|
||||
input.parentElement.classList.add('scale-[1.01]');
|
||||
});
|
||||
input.addEventListener('blur', () => {
|
||||
input.parentElement.classList.remove('scale-[1.01]');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "添加子账号页面",
|
||||
"screenId": "5a6520521e3d42bb97452df868a21b06",
|
||||
"syncedAt": "2026-06-29T02:33:54.249Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,293 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<title>杜康 HQ - 生成推广码</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"secondary-fixed": "#ffe088",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-primary": "#ffffff",
|
||||
"aged-amber": "#FFBF00",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"surface-dim": "#dadad8",
|
||||
"secondary": "#735c00",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"primary": "#820012",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"secondary-container": "#fed65b",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-bright": "#faf9f7",
|
||||
"background": "#faf9f7",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-error-container": "#93000a",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"on-secondary-container": "#745c00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-background": "#1a1c1b",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface": "#faf9f7",
|
||||
"outline-variant": "#e2bebc",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-secondary": "#ffffff",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"outline": "#8d706e",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-container": "#efeeec",
|
||||
"error": "#ba1a1a",
|
||||
"primary-container": "#a61d24",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"tertiary": "#37413b"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "4px",
|
||||
"margin-page": "20px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-lg": "32px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"body-md": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.notch-card {
|
||||
position: relative;
|
||||
background: white;
|
||||
}
|
||||
.notch-card::before, .notch-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #faf9f7;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.notch-card::before { left: -10px; }
|
||||
.notch-card::after { right: -10px; }
|
||||
|
||||
.form-input-focus:focus-within {
|
||||
border-color: #A61D24;
|
||||
box-shadow: 0 0 0 1px rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
|
||||
@keyframes fadeInScale {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.animate-result {
|
||||
animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-bright text-on-surface font-body-md min-h-screen">
|
||||
<!-- Top AppBar (Admin Context) -->
|
||||
<header class="bg-surface-bright dark:bg-surface-dim shadow-[0px_4px_20px_rgba(166,29,36,0.05)] w-full top-0 sticky flex justify-between items-center px-margin-page h-16 z-40">
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="hover:bg-surface-container-highest transition-colors p-2 rounded-full active:scale-95 duration-150">
|
||||
<span class="material-symbols-outlined text-heritage-red">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile md:text-headline-md text-heritage-red">生成推广码</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-label-md font-label-md text-subtle-gray hidden md:block">管理员 A-06</span>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center overflow-hidden border border-outline-variant/20">
|
||||
<img class="w-full h-full object-cover" data-alt="A professional studio portrait of a corporate administrator, dressed in a sharp charcoal suit with a subtle red tie. The lighting is soft and even, highlighting a trustworthy and authoritative expression. The background is a clean, minimalist office setting with muted architectural details in a high-end light-mode aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDneqaNXmveYuLpxz7TAXZZ5d90Ls09gAAknarY9HZxEJZd3c3WoosxEz33KPdAq-yuJuVNIqfPQfoOZBY4Uy1YDY9hqLRMCwNPUMR5eRc0YJh2GDZcTORocTkanPLAzIsdDKxOuWBMUVhesamFZOhHFo1uL6o0k6rYlTbUgFQE3zm5dOVL4nLZ6lD-T5etnDAZIQT1kowewJeJ0GA-QMpeowvf0DsK3LfjauRVQRjqUfFyNSegisw9sjZiYWGxu9nW2mXWAd_J8yE">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="px-margin-page py-stack-lg max-w-2xl mx-auto space-y-stack-md">
|
||||
<!-- Instruction / Context -->
|
||||
<div class="pb-stack-sm">
|
||||
<p class="font-body-md text-on-surface-variant">填写以下信息，为不同渠道和场景生成专属溯源推广码。</p>
|
||||
</div>
|
||||
<!-- Form Card Container -->
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] p-6 space-y-6">
|
||||
<!-- City Picker -->
|
||||
<div class="space-y-2">
|
||||
<label class="block font-label-md text-on-surface-variant tracking-wider">所属城市</label>
|
||||
<div class="relative form-input-focus border border-outline-variant/30 rounded-lg bg-surface-container-low transition-all">
|
||||
<select class="w-full bg-transparent py-3 px-4 appearance-none focus:outline-none font-body-lg text-on-surface">
|
||||
<option disabled="" selected="" value="">选择开城城市</option>
|
||||
<option>洛阳</option>
|
||||
<option>郑州</option>
|
||||
<option>西安</option>
|
||||
<option>北京</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-subtle-gray">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Promotion Scenario -->
|
||||
<div class="space-y-2">
|
||||
<label class="block font-label-md text-on-surface-variant tracking-wider">推广场景</label>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<label class="flex items-center gap-3 p-3 border border-outline-variant/30 rounded-lg bg-surface-container-low cursor-pointer hover:border-heritage-red/30 transition-colors">
|
||||
<input class="text-heritage-red focus:ring-heritage-red" name="scenario" type="radio" value="品鉴会">
|
||||
<span class="font-body-md">品鉴会</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-3 border border-outline-variant/30 rounded-lg bg-surface-container-low cursor-pointer hover:border-heritage-red/30 transition-colors">
|
||||
<input class="text-heritage-red focus:ring-heritage-red" name="scenario" type="radio" value="社区团长">
|
||||
<span class="font-body-md">社区团长</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-3 border border-outline-variant/30 rounded-lg bg-surface-container-low cursor-pointer hover:border-heritage-red/30 transition-colors">
|
||||
<input class="text-heritage-red focus:ring-heritage-red" name="scenario" type="radio" value="本地公众号">
|
||||
<span class="font-body-md">本地公众号</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-3 border border-outline-variant/30 rounded-lg bg-surface-container-low cursor-pointer hover:border-heritage-red/30 transition-colors">
|
||||
<input class="text-heritage-red focus:ring-heritage-red" name="scenario" type="radio" value="门店地推">
|
||||
<span class="font-body-md">门店地推</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-3 border border-outline-variant/30 rounded-lg bg-surface-container-low cursor-pointer hover:border-heritage-red/30 transition-colors col-span-2">
|
||||
<input class="text-heritage-red focus:ring-heritage-red" name="scenario" type="radio" value="其他">
|
||||
<span class="font-body-md">其他</span>
|
||||
</label>
|
||||
</div>
|
||||
</div><div class="space-y-2"><label class="block font-label-md text-on-surface-variant tracking-wider">佣金比例设置</label><p class="text-sm text-on-surface-variant">设置该推广码的专属佣金比例 (0-100%)</p><div class="grid grid-cols-2 gap-3"><div class="space-y-1"><label class="block text-[10px] text-on-surface-variant uppercase tracking-wider">下单佣金比例</label><div class="relative form-input-focus border border-outline-variant/30 rounded-lg bg-surface-container-low transition-all"><input class="w-full bg-transparent py-3 px-4 appearance-none focus:outline-none font-body-lg text-on-surface pr-10" max="100" min="0" placeholder="输入比例" type="number"><span class="absolute right-3 top-1/2 -translate-y-1/2 font-body-md text-on-surface-variant">%</span></div></div><div class="space-y-1"><label class="block text-[10px] text-on-surface-variant uppercase tracking-wider">核销佣金比例</label><div class="relative form-input-focus border border-outline-variant/30 rounded-lg bg-surface-container-low transition-all"><input class="w-full bg-transparent py-3 px-4 appearance-none focus:outline-none font-body-lg text-on-surface pr-10" max="100" min="0" placeholder="输入比例" type="number"><span class="absolute right-3 top-1/2 -translate-y-1/2 font-body-md text-on-surface-variant">%</span></div></div></div><p class="text-[10px] text-subtle-gray">提示：留空则沿用该城市的默认佣金比例。</p></div>
|
||||
<!-- Notes -->
|
||||
<div class="space-y-2">
|
||||
<label class="block font-label-md text-on-surface-variant tracking-wider">场景备注 (选填)</label>
|
||||
<textarea class="w-full bg-surface-container-low border border-outline-variant/30 rounded-lg py-3 px-4 focus:ring-heritage-red focus:border-heritage-red transition-all min-h-[100px] font-body-md" placeholder="输入具体渠道名称或活动批次..."></textarea>
|
||||
</div>
|
||||
<!-- Submit Button -->
|
||||
<button class="w-full bg-heritage-red text-white py-4 rounded-xl font-headline-md shadow-lg shadow-heritage-red/20 active:scale-95 transition-all flex items-center justify-center gap-2" id="generateBtn">
|
||||
<span class="material-symbols-outlined">qr_code_2</span>
|
||||
生成推广码
|
||||
</button>
|
||||
</div>
|
||||
<!-- Result Preview Area (Initially Hidden) -->
|
||||
<div class="hidden animate-result" id="resultArea">
|
||||
<div class="notch-card rounded-xl shadow-lg border border-outline-variant/10 overflow-hidden mt-8">
|
||||
<div class="p-6 text-center space-y-6">
|
||||
<div class="inline-block p-4 bg-white border-2 border-heritage-red/10 rounded-2xl relative">
|
||||
<div class="w-48 h-48 bg-surface-container flex items-center justify-center relative overflow-hidden group">
|
||||
<img class="w-40 h-40" data-alt="A clean, minimalist QR code centered on a crisp white background. The QR code features a sophisticated pattern and a subtle corporate logo at its center. The lighting is flat and professional, set within a premium Dukang heritage design context, emphasizing clarity and scannability. Soft shadows ground the element in a light-mode UI environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBsD_-nCCxuCb3eSv2tkrM7BZobuTbR-8sQhp3uSIdnhSlrkDe3Vcbw8rgEH5UteLs_jdtA7W6qB_Xo76hQKEqM1B8beVR75DSJizt6UgKgB8XP06rMKV3uekfRVNcmnipEBXgIDaHpcFunM9UXDL6Xcdpk2xeKSRLDIKLkYDUVtmZUDbKZaAcuJb70hPWJcq-L0axE_W50tdc89fEMSm-YlNXdyOPVFZwjoTo2FXhWeBOXViz1uod_2mxSL22NYz1FHeQui9S60jc">
|
||||
<!-- Overlaying Dukang Branding -->
|
||||
<div class="absolute inset-0 border-[8px] border-surface-container-lowest"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<h3 class="font-headline-md text-on-surface">渠道专属推广码</h3>
|
||||
<p class="text-label-md text-subtle-gray uppercase tracking-widest">洛阳 · 品鉴会推广</p>
|
||||
</div>
|
||||
<div class="flex gap-3 pt-2">
|
||||
<button class="flex-1 border border-heritage-red text-heritage-red py-3 rounded-lg font-label-md flex items-center justify-center gap-2 hover:bg-heritage-red/5 transition-colors">
|
||||
<span class="material-symbols-outlined">download</span>
|
||||
下载二维码
|
||||
</button>
|
||||
<button class="w-12 h-12 border border-outline flex items-center justify-center rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined">share</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Ticket-style bottom info -->
|
||||
<div class="bg-surface-container-high/50 p-4 border-t border-dashed border-outline-variant/30 flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-sm text-status-blue">info</span>
|
||||
<span class="text-[10px] text-on-surface-variant">生成时间: 2023-11-24 14:30</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-heritage-red">ID: DK-QR-88392</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation (Shared Component Context) -->
|
||||
<script>
|
||||
document.getElementById('generateBtn').addEventListener('click', function() {
|
||||
const btn = this;
|
||||
const result = document.getElementById('resultArea');
|
||||
|
||||
// Loading state simulation
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="material-symbols-outlined animate-spin">progress_activity</span> 处理中...';
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = '<span class="material-symbols-outlined">check_circle</span> 已生成';
|
||||
btn.classList.replace('bg-heritage-red', 'bg-success-green');
|
||||
|
||||
result.classList.remove('hidden');
|
||||
|
||||
// Scroll to result
|
||||
window.scrollTo({
|
||||
top: document.body.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}, 800);
|
||||
});
|
||||
|
||||
// Toggle radio buttons styles visual feedback
|
||||
const radios = document.querySelectorAll('input[type="radio"]');
|
||||
radios.forEach(radio => {
|
||||
radio.addEventListener('change', () => {
|
||||
radios.forEach(r => {
|
||||
r.closest('label').classList.remove('border-heritage-red', 'bg-primary-fixed/10');
|
||||
});
|
||||
if (radio.checked) {
|
||||
radio.closest('label').classList.add('border-heritage-red', 'bg-primary-fixed/10');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "生成推广码页 - 拆分下单与核销佣金",
|
||||
"screenId": "638f3386b937437dbf88157a890cf8e9",
|
||||
"syncedAt": "2026-06-29T02:33:48.311Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@@ -0,0 +1,271 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style="width: 390px; height: 1246px; overflow: hidden; position: relative;"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-error": "#ffffff",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"secondary": "#735c00",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-secondary-container": "#745c00",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-tertiary": "#ffffff",
|
||||
"subtle-gray": "#999999",
|
||||
"outline": "#8d706e",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface-container": "#efeeec",
|
||||
"secondary-container": "#fed65b",
|
||||
"tertiary": "#37413b",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface": "#faf9f7",
|
||||
"success-green": "#2D6A4F",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"primary": "#820012",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"error": "#ba1a1a",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-surface": "#1a1c1b",
|
||||
"aged-amber": "#FFBF00",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-primary": "#ffffff",
|
||||
"on-background": "#1a1c1b",
|
||||
"surface-dim": "#dadad8",
|
||||
"background": "#faf9f7",
|
||||
"primary-container": "#a61d24",
|
||||
"inverse-on-surface": "#f1f1ef"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"base": "8px",
|
||||
"gutter-card": "12px",
|
||||
"stack-sm": "4px",
|
||||
"margin-page": "20px",
|
||||
"stack-lg": "32px",
|
||||
"stack-md": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #FAF9F7;
|
||||
/* Subtle rice paper texture simulation */
|
||||
background-image: radial-gradient(#E2BEBC 0.5px, transparent 0.5px);
|
||||
background-size: 24px 24px;
|
||||
background-attachment: fixed;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.step-line-active {
|
||||
background: linear-gradient(90deg, #2D6A4F 0%, #A61D24 100%);
|
||||
}
|
||||
.shadow-soft {
|
||||
shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen text-on-surface antialiased">
|
||||
<!-- TopAppBar -->
|
||||
<header class="w-full top-0 sticky z-50 bg-surface dark:bg-on-surface shadow-sm shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex items-center justify-between px-margin-page h-16 w-full max-w-screen-md mx-auto">
|
||||
<button class="active:scale-95 transition-transform text-heritage-red">
|
||||
<span class="material-symbols-outlined text-[24px]">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">申请打款</h1>
|
||||
<div class="w-6"></div> <!-- Spacer for centering -->
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-grow w-full max-w-screen-md mx-auto px-margin-page pt-stack-md pb-32">
|
||||
<!-- StepIndicator -->
|
||||
<section class="mb-stack-lg bg-surface-container-lowest rounded-xl p-5 shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex items-center justify-between relative">
|
||||
<!-- Lines -->
|
||||
<div class="absolute top-4 left-0 w-full h-[2px] bg-surface-variant flex">
|
||||
<div class="w-1/2 bg-success-green"></div>
|
||||
<div class="w-1/2 step-line-active opacity-30"></div>
|
||||
</div>
|
||||
<!-- Step 1 -->
|
||||
<div class="relative z-10 flex flex-col items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-full bg-success-green text-white flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-success-green">数据审计</span>
|
||||
</div>
|
||||
<!-- Step 2 -->
|
||||
<div class="relative z-10 flex flex-col items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-full bg-success-green text-white flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-success-green">账单确认</span>
|
||||
</div>
|
||||
<!-- Step 3 -->
|
||||
<div class="relative z-10 flex flex-col items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center ring-4 ring-primary-fixed">
|
||||
<span class="material-symbols-outlined text-[18px]">payments</span>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-heritage-red font-semibold">申请打款</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- AmountCard -->
|
||||
<section class="mb-stack-md overflow-hidden bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border-l-4 border-heritage-red">
|
||||
<div class="p-6">
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mb-1">可申请总金额</p>
|
||||
<h2 class="font-headline-xl text-headline-xl text-heritage-red mb-6">¥12,500.00</h2>
|
||||
<div class="space-y-3 pt-4 border-t border-outline-variant/30">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-body-md text-body-md text-on-surface-variant">商品分佣</span>
|
||||
<span class="font-label-md text-label-md text-on-surface font-semibold">¥10,200.00</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-body-md text-body-md text-on-surface-variant">核销权益分佣</span>
|
||||
<span class="font-label-md text-label-md text-on-surface font-semibold">¥1,800.00</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- BankInfoSection -->
|
||||
<section class="mb-stack-md bg-surface-container-lowest rounded-xl p-6 shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface">收款账户信息</h3>
|
||||
<span class="material-symbols-outlined text-outline text-[20px]">account_balance</span>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-subtle-gray mb-1">账户名称</p>
|
||||
<p class="font-body-lg text-body-lg text-on-surface">洛阳某某商贸有限公司</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-subtle-gray mb-1">开户银行</p>
|
||||
<p class="font-body-lg text-body-lg text-on-surface">中国工商银行洛阳分行牡丹支行</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-subtle-gray mb-1">银行卡号</p>
|
||||
<p class="font-body-lg text-body-lg text-on-surface tracking-widest font-mono">**** **** **** 8899</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-2">
|
||||
<button class="font-label-md text-label-md text-status-blue flex items-center gap-1 active:opacity-60 transition-opacity">
|
||||
信息有误？联系总部修改
|
||||
<span class="material-symbols-outlined text-[14px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- InputSection -->
|
||||
<section class="mb-stack-md bg-surface-container-lowest rounded-xl p-6 shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-4">备注信息</h3>
|
||||
<textarea class="w-full h-32 p-4 bg-surface-container-low border-none rounded-lg font-body-md text-body-md focus:ring-1 focus:ring-heritage-red placeholder:text-subtle-gray resize-none" placeholder="如有特殊说明请在此填写..."></textarea>
|
||||
</section>
|
||||
<!-- NoticeCard -->
|
||||
<section class="mb-8 flex gap-3 p-4 bg-secondary-container/10 border border-secondary-container/20 rounded-lg">
|
||||
<span class="material-symbols-outlined text-aged-amber text-[20px]">info</span>
|
||||
<p class="font-label-md text-label-md text-on-secondary-fixed-variant leading-relaxed">
|
||||
打款申请提交后，总部将在3-5个工作日内完成审核并执行打款，请耐心等待。
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
<!-- FixedBottomButton -->
|
||||
<div class="fixed bottom-0 left-0 w-full bg-surface-container-lowest border-t border-outline-variant/10 px-margin-page pt-4 pb-8 z-50 shadow-[0px_-4px_20px_rgba(0,0,0,0.03)]">
|
||||
<div class="max-w-screen-md mx-auto">
|
||||
<button class="w-full h-14 bg-heritage-red text-white rounded-xl font-headline-md text-headline-md flex items-center justify-center gap-2 active:scale-[0.98] transition-all hover:bg-on-primary-fixed-variant shadow-lg shadow-heritage-red/10" id="submitBtn">
|
||||
确认提交申请
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Success Modal (Hidden by default) -->
|
||||
<div class="fixed inset-0 z-[100] flex items-center justify-center hidden" id="successModal">
|
||||
<div class="absolute inset-0 bg-ink-black/60 backdrop-blur-sm"></div>
|
||||
<div class="relative bg-surface p-8 rounded-2xl w-[80%] max-w-xs flex flex-col items-center text-center shadow-2xl animate-in zoom-in-95 duration-300">
|
||||
<div class="w-16 h-16 bg-success-green/10 rounded-full flex items-center justify-center mb-4">
|
||||
<span class="material-symbols-outlined text-success-green text-[40px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</div>
|
||||
<h4 class="font-headline-lg text-headline-lg text-on-surface mb-2">申请已提交</h4>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mb-6">总部将尽快为您打款</p>
|
||||
<button class="w-full py-3 bg-heritage-red text-white rounded-lg font-label-md text-label-md" onclick="document.getElementById('successModal').classList.add('hidden')">
|
||||
返回工作台
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('submitBtn').addEventListener('click', function() {
|
||||
const btn = this;
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="material-symbols-outlined animate-spin">progress_activity</span> 提交中...';
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById('successModal').classList.remove('hidden');
|
||||
btn.innerHTML = '确认提交申请';
|
||||
btn.disabled = false;
|
||||
}, 1500);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<div id="snapdom-sandbox" data-snapdom-sandbox="true" aria-hidden="true" style="position: absolute; left: -9999px; top: -9999px; width: 0px; height: 0px; overflow: hidden;"></div></body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "申请打款页面",
|
||||
"screenId": "5b8faa3bdad645edb55e1218db35db82",
|
||||
"syncedAt": "2026-06-29T02:35:10.950Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@@ -0,0 +1,277 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>编辑城市 - 杜康管理中心</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container": "#efeeec",
|
||||
"surface": "#faf9f7",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary-container": "#4e5852",
|
||||
"status-blue": "#2A6EBB",
|
||||
"outline": "#8d706e",
|
||||
"tertiary": "#37413b",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-error-container": "#93000a",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-secondary-container": "#745c00",
|
||||
"on-primary": "#ffffff",
|
||||
"primary-container": "#a61d24",
|
||||
"background": "#faf9f7",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"aged-amber": "#FFBF00",
|
||||
"error": "#ba1a1a",
|
||||
"inverse-surface": "#2f3130",
|
||||
"primary": "#820012",
|
||||
"secondary": "#735c00",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"surface-dim": "#dadad8",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-background": "#1a1c1b",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-bright": "#faf9f7",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"outline-variant": "#e2bebc",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-surface": "#1a1c1b",
|
||||
"ink-black": "#1A1A1A",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"subtle-gray": "#999999",
|
||||
"secondary-fixed": "#ffe088"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-lg": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-md": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
color: #1a1c1b;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.input-focus-ring:focus-within {
|
||||
border-color: #A61D24;
|
||||
box-shadow: 0 0 0 1px rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
.custom-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-body-md min-h-screen pb-32">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-margin-page h-16 bg-surface dark:bg-surface-dim shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="active:scale-95 transition-transform hover:opacity-80">
|
||||
<span class="material-symbols-outlined text-primary dark:text-primary-fixed">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">编辑城市信息</h1>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<main class="mt-20 px-margin-page space-y-stack-md">
|
||||
<!-- Section 1: City Status -->
|
||||
<section class="bg-surface-container-lowest p-5 rounded-xl custom-shadow space-y-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-heritage-red">location_on</span>
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black">城市运营状态</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<button class="status-btn flex flex-col items-center justify-center py-4 rounded-lg border-2 border-heritage-red bg-primary-container/5 text-heritage-red transition-all" id="status-active" onclick="setStatus('active')">
|
||||
<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
<span class="font-label-md text-label-md">已开城</span>
|
||||
</button>
|
||||
<button class="status-btn flex flex-col items-center justify-center py-4 rounded-lg border-2 border-surface-variant text-on-surface-variant transition-all hover:bg-surface-container-low" id="status-paused" onclick="setStatus('paused')">
|
||||
<span class="material-symbols-outlined mb-1">pause_circle</span>
|
||||
<span class="font-label-md text-label-md">暂停</span>
|
||||
</button>
|
||||
<button class="status-btn flex flex-col items-center justify-center py-4 rounded-lg border-2 border-surface-variant text-on-surface-variant transition-all hover:bg-surface-container-low" id="status-inactive" onclick="setStatus('inactive')">
|
||||
<span class="material-symbols-outlined mb-1">cancel</span>
|
||||
<span class="font-label-md text-label-md">未开城</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section 2: Partner Info -->
|
||||
<section class="bg-surface-container-lowest p-5 rounded-xl custom-shadow space-y-4">
|
||||
<div class="flex items-center gap-2 border-b border-surface-variant pb-3">
|
||||
<span class="material-symbols-outlined text-heritage-red">handshake</span>
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black">合伙人信息</h2>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-subtle-gray ml-1">城市名称 (只读)</label>
|
||||
<div class="bg-surface-container-low px-4 py-3 rounded-lg border border-surface-variant flex items-center">
|
||||
<span class="text-on-surface-variant font-medium">洛阳市</span>
|
||||
<span class="material-symbols-outlined text-subtle-gray ml-auto text-[18px]">lock</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">合伙人姓名</label>
|
||||
<input class="w-full bg-white px-4 py-3 rounded-lg border border-surface-variant focus:outline-none focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 transition-all font-medium text-ink-black" placeholder="输入姓名" type="text" value="王德礼">
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">合伙人手机号</label>
|
||||
<input class="w-full bg-white px-4 py-3 rounded-lg border border-surface-variant focus:outline-none focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 transition-all font-medium text-ink-black" placeholder="输入手机号" type="tel" value="138 **** 8888">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section 3: Contract & Financials -->
|
||||
<section class="bg-surface-container-lowest p-5 rounded-xl custom-shadow space-y-5">
|
||||
<div class="flex items-center gap-2 border-b border-surface-variant pb-3">
|
||||
<span class="material-symbols-outlined text-heritage-red">account_balance_wallet</span>
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black">合同与结算</h2>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">签约合同扫描件</label>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="relative aspect-[3/4] rounded-lg border border-surface-variant overflow-hidden group">
|
||||
<div class="w-full h-full bg-cover bg-center" data-alt="A high-resolution photograph of a legally binding business contract for Dukang liquor distribution. The document features elegant Chinese calligraphy and official red circular stamps. It is placed on a textured fine-paper background with warm, editorial lighting and subtle red accents from the brand's identity. The aesthetic is professional, authoritative, and grounded in heritage." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBhEi28C6gKasHQkK7KyxwKUJp4qRmW0j22c6-JiiXf76M_XOKU3Gy7NphH0o2lVtEQLmzyRZTiDjQgPY1xaQ9Y0J8nTdBSsoyeY5v-xeR6M0yUZZfgq79uTelRZafGooPaM7GqkkPTQZek43RCtdcq7l7IQ11RSol5tH0-0U6xvOoc2V2W1zdnOiFoUdYs76YnVSvae7CFx4fQgPMAlcDocgwYUj2gpRkm85UexA7c0htCyHLRZ5sJDdOZSKCXJFArCxC8GUTUvoM')"></div>
|
||||
<button class="absolute top-2 right-2 bg-black/50 text-white w-7 h-7 rounded-full flex items-center justify-center backdrop-blur-sm active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined text-[16px]">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="aspect-[3/4] rounded-lg border-2 border-dashed border-surface-variant bg-surface-container-low flex flex-col items-center justify-center text-subtle-gray hover:text-heritage-red hover:border-heritage-red transition-all group active:scale-95">
|
||||
<span class="material-symbols-outlined text-[32px] mb-2 group-hover:scale-110 transition-transform">add_a_photo</span>
|
||||
<span class="font-label-md text-label-md">上传合同</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">上传电子附件</label>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<button class="aspect-[3/4] rounded-lg border-2 border-dashed border-surface-variant bg-surface-container-low flex flex-col items-center justify-center text-subtle-gray hover:text-heritage-red hover:border-heritage-red transition-all group active:scale-95">
|
||||
<span class="material-symbols-outlined text-[32px] mb-2 group-hover:scale-110 transition-transform">upload_file</span>
|
||||
<span class="font-label-md text-label-md">上传附件</span>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">结算银行卡号</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-white px-4 py-3 rounded-lg border border-surface-variant focus:outline-none focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 transition-all font-medium text-ink-black pl-11" placeholder="输入卡号" type="text" value="6222 **** **** 9012">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-subtle-gray">credit_card</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">开户主姓名</label>
|
||||
<input class="w-full bg-white px-4 py-3 rounded-lg border border-surface-variant focus:outline-none focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 transition-all font-medium text-ink-black" placeholder="输入开户名" type="text" value="洛阳杜康商贸有限公司">
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant ml-1">开户银行 (结算用)</label>
|
||||
<input class="w-full bg-white px-4 py-3 rounded-lg border border-surface-variant focus:outline-none focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 transition-all font-medium text-ink-black" placeholder="输入结算银行名称" type="text" value="中国工商银行">
|
||||
</div></div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Bar -->
|
||||
<footer class="fixed bottom-0 left-0 w-full z-50 bg-surface/80 backdrop-blur-md px-margin-page py-4 pb-safe-area-inset-bottom flex justify-between items-center shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] border-t border-surface-variant/30">
|
||||
<button class="flex-1 mr-3 h-12 rounded-xl border border-outline-variant text-on-surface-variant font-medium active:scale-95 transition-transform">
|
||||
取消
|
||||
</button>
|
||||
<button class="flex-[2] h-12 bg-heritage-red text-white rounded-xl font-medium shadow-lg shadow-heritage-red/20 active:scale-[0.98] transition-all flex items-center justify-center gap-2" id="saveBtn">
|
||||
<span class="material-symbols-outlined text-[20px]">save</span>
|
||||
保存修改
|
||||
</button>
|
||||
</footer>
|
||||
<script>
|
||||
function setStatus(status) {
|
||||
const btns = document.querySelectorAll('.status-btn');
|
||||
btns.forEach(btn => {
|
||||
btn.classList.remove('border-heritage-red', 'bg-primary-container/5', 'text-heritage-red');
|
||||
btn.classList.add('border-surface-variant', 'text-on-surface-variant');
|
||||
const icon = btn.querySelector('.material-symbols-outlined');
|
||||
icon.style.fontVariationSettings = "'FILL' 0";
|
||||
});
|
||||
|
||||
const activeBtn = document.getElementById('status-' + status);
|
||||
activeBtn.classList.add('border-heritage-red', 'bg-primary-container/5', 'text-heritage-red');
|
||||
activeBtn.classList.remove('border-surface-variant', 'text-on-surface-variant');
|
||||
const activeIcon = activeBtn.querySelector('.material-symbols-outlined');
|
||||
activeIcon.style.fontVariationSettings = "'FILL' 1";
|
||||
}
|
||||
|
||||
document.getElementById('saveBtn').addEventListener('click', function() {
|
||||
const btn = this;
|
||||
const originalContent = btn.innerHTML;
|
||||
btn.innerHTML = '<span class="material-symbols-outlined animate-spin">sync</span> 保存中...';
|
||||
btn.disabled = true;
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = '<span class="material-symbols-outlined">check</span> 修改成功';
|
||||
btn.classList.replace('bg-heritage-red', 'bg-success-green');
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalContent;
|
||||
btn.classList.replace('bg-success-green', 'bg-heritage-red');
|
||||
btn.disabled = false;
|
||||
}, 2000);
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "编辑城市页面 - 完善开户行与附件上传",
|
||||
"screenId": "3e226e0ce1b4453582e0867bbe8a94e5",
|
||||
"syncedAt": "2026-06-29T02:33:10.155Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1,323 @@
|
||||
<!DOCTYPE html><html lang="zh-CN"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<title>补发处理 - 杜康合伙人</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"heritage-red": "#A61D24",
|
||||
"primary": "#820012",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary": "#735c00",
|
||||
"surface-dim": "#dadad8",
|
||||
"surface": "#faf9f7",
|
||||
"status-blue": "#2A6EBB",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"subtle-gray": "#999999",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-container": "#a61d24",
|
||||
"inverse-surface": "#2f3130",
|
||||
"tertiary-container": "#4e5852",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-bright": "#faf9f7",
|
||||
"ink-black": "#1A1A1A",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container": "#efeeec",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-error": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-error-container": "#93000a",
|
||||
"on-background": "#1a1c1b",
|
||||
"outline": "#8d706e",
|
||||
"on-primary-fixed": "#410004",
|
||||
"tertiary": "#37413b",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"background": "#faf9f7",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-primary-container": "#ffb9b4"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-lg": "32px",
|
||||
"stack-md": "16px",
|
||||
"stack-sm": "4px",
|
||||
"base": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg-mobile": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.stepper-line {
|
||||
height: 2px;
|
||||
flex-grow: 1;
|
||||
background-color: #E3E2E0;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.stepper-line.active {
|
||||
background-color: #A61D24;
|
||||
}
|
||||
.glass-header {
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
.reshipment-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.safe-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-md selection:bg-heritage-red/20">
|
||||
<!-- Top AppBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-margin-page h-16 bg-surface shadow-sm glass-header">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="active:opacity-70 transition-all duration-200">
|
||||
<span class="material-symbols-outlined text-heritage-red">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-heritage-red font-bold">补发处理</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-16 pb-24 min-h-screen">
|
||||
<!-- Alert Banner -->
|
||||
<div class="bg-aged-amber/10 border-b border-aged-amber/20 px-margin-page py-3 flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-aged-amber" style="font-variation-settings: 'FILL' 1;">warning</span>
|
||||
<p class="font-label-md text-label-md text-secondary font-semibold">您有 2 笔补发订单待配送</p>
|
||||
</div>
|
||||
<!-- Reshipment List -->
|
||||
<div class="reshipment-list px-margin-page space-y-stack-md mt-stack-md overflow-y-auto">
|
||||
<!-- Card 1: 待配送 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] p-5 border border-heritage-red/5">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="px-2 py-1 bg-heritage-red/10 text-heritage-red rounded text-[10px] font-bold tracking-wider">补发订单</span>
|
||||
<div class="flex items-center gap-1 text-subtle-gray">
|
||||
<span class="w-2 h-2 rounded-full bg-subtle-gray"></span>
|
||||
<span class="font-label-md text-label-md">待配送</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="text-subtle-gray text-xs mb-1">原订单号</div>
|
||||
<div class="flex justify-between items-center group active:opacity-60 transition-opacity">
|
||||
<span class="font-headline-md text-headline-md text-on-surface decoration-heritage-red underline-offset-4 decoration-1">DK202310248892</span>
|
||||
<span class="material-symbols-outlined text-subtle-gray text-sm">open_in_new</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Product Summary -->
|
||||
<div class="flex items-center gap-4 py-4 border-y border-surface-variant/50 mb-4">
|
||||
<div class="w-16 h-16 rounded-lg bg-surface-container overflow-hidden flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="A professional, high-quality studio photograph of a premium Chinese baijiu bottle, Dukang Yuxiang brand, showcasing its intricate traditional calligraphy and elegant red and gold label. The lighting is dramatic and moody, reflecting luxury and heritage modernist aesthetics, with a soft blur in the background to emphasize the product craftsmanship." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCneYI8F6gqPymDCR0WdAEMCNo-3EdTHZ65Esr4aGk_0sgAaNi8eY7rEHLluFugd419a_IY05ir6_ri9NFmQKT2cMA3PBtVKTSp1k8blQlvRLgzwLcQYFnlLPGn8gBVDUIHcsHezIBxBGna_1CGv7cj_3SqCvnfpX5P22v0Jc9X7CrQn-B1630uyVkj2Vz5HY3_rB9cJrXRT66Ml460fcoBnGgJL1wOIS_ZiYdrratBdYvneZy_FnoZexdznvJr56BQcYrX-TktvQA">
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h4 class="font-headline-md text-headline-md text-on-surface">杜康御享 52度</h4>
|
||||
<div class="flex justify-between items-center mt-1">
|
||||
<p class="text-subtle-gray font-label-md">500ml / 瓶</p>
|
||||
<span class="font-bold text-on-surface">x 1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Delivery Address -->
|
||||
<div class="mb-4 space-y-2">
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="material-symbols-outlined text-heritage-red text-lg">location_on</span>
|
||||
<div>
|
||||
<div class="font-bold text-on-surface">张建设 <span class="ml-2 font-normal text-subtle-gray">138****5566</span></div>
|
||||
<p class="text-body-md text-on-surface-variant mt-0.5 leading-relaxed">河南省洛阳市瀍河回族区启明南路208号杜康专卖店</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- HQ Note -->
|
||||
<div class="bg-surface-container-low rounded-lg p-3 mb-6 flex gap-2">
|
||||
<span class="material-symbols-outlined text-subtle-gray text-lg">info</span>
|
||||
<p class="text-xs text-on-surface-variant leading-relaxed">
|
||||
<span class="font-bold">总部备注:</span> 原订单物流损毁，系统已核实，申请补发。请合伙人尽快核实库存并配送。
|
||||
</p>
|
||||
</div>
|
||||
<!-- Stepper -->
|
||||
<div class="flex items-center justify-between px-4 mb-8">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-heritage-red flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-heritage-red">待配送</span>
|
||||
</div>
|
||||
<div class="stepper-line"></div>
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface-variant bg-surface flex items-center justify-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-surface-variant"></div>
|
||||
</div>
|
||||
<span class="text-[10px] text-subtle-gray">配送中</span>
|
||||
</div>
|
||||
<div class="stepper-line"></div>
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface-variant bg-surface flex items-center justify-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-surface-variant"></div>
|
||||
</div>
|
||||
<span class="text-[10px] text-subtle-gray">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full h-12 bg-heritage-red text-white font-bold rounded-xl active:scale-[0.98] transition-transform shadow-lg shadow-heritage-red/20">
|
||||
开始配送
|
||||
</button>
|
||||
</div>
|
||||
<!-- Card 2: 配送中 -->
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] p-5 border border-heritage-red/5">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="px-2 py-1 bg-heritage-red/10 text-heritage-red rounded text-[10px] font-bold tracking-wider">补发订单</span>
|
||||
<div class="flex items-center gap-1 text-status-blue">
|
||||
<span class="w-2 h-2 rounded-full bg-status-blue animate-pulse"></span>
|
||||
<span class="font-label-md text-label-md">配送中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="text-subtle-gray text-xs mb-1">原订单号</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-headline-md text-headline-md text-on-surface">DK202310247711</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 py-4 border-y border-surface-variant/50 mb-4">
|
||||
<div class="w-16 h-16 rounded-lg bg-surface-container overflow-hidden flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="Close-up of a premium spirits bottle label, highlighting artistic Chinese characters for 'Dukang'. The aesthetic is minimalist yet deeply grounded in tradition, with warm ambient lighting reflecting off glass surfaces. Neutral earth tones and deep red accents dominate the color palette, maintaining a high-end editorial feel." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBHwDNucrskKb3nV72Cv2WeNeJYhETjxXqsaYaLKepFv3ttQULuBWP2zjbYShEXIKGvtX06XAgd1QWAjaVzg1EFAUGEYI545HGpuAXsU7eoLJkKFtOej7UWa8a1bp8JHXttH23LRy3SD-St3TbgHV-Qc_nC6GP5GVal8xJ4ZCZmKyDQWGbjQ29IZ_481KPZyY9ImbbT4HkoUpndemjBKWb24nWwocDs68aYOpWX4Q3yYBVt2DofGMwfLrNyHU3lCF7vvcf5UUI45uU">
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h4 class="font-headline-md text-headline-md text-on-surface">杜康老酒 1972</h4>
|
||||
<div class="flex justify-between items-center mt-1">
|
||||
<p class="text-subtle-gray font-label-md">500ml / 瓶</p>
|
||||
<span class="font-bold text-on-surface">x 2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 space-y-2">
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="material-symbols-outlined text-heritage-red text-lg">location_on</span>
|
||||
<div>
|
||||
<div class="font-bold text-on-surface">李秋月 <span class="ml-2 font-normal text-subtle-gray">159****2234</span></div>
|
||||
<p class="text-body-md text-on-surface-variant mt-0.5 leading-relaxed">河南省郑州市管城回族区商都路31号红星美凯龙旗舰店</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low rounded-lg p-3 mb-6 flex gap-2">
|
||||
<span class="material-symbols-outlined text-subtle-gray text-lg">info</span>
|
||||
<p class="text-xs text-on-surface-variant leading-relaxed">
|
||||
<span class="font-bold">总部备注:</span> 门店自提漏发，需合伙人送货上门以作补偿。
|
||||
</p>
|
||||
</div>
|
||||
<!-- Stepper Active -->
|
||||
<div class="flex items-center justify-between px-4 mb-8">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-heritage-red flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-heritage-red">待配送</span>
|
||||
</div>
|
||||
<div class="stepper-line active"></div>
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-heritage-red flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white text-[14px]" style="font-variation-settings: 'FILL' 0;">local_shipping</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-heritage-red">配送中</span>
|
||||
</div>
|
||||
<div class="stepper-line"></div>
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface-variant bg-surface flex items-center justify-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-surface-variant"></div>
|
||||
</div>
|
||||
<span class="text-[10px] text-subtle-gray">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full h-12 bg-success-green text-white font-bold rounded-xl active:scale-[0.98] transition-transform shadow-lg shadow-success-green/10">
|
||||
确认送达
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Shell -->
|
||||
|
||||
<script>
|
||||
// Simple Interaction logic
|
||||
document.querySelectorAll('button').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const text = this.innerText.trim();
|
||||
if (text === '开始配送') {
|
||||
// Update UI state mock
|
||||
this.classList.remove('bg-heritage-red');
|
||||
this.classList.add('bg-success-green');
|
||||
this.innerText = '配送中...';
|
||||
setTimeout(() => {
|
||||
this.innerText = '确认送达';
|
||||
}, 500);
|
||||
} else if (text === '确认送达') {
|
||||
this.classList.replace('bg-success-green', 'bg-subtle-gray');
|
||||
this.innerText = '配送完成';
|
||||
this.disabled = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "补发处理页面",
|
||||
"screenId": "5b02000ac24748ac8e992f7812230afc",
|
||||
"syncedAt": "2026-06-29T02:34:57.672Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@@ -0,0 +1,286 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<title>补发订单详情 - HQ Management</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&family=Be+Vietnam+Pro:wght@400&family=Inter:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"heritage-red": "#A61D24",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"success-green": "#2D6A4F",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"subtle-gray": "#999999",
|
||||
"background": "#faf9f7",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-error": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"tertiary": "#37413b",
|
||||
"primary-container": "#a61d24",
|
||||
"surface": "#faf9f7",
|
||||
"error": "#ba1a1a",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-secondary-container": "#745c00",
|
||||
"error-container": "#ffdad6",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-secondary": "#ffffff",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"secondary": "#735c00",
|
||||
"on-tertiary": "#ffffff",
|
||||
"outline": "#8d706e",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface-tint": "#b3272c",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-primary": "#ffffff",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-surface": "#1a1c1b",
|
||||
"surface-bright": "#faf9f7",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-error-container": "#93000a",
|
||||
"primary": "#820012",
|
||||
"on-background": "#1a1c1b",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-container": "#efeeec",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"secondary-container": "#fed65b",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-tertiary-container": "#c2cdc6"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"stack-md": "16px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
|
||||
background-repeat: repeat;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.active-step-line::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 24px;
|
||||
bottom: -8px;
|
||||
width: 2px;
|
||||
background-color: #A61D24;
|
||||
}
|
||||
.pending-step-line::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 24px;
|
||||
bottom: -8px;
|
||||
width: 2px;
|
||||
background-color: #E2BEBC;
|
||||
}
|
||||
.last-step::after {
|
||||
display: none;
|
||||
}
|
||||
.no-shadow {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface antialiased pb-32">
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="w-full top-0 sticky bg-surface dark:bg-surface-dim z-50 flex items-center justify-between px-margin-page h-16 shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="material-symbols-outlined text-primary active:scale-95 duration-150">arrow_back</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile md:text-headline-md text-on-surface">总部管理</h1>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<!-- Status Banner -->
|
||||
<section class="w-full bg-aged-amber/10 py-6 px-margin-page border-b border-aged-amber/20">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="bg-aged-amber text-white p-2 rounded-full flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[24px]">pending_actions</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-headline-md text-headline-md text-on-secondary-container">补发处理中</h2>
|
||||
<p class="font-body-md text-body-md text-on-secondary-fixed-variant mt-0.5">已由客服 [张美玲] 发起补发任务</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<main class="mt-4 px-margin-page space-y-4">
|
||||
<!-- Reshipment Info Card -->
|
||||
<div class="bg-white rounded-xl p-4 border border-outline-variant/30 no-shadow">
|
||||
<h3 class="font-headline-md text-headline-md text-heritage-red mb-4">补发信息</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-subtle-gray font-body-md">补发原因</span>
|
||||
<span class="text-on-surface font-body-md text-right">破损补发 - 原订单商品物流破损</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-t border-outline-variant/10 pt-3">
|
||||
<span class="text-subtle-gray font-body-md">关联原订单</span>
|
||||
<a class="text-heritage-red font-body-md underline decoration-heritage-red/30" href="#">DK2023112488921</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Product Section -->
|
||||
<div class="bg-white rounded-xl p-4 border border-outline-variant/30 no-shadow">
|
||||
<div class="flex gap-4">
|
||||
<div class="relative w-24 h-24 rounded-lg overflow-hidden bg-surface-container flex-shrink-0 border border-outline-variant/20">
|
||||
<img alt="杜康·传奇1972 尊享版" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBnBBnwTs_vGmZGKquPutgnSP8qugH65GEcsUFB-8jdOGMQUENJQR79EZ00UP0xgIbHNOPuZXpoxO_n4HLdunkAgwj8HNvp90v_M3g6F7cV8T_p9H-24cO1zOkR-U4WUJjo2t6lH-5Jqkv-9SpXlnKm-WC5RgERb9enXeCWJxIntIwHhdx_UQjhcUDJkkpGKJ4RuAy2a5XKK9oS0H4a7k-R8Y3ItbjYVWefJs7JvhjFwu_1_AIqLcSEw9GHgumGEwz8dBBkyrAj0pA">
|
||||
<div class="absolute top-0 right-0 bg-heritage-red text-white text-[10px] px-1.5 py-0.5 rounded-bl-lg font-label-md">
|
||||
补发商品
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between py-1 flex-grow">
|
||||
<div>
|
||||
<h4 class="font-headline-md text-headline-md text-on-surface leading-tight">杜康·传奇1972 尊享版</h4>
|
||||
<p class="text-subtle-gray font-body-md mt-1">规格: 500ml 单瓶装</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<span class="text-heritage-red font-headline-md">¥0.00</span>
|
||||
<span class="text-subtle-gray font-body-md">x1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Delivery Track -->
|
||||
<div class="bg-white rounded-xl p-4 border border-outline-variant/30 no-shadow">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-6">补发进度</h3>
|
||||
<div class="space-y-8 ml-1">
|
||||
<!-- Step 1: Active -->
|
||||
<div class="relative flex gap-4 active-step-line">
|
||||
<div class="z-10 w-6 h-6 rounded-full bg-heritage-red flex items-center justify-center ring-4 ring-heritage-red/10">
|
||||
<span class="material-symbols-outlined text-[14px] text-white" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body-md text-on-surface font-bold">补发任务已下发至 [洛阳合伙人]</p>
|
||||
<p class="text-[12px] text-subtle-gray mt-0.5">2023-11-25 14:20:11</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Step 2: Pending -->
|
||||
<div class="relative flex gap-4 pending-step-line">
|
||||
<div class="z-10 w-6 h-6 rounded-full bg-outline-variant/40 flex items-center justify-center">
|
||||
<div class="w-2 h-2 rounded-full bg-subtle-gray"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body-md text-subtle-gray">待合伙人取货配送</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Step 3: Pending -->
|
||||
<div class="relative flex gap-4 last-step">
|
||||
<div class="z-10 w-6 h-6 rounded-full bg-outline-variant/40 flex items-center justify-center">
|
||||
<div class="w-2 h-2 rounded-full bg-subtle-gray"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-body-md text-subtle-gray">已送达</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Receiver Section -->
|
||||
<div class="bg-white rounded-xl p-4 border border-outline-variant/30 no-shadow">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="mt-1 bg-surface-container-high p-2 rounded-full">
|
||||
<span class="material-symbols-outlined text-heritage-red text-[20px]">location_on</span>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-headline-md text-headline-md">王立国</span>
|
||||
<span class="font-body-md text-on-surface-variant">138 **** 9928</span>
|
||||
</div>
|
||||
<p class="font-body-md text-on-surface-variant mt-2 leading-relaxed">
|
||||
河南省洛阳市伊川县杜康路32号 办公大楼 402室
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- HQ Meta Data (Optional context for Admin) -->
|
||||
<div class="py-4 px-2 space-y-2">
|
||||
<div class="flex justify-between text-[12px] text-subtle-gray">
|
||||
<span class="">任务编号: RSH-9928102231</span>
|
||||
<span class="flex items-center gap-1">复制 <span class="material-symbols-outlined text-[14px]">content_copy</span></span>
|
||||
</div>
|
||||
<div class="flex justify-between text-[12px] text-subtle-gray">
|
||||
<span class="">发起时间: 2023-11-25 14:15:45</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Fixed Bottom Actions -->
|
||||
<div class="fixed bottom-0 left-0 w-full bg-surface-container-lowest dark:bg-inverse-surface px-margin-page py-4 pb-safe flex gap-4 z-50 shadow-[0px_-4px_20px_rgba(166,29,36,0.05)]">
|
||||
<button class="flex-1 h-12 border border-heritage-red text-heritage-red rounded-xl font-headline-md text-headline-md active:scale-95 transition-transform">
|
||||
撤回补发
|
||||
</button>
|
||||
<button class="flex-1 h-12 bg-heritage-red text-white rounded-xl font-headline-md text-headline-md active:scale-95 transition-transform flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-[20px]">call</span>
|
||||
联系合伙人
|
||||
</button>
|
||||
</div>
|
||||
<!-- Bottom Nav Bar (Suppressed on detail pages, but kept structure if needed elsewhere) -->
|
||||
<!-- Not rendered as per "Destination Rule" in instructions for task-focused sub-pages -->
|
||||
<script>
|
||||
// Simple micro-interaction for buttons
|
||||
document.querySelectorAll('button').forEach(btn => {
|
||||
btn.addEventListener('touchstart', function() {
|
||||
this.classList.add('opacity-80');
|
||||
});
|
||||
btn.addEventListener('touchend', function() {
|
||||
this.classList.remove('opacity-80');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "补发订单详情页",
|
||||
"screenId": "a5321255c0b441a7beb94a17b347a9e7",
|
||||
"syncedAt": "2026-06-29T02:34:44.553Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -0,0 +1,285 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<title>我的订单 - 补发详情</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<!-- Tailwind Configuration -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-container": "#a61d24",
|
||||
"inverse-surface": "#2f3130",
|
||||
"heritage-red": "#A61D24",
|
||||
"primary": "#820012",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary": "#735c00",
|
||||
"surface-dim": "#dadad8",
|
||||
"surface": "#faf9f7",
|
||||
"status-blue": "#2A6EBB",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"subtle-gray": "#999999",
|
||||
"outline": "#8d706e",
|
||||
"on-primary-fixed": "#410004",
|
||||
"tertiary": "#37413b",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"background": "#faf9f7",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary-container": "#4e5852",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-bright": "#faf9f7",
|
||||
"ink-black": "#1A1A1A",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container": "#efeeec",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-error": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-error-container": "#93000a",
|
||||
"on-background": "#1a1c1b"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"margin-page": "20px",
|
||||
"stack-lg": "32px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: #faf9f7;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.card-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
.step-line::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 24px;
|
||||
width: 2px;
|
||||
height: calc(100% - 16px);
|
||||
background-color: #e3e2e0;
|
||||
}
|
||||
.step-line-active::after {
|
||||
background-color: #A61D24;
|
||||
}
|
||||
.step-line:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface overflow-x-hidden">
|
||||
<!-- Top Navigation Bar -->
|
||||
<nav class="fixed top-0 left-0 w-full z-50 flex items-center px-4 h-12 bg-surface">
|
||||
<button class="active:opacity-70 transition-opacity duration-200">
|
||||
<span class="material-symbols-outlined text-heritage-red">arrow_back_ios</span>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center font-headline-lg-mobile text-headline-lg-mobile font-semibold text-on-surface pr-8">我的订单</h1>
|
||||
</nav>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="pt-12 pb-24">
|
||||
<!-- Status Banner -->
|
||||
<section class="bg-heritage-red pt-8 pb-12 px-margin-page relative overflow-hidden">
|
||||
<!-- Atmospheric Shader Placeholder -->
|
||||
|
||||
<div class="relative z-10 flex items-center justify-between">
|
||||
<div class="space-y-1">
|
||||
<h2 class="text-white font-headline-lg text-headline-lg">补发中</h2>
|
||||
<p class="text-white/80 font-body-md text-body-md">包裹正在揽收，请耐心等待</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-white text-[48px] opacity-90">local_shipping</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Container for Cards (Overlapping effect) -->
|
||||
<div class="px-margin-page -mt-6 relative z-20 space-y-4">
|
||||
<!-- Delivery Tracker Card -->
|
||||
<div class="bg-surface-container-lowest p-margin-page rounded-xl card-shadow" style="opacity: 1; transform: translateY(0px); transition: 0.4s;">
|
||||
<h3 class="font-headline-md text-headline-md mb-6 border-l-4 border-heritage-red pl-3">物流动态</h3>
|
||||
<div class="space-y-0">
|
||||
<!-- Step 1: Finished -->
|
||||
<div class="relative pl-8 pb-8 step-line step-line-active">
|
||||
<div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-heritage-red flex items-center justify-center z-10">
|
||||
<span class="material-symbols-outlined text-[16px] text-white" style="font-variation-settings: 'wght' 700;">check</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-headline-md text-headline-md text-heritage-red">补发单已下达</p>
|
||||
<p class="text-subtle-gray font-body-md text-body-md mt-1">2023-10-12 09:30:15</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Step 2: Current -->
|
||||
<div class="relative pl-8 pb-8 step-line step-line-active">
|
||||
<div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-heritage-red flex items-center justify-center z-10 shadow-[0_0_12px_rgba(166,29,36,0.3)]">
|
||||
<div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-headline-md text-headline-md text-on-surface">包裹揽收中</p>
|
||||
<p class="text-on-surface-variant font-body-md text-body-md mt-1">包裹正由物流网点揽收处理</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Step 3: Pending -->
|
||||
<div class="relative pl-8 pb-0 step-line">
|
||||
<div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-surface-container-high border-2 border-surface-variant flex items-center justify-center z-10">
|
||||
<div class="w-2 h-2 rounded-full bg-subtle-gray"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-headline-md text-headline-md text-subtle-gray">运输中</p>
|
||||
<p class="text-subtle-gray font-body-md text-body-md mt-1">暂无物流信息</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reshipment Info Card -->
|
||||
<div class="bg-surface-container-lowest p-margin-page rounded-xl card-shadow space-y-4" style="opacity: 1; transform: translateY(0px); transition: 0.4s 0.1s;">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-on-surface-variant font-body-md">补发原因</span>
|
||||
<span class="text-on-surface font-headline-md">商品破损</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-on-surface-variant font-body-md">关联原订单</span>
|
||||
<span class="text-heritage-red font-headline-md font-mono tracking-tight">DK20231005002</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Product Card -->
|
||||
<div class="bg-surface-container-lowest p-margin-page rounded-xl card-shadow" style="opacity: 1; transform: translateY(0px); transition: 0.4s 0.2s;">
|
||||
<div class="flex gap-4">
|
||||
<div class="w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-surface-container">
|
||||
<img class="w-full h-full object-cover" data-alt="A high-end product photograph of a premium Chinese baijiu bottle, 'Dukang Yuxiang 15th Generation', featuring elegant calligraphy and gold accents, set against a minimalist, warm-toned studio background with soft directional lighting to emphasize the glass texture and liquid clarity. The aesthetic is sophisticated and heritage-inspired." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCcg8KkAdiyDyzT1xsr29vmj86LfU3jkHBqdAknbUrWq0pO-wBhVnP1wdcNVktvkN1FHU1VO7SaTH639WQ_sSe61tBAgcqYX8-HDP5QguQpvBY8uBgJCHrKK9Y5d0t2tHAqxxCKw6zXur1d47YYLHw1856Xc83DCCqtPWNQUGON2UnQhd1WYBUTur11Rl1EEouKTI9_z9S-BlhR4TmfQIpD67zEM382g84Ic3PXW2uvqQmXV2SjGvsg-WD0uSTItBV5rdhrvzuL4xk">
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between py-1">
|
||||
<div>
|
||||
<h4 class="font-headline-md text-headline-md text-on-surface line-clamp-1">杜康·白酒古酿 500ml</h4>
|
||||
<p class="text-on-surface-variant text-label-md font-label-md mt-1">清香型 52度 礼盒装</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-heritage-red font-headline-md">¥0.00</span>
|
||||
<span class="text-on-surface-variant text-label-md font-label-md"> x1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Coupon Badge Metaphor -->
|
||||
<div class="mt-4 pt-4 border-t border-surface-variant/50 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="bg-aged-amber text-on-secondary-container px-3 py-1 rounded-sm text-label-md font-bold relative overflow-hidden flex items-center">
|
||||
<div class="absolute -left-1 top-1/2 -translate-y-1/2 w-2 h-2 bg-surface-container-lowest rounded-full"></div>
|
||||
<div class="absolute -right-1 top-1/2 -translate-y-1/2 w-2 h-2 bg-surface-container-lowest rounded-full"></div>
|
||||
¥200好客权益</div>
|
||||
<span class="text-on-surface-variant text-label-md">随单赠送</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-[20px]">info</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Receiver Info Card -->
|
||||
<div class="bg-surface-container-lowest p-margin-page rounded-xl card-shadow" style="opacity: 1; transform: translateY(0px); transition: 0.4s 0.3s;">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="material-symbols-outlined text-heritage-red">location_on</span>
|
||||
<h3 class="font-headline-md text-headline-md">收货信息</h3>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-headline-md">刘先生</span>
|
||||
<span class="text-on-surface-variant">138****8888</span>
|
||||
</div>
|
||||
<p class="text-on-surface font-body-md leading-relaxed">河南省洛阳市伊川县杜康大道杜康大厦 A座 801室</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Fixed Bottom Action Bar -->
|
||||
<footer class="fixed bottom-0 left-0 w-full z-50 bg-surface-container-lowest pt-3 pb-safe px-margin-page shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] rounded-t-xl">
|
||||
<button class="w-full bg-heritage-red text-white py-3 rounded-xl font-headline-md active:scale-95 transition-transform duration-150 flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-[20px]">support_agent</span>
|
||||
联系客服
|
||||
</button>
|
||||
</footer>
|
||||
<!-- Bottom Nav Shell Logic (Suppressed for transactional detail page as per instructions) -->
|
||||
<!-- Task-Focused sub-page implies a temporary departure from main flow, hide shell -->
|
||||
<script>
|
||||
// Micro-interaction for contact button
|
||||
document.querySelector('button').addEventListener('click', function() {
|
||||
// Placeholder for interaction logic
|
||||
console.log('Opening customer service chat...');
|
||||
});
|
||||
|
||||
// Simple opacity fade-in for cards on load
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const cards = document.querySelectorAll('.card-shadow');
|
||||
cards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(10px)';
|
||||
card.style.transition = `all 0.4s ease ${index * 0.1}s`;
|
||||
setTimeout(() => {
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "补发订单详情页",
|
||||
"screenId": "efe0608f7b1f4f19a865f53558629381",
|
||||
"syncedAt": "2026-06-29T02:35:21.938Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style="width: 390px; height: 982px; overflow: hidden; position: relative;"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"success-green": "#2D6A4F",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-bright": "#faf9f7",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"tertiary-container": "#4e5852",
|
||||
"heritage-red": "#A61D24",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-surface": "#2f3130",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"background": "#faf9f7",
|
||||
"secondary": "#735c00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"primary-container": "#a61d24",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-error": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"primary": "#820012",
|
||||
"surface": "#faf9f7",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container": "#efeeec",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-secondary-container": "#745c00",
|
||||
"subtle-gray": "#999999",
|
||||
"outline": "#8d706e",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-background": "#1a1c1b",
|
||||
"secondary-container": "#fed65b",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary": "#37413b",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-tint": "#b3272c"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.order-scroll-container {
|
||||
height: calc(100vh - 220px);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.order-scroll-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.card-red-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface dark:bg-surface-dim z-50 shadow-sm"><div class="flex items-center gap-4 w-full"><button class="flex items-center justify-center w-8 h-8 rounded-full hover:bg-surface-container transition-colors"><span class="material-symbols-outlined text-on-surface" data-icon="arrow_back">arrow_back</span></button><div class="flex-1 flex items-center bg-surface-container-low px-3 py-1.5 rounded-full border border-outline-variant"><span class="material-symbols-outlined text-subtle-gray mr-2" data-icon="search">search</span><input autofocus="" class="bg-transparent border-none focus:ring-0 text-body-md w-full text-on-surface" placeholder="搜索订单号、手机号、城市" type="text"><span class="material-symbols-outlined text-subtle-gray cursor-pointer" data-icon="cancel">cancel</span></div></div></header>
|
||||
<main class="pt-20 pb-24"><div class="px-margin-page pt-4 space-y-6"><!-- Filter Shortcuts --><div class="flex gap-2 overflow-x-auto scrollbar-hide pb-2"><button class="px-4 py-1.5 rounded-full bg-heritage-red text-white text-label-md font-label-md shrink-0">今日</button><button class="px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant text-label-md font-label-md shrink-0">昨日</button><button class="px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant text-label-md font-label-md shrink-0">近7天</button><button class="px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant text-label-md font-label-md shrink-0">本月</button></div><!-- Recent Searches --><section><div class="flex justify-between items-center mb-3"><h3 class="text-label-md font-semibold text-on-surface-variant">历史搜索</h3><span class="material-symbols-outlined text-subtle-gray text-[18px]" data-icon="delete">delete</span></div><div class="flex flex-wrap gap-2"><span class="px-3 py-1 rounded-lg bg-surface-container text-body-md text-on-surface">DK2023102401</span><span class="px-3 py-1 rounded-lg bg-surface-container text-body-md text-on-surface">188****8888</span><span class="px-3 py-1 rounded-lg bg-surface-container text-body-md text-on-surface">郑州</span><span class="px-3 py-1 rounded-lg bg-surface-container text-body-md text-on-surface">待发货</span></div></section><!-- Search Suggestions (Placeholder) --><section class="pt-4 border-t border-outline-variant"><h3 class="text-label-md font-semibold text-on-surface-variant mb-4">搜索建议</h3><div class="space-y-4"><div class="flex items-center gap-3 py-1"><span class="material-symbols-outlined text-subtle-gray" data-icon="history">history</span><span class="text-body-lg text-on-surface">DK20231024...</span></div><div class="flex items-center gap-3 py-1"><span class="material-symbols-outlined text-subtle-gray" data-icon="search">search</span><span class="text-body-lg text-on-surface">188 8888</span></div><div class="flex items-center gap-3 py-1"><span class="material-symbols-outlined text-subtle-gray" data-icon="search">search</span><span class="text-body-lg text-on-surface">洛阳 订单</span></div></div></section></div></main>
|
||||
<!-- BottomNavBar -->
|
||||
<!-- Micro-interaction script -->
|
||||
<script>
|
||||
document.querySelectorAll('button, a').forEach(el => {
|
||||
el.addEventListener('click', function(e) {
|
||||
if(this.classList.contains('active:scale-95')) return;
|
||||
this.classList.add('opacity-50');
|
||||
setTimeout(() => {
|
||||
this.classList.remove('opacity-50');
|
||||
}, 150);
|
||||
});
|
||||
});
|
||||
|
||||
// Simple scroll event for header elevation
|
||||
const header = document.querySelector('header');
|
||||
const scrollContainer = document.querySelector('.order-scroll-container');
|
||||
|
||||
scrollContainer.addEventListener('scroll', () => {
|
||||
if (scrollContainer.scrollTop > 10) {
|
||||
header.classList.add('shadow-md');
|
||||
} else {
|
||||
header.classList.remove('shadow-md');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "订单中心 - 搜索交互页",
|
||||
"screenId": "61c36cf8a2e14f37998ba9d17d4f27db",
|
||||
"syncedAt": "2026-06-29T02:34:32.671Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@@ -0,0 +1,296 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style="width: 390px; height: 982px; overflow: hidden; position: relative;"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"success-green": "#2D6A4F",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-bright": "#faf9f7",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"tertiary-container": "#4e5852",
|
||||
"heritage-red": "#A61D24",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-surface": "#2f3130",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"background": "#faf9f7",
|
||||
"secondary": "#735c00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"primary-container": "#a61d24",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-error": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"primary": "#820012",
|
||||
"surface": "#faf9f7",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container": "#efeeec",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-secondary-container": "#745c00",
|
||||
"subtle-gray": "#999999",
|
||||
"outline": "#8d706e",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-background": "#1a1c1b",
|
||||
"secondary-container": "#fed65b",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"tertiary": "#37413b",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface-tint": "#b3272c"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"base": "8px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.order-scroll-container {
|
||||
height: calc(100vh - 220px);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.order-scroll-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.card-red-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface dark:bg-surface-dim z-50 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="search">search</span>
|
||||
</div>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">订单中心</h1>
|
||||
<div class="flex items-center">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-20 pb-24">
|
||||
<!-- Filter & Batch Action Section -->
|
||||
<section class="px-margin-page mb-6">
|
||||
<div class="flex justify-between items-end mb-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">概览</span>
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black">实时订单管理</h2>
|
||||
</div>
|
||||
<button class="flex items-center gap-1 px-4 py-2 rounded-lg bg-surface border border-outline-variant text-primary font-label-md text-label-md hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="ios_share">ios_share</span>
|
||||
<span class="">导出CSV</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- FilterBar -->
|
||||
<div class="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
|
||||
<div class="flex items-center bg-white px-3 py-2 rounded-xl border border-outline-variant shadow-sm shrink-0">
|
||||
<span class="text-label-md font-label-md text-on-surface-variant mr-1">城市:</span>
|
||||
<span class="text-label-md font-label-md text-ink-black mr-2">洛阳</span>
|
||||
<span class="material-symbols-outlined text-[16px] text-subtle-gray" data-icon="expand_more">expand_more</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center bg-white px-3 py-2 rounded-xl border border-outline-variant shadow-sm shrink-0">
|
||||
<span class="text-label-md font-label-md text-on-surface-variant mr-1">状态:</span>
|
||||
<span class="text-label-md font-label-md text-heritage-red mr-2">全部</span>
|
||||
<span class="material-symbols-outlined text-[16px] text-subtle-gray" data-icon="expand_more">expand_more</span>
|
||||
</div><div class="flex items-center bg-white px-3 py-2 rounded-xl border border-outline-variant shadow-sm shrink-0">
|
||||
<span class="text-label-md font-label-md text-on-surface-variant mr-1">日期:</span>
|
||||
<span class="text-label-md font-label-md text-ink-black mr-2">今日</span>
|
||||
<span class="material-symbols-outlined text-[16px] text-subtle-gray" data-icon="calendar_today">calendar_today</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Order List -->
|
||||
<section class="order-scroll-container overflow-y-auto px-margin-page space-y-4" style="height: calc(-20px + 100vh); padding-bottom: 100px;">
|
||||
<!-- Order Card 1 (Pending) -->
|
||||
<div class="bg-surface-container-lowest p-gutter-card rounded-xl card-red-shadow border border-heritage-red/5">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="space-y-0.5">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">单号: DK2023102401</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-body-lg text-body-lg font-semibold text-ink-black">188 **** 8888</span>
|
||||
|
||||
<span class="px-2 py-0.5 rounded bg-secondary-container text-on-secondary-container text-label-md font-label-md">跨城订单</span></div>
|
||||
</div>
|
||||
<span class="text-secondary font-label-md text-label-md flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-aged-amber animate-pulse"></span>待发货</span>
|
||||
</div>
|
||||
<div class="flex gap-3 mb-4 bg-surface-container-low p-2 rounded-lg">
|
||||
<div class="w-16 h-16 rounded overflow-hidden flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="A premium 1:1 studio photograph of a classic Dukang liquor bottle with a traditional red and gold label, set against a soft, creamy white background. The lighting is elegant and directional, highlighting the glass texture and the liquid inside. The overall aesthetic is heritage-focused and minimalist, consistent with a high-end Chinese distillery's brand identity." src="https://lh3.googleusercontent.com/aida-public/AB6AXuANJ-AqirPsHLRzUcAmVhFqltrJU6TPr_CRgdeoSnii_un0Dgjnigj4i_ju4wGM4qB66EMcy4UzcJG42xzgQfyfKOrzm7s6FL2-EVzdPiqbxCLExKGI73peyFfcU5oV7aKV92jFTeB8FuBEaxALN-9x01BJICwVeXTDhnWJWW39-5U7Af5xPOjWpRwFlUhiD3tKQ6aBCV6zsleRymwQplBcXvui1zNHAaUOhhwj8bia4b3vn07dP0xGEIlzUbnL5Tc4wOh9bkPmDcU">
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<h3 class="font-body-md text-body-md font-medium text-on-surface">杜康·国花 52度浓香型 500ml</h3>
|
||||
<p class="text-label-md text-subtle-gray mt-1">数量: x2 | 合计: ¥1,298</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end items-center gap-2 pt-2 border-t border-surface-container">
|
||||
<button class="px-4 py-1.5 rounded-lg text-on-surface-variant font-label-md text-label-md hover:bg-surface-container transition-colors">详情</button>
|
||||
|
||||
<button class="px-4 py-1.5 rounded-lg bg-heritage-red text-white font-label-md text-label-md active:opacity-80 transition-opacity">立即发货</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Order Card 2 (Shipping) -->
|
||||
<div class="bg-surface-container-lowest p-gutter-card rounded-xl card-red-shadow border border-heritage-red/5">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="space-y-0.5">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">单号: DK2023102405</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-body-lg text-body-lg font-semibold text-ink-black">135 **** 9912</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-status-blue font-label-md text-label-md flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]" data-icon="local_shipping">local_shipping</span>
|
||||
配送中
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-3 mb-4 bg-surface-container-low p-2 rounded-lg">
|
||||
<div class="w-16 h-16 rounded overflow-hidden flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="Close-up of a premium Chinese baijiu bottle with ornate gold embossing and a deep red silk tassel. The scene is lit with warm, amber atmospheric lighting that evokes the feeling of a refined dining room or a luxury spirit cellar. The style is sophisticated, using deep shadows and rich textures to convey quality and thousand-year heritage." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBel8qTYGvg-1x_s1OGR9I8uNUpKjMymXGyzqNf9xmY5mIdctsVRkSfGKxOZTzoYx_cQBfZgGtAYXxrAF5faM99_wf7rsYXB5Pz_sfZKJbcmDiq0KNchqPlvFjR55scHAznmqEn1w_ogqKX1tali1R-rgDi2cPyOq4cEDomD0XVhj89wpRwc8iUPSgdjOQdVwLUiHRFTmDqnDruV9jUM271X2wlVCQ3KdcYVZumvTRMr-LF0NXxp3AfTshSBphumSo7o7x2iqG2X68">
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<h3 class="font-body-md text-body-md font-medium text-on-surface">杜康·老窖窖藏 窖龄30年</h3>
|
||||
<p class="text-label-md text-subtle-gray mt-1">数量: x1 | 合计: ¥899</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end items-center gap-2 pt-2 border-t border-surface-container">
|
||||
<button class="px-4 py-1.5 rounded-lg text-on-surface-variant font-label-md text-label-md hover:bg-surface-container transition-colors">详情</button>
|
||||
|
||||
<button class="px-4 py-1.5 rounded-lg border border-outline text-on-surface-variant font-label-md text-label-md">查看物流</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Order Card 3 (Completed) -->
|
||||
<div class="bg-surface-container-lowest p-gutter-card rounded-xl card-red-shadow border border-heritage-red/5 opacity-80">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="space-y-0.5">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">单号: DK2023102388</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-body-lg text-body-lg font-semibold text-ink-black">152 **** 0031</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-success-green font-label-md text-label-md flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]" data-icon="check_circle">check_circle</span>
|
||||
已完成
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-3 mb-4 bg-surface-container-low p-2 rounded-lg grayscale">
|
||||
<div class="w-16 h-16 rounded overflow-hidden flex-shrink-0">
|
||||
<img class="w-full h-full object-cover" data-alt="A clean, minimalist presentation of a luxury spirits gift box, featuring a deep red exterior with elegant gold leaf patterns. The box is set on a neutral, paper-textured background in a studio setting. The lighting is soft and ambient, emphasizing the tactile quality and premium nature of the packaging, consistent with the Heritage Modernism style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzJs2Uw5S6ri9ew6FUDvB_-BPnOghhEauk_Gc4FWynlXjYcrF_HqudJ1EGHE1QVAufcYEPzOgDeVKhXX_eNPnJsuLViNeDlEXb9QDrvcqCVfNTbHJR90E80XXP6HEdWJaPKgxd1-atk1yb2mmGWpncmiCJMJ8k_dbKqO4q3GfJA0UshZGbeN8EHX_SOpipIczuVrtAfVkVoBgv_6Vi-VAN6BdYdwreW5TPdDUnyHS7AGtyChcxx3zvqf7tk7oLUhEp7p5P2FQwtmU">
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<h3 class="font-body-md text-body-md font-medium text-on-surface">杜康·周年纪念礼盒v</h3>
|
||||
<p class="text-label-md text-subtle-gray mt-1">数量: x4 | 合计: ¥5,192</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end items-center gap-2 pt-2 border-t border-surface-container">
|
||||
<button class="px-4 py-1.5 rounded-lg text-on-surface-variant font-label-md text-label-md hover:bg-surface-container transition-colors">详情</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
|
||||
<!-- Micro-interaction script -->
|
||||
<script>
|
||||
document.querySelectorAll('button, a').forEach(el => {
|
||||
el.addEventListener('click', function(e) {
|
||||
if(this.classList.contains('active:scale-95')) return;
|
||||
this.classList.add('opacity-50');
|
||||
setTimeout(() => {
|
||||
this.classList.remove('opacity-50');
|
||||
}, 150);
|
||||
});
|
||||
});
|
||||
|
||||
// Simple scroll event for header elevation
|
||||
const header = document.querySelector('header');
|
||||
const scrollContainer = document.querySelector('.order-scroll-container');
|
||||
|
||||
scrollContainer.addEventListener('scroll', () => {
|
||||
if (scrollContainer.scrollTop > 10) {
|
||||
header.classList.add('shadow-md');
|
||||
} else {
|
||||
header.classList.remove('shadow-md');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "订单中心管理页",
|
||||
"screenId": "a8f37483fad045c8aa41410c0560ef5d",
|
||||
"syncedAt": "2026-06-29T02:34:21.337Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,320 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>杜康总管 - 订单售后处理</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.modal-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.ticket-notch {
|
||||
mask-image: radial-gradient(circle at left, transparent 8px, black 8.5px), radial-gradient(circle at right, transparent 8px, black 8.5px);
|
||||
mask-composite: intersect;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"surface-tint": "#b3272c",
|
||||
"heritage-red": "#A61D24",
|
||||
"surface-bright": "#faf9f7",
|
||||
"inverse-surface": "#2f3130",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"error": "#ba1a1a",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"outline-variant": "#e2bebc",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface": "#faf9f7",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-error": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"tertiary": "#37413b",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-primary-fixed": "#410004",
|
||||
"background": "#faf9f7",
|
||||
"aged-amber": "#FFBF00",
|
||||
"secondary": "#735c00",
|
||||
"primary": "#820012",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"surface-dim": "#dadad8",
|
||||
"outline": "#8d706e",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"primary-container": "#a61d24",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container": "#efeeec"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"base": "8px",
|
||||
"margin-page": "20px",
|
||||
"stack-lg": "32px",
|
||||
"stack-md": "16px",
|
||||
"gutter-card": "12px",
|
||||
"stack-sm": "4px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background min-h-screen pb-32">
|
||||
<!-- Top Navigation -->
|
||||
<header class="bg-surface sticky top-0 z-40 w-full px-margin-page py-base flex justify-between items-center shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="active:scale-95 duration-150 p-1 hover:bg-surface-container-high rounded-full">
|
||||
<span class="material-symbols-outlined text-on-surface">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile text-heritage-red font-bold">订单售后处理</h1>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container-high flex items-center justify-center overflow-hidden border border-outline-variant/30">
|
||||
<img class="w-full h-full object-cover" data-alt="Professional avatar of a corporate administrator in a modern office, wearing a clean business suit, soft studio lighting with warm heritage red accents in the background, high-end photography style, distinguished and authoritative mood." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8iBa-FDXTj8t_OQNDKZkBNkOsL4FBe_HYTV5BcpVQmr63lS0uaUKfgtcfpUM3glDiHazvVQT7c3avVd0qfIKmZXF4X5036rzlhQZGZX7Bj0KkHURIl0dAzhQdIYSNgnOfnl9rRchCuauWo_hIXJ_h1b51s1kPML09Rq4uVWqSuftsNxalAC2Uil4--4Cm942hKvfxLdWM0dSSaTiVS19_9213MxHBBb1TzXkfraIfr_S9udG6s6Y-IGdom-G2nJqK8ojfjYVePNI">
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-3xl mx-auto px-margin-page pt-stack-md space-y-stack-md">
|
||||
<!-- Status Banner -->
|
||||
<section class="bg-surface-container-low rounded-xl p-6 border-l-4 border-heritage-red flex items-center justify-between shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-subtle-gray mb-1">当前订单状态</p>
|
||||
<h2 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black flex items-center gap-2">
|
||||
已送达
|
||||
<span class="material-symbols-outlined text-success-green text-[20px]">check_circle</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-body-md text-body-md text-subtle-gray">更新时间</p>
|
||||
<p class="font-body-md text-body-md text-on-surface font-medium">2023-11-24 14:30</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Product Card -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-gutter-card shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex gap-4">
|
||||
<div class="w-24 h-24 rounded-lg bg-surface-container overflow-hidden flex-shrink-0 relative">
|
||||
<img class="w-full h-full object-cover" data-alt="Ultra-premium studio product photography of a 500ml Dukang Chinese baijiu bottle, featuring elegant calligraphy on a cream label, sophisticated red wax seal, crystalline glass texture, lit with soft warm amber amber light to highlight the liquid's clarity, set against a minimalist off-white background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAdRQiq5hNrbNV9bXWv_aOCXH00M0XoLZ3-uhEkOxbVKKpc1Ur4HoQ0MYx2p7hGp7ze8QZlsImpS-pM--32eUB6-cqaF4Z7guIHMXQoXyaZuM1-MzogAVgIj0lh0dUk4awPYg6XpvOBVK7l4FjOjcvovHmTxX30szX-fgZZpiaMBpP1qlOwIXnS6Hn5bmHHGSDGEJn5oySqOgwVWe82XCaI8KeosMJLjj29cFqqDLCnCDgQ_xQonCnmcmokBDxaChYK9kfeH8bhCSA">
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-aged-amber text-on-secondary-fixed text-[10px] font-bold px-1 py-0.5 text-center">¥300 好客权益已附</div>
|
||||
</div>
|
||||
<div class="flex-grow flex flex-col justify-between py-1">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-headline-md text-ink-black leading-tight">杜康·传奇1972 尊享版</h3>
|
||||
<p class="font-body-md text-body-md text-subtle-gray mt-1">规格: 500ml * 1瓶</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline">
|
||||
<span class="font-body-md text-body-md text-ink-black">数量: x1</span>
|
||||
<span class="font-headline-md text-headline-md text-heritage-red">¥1,299.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Order Information Details -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-6 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] space-y-4">
|
||||
<h4 class="font-headline-md text-headline-md text-ink-black border-b border-outline-variant/20 pb-2">基础信息</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-8">
|
||||
<div class="space-y-1">
|
||||
<p class="font-label-md text-label-md text-subtle-gray">订单编号</p>
|
||||
<p class="font-body-md text-body-md text-on-surface flex items-center gap-2">
|
||||
DK2023112488921
|
||||
<span class="material-symbols-outlined text-[16px] text-heritage-red cursor-pointer">content_copy</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="font-label-md text-label-md text-subtle-gray">支付时间</p>
|
||||
<p class="font-body-md text-body-md text-on-surface">2023-11-23 09:15:44</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="font-label-md text-label-md text-subtle-gray">用户手机</p>
|
||||
<p class="font-body-md text-body-md text-on-surface">138 **** 9928</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="font-label-md text-label-md text-subtle-gray">配送地址</p>
|
||||
<p class="font-body-md text-body-md text-on-surface leading-snug">河南省洛阳市伊川县杜康路32号 办公大楼 402室</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Timeline Section (Optional but adds value) -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-6 shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<h4 class="font-headline-md text-headline-md text-ink-black mb-6">流转日志</h4>
|
||||
<div class="space-y-6 relative before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[2px] before:bg-outline-variant/30">
|
||||
<div class="relative pl-8">
|
||||
<div class="absolute left-0 top-1 w-6 h-6 bg-heritage-red rounded-full flex items-center justify-center z-10 shadow-sm">
|
||||
<span class="material-symbols-outlined text-white text-[14px]">local_shipping</span>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-ink-black font-semibold">订单完成投递</p>
|
||||
<p class="font-label-md text-label-md text-subtle-gray">2023-11-24 14:30:22</p>
|
||||
</div>
|
||||
<div class="relative pl-8">
|
||||
<div class="absolute left-0 top-1 w-6 h-6 bg-outline-variant rounded-full flex items-center justify-center z-10">
|
||||
<div class="w-2 h-2 bg-white rounded-full"></div>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-on-surface">支付成功，系统自动分配物流单号</p>
|
||||
<p class="font-label-md text-label-md text-subtle-gray">2023-11-23 09:16:01</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Fixed Bottom Actions -->
|
||||
<footer class="fixed bottom-0 left-0 w-full bg-surface-container-lowest px-margin-page py-4 flex gap-4 shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] z-30">
|
||||
<button class="flex-1 py-3 px-6 bg-aged-amber text-on-secondary-fixed-variant rounded-xl font-headline-md text-headline-md hover:brightness-95 active:scale-95 transition-all flex items-center justify-center gap-2" onclick="openModal('reshipModal')">
|
||||
<span class="material-symbols-outlined text-[20px]">destruction</span>
|
||||
安排补发
|
||||
</button>
|
||||
|
||||
</footer>
|
||||
<!-- Reship Confirm Modal -->
|
||||
<div class="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-margin-page hidden" id="reshipModal">
|
||||
<div class="bg-surface-container-lowest w-full max-w-md rounded-2xl shadow-xl overflow-hidden animate-in fade-in zoom-in duration-300">
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black font-bold">确认安排补发</h3>
|
||||
<button class="material-symbols-outlined text-subtle-gray hover:text-heritage-red transition-colors" onclick="closeModal('reshipModal')">close</button>
|
||||
</div>
|
||||
<div class="space-y-4 mb-6">
|
||||
<div class="bg-surface-container rounded-lg p-3 flex gap-3 items-center">
|
||||
<span class="material-symbols-outlined text-heritage-red">person</span>
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-subtle-gray">收货人</p>
|
||||
<p class="font-body-md text-body-md text-ink-black">张先生 138****9928</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container rounded-lg p-3 flex gap-3 items-center">
|
||||
<span class="material-symbols-outlined text-heritage-red">inventory_2</span>
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-subtle-gray">补发商品</p>
|
||||
<p class="font-body-md text-body-md text-ink-black">杜康·传奇1972 尊享版 x1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-ink-black">补发原因 <span class="text-heritage-red">*</span></label>
|
||||
<textarea class="w-full border-outline-variant/40 rounded-xl p-3 font-body-md text-body-md focus:ring-heritage-red focus:border-heritage-red min-h-[100px]" placeholder="请输入详细的补发原因，如：物流破损、少发货等..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 py-3 border border-outline-variant text-subtle-gray rounded-xl font-label-md hover:bg-surface-container transition-all" onclick="closeModal('reshipModal')">取消</button>
|
||||
<button class="flex-1 py-3 bg-heritage-red text-white rounded-xl font-headline-md font-bold hover:brightness-110 shadow-md">确认补发</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Refund Modal -->
|
||||
<div class="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-margin-page hidden" id="refundModal">
|
||||
<div class="bg-surface-container-lowest w-full max-w-md rounded-2xl shadow-xl overflow-hidden animate-in fade-in zoom-in duration-300">
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black font-bold">手动退款</h3>
|
||||
<button class="material-symbols-outlined text-subtle-gray hover:text-heritage-red transition-colors" onclick="closeModal('refundModal')">close</button>
|
||||
</div>
|
||||
<div class="space-y-5 mb-6">
|
||||
<div class="flex justify-between items-center px-2">
|
||||
<span class="font-body-lg text-body-lg text-subtle-gray">实付金额</span>
|
||||
<span class="font-headline-lg text-headline-lg text-ink-black">¥1,299.00</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-ink-black">退款金额 <span class="text-heritage-red">*</span></label>
|
||||
<div class="relative">
|
||||
<span class="absolute left-4 top-1/2 -translate-y-1/2 font-headline-md text-subtle-gray">¥</span>
|
||||
<input class="w-full border-outline-variant/40 rounded-xl py-3 pl-8 pr-4 font-headline-md text-heritage-red focus:ring-heritage-red focus:border-heritage-red" max="1299" type="number" value="1299.00">
|
||||
</div>
|
||||
<p class="text-[10px] text-heritage-red px-1">最大退款金额不可超过实付金额 ¥1,299.00</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-ink-black">退款原因 <span class="text-heritage-red">*</span></label>
|
||||
<textarea class="w-full border-outline-variant/40 rounded-xl p-3 font-body-md text-body-md focus:ring-heritage-red focus:border-heritage-red min-h-[100px]" placeholder="请填写手动退款的具体原因说明..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 py-3 border border-outline-variant text-subtle-gray rounded-xl font-label-md hover:bg-surface-container transition-all" onclick="closeModal('refundModal')">关闭</button>
|
||||
<button class="flex-1 py-3 bg-error text-white rounded-xl font-headline-md font-bold hover:bg-error/90 shadow-md">确认退款</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
modal.classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
modal.classList.add('hidden');
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
|
||||
// Close on background click
|
||||
window.onclick = function(event) {
|
||||
if (event.target.classList.contains('modal-overlay')) {
|
||||
event.target.classList.add('hidden');
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "订单售后详情 - 补发与退款操作",
|
||||
"screenId": "1aa9156b780948b7804ef4c497f74202",
|
||||
"syncedAt": "2026-06-29T02:34:26.800Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1,306 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
||||
<title>财务对账中心 | 杜康伙伴</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"aged-amber": "#FFBF00",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-container": "#efeeec",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"primary-container": "#a61d24",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"subtle-gray": "#999999",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-primary-fixed": "#410004",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#1a1c1b",
|
||||
"secondary": "#735c00",
|
||||
"on-error-container": "#93000a",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-error": "#ffffff",
|
||||
"outline": "#8d706e",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"background": "#faf9f7",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-surface": "#1a1c1b",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-tint": "#b3272c",
|
||||
"ink-black": "#1A1A1A",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"outline-variant": "#e2bebc",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-dim": "#dadad8",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-bright": "#faf9f7",
|
||||
"secondary-container": "#fed65b",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary": "#820012",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"tertiary": "#37413b"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "4px",
|
||||
"base": "8px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-md": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.text-shadow-subtle {
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen pb-24 font-body-md text-body-md selection:bg-heritage-red/20">
|
||||
<!-- TopAppBar -->
|
||||
<header class="w-full top-0 sticky z-40 bg-surface dark:bg-on-background shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
||||
<div class="flex justify-between items-center px-margin-page h-16 w-full max-w-7xl mx-auto">
|
||||
<button class="text-heritage-red hover:opacity-80 transition-opacity active:scale-95 duration-150">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="text-headline-md font-headline-md font-bold tracking-tight text-heritage-red">财务对账中心</h1>
|
||||
<button class="text-heritage-red hover:opacity-80 transition-opacity active:scale-95 duration-150 relative">
|
||||
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="px-margin-page pt-stack-md">
|
||||
<!-- Summary Card -->
|
||||
<section class="mb-stack-lg">
|
||||
<div class="relative overflow-hidden bg-heritage-red rounded-xl p-6 shadow-[0px_8px_32px_rgba(166,29,36,0.15)] text-on-primary">
|
||||
<!-- Abstract Texture Overlay -->
|
||||
<div class="absolute top-0 right-0 opacity-10 transform translate-x-1/4 -translate-y-1/4">
|
||||
<span class="material-symbols-outlined text-[160px]" style="font-variation-settings: 'wght' 700;">account_balance_wallet</span>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<p class="text-label-md font-label-md opacity-80 mb-2 uppercase tracking-widest text-center">待结算总额</p>
|
||||
<div class="flex items-baseline justify-center mb-6">
|
||||
<span class="text-headline-md font-headline-md mr-1">¥</span>
|
||||
<span class="text-headline-xl font-headline-xl tracking-tighter">128,450.00</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 pt-6 border-t border-white/10">
|
||||
<div class="text-center">
|
||||
<p class="text-label-md font-label-md opacity-70 mb-1">累计已结算</p>
|
||||
<p class="font-headline-md text-headline-md">¥842,000</p>
|
||||
</div>
|
||||
<div class="text-center border-l border-white/10">
|
||||
<p class="text-label-md font-label-md opacity-70 mb-1">本月预估收益</p>
|
||||
<p class="font-headline-md text-headline-md text-secondary-fixed">¥45,320</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Filter Bar -->
|
||||
<section class="mb-stack-md flex items-center justify-between gap-3">
|
||||
<!-- Date Picker (Month) -->
|
||||
<button class="flex-1 bg-surface-container-low rounded-lg h-12 px-4 flex items-center justify-between hover:bg-surface-container-high transition-colors active:scale-95 duration-150">
|
||||
<span class="text-on-surface-variant font-medium">2026年6月</span>
|
||||
<span class="material-symbols-outlined text-subtle-gray">calendar_month</span>
|
||||
</button>
|
||||
<!-- Status Filter -->
|
||||
<button class="bg-surface-container-low rounded-lg h-12 px-4 flex items-center gap-2 hover:bg-surface-container-high transition-colors active:scale-95 duration-150" id="statusFilterBtn">
|
||||
<span class="material-symbols-outlined text-heritage-red">filter_list</span>
|
||||
<span class="text-on-surface-variant font-medium">状态</span>
|
||||
</button>
|
||||
</section>
|
||||
<!-- Status Chips (Horizontal Scroll) -->
|
||||
<div class="flex gap-2 mb-stack-md overflow-x-auto no-scrollbar pb-1">
|
||||
<button class="px-4 py-1.5 rounded-full bg-heritage-red text-white text-label-md font-label-md shrink-0">全部</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant text-label-md font-label-md shrink-0 border border-transparent active:border-heritage-red/20 transition-all">待结算</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant text-label-md font-label-md shrink-0 border border-transparent active:border-heritage-red/20 transition-all">已结算</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant text-label-md font-label-md shrink-0 border border-transparent active:border-heritage-red/20 transition-all">审核中</button>
|
||||
</div>
|
||||
<!-- Reconciliation List -->
|
||||
<section class="space-y-4">
|
||||
<h3 class="text-label-md font-label-md text-subtle-gray uppercase tracking-wider px-1">对账明细记录</h3>
|
||||
<!-- List Items -->
|
||||
<div class="space-y-3">
|
||||
<!-- Item 1: Pending -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent hover:border-heritage-red/10 active:scale-[0.98] transition-all duration-150 cursor-pointer flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-on-surface font-semibold">SID20260601-A</span>
|
||||
<span class="px-2 py-0.5 rounded-md bg-secondary-fixed/30 text-on-secondary-fixed text-[10px] font-bold uppercase tracking-tight">待结算</span>
|
||||
</div>
|
||||
<p class="text-subtle-gray text-label-md flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[14px]">event</span> 2026-06
|
||||
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
||||
42 笔订单
|
||||
</p>
|
||||
<div class="mt-2 text-headline-md font-headline-md text-heritage-red">
|
||||
¥12,450.00
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">chevron_right</span>
|
||||
</div>
|
||||
<!-- Item 2: Completed -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent hover:border-heritage-red/10 active:scale-[0.98] transition-all duration-150 cursor-pointer flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-on-surface font-semibold">SID20260501-A</span>
|
||||
<span class="px-2 py-0.5 rounded-md bg-success-green/10 text-success-green text-[10px] font-bold uppercase tracking-tight">已结算</span>
|
||||
</div>
|
||||
<p class="text-subtle-gray text-label-md flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[14px]">event</span> 2026-05
|
||||
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
||||
156 笔订单
|
||||
</p>
|
||||
<div class="mt-2 text-headline-md font-headline-md text-ink-black">
|
||||
¥58,220.50
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">chevron_right</span>
|
||||
</div>
|
||||
<!-- Item 3: Completed -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent hover:border-heritage-red/10 active:scale-[0.98] transition-all duration-150 cursor-pointer flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-on-surface font-semibold">SID20260401-B</span>
|
||||
<span class="px-2 py-0.5 rounded-md bg-success-green/10 text-success-green text-[10px] font-bold uppercase tracking-tight">已结算</span>
|
||||
</div>
|
||||
<p class="text-subtle-gray text-label-md flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[14px]">event</span> 2026-04
|
||||
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
||||
89 笔订单
|
||||
</p>
|
||||
<div class="mt-2 text-headline-md font-headline-md text-ink-black">
|
||||
¥34,110.00
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">chevron_right</span>
|
||||
</div>
|
||||
<!-- Item 4: Pending -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-transparent hover:border-heritage-red/10 active:scale-[0.98] transition-all duration-150 cursor-pointer flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-on-surface font-semibold">SID20260602-C</span>
|
||||
<span class="px-2 py-0.5 rounded-md bg-secondary-fixed/30 text-on-secondary-fixed text-[10px] font-bold uppercase tracking-tight">待结算</span>
|
||||
</div>
|
||||
<p class="text-subtle-gray text-label-md flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[14px]">event</span> 2026-06
|
||||
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
|
||||
12 笔订单
|
||||
</p>
|
||||
<div class="mt-2 text-headline-md font-headline-md text-heritage-red">
|
||||
¥4,800.00
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-subtle-gray">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-8 text-center">
|
||||
<p class="text-label-md text-subtle-gray">已展示全部记录</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
|
||||
<script>
|
||||
// Simple Interaction logic
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const filterBtns = document.querySelectorAll('.flex.gap-2.mb-stack-md button');
|
||||
|
||||
filterBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
filterBtns.forEach(b => {
|
||||
b.classList.remove('bg-heritage-red', 'text-white');
|
||||
b.classList.add('bg-surface-container-high', 'text-on-surface-variant');
|
||||
});
|
||||
btn.classList.remove('bg-surface-container-high', 'text-on-surface-variant');
|
||||
btn.classList.add('bg-heritage-red', 'text-white');
|
||||
});
|
||||
});
|
||||
|
||||
// Card click simulation
|
||||
const cards = document.querySelectorAll('.bg-white.rounded-xl');
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
card.classList.add('bg-surface-container-low');
|
||||
setTimeout(() => card.classList.remove('bg-surface-container-low'), 200);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "财务对账页 - 中文版",
|
||||
"screenId": "0e41c1b46ca147ecbe2a7382c19e4501",
|
||||
"syncedAt": "2026-06-29T02:33:31.542Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1,334 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>财务结算中心 - 杜康合作伙伴</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"surface-dim": "#dadad8",
|
||||
"tertiary": "#37413b",
|
||||
"surface": "#faf9f7",
|
||||
"primary": "#820012",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"error": "#ba1a1a",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"background": "#faf9f7",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"on-primary-fixed": "#410004",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-error": "#ffffff",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-primary": "#ffffff",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"inverse-surface": "#2f3130",
|
||||
"outline": "#8d706e",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"on-background": "#1a1c1b",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-secondary": "#ffffff",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"primary-container": "#a61d24",
|
||||
"surface-container": "#efeeec",
|
||||
"surface-bright": "#faf9f7",
|
||||
"surface-tint": "#b3272c",
|
||||
"subtle-gray": "#999999",
|
||||
"ink-black": "#1A1A1A",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"on-surface": "#1a1c1b",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"on-error-container": "#93000a",
|
||||
"success-green": "#2D6A4F",
|
||||
"on-secondary-container": "#745c00",
|
||||
"secondary": "#735c00",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-container-highest": "#e3e2e0"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px",
|
||||
"stack-md": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"coupon-amount": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500" }],
|
||||
"body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
|
||||
"headline-md": ["18px", { "lineHeight": "26px", "fontWeight": "600" }],
|
||||
"headline-xl": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
|
||||
"headline-lg-mobile": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
|
||||
"headline-lg": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
|
||||
"body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
|
||||
"coupon-amount": ["28px", { "lineHeight": "28px", "fontWeight": "700" }]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
body {
|
||||
min-height: 100dvh;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-md text-body-md">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full flex items-center px-margin-page h-14 bg-surface/90 backdrop-blur-md z-50 border-b border-surface-container-high">
|
||||
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">财务结算中心</h1>
|
||||
</div>
|
||||
<div class="flex items-center ml-auto">
|
||||
<button class="p-2 active:bg-surface-container rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-14 pb-20 px-margin-page">
|
||||
<!-- Unified Dashboard Area -->
|
||||
<div class="mt-6 p-6 bg-surface-container-lowest rounded-xl shadow-[0px_4px_24px_rgba(166,29,36,0.06)] border border-heritage-red/5">
|
||||
<div class="text-center">
|
||||
<p class="text-subtle-gray font-label-md text-label-md uppercase tracking-wider">待结算总额</p>
|
||||
<div class="mt-2 flex items-baseline gap-1 justify-center">
|
||||
<span class="text-heritage-red font-headline-lg text-headline-lg">¥</span>
|
||||
<span class="text-heritage-red font-headline-xl text-headline-xl">428,500.00</span>
|
||||
</div>
|
||||
<!-- Progress Indicator -->
|
||||
<div class="mt-4 relative h-1.5 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="absolute top-0 left-0 h-full bg-heritage-red rounded-full" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 pt-6 border-t border-surface-container-high grid grid-cols-2 gap-4">
|
||||
<div class="text-center">
|
||||
<p class="text-subtle-gray font-label-md text-label-md">已结算总额</p>
|
||||
<p class="mt-1 text-on-surface font-headline-md text-headline-md font-bold">¥1,240,000</p>
|
||||
</div>
|
||||
<div class="text-center border-l border-surface-container-high">
|
||||
<p class="text-subtle-gray font-label-md text-label-md">本月GMV</p>
|
||||
<p class="mt-1 text-on-surface font-headline-md text-headline-md font-bold">¥3.85M</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Segmented Control Tabs -->
|
||||
<div class="mt-6 flex bg-surface-container-low rounded-lg p-1">
|
||||
<button class="flex-1 py-2 text-center rounded transition-all duration-200 bg-surface-container-lowest text-heritage-red shadow-sm font-semibold" id="tab-1" onclick="switchTab(1)">城市合伙人</button>
|
||||
<button class="flex-1 py-2 text-center rounded transition-all duration-200 hover:text-on-surface text-on-surface-variant font-medium" id="tab-2" onclick="switchTab(2)">
|
||||
门店结算
|
||||
</button>
|
||||
</div>
|
||||
<!-- Sticky Search/Filter Bar -->
|
||||
<div class="sticky top-14 z-40 bg-surface/95 backdrop-blur-sm py-4 -mx-margin-page px-margin-page flex gap-2">
|
||||
<div class="flex-1 relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-subtle-gray text-[20px]">search</span>
|
||||
<input class="w-full pl-10 pr-4 py-2.5 bg-surface-container-lowest border-none rounded-xl text-body-md focus:ring-1 focus:ring-heritage-red/20 shadow-sm" placeholder="搜索合作伙伴或单号" type="text">
|
||||
</div>
|
||||
<button class="px-4 bg-surface-container-lowest rounded-xl flex items-center gap-1 border border-surface-container-high active:bg-surface-container-low">
|
||||
<span class="material-symbols-outlined text-[20px] text-on-surface-variant">filter_alt</span>
|
||||
<span class="text-label-md font-medium">筛选</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Settlement List -->
|
||||
<div class="mt-2 space-y-0.5">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="font-headline-md text-headline-md text-ink-black">待处理记录 (3)</h2>
|
||||
</div>
|
||||
<!-- Settlement Item 1 -->
|
||||
<div class="py-5 bg-surface transition-colors active:bg-surface-container-low border-b border-surface-container-high">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<h3 class="font-bold text-ink-black text-body-lg font-body-lg flex items-center gap-2">
|
||||
郑州<span class="text-subtle-gray font-normal text-label-md">ID: P10293</span>
|
||||
</h3>
|
||||
<p class="text-on-surface-variant font-medium text-body-md mt-0.5">河南杜康文化产业有限公司</p>
|
||||
<button class="mt-2 flex items-center gap-1 text-heritage-red font-medium text-label-md">
|
||||
<span class="material-symbols-outlined text-[18px]">description</span>
|
||||
<span class="">查看详情</span>
|
||||
</button>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 rounded-full bg-status-blue/10 text-status-blue font-label-md text-label-md flex items-center gap-1">
|
||||
<span class="w-1 h-1 rounded-full bg-status-blue"></span> 待确认
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-1 flex justify-between items-end">
|
||||
<div>
|
||||
<p class="text-subtle-gray text-label-md font-label-md">结算金额</p>
|
||||
<p class="text-heritage-red font-headline-lg text-headline-lg font-bold">¥12,500.00</p>
|
||||
<p class="text-subtle-gray text-label-md font-label-md mt-1">周期: 2023.10.01 - 10.31</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="border border-heritage-red text-heritage-red px-4 py-2.5 rounded-lg font-bold text-label-md font-label-md active:scale-95 transition-transform">
|
||||
发送账单
|
||||
</button>
|
||||
<button class="bg-heritage-red text-white px-4 py-2.5 rounded-lg font-bold text-label-md font-label-md active:scale-95 transition-transform shadow-md shadow-heritage-red/10">
|
||||
确认打款
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Settlement Item 2 -->
|
||||
<div class="py-5 bg-surface transition-colors active:bg-surface-container-low border-b border-surface-container-high">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<h3 class="font-bold text-ink-black text-body-lg font-body-lg flex items-center gap-2">
|
||||
洛阳<span class="text-subtle-gray font-normal text-label-md">ID: S002</span>
|
||||
</h3>
|
||||
<p class="text-on-surface-variant font-medium text-body-md mt-0.5">河南杜康文化产业有限公司</p>
|
||||
<button class="mt-2 flex items-center gap-1 text-heritage-red font-medium text-label-md">
|
||||
<span class="material-symbols-outlined text-[18px]">description</span>
|
||||
<span class="">查看详情</span>
|
||||
</button>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 rounded-full bg-aged-amber/10 text-aged-amber font-label-md text-label-md flex items-center gap-1">
|
||||
<span class="w-1 h-1 rounded-full bg-aged-amber"></span> 待结算
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-1 flex justify-between items-end">
|
||||
<div>
|
||||
<p class="text-subtle-gray text-label-md font-label-md">结算金额</p>
|
||||
<p class="text-heritage-red font-headline-lg text-headline-lg font-bold">¥8,240.50</p>
|
||||
<p class="text-subtle-gray text-label-md font-label-md mt-1">周期: 2023.10.15 - 10.31</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="border border-heritage-red text-heritage-red px-4 py-2.5 rounded-lg font-bold text-label-md font-label-md active:scale-95 transition-transform">
|
||||
发送账单
|
||||
</button>
|
||||
<button class="bg-heritage-red text-white px-4 py-2.5 rounded-lg font-bold text-label-md font-label-md active:scale-95 transition-transform shadow-md shadow-heritage-red/10">
|
||||
确认打款
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Settlement Item 3 -->
|
||||
<div class="py-5 bg-surface transition-colors active:bg-surface-container-low border-b border-surface-container-high">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<h3 class="font-bold text-ink-black text-body-lg font-body-lg flex items-center gap-2">
|
||||
开封<span class="text-subtle-gray font-normal text-label-md">ID: P8821</span>
|
||||
</h3>
|
||||
<p class="text-on-surface-variant font-medium text-body-md mt-0.5">河南杜康文化产业有限公司</p>
|
||||
<button class="mt-2 flex items-center gap-1 text-heritage-red font-medium text-label-md">
|
||||
<span class="material-symbols-outlined text-[18px]">description</span>
|
||||
<span class="">查看详情</span>
|
||||
</button>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 rounded-full bg-aged-amber/10 text-aged-amber font-label-md text-label-md flex items-center gap-1">
|
||||
<span class="w-1 h-1 rounded-full bg-aged-amber"></span> 待结算
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-1 flex justify-between items-end">
|
||||
<div>
|
||||
<p class="text-subtle-gray text-label-md font-label-md">结算金额</p>
|
||||
<p class="text-heritage-red font-headline-lg text-headline-lg font-bold">¥5,100.00</p>
|
||||
<p class="text-subtle-gray text-label-md font-label-md mt-1">周期: 2023.10.01 - 10.15</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="border border-heritage-red text-heritage-red px-4 py-2.5 rounded-lg font-bold text-label-md font-label-md active:scale-95 transition-transform">
|
||||
发送账单
|
||||
</button>
|
||||
<button class="bg-heritage-red text-white px-4 py-2.5 rounded-lg font-bold text-label-md font-label-md active:scale-95 transition-transform shadow-md shadow-heritage-red/10">
|
||||
确认打款
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Note -->
|
||||
<div class="mt-12 mb-8 text-center px-4">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-surface-container-high text-subtle-gray mb-4">
|
||||
<span class="material-symbols-outlined">security</span>
|
||||
</div>
|
||||
<p class="text-subtle-gray font-label-md text-label-md leading-relaxed">
|
||||
所有财务结算由杜康总部统一监管<br>保障每一分收益合规透明
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full h-16 flex justify-around items-center px-4 bg-surface-container-lowest/90 backdrop-blur-md z-50 rounded-t-2xl border-t border-surface-container shadow-[0px_-4px_20px_rgba(0,0,0,0.02)]">
|
||||
<div class="flex flex-col items-center justify-center text-subtle-gray transition-transform active:scale-90">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="font-label-md text-label-md mt-0.5">管理中心</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-subtle-gray transition-transform active:scale-90">
|
||||
<span class="material-symbols-outlined">rule</span>
|
||||
<span class="font-label-md text-label-md mt-0.5">门店审核</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-heritage-red font-bold transition-transform active:scale-90">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
|
||||
<span class="font-label-md text-label-md mt-0.5">结算中心</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-subtle-gray transition-transform active:scale-90">
|
||||
<span class="material-symbols-outlined">support_agent</span>
|
||||
<span class="font-label-md text-label-md mt-0.5">客服中心</span>
|
||||
</div>
|
||||
</nav>
|
||||
<script>
|
||||
function switchTab(tabId) {
|
||||
const tab1 = document.getElementById('tab-1');
|
||||
const tab2 = document.getElementById('tab-2');
|
||||
|
||||
const activeClasses = ['bg-surface-container-lowest', 'text-heritage-red', 'shadow-sm', 'font-semibold'];
|
||||
const inactiveClasses = ['text-on-surface-variant', 'font-medium'];
|
||||
|
||||
if (tabId === 1) {
|
||||
tab1.classList.add(...activeClasses);
|
||||
tab1.classList.remove(...inactiveClasses);
|
||||
tab2.classList.remove(...activeClasses);
|
||||
tab2.classList.add(...inactiveClasses);
|
||||
} else {
|
||||
tab2.classList.add(...activeClasses);
|
||||
tab2.classList.remove(...inactiveClasses);
|
||||
tab1.classList.remove(...activeClasses);
|
||||
tab1.classList.add(...inactiveClasses);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "财务结算中心 - 流程闭环版",
|
||||
"screenId": "b75598101d2c4f0296f1850286c8066d",
|
||||
"syncedAt": "2026-06-29T02:35:05.145Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,376 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>账单明细 - 杜康酒馆管理系统</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Inter:wght@400;500;600&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"success-green": "#2D6A4F",
|
||||
"secondary-container": "#fed65b",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"tertiary-container": "#4e5852",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"subtle-gray": "#999999",
|
||||
"heritage-red": "#A61D24",
|
||||
"outline-variant": "#e2bebc",
|
||||
"surface-dim": "#dadad8",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"inverse-surface": "#2f3130",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"status-blue": "#2A6EBB",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"ink-black": "#1A1A1A",
|
||||
"surface": "#faf9f7",
|
||||
"surface-container": "#efeeec",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-primary": "#ffffff",
|
||||
"primary": "#820012",
|
||||
"on-primary-fixed": "#410004",
|
||||
"primary-container": "#a61d24",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"secondary": "#735c00",
|
||||
"outline": "#8d706e",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"aged-amber": "#FFBF00",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-secondary-container": "#745c00",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"tertiary": "#37413b",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-background": "#1a1c1b",
|
||||
"error-container": "#ffdad6",
|
||||
"background": "#faf9f7",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-error": "#ffffff",
|
||||
"surface-tint": "#b3272c",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"error": "#ba1a1a"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"margin-page": "20px",
|
||||
"base": "8px",
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"coupon-amount": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"]
|
||||
},
|
||||
"fontSize": {
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.rice-paper-bg {
|
||||
background-color: #faf9f7;
|
||||
background-image: radial-gradient(#e9e8e6 0.5px, transparent 0.5px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
.scroll-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shadow-soft {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
|
||||
.ticket-notch {
|
||||
mask-image: radial-gradient(circle at 0 50%, transparent 8px, black 8.5px),
|
||||
radial-gradient(circle at 100% 50%, transparent 8px, black 8.5px);
|
||||
mask-composite: intersect;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="rice-paper-bg font-body-md text-on-surface min-h-screen pb-24">
|
||||
<!-- Top App Bar -->
|
||||
<header class="w-full top-0 sticky bg-surface-container-low z-40 shadow-sm flex items-center justify-between px-margin-page h-16">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 -ml-2 hover:bg-surface-container-highest transition-colors rounded-full active:opacity-80">
|
||||
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile md:font-headline-lg md:text-headline-lg text-primary font-bold">账单明细</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 hover:bg-surface-container-highest transition-colors rounded-full active:opacity-80">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">share</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-surface-container-highest transition-colors rounded-full active:opacity-80">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">picture_as_pdf</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-4xl mx-auto px-margin-page py-6 space-y-6">
|
||||
<!-- Header Hero Card -->
|
||||
<section class="bg-white rounded-xl shadow-soft p-6 relative overflow-hidden border border-outline-variant/10">
|
||||
<div class="absolute top-0 right-0 p-4">
|
||||
<span class="px-3 py-1 bg-aged-amber/15 text-aged-amber font-label-md text-label-md rounded-full border border-aged-amber/20">
|
||||
待确认
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-on-surface-variant font-label-md text-label-md">结算账期</p>
|
||||
<h2 class="font-headline-md text-headline-md">2023.10.01 - 2023.10.31</h2>
|
||||
</div>
|
||||
<div class="mt-8 flex flex-col items-center justify-center py-4 border-y border-outline-variant/10">
|
||||
<p class="text-on-surface-variant font-label-md text-label-md mb-1">应结总额 (CNY)</p>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="font-headline-lg text-primary">¥</span>
|
||||
<span class="font-headline-xl text-headline-xl text-primary tracking-tight">10,037.50</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- Bento Summary Section -->
|
||||
<section class="space-y-4">
|
||||
<!-- Product Commission Card -->
|
||||
<div class="bg-white p-5 rounded-xl shadow-soft border border-outline-variant/10">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-primary-fixed flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary">liquor</span>
|
||||
</div>
|
||||
<h4 class="font-headline-md text-headline-md">商品销售结算</h4>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-primary-fixed text-primary font-label-md text-label-md rounded-full">佣金 5%</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2 pt-4 border-t border-outline-variant/10">
|
||||
<div class="text-center">
|
||||
<p class="text-subtle-gray text-label-md">销售总额</p>
|
||||
<p class="font-bold">¥12,500.00</p>
|
||||
</div>
|
||||
<div class="text-center border-x border-outline-variant/10"></div>
|
||||
<div class="text-center">
|
||||
<p class="text-subtle-gray text-label-md">应结净额</p>
|
||||
<p class="font-bold text-success-green">¥11,875.00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Redemption Commission Card -->
|
||||
<div class="bg-white p-5 rounded-xl shadow-soft border border-outline-variant/10">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-secondary-fixed flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-secondary-fixed">restaurant</span>
|
||||
</div>
|
||||
<h4 class="font-headline-md text-headline-md">核销权益结算</h4>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-secondary-fixed text-on-secondary-fixed font-label-md text-label-md rounded-full">佣金 2%</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2 pt-4 border-t border-outline-variant/10">
|
||||
<div class="text-center">
|
||||
<p class="text-subtle-gray text-label-md">核销总额</p>
|
||||
<p class="font-bold">¥1,875.00</p>
|
||||
</div>
|
||||
<div class="text-center border-x border-outline-variant/10"></div>
|
||||
<div class="text-center">
|
||||
<p class="text-subtle-gray text-label-md">应结净额</p>
|
||||
<p class="font-bold text-success-green">¥1,837.50</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- List Section Header -->
|
||||
<div class="flex items-center justify-between mt-8">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface border-l-4 border-heritage-red pl-3">订单明细</h3>
|
||||
<button class="flex items-center gap-1 text-primary font-label-md text-label-md">
|
||||
<span class="material-symbols-outlined text-[18px]">filter_list</span>
|
||||
筛选
|
||||
</button>
|
||||
</div>
|
||||
<!-- Individual Items List -->
|
||||
<section class="space-y-3">
|
||||
<!-- Item 1 -->
|
||||
<div class="bg-white p-4 rounded-xl shadow-soft border border-outline-variant/10 hover:border-heritage-red/20 transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">订单编号: DK88293102</span>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mt-1">2023-10-28 14:22:10</span>
|
||||
</div>
|
||||
<span class="text-primary font-headline-md text-headline-md">¥1,200.00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/10"><div class="flex flex-col gap-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-success-green"></div>
|
||||
<span class="text-on-surface-variant font-body-md text-body-md">交易成功</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 pl-4">
|
||||
<span class="text-subtle-gray font-label-md text-label-md">订单佣金: ¥60.00</span>
|
||||
<span class="text-subtle-gray font-label-md text-label-md">核销权益佣金: ¥0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-on-surface-variant font-label-md text-label-md group-hover:text-primary">
|
||||
详情 <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<!-- Item 2 -->
|
||||
<div class="bg-white p-4 rounded-xl shadow-soft border border-outline-variant/10 hover:border-heritage-red/20 transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">订单编号: DK88293098</span>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mt-1">2023-10-25 19:45:30</span>
|
||||
</div>
|
||||
<span class="text-primary font-headline-md text-headline-md">¥3,500.00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/10"><div class="flex flex-col gap-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-success-green"></div>
|
||||
<span class="text-on-surface-variant font-body-md text-body-md">交易成功</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 pl-4">
|
||||
<span class="text-subtle-gray font-label-md text-label-md">订单佣金: ¥175.00</span>
|
||||
<span class="text-subtle-gray font-label-md text-label-md">核销权益佣金: ¥0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-on-surface-variant font-label-md text-label-md group-hover:text-primary">
|
||||
详情 <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<!-- Item 3 -->
|
||||
<div class="bg-white p-4 rounded-xl shadow-soft border border-outline-variant/10 hover:border-heritage-red/20 transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">订单编号: DK88293054</span>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mt-1">2023-10-22 11:05:15</span>
|
||||
</div>
|
||||
<span class="text-primary font-headline-md text-headline-md">¥800.00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/10"><div class="flex flex-col gap-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-success-green"></div>
|
||||
<span class="text-on-surface-variant font-body-md text-body-md">交易成功</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 pl-4">
|
||||
<span class="text-subtle-gray font-label-md text-label-md">订单佣金: ¥0.00</span>
|
||||
<span class="text-subtle-gray font-label-md text-label-md">核销权益佣金: ¥16.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-on-surface-variant font-label-md text-label-md group-hover:text-primary">
|
||||
详情 <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<!-- Item 4 -->
|
||||
<div class="bg-white p-4 rounded-xl shadow-soft border border-outline-variant/10 hover:border-heritage-red/20 transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-md text-label-md text-subtle-gray">订单编号: DK88292991</span>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant mt-1">2023-10-20 09:12:44</span>
|
||||
</div>
|
||||
<span class="text-primary font-headline-md text-headline-md">¥1,500.00</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/10"><div class="flex flex-col gap-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-success-green"></div>
|
||||
<span class="text-on-surface-variant font-body-md text-body-md">交易成功</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 pl-4">
|
||||
<span class="text-subtle-gray font-label-md text-label-md">订单佣金: ¥75.00</span>
|
||||
<span class="text-subtle-gray font-label-md text-label-md">核销权益佣金: ¥0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-on-surface-variant font-label-md text-label-md group-hover:text-primary">
|
||||
详情 <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="text-center py-6">
|
||||
<button class="text-subtle-gray font-label-md text-label-md hover:text-primary transition-colors">
|
||||
查看更多订单记录
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Action Bar -->
|
||||
<div class="fixed bottom-0 left-0 w-full bg-white/80 backdrop-blur-md z-50 border-t border-outline-variant/10 h-20 flex items-center px-margin-page pb-safe">
|
||||
<div class="max-w-4xl mx-auto w-full flex gap-3">
|
||||
<button class="flex-1 h-12 flex items-center justify-center gap-2 rounded-xl border border-heritage-red text-heritage-red font-headline-md text-headline-md hover:bg-heritage-red/5 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-[20px]">picture_as_pdf</span>
|
||||
导出PDF
|
||||
</button>
|
||||
<button class="flex-[1.5] h-12 flex items-center justify-center gap-2 rounded-xl bg-heritage-red text-white font-headline-md text-headline-md shadow-lg shadow-heritage-red/20 hover:opacity-90 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-[20px]">chat_bubble</span>
|
||||
微信催办
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Background Decoration -->
|
||||
<div class="fixed top-0 right-0 -z-10 w-64 h-64 opacity-10 pointer-events-none">
|
||||
<div class="w-full h-full rotate-45 border-[40px] border-heritage-red rounded-full translate-x-1/2 -translate-y-1/2"></div>
|
||||
</div>
|
||||
<script>
|
||||
// Micro-interaction for buttons
|
||||
document.querySelectorAll('button').forEach(btn => {
|
||||
btn.addEventListener('touchstart', () => {
|
||||
btn.style.transform = 'scale(0.96)';
|
||||
});
|
||||
btn.addEventListener('touchend', () => {
|
||||
btn.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
|
||||
// Simple scroll appearance for Top Bar
|
||||
window.addEventListener('scroll', () => {
|
||||
const header = document.querySelector('header');
|
||||
if (window.scrollY > 20) {
|
||||
header.classList.add('shadow-md');
|
||||
header.classList.remove('shadow-sm');
|
||||
} else {
|
||||
header.classList.add('shadow-sm');
|
||||
header.classList.remove('shadow-md');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "账单明细详情页",
|
||||
"screenId": "5b60e6fd6c814d7d91b25607da834789",
|
||||
"syncedAt": "2026-06-29T02:33:43.657Z"
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user