UDI
/
udi-spms-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.1 色彩系统升级

Browse Source
dev_招标
yewj 4 months ago
parent 253b0220cd
commit 6cc31cfde5
10 changed files with 687 additions and 95 deletions
Show Stats Download Patch File Download Diff File

2
.env.development
Unescape Escape View File

@ -4,7 +4,7 @@ VUE_APP_TITLE = 供应商自助管理平台
# 开发环境配置 # 开发环境配置
ENV = 'development' ENV = 'development'
VUE_APP_BASE_API = 'http://192.168.0.166:9993' VUE_APP_BASE_API = 'http://192.168.0.188:9993'
# 应用访问路径 例如使用前缀 /admin/ # 应用访问路径 例如使用前缀 /admin/
VUE_APP_CONTEXT_PATH = '/' VUE_APP_CONTEXT_PATH = '/'

BIN
UDI_SPMS_CLIENT.zip
View File

Binary file not shown.

2
package.json
Unescape Escape View File

@ -5,7 +5,7 @@
"author": "LionLi", "author": "LionLi",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"dev": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --open", "dev": "vue-cli-service serve --open",
"build:prod": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode production", "build:prod": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode production",
"build:test": "vue-cli-service build --mode test", "build:test": "vue-cli-service build --mode test",
"preview": "node build/index.js --preview", "preview": "node build/index.js --preview",

146
src/assets/styles/btn.scss
Unescape Escape View File

@ -2,14 +2,35 @@
@mixin colorBtn($color) { @mixin colorBtn($color) {
background: $color; background: $color;
border: none;
color: #fff;
transition: $base-transition;
&:hover { &:hover {
color: $color; background: lighten($color, 8%);
color: #fff;
}
&:focus {
background: darken($color, 5%);
color: #fff;
}
}
&:before, @mixin outlineBtn($color) {
&:after { background: transparent;
background: $color; border: 1px solid $color;
} color: $color;
transition: $base-transition;
&:hover {
background: rgba($color, 0.1);
color: darken($color, 10%);
}
&:focus {
background: rgba($color, 0.2);
color: darken($color, 15%);
} }
} }
@ -41,19 +62,67 @@
@include colorBtn($yellow) @include colorBtn($yellow)
} }
.purple-btn {
@include colorBtn($purple)
}
.blue-outline-btn {
@include outlineBtn($blue)
}
.green-outline-btn {
@include outlineBtn($green)
}
.red-outline-btn {
@include outlineBtn($red)
}
.yellow-outline-btn {
@include outlineBtn($yellow)
}
.purple-outline-btn {
@include outlineBtn($purple)
}
.gradient-btn {
background: $primary-gradient;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 4px;
font-weight: 500;
transition: $base-transition;
&:hover {
filter: brightness(1.1);
transform: translateY(-1px);
}
&:active {
filter: brightness(0.95);
transform: translateY(0);
}
}
.pan-btn { .pan-btn {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
padding: 14px 36px; padding: 12px 24px;
border-radius: 8px; border-radius: $base-border-radius;
border: none; border: none;
outline: none; outline: none;
transition: 600ms ease all; transition: $base-transition;
position: relative; position: relative;
display: inline-block; display: inline-block;
font-weight: 500;
box-shadow: $base-box-shadow;
&:hover { &:hover {
background: #fff; background: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
&:before, &:before,
&:after { &:after {
@ -87,13 +156,70 @@
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
background: #fff; background: #fff;
color: #fff; color: #606266;
-webkit-appearance: none; -webkit-appearance: none;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
outline: 0; outline: 0;
margin: 0; margin: 0;
padding: 10px 15px; padding: 10px 20px;
font-size: 14px; font-size: 14px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #dcdfe6;
transition: $base-transition;
&:hover {
color: $blue;
border-color: lighten($blue, 30%);
background-color: rgba($blue, 0.05);
}
&:active {
color: darken($blue, 10%);
border-color: $blue;
outline: none;
}
&.is-plain {
background: transparent;
&:hover {
background: #fff;
}
}
&.is-round {
border-radius: 20px;
padding: 10px 24px;
}
}
// 按钮尺寸
.btn-lg {
padding: 12px 24px;
font-size: 16px;
border-radius: 6px;
}
.btn-sm {
padding: 6px 12px;
font-size: 12px;
border-radius: 3px;
}
.btn-xs {
padding: 4px 8px;
font-size: 12px;
border-radius: 2px;
}
// 图标按钮
.icon-btn {
padding: 8px;
border-radius: 4px;
line-height: 1;
i {
font-size: 16px;
}
} }

141
src/assets/styles/element-ui.scss
Unescape Escape View File

@ -1,4 +1,5 @@
// cover some element-ui styles // cover some element-ui styles
@import './variables.scss';
.el-breadcrumb__inner, .el-breadcrumb__inner,
.el-breadcrumb__inner a { .el-breadcrumb__inner a {
@ -52,6 +53,21 @@
left: 0; left: 0;
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
border-radius: $base-border-radius;
.el-dialog__header {
padding: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.el-dialog__body {
padding: 24px;
}
.el-dialog__footer {
padding: 16px 20px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
} }
// refine element ui upload // refine element ui upload
@ -62,6 +78,7 @@
.el-upload-dragger { .el-upload-dragger {
width: 100%; width: 100%;
height: 200px; height: 200px;
border-radius: $base-border-radius;
} }
} }
} }
@ -71,6 +88,14 @@
a { a {
display: block display: block
} }
.el-dropdown-menu__item {
transition: $base-transition;
&:hover {
background-color: rgba($blue, 0.08);
}
}
} }
// fix date-picker ui bug in filter-item // fix date-picker ui bug in filter-item
@ -89,4 +114,120 @@
> .el-submenu__title > .el-submenu__title
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
display: none; display: none;
}
// 按钮样式优化
.el-button {
transition: $base-transition;
border-radius: 4px;
&--primary {
background: $primary-gradient;
border: none;
&:hover, &:focus {
background: $primary-gradient;
filter: brightness(1.1);
}
}
&--success {
background-color: $green;
border-color: $green;
&:hover, &:focus {
background-color: lighten($green, 5%);
border-color: lighten($green, 5%);
}
}
&--warning {
background-color: $yellow;
border-color: $yellow;
&:hover, &:focus {
background-color: lighten($yellow, 5%);
border-color: lighten($yellow, 5%);
}
}
&--danger {
background-color: $red;
border-color: $red;
&:hover, &:focus {
background-color: lighten($red, 5%);
border-color: lighten($red, 5%);
}
}
}
// 卡片样式优化
.el-card {
border-radius: $base-border-radius;
box-shadow: $base-box-shadow;
transition: $base-transition;
border: none;
&:hover {
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.el-card__header {
padding: 16px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
font-weight: 500;
}
.el-card__body {
padding: 20px;
}
}
// 表单样式优化
.el-form {
.el-form-item {
margin-bottom: 20px;
}
.el-input__inner {
border-radius: 4px;
transition: $base-transition;
&:hover {
border-color: lighten($blue, 10%);
}
&:focus {
border-color: $blue;
}
}
}
// 表格样式优化
.el-table {
border-radius: $base-border-radius;
overflow: hidden;
th {
background-color: $background-light;
font-weight: 500;
}
td, th {
padding: 12px 0;
}
.el-table__row {
transition: $base-transition;
&:hover {
background-color: rgba($blue, 0.04);
}
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
background-color: rgba($blue, 0.02);
}
} }

51
src/assets/styles/element-variables.scss
Unescape Escape View File

@ -1,23 +1,43 @@
/** /**
* I think element-ui's default theme color is too light for long-term use. * 更新系统主题色彩，使用更现代的色彩方案
* So I modified the default color and you can modify it to your liking.
**/ **/
/* 导入基础变量 */
@import './variables.scss';
/* theme color */ /* theme color */
$--color-primary: #1890ff; $--color-primary: $blue;
$--color-success: #13ce66; $--color-success: $green;
$--color-warning: #ffba00; $--color-warning: $yellow;
$--color-danger: #ff4949; $--color-danger: $red;
// $--color-info: #1E1E1E; $--color-info: #909399;
$--button-font-weight: 500;
$--color-text-primary: #303133;
$--color-text-regular: #606266;
$--color-text-secondary: #909399;
$--color-text-placeholder: #c0c4cc;
$--border-color-base: #dcdfe6;
$--border-color-light: #e4e7ed;
$--border-color-lighter: #ebeef5;
$--border-color-extra-light: #f2f6fc;
$--button-font-weight: 400; $--background-color-base: $background-light;
// $--color-text-regular: #1f2d3d; $--box-shadow-base: $base-box-shadow;
$--border-radius-base: 4px;
$--border-radius-small: 2px;
$--border-radius-circle: 100%;
$--border-color-light: #dfe4ed; /* 卡片阴影 */
$--border-color-lighter: #e6ebf5; $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
$--box-shadow-dark: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
$--table-border: 1px solid #dfe6ec; /* 表格边框 */
$--table-border: 1px solid #ebeef5;
$--table-header-background-color: $background-light;
/* icon font path, required */ /* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts'; $--font-path: '~element-ui/lib/theme-chalk/fonts';
@ -28,4 +48,11 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export { :export {
theme: $--color-primary; theme: $--color-primary;
primaryGradient: $primary-gradient;
success: $--color-success;
warning: $--color-warning;
danger: $--color-danger;
info: $--color-info;
backgroundLight: $background-light;
backgroundDark: $background-dark;
} }

144
src/assets/styles/index.scss
Unescape Escape View File

@ -10,11 +10,14 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
background-color: $background-light;
color: #303133;
line-height: 1.5;
} }
label { label {
font-weight: 700; font-weight: 500;
} }
html { html {
@ -49,8 +52,9 @@ a,
a:focus, a:focus,
a:hover { a:hover {
cursor: pointer; cursor: pointer;
color: inherit; color: $blue;
text-decoration: none; text-decoration: none;
transition: $base-transition;
} }
div:focus { div:focus {
@ -82,7 +86,7 @@ div:focus {
} }
.inlineBlock { .inlineBlock {
display: block; display: inline-block;
} }
.clearfix { .clearfix {
@ -96,32 +100,121 @@ div:focus {
} }
} }
// 新增常用边距类
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.m-1 { margin: 4px !important; }
.mt-1 { margin-top: 4px !important; }
.mr-1 { margin-right: 4px !important; }
.mb-1 { margin-bottom: 4px !important; }
.ml-1 { margin-left: 4px !important; }
.m-2 { margin: 8px !important; }
.mt-2 { margin-top: 8px !important; }
.mr-2 { margin-right: 8px !important; }
.mb-2 { margin-bottom: 8px !important; }
.ml-2 { margin-left: 8px !important; }
.m-3 { margin: 16px !important; }
.mt-3 { margin-top: 16px !important; }
.mr-3 { margin-right: 16px !important; }
.mb-3 { margin-bottom: 16px !important; }
.ml-3 { margin-left: 16px !important; }
.m-4 { margin: 24px !important; }
.mt-4 { margin-top: 24px !important; }
.mr-4 { margin-right: 24px !important; }
.mb-4 { margin-bottom: 24px !important; }
.ml-4 { margin-left: 24px !important; }
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.p-1 { padding: 4px !important; }
.pt-1 { padding-top: 4px !important; }
.pr-1 { padding-right: 4px !important; }
.pb-1 { padding-bottom: 4px !important; }
.pl-1 { padding-left: 4px !important; }
.p-2 { padding: 8px !important; }
.pt-2 { padding-top: 8px !important; }
.pr-2 { padding-right: 8px !important; }
.pb-2 { padding-bottom: 8px !important; }
.pl-2 { padding-left: 8px !important; }
.p-3 { padding: 16px !important; }
.pt-3 { padding-top: 16px !important; }
.pr-3 { padding-right: 16px !important; }
.pb-3 { padding-bottom: 16px !important; }
.pl-3 { padding-left: 16px !important; }
.p-4 { padding: 24px !important; }
.pt-4 { padding-top: 24px !important; }
.pr-4 { padding-right: 24px !important; }
.pb-4 { padding-bottom: 24px !important; }
.pl-4 { padding-left: 24px !important; }
// 文本对齐
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
// 文本颜色
.text-primary { color: $blue !important; }
.text-success { color: $green !important; }
.text-warning { color: $yellow !important; }
.text-danger { color: $red !important; }
.text-info { color: #909399 !important; }
.text-muted { color: #606266 !important; }
aside { aside {
background: #eef1f6; background: $background-light;
padding: 8px 24px; padding: 16px 24px;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 2px; border-radius: $base-border-radius;
box-shadow: $base-box-shadow;
display: block; display: block;
line-height: 32px; line-height: 1.6;
font-size: 16px; font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: #2c3e50; color: #2c3e50;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
transition: $base-transition;
&:hover {
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}
a { a {
color: #337ab7; color: $blue;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: rgb(32, 160, 255); color: lighten($blue, 10%);
} }
} }
} }
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
padding: 20px; padding: 24px;
background-color: $card-background-light;
border-radius: $base-border-radius;
box-shadow: $base-box-shadow;
margin-bottom: 20px;
transition: $base-transition;
&:hover {
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}
} }
.components-container { .components-container {
@ -130,11 +223,12 @@ aside {
} }
.pagination-container { .pagination-container {
margin-top: 30px; margin-top: 24px;
text-align: right;
} }
.text-center { .text-center {
text-align: center text-align: center;
} }
.sub-navbar { .sub-navbar {
@ -144,12 +238,14 @@ aside {
width: 100%; width: 100%;
text-align: right; text-align: right;
padding-right: 20px; padding-right: 20px;
transition: 600ms ease position; transition: $base-transition;
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); background: $primary-gradient;
border-radius: $base-border-radius $base-border-radius 0 0;
.subtitle { .subtitle {
font-size: 20px; font-size: 18px;
color: #fff; color: #fff;
font-weight: 500;
} }
&.draft { &.draft {
@ -163,20 +259,26 @@ aside {
.link-type, .link-type,
.link-type:focus { .link-type:focus {
color: #337ab7; color: $blue;
cursor: pointer; cursor: pointer;
transition: $base-transition;
&:hover { &:hover {
color: rgb(32, 160, 255); color: lighten($blue, 10%);
text-decoration: underline;
} }
} }
.filter-container { .filter-container {
padding-bottom: 10px; padding-bottom: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
.filter-item { .filter-item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
@ -190,7 +292,7 @@ aside {
z-index: 1000 !important; z-index: 1000 !important;
} }
// 表格内边距优化
.el-table--mini .el-table__cell { .el-table--mini .el-table__cell {
padding:0px!important; padding: 4px 0 !important;
} }

90
src/assets/styles/sidebar.scss
Unescape Escape View File

@ -1,3 +1,5 @@
@import './variables.scss';
#app { #app {
.main-container { .main-container {
@ -12,7 +14,6 @@
} }
.sidebar-container { .sidebar-container {
-webkit-transition: width .28s;
transition: width 0.28s; transition: width 0.28s;
width: $base-sidebar-width !important; width: $base-sidebar-width !important;
background-color: $base-menu-background; background-color: $base-menu-background;
@ -24,8 +25,7 @@
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); box-shadow: $menu-box-shadow;
box-shadow: 2px 0 6px rgba(0,21,41,.35);
// reset element-ui css // reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
@ -46,7 +46,7 @@
&.has-logo { &.has-logo {
.el-scrollbar { .el-scrollbar {
height: calc(100% - 50px); height: calc(100% - 60px);
} }
} }
@ -62,26 +62,33 @@
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 16px;
color: $base-menu-icon-color;
} }
.el-menu { .el-menu {
border: none; border: none;
height: 100%; height: 100%;
width: 100% !important; width: 100% !important;
background-color: transparent;
} }
.el-menu-item, .el-submenu__title { .el-menu-item, .el-submenu__title {
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
white-space: nowrap !important; white-space: nowrap !important;
height: 45px; //侧边菜单栏高度 height: 50px;
line-height: 50px;
font-size: 14px;
color: $base-menu-color;
transition: $base-transition;
} }
// menu hover // menu hover
.submenu-title-noDropdown, .submenu-title-noDropdown,
.el-submenu__title { .el-submenu__title {
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: $base-menu-hover !important;
color: $base-menu-color-active !important;
} }
} }
@ -92,9 +99,11 @@
& .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item { & .el-submenu .el-menu-item {
min-width: $base-sidebar-width !important; min-width: $base-sidebar-width !important;
background-color: $base-sub-menu-background !important;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: $base-sub-menu-hover !important;
color: $base-menu-color-active !important;
} }
} }
@ -106,6 +115,21 @@
background-color: $base-sub-menu-hover !important; background-color: $base-sub-menu-hover !important;
} }
} }
// 活跃菜单项样式
.el-menu-item.is-active {
background-color: $base-menu-active-background !important;
color: $base-menu-color-active !important;
border-right: 3px solid $blue;
&:hover {
background-color: $base-menu-active-background !important;
}
.svg-icon {
color: $base-menu-color-active;
}
}
} }
.hideSidebar { .hideSidebar {
@ -139,7 +163,6 @@
.svg-icon { .svg-icon {
margin-left: 20px; margin-left: 20px;
} }
} }
} }
@ -183,7 +206,6 @@
} }
.withoutAnimation { .withoutAnimation {
.main-container, .main-container,
.sidebar-container { .sidebar-container {
transition: none; transition: none;
@ -202,8 +224,7 @@
.nest-menu .el-submenu>.el-submenu__title, .nest-menu .el-submenu>.el-submenu__title,
.el-menu-item { .el-menu-item {
&:hover { &:hover {
// you can use $subMenuHover background-color: $base-menu-hover !important;
background-color: rgba(0, 0, 0, 0.06) !important;
} }
} }
@ -213,7 +234,7 @@
overflow-y: auto; overflow-y: auto;
&::-webkit-scrollbar-track-piece { &::-webkit-scrollbar-track-piece {
background: #d3dce6; background: #f0f2f5;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
@ -221,8 +242,51 @@
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #99a9bf; background: #c0c4cc;
border-radius: 20px; border-radius: 20px;
} }
} }
} }
// 侧边栏 Logo 样式
.sidebar-logo-container {
position: relative;
width: 100%;
height: 60px;
line-height: 60px;
background: $base-menu-background;
text-align: center;
overflow: hidden;
& .sidebar-logo-link {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
& .sidebar-logo {
width: 32px;
height: 32px;
vertical-align: middle;
margin-right: 12px;
}
& .sidebar-title {
display: inline-block;
margin: 0;
color: $base-menu-color-active;
font-weight: 600;
line-height: 60px;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
vertical-align: middle;
}
}
&.collapse {
.sidebar-logo {
margin-right: 0;
}
}
}

138
src/assets/styles/transition.scss
Unescape Escape View File

@ -1,28 +1,30 @@
@import './variables.scss';
// global transition css // global transition css
/* fade */ /* fade */
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 0.28s; transition: opacity 0.28s ease;
} }
.fade-enter, .fade-enter-from,
.fade-leave-active { .fade-leave-to {
opacity: 0; opacity: 0;
} }
/* fade-transform */ /* fade-transform */
.fade-transform--move, .fade-transform-move,
.fade-transform-leave-active, .fade-transform-leave-active,
.fade-transform-enter-active { .fade-transform-enter-active {
transition: all .5s; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
} }
.fade-transform-leave-active { .fade-transform-leave-active {
position: absolute; position: absolute;
} }
.fade-transform-enter { .fade-transform-enter-from {
opacity: 0; opacity: 0;
transform: translateX(-30px); transform: translateX(-30px);
} }
@ -35,19 +37,135 @@
/* breadcrumb transition */ /* breadcrumb transition */
.breadcrumb-enter-active, .breadcrumb-enter-active,
.breadcrumb-leave-active { .breadcrumb-leave-active {
transition: all .5s; transition: all 0.4s ease;
} }
.breadcrumb-enter, .breadcrumb-enter-from,
.breadcrumb-leave-active { .breadcrumb-leave-to {
opacity: 0; opacity: 0;
transform: translateX(20px); transform: translateX(20px);
} }
.breadcrumb-move { .breadcrumb-move {
transition: all .5s; transition: all 0.4s ease;
} }
.breadcrumb-leave-active { .breadcrumb-leave-active {
position: absolute; position: absolute;
} }
/* slide-fade */
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: all 0.3s ease-out;
}
.slide-fade-enter-from {
transform: translateY(-20px);
opacity: 0;
}
.slide-fade-leave-to {
transform: translateY(20px);
opacity: 0;
}
/* zoom-fade */
.zoom-fade-enter-active,
.zoom-fade-leave-active {
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.zoom-fade-enter-from {
opacity: 0;
transform: scale(0.92);
}
.zoom-fade-leave-to {
opacity: 0;
transform: scale(1.06);
}
/* scale */
.scale-enter-active,
.scale-leave-active {
transition: all 0.3s ease;
}
.scale-enter-from,
.scale-leave-to {
opacity: 0;
transform: scale(0);
}
/* slide-right */
.slide-right-enter-active,
.slide-right-leave-active {
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.slide-right-enter-from {
opacity: 0;
transform: translateX(-30px);
}
.slide-right-leave-to {
opacity: 0;
transform: translateX(30px);
}
/* slide-down */
.slide-down-enter-active,
.slide-down-leave-active {
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.slide-down-enter-from {
opacity: 0;
transform: translateY(-30px);
}
.slide-down-leave-to {
opacity: 0;
transform: translateY(30px);
}
/* list transition */
.list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}
.list-enter-from {
opacity: 0;
transform: translateY(30px);
}
.list-leave-to {
opacity: 0;
transform: translateY(-30px);
}
/* card hover effect */
.card-hover-effect {
transition: $base-transition;
&:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.09);
}
}
/* button hover effect */
.btn-hover-effect {
transition: $base-transition;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.09);
}
&:active {
transform: translateY(0);
}
}

68
src/assets/styles/variables.scss
Unescape Escape View File

@ -1,42 +1,46 @@
// base color // base color
$blue:#324157; $blue: #1890ff;
$light-blue:#3A71A8; $light-blue: #36cfc9;
$red:#C03639; $red: #f5222d;
$pink: #E65D6E; $pink: #E65D6E;
$green: #30B08F; $green: #52c41a;
$tiffany: #4AB7BD; $tiffany: #4AB7BD;
$yellow:#FEC171; $yellow: #faad14;
$panGreen: #30B08F; $panGreen: #30B08F;
$purple: #722ed1;
// 新增渐变色和背景色
$primary-gradient: linear-gradient(45deg, $blue, $light-blue);
$background-light: #f5f7fa;
$background-dark: #141414;
$card-background-light: #ffffff;
$card-background-dark: #1f1f1f;
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color:#bfcbd9; $base-menu-color: #bfcbd9;
$base-menu-color-active:#f4f4f5; $base-menu-color-active: #f4f4f5;
$base-menu-background:#304156; $base-menu-background: #001529;
$base-logo-title-color: #ffffff; $base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70); $base-menu-light-color: rgba(0,0,0,.70);
$base-menu-light-background:#ffffff; $base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529; $base-logo-light-title-color: #001529;
$base-sub-menu-background:#1f2d3d; $base-sub-menu-background: #000c17;
$base-sub-menu-hover:#001528; $base-sub-menu-hover: #001528;
$base-menu-hover: rgba(0, 0, 0, 0.06);
// 自定义暗色菜单风格 $base-menu-active-background: rgba(24, 144, 255, 0.1);
/** $base-menu-icon-color: #bfcbd9;
$base-menu-color:hsla(0,0%,100%,.65);
$base-menu-color-active:#fff;
$base-menu-background:#001529;
$base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70); // 菜单阴影
$base-menu-light-background:#ffffff; $menu-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
$base-logo-light-title-color: #001529;
$base-sub-menu-background:#000c17; // 新增样式变量
$base-sub-menu-hover:#001528; $base-border-radius: 8px;
*/ $base-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
$base-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
$base-sidebar-width: 225px; $base-sidebar-width: 240px;
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
@ -50,5 +54,15 @@ $base-sidebar-width: 225px;
subMenuHover: $base-sub-menu-hover; subMenuHover: $base-sub-menu-hover;
sideBarWidth: $base-sidebar-width; sideBarWidth: $base-sidebar-width;
logoTitleColor: $base-logo-title-color; logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color logoLightTitleColor: $base-logo-light-title-color;
primaryColor: $blue;
primaryGradient: $primary-gradient;
successColor: $green;
warningColor: $yellow;
dangerColor: $red;
accentColor: $purple;
backgroundLight: $background-light;
backgroundDark: $background-dark;
menuBoxShadow: $menu-box-shadow;
menuActiveBackground: $base-menu-active-background;
} }

Write Preview
Loading…
Cancel
Save