update skill ba
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
SCR-04.desktop.svg — khung Giỏ hàng (US-002/US-003), trạng thái default, khung nhìn desktop (1440×900).
|
||||
Nguồn: HIFI_US002-003_v1.0.html#SCR-04 · SRS_US002-003_v1.0.md §2.A.3.1/§4.2 · WF_US002-003_v1.0.md §3.1.1/§3.1.2 · 00-index/ds/tokens.json
|
||||
Màu là mã nguyên văn từ tokens.json (Figma không đọc biến CSS) kèm data-token để tra ngược.
|
||||
Layer <g id="Zn"> theo WF §3.1.1; <g id="Cnn"> theo SRS §2.A.3.1. Text nguyên văn SRS §4.2 (số liệu minh hoạ không phải một phần khoá i18n).
|
||||
Độ tin cậy visual: 🔴 (DS_e-commerce §0 — token placeholder trung tính, chưa có brand/design system, OQ-022).
|
||||
v1.1 (2026-09-09): bổ sung F01/C07 còn thiếu cho dòng "Balo du lịch" (Shop B) — theo ghi chú người duyệt, SVG phải phản chiếu đủ C-id của HIFI cho mỗi dòng hiển thị.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="900" viewBox="0 0 1440 900" font-family="Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" font-size="14" data-scr="SCR-04" data-view="desktop" data-state="default" data-source="HIFI_US002-003_v1.0.html#SCR-04">
|
||||
<title>SCR-04 · Giỏ hàng · desktop · default</title>
|
||||
|
||||
<rect id="canvas" width="1440" height="900" fill="#F6F7F9" data-token="color.bg.canvas"/>
|
||||
|
||||
<g id="Z1" data-name="Header màn hình" transform="translate(120 48)">
|
||||
<text x="0" y="28" font-size="24" font-weight="600" fill="#1B1F24" data-token="color.text.primary" data-key="cart.title">Giỏ hàng của bạn</text>
|
||||
<text x="230" y="28" font-size="16" fill="#5B6472" data-token="color.text.secondary" data-key="cart.itemCount">(5 sản phẩm — minh hoạ)</text>
|
||||
</g>
|
||||
|
||||
<g id="Z2" data-name="Danh sách nhóm seller" transform="translate(120 104)">
|
||||
|
||||
<!-- Nhóm seller Shop A -->
|
||||
<g data-name="Card nhóm seller">
|
||||
<rect width="800" height="164" rx="8" fill="#FFFFFF" stroke="#D5DAE1" data-token="color.border.default"/>
|
||||
<g id="C02"><text x="16" y="30" font-size="16" font-weight="600" fill="#1B1F24" data-token="color.text.primary">Shop A</text></g>
|
||||
|
||||
<g data-name="CartItem 1" transform="translate(16 44)">
|
||||
<g id="C03"><rect width="64" height="64" rx="4" fill="#EEF1F5" stroke="#D5DAE1" data-token="color.bg.subtle"/></g>
|
||||
<g transform="translate(76 4)">
|
||||
<text id="C04" y="16" fill="#1B1F24" data-token="color.text.primary">Áo thun basic</text>
|
||||
<text id="C05" y="36" font-size="12" fill="#5B6472" data-token="color.text.secondary">Size M, Đỏ</text>
|
||||
<text id="C06" y="54" font-size="12" fill="#5B6472" data-token="color.text.secondary">100.000 ₫</text>
|
||||
</g>
|
||||
<g id="F01" transform="translate(560 12)">
|
||||
<rect width="112" height="36" rx="4" fill="#FFFFFF" stroke="#767F8C" data-token="color.border.strong"/>
|
||||
<text x="20" y="23" fill="#1B1F24" data-token="color.text.primary">− 2 +</text>
|
||||
</g>
|
||||
<g id="C07" transform="translate(690 12)">
|
||||
<rect width="80" height="36" rx="4" fill="#B42318" data-token="color.status.danger"/>
|
||||
<text x="40" y="23" text-anchor="middle" font-weight="600" fill="#FFFFFF" data-token="color.text.inverse" data-key="btn.delete">Xoá</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="C08" transform="translate(600 132)"><text text-anchor="end" x="184" fill="#1B1F24" data-token="color.text.primary">Tạm tính: 250.000 ₫</text></g>
|
||||
</g>
|
||||
|
||||
<!-- Nhóm seller Shop B -->
|
||||
<g transform="translate(0 180)" data-name="Card nhóm seller">
|
||||
<rect width="800" height="164" rx="8" fill="#FFFFFF" stroke="#D5DAE1" data-token="color.border.default"/>
|
||||
<g id="C02"><text x="16" y="30" font-size="16" font-weight="600" fill="#1B1F24" data-token="color.text.primary">Shop B</text></g>
|
||||
<g data-name="CartItem 2" transform="translate(16 44)">
|
||||
<g id="C03"><rect width="64" height="64" rx="4" fill="#EEF1F5" stroke="#D5DAE1" data-token="color.bg.subtle"/></g>
|
||||
<g transform="translate(76 4)">
|
||||
<text id="C04" y="16" fill="#1B1F24" data-token="color.text.primary">Balo du lịch</text>
|
||||
<text id="C05" y="36" font-size="12" fill="#5B6472" data-token="color.text.secondary">Đen</text>
|
||||
<text id="C06" y="54" font-size="12" fill="#5B6472" data-token="color.text.secondary">200.000 ₫</text>
|
||||
</g>
|
||||
<g id="F01" transform="translate(560 12)">
|
||||
<rect width="112" height="36" rx="4" fill="#FFFFFF" stroke="#767F8C" data-token="color.border.strong"/>
|
||||
<text x="20" y="23" fill="#1B1F24" data-token="color.text.primary">− 1 +</text>
|
||||
</g>
|
||||
<g id="C07" transform="translate(690 12)">
|
||||
<rect width="80" height="36" rx="4" fill="#B42318" data-token="color.status.danger"/>
|
||||
<text x="40" y="23" text-anchor="middle" font-weight="600" fill="#FFFFFF" data-token="color.text.inverse" data-key="btn.delete">Xoá</text>
|
||||
</g>
|
||||
</g>
|
||||
<g id="C08" transform="translate(600 132)"><text text-anchor="end" x="184" fill="#1B1F24" data-token="color.text.primary">Tạm tính: 260.000 ₫</text></g>
|
||||
</g>
|
||||
|
||||
</g>
|
||||
|
||||
<g id="Z3" data-name="Tổng kết (sidebar desktop / footer mobile)" transform="translate(960 104)">
|
||||
<rect width="360" height="120" rx="8" fill="#FFFFFF" stroke="#D5DAE1" data-token="color.border.default"/>
|
||||
<g id="C09"><text x="16" y="36" font-size="20" font-weight="600" fill="#1B1F24" data-token="color.text.primary">Tổng cộng: 510.000 ₫</text></g>
|
||||
<g id="C11" transform="translate(16 56)">
|
||||
<rect width="328" height="36" rx="4" fill="#2456A6" data-token="color.brand.primary"/>
|
||||
<text x="164" y="23" text-anchor="middle" font-weight="600" fill="#FFFFFF" data-token="color.text.inverse" data-key="btn.checkout">Tiến hành Checkout</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
Reference in New Issue
Block a user