feat(mp): 新增 AvatarCircle/ShortcutButton/TodoAlert 组件 + 商品详情页
- AvatarCircle: 头像圆形组件 - ShortcutButton: 快捷操作按钮 - TodoAlert: 待办提醒组件 - pkg-mall/product: 积分商品详情页
This commit is contained in:
79
apps/miniprogram/src/components/ui/ShortcutButton/index.scss
Normal file
79
apps/miniprogram/src/components/ui/ShortcutButton/index.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user