shishengliang/log-lottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: new

Browse Source
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
2024-01-05 00:42:01 +08:00
parent df02b23b2d
commit f66a1d2ae9
45 changed files with 4175 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/style/_blue_theme.scss
View File

@@ -1,22 +0,0 @@
$theme-color: #2e1f78;
$important-color: #02e5f6;
$font-color: #fbfbfb;
$light-color: #fd5913;
$normal-color: #15115d;
$dark-card-color: #fbfbfb;
$blue_theme: (
theme-bg-color: $theme-color,
font-color: $font-color,
font-color-second: darken($font-color, 20%),
light-bg-color: $light-color,
normal-color: $normal-color,
header-bg-color: lighten($theme-color, 10%),
header-bg-color-hover: lighten($theme-color, 20%),
shawdow-color: darken($theme-color, 5%),
shawdow-color-hover: darken($theme-color, 15%),
border-color: lighten($theme-color, 20%),
important-color: lighten($important-color, 20%),
important-bg-color: transparentize($important-color, 0.9),
dark-card-color: $dark-card-color,
);

22
src/style/_dark_theme.scss
View File

@@ -1,22 +0,0 @@
$theme-color: #1e1f25;
$important-color: #ff864d;
$font-color: #fbfbfb;
$light-color: #00e6f6;
$normal-color: #183561;
$dark-card-color: #fbfbfb;
$dark_theme: (
theme-bg-color: $theme-color,
font-color: $font-color,
font-color-second: darken($font-color, 20%),
light-bg-color: $light-color,
normal-color: $normal-color,
header-bg-color: lighten($theme-color, 10%),
header-bg-color-hover: lighten($theme-color, 20%),
shawdow-color: darken($theme-color, 5%),
shawdow-color-hover: darken($theme-color, 15%),
border-color: lighten($theme-color, 20%),
important-color: lighten($important-color, 20%),
important-bg-color: transparentize($important-color, 0.9),
dark-card-color: $dark-card-color,
);

22
src/style/_default.scss
View File

@@ -1,22 +0,0 @@
$theme-color: #fbfbfb;
$important-color: #6a47bb;
$font-color: #030303;
$light-color: #409eff;
$normal-color: #fbfbfb;
$dark-card-color: #fbfbfb;
$default: (
theme-bg-color: $theme-color,
font-color: $font-color,
font-color-second: darken($font-color, 20%),
light-bg-color: $light-color,
normal-color: $normal-color,
header-bg-color: lighten($theme-color, 10%),
header-bg-color-hover: lighten($theme-color, 20%),
shawdow-color: darken($theme-color, 5%),
shawdow-color-hover: darken($theme-color, 15%),
border-color: lighten($theme-color, 20%),
important-color: lighten($important-color, 20%),
important-bg-color: transparentize($important-color, 0.9),
dark-card-color: $dark-card-color,
);

22
src/style/_purple_theme.scss
View File

@@ -1,22 +0,0 @@
$theme-color: #0a142e;
$important-color: #8c5ff6;
$font-color: #fbfbfb;
$light-color: #c678fd;
$normal-color: #0a142e;
$dark-card-color: #fbfbfb;
$purple_theme: (
theme-bg-color: $theme-color,
font-color: $font-color,
font-color-second: darken($font-color, 20%),
light-bg-color: $light-color,
normal-color: $normal-color,
header-bg-color: lighten($theme-color, 10%),
header-bg-color-hover: lighten($theme-color, 20%),
shawdow-color: darken($theme-color, 5%),
shawdow-color-hover: darken($theme-color, 15%),
border-color: lighten($theme-color, 20%),
important-color: lighten($important-color, 20%),
important-bg-color: transparentize($important-color, 0.9),
dark-card-color: $dark-card-color,
);

1
src/style/changeTheme.ts
View File

@@ -1 +0,0 @@
import './global.scss';

14
src/style/global.module.scss
View File

@@ -1,14 +0,0 @@
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
body {
// background: $theme-bg-color;
}

3
src/style/global.scss
View File

@@ -1,5 +1,4 @@
// global.scss
@import "./theme/index.scss";
// variables.scss
$primary-color: #fe4e5e;
$background-color: #fefefe;
@@ -9,3 +8,5 @@ $padding: 124px;
// backgroundColor: $background-color;
// padding: $padding;
// }
/*end*/

50
src/style/index.scss
View File

@@ -1,50 +0,0 @@
@import "./default.scss"; //默认主题颜色
@import "./dark_theme.scss"; // 红色主题颜色
@import "./blue_theme.scss"; // 灰色主题颜色
@import "./purple_theme.scss"; // 灰色主题颜色
//生成对应元素的主题样式代码
//主题参数
$themes: (
default: $default,
blue_theme: $blue_theme,
dark_theme: $dark_theme,
purple_theme: $purple_theme,
);
// 生成body的主题样式
@mixin themeify {
@each $themes-key, $themes-map in $themes {
$themes-map: $themes-map !global;
&[data-theme="#{$themes-key}"] {
@content;
}
}
}
// 生成子元素样式
@mixin themeChildify {
@each $themes-key, $themes-map in $themes {
$themes-map: $themes-map !global;
[data-theme="#{$themes-key}"] & {
@content;
}
}
}
// 获取主题对应的theme-color
@function getThemeColor($key) {
$currentTheme: map-get($themes, $key);
@return map-get($currentTheme, "theme-bg-color");
}
@function themed($key) {
@if map-get($themes-map, $key) {
@return map-get($themes-map, $key);
} @else {
@return $key;
}
}
// 随机数颜色
@function themedRandom($key) {
@if map-get($themes-map, $key) {
@return map-get($themes-map, $key);
} @else {
@return $key;
}
} ;

41
src/style/style.scss Normal file
View File

@@ -0,0 +1,41 @@
.element-card {
width: 140px;
height: 200px;
cursor: default;
text-align: center;
border: 1px solid rgba(127, 255, 255, 0.25);
box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
&:hover {
border: 1px solid rgba(127, 255, 255, 0.75);
box-shadow: 0 0 12px rgba(0, 255, 255, 0.75);
}
.card-id {
position: absolute;
top: 20px;
right: 20px;
font-size: 12px;
color: rgba(127, 255, 255, 0.75);
}
.card-name {
position: absolute;
top: 40px;
left: 0px;
right: 0;
font-size: 30px;
font-weight: bold;
color: rgba(255, 255, 255, 0.75);
text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
}
.card-detail {
position: absolute;
left: 0;
right: 0;
bottom: 15px;
font-size: 12px;
color: rgba(127, 255, 255, 0.75);
}
}

22
src/style/theme/_blue_theme.scss
View File

@@ -1,22 +0,0 @@
$theme-color: #2e1f78;
$important-color: #02e5f6;
$font-color: #fbfbfb;
$light-color: #fd5913;
$normal-color: #15115d;
$dark-card-color: #fbfbfb;
$blue_theme: (
theme-bg-color: $theme-color,
font-color: $font-color,
font-color-second: darken($font-color, 20%),
light-bg-color: $light-color,
normal-color: $normal-color,
header-bg-color: lighten($theme-color, 10%),
header-bg-color-hover: lighten($theme-color, 20%),
shawdow-color: darken($theme-color, 5%),
shawdow-color-hover: darken($theme-color, 15%),
border-color: lighten($theme-color, 20%),
important-color: lighten($important-color, 20%),
important-bg-color: transparentize($important-color, 0.9),
dark-card-color: $dark-card-color,
);

22
src/style/theme/_dark_theme.scss
View File

@@ -1,22 +0,0 @@
$theme-color: #1e1f25;
$important-color: #ff864d;
$font-color: #fbfbfb;
$light-color: #00e6f6;
$normal-color: #183561;
$dark-card-color: #fbfbfb;
$dark_theme: (
theme-bg-color: $theme-color,
font-color: $font-color,
font-color-second: darken($font-color, 20%),
light-bg-color: $light-color,
normal-color: $normal-color,
header-bg-color: lighten($theme-color, 10%),
header-bg-color-hover: lighten($theme-color, 20%),
shawdow-color: darken($theme-color, 5%),
shawdow-color-hover: darken($theme-color, 15%),
border-color: lighten($theme-color, 20%),
important-color: lighten($important-color, 20%),
important-bg-color: transparentize($important-color, 0.9),
dark-card-color: $dark-card-color,
);

22
src/style/theme/_default.scss
View File

@@ -1,22 +0,0 @@
$theme-color: #fbfbfb;
$important-color: #6a47bb;
$font-color: #030303;
$light-color: #409eff;
$normal-color: #fbfbfb;
$dark-card-color: #fbfbfb;
$default: (
theme-bg-color: $theme-color,
font-color: $font-color,
font-color-second: darken($font-color, 20%),
light-bg-color: $light-color,
normal-color: $normal-color,
header-bg-color: lighten($theme-color, 10%),
header-bg-color-hover: lighten($theme-color, 20%),
shawdow-color: darken($theme-color, 5%),
shawdow-color-hover: darken($theme-color, 15%),
border-color: lighten($theme-color, 20%),
important-color: lighten($important-color, 20%),
important-bg-color: transparentize($important-color, 0.9),
dark-card-color: $dark-card-color,
);

22
src/style/theme/_purple_theme.scss
View File

@@ -1,22 +0,0 @@
$theme-color: #0a142e;
$important-color: #8c5ff6;
$font-color: #fbfbfb;
$light-color: #c678fd;
$normal-color: #0a142e;
$dark-card-color: #fbfbfb;
$purple_theme: (
theme-bg-color: $theme-color,
font-color: $font-color,
font-color-second: darken($font-color, 20%),
light-bg-color: $light-color,
normal-color: $normal-color,
header-bg-color: lighten($theme-color, 10%),
header-bg-color-hover: lighten($theme-color, 20%),
shawdow-color: darken($theme-color, 5%),
shawdow-color-hover: darken($theme-color, 15%),
border-color: lighten($theme-color, 20%),
important-color: lighten($important-color, 20%),
important-bg-color: transparentize($important-color, 0.9),
dark-card-color: $dark-card-color,
);

50
src/style/theme/index.scss
View File

@@ -1,50 +0,0 @@
@import "./default.scss"; //默认主题颜色
@import "./dark_theme.scss"; // 红色主题颜色
@import "./blue_theme.scss"; // 灰色主题颜色
@import "./purple_theme.scss"; // 灰色主题颜色
//生成对应元素的主题样式代码
//主题参数
$themes: (
default: $default,
blue_theme: $blue_theme,
dark_theme: $dark_theme,
purple_theme: $purple_theme,
);
// 生成body的主题样式
@mixin themeify {
@each $themes-key, $themes-map in $themes {
$themes-map: $themes-map !global;
&[data-theme="#{$themes-key}"] {
@content;
}
}
}
// 生成子元素样式
@mixin themeChildify {
@each $themes-key, $themes-map in $themes {
$themes-map: $themes-map !global;
[data-theme="#{$themes-key}"] & {
@content;
}
}
}
// 获取主题对应的theme-color
@function getThemeColor($key) {
$currentTheme: map-get($themes, $key);
@return map-get($currentTheme, "theme-bg-color");
}
@function themed($key) {
@if map-get($themes-map, $key) {
@return map-get($themes-map, $key);
} @else {
@return $key;
}
}
// 随机数颜色
@function themedRandom($key) {
@if map-get($themes-map, $key) {
@return map-get($themes-map, $key);
} @else {
@return $key;
}
} ;