204 lines
4.6 KiB
Plaintext
204 lines
4.6 KiB
Plaintext
/**app.wxss —— 全局设计令牌与通用样式**/
|
|
@import "styles/icons.wxss";
|
|
|
|
page {
|
|
--color-primary: #007AFF;
|
|
--color-primary-aux: #5856D6;
|
|
--color-pink: #FF2D55;
|
|
--color-bg: #F2F2F7;
|
|
--color-card: #FFFFFF;
|
|
--color-hairline: #E5E5EA;
|
|
--color-text-main: #000000;
|
|
--color-text-secondary: #8E8E93;
|
|
--color-text-tertiary: #C7C7CC;
|
|
--color-green: #34C759;
|
|
--color-orange: #FF9500;
|
|
--color-red: #FF3B30;
|
|
--color-yellow: #FFCC00;
|
|
|
|
background: var(--color-bg);
|
|
color: var(--color-text-main);
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
|
font-size: 30rpx;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ===== 布局 ===== */
|
|
.page {
|
|
min-height: 100vh;
|
|
background: var(--color-bg);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ===== 卡片 ===== */
|
|
.card {
|
|
background: var(--color-card);
|
|
border-radius: 32rpx;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ===== 发丝分隔线 ===== */
|
|
.hairline {
|
|
border-bottom: 1rpx solid var(--color-hairline);
|
|
}
|
|
.hairline-t {
|
|
border-top: 1rpx solid var(--color-hairline);
|
|
}
|
|
|
|
/* ===== 文本 ===== */
|
|
.t-main { color: var(--color-text-main); }
|
|
.t-sub { color: var(--color-text-secondary); }
|
|
.t-weak { color: var(--color-text-tertiary); }
|
|
.t-primary { color: var(--color-primary); }
|
|
.t-danger { color: var(--color-red); }
|
|
.t-green { color: var(--color-green); }
|
|
.t-orange { color: var(--color-orange); }
|
|
|
|
.fs-title { font-size: 68rpx; font-weight: 700; }
|
|
.fs-h1 { font-size: 40rpx; font-weight: 700; }
|
|
.fs-h2 { font-size: 34rpx; font-weight: 600; }
|
|
.fs-body { font-size: 30rpx; }
|
|
.fs-caption { font-size: 26rpx; }
|
|
.fs-note { font-size: 22rpx; }
|
|
|
|
.num { font-variant-numeric: tabular-nums; }
|
|
|
|
/* ===== 按钮 ===== */
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
border-radius: 24rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
}
|
|
.btn-primary {
|
|
height: 96rpx;
|
|
background: var(--color-primary);
|
|
color: #fff;
|
|
}
|
|
.btn-primary.disabled {
|
|
opacity: 0.4;
|
|
}
|
|
.btn-primary:active { opacity: 0.7; }
|
|
|
|
.btn-secondary {
|
|
height: 88rpx;
|
|
background: var(--color-bg);
|
|
color: var(--color-text-main);
|
|
}
|
|
.btn-secondary:active { opacity: 0.7; }
|
|
|
|
.btn-outline {
|
|
height: 88rpx;
|
|
border: 1rpx solid var(--color-primary);
|
|
color: var(--color-primary);
|
|
background: #fff;
|
|
font-weight: 500;
|
|
}
|
|
.btn-outline:active { opacity: 0.7; }
|
|
|
|
.btn-danger-text {
|
|
color: var(--color-red);
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ===== 输入框 ===== */
|
|
.input {
|
|
height: 88rpx;
|
|
background: var(--color-bg);
|
|
border-radius: 20rpx;
|
|
padding: 0 24rpx;
|
|
font-size: 28rpx;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
.textarea {
|
|
background: var(--color-bg);
|
|
border-radius: 20rpx;
|
|
padding: 20rpx 24rpx;
|
|
font-size: 28rpx;
|
|
width: 100%;
|
|
min-height: 160rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ===== 胶囊标签 ===== */
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 44rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 22rpx;
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
box-sizing: border-box;
|
|
}
|
|
.tag-blue { background: rgba(0, 122, 255, 0.1); color: #007AFF; }
|
|
.tag-gray { background: #F2F2F7; color: #8E8E93; }
|
|
.tag-green { background: rgba(52, 199, 89, 0.12); color: #34C759; }
|
|
.tag-orange { background: rgba(255, 149, 0, 0.12); color: #FF9500; }
|
|
.tag-red { background: rgba(255, 59, 48, 0.12); color: #FF3B30; }
|
|
.tag-indigo { background: rgba(88, 86, 214, 0.12); color: #5856D6; }
|
|
|
|
/* ===== 骨架屏 ===== */
|
|
.skeleton {
|
|
background: linear-gradient(90deg, #F2F2F7 25%, #E5E5EA 37%, #F2F2F7 63%);
|
|
background-size: 400% 100%;
|
|
animation: skeleton-loading 1.4s ease infinite;
|
|
}
|
|
@keyframes skeleton-loading {
|
|
0% { background-position: 100% 50%; }
|
|
100% { background-position: 0 50%; }
|
|
}
|
|
|
|
/* ===== 悬浮按钮 ===== */
|
|
.fab {
|
|
position: fixed;
|
|
right: 32rpx;
|
|
bottom: 180rpx;
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
border-radius: 50%;
|
|
background: var(--color-primary);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.35);
|
|
z-index: 20;
|
|
}
|
|
.fab:active { opacity: 0.8; }
|
|
|
|
/* ===== 底部安全区 ===== */
|
|
.safe-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
/* ===== 通用列表行 ===== */
|
|
.list-row {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 88rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.list-row:active { background: #F2F2F7; }
|
|
|
|
/* ===== 1:1 方图占位 ===== */
|
|
.square {
|
|
position: relative;
|
|
width: 100%;
|
|
background: #F2F2F7;
|
|
border-radius: 24rpx;
|
|
overflow: hidden;
|
|
}
|
|
.square::after {
|
|
content: '';
|
|
display: block;
|
|
padding-bottom: 100%;
|
|
}
|