xiaoxian521
3 years ago
19 changed files with 513 additions and 368 deletions
-
1package.json
-
9pnpm-lock.yaml
-
318src/layout/components/tag/index.scss
-
455src/layout/components/tag/index.vue
-
3src/layout/theme/auroraGreen-vars.scss
-
27src/layout/theme/default-vars.scss
-
3src/layout/theme/dusk-vars.scss
-
2src/layout/theme/light-vars.scss
-
3src/layout/theme/mingQing-vars.scss
-
3src/layout/theme/pink-vars.scss
-
3src/layout/theme/saucePurple-vars.scss
-
3src/layout/theme/volcano-vars.scss
-
3src/layout/theme/yellow-vars.scss
-
6src/layout/types.ts
-
2src/plugins/fontawesome/index.ts
-
6src/style/element-plus.scss
-
4src/style/index.scss
-
28src/style/sidebar.scss
-
2src/style/transition.scss
@ -0,0 +1,318 @@ |
|||||
|
@keyframes scheduleInWidth { |
||||
|
from { |
||||
|
width: 0; |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes scheduleOutWidth { |
||||
|
from { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
width: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@-webkit-keyframes rotate { |
||||
|
from { |
||||
|
-webkit-transform: rotate(0deg); |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
-webkit-transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@-moz-keyframes rotate { |
||||
|
from { |
||||
|
-moz-transform: rotate(0deg); |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
-moz-transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@-o-keyframes rotate { |
||||
|
from { |
||||
|
-o-transform: rotate(0deg); |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
-o-transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes rotate { |
||||
|
from { |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tags-view { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
box-shadow: 0 0 1px #888; |
||||
|
color: var(--el-text-color-regular); |
||||
|
background: #fff; |
||||
|
|
||||
|
.scroll-item { |
||||
|
border-radius: 3px 3px 0 0; |
||||
|
padding: 2px 6px; |
||||
|
display: inline-block; |
||||
|
position: relative; |
||||
|
margin-right: 4px; |
||||
|
height: 28px; |
||||
|
line-height: 25px; |
||||
|
transition: all 0.4s; |
||||
|
|
||||
|
.el-icon-close { |
||||
|
font-size: 10px; |
||||
|
color: #1890ff; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
border-radius: 50%; |
||||
|
color: #fff; |
||||
|
background: #b4bccc; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.is-closable:not(:first-child) { |
||||
|
&:hover { |
||||
|
padding-right: 8px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
color: #666; |
||||
|
padding: 0 4px 0 4px; |
||||
|
} |
||||
|
|
||||
|
.scroll-container { |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
padding: 5px 0; |
||||
|
white-space: nowrap; |
||||
|
position: relative; |
||||
|
|
||||
|
.tab { |
||||
|
position: relative; |
||||
|
float: left; |
||||
|
list-style: none; |
||||
|
overflow: visible; |
||||
|
white-space: nowrap; |
||||
|
transition: transform 0.5s ease-in-out; |
||||
|
|
||||
|
.scroll-item { |
||||
|
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
||||
|
|
||||
|
&:nth-child(1) { |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right-button { |
||||
|
display: flex; |
||||
|
font-size: 16px; |
||||
|
|
||||
|
li { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 40px; |
||||
|
height: 38px; |
||||
|
border-right: 1px solid #ccc; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 右键菜单 */ |
||||
|
.contextmenu { |
||||
|
margin: 0; |
||||
|
background: #fff; |
||||
|
position: absolute; |
||||
|
list-style-type: none; |
||||
|
padding: 5px 0; |
||||
|
border-radius: 4px; |
||||
|
color: #000000d9; |
||||
|
font-weight: normal; |
||||
|
font-size: 13px; |
||||
|
white-space: nowrap; |
||||
|
outline: 0; |
||||
|
box-shadow: 0 2px 8px rgb(0 0 0 / 15%); |
||||
|
|
||||
|
li { |
||||
|
width: 100%; |
||||
|
margin: 0; |
||||
|
padding: 7px 12px; |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
&:hover { |
||||
|
background: #eee; |
||||
|
} |
||||
|
|
||||
|
svg { |
||||
|
display: block; |
||||
|
margin-right: 0.5em; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-dropdown-menu { |
||||
|
padding: 0; |
||||
|
|
||||
|
li { |
||||
|
width: 100%; |
||||
|
margin: 0; |
||||
|
padding: 0 12px; |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
svg { |
||||
|
display: block; |
||||
|
margin-right: 0.5em; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-dropdown-menu__item:not(.is-disabled):hover { |
||||
|
color: #606266; |
||||
|
background: #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-dropdown-menu__item) i { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.el-dropdown-menu__item--divided::before { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.el-dropdown-menu__item.is-disabled { |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
.is-active { |
||||
|
background-color: #eaf4fe; |
||||
|
position: relative; |
||||
|
color: #fff; |
||||
|
|
||||
|
a { |
||||
|
color: #1890ff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ri-arrow-left-s-line { |
||||
|
width: 40px; |
||||
|
height: 38px; |
||||
|
line-height: 38px; |
||||
|
text-align: center; |
||||
|
font-size: 20px; |
||||
|
color: #00000073; |
||||
|
box-shadow: 5px 0 5px -6px #ccc; |
||||
|
|
||||
|
&:hover { |
||||
|
cursor: w-resize; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ri-arrow-right-s-line { |
||||
|
width: 40px; |
||||
|
height: 38px; |
||||
|
line-height: 38px; |
||||
|
text-align: center; |
||||
|
font-size: 20px; |
||||
|
border-right: 1px solid #ccc; |
||||
|
color: #00000073; |
||||
|
box-shadow: -5px 0 5px -6px #ccc; |
||||
|
|
||||
|
&:hover { |
||||
|
cursor: e-resize; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 卡片模式 */ |
||||
|
.card-active { |
||||
|
border: 1px solid #1890ff; |
||||
|
} |
||||
|
|
||||
|
/* 卡片模式下鼠标移入显示蓝色边框 */ |
||||
|
.card-in { |
||||
|
border: 1px solid #1890ff; |
||||
|
color: #1890ff; |
||||
|
|
||||
|
a { |
||||
|
color: #1890ff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 卡片模式下鼠标移出隐藏蓝色边框 */ |
||||
|
.card-out { |
||||
|
border: none; |
||||
|
color: #666; |
||||
|
|
||||
|
a { |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 灵动模式 */ |
||||
|
.schedule-active { |
||||
|
width: 100%; |
||||
|
height: 2px; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
background: #1890ff; |
||||
|
} |
||||
|
|
||||
|
/* 灵动模式下鼠标移入显示蓝色进度条 */ |
||||
|
.schedule-in { |
||||
|
width: 100%; |
||||
|
height: 2px; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
background: #1890ff; |
||||
|
animation: scheduleInWidth 400ms ease-in; |
||||
|
} |
||||
|
|
||||
|
/* 灵动模式下鼠标移出隐藏蓝色进度条 */ |
||||
|
.schedule-out { |
||||
|
width: 0; |
||||
|
height: 2px; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
background: #1890ff; |
||||
|
animation: scheduleOutWidth 400ms ease-in; |
||||
|
} |
||||
|
|
||||
|
/* 刷新按钮动画效果 */ |
||||
|
.refresh-button { |
||||
|
-webkit-animation: rotate 600ms linear infinite; |
||||
|
-moz-animation: rotate 600ms linear infinite; |
||||
|
-o-animation: rotate 600ms linear infinite; |
||||
|
animation: rotate 600ms linear infinite; |
||||
|
} |
@ -1,24 +1,29 @@ |
|||||
/** |
/** |
||||
*此scss变量文件作为multipleScopeVars去编译时,会自动移除!default以达到变量提升 |
|
||||
*同时此scss变量文件作为默认主题变量文件,被其他.scss通过 @import 时,必需 !default |
|
||||
|
* 暗雅(默认) |
||||
|
* 此scss变量文件作为multipleScopeVars去编译时,会自动移除!default以达到变量提升 |
||||
|
* 同时此scss变量文件作为默认主题变量文件,被其他.scss通过 @import 时,必需 !default |
||||
*/ |
*/ |
||||
|
|
||||
// 暗雅(默认) |
|
||||
|
|
||||
// 菜单选中后字体样式 |
|
||||
|
/* 菜单选中后字体样式 */ |
||||
$subMenuActiveText: #fff !default; |
$subMenuActiveText: #fff !default; |
||||
//菜单背景 |
|
||||
|
|
||||
|
/* 菜单背景 */ |
||||
$menuBg: #001529 !default; |
$menuBg: #001529 !default; |
||||
// 鼠标覆盖到菜单时的背景 |
|
||||
|
|
||||
|
/* 鼠标覆盖到菜单时的背景 */ |
||||
$menuHover: #4091f7 !default; |
$menuHover: #4091f7 !default; |
||||
// 子菜单背景 |
|
||||
|
|
||||
|
/* 子菜单背景 */ |
||||
$subMenuBg: #0f0303 !default; |
$subMenuBg: #0f0303 !default; |
||||
// 有无子集的激活菜单背景 |
|
||||
|
|
||||
|
/* 有无子集的激活菜单背景 */ |
||||
$subMenuActiveBg: #4091f7 !default; |
$subMenuActiveBg: #4091f7 !default; |
||||
$navTextColor: #fff !default; |
$navTextColor: #fff !default; |
||||
$menuText: rgba(254, 254, 254, 0.65) !default; |
$menuText: rgba(254, 254, 254, 0.65) !default; |
||||
// logo背景颜色 |
|
||||
|
|
||||
|
/* logo背景颜色 */ |
||||
$sidebarLogo: #002140 !default; |
$sidebarLogo: #002140 !default; |
||||
// 鼠标覆盖到菜单时的字体颜色 |
|
||||
|
|
||||
|
/* 鼠标覆盖到菜单时的字体颜色 */ |
||||
$menuTitleHover: #fff !default; |
$menuTitleHover: #fff !default; |
||||
$menuActiveBefore: #4091f7 !default; |
$menuActiveBefore: #4091f7 !default; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue