page {
|
/* color */
|
/* 主色 */
|
--main-color: #d10202;
|
/* page背景色 */
|
--bg-color: #f0f2f5;
|
/* 主色拓展 */
|
--red-1: #ffeae6;
|
/* Color Palette */
|
--black: #000;
|
--white: #fff;
|
--gray-1: #f7f8fa;
|
--gray-2: #f2f3f5;
|
--gray-3: #ebedf0;
|
--gray-4: #dcdee0;
|
--gray-5: #c8c9cc;
|
--gray-6: #969799;
|
--gray-7: #646566;
|
--gray-8: #323233;
|
--red: #ee0a24;
|
--blue: #1989fa;
|
--orange: #ff976a;
|
--orange-dark: #ed6a0c;
|
--orange-light: #fffbe8;
|
--green: #07c160;
|
/* font-color */
|
--text-color: rgba(0, 0, 0, 0.85);
|
--second-text-color: rgba(0, 0, 0, 0.65);
|
|
/* font */
|
--font-size-main: 28rpx;
|
--line-height-main: 44rpx;
|
--font-size-xs: 20rpx;
|
--font-size-sm: 24rpx;
|
--font-size-md: 28rpx;
|
--font-size-lg: 32rpx;
|
--font-weight-bold: 600;
|
--line-height-xs: 28rpx;
|
--line-height-sm: 36rpx;
|
--line-height-md: 44rpx;
|
--line-height-lg: 44rpx;
|
--base-font-family: system-ui;
|
|
/* Component Colors */
|
--active-color: var(--gray-2);
|
--active-opacity: 0.7;
|
--disabled-opacity: 0.5;
|
--background-color: var(--gray-1);
|
--background-color-light: #fafafa;
|
--text-link-color: #576b95;
|
|
/* Animation */
|
--animation-duration-base: 0.3s;
|
--animation-duration-fast: 0.2s;
|
|
/* padding */
|
--padding-my: 20rpx;
|
--padding-base: 8rpx;
|
--padding-xs: 16rpx;
|
--padding-sm: 24rpx;
|
--padding-md: 32rpx;
|
--padding-lg: 48rpx;
|
--padding-xl: 64rpx;
|
|
/* Border */
|
--border-color: rgba(0, 0, 0, 0.1);
|
--border-radius-card: 20rpx;
|
--border-radius-card-sm: 10rpx;
|
--border-width-base: 2rpx;
|
--border-radius-sm: 4rpx;
|
--border-radius-md: 8rpx;
|
--border-radius-lg: 16rpx;
|
|
/* Button */
|
--button-mini-height: 44rpx;
|
--button-mini-min-width: 100rpx;
|
--button-mini-font-size: var(--font-size-xs);
|
--button-small-height: 60rpx;
|
--button-small-font-size: var(--font-size-sm);
|
--button-small-min-width: 120rpx;
|
--button-normal-font-size: var(--font-size-md);
|
--button-large-height: 100rpx;
|
--button-default-color: var(--text-color);
|
--button-default-height: 80rpx;
|
--button-default-font-size: var(--font-size-lg);
|
--button-default-background-color: var(--white);
|
--button-default-border-color: var(--border-color);
|
--button-primary-color: var(--white);
|
--button-primary-background-color: var(--main-color);
|
--button-primary-border-color: var(--main-color);
|
--button-info-color: var(--white);
|
--button-info-background-color: var(--blue);
|
--button-info-border-color: var(--blue);
|
--button-danger-color: var(--white);
|
--button-danger-background-color: var(--red);
|
--button-danger-border-color: var(--red);
|
--button-warning-color: var(--white);
|
--button-warning-background-color: var(--orange);
|
--button-warning-border-color: var(--orange);
|
--button-line-height: 44rpx;
|
--button-border-width: 2rpx;
|
--button-border-radius: var(--border-radius-md);
|
--button-round-border-radius: var(--border-radius-max);
|
--button-plain-background-color: var(--white);
|
--button-disabled-opacity: var(--disabled-opacity);
|
|
/* Tabbar */
|
--tabbar-height: 92rpx;
|
--tabbar-background-color: var(--white);
|
|
/* TabbarItem */
|
--tabbar-item-font-size: var(--font-size-sm);
|
--tabbar-item-text-color: var(--text-color);
|
--tabbar-item-active-color: var(--main-color);
|
--tabbar-item-line-height: 1;
|
--tabbar-item-icon-size: 36rpx;
|
--tabbar-item-margin-bottom: 8rpx;
|
|
/* Tab */
|
--tab-text-color: var(--gray-7);
|
--tab-active-text-color: var(--text-color);
|
--tab-disabled-text-color: var(--gray-5);
|
--tab-font-size: var(--font-size-md);
|
|
/* Tabs */
|
--tabs-default-color: var(--main-color);
|
--tabs-line-height: 48rpx;
|
--tabs-card-height: 60rpx;
|
--tabs-nav-background-color: var(--white);
|
--tabs-bottom-bar-height: 4rpx;
|
--tabs-bottom-bar-color: var(--tabs-default-color);
|
|
/* Field */
|
--field-label-color: var(--gray-7);
|
--field-input-text-color: var(--text-color);
|
--field-input-error-text-color: var(--red);
|
--field-input-disabled-text-color: var(--gray-5);
|
--field-placeholder-text-color: rgba(0, 0, 0, 0.5);
|
--field-icon-size: 32rpx;
|
--field-clear-icon-size: 32rpx;
|
--field-clear-icon-color: var(--gray-5);
|
--field-icon-container-color: var(--gray-6);
|
--field-error-message-color: var(--red);
|
--field-error-message-text-font-size: var(--font-size-sm);
|
--field-text-area-min-height: 36rpx;
|
--field-word-limit-color: var(--gray-7);
|
--field-word-limit-font-size: var(--font-size-sm);
|
--field-word-limit-line-height: 32rpx;
|
--field-word-num-full-color: var(--red);
|
--field-disabled-text-color: var(--gray-5);
|
|
/* Cell */
|
--cell-font-size: var(--font-size-md);
|
--cell-line-height: var(--line-height-md);
|
--cell-vertical-padding: var(--padding-sm);
|
--cell-horizontal-padding: var(--padding-md);
|
--cell-text-color: var(--text-color);
|
--cell-background-color: var(--white);
|
--cell-border-color: var(--border-color);
|
--cell-active-color: var(--active-color);
|
--cell-required-color: var(--red);
|
--cell-label-color: var(--gray-6);
|
--cell-label-font-size: var(--font-size-sm);
|
--cell-label-line-height: 36rpx;
|
--cell-label-margin-top: 6rpx;
|
--cell-value-color: var(--gray-6);
|
--cell-icon-size: 32rpx;
|
--cell-right-icon-color: var(--gray-6);
|
--cell-large-vertical-padding: var(--padding-sm);
|
--cell-large-title-font-size: var(--font-size-lg);
|
--cell-large-value-font-size: var(--font-size-lg);
|
--cell-large-label-font-size: var(--font-size-md);
|
|
/* CellGroup */
|
--cell-group-background-color: var(--white);
|
--cell-group-title-color: var(--gray-6);
|
--cell-group-title-padding: var(--padding-md) var(--padding-md) var(--padding-xs);
|
--cell-group-title-font-size: var(--font-size-md);
|
--cell-group-title-line-height: 32rpx;
|
--cell-group-inset-padding: 0 var(--padding-my);
|
--cell-group-inset-border-radius: var(--border-radius-lg);
|
--cell-group-inset-title-padding: var(--padding-md) var(--padding-md) var(--padding-xs) var(--padding-xl);
|
|
/* Checkbox */
|
--checkbox-size: 40rpx;
|
--checkbox-border-color: var(--gray-5);
|
--checkbox-transition-duration: 0.2s;
|
--checkbox-label-margin: 20rpx;
|
--checkbox-label-color: --text-color;
|
--checkbox-checked-icon-color: var(--main-color);
|
--checkbox-disabled-icon-color: var(--gray-5);
|
--checkbox-disabled-label-color: var(--gray-5);
|
--checkbox-disabled-background-color: var(--border-color);
|
|
/* Popup */
|
--popup-background-color: var(--white);
|
--popup-round-border-radius: 20rpx;
|
--popup-close-icon-size: 36rpx;
|
--popup-close-icon-color: var(--black);
|
--popup-close-icon-margin: 32rpx;
|
--popup-close-icon-z-index: 1;
|
|
/* Search */
|
--search-background-color: #ffffff;
|
--search-padding: 16rpx var(--padding-my);
|
--search-input-height: 68rpx;
|
--search-label-padding: 0 10rpx;
|
--search-label-color: var(--text-color);
|
--search-label-font-size: var(--font-size-md);
|
--search-left-icon-color: var(--gray-6);
|
--search-action-padding: 0 var(--padding-xs);
|
--search-action-text-color: var(--text-color);
|
--search-action-font-size: var(--font-size-md);
|
|
/* Toast */
|
--toast-max-width: 90%;
|
--toast-font-size: 28rpx;
|
--toast-text-color: var(--white);
|
--toast-line-height: 40rpx;
|
--toast-border-radius: var(--border-radius-lg);
|
--toast-background-color: var(--second-text-color);
|
--toast-icon-size: 72rpx;
|
--toast-text-min-width: 192rpx;
|
--toast-text-padding: var(--padding-xs) var(--padding-sm);
|
--toast-default-padding: var(--padding-md);
|
--toast-default-width: 176rpx;
|
--toast-default-min-height: 176rpx;
|
|
/* Radio */
|
--radio-size: 40rpx;
|
--radio-border-color: var(--gray-5);
|
--radio-transition-duration: 0.2s;
|
--radio-label-margin: 20rpx;
|
--radio-label-color: var(--text-color);
|
--radio-checked-icon-color: var(--main-color);
|
--radio-disabled-icon-color: var(--gray-5);
|
--radio-disabled-label-color: var(--gray-5);
|
--radio-disabled-background-color: var(--border-color);
|
|
/* Switch */
|
--switch-width: 2em;
|
--switch-height: 1em;
|
--switch-node-size: 1em;
|
--switch-node-z-index: 1;
|
--switch-node-background-color: var(--white);
|
--switch-node-box-shadow: 0 6rpx 2rpx 0 rgba(0, 0, 0, 0.05), 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.1), 0 6rpx 6rpx 0 rgba(0, 0, 0, 0.05);
|
--switch-background-color: var(--white);
|
--switch-on-background-color: var(--main-color);
|
--switch-transition-duration: 0.3s;
|
--switch-disabled-opacity: 0.4;
|
--switch-border: 2rpx solid rgba(0, 0, 0, 0.1);
|
}
|
