小程序端：设计系统收敛与排版层级修复
问题：88 个 wxss 里散落大量硬编码颜色/字号/字重，无法统一调整； 部分正文对比度不达 WCAG AA（4.5:1）；组件触摸目标偏小。 改动： - 硬编码颜色收敛到语义 token（颜色统一走 design token，不再散落字面值） - 修正全站字号阶梯：正文 ≥12px、角标 ≥11px；字重只用 400/500/600/700 - 组件触摸目标提升到 ≥44px，并补交互反馈 - 首页补氛围层次、强化排版层级 验证（本轮实测）： - UI 契约门禁 18/18 PASS（含 wxml 结构、wxss 组件选择器、token 显式值断言） - 声明级体检 88/88 通过（全部 wxss 声明合法） 交付物：artifacts/miniapp-design-v2-preview.html
This commit is contained in:
WorkBuddy
@@ -1,2 +1,2 @@
|
||||
.ui-act{overflow:hidden;border-radius:28rpx;background:#fff;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}.ui-act__cover{position:relative;width:100%;height:240rpx;background:#F0F1F6}.ui-act__cover-img{display:block;width:100%;height:100%}.ui-act__fee-badge{position:absolute;top:18rpx;right:18rpx;padding:7rpx 15rpx;border-radius:22rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:18rpx;font-weight:600}.ui-act__body{padding:22rpx 24rpx}.ui-act__title{overflow:hidden;color:#222746;font-size:28rpx;font-weight:700;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}.ui-act__meta{margin-top:7rpx;color:#767C94;font-size:20rpx;line-height:1.45}.ui-act__intro{display:-webkit-box;overflow:hidden;margin-top:12rpx;color:#626981;font-size:21rpx;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ui-act__footer{display:flex;align-items:center;justify-content:space-between;margin-top:18rpx}.ui-act__capacity{color:#858A9E;font-size:19rpx}.ui-act__status-action{min-width:126rpx;height:56rpx;display:flex;align-items:center;justify-content:center;border-radius:28rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:21rpx;font-weight:650}.ui-act__status-action.disabled{background:#EFF0F5;color:#8E93A6}.ui-act--compact{display:flex;height:200rpx}.ui-act--compact .ui-act__cover{width:200rpx;height:200rpx;flex-shrink:0}.ui-act--compact .ui-act__body{flex:1;min-width:0;padding:16rpx 18rpx}.ui-act--compact .ui-act__intro{display:none}
|
||||
.ui-act__type-row{display:flex;align-items:center;margin-top:10rpx;flex-wrap:wrap}.ui-act__type-badge{padding:4rpx 14rpx;border-radius:18rpx;background:#FFF1F0;color:#D9453C;font-size:18rpx;font-weight:600}.ui-act__eligibility{margin-left:12rpx;color:#858A9E;font-size:18rpx}
|
||||
.ui-act{overflow:hidden;border-radius:28rpx;background:var(--color-bg-card);box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}.ui-act__cover{position:relative;width:100%;height:240rpx;background:var(--color-bg-subtle)}.ui-act__cover-img{display:block;width:100%;height:100%}.ui-act__fee-badge{position:absolute;top:18rpx;right:18rpx;padding:7rpx 15rpx;border-radius:22rpx;background:var(--gradient-brand-solid);color:var(--color-text-inverse);font-size:18rpx;font-weight:600}.ui-act__body{padding:22rpx 24rpx}.ui-act__title{overflow:hidden;color:var(--color-text-strong);font-size:28rpx;font-weight:700;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}.ui-act__meta{margin-top:7rpx;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.45}.ui-act__intro{display:-webkit-box;overflow:hidden;margin-top:12rpx;color:var(--color-text-secondary);font-size:24rpx;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ui-act__footer{display:flex;align-items:center;justify-content:space-between;margin-top:18rpx}.ui-act__capacity{color:var(--color-text-tertiary);font-size:24rpx}.ui-act__status-action{min-width:126rpx;min-height:var(--tap-min);display:flex;align-items:center;justify-content:center;border-radius:28rpx;background:var(--gradient-brand-solid);color:var(--color-text-inverse);font-size:24rpx;font-weight:600}.ui-act__status-action.disabled{background:var(--color-bg-subtle);color:var(--color-text-tertiary)}.ui-act--compact{display:flex;height:200rpx}.ui-act--compact .ui-act__cover{width:200rpx;height:200rpx;flex-shrink:0}.ui-act--compact .ui-act__body{flex:1;min-width:0;padding:16rpx 18rpx}.ui-act--compact .ui-act__intro{display:none}
|
||||
.ui-act__type-row{display:flex;align-items:center;margin-top:10rpx;flex-wrap:wrap}.ui-act__type-badge{padding:4rpx 14rpx;border-radius:18rpx;background:var(--color-primary-light);color:var(--color-danger-strong);font-size:18rpx;font-weight:600}.ui-act__eligibility{margin-left:12rpx;color:var(--color-text-tertiary);font-size:24rpx}
|
||||
|
||||
@@ -1,59 +1,59 @@
|
||||
.ui-avatar {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
background: var(--color-bg-disabled);
|
||||
overflow: hidden;
|
||||
position:relative;
|
||||
flex-shrink:0;
|
||||
background:var(--color-bg-disabled);
|
||||
overflow:hidden;
|
||||
}
|
||||
.ui-avatar--circle { border-radius: 50%; }
|
||||
.ui-avatar--square { border-radius: var(--radius-md); }
|
||||
.ui-avatar--circle { border-radius:50%; }
|
||||
.ui-avatar--square { border-radius:var(--radius-md); }
|
||||
|
||||
/* 尺寸：sm 60 / md 88 / lg 120 / xl 160 */
|
||||
.ui-avatar--sm { width: 60rpx; height: 60rpx; }
|
||||
.ui-avatar--md { width: 88rpx; height: 88rpx; }
|
||||
.ui-avatar--lg { width: 120rpx; height: 120rpx; }
|
||||
.ui-avatar--xl { width: 160rpx; height: 160rpx; }
|
||||
.ui-avatar--sm { width:60rpx; height:60rpx; }
|
||||
.ui-avatar--md { width:88rpx; height:88rpx; }
|
||||
.ui-avatar--lg { width:120rpx; height:120rpx; }
|
||||
.ui-avatar--xl { width:160rpx; height:160rpx; }
|
||||
|
||||
.ui-avatar__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:block;
|
||||
}
|
||||
.ui-avatar__fallback {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-primary-light);
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
background:var(--color-primary-light);
|
||||
}
|
||||
.ui-avatar__fallback-text {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--color-primary);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size:var(--font-size-lg);
|
||||
color:var(--color-primary-strong);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
}
|
||||
.ui-avatar__fallback-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.ui-avatar__badges {
|
||||
position: absolute;
|
||||
bottom: -4rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 6rpx;
|
||||
position:absolute;
|
||||
bottom:-4rpx;
|
||||
left:50%;
|
||||
transform:translateX(-50%);
|
||||
display:flex;
|
||||
gap:6rpx;
|
||||
}
|
||||
.ui-avatar__badge {
|
||||
font-size: 16rpx;
|
||||
line-height: 1;
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: var(--radius-full);
|
||||
color: #FFFFFF;
|
||||
font-weight: var(--font-weight-medium);
|
||||
white-space: nowrap;
|
||||
font-size:16rpx;
|
||||
line-height:1;
|
||||
padding:4rpx 8rpx;
|
||||
border-radius:var(--radius-full);
|
||||
color:var(--color-text-inverse);
|
||||
font-weight:var(--font-weight-medium);
|
||||
white-space:nowrap;
|
||||
}
|
||||
.ui-avatar__badge--verified { background: var(--color-success); }
|
||||
.ui-avatar__badge--reviewed { background: var(--color-info); }
|
||||
.ui-avatar__badge--verified { background:var(--color-success); }
|
||||
.ui-avatar__badge--reviewed { background:var(--color-info); }
|
||||
|
||||
/* 小尺寸时隐藏徽标避免溢出 */
|
||||
.ui-avatar--sm .ui-avatar__badges { display: none; }
|
||||
.ui-avatar--sm .ui-avatar__badges { display:none; }
|
||||
|
||||
@@ -1,111 +1,124 @@
|
||||
/**
|
||||
* Button 组件样式
|
||||
* 引用全局 Design Token（addGlobalClass: true）
|
||||
* 引用全局 Design Token（addGlobalClass:true）
|
||||
*
|
||||
* 2026-09-22 修复：
|
||||
* 1) 触摸目标：md 只有 80rpx(40px)、sm 只有 56rpx(28px)，低于 44px 下限；
|
||||
* text 变体更是 min-height:auto，几乎点不中。现统一以 --tap-min 兜底。
|
||||
* 2) 对比度：主按钮背景原为 --color-primary(#E96B6B)，白字仅 3.10:1。
|
||||
* 改用 --color-primary-solid(#C24C50) = 4.73:1，视觉上仍是暖红。
|
||||
* secondary/text 的红色文字同理从 3.10 提到 --color-primary-strong 的 5.33。
|
||||
* 3) 危险按钮 --color-danger(#D94A4A) 白字 4.18:1 不达标，改用 -strong 变体。
|
||||
* 4) 按压反馈统一走 --press-scale / --press-opacity，替代硬编码 0.98 / 0.85。
|
||||
*/
|
||||
.ui-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--radius-full);
|
||||
font-family: var(--font-family-cn);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-align: center;
|
||||
transition: opacity var(--motion-fast) var(--ease-standard),
|
||||
transform var(--motion-fast) var(--ease-standard);
|
||||
user-select: none;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
box-sizing:border-box;
|
||||
border-radius:var(--radius-full);
|
||||
font-family:var(--font-family-cn);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
text-align:center;
|
||||
transition:transform var(--motion-fast) var(--ease-spring),
|
||||
opacity var(--motion-fast) var(--ease-standard),
|
||||
background-color var(--motion-fast) var(--ease-standard);
|
||||
user-select:none;
|
||||
line-height:1.2;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
/* 尺寸 */
|
||||
/* 尺寸：全部以 44×44px 为热区下限 */
|
||||
.ui-btn--sm {
|
||||
padding: 14rpx 24rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
min-height: 56rpx;
|
||||
padding:14rpx 28rpx;
|
||||
font-size:var(--font-size-sm);
|
||||
min-height:var(--tap-min);
|
||||
}
|
||||
.ui-btn--md {
|
||||
padding: 20rpx 36rpx;
|
||||
font-size: var(--font-size-base);
|
||||
min-height: 80rpx;
|
||||
padding:20rpx 36rpx;
|
||||
font-size:var(--font-size-base);
|
||||
min-height:var(--tap-min);
|
||||
}
|
||||
.ui-btn--lg {
|
||||
padding: 26rpx 48rpx;
|
||||
font-size: var(--font-size-lg);
|
||||
min-height: 96rpx;
|
||||
padding:26rpx 48rpx;
|
||||
font-size:var(--font-size-lg);
|
||||
min-height:var(--tap-comfortable);
|
||||
}
|
||||
|
||||
/* 撑满 */
|
||||
.ui-btn--block {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
display:flex;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* 变体 */
|
||||
.ui-btn--primary {
|
||||
background: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
.ui-btn--secondary {
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-primary);
|
||||
border: 1rpx solid var(--color-primary);
|
||||
background:var(--color-bg-card);
|
||||
color:var(--color-primary-strong);
|
||||
border:var(--border-width) solid var(--color-primary-strong);
|
||||
}
|
||||
.ui-btn--ghost {
|
||||
background: transparent;
|
||||
color: var(--color-text-primary);
|
||||
border: 1rpx solid var(--color-border);
|
||||
background:transparent;
|
||||
color:var(--color-text-primary);
|
||||
border:var(--border-width) solid var(--color-border-strong);
|
||||
}
|
||||
.ui-btn--danger {
|
||||
background: var(--color-danger);
|
||||
color: #FFFFFF;
|
||||
background:var(--color-danger-strong);
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
.ui-btn--text {
|
||||
background: transparent;
|
||||
color: var(--color-primary);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
min-height: auto;
|
||||
background:transparent;
|
||||
color:var(--color-primary-strong);
|
||||
padding-left:var(--spacing-2);
|
||||
padding-right:var(--spacing-2);
|
||||
/* 视觉是纯文字，但热区仍需 44px：多出的部分由 align-items:center 居中留白 */
|
||||
min-height:var(--tap-min);
|
||||
}
|
||||
|
||||
/* 状态 */
|
||||
.ui-btn--disabled,
|
||||
.ui-btn--loading {
|
||||
opacity: 0.55;
|
||||
opacity:0.55;
|
||||
}
|
||||
.ui-btn--disabled.ui-btn--primary,
|
||||
.ui-btn--disabled.ui-btn--danger {
|
||||
background: var(--color-text-disabled);
|
||||
background:var(--color-text-disabled);
|
||||
}
|
||||
.ui-btn--disabled.ui-btn--secondary,
|
||||
.ui-btn--disabled.ui-btn--ghost {
|
||||
color: var(--color-text-disabled);
|
||||
border-color: var(--color-text-disabled);
|
||||
color:var(--color-text-disabled);
|
||||
border-color:var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.ui-btn--hover {
|
||||
opacity: 0.85;
|
||||
transform: scale(0.98);
|
||||
/* 按压反馈（hover-class 与 CSS :active 双保险） */
|
||||
.ui-btn--hover,
|
||||
.ui-btn:active {
|
||||
opacity:var(--press-opacity);
|
||||
transform:scale(var(--press-scale));
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.ui-btn__spinner {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:28rpx;
|
||||
height:28rpx;
|
||||
margin-right:12rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
.ui-btn__spinner-dot {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid currentColor;
|
||||
border-top-color: transparent;
|
||||
animation: ui-btn-spin 0.7s linear infinite;
|
||||
width:18rpx;
|
||||
height:18rpx;
|
||||
border-radius:50%;
|
||||
border:3rpx solid currentColor;
|
||||
border-top-color:transparent;
|
||||
animation:ui-btn-spin 0.7s linear infinite;
|
||||
}
|
||||
@keyframes ui-btn-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
from { transform:rotate(0deg); }
|
||||
to { transform:rotate(360deg); }
|
||||
}
|
||||
|
||||
@@ -1,66 +1,66 @@
|
||||
.ui-conv {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-card);
|
||||
padding: 18rpx 20rpx;
|
||||
border-bottom: 1rpx solid var(--color-divider);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
background:var(--color-bg-card);
|
||||
padding:18rpx 20rpx;
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
.ui-conv--disabled {
|
||||
opacity: 0.6;
|
||||
opacity:0.6;
|
||||
}
|
||||
.ui-conv__body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: var(--spacing-3);
|
||||
flex:1;
|
||||
min-width:0;
|
||||
margin-left:var(--spacing-3);
|
||||
}
|
||||
.ui-conv__top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:baseline;
|
||||
}
|
||||
.ui-conv__name {
|
||||
color: #222746;
|
||||
font-size: 26rpx;
|
||||
font-weight: 650;
|
||||
color:var(--color-text-strong);
|
||||
font-size:26rpx;
|
||||
font-weight:600;
|
||||
}
|
||||
.ui-conv__time {
|
||||
color: #8b90a5;
|
||||
font-size: 19rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--spacing-2);
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:24rpx;
|
||||
flex-shrink:0;
|
||||
margin-left:var(--spacing-2);
|
||||
}
|
||||
.ui-conv__bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-1);
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
margin-top:var(--spacing-1);
|
||||
}
|
||||
.ui-conv__last {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: #7a8097;
|
||||
font-size: 21rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: var(--spacing-2);
|
||||
flex:1;
|
||||
min-width:0;
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:24rpx;
|
||||
overflow:hidden;
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
margin-right:var(--spacing-2);
|
||||
}
|
||||
.ui-conv__badge {
|
||||
min-width: 36rpx;
|
||||
height: 36rpx;
|
||||
padding: 0 10rpx;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-danger);
|
||||
color: #FFFFFF;
|
||||
font-size: var(--font-size-xs);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
min-width:36rpx;
|
||||
height:36rpx;
|
||||
padding:0 10rpx;
|
||||
border-radius:var(--radius-full);
|
||||
background:var(--color-danger);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:var(--font-size-xs);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
line-height:1;
|
||||
flex-shrink:0;
|
||||
}
|
||||
.ui-conv__status-hint {
|
||||
margin-top: var(--spacing-1);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-top:var(--spacing-1);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
@@ -1,47 +1,47 @@
|
||||
.ui-dialog-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--color-bg-overlay);
|
||||
z-index: var(--z-modal);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 var(--spacing-6);
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
background:var(--color-bg-overlay);
|
||||
z-index:var(--z-modal);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding:0 var(--spacing-6);
|
||||
}
|
||||
.ui-dialog {
|
||||
width: 100%;
|
||||
max-width: 600rpx;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-5) var(--spacing-4) var(--spacing-4);
|
||||
box-shadow: var(--shadow-popup);
|
||||
animation: ui-dialog-in var(--motion-normal) var(--ease-standard);
|
||||
width:100%;
|
||||
max-width:600rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:var(--radius-lg);
|
||||
padding:var(--spacing-5) var(--spacing-4) var(--spacing-4);
|
||||
box-shadow:var(--shadow-popup);
|
||||
animation:ui-dialog-in var(--motion-normal) var(--ease-standard);
|
||||
}
|
||||
@keyframes ui-dialog-in {
|
||||
from { transform: scale(0.92); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
from { transform:scale(0.92); opacity:0; }
|
||||
to { transform:scale(1); opacity:1; }
|
||||
}
|
||||
.ui-dialog__title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-3);
|
||||
font-size:var(--font-size-xl);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
color:var(--color-text-primary);
|
||||
text-align:center;
|
||||
margin-bottom:var(--spacing-3);
|
||||
}
|
||||
.ui-dialog__content {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-5);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
line-height:var(--line-height-relaxed);
|
||||
text-align:center;
|
||||
margin-bottom:var(--spacing-5);
|
||||
}
|
||||
.ui-dialog__actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-2);
|
||||
display:flex;
|
||||
gap:var(--spacing-2);
|
||||
}
|
||||
.ui-dialog__btn {
|
||||
flex: 1;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
.ui-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--spacing-10) var(--spacing-page-x);
|
||||
text-align: center;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
padding:var(--spacing-10) var(--spacing-page-x);
|
||||
text-align:center;
|
||||
}
|
||||
.ui-empty__illustration {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--color-bg-disabled);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-4);
|
||||
width:160rpx;
|
||||
height:160rpx;
|
||||
border-radius:50%;
|
||||
background:var(--color-bg-disabled);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
margin-bottom:var(--spacing-4);
|
||||
}
|
||||
.ui-empty__icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
opacity: 0.72;
|
||||
width:72rpx;
|
||||
height:72rpx;
|
||||
opacity:0.72;
|
||||
}
|
||||
.ui-empty__title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-primary);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size:var(--font-size-lg);
|
||||
font-weight:var(--font-weight-medium);
|
||||
color:var(--color-text-primary);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-empty__desc {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
max-width: 480rpx;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:var(--line-height-relaxed);
|
||||
max-width:480rpx;
|
||||
}
|
||||
.ui-empty__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
margin-top: var(--spacing-6);
|
||||
width: 100%;
|
||||
max-width: 480rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:var(--spacing-2);
|
||||
margin-top:var(--spacing-6);
|
||||
width:100%;
|
||||
max-width:480rpx;
|
||||
}
|
||||
.ui-empty__action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80rpx;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
min-height:var(--tap-min);
|
||||
border-radius:var(--radius-full);
|
||||
font-size:var(--font-size-base);
|
||||
font-weight:var(--font-weight-medium);
|
||||
min-width:var(--tap-min);}
|
||||
.ui-empty__action--primary {
|
||||
background: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
.ui-empty__action--secondary {
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-primary);
|
||||
border: 1rpx solid var(--color-primary);
|
||||
background:var(--color-bg-card);
|
||||
color:var(--color-primary-strong);
|
||||
border:1rpx solid var(--color-primary);
|
||||
}
|
||||
|
||||
@@ -1,45 +1,45 @@
|
||||
.error-state {
|
||||
padding: 64rpx 32rpx;
|
||||
text-align: center;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
padding:64rpx 32rpx;
|
||||
text-align:center;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:var(--radius-lg);
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
display: block;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
display:block;
|
||||
width:72rpx;
|
||||
height:72rpx;
|
||||
margin:0 auto 20rpx;
|
||||
}
|
||||
|
||||
.error-title,
|
||||
.error-desc {
|
||||
display: block;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
font-size:30rpx;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.error-desc {
|
||||
margin-top: 8rpx;
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: 24rpx;
|
||||
margin-top:8rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:24rpx;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
margin-top: 24rpx;
|
||||
border: 0;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
font-size: 26rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
width:220rpx;
|
||||
min-height:var(--tap-min);
|
||||
margin-top:24rpx;
|
||||
border:0;
|
||||
border-radius:var(--radius-full);
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:26rpx;
|
||||
line-height:var(--tap-min);
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
.retry-btn::after {
|
||||
border: 0;
|
||||
border:0;
|
||||
}
|
||||
|
||||
@@ -1,69 +1,69 @@
|
||||
.ui-input {
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: 1rpx solid var(--color-border);
|
||||
position: relative;
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:1rpx solid var(--color-border);
|
||||
position:relative;
|
||||
}
|
||||
.ui-input__label {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-input__field-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
.ui-input__field {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text-primary);
|
||||
padding: var(--spacing-2) 0;
|
||||
line-height: var(--line-height-normal);
|
||||
flex:1;
|
||||
min-width:0;
|
||||
font-size:var(--font-size-base);
|
||||
color:var(--color-text-primary);
|
||||
padding:var(--spacing-2) 0;
|
||||
line-height:var(--line-height-normal);
|
||||
}
|
||||
.ui-input__placeholder {
|
||||
color: var(--color-text-placeholder);
|
||||
color:var(--color-text-placeholder);
|
||||
}
|
||||
.ui-input__clear {
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--spacing-2);
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-disabled);
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
flex-shrink:0;
|
||||
margin-left:var(--spacing-2);
|
||||
width:36rpx;
|
||||
height:36rpx;
|
||||
border-radius:50%;
|
||||
background:var(--color-text-disabled);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:28rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
line-height:1;
|
||||
}
|
||||
.ui-input__footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-top: var(--spacing-1);
|
||||
min-height: 28rpx;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:flex-start;
|
||||
margin-top:var(--spacing-1);
|
||||
min-height:28rpx;
|
||||
}
|
||||
.ui-input__error {
|
||||
color: var(--color-danger);
|
||||
font-size: var(--font-size-xs);
|
||||
flex: 1;
|
||||
color:var(--color-danger-strong);
|
||||
font-size:var(--font-size-xs);
|
||||
flex:1;
|
||||
}
|
||||
.ui-input__count {
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: var(--font-size-xs);
|
||||
margin-left: var(--spacing-2);
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:var(--font-size-xs);
|
||||
margin-left:var(--spacing-2);
|
||||
}
|
||||
.ui-input--error .ui-input__field {
|
||||
color: var(--color-danger);
|
||||
color:var(--color-danger-strong);
|
||||
}
|
||||
.ui-input--error {
|
||||
border-bottom-color: var(--color-border-error);
|
||||
border-bottom-color:var(--color-border-error);
|
||||
}
|
||||
.ui-input--disabled .ui-input__field {
|
||||
color: var(--color-text-disabled);
|
||||
background: var(--color-bg-disabled);
|
||||
border-radius: var(--radius-sm);
|
||||
padding-left: var(--spacing-2);
|
||||
padding-right: var(--spacing-2);
|
||||
color:var(--color-text-disabled);
|
||||
background:var(--color-bg-disabled);
|
||||
border-radius:var(--radius-sm);
|
||||
padding-left:var(--spacing-2);
|
||||
padding-right:var(--spacing-2);
|
||||
}
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
.ui-likers {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-full);
|
||||
border: 1rpx solid var(--color-border);
|
||||
color: var(--color-text-tertiary);
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:var(--radius-full);
|
||||
border:1rpx solid var(--color-border);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-likers--active {
|
||||
background: var(--color-primary-light);
|
||||
border-color: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
background:var(--color-primary-light);
|
||||
border-color:var(--color-primary-light);
|
||||
color:var(--color-primary-strong);
|
||||
}
|
||||
.ui-likers--sm {
|
||||
padding: 6rpx 14rpx;
|
||||
font-size: var(--font-size-xs);
|
||||
padding:6rpx 14rpx;
|
||||
font-size:var(--font-size-xs);
|
||||
}
|
||||
.ui-likers--md {
|
||||
padding: 8rpx 18rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
padding:8rpx 18rpx;
|
||||
font-size:var(--font-size-sm);
|
||||
}
|
||||
.ui-likers--lg {
|
||||
padding: 12rpx 24rpx;
|
||||
font-size: var(--font-size-md);
|
||||
padding:12rpx 24rpx;
|
||||
font-size:var(--font-size-md);
|
||||
}
|
||||
.ui-likers__icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8rpx;
|
||||
width:24rpx;
|
||||
height:24rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
margin-right:8rpx;
|
||||
}
|
||||
.ui-likers__heart {
|
||||
width: 20rpx;
|
||||
height: 18rpx;
|
||||
background: currentColor;
|
||||
clip-path: polygon(50% 100%, 0 38%, 18% 8%, 50% 28%, 82% 8%, 100% 38%);
|
||||
width:20rpx;
|
||||
height:18rpx;
|
||||
background:currentColor;
|
||||
clip-path:polygon(50% 100%, 0 38%, 18% 8%, 50% 28%, 82% 8%, 100% 38%);
|
||||
}
|
||||
.ui-likers__text {
|
||||
font-size: inherit;
|
||||
font-size:inherit;
|
||||
}
|
||||
|
||||
@@ -1,91 +1,91 @@
|
||||
.ui-loading--block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-8) var(--spacing-page-x);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding:var(--spacing-8) var(--spacing-page-x);
|
||||
}
|
||||
.ui-loading--inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
}
|
||||
.ui-loading__spinner {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:60rpx;
|
||||
height:60rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
.ui-loading__spinner-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
animation: ui-loading-spin 0.8s linear infinite;
|
||||
width:48rpx;
|
||||
height:48rpx;
|
||||
animation:ui-loading-spin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes ui-loading-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
from { transform:rotate(0deg); }
|
||||
to { transform:rotate(360deg); }
|
||||
}
|
||||
.ui-loading__text {
|
||||
margin-top: var(--spacing-3);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-top:var(--spacing-3);
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* Skeleton */
|
||||
.ui-loading__skeleton {
|
||||
width: 100%;
|
||||
width:100%;
|
||||
}
|
||||
.ui-loading__skeleton-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-3) var(--spacing-page-x);
|
||||
background: var(--color-bg-card);
|
||||
border-bottom: 1rpx solid var(--color-divider);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
padding:var(--spacing-3) var(--spacing-page-x);
|
||||
background:var(--color-bg-card);
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
.ui-loading__skeleton-avatar {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--color-bg-disabled);
|
||||
margin-right: var(--spacing-3);
|
||||
flex-shrink: 0;
|
||||
width:88rpx;
|
||||
height:88rpx;
|
||||
border-radius:50%;
|
||||
background:var(--color-bg-disabled);
|
||||
margin-right:var(--spacing-3);
|
||||
flex-shrink:0;
|
||||
}
|
||||
.ui-loading__skeleton-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
.ui-loading__skeleton-line {
|
||||
height: 24rpx;
|
||||
background: var(--color-bg-disabled);
|
||||
border-radius: var(--radius-sm);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height:24rpx;
|
||||
background:var(--color-bg-disabled);
|
||||
border-radius:var(--radius-sm);
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
.ui-loading__skeleton-line--title {
|
||||
width: 40%;
|
||||
margin-bottom: var(--spacing-2);
|
||||
width:40%;
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-loading__skeleton-line--meta {
|
||||
width: 70%;
|
||||
width:70%;
|
||||
}
|
||||
/* shimmer */
|
||||
.ui-loading__skeleton-line::after,
|
||||
.ui-loading__skeleton-avatar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
content:'';
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.55) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: ui-loading-shimmer 1.4s ease-in-out infinite;
|
||||
animation:ui-loading-shimmer 1.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes ui-loading-shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
0% { transform:translateX(-100%); }
|
||||
100% { transform:translateX(100%); }
|
||||
}
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
.ui-mm {
|
||||
background: var(--color-bg-card);
|
||||
border-radius: 26rpx;
|
||||
padding: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
box-shadow: 0 8rpx 28rpx rgba(35,35,95,.06);
|
||||
background:var(--color-bg-card);
|
||||
border-radius:26rpx;
|
||||
padding:24rpx;
|
||||
margin-top:10rpx;
|
||||
box-shadow:0 8rpx 28rpx rgba(35,35,95,.06);
|
||||
}
|
||||
.ui-mm__header {
|
||||
display: block;
|
||||
display:block;
|
||||
}
|
||||
.ui-mm__title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-2);
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-mm__title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
font-size:var(--font-size-lg);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
.ui-mm__mm-info {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-mm__req {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
background: var(--color-bg-disabled);
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-2);
|
||||
padding:var(--spacing-2) var(--spacing-3);
|
||||
background:var(--color-bg-disabled);
|
||||
border-radius:var(--radius-sm);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-mm__req-label {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-mm__req-content {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-normal);
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-secondary);
|
||||
line-height:var(--line-height-normal);
|
||||
display:block;
|
||||
margin-top:4rpx;
|
||||
}
|
||||
.ui-mm__follow-up {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-mm__footer {
|
||||
margin-top: var(--spacing-3);
|
||||
padding-top: var(--spacing-3);
|
||||
border-top: 1rpx solid var(--color-divider);
|
||||
margin-top:var(--spacing-3);
|
||||
padding-top:var(--spacing-3);
|
||||
border-top:1rpx solid var(--color-divider);
|
||||
}
|
||||
|
||||
@@ -1,78 +1,78 @@
|
||||
.ui-bubble {
|
||||
padding: var(--spacing-1) var(--spacing-page-x);
|
||||
padding:var(--spacing-1) var(--spacing-page-x);
|
||||
}
|
||||
.ui-bubble__time {
|
||||
text-align: center;
|
||||
margin: var(--spacing-3) 0;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
text-align:center;
|
||||
margin:var(--spacing-3) 0;
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-bubble__system {
|
||||
text-align: center;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
background: var(--color-bg-disabled);
|
||||
padding: var(--spacing-1) var(--spacing-3);
|
||||
border-radius: var(--radius-sm);
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
text-align:center;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
background:var(--color-bg-disabled);
|
||||
padding:var(--spacing-1) var(--spacing-3);
|
||||
border-radius:var(--radius-sm);
|
||||
display:inline-block;
|
||||
margin:0 auto;
|
||||
}
|
||||
.ui-bubble__row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
}
|
||||
.ui-bubble--other .ui-bubble__row {
|
||||
justify-content: flex-start;
|
||||
justify-content:flex-start;
|
||||
}
|
||||
.ui-bubble--self .ui-bubble__row {
|
||||
justify-content: flex-end;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
.ui-bubble__content-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 70%;
|
||||
margin: 0 var(--spacing-2);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
max-width:70%;
|
||||
margin:0 var(--spacing-2);
|
||||
}
|
||||
.ui-bubble--self .ui-bubble__content-wrap {
|
||||
align-items: flex-end;
|
||||
align-items:flex-end;
|
||||
}
|
||||
.ui-bubble__content {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-normal);
|
||||
word-break: break-all;
|
||||
padding:var(--spacing-2) var(--spacing-3);
|
||||
border-radius:var(--radius-lg);
|
||||
font-size:var(--font-size-base);
|
||||
line-height:var(--line-height-normal);
|
||||
word-break:break-all;
|
||||
}
|
||||
.ui-bubble--other .ui-bubble__content {
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text-primary);
|
||||
border-top-left-radius: var(--radius-sm);
|
||||
background:var(--color-bg-card);
|
||||
color:var(--color-text-primary);
|
||||
border-top-left-radius:var(--radius-sm);
|
||||
}
|
||||
.ui-bubble--self .ui-bubble__content {
|
||||
background: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
border-top-right-radius: var(--radius-sm);
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-top-right-radius:var(--radius-sm);
|
||||
}
|
||||
.ui-bubble__retry {
|
||||
margin-top: var(--spacing-1);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-danger);
|
||||
align-self: flex-end;
|
||||
margin-top:var(--spacing-1);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-danger-strong);
|
||||
align-self:flex-end;
|
||||
}
|
||||
.ui-bubble__sending {
|
||||
margin-top: var(--spacing-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top:var(--spacing-1);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
.ui-bubble__sending-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-disabled);
|
||||
animation: ui-bubble-pulse 1s ease-in-out infinite;
|
||||
width:16rpx;
|
||||
height:16rpx;
|
||||
border-radius:50%;
|
||||
background:var(--color-text-disabled);
|
||||
animation:ui-bubble-pulse 1s ease-in-out infinite;
|
||||
}
|
||||
@keyframes ui-bubble-pulse {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 1; }
|
||||
0%, 100% { opacity:0.3; }
|
||||
50% { opacity:1; }
|
||||
}
|
||||
|
||||
@@ -1,51 +1,51 @@
|
||||
.ui-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: var(--z-sticky);
|
||||
box-sizing: border-box;
|
||||
position:sticky;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
z-index:var(--z-sticky);
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.ui-nav--card {
|
||||
background: var(--color-bg-card);
|
||||
border-bottom: 1rpx solid var(--color-divider);
|
||||
background:var(--color-bg-card);
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
.ui-nav--transparent {
|
||||
background: transparent;
|
||||
background:transparent;
|
||||
}
|
||||
.ui-nav__bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
padding: 0 var(--spacing-2);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
height:88rpx;
|
||||
padding:0 var(--spacing-2);
|
||||
}
|
||||
.ui-nav__back,
|
||||
.ui-nav__placeholder {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
width:64rpx;
|
||||
min-height:var(--tap-min);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
flex-shrink:0;
|
||||
min-width:var(--tap-min);}
|
||||
.ui-nav__back-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
width:36rpx;
|
||||
height:36rpx;
|
||||
}
|
||||
.ui-nav__title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
flex:1;
|
||||
text-align:center;
|
||||
font-size:var(--font-size-lg);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
color:var(--color-text-primary);
|
||||
overflow:hidden;
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
.ui-nav__right {
|
||||
flex-shrink: 0;
|
||||
min-width: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-shrink:0;
|
||||
min-width:64rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
|
||||
@@ -1,99 +1,99 @@
|
||||
.ui-photo__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-2);
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:var(--spacing-2);
|
||||
}
|
||||
.ui-photo__item,
|
||||
.ui-photo__add {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: var(--radius-md);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width:200rpx;
|
||||
height:200rpx;
|
||||
border-radius:var(--radius-md);
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
.ui-photo__item {
|
||||
background: var(--color-bg-disabled);
|
||||
background:var(--color-bg-disabled);
|
||||
}
|
||||
.ui-photo__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:block;
|
||||
}
|
||||
.ui-photo__status {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
left: 8rpx;
|
||||
position:absolute;
|
||||
top:8rpx;
|
||||
left:8rpx;
|
||||
}
|
||||
.ui-photo__remove {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
position:absolute;
|
||||
top:8rpx;
|
||||
right:8rpx;
|
||||
width:36rpx;
|
||||
min-height:var(--tap-min);
|
||||
border-radius:50%;
|
||||
background:rgba(0, 0, 0, 0.55);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:24rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
line-height:1;
|
||||
min-width:var(--tap-min);}
|
||||
.ui-photo__retry {
|
||||
position: absolute;
|
||||
bottom: 8rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-danger);
|
||||
color: #FFFFFF;
|
||||
font-size: var(--font-size-xs);
|
||||
position:absolute;
|
||||
bottom:8rpx;
|
||||
left:50%;
|
||||
transform:translateX(-50%);
|
||||
padding:4rpx 16rpx;
|
||||
border-radius:var(--radius-full);
|
||||
background:var(--color-danger);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:var(--font-size-xs);
|
||||
}
|
||||
.ui-photo__mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:rgba(0, 0, 0, 0.4);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
.ui-photo__spinner {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 3rpx solid rgba(255, 255, 255, 0.5);
|
||||
border-top-color: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
animation: ui-photo-spin 0.8s linear infinite;
|
||||
width:40rpx;
|
||||
height:40rpx;
|
||||
border:3rpx solid rgba(255, 255, 255, 0.5);
|
||||
border-top-color:var(--color-text-inverse);
|
||||
border-radius:50%;
|
||||
animation:ui-photo-spin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes ui-photo-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
from { transform:rotate(0deg); }
|
||||
to { transform:rotate(360deg); }
|
||||
}
|
||||
.ui-photo__add {
|
||||
background: var(--color-bg-disabled);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx dashed var(--color-text-disabled);
|
||||
background:var(--color-bg-disabled);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
border:2rpx dashed var(--color-text-disabled);
|
||||
}
|
||||
.ui-photo__add-icon {
|
||||
font-size: var(--font-size-2xl);
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: 1;
|
||||
font-size:var(--font-size-2xl);
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:1;
|
||||
}
|
||||
.ui-photo__add-text {
|
||||
margin-top: var(--spacing-1);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-top:var(--spacing-1);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-photo__hint {
|
||||
margin-top: var(--spacing-2);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: var(--line-height-normal);
|
||||
margin-top:var(--spacing-2);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:var(--line-height-normal);
|
||||
}
|
||||
|
||||
@@ -1,72 +1,72 @@
|
||||
.ui-pref__hint {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
background: var(--color-warning-light);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-warning);
|
||||
line-height: var(--line-height-normal);
|
||||
margin-bottom: var(--spacing-3);
|
||||
padding:var(--spacing-2) var(--spacing-3);
|
||||
background:var(--color-warning-light);
|
||||
border-radius:var(--radius-sm);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-warning-strong);
|
||||
line-height:var(--line-height-normal);
|
||||
margin-bottom:var(--spacing-3);
|
||||
}
|
||||
.ui-pref__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: 1rpx solid var(--color-divider);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
.ui-pref__label {
|
||||
width: 140rpx;
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
flex-shrink: 0;
|
||||
width:140rpx;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
flex-shrink:0;
|
||||
}
|
||||
.ui-pref__range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
.ui-pref__num {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 64rpx;
|
||||
padding: 0 var(--spacing-2);
|
||||
border: 1rpx solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-size-md);
|
||||
text-align: center;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
height:64rpx;
|
||||
padding:0 var(--spacing-2);
|
||||
border:1rpx solid var(--color-border);
|
||||
border-radius:var(--radius-sm);
|
||||
font-size:var(--font-size-md);
|
||||
text-align:center;
|
||||
}
|
||||
.ui-pref__dash {
|
||||
margin: 0 var(--spacing-2);
|
||||
color: var(--color-text-tertiary);
|
||||
margin:0 var(--spacing-2);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-pref__tags {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-1);
|
||||
flex:1;
|
||||
min-width:0;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:var(--spacing-1);
|
||||
}
|
||||
.ui-pref__picker {
|
||||
flex: 1;
|
||||
flex:1;
|
||||
}
|
||||
.ui-pref__picker-value {
|
||||
padding: var(--spacing-2) 0;
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
padding:var(--spacing-2) 0;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
.ui-pref__importance {
|
||||
margin-left: var(--spacing-2);
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
flex-shrink: 0;
|
||||
margin-left:var(--spacing-2);
|
||||
padding:6rpx 16rpx;
|
||||
border-radius:var(--radius-full);
|
||||
font-size:var(--font-size-xs);
|
||||
font-weight:var(--font-weight-medium);
|
||||
flex-shrink:0;
|
||||
}
|
||||
.ui-pref__importance--required {
|
||||
background: var(--color-danger-light);
|
||||
color: var(--color-danger);
|
||||
background:var(--color-danger-light);
|
||||
color:var(--color-danger-strong);
|
||||
}
|
||||
.ui-pref__importance--preferred {
|
||||
background: var(--color-bg-disabled);
|
||||
color: var(--color-text-tertiary);
|
||||
background:var(--color-bg-disabled);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
.ui-rec{display:flex;align-items:center;gap:16rpx;min-height:132rpx;padding:14rpx 16rpx;background:#fff;border-bottom:1rpx solid #F0F1F6}.ui-rec:last-child{border-bottom:0}.ui-rec__info{flex:1;min-width:0}.ui-rec__name-row{display:flex;align-items:center;gap:10rpx}.ui-rec__name{font-size:26rpx;font-weight:700;color:#222746}.ui-rec__age{font-size:21rpx;color:#545B76}.ui-rec__online{margin-left:auto;font-size:18rpx;color:#39A987}.ui-rec__online::before{content:'·';margin-right:4rpx}.ui-rec__meta{margin-top:5rpx;font-size:20rpx;color:#767C94;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-rec__reasons{display:flex;gap:7rpx;margin-top:8rpx;overflow:hidden}.ui-rec__reason{flex:none;padding:4rpx 9rpx;border-radius:12rpx;background:#F3EEFF;color:#7860AE;font-size:17rpx;white-space:nowrap}.ui-rec__actions{width:82rpx;display:flex;flex-direction:column;align-items:center;gap:7rpx}.compact-like{width:64rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border-radius:32rpx;background:#FFF0F5;box-shadow:0 7rpx 18rpx rgba(255,79,145,.18)}.compact-like__icon{width:44rpx;height:44rpx}.compact-pass{font-size:17rpx;color:#A0A4B4;white-space:nowrap}
|
||||
.ui-rec{display:flex;align-items:center;gap:16rpx;min-height:132rpx;padding:14rpx 16rpx;background:var(--color-bg-card);border-bottom:1rpx solid var(--color-divider)}.ui-rec:last-child{border-bottom:0}.ui-rec__info{flex:1;min-width:0}.ui-rec__name-row{display:flex;align-items:center;gap:10rpx}.ui-rec__name{font-size:26rpx;font-weight:700;color:var(--color-text-strong)}.ui-rec__age{font-size:24rpx;color:var(--color-text-secondary)}.ui-rec__online{margin-left:auto;font-size:24rpx;color:var(--color-success-strong)}.ui-rec__online::before{content:'·';margin-right:4rpx}.ui-rec__meta{margin-top:5rpx;font-size:24rpx;color:var(--color-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-rec__reasons{display:flex;gap:7rpx;margin-top:8rpx;overflow:hidden}.ui-rec__reason{flex:none;padding:4rpx 9rpx;border-radius:12rpx;background:var(--color-accent-purple-light);color:var(--color-accent-purple-strong);font-size:24rpx;white-space:nowrap}.ui-rec__actions{width:var(--tap-min);display:flex;flex-direction:column;align-items:center;gap:7rpx}.compact-like{width:var(--tap-min);min-height:var(--tap-min);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-primary-light);box-shadow:0 7rpx 18rpx rgba(255,79,145,.18);}.compact-like__icon{width:44rpx;height:44rpx}.compact-pass{font-size:24rpx;color:var(--color-text-tertiary);white-space:nowrap}
|
||||
|
||||
@@ -1,31 +1,52 @@
|
||||
/**
|
||||
* 区块标题（全站所有页面共用，是排版层级的关键一环）
|
||||
*
|
||||
* 2026-09-22 修订：
|
||||
* 1) 层级拉开：标题 36rpx→40rpx(--font-size-xl)，与正文 32rpx / 卡片标题 28rpx
|
||||
* 形成「区块标题 > 卡片标题 > 正文 > 元信息」四级阶梯。
|
||||
* 旧值 36rpx 与卡片标题仅差 10rpx，层级读不出来。
|
||||
* 2) 右侧 action 是全站最容易被忽略的触摸目标：只有 26rpx 文字高（约 13px），
|
||||
* 远低于 44px 下限。改为 min-height:--tap-min，热区向上补白。
|
||||
* 3) action 文字色原为 --color-primary(#E96B6B)=3.10:1，不达标，改 -strong。
|
||||
*/
|
||||
.ui-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-3) var(--spacing-page-x);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
}
|
||||
.ui-section__left {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
display:flex;
|
||||
align-items:baseline;
|
||||
min-width:0;
|
||||
}
|
||||
.ui-section__title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
font-size:var(--font-size-xl);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
color:var(--color-text-strong);
|
||||
letter-spacing:var(--letter-spacing-tight);
|
||||
}
|
||||
.ui-section__subtitle {
|
||||
margin-left: var(--spacing-2);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-left:var(--spacing-2);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-section__action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-primary);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
flex:none;
|
||||
min-height:var(--tap-min);
|
||||
padding-left:var(--spacing-3);
|
||||
font-size:var(--font-size-sm);
|
||||
font-weight:var(--font-weight-medium);
|
||||
color:var(--color-primary-strong);
|
||||
transition:opacity var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.ui-section__action:active {
|
||||
opacity:var(--press-opacity);
|
||||
}
|
||||
.ui-section__arrow {
|
||||
margin-left: 4rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-left:4rpx;
|
||||
width:24rpx;
|
||||
height:24rpx;
|
||||
}
|
||||
|
||||
@@ -1,63 +1,63 @@
|
||||
.service-hero {
|
||||
position: relative;
|
||||
height: 300rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 32rpx 32rpx;
|
||||
background: #fff4f7;
|
||||
position:relative;
|
||||
height:300rpx;
|
||||
overflow:hidden;
|
||||
border-radius:0 0 32rpx 32rpx;
|
||||
background:var(--color-primary-light);
|
||||
}
|
||||
|
||||
.service-hero__image,
|
||||
.service-hero__veil {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position:absolute;
|
||||
inset:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.service-hero__veil {
|
||||
background: linear-gradient(90deg, rgba(255, 250, 252, 0.98) 0%, rgba(255, 250, 252, 0.82) 38%, rgba(255, 250, 252, 0.08) 70%);
|
||||
background:linear-gradient(90deg, rgba(255, 250, 252, 0.98) 0%, rgba(255, 250, 252, 0.82) 38%, rgba(255, 250, 252, 0.08) 70%);
|
||||
}
|
||||
|
||||
.service-hero--night .service-hero__veil {
|
||||
background: linear-gradient(90deg, rgba(18, 24, 83, 0.92) 0%, rgba(34, 31, 111, 0.64) 42%, rgba(34, 31, 111, 0.08) 72%);
|
||||
background:linear-gradient(90deg, rgba(18, 24, 83, 0.92) 0%, rgba(34, 31, 111, 0.64) 42%, rgba(34, 31, 111, 0.08) 72%);
|
||||
}
|
||||
|
||||
.service-hero__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 54%;
|
||||
height: 100%;
|
||||
padding: 0 36rpx;
|
||||
box-sizing: border-box;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
width:54%;
|
||||
height:100%;
|
||||
padding:0 36rpx;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.service-hero__eyebrow {
|
||||
margin-bottom: 10rpx;
|
||||
color: var(--color-primary);
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2rpx;
|
||||
margin-bottom:10rpx;
|
||||
color:var(--color-primary-strong);
|
||||
font-size:24rpx;
|
||||
font-weight:600;
|
||||
letter-spacing:2rpx;
|
||||
}
|
||||
|
||||
.service-hero__title {
|
||||
color: #24305e;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.28;
|
||||
color:var(--color-text-strong);
|
||||
font-size:40rpx;
|
||||
font-weight:700;
|
||||
line-height:1.28;
|
||||
}
|
||||
|
||||
.service-hero__subtitle {
|
||||
margin-top: 14rpx;
|
||||
color: #737c96;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.55;
|
||||
margin-top:14rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:24rpx;
|
||||
line-height:1.55;
|
||||
}
|
||||
|
||||
.service-hero--night .service-hero__eyebrow,
|
||||
.service-hero--night .service-hero__title,
|
||||
.service-hero--night .service-hero__subtitle {
|
||||
color: #ffffff;
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
.ui-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
padding:4rpx 14rpx;
|
||||
border-radius:var(--radius-full);
|
||||
font-size:var(--font-size-xs);
|
||||
font-weight:var(--font-weight-medium);
|
||||
line-height:1.4;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.ui-badge__dot {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
margin-right: 8rpx;
|
||||
width:8rpx;
|
||||
height:8rpx;
|
||||
border-radius:50%;
|
||||
background:currentColor;
|
||||
margin-right:8rpx;
|
||||
}
|
||||
.ui-badge__label {
|
||||
font-size: inherit;
|
||||
font-size:inherit;
|
||||
}
|
||||
.ui-badge--success {
|
||||
background: var(--color-success-light);
|
||||
color: var(--color-success);
|
||||
background:var(--color-success-light);
|
||||
color:var(--color-success-strong);
|
||||
}
|
||||
.ui-badge--warning {
|
||||
background: var(--color-warning-light);
|
||||
color: var(--color-warning);
|
||||
background:var(--color-warning-light);
|
||||
color:var(--color-warning-strong);
|
||||
}
|
||||
.ui-badge--danger {
|
||||
background: var(--color-danger-light);
|
||||
color: var(--color-danger);
|
||||
background:var(--color-danger-light);
|
||||
color:var(--color-danger-strong);
|
||||
}
|
||||
.ui-badge--info {
|
||||
background: var(--color-info-light);
|
||||
color: var(--color-info);
|
||||
background:var(--color-info-light);
|
||||
color:var(--color-info-strong);
|
||||
}
|
||||
.ui-badge--disabled {
|
||||
background: var(--color-bg-disabled);
|
||||
color: var(--color-text-disabled);
|
||||
background:var(--color-bg-disabled);
|
||||
color:var(--color-text-disabled);
|
||||
}
|
||||
|
||||
@@ -1,67 +1,67 @@
|
||||
.ui-success-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--color-bg-overlay);
|
||||
z-index: var(--z-modal);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 var(--spacing-6);
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
background:var(--color-bg-overlay);
|
||||
z-index:var(--z-modal);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding:0 var(--spacing-6);
|
||||
}
|
||||
.ui-success {
|
||||
width: 100%;
|
||||
max-width: 600rpx;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-6) var(--spacing-4) var(--spacing-4);
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-popup);
|
||||
animation: ui-success-in var(--motion-normal) var(--ease-standard);
|
||||
width:100%;
|
||||
max-width:600rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:var(--radius-lg);
|
||||
padding:var(--spacing-6) var(--spacing-4) var(--spacing-4);
|
||||
text-align:center;
|
||||
box-shadow:var(--shadow-popup);
|
||||
animation:ui-success-in var(--motion-normal) var(--ease-standard);
|
||||
}
|
||||
@keyframes ui-success-in {
|
||||
from { transform: scale(0.92); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
from { transform:scale(0.92); opacity:0; }
|
||||
to { transform:scale(1); opacity:1; }
|
||||
}
|
||||
.ui-success__heart {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin: 0 auto var(--spacing-3);
|
||||
background: var(--color-primary-light);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:120rpx;
|
||||
height:120rpx;
|
||||
margin:0 auto var(--spacing-3);
|
||||
background:var(--color-primary-light);
|
||||
border-radius:50%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
.ui-success__heart-icon {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
background: var(--color-primary);
|
||||
clip-path: polygon(50% 100%, 0 38%, 18% 18%, 50% 38%, 82% 18%, 100% 38%);
|
||||
width:56rpx;
|
||||
height:56rpx;
|
||||
background:var(--color-primary);
|
||||
clip-path:polygon(50% 100%, 0 38%, 18% 18%, 50% 38%, 82% 18%, 100% 38%);
|
||||
}
|
||||
.ui-success__title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size:var(--font-size-xl);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
color:var(--color-text-primary);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-success__content {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
line-height:var(--line-height-relaxed);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-success__expires {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-warning);
|
||||
margin-bottom: var(--spacing-4);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-warning-strong);
|
||||
margin-bottom:var(--spacing-4);
|
||||
}
|
||||
.ui-success__actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-2);
|
||||
display:flex;
|
||||
gap:var(--spacing-2);
|
||||
}
|
||||
.ui-success__btn {
|
||||
flex: 1;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
.ui-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.3;
|
||||
background: var(--color-bg-disabled);
|
||||
color: var(--color-text-secondary);
|
||||
border: 1rpx solid transparent;
|
||||
transition: all var(--motion-fast) var(--ease-standard);
|
||||
user-select: none;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
padding:10rpx 20rpx;
|
||||
border-radius:var(--radius-full);
|
||||
font-size:var(--font-size-sm);
|
||||
line-height:1.3;
|
||||
background:var(--color-bg-disabled);
|
||||
color:var(--color-text-secondary);
|
||||
border:1rpx solid transparent;
|
||||
transition:all var(--motion-fast) var(--ease-standard);
|
||||
user-select:none;
|
||||
}
|
||||
.ui-tag__label {
|
||||
font-size: inherit;
|
||||
font-size:inherit;
|
||||
}
|
||||
.ui-tag__close {
|
||||
margin-left: 8rpx;
|
||||
font-size: var(--font-size-md);
|
||||
line-height: 1;
|
||||
color: var(--color-text-tertiary);
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
margin-left:8rpx;
|
||||
font-size:var(--font-size-md);
|
||||
line-height:1;
|
||||
color:var(--color-text-tertiary);
|
||||
width:24rpx;
|
||||
min-height:var(--tap-min);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
min-width:var(--tap-min);}
|
||||
.ui-tag--default.ui-tag--selected {
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
background:var(--color-primary-light);
|
||||
color:var(--color-primary-strong);
|
||||
border-color:var(--color-primary);
|
||||
}
|
||||
.ui-tag--primary {
|
||||
background: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
.ui-tag--primary.ui-tag--selected {
|
||||
background: var(--color-primary-active);
|
||||
background:var(--color-primary-active);
|
||||
}
|
||||
.ui-tag--disabled {
|
||||
opacity: 0.55;
|
||||
opacity:0.55;
|
||||
}
|
||||
.ui-tag--hover {
|
||||
opacity: 0.85;
|
||||
transform: scale(0.97);
|
||||
opacity:0.85;
|
||||
transform:scale(0.97);
|
||||
}
|
||||
|
||||
@@ -1,56 +1,56 @@
|
||||
.ui-textarea {
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: 1rpx solid var(--color-border);
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:1rpx solid var(--color-border);
|
||||
}
|
||||
.ui-textarea__label {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-textarea__field-wrap {
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
border: 1rpx solid var(--color-border);
|
||||
background:var(--color-bg-card);
|
||||
border-radius:var(--radius-md);
|
||||
padding:var(--spacing-2) var(--spacing-3);
|
||||
border:1rpx solid var(--color-border);
|
||||
}
|
||||
.ui-textarea__field {
|
||||
width: 100%;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text-primary);
|
||||
line-height: var(--line-height-normal);
|
||||
min-height: 144rpx;
|
||||
width:100%;
|
||||
font-size:var(--font-size-base);
|
||||
color:var(--color-text-primary);
|
||||
line-height:var(--line-height-normal);
|
||||
min-height:144rpx;
|
||||
}
|
||||
.ui-textarea__placeholder {
|
||||
color: var(--color-text-placeholder);
|
||||
color:var(--color-text-placeholder);
|
||||
}
|
||||
.ui-textarea__footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-top: var(--spacing-1);
|
||||
min-height: 28rpx;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:flex-start;
|
||||
margin-top:var(--spacing-1);
|
||||
min-height:28rpx;
|
||||
}
|
||||
.ui-textarea__error {
|
||||
color: var(--color-danger);
|
||||
font-size: var(--font-size-xs);
|
||||
flex: 1;
|
||||
color:var(--color-danger-strong);
|
||||
font-size:var(--font-size-xs);
|
||||
flex:1;
|
||||
}
|
||||
.ui-textarea__hint {
|
||||
color: var(--color-warning);
|
||||
font-size: var(--font-size-xs);
|
||||
flex: 1;
|
||||
color:var(--color-warning-strong);
|
||||
font-size:var(--font-size-xs);
|
||||
flex:1;
|
||||
}
|
||||
.ui-textarea__count {
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: var(--font-size-xs);
|
||||
margin-left: var(--spacing-2);
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:var(--font-size-xs);
|
||||
margin-left:var(--spacing-2);
|
||||
}
|
||||
.ui-textarea--error .ui-textarea__field-wrap {
|
||||
border-color: var(--color-border-error);
|
||||
border-color:var(--color-border-error);
|
||||
}
|
||||
.ui-textarea--disabled .ui-textarea__field {
|
||||
color: var(--color-text-disabled);
|
||||
color:var(--color-text-disabled);
|
||||
}
|
||||
.ui-textarea--disabled .ui-textarea__field-wrap {
|
||||
background: var(--color-bg-disabled);
|
||||
background:var(--color-bg-disabled);
|
||||
}
|
||||
|
||||
@@ -1,50 +1,50 @@
|
||||
.ui-user-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-card);
|
||||
min-height: 148rpx;
|
||||
padding: 14rpx 18rpx;
|
||||
border-bottom: 1rpx solid #F0F1F6;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
background:var(--color-bg-card);
|
||||
min-height:148rpx;
|
||||
padding:14rpx 18rpx;
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
.ui-user-card__select {
|
||||
margin-right: var(--spacing-3);
|
||||
margin-right:var(--spacing-3);
|
||||
}
|
||||
.ui-user-card__checkbox {
|
||||
transform: scale(.82);
|
||||
transform:scale(.82);
|
||||
}
|
||||
.ui-user-card__body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 16rpx;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
margin-left:16rpx;
|
||||
}
|
||||
.ui-user-card__name-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: var(--spacing-1);
|
||||
display:flex;
|
||||
align-items:baseline;
|
||||
margin-bottom:var(--spacing-1);
|
||||
}
|
||||
.ui-user-card__name {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #222746;
|
||||
margin-right: var(--spacing-2);
|
||||
font-size:26rpx;
|
||||
font-weight:700;
|
||||
color:var(--color-text-strong);
|
||||
margin-right:var(--spacing-2);
|
||||
}
|
||||
.ui-user-card__age {
|
||||
font-size: 21rpx;
|
||||
color: #596079;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-secondary);
|
||||
}
|
||||
.ui-user-card__online {
|
||||
margin-left: auto;
|
||||
color: #39A987;
|
||||
font-size: 18rpx;
|
||||
margin-left:auto;
|
||||
color:var(--color-success-strong);
|
||||
font-size:24rpx;
|
||||
}
|
||||
.ui-user-card__meta {
|
||||
font-size: 20rpx;
|
||||
color: #767C94;
|
||||
line-height: 1.4;
|
||||
margin-top: 4rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:1.4;
|
||||
margin-top:4rpx;
|
||||
}
|
||||
.ui-user-card__actions {
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--spacing-2);
|
||||
flex-shrink:0;
|
||||
margin-left:var(--spacing-2);
|
||||
}
|
||||
.ui-user-card__tags{display:flex;gap:7rpx;margin-top:8rpx;overflow:hidden}.ui-user-card__tag{flex:none;padding:4rpx 9rpx;border-radius:12rpx;background:#F3EEFF;color:#7860AE;font-size:17rpx;white-space:nowrap}
|
||||
.ui-user-card__tags{display:flex;gap:7rpx;margin-top:8rpx;overflow:hidden}.ui-user-card__tag{flex:none;padding:4rpx 9rpx;border-radius:12rpx;background:var(--color-accent-purple-light);color:var(--color-accent-purple-strong);font-size:24rpx;white-space:nowrap}
|
||||
|
||||
Reference in New Issue
Block a user