09013ab94a
- 新增 4 个 UI 组件: PointsCard/ProductCard/CheckinCalendar/CheckinModal - 商城首页 V2: 积分卡 + 快捷操作 + 分类标签 + 商品网格 - 商品详情 V2: 大图 + 信息卡 + 库存/余额状态 + 底部操作栏 - TabBar 新增商城入口(5 Tab: 首页/健康/商城/助手/我的) - 设计原型 docs/design/mp-05-mall-v2.html + SPEC.md 交付包 - CLAUDE.md 安全规范加固: 新增 §3.7 安全规范 6 条 + Feature DoD 安全清单扩展
90 lines
1.6 KiB
SCSS
90 lines
1.6 KiB
SCSS
@import '../../styles/variables.scss';
|
|
@import '../../styles/mixins.scss';
|
|
|
|
// 积分商城 V2 — 对齐原型 docs/design/mp-05-mall-v2.html
|
|
|
|
.mall-page {
|
|
padding-bottom: calc(var(--tk-tabbar-space) + env(safe-area-inset-bottom));
|
|
background: $bg;
|
|
}
|
|
|
|
/* ─── 积分卡片区 ─── */
|
|
.mall-header {
|
|
padding: 0 var(--tk-page-padding);
|
|
padding-top: var(--tk-gap-sm);
|
|
}
|
|
|
|
/* ─── 可滚动内容区 ─── */
|
|
.mall-content {
|
|
padding: 0 var(--tk-page-padding) var(--tk-gap-lg);
|
|
}
|
|
|
|
/* ─── 快捷操作 ─── */
|
|
.mall-actions {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: var(--tk-section-gap) 0;
|
|
}
|
|
|
|
.mall-action {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: $sp-xs;
|
|
@include touch-feedback;
|
|
|
|
&-icon {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 26px;
|
|
@include flex-center;
|
|
|
|
&--checkin {
|
|
background: $acc;
|
|
box-shadow: 0 4px 12px rgba(91, 122, 94, 0.3);
|
|
}
|
|
&--history {
|
|
background: $wrn;
|
|
box-shadow: 0 4px 12px rgba(196, 135, 58, 0.3);
|
|
}
|
|
}
|
|
|
|
&-icon-text {
|
|
font-size: 22px;
|
|
color: $white;
|
|
line-height: 1;
|
|
}
|
|
|
|
&-label {
|
|
font-size: var(--tk-font-micro);
|
|
color: $tx2;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
/* ─── 分割线 ─── */
|
|
.mall-divider {
|
|
height: 1px;
|
|
background: $bd;
|
|
margin-bottom: $sp-md;
|
|
}
|
|
|
|
/* ─── 分类标签 ─── */
|
|
.mall-tabs {
|
|
margin-bottom: $sp-section;
|
|
}
|
|
|
|
/* ─── 商品网格 ─── */
|
|
.product-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: $sp-sm;
|
|
}
|
|
|
|
// 长者模式
|
|
.elder-mode .mall-page {
|
|
.mall-action-label {
|
|
font-size: 14px;
|
|
}
|
|
}
|