287 lines
6.8 KiB
Plaintext
287 lines
6.8 KiB
Plaintext
/**app.wxss**/
|
|
/* ==================== 导入企业级设计系统 ==================== */
|
|
@import './styles/design-tokens.wxss';
|
|
@import './styles/premium-components.wxss';
|
|
@import './styles/premium-animations.wxss';
|
|
|
|
/* ==================== 全局基础样式 ==================== */
|
|
page {
|
|
background-color: var(--bg-page);
|
|
font-family: var(--font-family-base);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-base);
|
|
line-height: var(--line-height-normal);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.container {
|
|
min-height: 100vh;
|
|
padding-bottom: calc(var(--safe-area-inset-bottom) + 120rpx);
|
|
}
|
|
|
|
/* ==================== 工具类 ==================== */
|
|
|
|
/* 文本对齐 */
|
|
.text-left { text-align: left; }
|
|
.text-center { text-align: center; }
|
|
.text-right { text-align: right; }
|
|
|
|
/* 文本粗细 */
|
|
.font-thin { font-weight: var(--font-weight-thin); }
|
|
.font-light { font-weight: var(--font-weight-light); }
|
|
.font-normal { font-weight: var(--font-weight-regular); }
|
|
.font-medium { font-weight: var(--font-weight-medium); }
|
|
.font-semibold { font-weight: var(--font-weight-semibold); }
|
|
.font-bold { font-weight: var(--font-weight-bold); }
|
|
|
|
/* 文本颜色 */
|
|
.text-primary { color: var(--text-primary); }
|
|
.text-secondary { color: var(--text-secondary); }
|
|
.text-tertiary { color: var(--text-tertiary); }
|
|
.text-brand { color: var(--brand-primary); }
|
|
.text-success { color: var(--color-success); }
|
|
.text-warning { color: var(--color-warning); }
|
|
.text-error { color: var(--color-error); }
|
|
|
|
/* 布局工具 */
|
|
.flex { display: flex; }
|
|
.flex-col { flex-direction: column; }
|
|
.flex-row { flex-direction: row; }
|
|
.items-center { align-items: center; }
|
|
.items-start { align-items: flex-start; }
|
|
.items-end { align-items: flex-end; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.justify-around { justify-content: space-around; }
|
|
.justify-start { justify-content: flex-start; }
|
|
.justify-end { justify-content: flex-end; }
|
|
.flex-1 { flex: 1; }
|
|
.flex-wrap { flex-wrap: wrap; }
|
|
|
|
/* 间距工具 */
|
|
.gap-1 { gap: var(--space-1); }
|
|
.gap-2 { gap: var(--space-2); }
|
|
.gap-3 { gap: var(--space-3); }
|
|
.gap-4 { gap: var(--space-4); }
|
|
.gap-6 { gap: var(--space-6); }
|
|
.gap-8 { gap: var(--space-8); }
|
|
|
|
/* 内边距 */
|
|
.p-0 { padding: 0; }
|
|
.p-2 { padding: var(--space-2); }
|
|
.p-4 { padding: var(--space-4); }
|
|
.p-6 { padding: var(--space-6); }
|
|
.p-8 { padding: var(--space-8); }
|
|
|
|
/* 外边距 */
|
|
.m-0 { margin: 0; }
|
|
.m-2 { margin: var(--space-2); }
|
|
.m-4 { margin: var(--space-4); }
|
|
.m-6 { margin: var(--space-6); }
|
|
.m-8 { margin: var(--space-8); }
|
|
|
|
/* 圆角 */
|
|
.rounded-sm { border-radius: var(--radius-sm); }
|
|
.rounded { border-radius: var(--radius-base); }
|
|
.rounded-lg { border-radius: var(--radius-lg); }
|
|
.rounded-xl { border-radius: var(--radius-xl); }
|
|
.rounded-2xl { border-radius: var(--radius-2xl); }
|
|
.rounded-full { border-radius: var(--radius-full); }
|
|
|
|
/* 阴影 */
|
|
.shadow-sm { box-shadow: var(--shadow-sm); }
|
|
.shadow { box-shadow: var(--shadow-base); }
|
|
.shadow-md { box-shadow: var(--shadow-md); }
|
|
.shadow-lg { box-shadow: var(--shadow-lg); }
|
|
.shadow-xl { box-shadow: var(--shadow-xl); }
|
|
|
|
/* 宽高 */
|
|
.w-full { width: 100%; }
|
|
.h-full { height: 100%; }
|
|
|
|
/* 隐藏 */
|
|
.hidden { display: none; }
|
|
.invisible { visibility: hidden; }
|
|
|
|
/* 溢出 */
|
|
.overflow-hidden { overflow: hidden; }
|
|
.overflow-scroll { overflow: scroll; }
|
|
.overflow-auto { overflow: auto; }
|
|
|
|
/* 位置 */
|
|
.relative { position: relative; }
|
|
.absolute { position: absolute; }
|
|
.fixed { position: fixed; }
|
|
|
|
/* 点击效果 */
|
|
.clickable {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
.clickable:active {
|
|
opacity: 0.7;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* ==================== 页面通用样式 ==================== */
|
|
|
|
/* 页面容器 */
|
|
.page-container {
|
|
min-height: 100vh;
|
|
background: var(--bg-page);
|
|
}
|
|
|
|
/* 内容区域 */
|
|
.page-content {
|
|
padding: var(--space-6);
|
|
padding-bottom: calc(var(--safe-area-inset-bottom) + 150rpx);
|
|
}
|
|
|
|
/* 固定顶部导航 */
|
|
.fixed-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: var(--z-index-sticky);
|
|
background: var(--glass-white);
|
|
backdrop-filter: blur(var(--blur-lg));
|
|
border-bottom: 1rpx solid var(--border-light);
|
|
}
|
|
|
|
/* 悬浮按钮 */
|
|
.fab {
|
|
position: fixed;
|
|
bottom: calc(var(--safe-area-inset-bottom) + 150rpx);
|
|
right: var(--space-8);
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--gradient-purple-dream);
|
|
border-radius: var(--radius-full);
|
|
box-shadow: var(--shadow-primary), var(--shadow-xl);
|
|
color: var(--text-inverse);
|
|
font-size: 48rpx;
|
|
z-index: var(--z-index-fixed);
|
|
transition: var(--transition-base);
|
|
}
|
|
|
|
.fab:active {
|
|
transform: scale(0.9);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* ==================== 滚动优化 ==================== */
|
|
|
|
.smooth-scroll {
|
|
-webkit-overflow-scrolling: touch;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* 隐藏滚动条 */
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.hide-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* ==================== 性能优化 ==================== */
|
|
|
|
/* GPU加速 */
|
|
.gpu-accelerated {
|
|
transform: translateZ(0);
|
|
will-change: transform;
|
|
}
|
|
|
|
/* 避免重绘 */
|
|
.avoid-repaint {
|
|
will-change: opacity, transform;
|
|
}
|
|
|
|
/* ==================== 图片优化 ==================== */
|
|
|
|
image {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.image-cover {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.image-contain {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.image-rounded {
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ==================== 文本溢出处理 ==================== */
|
|
|
|
.ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.line-clamp-1 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.line-clamp-3 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
/* ==================== 安全区域适配 ==================== */
|
|
|
|
.safe-area-top {
|
|
padding-top: var(--safe-area-inset-top);
|
|
}
|
|
|
|
.safe-area-bottom {
|
|
padding-bottom: var(--safe-area-inset-bottom);
|
|
}
|
|
|
|
.safe-area-right {
|
|
padding-right: var(--safe-area-inset-right);
|
|
}
|
|
|
|
/* ==================== 保持向后兼容的别名 ==================== */
|
|
.gradient-primary { background: var(--gradient-purple-dream); }
|
|
.gradient-secondary { background: var(--gradient-sunset-pink); }
|
|
.gradient-success { background: var(--gradient-ocean-blue); }
|
|
.gradient-warning { background: var(--gradient-sunset-pink); }
|
|
|