談蓝色
10 months ago
57 changed files with 10069 additions and 54 deletions
-
2chai-ui/package.json
-
BINchai-ui/public/font/EZSx3exf4cjI.woff
-
BINchai-ui/public/font/EZSx3exf4cjI.woff2
-
57chai-ui/public/index.html
-
BINchai-ui/src/assets/imageHome/1.png
-
BINchai-ui/src/assets/imageHome/11.png
-
BINchai-ui/src/assets/imageHome/2.png
-
BINchai-ui/src/assets/imageHome/22.png
-
BINchai-ui/src/assets/imageHome/3.png
-
BINchai-ui/src/assets/imageHome/4.png
-
BINchai-ui/src/assets/imageHome/5.png
-
BINchai-ui/src/assets/imageHome/6.png
-
BINchai-ui/src/assets/imageHome/7.png
-
BINchai-ui/src/assets/imageHome/8.png
-
BINchai-ui/src/assets/imageHome/bj1.mp4
-
BINchai-ui/src/assets/imageHome/bj2.mp4
-
BINchai-ui/src/assets/imageHome/card.png
-
BINchai-ui/src/assets/imageHome/card_hover.png
-
BINchai-ui/src/assets/imageHome/chimg.png
-
BINchai-ui/src/assets/imageHome/head.png
-
BINchai-ui/src/assets/imageHome/sou.png
-
BINchai-ui/src/assets/images/logo.png
-
384chai-ui/src/assets/styles/chenhai.scss
-
623chai-ui/src/assets/styles/cloud/custom-animation.css
-
1292chai-ui/src/assets/styles/cloud/index.css
-
34chai-ui/src/assets/styles/cloud/reset.css
-
688chai-ui/src/assets/styles/index.css
-
1chai-ui/src/assets/styles/index.min.css
-
4chai-ui/src/assets/styles/map-theme/default/font-awesome.min.css
-
434chai-ui/src/assets/styles/map-theme/default/style.css
-
BINchai-ui/src/assets/styles/map-theme/fonts/FontAwesome.otf
-
BINchai-ui/src/assets/styles/map-theme/fonts/fontawesome-webfont.eot
-
2671chai-ui/src/assets/styles/map-theme/fonts/fontawesome-webfont.svg
-
BINchai-ui/src/assets/styles/map-theme/fonts/fontawesome-webfont.ttf
-
BINchai-ui/src/assets/styles/map-theme/fonts/fontawesome-webfont.woff
-
BINchai-ui/src/assets/styles/map-theme/fonts/fontawesome-webfont.woff2
-
1426chai-ui/src/assets/styles/map.css
-
406chai-ui/src/assets/styles/map2.css
-
7chai-ui/src/assets/styles/ruoyi.scss
-
36chai-ui/src/assets/styles/sidebar.scss
-
25chai-ui/src/assets/styles/variables.css
-
1chai-ui/src/assets/styles/variables.min.css
-
19chai-ui/src/assets/styles/variables.scss
-
99chai-ui/src/assets/styles1/btn.scss
-
92chai-ui/src/assets/styles1/element-ui.scss
-
31chai-ui/src/assets/styles1/element-variables.scss
-
182chai-ui/src/assets/styles1/index.scss
-
66chai-ui/src/assets/styles1/mixin.scss
-
296chai-ui/src/assets/styles1/ruoyi.scss
-
227chai-ui/src/assets/styles1/sidebar.scss
-
49chai-ui/src/assets/styles1/transition.scss
-
54chai-ui/src/assets/styles1/variables.scss
-
37chai-ui/src/router/index.js
-
525chai-ui/src/views/home.vue
-
340chai-ui/src/views/homeOverview/PolicyThinkTank.vue
-
10chai-ui/src/views/login.vue
-
3chai-ui/vue.config.js
|
After Width: 1981 | Height: 2186 | Size: 4.7 MiB |
|
After Width: 1142 | Height: 860 | Size: 627 KiB |
|
After Width: 1981 | Height: 2381 | Size: 5.3 MiB |
|
After Width: 1142 | Height: 860 | Size: 782 KiB |
|
After Width: 1981 | Height: 2200 | Size: 5.5 MiB |
|
After Width: 1981 | Height: 2395 | Size: 4.8 MiB |
|
After Width: 1981 | Height: 2181 | Size: 4.9 MiB |
|
After Width: 2133 | Height: 1994 | Size: 5.5 MiB |
|
After Width: 2134 | Height: 2095 | Size: 3.6 MiB |
|
After Width: 2133 | Height: 2136 | Size: 4.1 MiB |
|
After Width: 281 | Height: 273 | Size: 26 KiB |
|
After Width: 282 | Height: 273 | Size: 25 KiB |
|
After Width: 626 | Height: 626 | Size: 40 KiB |
|
After Width: 1920 | Height: 105 | Size: 112 KiB |
|
After Width: 208 | Height: 200 | Size: 4.1 KiB |
|
After Width: 4032 | Height: 2304 | Size: 8.1 MiB |
@ -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
chai-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
chai-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
chai-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
chai-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
chai-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
chai-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,182 @@ |
|||
@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; |
|||
} |
|||
|
|||
.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, 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,296 @@ |
|||
/** |
|||
* 通用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__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 { |
|||
position: relative; |
|||
height: 32px; |
|||
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; |
|||
} |
|||
|
|||
@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 { |
|||
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; |
|||
} |
|||
|
|||
/* 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; |
|||
} |
|||
|
|||
/* 分割面板样式 */ |
|||
.splitpanes.default-theme .splitpanes__pane { |
|||
background-color: #fff!important; |
|||
} |
|||
@ -0,0 +1,227 @@ |
|||
#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: 2px 0 6px rgba(0,21,41,.35); |
|||
|
|||
// 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: 16px; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
// 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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hideSidebar { |
|||
.sidebar-container { |
|||
width: 54px !important; |
|||
} |
|||
|
|||
.main-container { |
|||
margin-left: 54px; |
|||
} |
|||
|
|||
.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,54 @@ |
|||
// base color |
|||
$blue:#324157; |
|||
$light-blue:#3A71A8; |
|||
$red:#C03639; |
|||
$pink: #E65D6E; |
|||
$green: #30B08F; |
|||
$tiffany: #4AB7BD; |
|||
$yellow:#FEC171; |
|||
$panGreen: #30B08F; |
|||
|
|||
// 默认菜单主题风格 |
|||
$base-menu-color:#bfcbd9; |
|||
$base-menu-color-active:#f4f4f5; |
|||
$base-menu-background:#304156; |
|||
$base-logo-title-color: #ffffff; |
|||
|
|||
$base-menu-light-color:rgba(0,0,0,.70); |
|||
$base-menu-light-background:#ffffff; |
|||
$base-logo-light-title-color: #001529; |
|||
|
|||
$base-sub-menu-background:#1f2d3d; |
|||
$base-sub-menu-hover:#001528; |
|||
|
|||
// 自定义暗色菜单风格 |
|||
/** |
|||
$base-menu-color:hsla(0,0%,100%,.65); |
|||
$base-menu-color-active:#fff; |
|||
$base-menu-background:#001529; |
|||
$base-logo-title-color: #ffffff; |
|||
|
|||
$base-menu-light-color:rgba(0,0,0,.70); |
|||
$base-menu-light-background:#ffffff; |
|||
$base-logo-light-title-color: #001529; |
|||
|
|||
$base-sub-menu-background:#000c17; |
|||
$base-sub-menu-hover:#001528; |
|||
*/ |
|||
|
|||
$base-sidebar-width: 200px; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
menuColor: $base-menu-color; |
|||
menuLightColor: $base-menu-light-color; |
|||
menuColorActive: $base-menu-color-active; |
|||
menuBackground: $base-menu-background; |
|||
menuLightBackground: $base-menu-light-background; |
|||
subMenuBackground: $base-sub-menu-background; |
|||
subMenuHover: $base-sub-menu-hover; |
|||
sideBarWidth: $base-sidebar-width; |
|||
logoTitleColor: $base-logo-title-color; |
|||
logoLightTitleColor: $base-logo-light-title-color |
|||
} |
|||
@ -0,0 +1,525 @@ |
|||
<template> |
|||
<div class="box"> |
|||
<!-- 背景 --> |
|||
<video class="video-background" autoplay loop muted :src="require('../assets/imageHome/bj1.mp4')" /> |
|||
<!-- 时间-管理员 --> |
|||
<div class="right-item" id="time"> |
|||
<div class="time-box"> |
|||
<span>{{ time }}</span> |
|||
<span>{{ date }}</span> |
|||
<span>{{ weekday }}</span> |
|||
</div> |
|||
<div class="tool-box"> |
|||
<span>你好，{{ username }}</span> |
|||
<i class="el-icon-switch-button" @click="logout()" /> |
|||
<!-- <i class="el-icon-setting" @click="$router.push('/system/user')" /> --> |
|||
</div> |
|||
</div> |
|||
<div class="newScreen"> |
|||
<div class="head" id="head"> |
|||
<div class="head1_1">阿拉善盟AI智策中枢</div> |
|||
<img src="../assets/imageHome/head.png" alt=""> |
|||
</div> |
|||
<div class="center_box" id="center_box"> |
|||
<div class="swiper-container"> |
|||
<div class="swiper-wrapper"> |
|||
<div v-for="(list, page) in mainBlock" :key="page" class="swiper-slide"> |
|||
<div v-for="(item, index) in list" :key="index" class="menu-item" |
|||
@mouseenter="changeImg($event.target, item.bgHover)" @mouseleave="changeImg($event.target, item.bg)" |
|||
@click="bindOpen(item)"> |
|||
<img :src="item.bg" alt="" class="item-icon"> |
|||
<div class="item-center"> |
|||
<div class="span">{{ item.name }}</div> |
|||
<img :src="item.icon"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 如果需要分页器 --> |
|||
<div class="swiper-pagination" /> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
import $ from 'jquery' |
|||
import Swiper from "../../node_modules/swiper/js/swiper"; |
|||
import '@/assets/styles/cloud/index.css' |
|||
import '@/assets/styles/cloud/reset.css' |
|||
import '@/assets/styles/cloud/custom-animation.css' |
|||
import { getUserProfile } from "@/api/system/user"; |
|||
|
|||
export default { |
|||
name: "home", |
|||
data() { |
|||
return { |
|||
weekday: "", |
|||
date: "", |
|||
time: "", |
|||
username: "", |
|||
mainBlock: [ |
|||
// 链接类型：1-路由 2-链接 3-建设中 4-点击事件 |
|||
[ |
|||
{ |
|||
type: 1, |
|||
url: "/chart", |
|||
name: "AI问政", |
|||
bg: require("@/assets/imageHome/22.png"), |
|||
bgHover: require("@/assets/imageHome/11.png"), |
|||
icon: require("@/assets/imageHome/3.png"), |
|||
}, |
|||
{ |
|||
type: 2, |
|||
url: "/turnover/statistic", |
|||
name: "智析中心", |
|||
bg: require("@/assets/imageHome/22.png"), |
|||
bgHover: require("@/assets/imageHome/11.png"), |
|||
icon: require("@/assets/imageHome/1.png"), |
|||
}, |
|||
{ |
|||
type: 3, |
|||
url: "swgk/chart", |
|||
name: "趋势洞察", |
|||
menuName: "Flow-person", |
|||
bg: require("@/assets/imageHome/22.png"), |
|||
bgHover: require("@/assets/imageHome/11.png"), |
|||
icon: require("@/assets/imageHome/4.png"), |
|||
}, |
|||
{ |
|||
type: 3, |
|||
url: "/largeScreen", |
|||
name: "智汇报告", |
|||
bg: require("@/assets/imageHome/22.png"), |
|||
bgHover: require("@/assets/imageHome/11.png"), |
|||
icon: require("@/assets/imageHome/2.png"), |
|||
}, |
|||
{ |
|||
type: 3, |
|||
url: "/mh/mhInfo/mhInfo", |
|||
name: "智策融汇", |
|||
bg: require("@/assets/imageHome/22.png"), |
|||
bgHover: require("@/assets/imageHome/11.png"), |
|||
icon: require("@/assets/imageHome/6.png"), |
|||
}, |
|||
{ |
|||
type: 2, |
|||
url: "PolicyThinkTank", |
|||
name: "政策智库", |
|||
bg: require("@/assets/imageHome/22.png"), |
|||
bgHover: require("@/assets/imageHome/11.png"), |
|||
icon: require("@/assets/imageHome/5.png"), |
|||
}, |
|||
{ |
|||
type: 3, |
|||
url: "/system/notice", |
|||
name: "应用管理", |
|||
bg: require("@/assets/imageHome/22.png"), |
|||
bgHover: require("@/assets/imageHome/11.png"), |
|||
icon: require("@/assets/imageHome/7.png"), |
|||
}, |
|||
{ |
|||
type: 2, |
|||
url: "/system/menu", |
|||
name: "系统管理", |
|||
bg: require("@/assets/imageHome/22.png"), |
|||
bgHover: require("@/assets/imageHome/11.png"), |
|||
icon: require("@/assets/imageHome/8.png"), |
|||
}, |
|||
] |
|||
], |
|||
} |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
|
|||
mounted() { |
|||
const swiper = new Swiper(".swiper-container", { |
|||
autoplay: false, |
|||
pagination: { |
|||
el: ".swiper-pagination", |
|||
}, |
|||
clickable: true, |
|||
navigation: { |
|||
nextEl: ".el-icon-arrow-right", |
|||
prevEl: ".el-icon-arrow-left", |
|||
}, |
|||
}); |
|||
|
|||
this.$nextTick(() => { |
|||
playAnimation('#head', [ |
|||
{ |
|||
type: 'fadeInDown', |
|||
name: '淡入', |
|||
delayed: 0.5, |
|||
loop: false, |
|||
frequency: 1, |
|||
duration: 2, |
|||
isPlayer: false, |
|||
isDisabled: false |
|||
} |
|||
]) |
|||
playAnimation('#center_box', [ |
|||
{ |
|||
type: 'fadeInUp', |
|||
name: '向上移入', |
|||
delayed: 1, |
|||
loop: false, |
|||
frequency: 1, |
|||
duration: 2, |
|||
isPlayer: false, |
|||
isDisabled: false |
|||
} |
|||
]) |
|||
playAnimation('#time', [ |
|||
{ |
|||
type: 'fadeInRight', |
|||
name: '向上移入', |
|||
delayed: 1, |
|||
loop: false, |
|||
frequency: 1, |
|||
duration: 2, |
|||
isPlayer: false, |
|||
isDisabled: false |
|||
} |
|||
]) |
|||
|
|||
/** |
|||
* |
|||
* @param {*} id |
|||
* @param {*} animations |
|||
* 执行动画库函数【不用修改,可自行调整位置】 |
|||
* 声明初始值 |
|||
* 判断动画是否结束 |
|||
*/ |
|||
function playAnimation(id, animations) { |
|||
let index = 0 |
|||
const ele = document.querySelector(id) |
|||
setAnimation(ele, animations[index]) |
|||
ele.addEventListener('webkitAnimationEnd', function () { |
|||
if (index < animations.length - 1) { |
|||
index++ |
|||
setAnimation(ele, animations[index]) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {*} element |
|||
* @param {*} animation |
|||
* 执行动画库函数【不用修改,可自行调整位置】 |
|||
* 取index对应的动画 |
|||
* 给元素animation重新赋值 |
|||
*/ |
|||
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.getNow(); |
|||
setInterval(this.getNow, 1000); |
|||
this.getUser(); |
|||
}, |
|||
|
|||
methods: { |
|||
async logout() { |
|||
this.$confirm("确定注销并退出系统吗？", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
this.$store.dispatch("LogOut").then(() => { |
|||
location.href = "/index"; |
|||
}); |
|||
}) |
|||
.catch(() => { }); |
|||
}, |
|||
// 打开各个页面 |
|||
bindOpen(val) { |
|||
console.log(val); |
|||
if (val.type === 1) { |
|||
this.$router.push(val.url); |
|||
} |
|||
if (val.type === 2) { |
|||
window.open(val.url); |
|||
} |
|||
if (val.type === 3) { |
|||
this.$message({ type: 'warning', message:val.name + '开发中...'}); |
|||
} |
|||
}, |
|||
|
|||
// 移入移出 |
|||
changeImg(el, icon) { |
|||
$(el).find('.item-icon').attr('src', icon) |
|||
}, |
|||
getUser() { |
|||
getUserProfile().then((res) => { |
|||
this.username = res.data.nickName; |
|||
}); |
|||
}, |
|||
|
|||
getNow() { |
|||
const date = new Date(); |
|||
const year = date.getFullYear(); |
|||
const month = |
|||
date.getMonth() + 1 < 10 |
|||
? "0" + (Number(date.getMonth()) + 1) |
|||
: Number(date.getMonth()) + 1; |
|||
const dates = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); |
|||
const day = date.getDay(); |
|||
const week = [ |
|||
"星期日", |
|||
"星期一", |
|||
"星期二", |
|||
"星期三", |
|||
"星期四", |
|||
"星期五", |
|||
"星期六", |
|||
]; |
|||
const H = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); |
|||
const M = |
|||
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); |
|||
const S = |
|||
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); |
|||
// console.log(year + '-' + month + '-' + dates + ' ' + week[day] + ' ' + H + ':' + M + ':' + S) |
|||
this.date = year + "-" + month + "-" + dates; |
|||
this.time = H + ":" + M + ":" + S; |
|||
this.weekday = week[day]; |
|||
// return year + '-' + month + '-' + dates + ' ' + week[day] + ' ' + H + ':' + M + ':' + S |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.box { |
|||
.video-background { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: fill; |
|||
} |
|||
|
|||
.right-item { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 20px; |
|||
color: #fff; |
|||
z-index: 30; |
|||
|
|||
.time-box { |
|||
margin: 5px; |
|||
|
|||
span { |
|||
display: inline-block; |
|||
margin: 0 10px; |
|||
|
|||
&:first-child { |
|||
font-size: 28px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&:nth-child(n + 2) { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&:last-child { |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tool-box { |
|||
float: right; |
|||
margin: 0 15px; |
|||
display: grid; |
|||
grid-template-columns: 1fr 30px; |
|||
grid-column-gap: 5px; |
|||
align-items: center; |
|||
|
|||
img { |
|||
width: 30px; |
|||
margin: 0 0 0 10px; |
|||
vertical-align: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
span { |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
vertical-align: center; |
|||
} |
|||
|
|||
i { |
|||
font-size: 20px; |
|||
text-align: center; |
|||
transition: all 0.25s; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: #ffca76; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.newScreen { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
display: grid; |
|||
grid-template-rows: 100px 1fr; |
|||
row-gap: 50px; |
|||
box-sizing: border-box; |
|||
|
|||
.head { |
|||
position: relative; |
|||
|
|||
.head1_1 { |
|||
text-align: center; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 9px; |
|||
margin: auto; |
|||
font-weight: bold; |
|||
font-size: 32px; |
|||
letter-spacing: 5px; |
|||
|
|||
color: transparent; |
|||
background: linear-gradient(to bottom, #98F5FF, #0EC0FF); |
|||
-webkit-background-clip: text; |
|||
background-clip: text; |
|||
|
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
animation: move 7s steps(60) forwards; |
|||
|
|||
@keyframes move { |
|||
from { |
|||
width: 0; |
|||
} |
|||
|
|||
to { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
img { |
|||
width: 100%; |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
|
|||
.center_box { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.swiper-container { |
|||
width: 100%; |
|||
|
|||
.swiper-slide { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr 1fr 1fr; |
|||
justify-items: center; |
|||
row-gap: 100px; |
|||
|
|||
.menu-item { |
|||
overflow: hidden; |
|||
position: relative; |
|||
transform: scale(); |
|||
cursor: pointer; |
|||
|
|||
>img { |
|||
width: 18vw; |
|||
height: 28vh; |
|||
} |
|||
|
|||
.item-center { |
|||
width: 100%; |
|||
left: 0; |
|||
top: 10%; |
|||
overflow: hidden; |
|||
position: absolute; |
|||
justify-content: center; |
|||
text-align: center; |
|||
|
|||
img { |
|||
width: 30%; |
|||
margin: 20px 0; |
|||
} |
|||
|
|||
div { |
|||
font-size: 24px; |
|||
color: #fff; |
|||
|
|||
} |
|||
|
|||
p { |
|||
margin: 25px 0 0; |
|||
color: #fff; |
|||
font-size: 13px; |
|||
overflow-y: scroll; |
|||
line-height: 20px; |
|||
height: 60%; |
|||
padding: 0 5px; |
|||
box-sizing: border-box; |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 4px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-track { |
|||
box-shadow: rgba(0, 0, 0, .3); |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
border-radius: 10px; |
|||
background: #007eff; |
|||
box-shadow: rgba(0, 0, 0, .3); |
|||
} |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
span { |
|||
color: #ffca76; |
|||
text-shadow: 0 0 10px #ff7920; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.menu-item:hover { |
|||
font-weight: bolder; |
|||
text-shadow: 0 0 10px #1febde; |
|||
} |
|||
} |
|||
|
|||
.swiper-pagination { |
|||
width: 40px; |
|||
height: 4px; |
|||
border-radius: 5px; |
|||
background-color: #fff; |
|||
margin: 0 auto; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,340 @@ |
|||
<template> |
|||
<div class="cen_box"> |
|||
<div class="left"> |
|||
<div class="left1"> |
|||
<img src="../../assets/imageHome/5.png" alt=""> |
|||
<div>政策<span>智库</span></div> |
|||
</div> |
|||
<div class="left2"> |
|||
<el-button :class="['left2_1', num == index ? 'active' : '']" size="mini" type="primary" |
|||
icon="el-icon-s-promotion" v-for="(item, index) in zbList" :key="index" |
|||
@click="bandActive(item, index)">{{ item.name }}</el-button> |
|||
</div> |
|||
<div class="uploading"> |
|||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="111" |
|||
:disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" |
|||
:auto-upload="false" drag> |
|||
<i class="el-icon-upload"></i> |
|||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> |
|||
<div class="el-upload__tip text-center" slot="tip"> |
|||
<span>仅允许导入xls、xlsx格式文件。</span> |
|||
</div> |
|||
</el-upload> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="right"> |
|||
<div class='search'> |
|||
<div class='search1'> |
|||
<img src="../../assets/imageHome/sou.png" alt="" /> |
|||
<input type="text" placeholder='请输入想要搜索的内容' @keyup.enter.native="handleQuery" /> |
|||
</div> |
|||
<button @click="handleQuery">搜索</button> |
|||
</div> |
|||
<div class="nr"> |
|||
<el-row :gutter="10" class="mb8"> |
|||
<el-col :span="1.5"> |
|||
<el-button type="danger" plain icon="el-icon-delete-solid" size="mini" :disabled="multiple" |
|||
@click="handleDelete">删除选定的</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-table v-loading="loading" :data="tableList" @row-click="handleDetails" |
|||
@selection-change="handleSelectionChange"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column label="文件列表" align="left" prop="title" /> |
|||
<el-table-column label="时间" align="center" prop="time" /> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<div class="controls"> |
|||
<el-button size="mini" type="primary" icon="el-icon-s-promotion" |
|||
@click="handlePublic(scope.row)">设为公有</el-button> |
|||
<el-button size="mini" type="primary" icon="el-icon-s-finance" |
|||
@click="handlePrivate(scope.row)">设为私有</el-button> |
|||
<el-button size="mini" type="primary" icon="el-icon-download" |
|||
@click="handleDownload(scope.row)">下载文件</el-button> |
|||
<el-button size="mini" type="primary" icon="el-icon-delete-solid" |
|||
@click="handleDelete(scope.row)">删除</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" |
|||
:limit.sync="queryParams.pageSize" @pagination="zbList" /> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
|
|||
import { getToken } from "@/utils/auth"; |
|||
export default { |
|||
name: "PolicyThinkTank", |
|||
data() { |
|||
return { |
|||
upload: { |
|||
// 是否禁用上传 |
|||
isUploading: false, |
|||
// 是否更新已经存在的用户数据 |
|||
updateSupport: 0, |
|||
// 设置上传的请求头部 |
|||
headers: { Authorization: "Bearer " + getToken() }, |
|||
// 上传的地址 |
|||
url: process.env.VUE_APP_BASE_API + "" |
|||
}, |
|||
// 遮罩层 |
|||
loading: false, |
|||
// 默认值 |
|||
num: 0, |
|||
// 总条数 |
|||
total: 0, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
}, |
|||
zbList: [ |
|||
{ |
|||
name: '公开类型' |
|||
}, |
|||
{ |
|||
name: '私有类型' |
|||
}, |
|||
{ |
|||
name: '涉密类型' |
|||
} |
|||
], |
|||
tableList: [ |
|||
{ title: '2024年阿拉善盟规模以上工业运行情况.docx', time: '2025-05-21' }, |
|||
{ title: '2024年全区规模以上工业运行情况.docx', time: '2025-05-21' }, |
|||
{ title: '2025年2月份内蒙古自治区政府债券付息兑付公告.docx', time: '2025-05-21' }, |
|||
{ title: '保健食品原料目录与保健功能目录管理办法.docx', time: '2025-05-21' }, |
|||
{ title: '2025年度内蒙古自治区交通运输综合行政执法总队预算公开.docx', time: '2025-05-21' }, |
|||
{ title: '关于全面开展2025年节水型企业节水型工业园区创建工作的通知.docx', time: '2025-05-21' }, |
|||
{ title: '分布式光伏发电开发建设管理办法.docx', time: '2025-05-21' }, |
|||
{ title: '关于印发《内蒙古自治区医疗保障基金社会监督员管理办法》的通知.docx', time: '2025-05-21' }, |
|||
{ title: '关于做好2025年全区家电以旧换新补贴工作的通知.docx', time: '2025-05-21' }, |
|||
{ title: '内蒙古自治区财政厅关于加强政府采购结余资金管理的通知.docx', time: '2025-05-21' } |
|||
] |
|||
} |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
|
|||
mounted() { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.queryParams.pageNum = 1; |
|||
// this.getList(); |
|||
}, |
|||
// 点击列表 |
|||
bandActive(item, index) { |
|||
this.num = index |
|||
}, |
|||
|
|||
// 多选框选中数据 |
|||
handleSelectionChange(selection) { |
|||
console.log(111, selection); |
|||
// this.ids = selection.map(item => item.id) |
|||
// this.nameto = selection.map(item => item.villName) |
|||
// this.single = selection.length !== 1 |
|||
this.multiple = !selection.length |
|||
}, |
|||
//设为公有 |
|||
handlePublic() { |
|||
|
|||
}, |
|||
//设为私有 |
|||
handlePrivate() { |
|||
|
|||
}, |
|||
//下载列表 |
|||
handleDownload() { |
|||
|
|||
}, |
|||
//删除 |
|||
handleDelete() { |
|||
|
|||
}, |
|||
handleDetails() { |
|||
|
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.cen_box { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
box-sizing: border-box; |
|||
display: grid; |
|||
grid-template-columns: 260px 1fr; |
|||
|
|||
.left { |
|||
width: 100%; |
|||
padding: 20px 10px; |
|||
background-color: #EBEFFA; |
|||
|
|||
.left1 { |
|||
display: grid; |
|||
grid-template-columns: 40px 1fr; |
|||
align-items: center; |
|||
|
|||
img { |
|||
width: 30px; |
|||
height: 35px; |
|||
} |
|||
|
|||
div { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
|
|||
span { |
|||
color: #828285; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.left2 { |
|||
margin: 20px 0; |
|||
cursor: pointer; |
|||
border-bottom: 1px solid #D9DCEB; |
|||
|
|||
.left2_1 { |
|||
width: 100%; |
|||
padding: 10px 15px; |
|||
margin: 12px 0; |
|||
border-radius: 12px; |
|||
font-size: 14px; |
|||
background-color: #E2E6F1; |
|||
border-color: transparent; |
|||
color: black; |
|||
text-align: left; |
|||
} |
|||
|
|||
.active { |
|||
border: 1px solid #4955F5; |
|||
background-color: #DFE4F9; |
|||
color: #4955F5; |
|||
} |
|||
|
|||
.left2_1:hover { |
|||
background-color: #DFE4F9; |
|||
} |
|||
|
|||
.active:hover { |
|||
background-color: #D3D8FA; |
|||
} |
|||
} |
|||
|
|||
.uploading {} |
|||
} |
|||
|
|||
.right { |
|||
width: 100%; |
|||
padding: 20px 10px; |
|||
background-color: #F4F6FC; |
|||
|
|||
.search { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.search1 { |
|||
width: 50%; |
|||
position: relative; |
|||
box-shadow: 0 0 3px #CFCFCF; |
|||
border-radius: 50px; |
|||
|
|||
input { |
|||
width: 100%; |
|||
border-bottom-left-radius: 50px; |
|||
border-top-left-radius: 50px; |
|||
padding: 12px 0 12px 50px; |
|||
border: none; |
|||
} |
|||
|
|||
input:focus { |
|||
outline: none; |
|||
border: 1px solid #1677FF; |
|||
} |
|||
|
|||
img { |
|||
width: 30px; |
|||
height: 30px; |
|||
position: absolute; |
|||
left: 10px; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
} |
|||
} |
|||
|
|||
button { |
|||
color: #fff; |
|||
background-color: #1677FF; |
|||
padding: 12px 30px 12px; |
|||
border-top-right-radius: 50px; |
|||
border-bottom-right-radius: 50px; |
|||
box-shadow: 0 0 3px #CFCFCF; |
|||
border: none; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
button:hover { |
|||
background-color: #095ccf; |
|||
} |
|||
|
|||
} |
|||
|
|||
.nr { |
|||
margin: 20px 0; |
|||
|
|||
.controls { |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
button { |
|||
background-color: #E0F2FE; |
|||
border: none; |
|||
color: #026AA2; |
|||
padding: 10px; |
|||
} |
|||
|
|||
button:hover { |
|||
background-color: #026AA2; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style scoped> |
|||
button { |
|||
padding: 10px; |
|||
} |
|||
|
|||
/deep/ .el-table th { |
|||
background-color: #EBEFFA; |
|||
} |
|||
|
|||
/deep/ .el-upload-dragger { |
|||
width: 240px; |
|||
height: 150px; |
|||
} |
|||
</style> |
|||
|
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue