196 lines
4.2 KiB
Plaintext
196 lines
4.2 KiB
Plaintext
/* app.wxss — 全局样式 + 设计 token（迁移自原型） */
|
||
page {
|
||
/* ===== 颜色 ===== */
|
||
--bg: #F2EDE6;
|
||
--surface: #FBF8F3;
|
||
--surface-2: #EDE6DC;
|
||
--ink: #2E2A24;
|
||
--ink-2: #6E665B;
|
||
--ink-3: #A89F92;
|
||
--accent: #E8A04B;
|
||
--accent-deep: #C77E2E;
|
||
--accent-soft: #F7E5CC;
|
||
--success: #6B8E5A;
|
||
--success-soft: #E2EBD9;
|
||
--warn: #D98A4E;
|
||
--danger: #C25A4E;
|
||
--danger-soft: #F2DDD8;
|
||
--line: rgba(46, 42, 36, 0.10);
|
||
--line-2: rgba(46, 42, 36, 0.16);
|
||
|
||
/* ===== 圆角 / 阴影 ===== */
|
||
--radius: 36rpx;
|
||
--radius-sm: 24rpx;
|
||
--radius-pill: 999rpx;
|
||
--shadow: 0 2rpx 4rpx rgba(46,42,36,0.04), 0 16rpx 48rpx rgba(46,42,36,0.06);
|
||
--font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||
--icon-size: 40rpx;
|
||
--icon-size-sm: 36rpx;
|
||
--tab-icon-size: 44rpx;
|
||
--fab-icon-size: 52rpx;
|
||
--form-label-size: 24rpx;
|
||
--input-height: 84rpx;
|
||
--input-font-size: 26rpx;
|
||
--input-radius: 20rpx;
|
||
--input-padding-y: 20rpx;
|
||
--input-padding-x: 24rpx;
|
||
--chip-font-size: 25rpx;
|
||
--chip-padding-y: 12rpx;
|
||
--chip-padding-x: 24rpx;
|
||
--btn-height: 92rpx;
|
||
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
font-family: var(--font);
|
||
-webkit-font-smoothing: antialiased;
|
||
line-height: 1.5;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
view, text, button, input, textarea, image, scroll-view, picker { box-sizing: border-box; }
|
||
view, text, button, input, textarea, picker { font-family: var(--font); }
|
||
button, input, textarea { line-height: 1.5; }
|
||
|
||
/* ===== 通用工具类 ===== */
|
||
.muted { color: var(--ink-2); }
|
||
.tiny { font-size: 22rpx; }
|
||
.center { text-align: center; }
|
||
.row { display: flex; align-items: center; }
|
||
|
||
.card {
|
||
background: var(--surface);
|
||
border-radius: var(--radius);
|
||
border: 1rpx solid var(--line);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.field {
|
||
padding: 22rpx 32rpx;
|
||
border-bottom: 1rpx solid var(--line);
|
||
}
|
||
|
||
.field.last { border-bottom: none; }
|
||
|
||
.flabel {
|
||
font-size: var(--form-label-size);
|
||
color: var(--ink-2);
|
||
margin-bottom: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.finput,
|
||
.fpicker,
|
||
.fpick,
|
||
.note-input,
|
||
.input-fake {
|
||
min-height: var(--input-height);
|
||
background: var(--surface-2);
|
||
border-radius: var(--input-radius);
|
||
padding: var(--input-padding-y) var(--input-padding-x);
|
||
font-size: var(--input-font-size);
|
||
color: var(--ink);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
input.finput,
|
||
input.note-input {
|
||
height: var(--input-height);
|
||
}
|
||
|
||
.placeholder,
|
||
.fpicker.placeholder,
|
||
.input-fake.placeholder {
|
||
color: var(--ink-3);
|
||
}
|
||
|
||
.chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.chip {
|
||
font-size: var(--chip-font-size);
|
||
padding: var(--chip-padding-y) var(--chip-padding-x);
|
||
border-radius: var(--radius-pill);
|
||
border: 1rpx solid var(--line-2);
|
||
background: var(--surface-2);
|
||
color: var(--ink);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.chip.sel {
|
||
background: var(--accent-soft);
|
||
border-color: var(--accent);
|
||
color: var(--accent-deep);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.chev,
|
||
.wr-ico,
|
||
.tab-ico,
|
||
.fab-ico,
|
||
.medal,
|
||
.ach-medal,
|
||
.photo-add,
|
||
.logo,
|
||
.paw,
|
||
.avatar,
|
||
.user-avatar,
|
||
.dog-avatar,
|
||
.hero-avatar,
|
||
.sel-avatar,
|
||
.sel-check,
|
||
.close {
|
||
font-family: var(--font);
|
||
line-height: 1;
|
||
}
|
||
|
||
.ui-ico {
|
||
width: var(--icon-size);
|
||
height: var(--icon-size);
|
||
font-size: var(--icon-size);
|
||
line-height: 1;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.btn-ico {
|
||
width: var(--icon-size-sm);
|
||
height: var(--icon-size-sm);
|
||
font-size: var(--icon-size-sm);
|
||
line-height: 1;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ===== 基础按钮 ===== */
|
||
.btn {
|
||
height: var(--btn-height);
|
||
border-radius: var(--radius-pill);
|
||
border: 1rpx solid var(--line-2);
|
||
background: var(--surface);
|
||
color: var(--ink);
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
font-family: var(--font);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
width: 100%;
|
||
line-height: 1;
|
||
transition: transform .2s, opacity .2s, background .2s;
|
||
}
|
||
.btn::after { border: none; }
|
||
.btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
|
||
.btn.danger { color: var(--danger); border-color: var(--danger-soft); }
|
||
.btn.ghost { background: transparent; }
|
||
.btn:active { transform: scale(0.98); opacity: 0.96; }
|