154 lines
3.3 KiB
Plaintext
154 lines
3.3 KiB
Plaintext
/* app.wxss — 全局样式 */
|
|
page {
|
|
background-color: #FFFBF5;
|
|
color: #1A1A1A;
|
|
font-family: 'PingFang SC', 'Noto Sans SC', 'Hiragino Sans GB', system-ui, -apple-system, sans-serif;
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* 中文衬线字体 */
|
|
.font-chinese {
|
|
font-family: 'Noto Serif SC', 'STSong', 'SimSun', 'Songti SC', serif;
|
|
}
|
|
|
|
/* 卡片基础样式 */
|
|
.card {
|
|
background-color: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
border: 1rpx solid #E8D5C4;
|
|
padding: 24rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
/* 徽章 */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 999rpx;
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
}
|
|
.badge-lucky {
|
|
background-color: #FEF2F2;
|
|
color: #C41E3A;
|
|
}
|
|
.badge-unlucky {
|
|
background-color: #F1F5F9;
|
|
color: #546E7A;
|
|
}
|
|
.badge-outline {
|
|
border: 1rpx solid #E8D5C4;
|
|
color: #6B5E53;
|
|
background: transparent;
|
|
}
|
|
.badge-festival {
|
|
background-color: #C41E3A;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* 按钮 */
|
|
.btn-primary {
|
|
background-color: #C41E3A;
|
|
color: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 16rpx 32rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
border: none;
|
|
}
|
|
.btn-primary:active {
|
|
background-color: #8B1A2B;
|
|
}
|
|
.btn-outline {
|
|
background-color: transparent;
|
|
border: 2rpx solid #E8D5C4;
|
|
color: #1A1A1A;
|
|
border-radius: 16rpx;
|
|
padding: 16rpx 32rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.btn-ghost {
|
|
background-color: transparent;
|
|
color: #1A1A1A;
|
|
border-radius: 16rpx;
|
|
padding: 16rpx 32rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
/* 文本颜色 */
|
|
.text-primary { color: #C41E3A; }
|
|
.text-secondary { color: #6B5E53; }
|
|
.text-muted { color: #9E8E7E; }
|
|
.text-lucky { color: #C41E3A; }
|
|
.text-unlucky { color: #546E7A; }
|
|
|
|
/* 背景色 */
|
|
.bg-card { background-color: #FFFFFF; }
|
|
.bg-page { background-color: #FFFBF5; }
|
|
|
|
/* 边框 */
|
|
.border { border: 1rpx solid #E8D5C4; }
|
|
.border-b { border-bottom: 1rpx solid #E8D5C4; }
|
|
|
|
/* 布局 */
|
|
.flex { display: flex; }
|
|
.flex-col { flex-direction: column; }
|
|
.items-center { align-items: center; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.flex-1 { flex: 1; }
|
|
.text-center { text-align: center; }
|
|
|
|
/* 间距 */
|
|
.mt-1 { margin-top: 8rpx; }
|
|
.mt-2 { margin-top: 16rpx; }
|
|
.mb-1 { margin-bottom: 8rpx; }
|
|
.mb-2 { margin-bottom: 16rpx; }
|
|
.p-2 { padding: 16rpx; }
|
|
.p-3 { padding: 24rpx; }
|
|
|
|
/* 圆角 */
|
|
.rounded { border-radius: 16rpx; }
|
|
.rounded-lg { border-radius: 24rpx; }
|
|
.rounded-full { border-radius: 999rpx; }
|
|
|
|
/* 字号 */
|
|
.text-xs { font-size: 20rpx; }
|
|
.text-sm { font-size: 24rpx; }
|
|
.text-base { font-size: 28rpx; }
|
|
.text-lg { font-size: 32rpx; }
|
|
.text-xl { font-size: 36rpx; }
|
|
.text-2xl { font-size: 48rpx; }
|
|
.text-3xl { font-size: 60rpx; }
|
|
|
|
/* 字重 */
|
|
.font-medium { font-weight: 500; }
|
|
.font-bold { font-weight: 700; }
|
|
|
|
/* 网格 */
|
|
.grid { display: grid; }
|
|
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
|
|
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
|
|
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
|
|
.grid-cols-7 { grid-template-columns: repeat(7, 1fr); }
|
|
.gap-1 { gap: 8rpx; }
|
|
.gap-2 { gap: 16rpx; }
|
|
.gap-3 { gap: 24rpx; }
|
|
|
|
/* 隐藏 */
|
|
.hidden { display: none; }
|
|
|
|
/* 滚动 */
|
|
.scroll-x {
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* 安全区域 */
|
|
.safe-area-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|