482 lines
8.3 KiB
Plaintext
482 lines
8.3 KiB
Plaintext
/**app.wxss**/
|
|
/* 全局样式 */
|
|
|
|
/* 重置样式 */
|
|
page {
|
|
background-color: #F8F9FA;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
font-size: 28rpx;
|
|
line-height: 1.6;
|
|
color: #333333;
|
|
}
|
|
|
|
/* 容器样式 */
|
|
.container {
|
|
padding: 20rpx;
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.container-padding {
|
|
padding: 40rpx 30rpx;
|
|
}
|
|
|
|
/* 卡片样式 */
|
|
.card {
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
margin-bottom: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.card-footer {
|
|
padding: 20rpx 30rpx;
|
|
background: #FAFAFA;
|
|
border-top: 1rpx solid #F0F0F0;
|
|
}
|
|
|
|
/* 按钮样式 */
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24rpx 40rpx;
|
|
border-radius: 12rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn::after {
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.btn-primary:active {
|
|
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
|
|
}
|
|
|
|
.btn-success {
|
|
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.btn-warning {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #F8F9FA;
|
|
color: #6C757D;
|
|
border: 1rpx solid #DEE2E6;
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
border: 2rpx solid #667eea;
|
|
color: #667eea;
|
|
}
|
|
|
|
.btn-disabled {
|
|
background: #E9ECEF !important;
|
|
color: #ADB5BD !important;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.btn-large {
|
|
padding: 32rpx 60rpx;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.btn-small {
|
|
padding: 16rpx 24rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.btn-block {
|
|
width: 100%;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
/* 表单样式 */
|
|
.form-group {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: 12rpx;
|
|
font-size: 28rpx;
|
|
color: #495057;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 24rpx 20rpx;
|
|
border: 2rpx solid #E9ECEF;
|
|
border-radius: 12rpx;
|
|
font-size: 30rpx;
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: #667eea;
|
|
outline: none;
|
|
}
|
|
|
|
.form-input-error {
|
|
border-color: #DC3545;
|
|
}
|
|
|
|
.form-error {
|
|
color: #DC3545;
|
|
font-size: 24rpx;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
/* 文本样式 */
|
|
.text-primary { color: #667eea; }
|
|
.text-success { color: #28a745; }
|
|
.text-warning { color: #ffc107; }
|
|
.text-danger { color: #dc3545; }
|
|
.text-info { color: #17a2b8; }
|
|
.text-muted { color: #6c757d; }
|
|
.text-white { color: #ffffff; }
|
|
|
|
.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: 40rpx; }
|
|
.text-3xl { font-size: 48rpx; }
|
|
|
|
.text-center { text-align: center; }
|
|
.text-left { text-align: left; }
|
|
.text-right { text-align: right; }
|
|
|
|
.font-bold { font-weight: bold; }
|
|
.font-medium { font-weight: 500; }
|
|
.font-normal { font-weight: normal; }
|
|
|
|
/* 布局样式 */
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.flex-center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.flex-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flex-around {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.flex-start {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.flex-end {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.align-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.align-start {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.align-end {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* 间距样式 */
|
|
.m-0 { margin: 0; }
|
|
.m-1 { margin: 10rpx; }
|
|
.m-2 { margin: 20rpx; }
|
|
.m-3 { margin: 30rpx; }
|
|
.m-4 { margin: 40rpx; }
|
|
|
|
.mt-0 { margin-top: 0; }
|
|
.mt-1 { margin-top: 10rpx; }
|
|
.mt-2 { margin-top: 20rpx; }
|
|
.mt-3 { margin-top: 30rpx; }
|
|
.mt-4 { margin-top: 40rpx; }
|
|
|
|
.mb-0 { margin-bottom: 0; }
|
|
.mb-1 { margin-bottom: 10rpx; }
|
|
.mb-2 { margin-bottom: 20rpx; }
|
|
.mb-3 { margin-bottom: 30rpx; }
|
|
.mb-4 { margin-bottom: 40rpx; }
|
|
|
|
.ml-0 { margin-left: 0; }
|
|
.ml-1 { margin-left: 10rpx; }
|
|
.ml-2 { margin-left: 20rpx; }
|
|
.ml-3 { margin-left: 30rpx; }
|
|
.ml-4 { margin-left: 40rpx; }
|
|
|
|
.mr-0 { margin-right: 0; }
|
|
.mr-1 { margin-right: 10rpx; }
|
|
.mr-2 { margin-right: 20rpx; }
|
|
.mr-3 { margin-right: 30rpx; }
|
|
.mr-4 { margin-right: 40rpx; }
|
|
|
|
.p-0 { padding: 0; }
|
|
.p-1 { padding: 10rpx; }
|
|
.p-2 { padding: 20rpx; }
|
|
.p-3 { padding: 30rpx; }
|
|
.p-4 { padding: 40rpx; }
|
|
|
|
.pt-0 { padding-top: 0; }
|
|
.pt-1 { padding-top: 10rpx; }
|
|
.pt-2 { padding-top: 20rpx; }
|
|
.pt-3 { padding-top: 30rpx; }
|
|
.pt-4 { padding-top: 40rpx; }
|
|
|
|
.pb-0 { padding-bottom: 0; }
|
|
.pb-1 { padding-bottom: 10rpx; }
|
|
.pb-2 { padding-bottom: 20rpx; }
|
|
.pb-3 { padding-bottom: 30rpx; }
|
|
.pb-4 { padding-bottom: 40rpx; }
|
|
|
|
.pl-0 { padding-left: 0; }
|
|
.pl-1 { padding-left: 10rpx; }
|
|
.pl-2 { padding-left: 20rpx; }
|
|
.pl-3 { padding-left: 30rpx; }
|
|
.pl-4 { padding-left: 40rpx; }
|
|
|
|
.pr-0 { padding-right: 0; }
|
|
.pr-1 { padding-right: 10rpx; }
|
|
.pr-2 { padding-right: 20rpx; }
|
|
.pr-3 { padding-right: 30rpx; }
|
|
.pr-4 { padding-right: 40rpx; }
|
|
|
|
/* 会员等级样式 */
|
|
.member-free {
|
|
color: #6C757D;
|
|
}
|
|
|
|
.member-vip {
|
|
color: #FFD700;
|
|
}
|
|
|
|
.member-svip {
|
|
color: #FF6B35;
|
|
}
|
|
|
|
.member-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 20rpx;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.member-badge.free {
|
|
background: #F8F9FA;
|
|
color: #6C757D;
|
|
}
|
|
|
|
.member-badge.vip {
|
|
background: linear-gradient(135deg, #FFD700, #FFA500);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.member-badge.svip {
|
|
background: linear-gradient(135deg, #FF6B35, #F7931E);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* 状态样式 */
|
|
.status-active {
|
|
color: #28A745;
|
|
}
|
|
|
|
.status-expired {
|
|
color: #DC3545;
|
|
}
|
|
|
|
.status-suspended {
|
|
color: #FFC107;
|
|
}
|
|
|
|
/* 加载样式 */
|
|
.loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40rpx;
|
|
color: #6C757D;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border: 4rpx solid #F3F3F3;
|
|
border-top: 4rpx solid #667eea;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* 空状态样式 */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 80rpx 40rpx;
|
|
color: #6C757D;
|
|
}
|
|
|
|
.empty-icon {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin-bottom: 20rpx;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.empty-desc {
|
|
font-size: 24rpx;
|
|
color: #ADB5BD;
|
|
}
|
|
|
|
/* 分割线 */
|
|
.divider {
|
|
height: 1rpx;
|
|
background: #E9ECEF;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.divider-thick {
|
|
height: 20rpx;
|
|
background: #F8F9FA;
|
|
margin: 30rpx -30rpx;
|
|
}
|
|
|
|
/* 阴影效果 */
|
|
.shadow-sm {
|
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.shadow-lg {
|
|
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* 圆角 */
|
|
.rounded-sm { border-radius: 4rpx; }
|
|
.rounded { border-radius: 8rpx; }
|
|
.rounded-lg { border-radius: 12rpx; }
|
|
.rounded-xl { border-radius: 16rpx; }
|
|
.rounded-full { border-radius: 50%; }
|
|
|
|
/* 背景色 */
|
|
.bg-white { background-color: #FFFFFF; }
|
|
.bg-gray { background-color: #F8F9FA; }
|
|
.bg-primary { background-color: #667eea; }
|
|
.bg-success { background-color: #28a745; }
|
|
.bg-warning { background-color: #ffc107; }
|
|
.bg-danger { background-color: #dc3545; }
|
|
|
|
/* 边框 */
|
|
.border { border: 1rpx solid #E9ECEF; }
|
|
.border-top { border-top: 1rpx solid #E9ECEF; }
|
|
.border-bottom { border-bottom: 1rpx solid #E9ECEF; }
|
|
.border-left { border-left: 1rpx solid #E9ECEF; }
|
|
.border-right { border-right: 1rpx solid #E9ECEF; }
|
|
|
|
/* 隐藏/显示 */
|
|
.hidden { display: none !important; }
|
|
.visible { display: block !important; }
|
|
|
|
/* 透明度 */
|
|
.opacity-0 { opacity: 0; }
|
|
.opacity-25 { opacity: 0.25; }
|
|
.opacity-50 { opacity: 0.5; }
|
|
.opacity-75 { opacity: 0.75; }
|
|
.opacity-100 { opacity: 1; }
|
|
|
|
/* 动画 */
|
|
.fade-in {
|
|
animation: fadeIn 0.3s ease-in;
|
|
}
|
|
|
|
.slide-up {
|
|
animation: slideUp 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
} |