feat:完整布局封装

This commit is contained in:
MTrun
2022-01-06 13:45:51 +08:00
parent 1afc06b079
commit df1fccffa7
17 changed files with 236 additions and 15 deletions
+5
View File
@@ -5,6 +5,11 @@ $dark: (
color: $--color-text-4,
//背景
background-color: $--color-dark-bg-1,
background-color1: $--color-dark-bg-1,
background-color2: $--color-dark-bg-2,
background-color3: $--color-dark-bg-3,
background-color4: $--color-dark-bg-4,
background-color5: $--color-dark-bg-5,
//渐变背景
background-image:
linear-gradient(120deg, $--color-dark-bg-1 0%, $--color-dark-bg-1 100%),
+10 -5
View File
@@ -4,20 +4,25 @@ $light: (
// 文字颜色
color: $--color-text,
// aside 背景
aside-background_color: $--color-light-fill-1,
aside-background-color: $--color-light-bg-1,
//背景
background_color: $--color-light-fill-3,
background-color: $--color-light-bg-3,
background-color1: $--color-light-bg-1,
background-color2: $--color-light-bg-2,
background-color3: $--color-light-bg-3,
background-color4: $--color-light-bg-4,
background-color5: $--color-light-bg-5,
//渐变背景
background-image:
linear-gradient(120deg, $--color-light-fill 0%, $--color-light-fill 100%),
linear-gradient(120deg, $--color-light-bg 0%, $--color-light-bg 100%),
// 斑点背景
background-point:
(
linear-gradient($--color-light-fill-1 14px, transparent 0),
linear-gradient($--color-light-bg-1 14px, transparent 0),
linear-gradient(90deg, transparent 14px, $--color-dark-bg-5 0)
),
//毛玻璃
filter-color: $--filter-color-login-light,
// hover 边框颜色
hover-border-color: $--color-light-fill-1
hover-border-color: $--color-light-bg-1
);
+5
View File
@@ -22,6 +22,11 @@
transform: translate(-50%, -50%);
}
// cursor 小手
.go-cursor-pointer {
cursor: pointer;
}
// 毛玻璃
.go-background-filter {
backdrop-filter: $--filter-blur-base;
+7 -5
View File
@@ -11,11 +11,13 @@ $--color-text-3: #c9cdd4;
$--color-text-4: #f2f3f5;
// 白色
$--color-light-fill: #fff;
$--color-light-fill-1: #fafafc;
$--color-light-fill-2: #f2f3f5;
$--color-light-fill-3: #e5e6eb;
$--color-light-fill-4: #c9cdd4;
$--color-light-bg: #fff;
$--color-light-bg-1: #fafafc;
$--color-light-bg-2: #f2f3f5;
$--color-light-bg-3: #e5e6eb;
$--color-light-bg-4: #c9cdd4;
$--color-light-bg-5: #bebebe;
$--color-dark-border: #efeff5;
// 黑色
$--color-dark-black: #000;