0.0.0
This commit is contained in:
195
miniprogram/app.wxss
Normal file
195
miniprogram/app.wxss
Normal file
@@ -0,0 +1,195 @@
|
||||
/* 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; }
|
||||
Reference in New Issue
Block a user