feat(mp): 新增 AvatarCircle/ShortcutButton/TodoAlert 组件 + 商品详情页

- AvatarCircle: 头像圆形组件
- ShortcutButton: 快捷操作按钮
- TodoAlert: 待办提醒组件
- pkg-mall/product: 积分商品详情页
This commit is contained in:
iven
2026-05-18 02:12:58 +08:00
parent e555496528
commit ded37830fe
8 changed files with 697 additions and 0 deletions

View File

@@ -0,0 +1,79 @@
@import '../../../styles/variables.scss';
.shortcut-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
&:active {
opacity: var(--tk-touch-feedback-opacity);
}
&__icon-wrap {
position: relative;
width: 52px;
height: 52px;
border-radius: 26px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.15s;
}
&__icon {
font-size: 22px;
line-height: 1;
}
&__badge {
position: absolute;
top: -4px;
right: -8px;
min-width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
background: $dan;
color: $white;
font-size: 11px;
font-weight: 700;
border-radius: $r-pill;
padding: 0 4px;
}
&__label {
font-size: 12px;
color: $tx2;
}
// ── 色彩变体(对齐 SPEC T.priL/T.accL/T.wrnL/T.danL──
&--pri .shortcut-btn__icon-wrap {
background: #D4E5F0;
}
&--pri .shortcut-btn__icon {
color: #3A6B8C;
}
&--acc .shortcut-btn__icon-wrap {
background: #E8F0E8;
}
&--acc .shortcut-btn__icon {
color: #5B7A5E;
}
&--wrn .shortcut-btn__icon-wrap {
background: #FFF3E0;
}
&--wrn .shortcut-btn__icon {
color: #C4873A;
}
&--dan .shortcut-btn__icon-wrap {
background: #FDEAEA;
}
&--dan .shortcut-btn__icon {
color: #B54A4A;
}
}