前端界面文件更新
This commit is contained in:
dataprince
parent
3663f0ea78
commit
f2a3dfa070
@ -117,7 +117,7 @@ management:
|
||||
--- # 监控中心客户端配置
|
||||
spring.boot.admin.client:
|
||||
# 增加客户端开关
|
||||
enabled: false
|
||||
enabled: true
|
||||
url: http://localhost:9090/admin
|
||||
instance:
|
||||
service-host-type: IP
|
||||
@ -128,7 +128,7 @@ spring.boot.admin.client:
|
||||
powerjob:
|
||||
worker:
|
||||
# 如何开启调度中心请查看文档教程
|
||||
enabled: false
|
||||
enabled: true
|
||||
# 需要先在 powerjob 登录页执行应用注册后才能使用
|
||||
app-name: ruoyi-worker
|
||||
# 28080 端口 随着主应用端口飘逸 避免集群冲突
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
"@element-plus/icons-vue": "2.1.0",
|
||||
"@vueup/vue-quill": "1.1.0",
|
||||
"@vueuse/core": "9.5.0",
|
||||
"animate.css": "4.1.1",
|
||||
"@zeronejs/utils": "^1.4.0",
|
||||
"axios": "^1.3.4",
|
||||
"echarts": "5.4.0",
|
||||
|
||||
48
ruoyi-ui/src/animate.js
Normal file
48
ruoyi-ui/src/animate.js
Normal file
@ -0,0 +1,48 @@
|
||||
// 前缀
|
||||
const animatePrefix = 'animate__animated ';
|
||||
// 开启随机动画 随机动画值
|
||||
const animateList = [
|
||||
animatePrefix + 'animate__pulse',
|
||||
animatePrefix + 'animate__rubberBand',
|
||||
animatePrefix + 'animate__bounceIn',
|
||||
animatePrefix + 'animate__bounceInLeft',
|
||||
animatePrefix + 'animate__fadeIn',
|
||||
animatePrefix + 'animate__fadeInLeft',
|
||||
animatePrefix + 'animate__fadeInDown',
|
||||
animatePrefix + 'animate__fadeInUp',
|
||||
animatePrefix + 'animate__flipInX',
|
||||
animatePrefix + 'animate__lightSpeedInLeft',
|
||||
animatePrefix + 'animate__rotateInDownLeft',
|
||||
animatePrefix + 'animate__rollIn',
|
||||
animatePrefix + 'animate__rotateInDownLeft',
|
||||
animatePrefix + 'animate__zoomIn',
|
||||
animatePrefix + 'animate__zoomInDown',
|
||||
animatePrefix + 'animate__slideInLeft',
|
||||
animatePrefix + 'animate__lightSpeedIn'
|
||||
];
|
||||
// 关闭随机动画后的默认效果
|
||||
const defaultAnimate = animatePrefix + 'animate__fadeIn';
|
||||
// 搜索隐藏显示动画
|
||||
const searchAnimate = {
|
||||
enter: '',
|
||||
leave: ''
|
||||
};
|
||||
|
||||
// 菜单搜索动画
|
||||
const menuSearchAnimate = {
|
||||
enter: animatePrefix + 'animate__fadeIn',
|
||||
leave: animatePrefix + 'animate__fadeOut'
|
||||
};
|
||||
// logo动画
|
||||
const logoAnimate = {
|
||||
enter: animatePrefix + 'animate__fadeIn',
|
||||
leave: animatePrefix + 'animate__fadeOut'
|
||||
};
|
||||
|
||||
export default {
|
||||
animateList,
|
||||
defaultAnimate,
|
||||
searchAnimate,
|
||||
menuSearchAnimate,
|
||||
logoAnimate
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
@import './variables.scss';
|
||||
@import './variables.module.scss';
|
||||
|
||||
@mixin colorBtn($color) {
|
||||
background: $color;
|
||||
@ -14,31 +14,31 @@
|
||||
}
|
||||
|
||||
.blue-btn {
|
||||
@include colorBtn($blue)
|
||||
@include colorBtn($blue);
|
||||
}
|
||||
|
||||
.light-blue-btn {
|
||||
@include colorBtn($light-blue)
|
||||
@include colorBtn($light-blue);
|
||||
}
|
||||
|
||||
.red-btn {
|
||||
@include colorBtn($red)
|
||||
@include colorBtn($red);
|
||||
}
|
||||
|
||||
.pink-btn {
|
||||
@include colorBtn($pink)
|
||||
@include colorBtn($pink);
|
||||
}
|
||||
|
||||
.green-btn {
|
||||
@include colorBtn($green)
|
||||
@include colorBtn($green);
|
||||
}
|
||||
|
||||
.tiffany-btn {
|
||||
@include colorBtn($tiffany)
|
||||
@include colorBtn($tiffany);
|
||||
}
|
||||
|
||||
.yellow-btn {
|
||||
@include colorBtn($yellow)
|
||||
@include colorBtn($yellow);
|
||||
}
|
||||
|
||||
.pan-btn {
|
||||
|
||||
@ -1,12 +1,17 @@
|
||||
// cover some element-ui styles
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__inner a {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
input[type="file"] {
|
||||
input[type='file'] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@ -46,12 +51,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
// to fixed https://github.com/ElemeFE/element/issues/2461
|
||||
.el-dialog {
|
||||
transform: none;
|
||||
left: 0;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
/*-------------Dialog-------------**/
|
||||
.el-overlay {
|
||||
overflow: hidden;
|
||||
|
||||
.el-overlay-dialog {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.el-dialog {
|
||||
margin: 0 auto !important;
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
max-height: calc(90vh - 111px) !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// refine element ui upload
|
||||
@ -69,7 +93,7 @@
|
||||
// dropdown
|
||||
.el-dropdown-menu {
|
||||
a {
|
||||
display: block
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,10 +107,10 @@
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.el-menu--collapse
|
||||
> div
|
||||
> .el-submenu
|
||||
> .el-submenu__title
|
||||
.el-submenu__icon-arrow {
|
||||
.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown .el-dropdown-link {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
**/
|
||||
|
||||
/* theme color */
|
||||
$--color-primary: #1890ff;
|
||||
$--color-success: #13ce66;
|
||||
$--color-warning: #ffba00;
|
||||
$--color-danger: #ff4949;
|
||||
// $--color-info: #1E1E1E;
|
||||
|
||||
$--button-font-weight: 400;
|
||||
|
||||
// $--color-text-regular: #1f2d3d;
|
||||
|
||||
$--border-color-light: #dfe4ed;
|
||||
$--border-color-lighter: #e6ebf5;
|
||||
|
||||
$--table-border: 1px solid #dfe6ec;
|
||||
|
||||
/* icon font path, required */
|
||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-ui/packages/theme-chalk/src/index";
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
theme: $--color-primary;
|
||||
}
|
||||
@ -1,12 +1,16 @@
|
||||
@import './variables.scss';
|
||||
@import './variables.module.scss';
|
||||
@import './mixin.scss';
|
||||
@import './transition.scss';
|
||||
@import './element-ui.scss';
|
||||
@import './sidebar.scss';
|
||||
@import './btn.scss';
|
||||
@import './ruoyi.scss';
|
||||
@import 'animate.css';
|
||||
@import 'element-plus/dist/index.css';
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
@ -22,6 +26,11 @@ html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html.dark .svg-icon,
|
||||
html.dark svg {
|
||||
fill: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
@ -90,7 +99,7 @@ div:focus {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
content: ' ';
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
@ -104,7 +113,8 @@ aside {
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
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;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@ -124,6 +134,22 @@ aside {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
// search面板样式
|
||||
.panel,
|
||||
.search {
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
background-color: var(--el-bg-color-overlay);
|
||||
padding: 0.75rem;
|
||||
transition: all ease 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px #0000001a;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.components-container {
|
||||
margin: 30px 50px;
|
||||
position: relative;
|
||||
@ -134,7 +160,7 @@ aside {
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sub-navbar {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
@ -44,21 +44,15 @@
|
||||
border-bottom: $color-border-style;
|
||||
border-left: $transparent-border-style;
|
||||
border-right: $transparent-border-style;
|
||||
}
|
||||
|
||||
@else if $direction==right {
|
||||
} @else if $direction==right {
|
||||
border-left: $color-border-style;
|
||||
border-top: $transparent-border-style;
|
||||
border-bottom: $transparent-border-style;
|
||||
}
|
||||
|
||||
@else if $direction==down {
|
||||
} @else if $direction==down {
|
||||
border-top: $color-border-style;
|
||||
border-left: $transparent-border-style;
|
||||
border-right: $transparent-border-style;
|
||||
}
|
||||
|
||||
@else if $direction==left {
|
||||
} @else if $direction==left {
|
||||
border-right: $color-border-style;
|
||||
border-top: $transparent-border-style;
|
||||
border-bottom: $transparent-border-style;
|
||||
|
||||
@ -1,129 +1,141 @@
|
||||
/**
|
||||
/**
|
||||
* 通用css样式布局处理
|
||||
* Copyright (c) 2019 ruoyi
|
||||
*/
|
||||
|
||||
/** 基础通用 **/
|
||||
/** 基础通用 **/
|
||||
.pt5 {
|
||||
padding-top: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.pr5 {
|
||||
padding-right: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.pb5 {
|
||||
padding-bottom: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.mt5 {
|
||||
margin-top: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.mr5 {
|
||||
margin-right: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.mb5 {
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.mb8 {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ml5 {
|
||||
margin-left: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mb10 {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mt20 {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mr20 {
|
||||
margin-right: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ml20 {
|
||||
margin-left: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.el-message-box__status + .el-message-box__message{
|
||||
word-break: break-word;
|
||||
.el-form .el-form-item__label {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 6vh !important;
|
||||
margin-top: 6vh !important;
|
||||
}
|
||||
|
||||
.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 70vh;
|
||||
padding: 10px 20px 0;
|
||||
.el-dialog.scrollbar .el-dialog__body {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 70vh;
|
||||
padding: 10px 20px 0;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
|
||||
th {
|
||||
word-break: break-word;
|
||||
background-color: #f8f8f9;
|
||||
color: #515a6e;
|
||||
height: 40px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
.el-button [class*="el-icon-"] + span {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
.el-table__header-wrapper,
|
||||
.el-table__fixed-header-wrapper {
|
||||
th {
|
||||
word-break: break-word;
|
||||
background-color: $table-header-bg !important;
|
||||
color: $table-header-text-color;
|
||||
height: 40px !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
.el-button [class*='el-icon-'] + span {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 表单布局 **/
|
||||
.form-header {
|
||||
font-size:15px;
|
||||
color:#6379bb;
|
||||
border-bottom:1px solid #ddd;
|
||||
margin:8px 10px 25px 10px;
|
||||
padding-bottom:5px
|
||||
font-size: 15px;
|
||||
color: #6379bb;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin: 8px 10px 25px 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/** 表格布局 **/
|
||||
.pagination-container {
|
||||
position: relative;
|
||||
height: 25px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 15px;
|
||||
padding: 10px 20px !important;
|
||||
// position: relative;
|
||||
height: 25px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 15px;
|
||||
padding: 10px 20px !important;
|
||||
}
|
||||
|
||||
/* tree border */
|
||||
.tree-border {
|
||||
margin-top: 5px;
|
||||
border: 1px solid #e5e6e7;
|
||||
background: #FFFFFF none;
|
||||
border-radius:4px;
|
||||
margin-top: 5px;
|
||||
border: 1px solid #e5e6e7;
|
||||
background: #ffffff none;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination-container .el-pagination {
|
||||
right: 0;
|
||||
position: absolute;
|
||||
//right: 0;
|
||||
//position: absolute;
|
||||
}
|
||||
|
||||
@media ( max-width : 768px) {
|
||||
@media (max-width: 768px) {
|
||||
.pagination-container .el-pagination > .el-pagination__jump {
|
||||
display: none !important;
|
||||
}
|
||||
@ -132,146 +144,147 @@
|
||||
}
|
||||
}
|
||||
|
||||
.el-table .fixed-width .el-button--mini {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: inherit;
|
||||
.el-table .fixed-width .el-button--small {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
/** 表格更多操作下拉样式 */
|
||||
.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
.el-table .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-table .el-dropdown, .el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
.el-table .el-dropdown,
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-checkbox {
|
||||
margin-right: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.list-group-striped > .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
padding-left: 0px;
|
||||
list-style: none;
|
||||
padding-left: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
border-top: 1px solid #e7eaec;
|
||||
margin-bottom: -1px;
|
||||
padding: 11px 0px;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
border-top: 1px solid #e7eaec;
|
||||
margin-bottom: -1px;
|
||||
padding: 11px 0px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 14px 15px 7px;
|
||||
min-height: 40px;
|
||||
padding: 14px 15px 7px !important;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 15px 20px 20px 20px;
|
||||
padding: 15px 20px 20px 20px !important;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 10px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* button color */
|
||||
.el-button--cyan.is-active,
|
||||
.el-button--cyan:active {
|
||||
background: #20B2AA;
|
||||
border-color: #20B2AA;
|
||||
color: #FFFFFF;
|
||||
background: #20b2aa;
|
||||
border-color: #20b2aa;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-button--cyan:focus,
|
||||
.el-button--cyan:hover {
|
||||
background: #48D1CC;
|
||||
border-color: #48D1CC;
|
||||
color: #FFFFFF;
|
||||
background: #48d1cc;
|
||||
border-color: #48d1cc;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-button--cyan {
|
||||
background-color: #20B2AA;
|
||||
border-color: #20B2AA;
|
||||
color: #FFFFFF;
|
||||
background-color: #20b2aa;
|
||||
border-color: #20b2aa;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* text color */
|
||||
.text-navy {
|
||||
color: #1ab394;
|
||||
color: #1ab394;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #1c84c6;
|
||||
color: #1c84c6;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: #23c6c8;
|
||||
color: #23c6c8;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: #f8ac59;
|
||||
color: #f8ac59;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: #ed5565;
|
||||
color: #ed5565;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #888888;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
/* image */
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.img-lg {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.avatar-upload-preview {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 拖拽列样式 */
|
||||
.sortable-ghost{
|
||||
opacity: .8;
|
||||
color: #fff!important;
|
||||
background: #42b983!important;
|
||||
.sortable-ghost {
|
||||
opacity: 0.8;
|
||||
color: #fff !important;
|
||||
background: #42b983 !important;
|
||||
}
|
||||
|
||||
/* 表格右侧工具栏样式 */
|
||||
.top-right-btn {
|
||||
position: relative;
|
||||
float: right;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@ -1,31 +1,30 @@
|
||||
#app {
|
||||
|
||||
.main-container {
|
||||
height: 100%;
|
||||
transition: margin-left .28s;
|
||||
transition: margin-left 0.28s;
|
||||
margin-left: $base-sidebar-width;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebarHide {
|
||||
margin-left: 0!important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
-webkit-transition: width .28s;
|
||||
-webkit-transition: width 0.28s;
|
||||
transition: width 0.28s;
|
||||
width: $base-sidebar-width !important;
|
||||
background-color: $base-menu-background;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0px;
|
||||
font-size: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
||||
box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
||||
-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
|
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
|
||||
|
||||
// reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
@ -37,7 +36,7 @@
|
||||
}
|
||||
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
@ -70,41 +69,67 @@
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.el-menu-item, .el-submenu__title {
|
||||
.el-menu-item,
|
||||
.menu-title {
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.el-menu-item .el-menu-tooltip__trigger {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-submenu__title {
|
||||
.theme-dark .sub-menu-title-noDropdown,
|
||||
.theme-dark .el-sub-menu__title {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
background-color: $base-sub-menu-title-hover !important;
|
||||
}
|
||||
}
|
||||
.sub-menu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .is-active > .el-submenu__title {
|
||||
& .theme-dark .is-active > .el-sub-menu__title {
|
||||
color: $base-menu-color-active !important;
|
||||
}
|
||||
|
||||
& .nest-menu .el-submenu>.el-submenu__title,
|
||||
& .el-submenu .el-menu-item {
|
||||
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .el-sub-menu .el-menu-item {
|
||||
min-width: $base-sidebar-width !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .nest-menu .el-submenu>.el-submenu__title,
|
||||
& .theme-dark .el-submenu .el-menu-item {
|
||||
|
||||
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .theme-dark .el-sub-menu .el-menu-item {
|
||||
background-color: $base-sub-menu-background !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $base-sub-menu-hover !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .theme-dark .el-menu-item {
|
||||
&:hover {
|
||||
// you can use $sub-menuHover
|
||||
background-color: $base-menu-hover !important;
|
||||
}
|
||||
}
|
||||
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .el-menu-item {
|
||||
&:hover {
|
||||
// you can use $sub-menuHover
|
||||
background-color: rgba(0, 0, 0, 0.04) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
@ -116,7 +141,7 @@
|
||||
margin-left: 54px;
|
||||
}
|
||||
|
||||
.submenu-title-noDropdown {
|
||||
.sub-menu-title-noDropdown {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
|
||||
@ -129,23 +154,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
.el-submenu {
|
||||
.el-sub-menu {
|
||||
overflow: hidden;
|
||||
|
||||
&>.el-submenu__title {
|
||||
& > .el-sub-menu__title {
|
||||
padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--collapse {
|
||||
.el-submenu {
|
||||
&>.el-submenu__title {
|
||||
&>span {
|
||||
.el-sub-menu {
|
||||
& > .el-sub-menu__title {
|
||||
& > span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
& > i {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
@ -157,7 +188,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--collapse .el-menu .el-submenu {
|
||||
.el-menu--collapse .el-menu .el-sub-menu {
|
||||
min-width: $base-sidebar-width !important;
|
||||
}
|
||||
|
||||
@ -168,7 +199,7 @@
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
transition: transform .28s;
|
||||
transition: transform 0.28s;
|
||||
width: $base-sidebar-width !important;
|
||||
}
|
||||
|
||||
@ -182,7 +213,6 @@
|
||||
}
|
||||
|
||||
.withoutAnimation {
|
||||
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
@ -192,36 +222,9 @@
|
||||
|
||||
// when menu collapsed
|
||||
.el-menu--vertical {
|
||||
&>.el-menu {
|
||||
& > .el-menu {
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.nest-menu .el-submenu>.el-submenu__title,
|
||||
.el-menu-item {
|
||||
&:hover {
|
||||
// you can use $subMenuHover
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// the scroll bar appears when the subMenu is too long
|
||||
>.el-menu--popup {
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
.fade-transform--move,
|
||||
.fade-transform-leave-active,
|
||||
.fade-transform-enter-active {
|
||||
transition: all .5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.fade-transform-enter {
|
||||
@ -31,7 +31,7 @@
|
||||
/* breadcrumb transition */
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all .5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.breadcrumb-enter,
|
||||
@ -41,7 +41,7 @@
|
||||
}
|
||||
|
||||
.breadcrumb-move {
|
||||
transition: all .5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
|
||||
@ -1,45 +1,73 @@
|
||||
// 全局SCSS变量
|
||||
:root {
|
||||
--menuBg: #304156;
|
||||
--menuColor: #bfcbd9;
|
||||
--menuActiveText: #f4f4f5;
|
||||
--menuHover: #263445;
|
||||
|
||||
--subMenuBg: #1f2d3d;
|
||||
--subMenuActiveText: #f4f4f5;
|
||||
--subMenuHover: #001528;
|
||||
--subMenuTitleHover: #293444;
|
||||
|
||||
--fixedHeaderBg: #ffffff;
|
||||
--tableHeaderBg: #f8f8f9;
|
||||
--tableHeaderTextColor: #515a6e;
|
||||
}
|
||||
html.dark {
|
||||
--menuBg: #1d1e1f;
|
||||
--menuColor: #bfcbd9;
|
||||
--menuActiveText: #f4f4f5;
|
||||
--menuHover: #171819;
|
||||
|
||||
--subMenuBg: #1d1e1f;
|
||||
--subMenuActiveText: #1d1e1f;
|
||||
--subMenuHover: #171819;
|
||||
--subMenuTitleHover: #171819;
|
||||
|
||||
--fixedHeaderBg: #171819;
|
||||
--tableHeaderBg: var(--el-bg-color);
|
||||
--tableHeaderTextColor: var(--el-text-color);
|
||||
|
||||
// 覆盖ele 高亮当前行的标准暗色
|
||||
.el-tree-node__content {
|
||||
--el-color-primary-light-9: #262727;
|
||||
}
|
||||
}
|
||||
|
||||
// base color
|
||||
$blue: #324157;
|
||||
$light-blue: #3A71A8;
|
||||
$red: #C03639;
|
||||
$pink: #E65D6E;
|
||||
$green: #30B08F;
|
||||
$tiffany: #4AB7BD;
|
||||
$yellow: #FEC171;
|
||||
$panGreen: #30B08F;
|
||||
$light-blue: #3a71a8;
|
||||
$red: #c03639;
|
||||
$pink: #e65d6e;
|
||||
$green: #30b08f;
|
||||
$tiffany: #4ab7bd;
|
||||
$yellow: #fec171;
|
||||
$panGreen: #30b08f;
|
||||
|
||||
// 默认菜单主题风格
|
||||
$base-menu-color: #bfcbd9;
|
||||
$base-menu-color-active: #f4f4f5;
|
||||
$base-menu-background: #304156;
|
||||
$base-menu-color: var(--menuColor);
|
||||
$base-menu-hover: var(--menuHover);
|
||||
$base-menu-color-active: var(--menuActiveText);
|
||||
$base-menu-background: var(--menuBg);
|
||||
$base-logo-title-color: #ffffff;
|
||||
|
||||
$base-menu-light-color: rgba(0, 0, 0, 0.7);
|
||||
$base-menu-light-background: #ffffff;
|
||||
$base-logo-light-title-color: #001529;
|
||||
|
||||
$base-sub-menu-background: #1f2d3d;
|
||||
$base-sub-menu-hover: #001528;
|
||||
$base-sub-menu-background: var(--subMenuBg);
|
||||
$base-sub-menu-hover: var(--subMenuHover);
|
||||
$base-sub-menu-title-hover: var(--subMenuTitleHover);
|
||||
// 表单头背景色和标题颜色
|
||||
$fixed-header-bg: var(--fixedHeaderBg);
|
||||
$table-header-bg: var(--tableHeaderBg);
|
||||
$table-header-text-color: var(--tableHeaderTextColor);
|
||||
|
||||
// 自定义暗色菜单风格
|
||||
/**
|
||||
$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;
|
||||
$base-logo-light-title-color: #001529;
|
||||
|
||||
$base-sub-menu-background:#000c17;
|
||||
$base-sub-menu-hover:#001528;
|
||||
*/
|
||||
|
||||
$--color-primary: #409EFF;
|
||||
$--color-success: #67C23A;
|
||||
$--color-warning: #E6A23C;
|
||||
$--color-danger: #F56C6C;
|
||||
$--color-primary: #409eff;
|
||||
$--color-success: #67c23a;
|
||||
$--color-warning: #e6a23c;
|
||||
$--color-danger: #f56c6c;
|
||||
$--color-info: #909399;
|
||||
|
||||
$base-sidebar-width: 200px;
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
// base color
|
||||
$blue:#324157;
|
||||
$light-blue:#3A71A8;
|
||||
$red:#C03639;
|
||||
$pink: #E65D6E;
|
||||
$green: #30B08F;
|
||||
$tiffany: #4AB7BD;
|
||||
$yellow:#FEC171;
|
||||
$panGreen: #30B08F;
|
||||
|
||||
// 默认菜单主题风格
|
||||
$base-menu-color:#bfcbd9;
|
||||
$base-menu-color-active:#f4f4f5;
|
||||
$base-menu-background:#304156;
|
||||
$base-logo-title-color: #ffffff;
|
||||
|
||||
$base-menu-light-color:rgba(0,0,0,.70);
|
||||
$base-menu-light-background:#ffffff;
|
||||
$base-logo-light-title-color: #001529;
|
||||
|
||||
$base-sub-menu-background:#1f2d3d;
|
||||
$base-sub-menu-hover:#001528;
|
||||
|
||||
// 自定义暗色菜单风格
|
||||
/**
|
||||
$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;
|
||||
$base-logo-light-title-color: #001529;
|
||||
|
||||
$base-sub-menu-background:#000c17;
|
||||
$base-sub-menu-hover:#001528;
|
||||
*/
|
||||
|
||||
$base-sidebar-width: 200px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
menuColor: $base-menu-color;
|
||||
menuLightColor: $base-menu-light-color;
|
||||
menuColorActive: $base-menu-color-active;
|
||||
menuBackground: $base-menu-background;
|
||||
menuLightBackground: $base-menu-light-background;
|
||||
subMenuBackground: $base-sub-menu-background;
|
||||
subMenuHover: $base-sub-menu-hover;
|
||||
sideBarWidth: $base-sidebar-width;
|
||||
logoTitleColor: $base-logo-title-color;
|
||||
logoLightTitleColor: $base-logo-light-title-color
|
||||
}
|
||||
27
ruoyi-ui/src/lang/en_US.js
Normal file
27
ruoyi-ui/src/lang/en_US.js
Normal file
@ -0,0 +1,27 @@
|
||||
export default {
|
||||
// 路由国际化
|
||||
route: {
|
||||
dashboard: 'Dashboard',
|
||||
document: 'Document'
|
||||
},
|
||||
// 登录页面国际化
|
||||
login: {
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
login: 'Login',
|
||||
code: 'Verification Code',
|
||||
copyright: ''
|
||||
},
|
||||
// 导航栏国际化
|
||||
navbar: {
|
||||
full: 'Full Screen',
|
||||
language: 'Language',
|
||||
dashboard: 'Dashboard',
|
||||
document: 'Document',
|
||||
layoutSize: 'Layout Size',
|
||||
selectTenant: 'Select Tenant',
|
||||
layoutSetting: 'Layout Setting',
|
||||
personalCenter: 'Personal Center',
|
||||
logout: 'Logout'
|
||||
}
|
||||
};
|
||||
35
ruoyi-ui/src/lang/index.js
Normal file
35
ruoyi-ui/src/lang/index.js
Normal file
@ -0,0 +1,35 @@
|
||||
// 自定义国际化配置
|
||||
import { createI18n } from 'vue-i18n';
|
||||
|
||||
// 本地语言包
|
||||
import enUSLocale from './en_US';
|
||||
import zhCNLocale from './zh_CN';
|
||||
|
||||
const messages = {
|
||||
zh_CN: {
|
||||
...zhCNLocale
|
||||
},
|
||||
en_US: {
|
||||
...enUSLocale
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取当前语言
|
||||
* @returns zh-cn|en ...
|
||||
*/
|
||||
export const getLanguage = () => {
|
||||
const language = useStorage('language', 'zh_CN');
|
||||
if (language.value) {
|
||||
return language.value;
|
||||
}
|
||||
return 'zh_CN';
|
||||
};
|
||||
|
||||
const i18n = createI18n({
|
||||
legacy: false,
|
||||
locale: getLanguage(),
|
||||
messages
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
26
ruoyi-ui/src/lang/zh_CN.js
Normal file
26
ruoyi-ui/src/lang/zh_CN.js
Normal file
@ -0,0 +1,26 @@
|
||||
export default {
|
||||
// 路由国际化
|
||||
route: {
|
||||
dashboard: '首页',
|
||||
document: '项目文档'
|
||||
},
|
||||
// 登录页面国际化
|
||||
login: {
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
login: '登 录',
|
||||
code: '请输入验证码',
|
||||
copyright: ''
|
||||
},
|
||||
navbar: {
|
||||
full: '全屏',
|
||||
language: '语言',
|
||||
dashboard: '首页',
|
||||
document: '项目文档',
|
||||
layoutSize: '布局大小',
|
||||
selectTenant: '选择租户',
|
||||
layoutSetting: '布局设置',
|
||||
personalCenter: '个人中心',
|
||||
logout: '退出登录'
|
||||
}
|
||||
};
|
||||
@ -79,11 +79,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import variables from '@/assets/styles/variables.module.scss'
|
||||
import originElementPlus from 'element-plus/theme-chalk/index.css'
|
||||
import axios from 'axios'
|
||||
import { ElLoading, ElMessage } from 'element-plus'
|
||||
import { useDynamicTitle } from '@/utils/dynamicTitle'
|
||||
import {useStore} from "vuex";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const store = useStore();
|
||||
|
||||
9
ruoyi-ui/src/plugins/svgicon.js
Normal file
9
ruoyi-ui/src/plugins/svgicon.js
Normal file
@ -0,0 +1,9 @@
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
|
||||
|
||||
export default {
|
||||
install: (app) => {
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component);
|
||||
}
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user