351 lines
7.2 KiB
SCSS
351 lines
7.2 KiB
SCSS
// 主题
|
||
$theme-color: #ffe60f; // 品牌色/主操作按钮/按钮移入/文字链
|
||
$theme-minor-color: #fffbd2; // 品牌色/主操作按钮/按钮移入/文字链
|
||
// 主题色背景
|
||
$theme-color-bg: #D4E0F5;
|
||
|
||
// 辅助颜色
|
||
$success-color: #07cc89;
|
||
$success-color-1: #bdf6e3;
|
||
$success-color-2: #e7fef8;
|
||
$warning-color: #ffa200;
|
||
$warning-color-1: #ffd282;
|
||
$warning-color-2: #fff2dc;
|
||
$error-color: #f00a0a;
|
||
$error-color-1: #ffaa9c;
|
||
$error-color-2: #ffece9;
|
||
$aux-color: #5170fe;
|
||
$info-color: #999;
|
||
$label-color: #00c1f6;
|
||
$other-color: #b03afe;
|
||
|
||
$warning-fill: #fff3d4;
|
||
$aux-fill: #e7ebff;
|
||
|
||
// 文字
|
||
$font-color: #4b4b68; // 主要颜色
|
||
$font-tag-color: #4b4b68; // 标签
|
||
$font-main-color: #333; // 正文
|
||
$font-aux-color: #666; // 辅助色
|
||
$font-minor-color: #999; // 次要颜色
|
||
$font-hover-color: #ccc; // 提示文字
|
||
// $font-disabled-color: #291010; // 禁用文字
|
||
// $font-reverse-color: #fff; // rgba(#fff, 0.85); // 反差色
|
||
|
||
// $font-size-1: 20px;
|
||
// $font-size-1_h: 1.67vh;
|
||
// $font-size-2: 22px;
|
||
// $font-size-2_h: 1.83vh;
|
||
// $font-size-3: 24px;
|
||
// $font-size-3_h: 2vh;
|
||
// $font-size-4: 26px;
|
||
// $font-size-4_h: 2.17vh;
|
||
// $font-size-5: 28px;
|
||
// $font-size-5_h: 2.33vh;
|
||
// $font-size-6: 30px;
|
||
// $font-size-6_h: 2.5vh;
|
||
// $font-size-7: 32px;
|
||
// $font-size-7_h: 2.67vh;
|
||
$font-size-1: 1.67vh;
|
||
$font-size-2: 1.83vh;
|
||
$font-size-3: 2vh;
|
||
$font-size-4: 2.17vh;
|
||
$font-size-5: 2.33vh;
|
||
$font-size-6: 2.5vh;
|
||
$font-size-7: 2.67vh;
|
||
|
||
$font-cn: Oppo Sans;
|
||
$font-en: droid-serif;
|
||
$font-num: Oppo Sans;
|
||
$font-text: AlibabaHealth;
|
||
// $font-text: AlimamaShuHeiTi;
|
||
$font-special: AlimamaShuHeiTi;
|
||
|
||
$font-weight: 500;
|
||
|
||
// 书本的标签颜色
|
||
$book-tag-bg: #56d6f0;
|
||
$book-tag-color: #fff;
|
||
// 书架的颜色
|
||
$book-shelf-color: #6a8cf4;
|
||
|
||
// 分割色
|
||
$split-color: #e6e6e6;
|
||
// 边框色
|
||
$border-color: $split-color;
|
||
$border-input-color: #e8eaec;
|
||
|
||
// 背景色
|
||
$gradient: linear-gradient(180deg, #4de798 0%, #a2fb6e 100%); // 主渐变
|
||
$gray_bg: $theme-color-bg; // 灰系背景
|
||
$grey-gradient: $theme-color-bg; // 灰系背景
|
||
$white-gradient: $theme-color-bg; // 白系背景
|
||
$blue-gradient: #7CABFF;// 蓝色背景
|
||
|
||
$page-fill: #fafafa;
|
||
$bg-fill: #fff;
|
||
$bg-aux-fill: #f5f5f5;
|
||
$bg-theme-aux-fill: #fffdee;
|
||
$input-fill: #fafafa;
|
||
$menuItem-hover-fill: #f7f7f7;
|
||
$hover-fill: #f9f9f9;
|
||
$error-fill: $error-color;
|
||
$hover-theme-fill: #eed715;
|
||
$disabled-theme-fill: #fff387;
|
||
$bg-minor-theme-fill: #fffde9;
|
||
|
||
// 按钮
|
||
$btn-fill: #eeeeee; //#f5f5f5;
|
||
$btn-hover-fill: #e6e6e6;
|
||
$btn-disabled-fill: #dbdbdb; //#f5f5f5;
|
||
$btn-error-fill: #ffefec;
|
||
$btn-primary-fill: $theme-color;
|
||
$btn-primary-hover-fill: #f8e00e; //#eed715;
|
||
$btn-primary-disabled-fill: #fff387;
|
||
|
||
// 滚动条颜色
|
||
$scroll-color: #f5f5f5;
|
||
// 图标
|
||
$icon-color: #4d4d4d;
|
||
$icon-minor-color: #999;
|
||
$icon-aux-color: #ccc;
|
||
$icon-hover-fill: $hover-fill;
|
||
|
||
// 间隔
|
||
$space-1: 8px;
|
||
$space-1_h: 0.67vh;
|
||
$space-2: 16px;
|
||
$space-2_h: 1.33vh;
|
||
$space-3: 24px;
|
||
$space-3_h: 2vh;
|
||
$space-4: 32px;
|
||
$space-4_h: 2.67vh;
|
||
$space-5: 40px;
|
||
$space-5_h: 3.33vh;
|
||
$space-6: 48px;
|
||
$space-6_h: 3vh;
|
||
$space-7: 56px;
|
||
$space-7_h: 4.67vh;
|
||
$space-8: 64px;
|
||
$space-8_h: 5.33vh;
|
||
$space-70: 70px;
|
||
$space-70_h: 5.83vh;
|
||
|
||
// 圆角
|
||
// $radius-1: 4px;
|
||
$radius-1: 0.33vh;
|
||
// $radius-2: 8px;
|
||
$radius-2: 0.67vh;
|
||
// $radius-3: 12px;
|
||
$radius-3: 1vh;
|
||
// $radius-4: 16px;
|
||
$radius-4: 1.33vh;
|
||
// $radius-5: 20px;
|
||
$radius-5: 1.67vh;
|
||
// $radius-6: 24px;
|
||
$radius-6: 2vh;
|
||
// $radius-7: 28px;
|
||
$radius-7: 2.33vh;
|
||
|
||
// 单行省略
|
||
@mixin single_ellipsis {
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 多行省略
|
||
@mixin multiple_ellipsis($line: 3) {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: $line;
|
||
}
|
||
|
||
@mixin scroll_bar {
|
||
&::-webkit-scrollbar {
|
||
width: 4px;
|
||
height: 0.33vh;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
border-radius: 0.67vh;
|
||
background-color: $scroll-color;
|
||
}
|
||
|
||
&::-webkit-scrollbar-track {
|
||
border-radius: 0.67vh;
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
@mixin hidden_scroll {
|
||
overflow-y: auto;
|
||
scrollbar-width: none;
|
||
scrollbar-color: transparent transparent;
|
||
::-webkit-scrollbar {
|
||
width: 0;
|
||
}
|
||
}
|
||
|
||
// 字体描边
|
||
@mixin font-stroke($color: #424155, $stroke: 3px) {
|
||
position: relative;
|
||
z-index: 0;
|
||
&::after {
|
||
width: 100%;
|
||
content: attr(data-content);
|
||
-webkit-text-stroke: $stroke * 2 $color;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: -1;
|
||
}
|
||
}
|
||
|
||
// 渐变边框
|
||
@mixin gradient($color1, $color2) {
|
||
background: $color1, $color2; // 背景叠两层颜色，一层用于背景，一层用于边框
|
||
background-repeat: no-repeat;
|
||
background-origin: border-box;
|
||
background-clip: content-box, border-box; // 使用clip切出对应的背景应用场景
|
||
}
|
||
|
||
@mixin checkbox {
|
||
/* 修改复选框背景和形状 */
|
||
:deep(.el-checkbox__input) {
|
||
.el-checkbox__inner {
|
||
width: 3.33vh;
|
||
height: 3.33vh;
|
||
border-radius: 50% !important; /* 圆形样式 */
|
||
background: rgba(0, 0, 0, 0.65);
|
||
border: 0.25vh solid #a2fb6e;
|
||
|
||
&::after {
|
||
border-width: 0.25vh;
|
||
height: 1.25vh;
|
||
left: 0.92vh;
|
||
top: 0.42vh;
|
||
width: 0.67vh;
|
||
border-color: #a2fb6e;
|
||
}
|
||
|
||
&::before {
|
||
height: 0.67vh;
|
||
top: 1.08vh;
|
||
background-color: #a2fb6e;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 公共动画 */
|
||
.animate__breath {
|
||
animation-name: breath;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
.animate__slideInLeft {
|
||
animation-name: slideInLeft;
|
||
}
|
||
.animate__slideInRight {
|
||
animation-name: slideInRight;
|
||
}
|
||
.animate__animated {
|
||
animation-duration: 1s;
|
||
animation-fill-mode: both;
|
||
}
|
||
.animate__animated.animate__infinite {
|
||
animation-iteration-count: infinite;
|
||
}
|
||
.animate__shakeX {
|
||
animation: shake 0.6s linear forwards;
|
||
}
|
||
@keyframes shake {
|
||
0% {
|
||
transform: translateX(0px);
|
||
}
|
||
12% {
|
||
transform: translateX(7px);
|
||
}
|
||
25% {
|
||
transform: translateX(-7px);
|
||
}
|
||
50% {
|
||
transform: translateX(7px);
|
||
}
|
||
62% {
|
||
transform: translateX(-7px);
|
||
}
|
||
75% {
|
||
transform: translateX(7px);
|
||
}
|
||
100% {
|
||
transform: translateX(0px);
|
||
}
|
||
}
|
||
@keyframes breath {
|
||
0% {
|
||
transform: scale3d(1, 1, 1);
|
||
}
|
||
50% {
|
||
transform: scale3d(1.2, 1.2, 1.2);
|
||
}
|
||
100% {
|
||
transform: scale3d(1, 1, 1);
|
||
}
|
||
}
|
||
|
||
@keyframes slideInLeft {
|
||
0% {
|
||
transform: translate3d(-100%, 0, 0);
|
||
visibility: visible;
|
||
}
|
||
100% {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
|
||
@keyframes slideInRight {
|
||
0% {
|
||
transform: translate3d(100%, 0, 0);
|
||
visibility: visible;
|
||
}
|
||
100% {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
/* 骨架屏公用动画
|
||
$name：动画名
|
||
$color：渐变颜色
|
||
*/
|
||
@mixin animation($name, $color, $rotate: 120deg) {
|
||
animation-name: #{$name};
|
||
animation-duration: 1.6s;
|
||
animation-timing-function: ease;
|
||
animation-iteration-count: infinite;
|
||
// fcf37a
|
||
@keyframes #{$name} {
|
||
0% {
|
||
background-size: 300% 100%;
|
||
background-image: linear-gradient($rotate, transparent 40%, $color 50%, transparent 60%);
|
||
background-position: 100% 50%;
|
||
}
|
||
|
||
100% {
|
||
background-size: 300% 100%;
|
||
background-image: linear-gradient($rotate, transparent 40%, $color 50%, transparent 60%);
|
||
background-position: 0 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 背景
|
||
@mixin main_bg {
|
||
background: $theme-color-bg;
|
||
}
|
||
@mixin gray_bg {
|
||
background: $theme-color-bg;
|
||
}
|