112 lines
2.3 KiB
Plaintext
112 lines
2.3 KiB
Plaintext
/**app.wxss**/
|
||
.container {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 200rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* ============================================
|
||
* 设计 Token 全局变量（基于 design-tokens.json）
|
||
* ============================================ */
|
||
page {
|
||
/* 颜色 */
|
||
--color-primary: #0052d9;
|
||
--color-primary-light: #ecf2fe;
|
||
--color-success: #00a870;
|
||
--color-warning: #ed7b2f;
|
||
--color-error: #e34d59;
|
||
--color-gray-1: #f3f3f3;
|
||
--color-gray-2: #eeeeee;
|
||
--color-gray-3: #e7e7e7;
|
||
--color-gray-4: #dcdcdc;
|
||
--color-gray-5: #c5c5c5;
|
||
--color-gray-6: #a6a6a6;
|
||
--color-gray-7: #8b8b8b;
|
||
--color-gray-8: #777777;
|
||
--color-gray-9: #5e5e5e;
|
||
--color-gray-10: #4b4b4b;
|
||
--color-gray-11: #393939;
|
||
--color-gray-12: #2c2c2c;
|
||
--color-gray-13: #242424;
|
||
|
||
/* 字号 */
|
||
--font-xs: 24rpx;
|
||
--font-sm: 28rpx;
|
||
--font-base: 32rpx;
|
||
--font-lg: 36rpx;
|
||
--font-xl: 40rpx;
|
||
--font-2xl: 48rpx;
|
||
|
||
/* 圆角 */
|
||
--radius-sm: 8rpx;
|
||
--radius-md: 16rpx;
|
||
--radius-lg: 24rpx;
|
||
--radius-xl: 32rpx;
|
||
|
||
/* 阴影 */
|
||
--shadow-lg: 0 8rpx 32rpx rgba(0,0,0,0.06);
|
||
--shadow-xl: 0 16rpx 48rpx rgba(0,0,0,0.08);
|
||
|
||
/* 间距基准 */
|
||
--spacing-base: 8rpx;
|
||
|
||
/* TDesign 主题覆盖 */
|
||
--td-brand-color: #0052d9;
|
||
--td-brand-color-light: #ecf2fe;
|
||
--td-success-color: #00a870;
|
||
--td-warning-color: #ed7b2f;
|
||
--td-error-color: #e34d59;
|
||
|
||
/* 页面默认样式 */
|
||
background-color: var(--color-gray-1);
|
||
font-size: var(--font-base);
|
||
color: var(--color-gray-13);
|
||
}
|
||
|
||
/* ============================================
|
||
* 通用工具类
|
||
* ============================================ */
|
||
|
||
/* 安全区适配 */
|
||
.safe-area-bottom {
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
.safe-area-top {
|
||
padding-top: env(safe-area-inset-top);
|
||
}
|
||
|
||
/* 文本省略 */
|
||
.text-ellipsis {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Flex 布局 */
|
||
.flex-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
.flex-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.flex-between {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.flex-center {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.flex-1 {
|
||
flex: 1;
|
||
}
|