first commit
This commit is contained in:
Blizzard
@@ -0,0 +1,239 @@
|
||||
/* ============================================
|
||||
早安电台 — 全局样式
|
||||
品牌主色: #FF9D42 背景: #F6F6F6
|
||||
============================================ */
|
||||
|
||||
/* TDesign 主题变量覆盖 */
|
||||
page {
|
||||
/* 品牌色 */
|
||||
--td-brand-color: #FF9D42;
|
||||
--td-brand-color-light: rgba(255, 157, 66, 0.1);
|
||||
--td-brand-color-focus: rgba(255, 157, 66, 0.2);
|
||||
--td-brand-color-active: #E88A35;
|
||||
--td-brand-color-disabled: rgba(255, 157, 66, 0.4);
|
||||
|
||||
/* 成功色（森林绿） */
|
||||
--td-success-color: #2D5A27;
|
||||
--td-success-color-light: rgba(45, 90, 39, 0.1);
|
||||
|
||||
/* 警告色 */
|
||||
--td-warning-color: #E34D59;
|
||||
|
||||
/* 圆角 */
|
||||
--td-radius-default: 16rpx;
|
||||
--td-radius-large: 32rpx;
|
||||
--td-radius-extra-large: 40rpx;
|
||||
--td-radius-round: 999rpx;
|
||||
|
||||
/* 自定义品牌变量 */
|
||||
--color-primary: #FF9D42;
|
||||
--color-primary-light: rgba(255, 157, 66, 0.08);
|
||||
--color-primary-bg: rgba(255, 157, 66, 0.12);
|
||||
--color-success: #2D5A27;
|
||||
--color-warning: #E34D59;
|
||||
--color-bg-page: #F6F6F6;
|
||||
--color-bg-card: #FFFFFF;
|
||||
--color-bg-container: #FEFEFE;
|
||||
--color-text-primary: #333333;
|
||||
--color-text-secondary: #666666;
|
||||
--color-text-placeholder: #999999;
|
||||
--color-text-disabled: #CCCCCC;
|
||||
--color-border: #EEEEEE;
|
||||
--color-border-light: #F5F5F5;
|
||||
|
||||
/* 页面背景 */
|
||||
background-color: var(--color-bg-page);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||
'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
font-size: 28rpx;
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.6;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ========== 通用工具类 ========== */
|
||||
|
||||
/* Flex */
|
||||
.flex { display: flex; }
|
||||
.flex-col { display: flex; flex-direction: column; }
|
||||
.flex-row { display: flex; flex-direction: row; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-shrink-0 { flex-shrink: 0; }
|
||||
.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-end { justify-content: flex-end; }
|
||||
.self-center { align-self: center; }
|
||||
|
||||
/* 间距 */
|
||||
.gap-sm { gap: 16rpx; }
|
||||
.gap-md { gap: 24rpx; }
|
||||
.gap-lg { gap: 32rpx; }
|
||||
|
||||
/* 文字 */
|
||||
.text-center { text-align: center; }
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-bold { font-weight: 700; }
|
||||
.text-medium { font-weight: 500; }
|
||||
.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: 44rpx; }
|
||||
.text-3xl { font-size: 56rpx; }
|
||||
.text-primary { color: var(--color-primary); }
|
||||
.text-secondary { color: var(--color-text-secondary); }
|
||||
.text-placeholder { color: var(--color-text-placeholder); }
|
||||
.text-white { color: #FFFFFF; }
|
||||
|
||||
/* 单行省略 */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ========== 卡片 ========== */
|
||||
.card {
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--td-radius-extra-large);
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
|
||||
border: 1rpx solid var(--color-border-light);
|
||||
}
|
||||
|
||||
/* ========== 按钮 ========== */
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: var(--td-radius-round);
|
||||
padding: 20rpx 48rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.btn-primary::after { border: none; }
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--color-primary);
|
||||
border: 2rpx solid var(--color-primary);
|
||||
border-radius: var(--td-radius-round);
|
||||
padding: 20rpx 48rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
border: none;
|
||||
border-radius: var(--td-radius-round);
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-ghost::after { border: none; }
|
||||
|
||||
/* 按钮点击反馈 */
|
||||
.btn-primary:active,
|
||||
.btn-outline:active,
|
||||
.btn-ghost:active,
|
||||
.tap-active:active {
|
||||
opacity: 0.85;
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* ========== 安全区 ========== */
|
||||
.safe-area-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
|
||||
/* ========== 全局隐藏滚动条 ========== */
|
||||
page {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 隐藏所有 webkit 滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 通用滚动容器滚动条隐藏 */
|
||||
page,
|
||||
view,
|
||||
scroll-view {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE / Edge */
|
||||
}
|
||||
|
||||
page::-webkit-scrollbar,
|
||||
view::-webkit-scrollbar,
|
||||
scroll-view::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
/* ========== 动画 ========== */
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20rpx); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: scaleY(0.4); }
|
||||
50% { transform: scaleY(1); }
|
||||
}
|
||||
|
||||
.anim-rotate {
|
||||
animation: rotate 10s linear infinite;
|
||||
}
|
||||
.anim-rotate-paused {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.anim-fade-in {
|
||||
animation: fadeIn 0.5s ease-out forwards;
|
||||
}
|
||||
.anim-pulse {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
Reference in New Issue
Block a user