ZhaoYang
12 hours ago
44 changed files with 10413 additions and 473 deletions
-
3chenhai-ui/package.json
-
BINchenhai-ui/src/assets/fonts/PingFang-SC.ttf
-
BINchenhai-ui/src/assets/fonts/led.ttf
-
BINchenhai-ui/src/assets/images/11.png
-
BINchenhai-ui/src/assets/images/111.png
-
BINchenhai-ui/src/assets/images/bjt.png
-
BINchenhai-ui/src/assets/images/head.png
-
384chenhai-ui/src/assets/styles/chenhai.scss
-
623chenhai-ui/src/assets/styles/cloud/custom-animation.css
-
1292chenhai-ui/src/assets/styles/cloud/index.css
-
34chenhai-ui/src/assets/styles/cloud/reset.css
-
688chenhai-ui/src/assets/styles/index.css
-
1chenhai-ui/src/assets/styles/index.min.css
-
4chenhai-ui/src/assets/styles/index.scss
-
4chenhai-ui/src/assets/styles/map-theme/default/font-awesome.min.css
-
434chenhai-ui/src/assets/styles/map-theme/default/style.css
-
BINchenhai-ui/src/assets/styles/map-theme/fonts/FontAwesome.otf
-
BINchenhai-ui/src/assets/styles/map-theme/fonts/fontawesome-webfont.eot
-
2671chenhai-ui/src/assets/styles/map-theme/fonts/fontawesome-webfont.svg
-
BINchenhai-ui/src/assets/styles/map-theme/fonts/fontawesome-webfont.ttf
-
BINchenhai-ui/src/assets/styles/map-theme/fonts/fontawesome-webfont.woff
-
BINchenhai-ui/src/assets/styles/map-theme/fonts/fontawesome-webfont.woff2
-
1426chenhai-ui/src/assets/styles/map.css
-
406chenhai-ui/src/assets/styles/map2.css
-
210chenhai-ui/src/assets/styles/ruoyi.scss
-
128chenhai-ui/src/assets/styles/sidebar.scss
-
25chenhai-ui/src/assets/styles/variables.css
-
1chenhai-ui/src/assets/styles/variables.min.css
-
28chenhai-ui/src/assets/styles/variables.scss
-
99chenhai-ui/src/assets/styles1/btn.scss
-
92chenhai-ui/src/assets/styles1/element-ui.scss
-
31chenhai-ui/src/assets/styles1/element-variables.scss
-
178chenhai-ui/src/assets/styles1/index.scss
-
66chenhai-ui/src/assets/styles1/mixin.scss
-
481chenhai-ui/src/assets/styles1/ruoyi.scss
-
321chenhai-ui/src/assets/styles1/sidebar.scss
-
49chenhai-ui/src/assets/styles1/transition.scss
-
39chenhai-ui/src/assets/styles1/variables.scss
-
5chenhai-ui/src/main.js
-
8chenhai-ui/src/router/index.js
-
269chenhai-ui/src/views/Home.vue
-
769chenhai-ui/src/views/login.vue
-
2chenhai-ui/vue.config.js
-
3package-lock.json
|
After Width: 1534 | Height: 111 | Size: 45 KiB |
|
After Width: 1920 | Height: 216 | Size: 214 KiB |
|
After Width: 1280 | Height: 540 | Size: 325 KiB |
|
After Width: 1920 | Height: 139 | Size: 178 KiB |
@ -0,0 +1,384 @@ |
|||
/** |
|||
* 通用css样式布局处理 |
|||
* Copyright (c) 2019 chenhai |
|||
*/ |
|||
|
|||
/** 基础通用 **/ |
|||
.pt5 { |
|||
padding-top: 5px; |
|||
} |
|||
.pr5 { |
|||
padding-right: 5px; |
|||
} |
|||
.pb5 { |
|||
padding-bottom: 5px; |
|||
} |
|||
.mt5 { |
|||
margin-top: 5px; |
|||
} |
|||
.mr5 { |
|||
margin-right: 5px; |
|||
} |
|||
.mb5 { |
|||
margin-bottom: 5px; |
|||
} |
|||
.mb8 { |
|||
margin-bottom: 8px; |
|||
} |
|||
.ml5 { |
|||
margin-left: 5px; |
|||
} |
|||
.mt10 { |
|||
margin-top: 10px; |
|||
} |
|||
.mr10 { |
|||
margin-right: 10px; |
|||
} |
|||
.mb10 { |
|||
margin-bottom: 10px; |
|||
} |
|||
.ml0 { |
|||
margin-left: 10px; |
|||
} |
|||
.mt20 { |
|||
margin-top: 20px; |
|||
} |
|||
.mr20 { |
|||
margin-right: 20px; |
|||
} |
|||
.mb20 { |
|||
margin-bottom: 20px; |
|||
} |
|||
.m20 { |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
.el-dialog:not(.is-fullscreen) { |
|||
margin-top: 6vh !important; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** 表单布局 **/ |
|||
.form-header { |
|||
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; |
|||
} |
|||
|
|||
/* tree border */ |
|||
.tree-border { |
|||
margin-top: 5px; |
|||
border: 1px solid #e5e6e7; |
|||
background: #ffffff none; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.pagination-container .el-pagination { |
|||
right: 0; |
|||
position: absolute; |
|||
} |
|||
|
|||
.el-table .fixed-width .el-button--mini { |
|||
color: #409eff; |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
width: inherit; |
|||
} |
|||
|
|||
.el-tree-node__content > .el-checkbox { |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.list-group-striped > .list-group-item { |
|||
border-left: 0; |
|||
border-right: 0; |
|||
border-radius: 0; |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
} |
|||
|
|||
.list-group { |
|||
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; |
|||
} |
|||
|
|||
.pull-right { |
|||
float: right !important; |
|||
} |
|||
|
|||
.el-card__header { |
|||
padding: 14px 15px 7px; |
|||
min-height: 40px; |
|||
} |
|||
|
|||
.el-card__body { |
|||
padding: 15px 20px 20px 20px; |
|||
} |
|||
|
|||
.card-box { |
|||
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; |
|||
} |
|||
|
|||
.el-button--cyan:focus, |
|||
.el-button--cyan:hover { |
|||
background: #48d1cc; |
|||
border-color: #48d1cc; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.el-button--cyan { |
|||
background-color: #20b2aa; |
|||
border-color: #20b2aa; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.up { |
|||
position: relative; |
|||
// padding-right: 15px; |
|||
&::after { |
|||
content: '\279C'; |
|||
position: absolute; |
|||
top: 0; |
|||
right: -20px; |
|||
bottom: 2px; |
|||
color: #00ac51; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
transform: rotateZ(-90deg); |
|||
} |
|||
} |
|||
|
|||
.down { |
|||
position: relative; |
|||
// padding-right: 15px; |
|||
&::after { |
|||
content: '\279C'; |
|||
position: absolute; |
|||
top: 0; |
|||
right: -15px; |
|||
bottom: 2px; |
|||
color: #ef3248; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
transform: rotateZ(90deg); |
|||
} |
|||
} |
|||
|
|||
/* text color */ |
|||
.text-navy { |
|||
color: #00ac51; |
|||
} |
|||
|
|||
.text-primary { |
|||
color: inherit; |
|||
} |
|||
|
|||
.text-success { |
|||
color: #0095ff; |
|||
} |
|||
|
|||
.text-info { |
|||
color: #525264; |
|||
} |
|||
|
|||
.text-warning { |
|||
color: #f8ac59; |
|||
} |
|||
|
|||
.text-danger { |
|||
color: #ef3248; |
|||
} |
|||
|
|||
.text-muted { |
|||
color: #888888; |
|||
} |
|||
|
|||
/* background color */ |
|||
.bg-navy { |
|||
background-color: #00ac51; |
|||
} |
|||
|
|||
.bg-success { |
|||
background-color: #0095ff; |
|||
} |
|||
|
|||
.bg-info { |
|||
background-color: #23c6c8; |
|||
} |
|||
|
|||
.bg-warning { |
|||
background-color: #f8ac59; |
|||
} |
|||
|
|||
.bg-danger { |
|||
background-color: #ef3248; |
|||
} |
|||
|
|||
.bg-muted { |
|||
background-color: #888888; |
|||
} |
|||
|
|||
.bg-success-opacity { |
|||
background-color: #0095ff20; |
|||
} |
|||
|
|||
.bg-warning-opacity { |
|||
background-color: #f8ac5920; |
|||
} |
|||
|
|||
.bg-danger-opacity { |
|||
background-color: #ef324820; |
|||
} |
|||
|
|||
.bg-light-blue { |
|||
border: 1px solid #0095ff; |
|||
background: #e2f6ff; |
|||
} |
|||
.bg-light-grey { |
|||
border: 1px solid #525264; |
|||
background: #d7dbf2; |
|||
} |
|||
.bg-light-green { |
|||
border: 1px solid #00ac51; |
|||
background: #dcf7e9; |
|||
} |
|||
.bg-light-orange { |
|||
border: 1px solid #f8ac59; |
|||
background: #f6e8df; |
|||
} |
|||
|
|||
.border-success { |
|||
border-color: #0095ff20; |
|||
} |
|||
|
|||
.border-navy { |
|||
border-color: #00ac5120; |
|||
} |
|||
|
|||
/* image */ |
|||
.img-circle { |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.img-lg { |
|||
width: 120px; |
|||
height: 120px; |
|||
} |
|||
|
|||
.avatar-upload-preview { |
|||
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: 0.8; |
|||
color: #fff !important; |
|||
background: #00ac51 !important; |
|||
} |
|||
|
|||
.top-right-btn { |
|||
position: relative; |
|||
float: right; |
|||
} |
|||
|
|||
.vue-treeselect--has-value .vue-treeselect__input { |
|||
vertical-align: middle !important; |
|||
} |
|||
|
|||
.el-upload__tip { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.el-select { |
|||
width: 100%; |
|||
} |
|||
|
|||
.el-dialog { |
|||
.el-descriptions { |
|||
font-size: 16px; |
|||
margin-bottom: 15px; |
|||
} |
|||
.el-dialog__body { |
|||
overflow-y: auto; |
|||
padding-bottom: 75px; |
|||
max-height: 750px; |
|||
} |
|||
.el-dialog__footer { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
.el-tag + .el-tag { |
|||
margin-left: 10px; |
|||
} |
|||
.el-alert { |
|||
padding: 0px 16px !important; |
|||
} |
|||
.button-new-tag { |
|||
margin-left: 10px; |
|||
height: 32px; |
|||
line-height: 30px; |
|||
padding-top: 0; |
|||
padding-bottom: 0; |
|||
} |
|||
.input-new-tag { |
|||
width: 90px; |
|||
margin-left: 10px; |
|||
vertical-align: bottom; |
|||
} |
|||
@ -0,0 +1,623 @@ |
|||
@keyframes fadeIn { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
|
|||
to { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeInLeft { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translate3d(-200px, 0, 0); |
|||
transform: translate3d(-200px, 0, 0); |
|||
} |
|||
|
|||
to { |
|||
opacity: 1; |
|||
transform: none; |
|||
transform: none; |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeInRight { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translate3d(200px, 0, 0); |
|||
transform: translate3d(200px, 0, 0); |
|||
} |
|||
|
|||
to { |
|||
opacity: 1; |
|||
transform: none; |
|||
transform: none; |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeInUp { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translate3d(0, 200px, 0); |
|||
transform: translate3d(0, 200px, 0); |
|||
} |
|||
|
|||
to { |
|||
opacity: 1; |
|||
transform: none; |
|||
transform: none; |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeInDown { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translate3d(0, -200px, 0); |
|||
transform: translate3d(0, -200px, 0); |
|||
} |
|||
|
|||
to { |
|||
opacity: 1; |
|||
transform: none; |
|||
transform: none; |
|||
} |
|||
} |
|||
|
|||
@keyframes flipInY { |
|||
0% { |
|||
transform: perspective(400px) rotateY(90deg); |
|||
transform: perspective(400px) rotateY(90deg); |
|||
animation-timing-function: ease-in; |
|||
animation-timing-function: ease-in; |
|||
opacity: 0; |
|||
} |
|||
|
|||
40% { |
|||
transform: perspective(400px) rotateY(-20deg); |
|||
transform: perspective(400px) rotateY(-20deg); |
|||
animation-timing-function: ease-in; |
|||
animation-timing-function: ease-in; |
|||
} |
|||
|
|||
60% { |
|||
transform: perspective(400px) rotateY(10deg); |
|||
transform: perspective(400px) rotateY(10deg); |
|||
opacity: 1; |
|||
} |
|||
|
|||
80% { |
|||
transform: perspective(400px) rotateY(-5deg); |
|||
transform: perspective(400px) rotateY(-5deg); |
|||
} |
|||
|
|||
to { |
|||
transform: perspective(400px); |
|||
transform: perspective(400px); |
|||
} |
|||
} |
|||
|
|||
@keyframes bounceInLeft { |
|||
0%, |
|||
60%, |
|||
75%, |
|||
90%, |
|||
to { |
|||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); |
|||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); |
|||
} |
|||
|
|||
0% { |
|||
opacity: 0; |
|||
transform: translate3d(-3000px, 0, 0); |
|||
transform: translate3d(-3000px, 0, 0); |
|||
} |
|||
|
|||
60% { |
|||
opacity: 1; |
|||
transform: translate3d(25px, 0, 0); |
|||
transform: translate3d(25px, 0, 0); |
|||
} |
|||
|
|||
75% { |
|||
transform: translate3d(-10px, 0, 0); |
|||
transform: translate3d(-10px, 0, 0); |
|||
} |
|||
|
|||
90% { |
|||
transform: translate3d(5px, 0, 0); |
|||
transform: translate3d(5px, 0, 0); |
|||
} |
|||
|
|||
to { |
|||
transform: none; |
|||
transform: none; |
|||
} |
|||
} |
|||
|
|||
@keyframes bounceInRight { |
|||
0%, |
|||
60%, |
|||
75%, |
|||
90%, |
|||
to { |
|||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); |
|||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); |
|||
} |
|||
|
|||
0% { |
|||
opacity: 0; |
|||
transform: translate3d(3000px, 0, 0); |
|||
transform: translate3d(3000px, 0, 0); |
|||
} |
|||
|
|||
60% { |
|||
opacity: 1; |
|||
transform: translate3d(-25px, 0, 0); |
|||
transform: translate3d(-25px, 0, 0); |
|||
} |
|||
|
|||
75% { |
|||
transform: translate3d(10px, 0, 0); |
|||
transform: translate3d(10px, 0, 0); |
|||
} |
|||
|
|||
90% { |
|||
transform: translate3d(-5px, 0, 0); |
|||
transform: translate3d(-5px, 0, 0); |
|||
} |
|||
|
|||
to { |
|||
transform: none; |
|||
transform: none; |
|||
} |
|||
} |
|||
|
|||
@keyframes bounceInUp { |
|||
0%, |
|||
60%, |
|||
75%, |
|||
90%, |
|||
to { |
|||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); |
|||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); |
|||
} |
|||
|
|||
0% { |
|||
opacity: 0; |
|||
transform: translate3d(0, 3000px, 0); |
|||
transform: translate3d(0, 3000px, 0); |
|||
} |
|||
|
|||
60% { |
|||
opacity: 1; |
|||
transform: translate3d(0, -25px, 0); |
|||
transform: translate3d(0, -25px, 0); |
|||
} |
|||
|
|||
75% { |
|||
transform: translate3d(0, 10px, 0); |
|||
transform: translate3d(0, 10px, 0); |
|||
} |
|||
|
|||
90% { |
|||
transform: translate3d(0, -5px, 0); |
|||
transform: translate3d(0, -5px, 0); |
|||
} |
|||
|
|||
to { |
|||
transform: none; |
|||
transform: none; |
|||
} |
|||
} |
|||
|
|||
@keyframes bounceInDown { |
|||
0%, |
|||
60%, |
|||
75%, |
|||
90%, |
|||
to { |
|||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); |
|||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); |
|||
} |
|||
|
|||
0% { |
|||
opacity: 0; |
|||
transform: translate3d(0, -3000px, 0); |
|||
transform: translate3d(0, -3000px, 0); |
|||
} |
|||
|
|||
60% { |
|||
opacity: 1; |
|||
transform: translate3d(0, 25px, 0); |
|||
transform: translate3d(0, 25px, 0); |
|||
} |
|||
|
|||
75% { |
|||
transform: translate3d(0, -10px, 0); |
|||
transform: translate3d(0, -10px, 0); |
|||
} |
|||
|
|||
90% { |
|||
transform: translate3d(0, 5px, 0); |
|||
transform: translate3d(0, 5px, 0); |
|||
} |
|||
|
|||
to { |
|||
transform: none; |
|||
transform: none; |
|||
} |
|||
} |
|||
|
|||
@keyframes wobble { |
|||
0% { |
|||
transform: none; |
|||
transform: none; |
|||
} |
|||
|
|||
15% { |
|||
transform: translate3d(-25%, 0, 0) rotate(-5deg); |
|||
transform: translate3d(-25%, 0, 0) rotate(-5deg); |
|||
} |
|||
|
|||
30% { |
|||
transform: translate3d(20%, 0, 0) rotate(3deg); |
|||
transform: translate3d(20%, 0, 0) rotate(3deg); |
|||
} |
|||
|
|||
45% { |
|||
transform: translate3d(-15%, 0, 0) rotate(-3deg); |
|||
transform: translate3d(-15%, 0, 0) rotate(-3deg); |
|||
} |
|||
|
|||
60% { |
|||
transform: translate3d(10%, 0, 0) rotate(2deg); |
|||
transform: translate3d(10%, 0, 0) rotate(2deg); |
|||
} |
|||
|
|||
75% { |
|||
transform: translate3d(-5%, 0, 0) rotate(-1deg); |
|||
transform: translate3d(-5%, 0, 0) rotate(-1deg); |
|||
} |
|||
|
|||
to { |
|||
transform: none; |
|||
transform: none; |
|||
} |
|||
} |
|||
|
|||
@keyframes rubberBand { |
|||
0% { |
|||
transform: scaleX(1); |
|||
transform: scaleX(1); |
|||
} |
|||
|
|||
30% { |
|||
transform: scale3d(1.25, 0.75, 1); |
|||
transform: scale3d(1.25, 0.75, 1); |
|||
} |
|||
|
|||
40% { |
|||
transform: scale3d(0.75, 1.25, 1); |
|||
transform: scale3d(0.75, 1.25, 1); |
|||
} |
|||
|
|||
50% { |
|||
transform: scale3d(1.15, 0.85, 1); |
|||
transform: scale3d(1.15, 0.85, 1); |
|||
} |
|||
|
|||
65% { |
|||
transform: scale3d(0.95, 1.05, 1); |
|||
transform: scale3d(0.95, 1.05, 1); |
|||
} |
|||
|
|||
75% { |
|||
transform: scale3d(1.05, 0.95, 1); |
|||
transform: scale3d(1.05, 0.95, 1); |
|||
} |
|||
|
|||
to { |
|||
transform: scaleX(1); |
|||
transform: scaleX(1); |
|||
} |
|||
} |
|||
|
|||
@keyframes rotateIn { |
|||
0% { |
|||
transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
to { |
|||
transform: rotate(1turn); |
|||
transform: rotate(1turn); |
|||
} |
|||
} |
|||
|
|||
@keyframes flip { |
|||
0% { |
|||
transform: perspective(400px) rotateY(-1turn); |
|||
transform: perspective(400px) rotateY(-1turn); |
|||
animation-timing-function: ease-out; |
|||
animation-timing-function: ease-out; |
|||
} |
|||
|
|||
40% { |
|||
transform: perspective(400px) translateZ(150px) rotateY(-190deg); |
|||
transform: perspective(400px) translateZ(150px) rotateY(-190deg); |
|||
animation-timing-function: ease-out; |
|||
animation-timing-function: ease-out; |
|||
} |
|||
|
|||
50% { |
|||
transform: perspective(400px) translateZ(150px) rotateY(-170deg); |
|||
transform: perspective(400px) translateZ(150px) rotateY(-170deg); |
|||
animation-timing-function: ease-in; |
|||
animation-timing-function: ease-in; |
|||
} |
|||
|
|||
80% { |
|||
transform: perspective(400px) scale3d(0.95, 0.95, 0.95); |
|||
transform: perspective(400px) scale3d(0.95, 0.95, 0.95); |
|||
animation-timing-function: ease-in; |
|||
animation-timing-function: ease-in; |
|||
} |
|||
|
|||
to { |
|||
transform: perspective(400px); |
|||
transform: perspective(400px); |
|||
animation-timing-function: ease-in; |
|||
animation-timing-function: ease-in; |
|||
} |
|||
} |
|||
|
|||
@keyframes swing { |
|||
20% { |
|||
transform: rotate(15deg); |
|||
transform: rotate(15deg); |
|||
} |
|||
|
|||
40% { |
|||
transform: rotate(-10deg); |
|||
transform: rotate(-10deg); |
|||
} |
|||
|
|||
60% { |
|||
transform: rotate(5deg); |
|||
transform: rotate(5deg); |
|||
} |
|||
|
|||
80% { |
|||
transform: rotate(-5deg); |
|||
transform: rotate(-5deg); |
|||
} |
|||
|
|||
to { |
|||
transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
} |
|||
|
|||
@keyframes flash { |
|||
0%, |
|||
50%, |
|||
to { |
|||
opacity: 1; |
|||
} |
|||
|
|||
25%, |
|||
75% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
@keyframes slideDown { |
|||
0% { |
|||
transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
transform: translateY(0); |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
to { |
|||
transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
transform: translateY(100%); |
|||
transform: translateY(100%); |
|||
} |
|||
} |
|||
|
|||
@keyframes slideUp { |
|||
0% { |
|||
transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
transform: translateY(0); |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
to { |
|||
transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
transform: translateY(-100%); |
|||
transform: translateY(-100%); |
|||
} |
|||
} |
|||
|
|||
@keyframes tada { |
|||
0% { |
|||
transform: scaleX(1); |
|||
transform: scaleX(1); |
|||
} |
|||
|
|||
10%, |
|||
20% { |
|||
transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); |
|||
transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); |
|||
} |
|||
|
|||
30%, |
|||
50%, |
|||
70%, |
|||
90% { |
|||
transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); |
|||
transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); |
|||
} |
|||
|
|||
40%, |
|||
60%, |
|||
80% { |
|||
transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); |
|||
transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); |
|||
} |
|||
|
|||
to { |
|||
transform: scaleX(1); |
|||
transform: scaleX(1); |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeOut { |
|||
0% { |
|||
opacity: 1; |
|||
} |
|||
|
|||
to { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeOutLeft { |
|||
0% { |
|||
opacity: 1; |
|||
} |
|||
|
|||
to { |
|||
opacity: 0; |
|||
transform: translate3d(-100%, 0, 0); |
|||
transform: translate3d(-100%, 0, 0); |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeOutRight { |
|||
0% { |
|||
opacity: 1; |
|||
} |
|||
|
|||
to { |
|||
opacity: 0; |
|||
transform: translate3d(100%, 0, 0); |
|||
transform: translate3d(100%, 0, 0); |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeOutUp { |
|||
0% { |
|||
opacity: 1; |
|||
} |
|||
|
|||
to { |
|||
opacity: 0; |
|||
transform: translate3d(0, -100%, 0); |
|||
transform: translate3d(0, -100%, 0); |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeOutDown { |
|||
0% { |
|||
opacity: 1; |
|||
} |
|||
|
|||
to { |
|||
opacity: 0; |
|||
transform: translate3d(0, 100%, 0); |
|||
transform: translate3d(0, 100%, 0); |
|||
} |
|||
} |
|||
|
|||
@keyframes bounceOutLeft { |
|||
20% { |
|||
opacity: 1; |
|||
transform: translate3d(20px, 0, 0); |
|||
transform: translate3d(20px, 0, 0); |
|||
} |
|||
|
|||
to { |
|||
opacity: 0; |
|||
transform: translate3d(-2000px, 0, 0); |
|||
transform: translate3d(-2000px, 0, 0); |
|||
} |
|||
} |
|||
|
|||
@keyframes bounceOutRight { |
|||
20% { |
|||
opacity: 1; |
|||
transform: translate3d(-20px, 0, 0); |
|||
transform: translate3d(-20px, 0, 0); |
|||
} |
|||
|
|||
to { |
|||
opacity: 0; |
|||
transform: translate3d(2000px, 0, 0); |
|||
transform: translate3d(2000px, 0, 0); |
|||
} |
|||
} |
|||
|
|||
@keyframes bounceOutUp { |
|||
20% { |
|||
transform: translate3d(0, -10px, 0); |
|||
transform: translate3d(0, -10px, 0); |
|||
} |
|||
|
|||
40%, |
|||
45% { |
|||
opacity: 1; |
|||
transform: translate3d(0, 20px, 0); |
|||
transform: translate3d(0, 20px, 0); |
|||
} |
|||
|
|||
to { |
|||
opacity: 0; |
|||
transform: translate3d(0, -2000px, 0); |
|||
transform: translate3d(0, -2000px, 0); |
|||
} |
|||
} |
|||
|
|||
@keyframes bounceOutDown { |
|||
20% { |
|||
transform: translate3d(0, 10px, 0); |
|||
transform: translate3d(0, 10px, 0); |
|||
} |
|||
|
|||
40%, |
|||
45% { |
|||
opacity: 1; |
|||
transform: translate3d(0, -20px, 0); |
|||
transform: translate3d(0, -20px, 0); |
|||
} |
|||
|
|||
to { |
|||
opacity: 0; |
|||
transform: translate3d(0, 2000px, 0); |
|||
transform: translate3d(0, 2000px, 0); |
|||
} |
|||
} |
|||
|
|||
@keyframes flipOutY { |
|||
0% { |
|||
transform: perspective(400px); |
|||
transform: perspective(400px); |
|||
} |
|||
|
|||
30% { |
|||
transform: perspective(400px) rotateY(-15deg); |
|||
transform: perspective(400px) rotateY(-15deg); |
|||
opacity: 1; |
|||
} |
|||
|
|||
to { |
|||
transform: perspective(400px) rotateY(90deg); |
|||
transform: perspective(400px) rotateY(90deg); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
1292
chenhai-ui/src/assets/styles/cloud/index.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,34 @@ |
|||
@font-face { |
|||
font-family: "led"; |
|||
src: url("../../fonts/led.ttf"); |
|||
} |
|||
|
|||
/* @font-face { |
|||
font-family: "PingFang-SC-Semibold"; |
|||
src: url("../../fonts/PingFang-SC-Semibold.ttf"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: "PingFang-Light"; |
|||
src: url("../../fonts/PingFang-Light.ttf"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: "PingFang-Bold"; |
|||
src: url("../../fonts/PingFang-Bold.ttf"); |
|||
} */ |
|||
|
|||
@font-face { |
|||
font-family: "PingFang-SC"; |
|||
src: url("../../fonts/PingFang-SC.ttf"); |
|||
} |
|||
/* |
|||
@font-face { |
|||
font-family: "PingFang-JT"; |
|||
src: url("../../fonts/PingFang-JT.ttf"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: "PingFang-JC"; |
|||
src: url("../../fonts/PingFang-JC.ttf"); |
|||
} */ |
|||
@ -0,0 +1,688 @@ |
|||
/** |
|||
$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; |
|||
*/ |
|||
:export { |
|||
menuColor: #fff; |
|||
menuLightColor: rgba(0, 0, 0, 0.7); |
|||
menuColorActive: #e78361; |
|||
menuBackground: #4383cc; |
|||
menuLightBackground: #ffffff; |
|||
subMenuBackground: #529add; |
|||
subMenuHover: #FEC171; |
|||
sideBarWidth: 200px; |
|||
logoTitleColor: #ffffff; |
|||
logoLightTitleColor: #4ea7fa; |
|||
} |
|||
|
|||
/* fade */ |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.28s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-active { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* fade-transform */ |
|||
.fade-transform--move, |
|||
.fade-transform-leave-active, |
|||
.fade-transform-enter-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.fade-transform-enter { |
|||
opacity: 0; |
|||
transform: translateX(-30px); |
|||
} |
|||
|
|||
.fade-transform-leave-to { |
|||
opacity: 0; |
|||
transform: translateX(30px); |
|||
} |
|||
|
|||
/* breadcrumb transition */ |
|||
.breadcrumb-enter-active, |
|||
.breadcrumb-leave-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-enter, |
|||
.breadcrumb-leave-active { |
|||
opacity: 0; |
|||
transform: translateX(20px); |
|||
} |
|||
|
|||
.breadcrumb-move { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-leave-active { |
|||
position: absolute; |
|||
} |
|||
|
|||
.el-breadcrumb__inner, |
|||
.el-breadcrumb__inner a { |
|||
font-weight: 400 !important; |
|||
} |
|||
|
|||
.el-upload input[type="file"] { |
|||
display: none !important; |
|||
} |
|||
|
|||
.el-upload__input { |
|||
display: none; |
|||
} |
|||
|
|||
.cell .el-tag { |
|||
margin-right: 0px; |
|||
} |
|||
|
|||
.small-padding .cell { |
|||
padding-left: 5px; |
|||
padding-right: 5px; |
|||
} |
|||
|
|||
.fixed-width .el-button--mini { |
|||
padding: 7px 10px; |
|||
width: 60px; |
|||
} |
|||
|
|||
.status-col .cell { |
|||
padding: 0 10px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.status-col .cell .el-tag { |
|||
margin-right: 0px; |
|||
} |
|||
|
|||
.el-dialog { |
|||
transform: none; |
|||
left: 0; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.upload-container .el-upload { |
|||
width: 100%; |
|||
} |
|||
|
|||
.upload-container .el-upload .el-upload-dragger { |
|||
width: 100%; |
|||
height: 200px; |
|||
} |
|||
|
|||
.el-dropdown-menu a { |
|||
display: block; |
|||
} |
|||
|
|||
.el-range-editor.el-input__inner { |
|||
display: inline-flex !important; |
|||
} |
|||
|
|||
.el-range-separator { |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
.el-menu--collapse |
|||
> div |
|||
> .el-submenu |
|||
> .el-submenu__title |
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
|
|||
#app .main-container { |
|||
height: 100%; |
|||
transition: margin-left .28s; |
|||
margin-left: 200px; |
|||
position: relative; |
|||
} |
|||
|
|||
#app .sidebarHide { |
|||
margin-left: 0 !important; |
|||
} |
|||
|
|||
#app .el-menu-item.is-active { |
|||
color: #e78361 !important; |
|||
background-color: rgba(255, 255, 255, 0.3) !important; |
|||
} |
|||
|
|||
#app .el-menu-item.is-active:hover { |
|||
background-color: #4383cc; |
|||
} |
|||
|
|||
#app .sidebar-container { |
|||
-webkit-transition: width .28s; |
|||
transition: width 0.28s; |
|||
width: 200px !important; |
|||
background-color: #4383cc; |
|||
height: 100%; |
|||
position: fixed; |
|||
font-size: 0px; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); |
|||
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); |
|||
} |
|||
|
|||
#app .sidebar-container .horizontal-collapse-transition { |
|||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; |
|||
} |
|||
|
|||
#app .sidebar-container .scrollbar-wrapper { |
|||
overflow-x: hidden !important; |
|||
} |
|||
|
|||
#app .sidebar-container .el-scrollbar__bar.is-vertical { |
|||
right: 0px; |
|||
} |
|||
|
|||
#app .sidebar-container .el-scrollbar { |
|||
height: 100%; |
|||
} |
|||
|
|||
#app .sidebar-container.has-logo .el-scrollbar { |
|||
height: calc(100% - 50px); |
|||
} |
|||
|
|||
#app .sidebar-container .is-horizontal { |
|||
display: none; |
|||
} |
|||
|
|||
#app .sidebar-container a { |
|||
display: inline-block; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
#app .sidebar-container .svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
#app .sidebar-container .el-menu { |
|||
border: none; |
|||
height: 100%; |
|||
width: 100% !important; |
|||
} |
|||
|
|||
#app .sidebar-container .el-menu-item, #app .sidebar-container .el-submenu__title { |
|||
overflow: hidden !important; |
|||
text-overflow: ellipsis !important; |
|||
white-space: nowrap !important; |
|||
} |
|||
|
|||
#app .sidebar-container .submenu-title-noDropdown:hover, |
|||
#app .sidebar-container .el-submenu__title:hover { |
|||
background-color: rgba(0, 0, 0, 0.06) !important; |
|||
} |
|||
|
|||
#app .sidebar-container .theme-dark .is-active > .el-submenu__title { |
|||
color: #e78361 !important; |
|||
} |
|||
|
|||
#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title, |
|||
#app .sidebar-container .el-submenu .el-menu-item { |
|||
min-width: 200px !important; |
|||
} |
|||
|
|||
#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover, |
|||
#app .sidebar-container .el-submenu .el-menu-item:hover { |
|||
background-color: rgba(0, 0, 0, 0.06) !important; |
|||
} |
|||
|
|||
#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title, |
|||
#app .sidebar-container .theme-dark .el-submenu .el-menu-item { |
|||
background-color: #529add !important; |
|||
} |
|||
|
|||
#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title:hover, |
|||
#app .sidebar-container .theme-dark .el-submenu .el-menu-item:hover { |
|||
background-color: #FEC171 !important; |
|||
} |
|||
|
|||
#app .hideSidebar .sidebar-container { |
|||
width: 54px !important; |
|||
} |
|||
|
|||
#app .hideSidebar .main-container { |
|||
margin-left: 54px; |
|||
} |
|||
|
|||
#app .hideSidebar .submenu-title-noDropdown { |
|||
padding: 0 !important; |
|||
position: relative; |
|||
} |
|||
|
|||
#app .hideSidebar .submenu-title-noDropdown .el-tooltip { |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
#app .hideSidebar .submenu-title-noDropdown .el-tooltip .svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
#app .hideSidebar .el-submenu { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
#app .hideSidebar .el-submenu > .el-submenu__title { |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
#app .hideSidebar .el-submenu > .el-submenu__title .svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
#app .hideSidebar .el-menu--collapse .el-submenu > .el-submenu__title > span { |
|||
height: 0; |
|||
width: 0; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
display: inline-block; |
|||
} |
|||
|
|||
#app .el-menu--collapse .el-menu .el-submenu { |
|||
min-width: 200px !important; |
|||
} |
|||
|
|||
#app .mobile .main-container { |
|||
margin-left: 0px; |
|||
} |
|||
|
|||
#app .mobile .sidebar-container { |
|||
transition: transform .28s; |
|||
width: 200px !important; |
|||
} |
|||
|
|||
#app .mobile.hideSidebar .sidebar-container { |
|||
pointer-events: none; |
|||
transition-duration: 0.3s; |
|||
transform: translate3d(-200px, 0, 0); |
|||
} |
|||
|
|||
#app .withoutAnimation .main-container, |
|||
#app .withoutAnimation .sidebar-container { |
|||
transition: none; |
|||
} |
|||
|
|||
.el-menu--vertical > .el-menu .svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
.el-menu--vertical .nest-menu .el-submenu > .el-submenu__title:hover, |
|||
.el-menu--vertical .el-menu-item:hover { |
|||
background-color: rgba(0, 0, 0, 0.06) !important; |
|||
} |
|||
|
|||
.el-menu--vertical > .el-menu--popup { |
|||
max-height: 100vh; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
.el-menu--vertical > .el-menu--popup::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
/** |
|||
$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; |
|||
*/ |
|||
:export { |
|||
menuColor: #fff; |
|||
menuLightColor: rgba(0, 0, 0, 0.7); |
|||
menuColorActive: #e78361; |
|||
menuBackground: #4383cc; |
|||
menuLightBackground: #ffffff; |
|||
subMenuBackground: #529add; |
|||
subMenuHover: #FEC171; |
|||
sideBarWidth: 200px; |
|||
logoTitleColor: #ffffff; |
|||
logoLightTitleColor: #4ea7fa; |
|||
} |
|||
|
|||
.blue-btn { |
|||
background: #324157; |
|||
} |
|||
|
|||
.blue-btn:hover { |
|||
color: #324157; |
|||
} |
|||
|
|||
.blue-btn:hover:before, .blue-btn:hover:after { |
|||
background: #324157; |
|||
} |
|||
|
|||
.light-blue-btn { |
|||
background: #3A71A8; |
|||
} |
|||
|
|||
.light-blue-btn:hover { |
|||
color: #3A71A8; |
|||
} |
|||
|
|||
.light-blue-btn:hover:before, .light-blue-btn:hover:after { |
|||
background: #3A71A8; |
|||
} |
|||
|
|||
.red-btn { |
|||
background: #C03639; |
|||
} |
|||
|
|||
.red-btn:hover { |
|||
color: #C03639; |
|||
} |
|||
|
|||
.red-btn:hover:before, .red-btn:hover:after { |
|||
background: #C03639; |
|||
} |
|||
|
|||
.pink-btn { |
|||
background: #E65D6E; |
|||
} |
|||
|
|||
.pink-btn:hover { |
|||
color: #E65D6E; |
|||
} |
|||
|
|||
.pink-btn:hover:before, .pink-btn:hover:after { |
|||
background: #E65D6E; |
|||
} |
|||
|
|||
.green-btn { |
|||
background: #30B08F; |
|||
} |
|||
|
|||
.green-btn:hover { |
|||
color: #30B08F; |
|||
} |
|||
|
|||
.green-btn:hover:before, .green-btn:hover:after { |
|||
background: #30B08F; |
|||
} |
|||
|
|||
.tiffany-btn { |
|||
background: #4AB7BD; |
|||
} |
|||
|
|||
.tiffany-btn:hover { |
|||
color: #4AB7BD; |
|||
} |
|||
|
|||
.tiffany-btn:hover:before, .tiffany-btn:hover:after { |
|||
background: #4AB7BD; |
|||
} |
|||
|
|||
.yellow-btn { |
|||
background: #FEC171; |
|||
} |
|||
|
|||
.yellow-btn:hover { |
|||
color: #FEC171; |
|||
} |
|||
|
|||
.yellow-btn:hover:before, .yellow-btn:hover:after { |
|||
background: #FEC171; |
|||
} |
|||
|
|||
.pan-btn { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
padding: 14px 36px; |
|||
border-radius: 8px; |
|||
border: none; |
|||
outline: none; |
|||
transition: 600ms ease all; |
|||
position: relative; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.pan-btn:hover { |
|||
background: #fff; |
|||
} |
|||
|
|||
.pan-btn:hover:before, .pan-btn:hover:after { |
|||
width: 100%; |
|||
transition: 600ms ease all; |
|||
} |
|||
|
|||
.pan-btn:before, .pan-btn:after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
height: 2px; |
|||
width: 0; |
|||
transition: 400ms ease all; |
|||
} |
|||
|
|||
.pan-btn::after { |
|||
right: inherit; |
|||
top: inherit; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.custom-button { |
|||
display: inline-block; |
|||
line-height: 1; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
background: #fff; |
|||
color: #fff; |
|||
-webkit-appearance: none; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
outline: 0; |
|||
margin: 0; |
|||
padding: 10px 15px; |
|||
font-size: 14px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
#app { |
|||
height: 100%; |
|||
} |
|||
|
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
|
|||
.no-padding { |
|||
padding: 0px !important; |
|||
} |
|||
|
|||
.padding-content { |
|||
padding: 4px 0; |
|||
} |
|||
|
|||
a:focus, |
|||
a:active { |
|||
outline: none; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
div:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
.fr { |
|||
float: right; |
|||
} |
|||
|
|||
.fl { |
|||
float: left; |
|||
} |
|||
|
|||
.pr-5 { |
|||
padding-right: 5px; |
|||
} |
|||
|
|||
.pl-5 { |
|||
padding-left: 5px; |
|||
} |
|||
|
|||
.block { |
|||
display: block; |
|||
} |
|||
|
|||
.pointer { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.inlineBlock { |
|||
display: block; |
|||
} |
|||
|
|||
.clearfix:after { |
|||
visibility: hidden; |
|||
display: block; |
|||
font-size: 0; |
|||
content: " "; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
|
|||
aside { |
|||
background: #eef1f6; |
|||
padding: 8px 24px; |
|||
margin-bottom: 20px; |
|||
border-radius: 2px; |
|||
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; |
|||
color: #2c3e50; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
aside a { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
aside a:hover { |
|||
color: #20a0ff; |
|||
} |
|||
|
|||
.app-container { |
|||
padding: 20px; |
|||
} |
|||
|
|||
.components-container { |
|||
margin: 30px 50px; |
|||
position: relative; |
|||
} |
|||
|
|||
.pagination-container { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
|
|||
.sub-navbar { |
|||
height: 50px; |
|||
line-height: 50px; |
|||
position: relative; |
|||
width: 100%; |
|||
text-align: right; |
|||
padding-right: 20px; |
|||
transition: 600ms ease position; |
|||
background: linear-gradient(90deg, #20b6f9 0%, #20b6f9 0%, #2178f1 100%, #2178f1 100%); |
|||
} |
|||
|
|||
.sub-navbar .subtitle { |
|||
font-size: 20px; |
|||
color: #fff; |
|||
} |
|||
|
|||
.sub-navbar.draft { |
|||
background: #d0d0d0; |
|||
} |
|||
|
|||
.sub-navbar.deleted { |
|||
background: #d0d0d0; |
|||
} |
|||
|
|||
.link-type, |
|||
.link-type:focus { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.link-type:hover, |
|||
.link-type:focus:hover { |
|||
color: #20a0ff; |
|||
} |
|||
|
|||
.filter-container { |
|||
padding-bottom: 10px; |
|||
} |
|||
|
|||
.filter-container .filter-item { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin-bottom: 10px; |
|||
} |
|||
1
chenhai-ui/src/assets/styles/index.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
4
chenhai-ui/src/assets/styles/map-theme/default/font-awesome.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,434 @@ |
|||
div.olMap { |
|||
z-index: 0; |
|||
padding: 0 !important; |
|||
margin: 0 !important; |
|||
cursor: default; |
|||
} |
|||
|
|||
div.olMapViewport { |
|||
text-align: left; |
|||
} |
|||
|
|||
div.olLayerDiv { |
|||
-moz-user-select: none; |
|||
-khtml-user-select: none; |
|||
} |
|||
|
|||
.olLayerGoogleCopyright { |
|||
left: 2px; |
|||
bottom: 2px; |
|||
} |
|||
.olLayerGoogleV3.olLayerGoogleCopyright { |
|||
right: auto !important; |
|||
} |
|||
.olLayerGooglePoweredBy { |
|||
left: 2px; |
|||
bottom: 15px; |
|||
} |
|||
.olLayerGoogleV3.olLayerGooglePoweredBy { |
|||
bottom: 15px !important; |
|||
} |
|||
.olControlAttribution { |
|||
font-size: smaller; |
|||
right: 3px; |
|||
bottom: 4.5em; |
|||
position: absolute; |
|||
display: block; |
|||
} |
|||
.olControlScale { |
|||
right: 3px; |
|||
bottom: 3em; |
|||
display: block; |
|||
position: absolute; |
|||
font-size: smaller; |
|||
} |
|||
.olControlScaleLine { |
|||
display: block; |
|||
position: absolute; |
|||
left: 10px; |
|||
bottom: 15px; |
|||
font-size: xx-small; |
|||
} |
|||
.olControlScaleLineBottom { |
|||
border: solid 2px black; |
|||
border-bottom: none; |
|||
margin-top:-2px; |
|||
text-align: center; |
|||
} |
|||
.olControlScaleLineTop { |
|||
border: solid 2px black; |
|||
border-top: none; |
|||
text-align: center; |
|||
} |
|||
|
|||
.olControlPermalink { |
|||
right: 3px; |
|||
bottom: 1.5em; |
|||
display: block; |
|||
position: absolute; |
|||
font-size: smaller; |
|||
} |
|||
|
|||
div.olControlMousePosition { |
|||
bottom: 0em; |
|||
right: 3px; |
|||
display: block; |
|||
position: absolute; |
|||
font-family: Arial; |
|||
font-size: smaller; |
|||
} |
|||
|
|||
.olControlOverviewMapContainer { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
} |
|||
|
|||
.olControlOverviewMapElement { |
|||
padding: 10px 18px 10px 10px; |
|||
background-color: #00008B; |
|||
-moz-border-radius: 1em 0 0 0; |
|||
} |
|||
|
|||
.olControlOverviewMapMinimizeButton { |
|||
right: 0; |
|||
bottom: 80px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.olControlOverviewMapMaximizeButton { |
|||
right: 0; |
|||
bottom: 80px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.olControlOverviewMapExtentRectangle { |
|||
overflow: hidden; |
|||
background-image: url("img/blank.gif"); |
|||
cursor: move; |
|||
border: 2px dotted red; |
|||
} |
|||
.olControlOverviewMapRectReplacement { |
|||
overflow: hidden; |
|||
cursor: move; |
|||
background-image: url("img/overview_replacement.gif"); |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
} |
|||
|
|||
.olLayerGeoRSSDescription { |
|||
float:left; |
|||
width:100%; |
|||
overflow:auto; |
|||
font-size:1.0em; |
|||
} |
|||
.olLayerGeoRSSClose { |
|||
float:right; |
|||
color:gray; |
|||
font-size:1.2em; |
|||
margin-right:6px; |
|||
font-family:sans-serif; |
|||
} |
|||
.olLayerGeoRSSTitle { |
|||
float:left;font-size:1.2em; |
|||
} |
|||
|
|||
.olPopupContent { |
|||
padding:10px; |
|||
overflow-y: auto; |
|||
box-shadow: 0px 2px 2px 0px rgba(174, 174, 174, 0.5); |
|||
} |
|||
|
|||
.olControlNavigationHistory { |
|||
background-image: url("img/navigation_history.png"); |
|||
background-repeat: no-repeat; |
|||
width: 24px; |
|||
height: 24px; |
|||
|
|||
} |
|||
.olControlNavigationHistoryPreviousItemActive { |
|||
background-position: 0 0; |
|||
} |
|||
.olControlNavigationHistoryPreviousItemInactive { |
|||
background-position: 0 -24px; |
|||
} |
|||
.olControlNavigationHistoryNextItemActive { |
|||
background-position: -24px 0; |
|||
} |
|||
.olControlNavigationHistoryNextItemInactive { |
|||
background-position: -24px -24px; |
|||
} |
|||
|
|||
div.olControlSaveFeaturesItemActive { |
|||
background-image: url(img/save_features_on.png); |
|||
background-repeat: no-repeat; |
|||
background-position: 0 1px; |
|||
} |
|||
div.olControlSaveFeaturesItemInactive { |
|||
background-image: url(img/save_features_off.png); |
|||
background-repeat: no-repeat; |
|||
background-position: 0 1px; |
|||
} |
|||
|
|||
.olHandlerBoxZoomBox { |
|||
border: 2px solid red; |
|||
position: absolute; |
|||
background-color: white; |
|||
opacity: 0.50; |
|||
font-size: 1px; |
|||
filter: alpha(opacity=50); |
|||
} |
|||
.olHandlerBoxSelectFeature { |
|||
border: 2px solid blue; |
|||
position: absolute; |
|||
background-color: white; |
|||
opacity: 0.50; |
|||
font-size: 1px; |
|||
filter: alpha(opacity=50); |
|||
} |
|||
|
|||
.olControlPanPanel { |
|||
top: 10px; |
|||
left: 5px; |
|||
} |
|||
|
|||
.olControlPanPanel div { |
|||
background-image: url(img/pan-panel.png); |
|||
height: 18px; |
|||
width: 18px; |
|||
cursor: pointer; |
|||
position: absolute; |
|||
} |
|||
|
|||
.olControlPanPanel .olControlPanNorthItemInactive { |
|||
top: 0; |
|||
left: 9px; |
|||
background-position: 0 0; |
|||
} |
|||
.olControlPanPanel .olControlPanSouthItemInactive { |
|||
top: 36px; |
|||
left: 9px; |
|||
background-position: 18px 0; |
|||
} |
|||
.olControlPanPanel .olControlPanWestItemInactive { |
|||
position: absolute; |
|||
top: 18px; |
|||
left: 0; |
|||
background-position: 0 18px; |
|||
} |
|||
.olControlPanPanel .olControlPanEastItemInactive { |
|||
top: 18px; |
|||
left: 18px; |
|||
background-position: 18px 18px; |
|||
} |
|||
|
|||
.olControlZoomPanel { |
|||
top: 71px; |
|||
left: 14px; |
|||
} |
|||
|
|||
.olControlZoomPanel div { |
|||
background-image: url(img/zoom-panel.png); |
|||
position: absolute; |
|||
height: 18px; |
|||
width: 18px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.olControlZoomPanel .olControlZoomInItemInactive { |
|||
top: 0; |
|||
left: 0; |
|||
background-position: 0 0; |
|||
} |
|||
|
|||
.olControlZoomPanel .olControlZoomToMaxExtentItemInactive { |
|||
top: 18px; |
|||
left: 0; |
|||
background-position: 0 -18px; |
|||
} |
|||
|
|||
.olControlZoomPanel .olControlZoomOutItemInactive { |
|||
top: 36px; |
|||
left: 0; |
|||
background-position: 0 18px; |
|||
} |
|||
|
|||
/* |
|||
* When a potential text is bigger than the image it move the image |
|||
* with some headers (closes #3154) |
|||
*/ |
|||
.olControlPanZoomBar div { |
|||
font-size: 1px; |
|||
} |
|||
|
|||
.olPopupCloseBox { |
|||
background: url("img/close.gif") no-repeat; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.olFramedCloudPopupContent { |
|||
padding: 5px; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.olControlNoSelect { |
|||
-moz-user-select: none; |
|||
-khtml-user-select: none; |
|||
} |
|||
|
|||
.olImageLoadError { |
|||
background-color: pink; |
|||
opacity: 0.5; |
|||
filter: alpha(opacity=50); /* IE */ |
|||
} |
|||
|
|||
/** |
|||
* Cursor styles |
|||
*/ |
|||
|
|||
.olCursorWait { |
|||
cursor: wait; |
|||
} |
|||
.olDragDown { |
|||
cursor: move; |
|||
} |
|||
.olDrawBox { |
|||
cursor: crosshair; |
|||
} |
|||
.olControlDragFeatureOver { |
|||
cursor: move; |
|||
} |
|||
.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown { |
|||
cursor: -moz-grabbing; |
|||
} |
|||
|
|||
/** |
|||
* Layer switcher |
|||
*/ |
|||
.olControlLayerSwitcher { |
|||
position: absolute; |
|||
top: 25px; |
|||
right: 0; |
|||
width: 20em; |
|||
font-family: sans-serif; |
|||
font-weight: bold; |
|||
margin-top: 3px; |
|||
margin-left: 3px; |
|||
margin-bottom: 3px; |
|||
font-size: smaller; |
|||
color: white; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.olControlLayerSwitcher .layersDiv { |
|||
padding-top: 5px; |
|||
padding-left: 10px; |
|||
padding-bottom: 5px; |
|||
padding-right: 75px; |
|||
background-color: darkblue; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.olControlLayerSwitcher .layersDiv .baseLbl, |
|||
.olControlLayerSwitcher .layersDiv .dataLbl { |
|||
margin-top: 3px; |
|||
margin-left: 3px; |
|||
margin-bottom: 3px; |
|||
} |
|||
|
|||
.olControlLayerSwitcher .layersDiv .baseLayersDiv, |
|||
.olControlLayerSwitcher .layersDiv .dataLayersDiv { |
|||
padding-left: 10px; |
|||
} |
|||
|
|||
.olControlLayerSwitcher .maximizeDiv, |
|||
.olControlLayerSwitcher .minimizeDiv { |
|||
top: 5px; |
|||
right: 0; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.olBingAttribution { |
|||
color: #DDD; |
|||
} |
|||
.olBingAttribution.road { |
|||
color: #333; |
|||
} |
|||
|
|||
.olGoogleAttribution.hybrid, .olGoogleAttribution.satellite { |
|||
color: #EEE; |
|||
} |
|||
.olGoogleAttribution { |
|||
color: #333; |
|||
} |
|||
span.olGoogleAttribution a { |
|||
color: #77C; |
|||
} |
|||
span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a { |
|||
color: #EEE; |
|||
} |
|||
|
|||
/** |
|||
* Editing and navigation icons. |
|||
* (using the editing_tool_bar.png sprint image) |
|||
*/ |
|||
.olControlNavToolbar , |
|||
.olControlEditingToolbar { |
|||
margin: 5px 5px 0 0; |
|||
} |
|||
.olControlNavToolbar div, |
|||
.olControlEditingToolbar div { |
|||
background-image: url("img/editing_tool_bar.png"); |
|||
background-repeat: no-repeat; |
|||
margin: 0 0 5px 5px; |
|||
width: 24px; |
|||
height: 22px; |
|||
cursor: pointer |
|||
} |
|||
/* positions */ |
|||
.olControlEditingToolbar { |
|||
right: 0; |
|||
top: 0; |
|||
} |
|||
.olControlNavToolbar { |
|||
top: 295px; |
|||
left: 9px; |
|||
} |
|||
/* layouts */ |
|||
.olControlEditingToolbar div { |
|||
float: right; |
|||
} |
|||
/* individual controls */ |
|||
.olControlNavToolbar .olControlNavigationItemInactive, |
|||
.olControlEditingToolbar .olControlNavigationItemInactive { |
|||
background-position: -103px -1px; |
|||
} |
|||
.olControlNavToolbar .olControlNavigationItemActive , |
|||
.olControlEditingToolbar .olControlNavigationItemActive { |
|||
background-position: -103px -24px; |
|||
} |
|||
.olControlNavToolbar .olControlZoomBoxItemInactive { |
|||
background-position: -128px -1px; |
|||
} |
|||
.olControlNavToolbar .olControlZoomBoxItemActive { |
|||
background-position: -128px -24px; |
|||
} |
|||
.olControlEditingToolbar .olControlDrawFeaturePointItemInactive { |
|||
background-position: -77px -1px; |
|||
} |
|||
.olControlEditingToolbar .olControlDrawFeaturePointItemActive { |
|||
background-position: -77px -24px; |
|||
} |
|||
.olControlEditingToolbar .olControlDrawFeaturePathItemInactive { |
|||
background-position: -51px -1px; |
|||
} |
|||
.olControlEditingToolbar .olControlDrawFeaturePathItemActive { |
|||
background-position: -51px -24px; |
|||
} |
|||
.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{ |
|||
background-position: -26px -1px; |
|||
} |
|||
.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive { |
|||
background-position: -26px -24px; |
|||
} |
|||
2671
chenhai-ui/src/assets/styles/map-theme/fonts/fontawesome-webfont.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1426
chenhai-ui/src/assets/styles/map.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
406
chenhai-ui/src/assets/styles/map2.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,25 @@ |
|||
/** |
|||
$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; |
|||
*/ |
|||
:export { |
|||
menuColor: #4DAEFE; |
|||
menuLightColor: rgba(0, 0, 0, 0.7); |
|||
menuColorActive: #4DAEFE; |
|||
menuBackground: #ffffff; |
|||
menuLightBackground: #4DAEFE; |
|||
subMenuBackground: #d5e3f3; |
|||
subMenuHover: #a1cef3; |
|||
sideBarWidth: 210px; |
|||
logoTitleColor: #4DAEFE; |
|||
logoLightTitleColor: #4DAEFE; |
|||
} |
|||
@ -0,0 +1 @@ |
|||
:export{menuColor:#4DAEFE;menuLightColor:rgba(0,0,0,0.7);menuColorActive:#4DAEFE;menuBackground:#fff;menuLightBackground:#4DAEFE;subMenuBackground:#d5e3f3;subMenuHover:#a1cef3;sideBarWidth:210px;logoTitleColor:#4DAEFE;logoLightTitleColor:#4DAEFE} |
|||
@ -0,0 +1,99 @@ |
|||
@import './variables.scss'; |
|||
|
|||
@mixin colorBtn($color) { |
|||
background: $color; |
|||
|
|||
&:hover { |
|||
color: $color; |
|||
|
|||
&:before, |
|||
&:after { |
|||
background: $color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.blue-btn { |
|||
@include colorBtn($blue) |
|||
} |
|||
|
|||
.light-blue-btn { |
|||
@include colorBtn($light-blue) |
|||
} |
|||
|
|||
.red-btn { |
|||
@include colorBtn($red) |
|||
} |
|||
|
|||
.pink-btn { |
|||
@include colorBtn($pink) |
|||
} |
|||
|
|||
.green-btn { |
|||
@include colorBtn($green) |
|||
} |
|||
|
|||
.tiffany-btn { |
|||
@include colorBtn($tiffany) |
|||
} |
|||
|
|||
.yellow-btn { |
|||
@include colorBtn($yellow) |
|||
} |
|||
|
|||
.pan-btn { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
padding: 14px 36px; |
|||
border-radius: 8px; |
|||
border: none; |
|||
outline: none; |
|||
transition: 600ms ease all; |
|||
position: relative; |
|||
display: inline-block; |
|||
|
|||
&:hover { |
|||
background: #fff; |
|||
|
|||
&:before, |
|||
&:after { |
|||
width: 100%; |
|||
transition: 600ms ease all; |
|||
} |
|||
} |
|||
|
|||
&:before, |
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
height: 2px; |
|||
width: 0; |
|||
transition: 400ms ease all; |
|||
} |
|||
|
|||
&::after { |
|||
right: inherit; |
|||
top: inherit; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.custom-button { |
|||
display: inline-block; |
|||
line-height: 1; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
background: #fff; |
|||
color: #fff; |
|||
-webkit-appearance: none; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
outline: 0; |
|||
margin: 0; |
|||
padding: 10px 15px; |
|||
font-size: 14px; |
|||
border-radius: 4px; |
|||
} |
|||
@ -0,0 +1,92 @@ |
|||
// cover some element-ui styles |
|||
|
|||
.el-breadcrumb__inner, |
|||
.el-breadcrumb__inner a { |
|||
font-weight: 400 !important; |
|||
} |
|||
|
|||
.el-upload { |
|||
input[type="file"] { |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
.el-upload__input { |
|||
display: none; |
|||
} |
|||
|
|||
.cell { |
|||
.el-tag { |
|||
margin-right: 0px; |
|||
} |
|||
} |
|||
|
|||
.small-padding { |
|||
.cell { |
|||
padding-left: 5px; |
|||
padding-right: 5px; |
|||
} |
|||
} |
|||
|
|||
.fixed-width { |
|||
.el-button--mini { |
|||
padding: 7px 10px; |
|||
width: 60px; |
|||
} |
|||
} |
|||
|
|||
.status-col { |
|||
.cell { |
|||
padding: 0 10px; |
|||
text-align: center; |
|||
|
|||
.el-tag { |
|||
margin-right: 0px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// to fixed https://github.com/ElemeFE/element/issues/2461 |
|||
.el-dialog { |
|||
transform: none; |
|||
left: 0; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
// refine element ui upload |
|||
.upload-container { |
|||
.el-upload { |
|||
width: 100%; |
|||
|
|||
.el-upload-dragger { |
|||
width: 100%; |
|||
height: 200px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// dropdown |
|||
.el-dropdown-menu { |
|||
a { |
|||
display: block |
|||
} |
|||
} |
|||
|
|||
// fix date-picker ui bug in filter-item |
|||
.el-range-editor.el-input__inner { |
|||
display: inline-flex !important; |
|||
} |
|||
|
|||
// to fix el-date-picker css style |
|||
.el-range-separator { |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
.el-menu--collapse |
|||
> div |
|||
> .el-submenu |
|||
> .el-submenu__title |
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
@ -0,0 +1,31 @@ |
|||
/** |
|||
* 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; |
|||
} |
|||
@ -0,0 +1,178 @@ |
|||
@import './variables.scss'; |
|||
@import './mixin.scss'; |
|||
@import './transition.scss'; |
|||
@import './element-ui.scss'; |
|||
@import './sidebar.scss'; |
|||
@import './btn.scss'; |
|||
|
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
#app { |
|||
height: 100%; |
|||
} |
|||
|
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
|
|||
.no-padding { |
|||
padding: 0px !important; |
|||
} |
|||
|
|||
.padding-content { |
|||
padding: 4px 0; |
|||
} |
|||
|
|||
a:focus, |
|||
a:active { |
|||
outline: none; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
div:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
.fr { |
|||
float: right; |
|||
} |
|||
|
|||
.fl { |
|||
float: left; |
|||
} |
|||
|
|||
.pr-5 { |
|||
padding-right: 5px; |
|||
} |
|||
|
|||
.pl-5 { |
|||
padding-left: 5px; |
|||
} |
|||
|
|||
.block { |
|||
display: block; |
|||
} |
|||
|
|||
.pointer { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.inlineBlock { |
|||
display: block; |
|||
} |
|||
|
|||
.clearfix { |
|||
&:after { |
|||
visibility: hidden; |
|||
display: block; |
|||
font-size: 0; |
|||
content: " "; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
aside { |
|||
background: #eef1f6; |
|||
padding: 8px 24px; |
|||
margin-bottom: 20px; |
|||
border-radius: 2px; |
|||
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; |
|||
color: #2c3e50; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
|
|||
a { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
} |
|||
|
|||
//main-container全局样式 |
|||
.app-container { |
|||
padding: 20px; |
|||
} |
|||
|
|||
.components-container { |
|||
margin: 30px 50px; |
|||
position: relative; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center |
|||
} |
|||
|
|||
.sub-navbar { |
|||
height: 50px; |
|||
line-height: 50px; |
|||
position: relative; |
|||
width: 100%; |
|||
text-align: right; |
|||
padding-right: 20px; |
|||
transition: 600ms ease position; |
|||
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%); |
|||
|
|||
.subtitle { |
|||
font-size: 20px; |
|||
color: #fff; |
|||
} |
|||
|
|||
&.draft { |
|||
background: #d0d0d0; |
|||
} |
|||
|
|||
&.deleted { |
|||
background: #d0d0d0; |
|||
} |
|||
} |
|||
|
|||
.link-type, |
|||
.link-type:focus { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
|
|||
.filter-container { |
|||
padding-bottom: 10px; |
|||
|
|||
.filter-item { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
@ -0,0 +1,66 @@ |
|||
@mixin clearfix { |
|||
&:after { |
|||
content: ""; |
|||
display: table; |
|||
clear: both; |
|||
} |
|||
} |
|||
|
|||
@mixin scrollBar { |
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
|
|||
@mixin relative { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
@mixin pct($pct) { |
|||
width: #{$pct}; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
@mixin triangle($width, $height, $color, $direction) { |
|||
$width: $width/2; |
|||
$color-border-style: $height solid $color; |
|||
$transparent-border-style: $width solid transparent; |
|||
height: 0; |
|||
width: 0; |
|||
|
|||
@if $direction==up { |
|||
border-bottom: $color-border-style; |
|||
border-left: $transparent-border-style; |
|||
border-right: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==right { |
|||
border-left: $color-border-style; |
|||
border-top: $transparent-border-style; |
|||
border-bottom: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==down { |
|||
border-top: $color-border-style; |
|||
border-left: $transparent-border-style; |
|||
border-right: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==left { |
|||
border-right: $color-border-style; |
|||
border-top: $transparent-border-style; |
|||
border-bottom: $transparent-border-style; |
|||
} |
|||
} |
|||
@ -0,0 +1,481 @@ |
|||
/** |
|||
* 通用css样式布局处理 |
|||
* Copyright (c) 2019 ruoyi |
|||
*/ |
|||
|
|||
/** 基础通用 **/ |
|||
.pt5 { |
|||
padding-top: 5px; |
|||
} |
|||
|
|||
.pr5 { |
|||
padding-right: 5px; |
|||
} |
|||
|
|||
.pb5 { |
|||
padding-bottom: 5px; |
|||
} |
|||
|
|||
.mt5 { |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.mr5 { |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.mb5 { |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
.mb8 { |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.ml5 { |
|||
margin-left: 5px; |
|||
} |
|||
|
|||
.mt10 { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.mr10 { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.mb10 { |
|||
margin-bottom: 10px; |
|||
} |
|||
.ml10 { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.mt20 { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.mr20 { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.mb20 { |
|||
margin-bottom: 20px; |
|||
} |
|||
.ml20 { |
|||
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; |
|||
} |
|||
|
|||
.el-message-box__status + .el-message-box__message{ |
|||
word-break: break-word; |
|||
} |
|||
|
|||
.el-dialog:not(.is-fullscreen) { |
|||
margin-top: 6vh !important; |
|||
} |
|||
|
|||
.el-dialog__body { |
|||
padding: 8px 20px !important; |
|||
} |
|||
|
|||
.el-dialog__wrapper.scrollbar .el-dialog .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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** 表单布局 **/ |
|||
.form-header { |
|||
font-size: 15px; |
|||
color: #6379bb; |
|||
border-bottom: 1px solid #ddd; |
|||
margin: 8px 10px 25px 10px; |
|||
padding-bottom: 5px |
|||
} |
|||
|
|||
/** 表格布局 **/ |
|||
.pagination-container { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
/* tree border */ |
|||
.tree-border { |
|||
margin-top: 5px; |
|||
border: 1px solid #e5e6e7; |
|||
background: #FFFFFF none; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
/* horizontal el menu */ |
|||
.el-menu--horizontal .el-menu-item .svg-icon + span, |
|||
.el-menu--horizontal .el-submenu__title .svg-icon + span { |
|||
margin-left: 3px; |
|||
} |
|||
|
|||
.el-menu--horizontal .el-menu--popup { |
|||
min-width: 120px !important; |
|||
} |
|||
|
|||
@media (max-width: 768px) { |
|||
.pagination-container .el-pagination > .el-pagination__jump { |
|||
display: none !important; |
|||
} |
|||
.pagination-container .el-pagination > .el-pagination__sizes { |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
.el-table .fixed-width .el-button--mini { |
|||
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, .el-icon-arrow-down { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.el-tree-node__content > .el-checkbox { |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.list-group-striped > .list-group-item { |
|||
border-left: 0; |
|||
border-right: 0; |
|||
border-radius: 0; |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
} |
|||
|
|||
.list-group { |
|||
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; |
|||
} |
|||
|
|||
.pull-right { |
|||
float: right !important; |
|||
} |
|||
|
|||
.el-card__header { |
|||
padding: 14px 15px 7px; |
|||
min-height: 40px; |
|||
} |
|||
|
|||
.el-card__body { |
|||
padding: 15px 20px 20px 20px; |
|||
} |
|||
|
|||
.card-box { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
/* button color */ |
|||
.el-button--cyan.is-active, |
|||
.el-button--cyan:active { |
|||
background: #20B2AA; |
|||
border-color: #20B2AA; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.el-button--cyan:focus, |
|||
.el-button--cyan:hover { |
|||
background: #48D1CC; |
|||
border-color: #48D1CC; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.el-button--cyan { |
|||
background-color: #20B2AA; |
|||
border-color: #20B2AA; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
/** 详细卡片样式 */ |
|||
.detail-drawer { |
|||
.el-drawer__header { |
|||
margin-bottom: 6px; |
|||
padding: 8px 12px 6px; |
|||
font-size: 15px; |
|||
color: #303133; |
|||
background: #f8f8f8; |
|||
} |
|||
.section-header { |
|||
font-size: 15px; |
|||
color: #6379bb; |
|||
border-bottom: 1px solid #ddd; |
|||
margin: 12px 0 16px 0; |
|||
padding-bottom: 8px; |
|||
} |
|||
.drawer-content { |
|||
padding: 0 20px 20px 20px; |
|||
.info-item { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
padding: 8px 0; |
|||
min-height: 40px; |
|||
} |
|||
.info-label { |
|||
flex-shrink: 0; |
|||
width: 200px; |
|||
color: #606266; |
|||
font-size: 13px; |
|||
line-height: 1.6; |
|||
padding-top: 4px; |
|||
text-align: right; |
|||
margin-right: 14px; |
|||
} |
|||
.info-value { |
|||
flex: 1; |
|||
color: #303133; |
|||
font-size: 13px; |
|||
font-weight: 500; |
|||
line-height: 1.6; |
|||
word-break: break-all; |
|||
padding-top: 4px; |
|||
min-height: 1.6em; |
|||
&.plaintext { |
|||
border-bottom: 1px dashed #dde1e6; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.detail-wrap { padding: 0 4px; } |
|||
|
|||
.detail-card { |
|||
border: 1px solid #ebeef5; |
|||
border-radius: 6px; |
|||
margin-bottom: 14px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.detail-card-title { |
|||
background: #f7f9fb; |
|||
padding: 8px 16px; |
|||
font-size: 13px; |
|||
font-weight: 600; |
|||
color: #333; |
|||
border-bottom: 1px solid #ebeef5; |
|||
} |
|||
.detail-card-title i { margin-right: 5px; color: #409EFF; } |
|||
|
|||
.detail-row { padding: 0 8px; } |
|||
|
|||
.detail-item { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
padding: 10px 8px; |
|||
font-size: 13px; |
|||
border-bottom: 1px solid #f5f7fa; |
|||
} |
|||
.detail-item:last-child { border-bottom: none; } |
|||
|
|||
.detail-label { |
|||
flex-shrink: 0; |
|||
width: 72px; |
|||
color: #909399; |
|||
margin-right: 12px; |
|||
} |
|||
.detail-value { color: #303133; flex: 1; word-break: break-all; } |
|||
.detail-location { color: #999; font-size: 12px; } |
|||
|
|||
.method-tag { |
|||
display: inline-block; |
|||
padding: 1px 7px; |
|||
border-radius: 3px; |
|||
font-size: 11px; |
|||
font-weight: 700; |
|||
margin-right: 6px; |
|||
vertical-align: middle; |
|||
} |
|||
.mono { font-family: Consolas, 'SFMono-Regular', monospace; font-size: 12px; } |
|||
.code-body { padding: 14px; } |
|||
.code-wrap { |
|||
background: #f7f9fb; |
|||
border: 1px solid #e8ecf0; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
max-height: 260px; |
|||
position: relative; |
|||
} |
|||
.code-action { |
|||
position: absolute; |
|||
top: 8px; |
|||
right: 8px; |
|||
z-index: 10; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
.code-action .el-button { |
|||
height: 24px; |
|||
font-size: 12px; |
|||
padding: 4px 8px; |
|||
background: rgba(255, 255, 255, 0.9); |
|||
border: 1px solid #dcdcdc; |
|||
} |
|||
.code-action .el-button:hover { |
|||
background: #ffffff; |
|||
border-color: #409EFF; |
|||
} |
|||
.code-pre { |
|||
margin: 0; |
|||
padding: 12px 14px; |
|||
font-size: 12px; |
|||
line-height: 1.6; |
|||
font-family: Consolas, 'SFMono-Regular', monospace; |
|||
color: #444; |
|||
white-space: pre-wrap; |
|||
word-break: break-all; |
|||
overflow: auto; |
|||
max-height: 240px; |
|||
display: block; |
|||
} |
|||
|
|||
/* tree-sidebar content */ |
|||
.tree-sidebar-manage-wrap { |
|||
display: flex; |
|||
gap: 0; |
|||
min-height: calc(100vh - 130px); |
|||
padding: 0 !important; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.tree-sidebar-content { |
|||
flex: 1; |
|||
min-width: 0; |
|||
overflow: hidden; |
|||
background: #fff; |
|||
|
|||
.content-inner { |
|||
padding: 12px 16px; |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
} |
|||
} |
|||
|
|||
/* error */ |
|||
.error-title { color: #c0392b !important; } |
|||
.error-title i { color: #c0392b !important; } |
|||
.error-body { padding: 12px 16px; } |
|||
.error-msg { |
|||
background: #fff8f8; |
|||
border-left: 3px solid #e74c3c; |
|||
border-radius: 3px; |
|||
padding: 8px 12px; |
|||
color: #c0392b; |
|||
font-size: 12px; |
|||
line-height: 1.7; |
|||
word-break: break-all; |
|||
white-space: pre-wrap; |
|||
} |
|||
|
|||
/* http method */ |
|||
.method-GET { background: #e8f5e9; color: #27ae60; } |
|||
.method-POST { background: #e3f2fd; color: #1565c0; } |
|||
.method-PUT { background: #fff3e0; color: #e65100; } |
|||
.method-DELETE { background: #ffebee; color: #c62828; } |
|||
|
|||
/* text color */ |
|||
.text-navy { |
|||
color: #1ab394; |
|||
} |
|||
|
|||
.text-primary { |
|||
color: inherit; |
|||
} |
|||
|
|||
.text-success { |
|||
color: #1c84c6; |
|||
} |
|||
|
|||
.text-info { |
|||
color: #23c6c8; |
|||
} |
|||
|
|||
.text-warning { |
|||
color: #f8ac59; |
|||
} |
|||
|
|||
.text-danger { |
|||
color: #ed5565; |
|||
} |
|||
|
|||
.text-muted { |
|||
color: #888888; |
|||
} |
|||
|
|||
/* image */ |
|||
.img-circle { |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.img-lg { |
|||
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; |
|||
} |
|||
|
|||
/* 拖拽列样式 */ |
|||
.sortable-ghost { |
|||
opacity: .8; |
|||
color: #fff !important; |
|||
background: #42b983 !important; |
|||
} |
|||
|
|||
.top-right-btn { |
|||
position: relative; |
|||
float: right; |
|||
} |
|||
@ -0,0 +1,321 @@ |
|||
#app { |
|||
|
|||
.main-container { |
|||
height: 100%; |
|||
transition: margin-left .28s; |
|||
margin-left: $base-sidebar-width; |
|||
position: relative; |
|||
} |
|||
|
|||
.sidebarHide { |
|||
margin-left: 0!important; |
|||
} |
|||
|
|||
.sidebar-container { |
|||
-webkit-transition: width .28s; |
|||
transition: width 0.28s; |
|||
width: $base-sidebar-width !important; |
|||
background-color: $base-menu-background; |
|||
height: 100%; |
|||
position: fixed; |
|||
font-size: 0px; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); |
|||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); |
|||
|
|||
// reset element-ui css |
|||
.horizontal-collapse-transition { |
|||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; |
|||
} |
|||
|
|||
.scrollbar-wrapper { |
|||
overflow-x: hidden !important; |
|||
} |
|||
|
|||
.el-scrollbar__bar.is-vertical { |
|||
right: 0px; |
|||
} |
|||
|
|||
.el-scrollbar { |
|||
height: 100%; |
|||
} |
|||
|
|||
&.has-logo { |
|||
.el-scrollbar { |
|||
height: calc(100% - 50px); |
|||
} |
|||
} |
|||
|
|||
.is-horizontal { |
|||
display: none; |
|||
} |
|||
|
|||
a { |
|||
display: inline-block; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.svg-icon { |
|||
margin-right: 10px !important; |
|||
} |
|||
|
|||
.el-menu { |
|||
border: none; |
|||
height: 100%; |
|||
width: 100% !important; |
|||
} |
|||
|
|||
.el-menu-item, .el-submenu__title { |
|||
overflow: hidden !important; |
|||
text-overflow: ellipsis !important; |
|||
white-space: nowrap !important; |
|||
height: 44px !important; |
|||
line-height: 44px !important; |
|||
} |
|||
|
|||
// menu hover |
|||
.submenu-title-noDropdown, |
|||
.el-submenu__title { |
|||
&:hover { |
|||
background-color: rgba(0, 0, 0, 0.06) !important; |
|||
} |
|||
} |
|||
|
|||
& .theme-dark .is-active > .el-submenu__title { |
|||
color: $base-menu-color-active !important; |
|||
} |
|||
|
|||
& .nest-menu .el-submenu>.el-submenu__title, |
|||
& .el-submenu .el-menu-item { |
|||
min-width: $base-sidebar-width !important; |
|||
|
|||
&:hover { |
|||
background-color: rgba(0, 0, 0, 0.06) !important; |
|||
} |
|||
} |
|||
|
|||
& .theme-dark .nest-menu .el-submenu>.el-submenu__title, |
|||
& .theme-dark .el-submenu .el-menu-item { |
|||
background-color: $base-sub-menu-background !important; |
|||
|
|||
&:hover { |
|||
background-color: $base-sub-menu-hover !important; |
|||
} |
|||
} |
|||
|
|||
// theme-dark 深色主题 |
|||
&.theme-dark { |
|||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4); |
|||
border-right: none; |
|||
|
|||
.el-menu-item.is-active { |
|||
position: relative; |
|||
|
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
inset: 0; |
|||
background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2)); |
|||
border-right: 3px solid var(--current-color, #409eff); |
|||
pointer-events: none; |
|||
z-index: 1; |
|||
} |
|||
} |
|||
|
|||
.el-submenu.is-active > .el-submenu__title { |
|||
color: var(--current-color, #409eff) !important; |
|||
} |
|||
|
|||
.el-menu-item:not(.is-active), |
|||
.submenu-title-noDropdown, |
|||
.el-submenu__title { |
|||
position: relative; |
|||
|
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
inset: 0; |
|||
background-color: transparent; |
|||
pointer-events: none; |
|||
z-index: 1; |
|||
transition: background-color 0.2s; |
|||
} |
|||
|
|||
&:hover::before { |
|||
background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2)); |
|||
} |
|||
} |
|||
} |
|||
|
|||
// theme-light 浅色主题 |
|||
&.theme-light { |
|||
border-right: 1px solid #e8eaf0; |
|||
box-shadow: none; |
|||
|
|||
.el-menu-item, |
|||
.el-submenu__title { |
|||
color: rgba(0, 0, 0, 0.65); |
|||
} |
|||
|
|||
.el-menu-item.is-active { |
|||
color: var(--current-color, #409eff) !important; |
|||
position: relative; |
|||
|
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
inset: 0; |
|||
background-color: var(--current-color-light, #ecf5ff); |
|||
border-right: 3px solid var(--current-color, #409eff); |
|||
pointer-events: none; |
|||
z-index: 1; |
|||
} |
|||
} |
|||
|
|||
.el-submenu.is-active > .el-submenu__title { |
|||
color: var(--current-color, #409eff) !important; |
|||
} |
|||
|
|||
.el-menu-item:not(.is-active):hover, |
|||
.submenu-title-noDropdown:hover, |
|||
.el-submenu__title:hover { |
|||
background-color: #f5f7fa !important; |
|||
color: rgba(0, 0, 0, 0.85) !important; |
|||
} |
|||
|
|||
.nest-menu .el-submenu > .el-submenu__title, |
|||
.el-submenu .el-menu-item { |
|||
background-color: #fafafa !important; |
|||
|
|||
&:hover { |
|||
background-color: #f0f5ff !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hideSidebar { |
|||
.sidebar-container { |
|||
width: 54px !important; |
|||
} |
|||
|
|||
.main-container { |
|||
margin-left: 54px; |
|||
} |
|||
|
|||
.el-menu:not(.el-menu--horizontal) { |
|||
.submenu-title-noDropdown { |
|||
padding: 0 !important; |
|||
position: relative; |
|||
|
|||
.el-tooltip { |
|||
padding: 0 !important; |
|||
|
|||
.svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-submenu { |
|||
overflow: hidden; |
|||
|
|||
&>.el-submenu__title { |
|||
padding: 0 !important; |
|||
|
|||
.svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.el-menu--collapse { |
|||
.el-submenu { |
|||
&>.el-submenu__title { |
|||
&>span { |
|||
height: 0; |
|||
width: 0; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-menu--collapse .el-menu .el-submenu { |
|||
min-width: $base-sidebar-width !important; |
|||
} |
|||
|
|||
// mobile responsive |
|||
.mobile { |
|||
.main-container { |
|||
margin-left: 0px; |
|||
} |
|||
|
|||
.sidebar-container { |
|||
transition: transform .28s; |
|||
width: $base-sidebar-width !important; |
|||
} |
|||
|
|||
&.hideSidebar { |
|||
.sidebar-container { |
|||
pointer-events: none; |
|||
transition-duration: 0.3s; |
|||
transform: translate3d(-$base-sidebar-width, 0, 0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.withoutAnimation { |
|||
|
|||
.main-container, |
|||
.sidebar-container { |
|||
transition: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// when menu collapsed |
|||
.el-menu--vertical { |
|||
&>.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; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,49 @@ |
|||
// global transition css |
|||
|
|||
/* fade */ |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.28s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-active { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* fade-transform */ |
|||
.fade-transform--move, |
|||
.fade-transform-leave-active, |
|||
.fade-transform-enter-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.fade-transform-enter { |
|||
opacity: 0; |
|||
transform: translateX(-30px); |
|||
} |
|||
|
|||
.fade-transform-leave-to { |
|||
opacity: 0; |
|||
transform: translateX(30px); |
|||
} |
|||
|
|||
/* breadcrumb transition */ |
|||
.breadcrumb-enter-active, |
|||
.breadcrumb-leave-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-enter, |
|||
.breadcrumb-leave-active { |
|||
opacity: 0; |
|||
transform: translateX(20px); |
|||
} |
|||
|
|||
.breadcrumb-move { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-leave-active { |
|||
position: absolute; |
|||
} |
|||
@ -0,0 +1,39 @@ |
|||
// 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: #ffffff; |
|||
$base-menu-background: #1a1f2e; |
|||
$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: #141824; |
|||
$base-sub-menu-hover: rgba(255,255,255,.06); |
|||
|
|||
$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 |
|||
} |
|||
@ -0,0 +1,269 @@ |
|||
<template> |
|||
<div class="box"> |
|||
<div class="cen_box"> |
|||
<div id="head"> |
|||
<div class="title">园林事务中心可视化</div> |
|||
<!-- 头部左侧时间和日期 --> |
|||
<div id="timeContainer"> |
|||
<!-- 日期 --> |
|||
<div id="cloudDate" :style="{ |
|||
fontSize: '20px', |
|||
color: 'rgba(255, 255, 255, 0.77)', |
|||
textShadow: '6 5 5 rgba(15, 146, 255, 1)', |
|||
lineHeight: '65px', |
|||
fontWeight: 'normal', |
|||
letterSpacing: '2px' |
|||
}" /> |
|||
<!-- 时间 --> |
|||
<div id="cloudTime" :style="{ |
|||
fontSize: '26px', |
|||
color: 'rgba(255, 255, 255,1)', |
|||
textShadow: '6 5 5 rgba(15, 146, 255, 1)', |
|||
lineHeight: '60px', |
|||
textAlign: 'center', |
|||
fontWeight: 'normal', |
|||
letterSpacing: '2px' |
|||
}" /> |
|||
<i class="el-icon-switch-button" @click="logout()" /> |
|||
</div> |
|||
</div> |
|||
<div id="cen_content"> |
|||
<div id="left"> |
|||
<div class="left_content"> |
|||
<div class="tit">资产总览</div> |
|||
<div id="nr"></div> |
|||
</div> |
|||
</div> |
|||
<div id="center"></div> |
|||
<div id="right"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import '@/assets/styles/cloud/index.css' |
|||
import '@/assets/styles/cloud/reset.css' |
|||
import '@/assets/styles/cloud/custom-animation.css' |
|||
import dayjs from 'dayjs' |
|||
import 'dayjs/locale/zh-cn' |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
baseUrl: process.env.VUE_APP_BASE_API, |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
playAnimation('#timeContainer', [ |
|||
{ |
|||
type: 'fadeIn', |
|||
name: '淡入', |
|||
delayed: 0.5, |
|||
loop: false, |
|||
frequency: 1, |
|||
duration: 2, |
|||
isPlayer: false, |
|||
isDisabled: false |
|||
} |
|||
]) |
|||
|
|||
playAnimation('#head', [ |
|||
{ |
|||
type: 'fadeInDown', |
|||
name: '向下移入', |
|||
delayed: 0, |
|||
loop: false, |
|||
frequency: 1, |
|||
duration: 1, |
|||
isPlayer: false, |
|||
isDisabled: false |
|||
} |
|||
]) |
|||
|
|||
playAnimation('#cen_content', [ |
|||
{ |
|||
type: 'fadeInUp', |
|||
name: '向上移入', |
|||
delayed: 1, |
|||
loop: false, |
|||
frequency: 1, |
|||
duration: 1, |
|||
isPlayer: false, |
|||
isDisabled: false |
|||
} |
|||
]) |
|||
|
|||
function playAnimation(id, animations) { |
|||
let index = 0 |
|||
const ele = document.querySelector(id) |
|||
if (!ele) return |
|||
setAnimation(ele, animations[index]) |
|||
ele.addEventListener('webkitAnimationEnd', function () { |
|||
if (index < animations.length - 1) { |
|||
index++ |
|||
setAnimation(ele, animations[index]) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
function setAnimation(element, animation) { |
|||
const action = `${animation.duration * 1000}ms ease ${animation.delayed * 1000}ms ${animation.loop ? 'infinite' : animation.frequency} normal both running ${animation.type}` |
|||
element.style.animation = action |
|||
} |
|||
}) |
|||
|
|||
this.getCurrentDate() |
|||
this.getCurrentTime() |
|||
}, |
|||
|
|||
methods: { |
|||
async logout() { |
|||
this.$confirm("确定要退出系统吗？", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
this.$store.dispatch("LogOut").then(() => { |
|||
location.href = "/index"; |
|||
}); |
|||
}) |
|||
.catch(() => { }); |
|||
}, |
|||
|
|||
async logout() { |
|||
this.$confirm("确定要退出系统吗？", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
this.$store.dispatch("LogOut").then(() => { |
|||
location.href = "/index"; |
|||
}); |
|||
}) |
|||
.catch(() => { }); |
|||
}, |
|||
|
|||
|
|||
getCurrentDate() { |
|||
const timeDom = document.querySelector('#cloudDate') |
|||
if (!timeDom) return |
|||
|
|||
const updateDate = () => { |
|||
const value = dayjs().locale('zh-cn').format('MM月DD日 dddd') |
|||
timeDom.innerHTML = value |
|||
} |
|||
updateDate() |
|||
setInterval(updateDate, 1000) |
|||
}, |
|||
|
|||
getCurrentTime() { |
|||
const timeDom = document.querySelector('#cloudTime') |
|||
if (!timeDom) return |
|||
|
|||
const updateTime = () => { |
|||
const value = dayjs().locale('zh-cn').format('HH:mm:ss') |
|||
timeDom.innerHTML = value |
|||
} |
|||
updateTime() |
|||
setInterval(updateTime, 1000) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.box { |
|||
width: 100%; |
|||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; |
|||
|
|||
.cen_box { |
|||
width: 100%; |
|||
height: 100vh; |
|||
box-sizing: border-box; |
|||
background-image: url('../assets/images/bjt.png'); |
|||
background-size: 100% 100%; |
|||
display: grid; |
|||
grid-template-rows:80px 1fr; |
|||
row-gap: 10px; |
|||
|
|||
#head { |
|||
width: 100%; |
|||
background-image: url('../assets/images/head.png'); |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
|
|||
.title { |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 35px; |
|||
letter-spacing: 0.2em; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
|
|||
#timeContainer { |
|||
width: 350px; |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 20px; |
|||
left: auto; |
|||
top: auto; |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr 50px; |
|||
|
|||
div { |
|||
width: auto; |
|||
} |
|||
|
|||
.el-icon-switch-button { |
|||
position: absolute; |
|||
color: #fff; |
|||
right: 0; |
|||
bottom: 15px; |
|||
display: inline-block; |
|||
font-size: 20px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.el-icon-switch-button:hover { |
|||
color: #5DACE1; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
#cen_content{ |
|||
width: 100%; |
|||
display: grid; |
|||
grid-template-columns: 1fr 2fr 1fr; |
|||
padding: 20px 20px 10px; |
|||
column-gap: 20px; |
|||
#left{ |
|||
display: grid; |
|||
grid-template-rows: 1fr 1fr 1fr; |
|||
row-gap: 10px; |
|||
.left_content{ |
|||
display: grid; |
|||
grid-template-rows: 35px 1fr; |
|||
row-gap: 10px; |
|||
.tit{ |
|||
background-image: url('../assets/images/11.png'); |
|||
background-size: 100% 100%; |
|||
padding: 5px 0 0 20px; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,223 +1,776 @@ |
|||
<template> |
|||
<div class="login"> |
|||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> |
|||
<h3 class="title">{{title}}</h3> |
|||
<!-- 动态背景层 - 园林景观背景 --> |
|||
<div class="bg-layer"> |
|||
<div class="bg-overlay"></div> |
|||
</div> |
|||
|
|||
<!-- 装饰性植物元素 --> |
|||
<div class="plant-deco plant-left"> |
|||
<div class="leaf leaf-1"></div> |
|||
<div class="leaf leaf-2"></div> |
|||
<div class="leaf leaf-3"></div> |
|||
<div class="branch branch-1"></div> |
|||
</div> |
|||
<div class="plant-deco plant-right"> |
|||
<div class="leaf leaf-4"></div> |
|||
<div class="leaf leaf-5"></div> |
|||
<div class="leaf leaf-6"></div> |
|||
<div class="branch branch-2"></div> |
|||
</div> |
|||
|
|||
<!-- 浮动摄像头装饰元素（监控主题） --> |
|||
<div class="camera-deco"> |
|||
<div class="camera-icon"> |
|||
<i class="el-icon-video-camera"></i> |
|||
</div> |
|||
<div class="camera-ring"></div> |
|||
</div> |
|||
|
|||
<!-- 主登录卡片 --> |
|||
<div class="login-card"> |
|||
<div class="card-header"> |
|||
<div class="logo-area"> |
|||
<div class="logo-icon"> |
|||
<span class="logo-leaf">🌿</span> |
|||
<span class="logo-camera">📹</span> |
|||
</div> |
|||
<h3 class="title">园林事务中心</h3> |
|||
</div> |
|||
<p class="subtitle">视频监控系统</p> |
|||
<div class="title-divider"></div> |
|||
</div> |
|||
|
|||
<el-form |
|||
ref="loginForm" |
|||
:model="loginForm" |
|||
:rules="loginRules" |
|||
class="login-form" |
|||
> |
|||
<el-form-item prop="username"> |
|||
<el-input |
|||
v-model="loginForm.username" |
|||
type="text" |
|||
auto-complete="off" |
|||
placeholder="账号" |
|||
placeholder="账号 / 手机号" |
|||
class="custom-input" |
|||
> |
|||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> |
|||
<template slot="prefix"> |
|||
<i class="el-icon-user"></i> |
|||
</template> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="password"> |
|||
<el-input |
|||
v-model="loginForm.password" |
|||
type="password" |
|||
auto-complete="off" |
|||
placeholder="密码" |
|||
class="custom-input" |
|||
@keyup.enter.native="handleLogin" |
|||
> |
|||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> |
|||
<template slot="prefix"> |
|||
<i class="el-icon-lock"></i> |
|||
</template> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="code" v-if="captchaEnabled"> |
|||
|
|||
<!-- <el-form-item prop="code" v-if="captchaEnabled" class="captcha-item"> |
|||
<el-input |
|||
v-model="loginForm.code" |
|||
auto-complete="off" |
|||
placeholder="验证码" |
|||
style="width: 63%" |
|||
class="captcha-input" |
|||
@keyup.enter.native="handleLogin" |
|||
> |
|||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> |
|||
<template slot="prefix"> |
|||
<i class="el-icon-key"></i> |
|||
</template> |
|||
</el-input> |
|||
<div class="login-code"> |
|||
<img :src="codeUrl" @click="getCode" class="login-code-img"/> |
|||
<img |
|||
:src="codeUrl" |
|||
@click="getCode" |
|||
class="login-code-img" |
|||
alt="验证码" |
|||
/> |
|||
</div> |
|||
</el-form-item> |
|||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> |
|||
<el-form-item style="width:100%;"> |
|||
</el-form-item> --> |
|||
|
|||
<div class="options-area"> |
|||
<el-checkbox v-model="loginForm.rememberMe" class="remember-checkbox" |
|||
>记住密码</el-checkbox |
|||
> |
|||
<router-link class="forget-link" to="/forget">忘记密码？</router-link> |
|||
</div> |
|||
|
|||
<el-form-item style="width: 100%; margin-bottom: 12px"> |
|||
<el-button |
|||
:loading="loading" |
|||
size="medium" |
|||
type="primary" |
|||
style="width:100%;" |
|||
class="login-btn" |
|||
@click.native.prevent="handleLogin" |
|||
> |
|||
<span v-if="!loading">登 录</span> |
|||
<span v-else>登 录 中...</span> |
|||
</el-button> |
|||
<div style="float: right;" v-if="register"> |
|||
<router-link class="link-type" :to="'/register'">立即注册</router-link> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
<div class="register-area" v-if="register"> |
|||
<span class="register-tip">还没有账号？</span> |
|||
<router-link class="register-link" :to="'/register'" |
|||
>立即注册</router-link |
|||
> |
|||
</div> |
|||
</el-form> |
|||
<!-- 底部 --> |
|||
<div class="el-login-footer"> |
|||
<span>{{ footerContent }}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getCodeImg } from "@/api/login" |
|||
import Cookies from "js-cookie" |
|||
import { encrypt, decrypt } from '@/utils/jsencrypt' |
|||
import defaultSettings from '@/settings' |
|||
import { getCodeImg } from "@/api/login"; |
|||
import Cookies from "js-cookie"; |
|||
import { encrypt, decrypt } from "@/utils/jsencrypt"; |
|||
|
|||
export default { |
|||
name: "Login", |
|||
data() { |
|||
return { |
|||
title: process.env.VUE_APP_TITLE, |
|||
footerContent: defaultSettings.footerContent, |
|||
title: "园林事务中心视频监控系统", |
|||
codeUrl: "", |
|||
loginForm: { |
|||
username: "admin", |
|||
password: "admin123", |
|||
username: "", |
|||
password: "", |
|||
rememberMe: false, |
|||
code: "", |
|||
uuid: "" |
|||
uuid: "", |
|||
}, |
|||
loginRules: { |
|||
username: [ |
|||
{ required: true, trigger: "blur", message: "请输入您的账号" } |
|||
{ required: true, trigger: "blur", message: "请输入您的账号" }, |
|||
], |
|||
password: [ |
|||
{ required: true, trigger: "blur", message: "请输入您的密码" } |
|||
{ required: true, trigger: "blur", message: "请输入您的密码" }, |
|||
], |
|||
code: [{ required: true, trigger: "change", message: "请输入验证码" }] |
|||
// code: [{ required: true, trigger: "change", message: "请输入验证码" }], |
|||
}, |
|||
loading: false, |
|||
// 验证码开关 |
|||
captchaEnabled: true, |
|||
// 注册开关 |
|||
register: false, |
|||
redirect: undefined |
|||
} |
|||
redirect: undefined, |
|||
}; |
|||
}, |
|||
watch: { |
|||
$route: { |
|||
handler: function (route) { |
|||
this.redirect = route.query && route.query.redirect |
|||
this.redirect = route.query && route.query.redirect; |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
immediate: true |
|||
} |
|||
}, |
|||
created() { |
|||
this.getCode() |
|||
this.getCookie() |
|||
this.getCode(); |
|||
this.getCookie(); |
|||
}, |
|||
methods: { |
|||
getCode() { |
|||
getCodeImg().then(res => { |
|||
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled |
|||
getCodeImg().then((res) => { |
|||
this.captchaEnabled = |
|||
res.captchaEnabled === undefined ? true : res.captchaEnabled; |
|||
if (this.captchaEnabled) { |
|||
this.codeUrl = "data:image/gif;base64," + res.img |
|||
this.loginForm.uuid = res.uuid |
|||
this.codeUrl = "data:image/gif;base64," + res.img; |
|||
this.loginForm.uuid = res.uuid; |
|||
} |
|||
}) |
|||
}); |
|||
}, |
|||
getCookie() { |
|||
const username = Cookies.get("username") |
|||
const password = Cookies.get("password") |
|||
const rememberMe = Cookies.get('rememberMe') |
|||
const username = Cookies.get("username"); |
|||
const password = Cookies.get("password"); |
|||
const rememberMe = Cookies.get("rememberMe"); |
|||
this.loginForm = { |
|||
username: username === undefined ? this.loginForm.username : username, |
|||
password: password === undefined ? this.loginForm.password : decrypt(password), |
|||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) |
|||
} |
|||
password: |
|||
password === undefined |
|||
? this.loginForm.password |
|||
: decrypt(password), |
|||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), |
|||
}; |
|||
}, |
|||
handleLogin() { |
|||
this.$refs.loginForm.validate(valid => { |
|||
this.$refs.loginForm.validate((valid) => { |
|||
if (valid) { |
|||
this.loading = true |
|||
this.loading = true; |
|||
if (this.loginForm.rememberMe) { |
|||
Cookies.set("username", this.loginForm.username, { expires: 30 }) |
|||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }) |
|||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }) |
|||
Cookies.set("username", this.loginForm.username, { expires: 30 }); |
|||
Cookies.set("password", encrypt(this.loginForm.password), { |
|||
expires: 30, |
|||
}); |
|||
Cookies.set("rememberMe", this.loginForm.rememberMe, { |
|||
expires: 30, |
|||
}); |
|||
} else { |
|||
Cookies.remove("username") |
|||
Cookies.remove("password") |
|||
Cookies.remove('rememberMe') |
|||
} |
|||
this.$store.dispatch("Login", this.loginForm).then(() => { |
|||
this.$router.push({ path: this.redirect || "/" }).catch(()=>{}) |
|||
}).catch(() => { |
|||
this.loading = false |
|||
if (this.captchaEnabled) { |
|||
this.getCode() |
|||
} |
|||
}) |
|||
Cookies.remove("username"); |
|||
Cookies.remove("password"); |
|||
Cookies.remove("rememberMe"); |
|||
} |
|||
this.$store |
|||
.dispatch("Login", this.loginForm) |
|||
.then(() => { |
|||
this.$router.push({ path: "/Home" }).catch(() => {}); |
|||
}) |
|||
.catch(() => { |
|||
this.loading = false; |
|||
if (this.captchaEnabled) { |
|||
this.getCode(); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
<style lang="scss" scoped> |
|||
// 定义柔和的自然色调 |
|||
$primary-green: #2a6b3c; |
|||
$primary-light: #4a9e6e; |
|||
$primary-dark: #1a4d2a; |
|||
$accent-gold: #d4a056; |
|||
$text-dark: #1e3525; |
|||
$text-light: #4a6741; |
|||
$shadow-sm: 0 10px 25px -5px rgba(0, 0, 0, 0.08), |
|||
0 8px 10px -6px rgba(0, 0, 0, 0.02); |
|||
$shadow-lg: 0 20px 35px -8px rgba(0, 0, 0, 0.15), |
|||
0 4px 12px rgba(0, 0, 0, 0.05); |
|||
$transition-base: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); |
|||
|
|||
.login { |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
min-height: 100vh; |
|||
overflow: hidden; |
|||
font-family: "Segoe UI", "PingFang SC", Roboto, "Helvetica Neue", sans-serif; |
|||
} |
|||
|
|||
// 动态背景层 - 园林景观 |
|||
.bg-layer { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-image: url("../assets/images/login-background.jpg"); |
|||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%231a3a2a'/%3E%3Cstop offset='40%25' stop-color='%232d5a3d'/%3E%3Cstop offset='100%25' stop-color='%233d7a4d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1920' height='1080' fill='url(%23sky)'/%3E%3Cpath d='M0,800 Q200,750 400,780 T800,760 T1200,790 T1600,770 T1920,800 L1920,1080 L0,1080 Z' fill='%231a4a2a' opacity='0.5'/%3E%3Cpath d='M0,850 Q300,820 600,840 T1200,830 T1800,860 L1920,850 L1920,1080 L0,1080 Z' fill='%231e5a2e' opacity='0.4'/%3E%3C/svg%3E"); |
|||
background-size: cover; |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
animation: slowZoom 25s ease-in-out infinite alternate; |
|||
|
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: linear-gradient( |
|||
135deg, |
|||
rgba(25, 55, 35, 0.55) 0%, |
|||
rgba(15, 40, 25, 0.65) 100% |
|||
); |
|||
} |
|||
.title { |
|||
margin: 0px auto 30px auto; |
|||
} |
|||
|
|||
@keyframes slowZoom { |
|||
0% { |
|||
transform: scale(1); |
|||
} |
|||
100% { |
|||
transform: scale(1.06); |
|||
} |
|||
} |
|||
|
|||
// 植物装饰元素 |
|||
.plant-deco { |
|||
position: absolute; |
|||
z-index: 2; |
|||
pointer-events: none; |
|||
|
|||
.leaf { |
|||
position: absolute; |
|||
background: rgba(100, 160, 110, 0.35); |
|||
border-radius: 80% 0 75% 0; |
|||
backdrop-filter: blur(3px); |
|||
box-shadow: 0 0 15px rgba(70, 130, 80, 0.25); |
|||
} |
|||
|
|||
.branch { |
|||
position: absolute; |
|||
background: rgba(80, 70, 50, 0.3); |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
&.plant-left { |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 280px; |
|||
height: 280px; |
|||
|
|||
.leaf-1 { |
|||
width: 90px; |
|||
height: 90px; |
|||
transform: rotate(45deg); |
|||
bottom: 30px; |
|||
left: 20px; |
|||
animation: floatLeaf 6s ease-in-out infinite; |
|||
} |
|||
.leaf-2 { |
|||
width: 65px; |
|||
height: 65px; |
|||
transform: rotate(-15deg); |
|||
bottom: 80px; |
|||
left: 70px; |
|||
animation: floatLeaf 8s ease-in-out infinite 0.5s; |
|||
} |
|||
.leaf-3 { |
|||
width: 50px; |
|||
height: 50px; |
|||
transform: rotate(70deg); |
|||
bottom: 50px; |
|||
left: 140px; |
|||
animation: floatLeaf 5s ease-in-out infinite 1s; |
|||
} |
|||
.branch-1 { |
|||
width: 120px; |
|||
height: 6px; |
|||
transform: rotate(25deg); |
|||
bottom: 65px; |
|||
left: 100px; |
|||
animation: swayBranch 7s ease-in-out infinite; |
|||
} |
|||
} |
|||
|
|||
&.plant-right { |
|||
top: 0; |
|||
right: 0; |
|||
width: 300px; |
|||
height: 320px; |
|||
|
|||
.leaf-4 { |
|||
width: 110px; |
|||
height: 110px; |
|||
transform: rotate(-35deg); |
|||
top: 30px; |
|||
right: 20px; |
|||
animation: floatLeaf 7s ease-in-out infinite; |
|||
} |
|||
.leaf-5 { |
|||
width: 70px; |
|||
height: 70px; |
|||
transform: rotate(25deg); |
|||
top: 110px; |
|||
right: 80px; |
|||
animation: floatLeaf 9s ease-in-out infinite 0.8s; |
|||
} |
|||
.leaf-6 { |
|||
width: 55px; |
|||
height: 55px; |
|||
transform: rotate(-60deg); |
|||
top: 170px; |
|||
right: 30px; |
|||
animation: floatLeaf 6.5s ease-in-out infinite 1.5s; |
|||
} |
|||
.branch-2 { |
|||
width: 140px; |
|||
height: 7px; |
|||
transform: rotate(-20deg); |
|||
top: 100px; |
|||
right: 110px; |
|||
animation: swayBranch 8s ease-in-out infinite; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 浮动摄像头装饰 |
|||
.camera-deco { |
|||
position: absolute; |
|||
bottom: 12%; |
|||
right: 5%; |
|||
z-index: 2; |
|||
opacity: 0.5; |
|||
animation: cameraFloat 6s ease-in-out infinite; |
|||
|
|||
.camera-icon { |
|||
width: 48px; |
|||
height: 48px; |
|||
background: rgba(30, 50, 35, 0.6); |
|||
backdrop-filter: blur(4px); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: 1px solid rgba(100, 180, 120, 0.5); |
|||
box-shadow: 0 0 15px rgba(80, 160, 90, 0.3); |
|||
|
|||
i { |
|||
font-size: 24px; |
|||
color: rgba(120, 200, 130, 0.8); |
|||
} |
|||
} |
|||
|
|||
.camera-ring { |
|||
position: absolute; |
|||
top: -8px; |
|||
left: -8px; |
|||
right: -8px; |
|||
bottom: -8px; |
|||
border-radius: 50%; |
|||
border: 1px solid rgba(100, 180, 120, 0.4); |
|||
animation: pulseRing 2s ease-out infinite; |
|||
} |
|||
} |
|||
|
|||
@keyframes cameraFloat { |
|||
0%, |
|||
100% { |
|||
transform: translateY(0) translateX(0); |
|||
} |
|||
50% { |
|||
transform: translateY(-12px) translateX(5px); |
|||
} |
|||
} |
|||
|
|||
@keyframes pulseRing { |
|||
0% { |
|||
transform: scale(0.9); |
|||
opacity: 0.6; |
|||
} |
|||
100% { |
|||
transform: scale(1.4); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
@keyframes floatLeaf { |
|||
0%, |
|||
100% { |
|||
transform: translateY(0) rotate(var(--rot, 0deg)); |
|||
} |
|||
50% { |
|||
transform: translateY(-10px) rotate(var(--rot, 0deg)); |
|||
} |
|||
} |
|||
|
|||
@keyframes swayBranch { |
|||
0%, |
|||
100% { |
|||
transform: rotate(25deg); |
|||
} |
|||
50% { |
|||
transform: rotate(30deg); |
|||
} |
|||
} |
|||
|
|||
// 登录卡片 |
|||
.login-card { |
|||
position: relative; |
|||
z-index: 10; |
|||
width: 460px; |
|||
max-width: 90%; |
|||
background: rgba(255, 255, 255, 0.97); |
|||
backdrop-filter: blur(4px); |
|||
border-radius: 40px; |
|||
padding: 32px 38px 44px; |
|||
box-shadow: $shadow-lg; |
|||
transition: transform 0.4s ease, box-shadow 0.4s ease; |
|||
animation: cardAppear 0.6s ease-out; |
|||
border: 1px solid rgba(120, 180, 120, 0.2); |
|||
|
|||
&:hover { |
|||
transform: translateY(-4px); |
|||
box-shadow: 0 30px 45px -12px rgba(0, 0, 0, 0.25); |
|||
} |
|||
} |
|||
|
|||
@keyframes cardAppear { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(35px) scale(0.96); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0) scale(1); |
|||
} |
|||
} |
|||
|
|||
.card-header { |
|||
text-align: center; |
|||
color: #707070; |
|||
margin-bottom: 32px; |
|||
|
|||
.logo-area { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
gap: 10px; |
|||
margin-bottom: 8px; |
|||
|
|||
.logo-icon { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 4px; |
|||
background: linear-gradient(135deg, #2a6b3c20, #4a9e6e10); |
|||
padding: 8px 14px; |
|||
border-radius: 50px; |
|||
|
|||
.logo-leaf { |
|||
font-size: 28px; |
|||
display: inline-block; |
|||
animation: gentleSwing 3s ease-in-out infinite; |
|||
filter: drop-shadow(0 2px 6px rgba(44, 122, 77, 0.3)); |
|||
} |
|||
|
|||
.logo-camera { |
|||
font-size: 24px; |
|||
display: inline-block; |
|||
animation: gentlePulse 2s ease-in-out infinite; |
|||
} |
|||
} |
|||
|
|||
.title { |
|||
font-size: 22px; |
|||
font-weight: 600; |
|||
color: $primary-dark; |
|||
margin: 0; |
|||
letter-spacing: 2px; |
|||
} |
|||
} |
|||
|
|||
.subtitle { |
|||
font-size: 15px; |
|||
font-weight: 500; |
|||
color: $primary-green; |
|||
margin: 4px 0 0 0; |
|||
letter-spacing: 3px; |
|||
} |
|||
|
|||
.title-divider { |
|||
width: 50px; |
|||
height: 3px; |
|||
background: linear-gradient(90deg, $primary-light, $accent-gold); |
|||
margin: 14px auto 0; |
|||
border-radius: 3px; |
|||
} |
|||
} |
|||
|
|||
@keyframes gentleSwing { |
|||
0%, |
|||
100% { |
|||
transform: rotate(0deg); |
|||
} |
|||
50% { |
|||
transform: rotate(10deg); |
|||
} |
|||
} |
|||
|
|||
@keyframes gentlePulse { |
|||
0%, |
|||
100% { |
|||
transform: scale(1); |
|||
opacity: 0.9; |
|||
} |
|||
50% { |
|||
transform: scale(1.08); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
// 表单样式 |
|||
.login-form { |
|||
border-radius: 6px; |
|||
background: #ffffff; |
|||
width: 400px; |
|||
padding: 25px 25px 5px 25px; |
|||
z-index: 1; |
|||
.el-input { |
|||
height: 38px; |
|||
input { |
|||
height: 38px; |
|||
.custom-input { |
|||
::v-deep .el-input__inner { |
|||
height: 50px; |
|||
line-height: 50px; |
|||
border-radius: 30px; |
|||
border: 1.5px solid #e2ece4; |
|||
background-color: #fafefb; |
|||
padding-left: 48px; |
|||
font-size: 14px; |
|||
color: $text-dark; |
|||
transition: $transition-base; |
|||
|
|||
&:focus { |
|||
border-color: $primary-green; |
|||
box-shadow: 0 0 0 4px rgba(44, 122, 77, 0.1); |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
.input-icon { |
|||
height: 39px; |
|||
width: 14px; |
|||
margin-left: 2px; |
|||
|
|||
::v-deep .el-input__prefix { |
|||
left: 18px; |
|||
line-height: 50px; |
|||
|
|||
i { |
|||
font-size: 18px; |
|||
color: #a8c4ae; |
|||
transition: color 0.2s; |
|||
} |
|||
} |
|||
.login-tip { |
|||
font-size: 13px; |
|||
text-align: center; |
|||
color: #bfbfbf; |
|||
|
|||
&:hover ::v-deep .el-input__prefix i { |
|||
color: $primary-green; |
|||
} |
|||
} |
|||
|
|||
.captcha-item { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 12px; |
|||
|
|||
.captcha-input { |
|||
flex: 1; |
|||
|
|||
::v-deep .el-input__inner { |
|||
height: 50px; |
|||
line-height: 50px; |
|||
border-radius: 30px; |
|||
} |
|||
} |
|||
|
|||
.login-code { |
|||
width: 33%; |
|||
height: 38px; |
|||
float: right; |
|||
img { |
|||
width: 120px; |
|||
height: 50px; |
|||
flex-shrink: 0; |
|||
|
|||
.login-code-img { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
border-radius: 24px; |
|||
cursor: pointer; |
|||
vertical-align: middle; |
|||
border: 1.5px solid #e2ece4; |
|||
transition: all 0.2s; |
|||
background: #f5f9f7; |
|||
|
|||
&:hover { |
|||
transform: scale(0.96); |
|||
box-shadow: $shadow-sm; |
|||
border-color: $primary-light; |
|||
} |
|||
} |
|||
.el-login-footer { |
|||
height: 40px; |
|||
line-height: 40px; |
|||
position: fixed; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.options-area { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin: 18px 0 28px 0; |
|||
|
|||
.remember-checkbox { |
|||
::v-deep .el-checkbox__inner { |
|||
border-radius: 5px; |
|||
border-color: #cbdcd2; |
|||
background-color: #fefefe; |
|||
} |
|||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner { |
|||
background-color: $primary-green; |
|||
border-color: $primary-green; |
|||
} |
|||
color: $text-light; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
.forget-link { |
|||
color: $primary-green; |
|||
font-size: 13px; |
|||
text-decoration: none; |
|||
transition: color 0.2s; |
|||
|
|||
&:hover { |
|||
color: $primary-dark; |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.login-btn { |
|||
width: 100%; |
|||
height: 50px; |
|||
border-radius: 35px; |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
background: linear-gradient(105deg, $primary-green, $primary-light); |
|||
border: none; |
|||
box-shadow: 0 8px 20px rgba(44, 122, 77, 0.35); |
|||
transition: all 0.25s ease; |
|||
letter-spacing: 3px; |
|||
|
|||
&:hover, |
|||
&:focus { |
|||
background: linear-gradient(105deg, $primary-dark, $primary-green); |
|||
transform: translateY(-2px); |
|||
box-shadow: 0 12px 25px rgba(44, 122, 77, 0.45); |
|||
} |
|||
|
|||
&:active { |
|||
transform: translateY(1px); |
|||
} |
|||
} |
|||
|
|||
.register-area { |
|||
text-align: center; |
|||
color: #fff; |
|||
font-family: Arial; |
|||
font-size: 12px; |
|||
letter-spacing: 1px; |
|||
margin-top: 16px; |
|||
|
|||
.register-tip { |
|||
font-size: 13px; |
|||
color: $text-light; |
|||
} |
|||
|
|||
.register-link { |
|||
color: $primary-green; |
|||
font-weight: 500; |
|||
text-decoration: none; |
|||
margin-left: 6px; |
|||
transition: color 0.2s; |
|||
|
|||
&:hover { |
|||
color: $primary-dark; |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
// 响应式调整 |
|||
@media (max-width: 540px) { |
|||
.login-card { |
|||
padding: 24px 22px 32px; |
|||
} |
|||
|
|||
.plant-deco { |
|||
opacity: 0.35; |
|||
transform: scale(0.7); |
|||
} |
|||
|
|||
.camera-deco { |
|||
transform: scale(0.8); |
|||
right: 3%; |
|||
bottom: 8%; |
|||
} |
|||
|
|||
.card-header { |
|||
.logo-area .title { |
|||
font-size: 18px; |
|||
} |
|||
.subtitle { |
|||
font-size: 13px; |
|||
letter-spacing: 2px; |
|||
} |
|||
} |
|||
.login-code-img { |
|||
height: 38px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"lockfileVersion": 1 |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue