r113/ecommerce.html · 约 3997 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
6<title>电商风格用户中心</title>
7<link rel="icon" href="data:,">
8<link rel="stylesheet" href="style.css">
9</head>
10<body data-page="ecommerce" style="--brand:#ff5000;--brand-d:#e64500">
11<header class="uc-hero" style="--brand:#ff5000;--brand-d:#e64500"><div class="uc-top"><span class="uc-set" data-toast="设置">⚙️</span></div><div class="avatar" style="width:60px;height:60px;background:rgba(255,255,255,.25);font-size:30px">🦌</div><div class="uc-name">爱购物的小鹿 <span class="uc-lv">V4</span></div><div class="uc-id">会员中心 ›</div></header><main class="uc-wrap"><div class="card od-card"><div class="od-h">我的订单 <span class="od-more" data-toast="查看全部订单">全部 ›</span></div><div class="od-row"><a class="od" data-toast="待付款：2 笔" href="#">待付款<span class="od-n">2</span></a><a class="od" data-toast="待发货：1 笔" href="#">待发货<span class="od-n">1</span></a><a class="od" data-toast="待收货：3 笔" href="#">待收货<span class="od-n">3</span></a><a class="od" data-toast="待评价：5 笔" href="#">待评价<span class="od-n">5</span></a><a class="od" data-toast="退换/售后：0 笔" href="#">退换/售后<span class="od-n">0</span></a></div></div><div class="card as-card"><div class="as-row"><div class="as"><div class="as-v">12</div><div class="as-l">优惠券</div></div><div class="as"><div class="as-v">3</div><div class="as-l">红包</div></div><div class="as"><div class="as-v">¥286</div><div class="as-l">余额</div></div><div class="as"><div class="as-v">980</div><div class="as-l">金币</div></div></div></div><div class="card"><div class="card-h">我的工具</div><div class="tl-grid"><a class="tl" data-toast="我的收藏" href="#"><span class="tl-ic">🔹</span>我的收藏</a><a class="tl" data-toast="浏览足迹" href="#"><span class="tl-ic">🔹</span>浏览足迹</a><a class="tl" data-toast="评价晒单" href="#"><span class="tl-ic">🔹</span>评价晒单</a><a class="tl" data-toast="砍价免费拿" href="#"><span class="tl-ic">🔹</span>砍价免费拿</a><a class="tl" data-toast="天天领现金" href="#"><span class="tl-ic">🔹</span>天天领现金</a><a class="tl" data-toast="客服小蜜" href="#"><span class="tl-ic">🔹</span>客服小蜜</a><a class="tl" data-toast="会员中心" href="#"><span class="tl-ic">🔹</span>会员中心</a><a class="tl" data-toast="主题换肤" href="#"><span class="tl-ic">🔹</span>主题换肤</a></div></div><div class="card"><div class="card-h">猜你喜欢</div><div class="gp-row"><div class="gp"><div class="gp-img">🛍️</div><div class="gp-name">夏季连衣裙</div><div class="gp-price">¥129</div></div><div class="gp"><div class="gp-img">🛍️</div><div class="gp-name">无线耳机</div><div class="gp-price">¥199</div></div><div class="gp"><div class="gp-img">🛍️</div><div class="gp-name">便携榨汁机</div><div class="gp-price">¥89</div></div><div class="gp"><div class="gp-img">🛍️</div><div class="gp-name">运动跑鞋</div><div class="gp-price">¥259</div></div></div></div></main><nav class="uctab"><a class="ut" data-toast="演示页面，仅展示 UI"><span class="ut-ic">🏠</span><span class="ut-tx">首页</span></a><a class="ut" data-toast="演示页面，仅展示 UI"><span class="ut-ic">🔍</span><span class="ut-tx">分类</span></a><a class="ut" data-toast="演示页面，仅展示 UI"><span class="ut-ic">🛒</span><span class="ut-tx">购物车</span></a><a class="ut on" data-toast="演示页面，仅展示 UI"><span class="ut-ic">👤</span><span class="ut-tx">我的</span></a></nav>
12
13<div class="mask" id="mask"></div>
14<div class="toast" id="toast"></div>
15<script src="data/fallback.js"></script>
16<script src="app.js"></script>
17<script></script>
18</body>
19</html>