DESKTOP-00SUCB6\Administrator
4 years ago
76 changed files with 1116 additions and 1825 deletions
@ -1,10 +1,10 @@ |
|||||
config = { |
config = { |
||||
API_URL: 'http://172.119.51.140:8081', |
API_URL: 'http://61.135.192.42:8081', |
||||
CODE_URL: 'http://172.119.51.140:8082', |
CODE_URL: 'http://61.135.192.42:8082', |
||||
UPLOAD_URL: "http://172.119.51.140:8082/attachment/uploadOne", |
UPLOAD_URL: "http://61.135.192.42:8082/attachment/uploadOne", |
||||
// COCKPIT_API_URL: 'http://www.fatoaniic.com/api',
|
// COCKPIT_API_URL: 'http://www.fatoaniic.com/api',
|
||||
// LOGIN_URL: 'http://www.fatoaniic.com/#/login',
|
// LOGIN_URL: 'http://www.fatoaniic.com/#/login',
|
||||
// APP_URL:'http://nmsj.org.cn/',
|
// APP_URL:'http://nmsj.org.cn/',
|
||||
// SHOW_URL: "http://121.36.65.171:8787/file/",
|
// SHOW_URL: "http://121.36.65.171:8787/file/",
|
||||
|
|
||||
} |
} |
||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 309 KiB After Width: | Height: | Size: 385 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 309 KiB After Width: | Height: | Size: 374 KiB |
|
Before Width: | Height: | Size: 152 KiB |
|
Before Width: | Height: | Size: 181 KiB |
|
Before Width: | Height: | Size: 309 KiB After Width: | Height: | Size: 584 KiB |
|
After Width: | Height: | Size: 291 KiB |
|
Before Width: | Height: | Size: 309 KiB After Width: | Height: | Size: 453 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 411 KiB |
|
Before Width: | Height: | Size: 309 KiB After Width: | Height: | Size: 532 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 2.1 MiB |
|
Before Width: | Height: | Size: 487 B |
|
Before Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 474 B |
|
Before Width: | Height: | Size: 329 B |
|
Before Width: | Height: | Size: 571 B |
|
Before Width: | Height: | Size: 18 KiB |
@ -1,87 +0,0 @@ |
|||||
|
|
||||
.search-container { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
height: 109.7%; |
|
||||
overflow: hidden; |
|
||||
margin-top: -84px; |
|
||||
.search-header { |
|
||||
width: 100%; |
|
||||
height: 90px; |
|
||||
padding: 0 20px; |
|
||||
// background:rgba(255,255,255,0.1); |
|
||||
.logo { |
|
||||
display: inline-block; |
|
||||
margin-top: 10px; |
|
||||
// width: 580px; |
|
||||
height: 70px; |
|
||||
border: 0; |
|
||||
} |
|
||||
.white-button { |
|
||||
position: relative; |
|
||||
float: right; |
|
||||
top: 30px; |
|
||||
background:transparent; |
|
||||
color: #fff; |
|
||||
border: 1px solid #fff; |
|
||||
&:active { |
|
||||
background-color: rgba(255, 255, 255, 0.3); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-footer { |
|
||||
position: fixed; |
|
||||
bottom: 0px; |
|
||||
width: 100%; |
|
||||
// background-color:rgba(255,255,255,0.1); |
|
||||
line-height: 60px; |
|
||||
font-size:14px; |
|
||||
font-family:PingFang-SC-Regular; |
|
||||
color:#fff; |
|
||||
z-index: 5; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.el-footer .copyright { |
|
||||
position: relative; |
|
||||
} |
|
||||
} |
|
||||
.search-form { |
|
||||
position: absolute; |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
transform: translate(-50%,-50%); |
|
||||
width: 773px; |
|
||||
height: 100px; |
|
||||
label { |
|
||||
display: inline-block; |
|
||||
color: #fff; |
|
||||
margin: 10px; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
} |
|
||||
.search-form { |
|
||||
.el-input-group__append { |
|
||||
background-color: rgba(205,36,29,1); |
|
||||
color: #fff; |
|
||||
border: none; |
|
||||
&:active { |
|
||||
background-color: rgba(205,36,29,0.8); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.el-input { |
|
||||
box-shadow: 0px 0px 15px #888888; |
|
||||
&::before { |
|
||||
position: absolute; |
|
||||
content: ' '; |
|
||||
width: 14px; |
|
||||
height: 14px; |
|
||||
top: -13px; |
|
||||
left: 30px; |
|
||||
border-bottom: 7px solid #fff; |
|
||||
border-top: 7px solid transparent; |
|
||||
border-left: 7px solid transparent; |
|
||||
border-right: 7px solid transparent; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,166 +0,0 @@ |
|||||
//to reset element-ui default css |
|
||||
//table header reset css |
|
||||
.el-table thead { |
|
||||
color: #333333; |
|
||||
font-weight: 500; |
|
||||
font-size: 15px; |
|
||||
} |
|
||||
.el-table__header-wrapper tr { |
|
||||
background-color: #ececec !important; |
|
||||
} |
|
||||
.el-table th, |
|
||||
.el-table tr { |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
|
|
||||
//分页器reset css |
|
||||
.el-pagination { |
|
||||
padding: 30px 5px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.el-pagination.is-background .btn-next, |
|
||||
.el-pagination.is-background .btn-prev, |
|
||||
.el-pagination.is-background .el-pager li { |
|
||||
background-color: #ffffff; |
|
||||
border: 1px solid #ececec; |
|
||||
color: #606266; |
|
||||
} |
|
||||
.el-pagination.is-background .el-pager li:not(.disabled):hover { |
|
||||
color: #df3434; |
|
||||
} |
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active { |
|
||||
background-color: #df3434; |
|
||||
color: #fff; |
|
||||
} |
|
||||
.el-pagination__sizes .el-input .el-input__inner:hover { |
|
||||
border-color: #df3434; |
|
||||
} |
|
||||
.el-select .el-input.is-focus .el-input__inner { |
|
||||
border-color: #df3434; |
|
||||
} |
|
||||
.el-select-dropdown__item.selected { |
|
||||
color: #df3434; |
|
||||
} |
|
||||
.el-input.is-active .el-input__inner, |
|
||||
.el-input__inner:focus { |
|
||||
border-color: #df3434; |
|
||||
} |
|
||||
|
|
||||
.el-dialog__header { |
|
||||
background-color:rgba(248,248,248,1); |
|
||||
} |
|
||||
//下拉条 |
|
||||
.avatar-uploader .el-upload { |
|
||||
border: 1px dashed #929292; |
|
||||
border-radius: 6px; |
|
||||
cursor: pointer; |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.avatar-uploader .el-upload:hover { |
|
||||
border-color: #409EFF; |
|
||||
} |
|
||||
.avatar-uploader-icon { |
|
||||
font-size: 28px; |
|
||||
color: #8c939d; |
|
||||
width: 120px; |
|
||||
height: 120px; |
|
||||
line-height: 120px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.avatar { |
|
||||
width: 120px; |
|
||||
height: 120px; |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
//下拉菜单 |
|
||||
.el-dropdown-menu { |
|
||||
background-color: #F7F7F7 !important; |
|
||||
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { |
|
||||
background-color: #ffe8e6 !important; |
|
||||
color: #606266; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
//步骤条 |
|
||||
.el-step__head.is-process { |
|
||||
color: #DF3434; |
|
||||
border-color: #DF3434; |
|
||||
} |
|
||||
.el-step__title.is-process { |
|
||||
font-weight: 700; |
|
||||
color: #DF3434; |
|
||||
} |
|
||||
.el-step__description.is-process { |
|
||||
color: #DF3434; |
|
||||
} |
|
||||
|
|
||||
//文字链接 |
|
||||
.el-link { |
|
||||
vertical-align: unset; |
|
||||
} |
|
||||
|
|
||||
.el-header{ |
|
||||
position: relative; |
|
||||
width:100%; |
|
||||
padding: 0; |
|
||||
height:84px; |
|
||||
// background-color: #01496E; |
|
||||
z-index: 100; |
|
||||
} |
|
||||
|
|
||||
//el-dialog样式 |
|
||||
.el-dialog__title { |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
.el-dialog__headerbtn { |
|
||||
font-size: 22px; |
|
||||
} |
|
||||
.el-dialog__footer { |
|
||||
text-align: center; |
|
||||
} |
|
||||
//el-message-box样式 |
|
||||
.el-message-box__title { |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
.el-message-box__headerbtn { |
|
||||
font-size: 22px; |
|
||||
} |
|
||||
// .el-upload { |
|
||||
// input[type="file"] { |
|
||||
// display: none !important; |
|
||||
// } |
|
||||
// } |
|
||||
|
|
||||
// .el-upload__input { |
|
||||
// display: none; |
|
||||
// } |
|
||||
|
|
||||
// //暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461 |
|
||||
// .el-dialog { |
|
||||
// transform: none; |
|
||||
// left: 0; |
|
||||
// position: relative; |
|
||||
// margin: 0 auto; |
|
||||
// } |
|
||||
|
|
||||
// //element ui upload |
|
||||
// .upload-container { |
|
||||
// .el-upload { |
|
||||
// width: 100%; |
|
||||
// .el-upload-dragger { |
|
||||
// width: 100%; |
|
||||
// height: 200px; |
|
||||
// } |
|
||||
// } |
|
||||
// } |
|
||||
// //树形节点 |
|
||||
// .custom-tree-node { |
|
||||
// flex: 1; |
|
||||
// display: flex; |
|
||||
// align-items: center; |
|
||||
// justify-content: space-between; |
|
||||
// font-size: 14px; |
|
||||
// padding-right: 8px; |
|
||||
// } |
|
||||
@ -1,310 +0,0 @@ |
|||||
@import './variables.scss'; |
|
||||
// @import './mixin.scss'; |
|
||||
// @import './transition.scss'; |
|
||||
@import './element-ui.scss'; |
|
||||
@import './sidebar.scss'; |
|
||||
// @import './button.scss'; |
|
||||
// @import './header.scss'; |
|
||||
// @import './reset-el';//覆盖element 表单和表格样式 |
|
||||
html, |
|
||||
body, |
|
||||
h1, |
|
||||
h2, |
|
||||
h3, |
|
||||
h4, |
|
||||
h5, |
|
||||
h6, |
|
||||
div, |
|
||||
dl, |
|
||||
dt, |
|
||||
dd, |
|
||||
ul, |
|
||||
ol, |
|
||||
li, |
|
||||
p, |
|
||||
blockquote, |
|
||||
pre, |
|
||||
hr, |
|
||||
figure, |
|
||||
table, |
|
||||
caption, |
|
||||
th, |
|
||||
td, |
|
||||
form, |
|
||||
fieldset, |
|
||||
legend, |
|
||||
input, |
|
||||
button, |
|
||||
textarea, |
|
||||
menu { |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
body { |
|
||||
height: 100%; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
text-rendering: optimizeLegibility; |
|
||||
font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; |
|
||||
} |
|
||||
|
|
||||
label { |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
|
|
||||
html { |
|
||||
height: 100%; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
#app { |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
*, |
|
||||
*:before, |
|
||||
*:after { |
|
||||
box-sizing: inherit; |
|
||||
} |
|
||||
|
|
||||
a, |
|
||||
a:focus, |
|
||||
a:hover { |
|
||||
cursor: pointer; |
|
||||
color: inherit; |
|
||||
outline: none; |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
|
|
||||
div:focus { |
|
||||
outline: none; |
|
||||
} |
|
||||
|
|
||||
a:focus, |
|
||||
a:active { |
|
||||
outline: none; |
|
||||
} |
|
||||
|
|
||||
a, |
|
||||
a:focus, |
|
||||
a:hover { |
|
||||
cursor: pointer; |
|
||||
color: inherit; |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
|
|
||||
.clearfix { |
|
||||
&:after { |
|
||||
visibility: hidden; |
|
||||
display: block; |
|
||||
font-size: 0; |
|
||||
content: " "; |
|
||||
clear: both; |
|
||||
height: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.flex-box { |
|
||||
display: -webkit-box; |
|
||||
display: -webkit-flex; |
|
||||
/* Safari */ |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.flex-box-space-between { |
|
||||
display: -webkit-box; |
|
||||
display: -webkit-flex; |
|
||||
/* Safari */ |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.flex-box-column { |
|
||||
display: -webkit-box; |
|
||||
display: -webkit-flex; |
|
||||
/* Safari */ |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
.flex-box-column-reverse { |
|
||||
display: -webkit-box; |
|
||||
display: -webkit-flex; |
|
||||
/* Safari */ |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
flex-direction: column-reverse; |
|
||||
} |
|
||||
|
|
||||
.font-size-21 { |
|
||||
font-size: 21px; |
|
||||
} |
|
||||
|
|
||||
.font-size-13 { |
|
||||
font-size: 13px; |
|
||||
} |
|
||||
|
|
||||
.font-size-16 { |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
|
|
||||
.font-weight-bold { |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
|
|
||||
.line-height-2em { |
|
||||
line-height: 2em; |
|
||||
} |
|
||||
|
|
||||
.text-center { |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.flex-1 { |
|
||||
-webkit-box-flex: 1; |
|
||||
-webkit-flex: 1; |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
.color-success { |
|
||||
color: #5CB959; |
|
||||
} |
|
||||
|
|
||||
.color-error { |
|
||||
color: #EA6356; |
|
||||
} |
|
||||
|
|
||||
.color-wait { |
|
||||
color: #FFBF00; |
|
||||
} |
|
||||
|
|
||||
.float-left { |
|
||||
float: left; |
|
||||
} |
|
||||
|
|
||||
.float-right { |
|
||||
float: right; |
|
||||
} |
|
||||
|
|
||||
// ul,ol,li{ |
|
||||
// list-style: none; |
|
||||
// } |
|
||||
//main-container全局样式 |
|
||||
.app-main { |
|
||||
min-height: 100% |
|
||||
} |
|
||||
|
|
||||
.app-container { |
|
||||
padding: 20px; |
|
||||
background-color: #fff; |
|
||||
.input-suffix { |
|
||||
line-height: 60px; |
|
||||
display: inline; |
|
||||
margin: 0 1em; |
|
||||
} |
|
||||
.filter-container { |
|
||||
line-height: 50px; |
|
||||
text-align: right; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
//处理浏览器输入框记住账号密码后的背景色 |
|
||||
input:-webkit-autofill, |
|
||||
textarea:-webkit-autofill, |
|
||||
select:-webkit-autofill { |
|
||||
-webkit-text-fill-color: #333 !important; |
|
||||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important; |
|
||||
background-color: transparent; |
|
||||
background-image: none; |
|
||||
transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间 |
|
||||
} |
|
||||
|
|
||||
input { |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
|
|
||||
// .container-box{ |
|
||||
// .query-box{ |
|
||||
// background: #fff; |
|
||||
// margin-bottom:20px; |
|
||||
// border-radius: 5px; |
|
||||
// .title{ |
|
||||
// padding: 20px; |
|
||||
// font-size:18px; |
|
||||
// font-family:Microsoft YaHei; |
|
||||
// font-weight:400; |
|
||||
// color:rgba(52,123,229,1); |
|
||||
// border-bottom:1px solid #DEDEDE; |
|
||||
// } |
|
||||
// } |
|
||||
// .table-box{ |
|
||||
// background: #fff; |
|
||||
// border-radius: 5px; |
|
||||
// padding-bottom: 50px; |
|
||||
// .title-box{ |
|
||||
// .title{ |
|
||||
// padding: 21px 0 21px 21px; |
|
||||
// p{ |
|
||||
// font-size:18px; |
|
||||
// font-family:Microsoft YaHei; |
|
||||
// font-weight:400; |
|
||||
// color:rgba(68,138,231,1); |
|
||||
// border-left:3px solid #448AE7; |
|
||||
// padding-left: 8px; |
|
||||
// } |
|
||||
// } |
|
||||
// .btn{ |
|
||||
// padding: 11px 54px 11px 0; |
|
||||
// } |
|
||||
// } |
|
||||
// } |
|
||||
// } |
|
||||
// input:-webkit-autofill { |
|
||||
// -webkit-box-shadow: 0 0 0 1000px white inset !important; |
|
||||
// } |
|
||||
.header-banner { |
|
||||
position: relative; |
|
||||
height: 600px; |
|
||||
width: 100%; |
|
||||
padding-left: 20%; |
|
||||
padding-top: 100px; |
|
||||
margin-bottom: -84px; |
|
||||
.header-bg1 { |
|
||||
top: -84px; |
|
||||
left: 0; |
|
||||
// margin-left: -952px; |
|
||||
// right: 0; |
|
||||
position: absolute; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
z-index: -1; |
|
||||
} |
|
||||
.header-title-cn { |
|
||||
font-size: 64px; |
|
||||
line-height: 100px; |
|
||||
font-family: Source Han Sans CN; |
|
||||
font-weight: bold; |
|
||||
color: #fff; |
|
||||
} |
|
||||
.header-title-en { |
|
||||
font-size: 24px; |
|
||||
line-height: 50px; |
|
||||
font-family: Microsoft YaHei UI; |
|
||||
font-weight: 400; |
|
||||
color: #fff; |
|
||||
font-style: italic; |
|
||||
} |
|
||||
.header-download { |
|
||||
position: absolute; |
|
||||
bottom: 207px; |
|
||||
width: 74px; |
|
||||
height: 74px; |
|
||||
} |
|
||||
} |
|
||||
@ -1,232 +0,0 @@ |
|||||
|
|
||||
@import './variables.scss'; |
|
||||
#app { |
|
||||
// 主体区域 |
|
||||
.main-container { |
|
||||
position: relative; |
|
||||
min-height: 100%; |
|
||||
width: calc(100% -180px); |
|
||||
background-color: #EFEFEF; |
|
||||
transition: margin-left .28s; |
|
||||
margin-left: 180px; |
|
||||
} |
|
||||
.main-content { |
|
||||
width: 1200px; |
|
||||
margin: 0 15px; |
|
||||
} |
|
||||
.header-content { |
|
||||
width: 100%; |
|
||||
padding: 0 20px; |
|
||||
background: rgba(255,255,255,.1); |
|
||||
} |
|
||||
// 顶边栏 |
|
||||
.header-sidebar-container { |
|
||||
width: 100%; |
|
||||
// height: 60px; |
|
||||
position: fixed; |
|
||||
// background-color: #DF3434; |
|
||||
color: #fff; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
font-size: 18px; |
|
||||
z-index: 1001; |
|
||||
overflow: hidden; |
|
||||
.svg-icon { |
|
||||
color: #000; |
|
||||
margin-right: 16px; |
|
||||
} |
|
||||
.el-menu { |
|
||||
display: inline-block; |
|
||||
border: none; |
|
||||
height: 84px; |
|
||||
vertical-align: bottom; |
|
||||
a,.el-submenu { |
|
||||
display: inline-block; |
|
||||
float: left; |
|
||||
} |
|
||||
.el-submenu__icon-arrow { |
|
||||
position: static; |
|
||||
vertical-align: middle; |
|
||||
margin-left: 8px; |
|
||||
margin-top: -3px; |
|
||||
} |
|
||||
.el-menu-item, .el-submenu__title { |
|
||||
i { |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
height: 84px; |
|
||||
line-height: 84px; |
|
||||
font-size: 16px; |
|
||||
padding:0 25px; |
|
||||
&:hover { |
|
||||
background-color: $menuHover !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.is-active { |
|
||||
border-bottom: 3px solid #fff; |
|
||||
// border-bottom:0; |
|
||||
background-color: $menuHover !important; |
|
||||
} |
|
||||
// menu hover |
|
||||
// .submenu-title-noDropdown, |
|
||||
// .el-submenu__title { |
|
||||
// i { |
|
||||
// color: #ffffff; |
|
||||
// } |
|
||||
// &:hover { |
|
||||
// background-color: $menuHover !important; |
|
||||
// } |
|
||||
// } |
|
||||
// .is-active>.el-submenu__title { |
|
||||
// color: $subMenuActiveText !important; |
|
||||
// } |
|
||||
|
|
||||
// & .nest-menu .el-submenu>.el-submenu__title, |
|
||||
// & .el-submenu .el-menu-item { |
|
||||
// min-width: $sideBarWidth !important; |
|
||||
// background-color: $subMenuBg !important; |
|
||||
|
|
||||
// &:hover { |
|
||||
// background-color: $subMenuHover !important; |
|
||||
// } |
|
||||
// } |
|
||||
} |
|
||||
// 侧边栏 |
|
||||
.sidebar-container { |
|
||||
transition: width 0.28s; |
|
||||
width: 180px !important; |
|
||||
height: calc(100% - 84px); |
|
||||
position: absolute; |
|
||||
font-size: 0px; |
|
||||
top: 84px; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
z-index: 1001; |
|
||||
overflow: hidden; |
|
||||
//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 { |
|
||||
height: calc(100% + 15px); |
|
||||
.el-scrollbar__view { |
|
||||
height: 100%; |
|
||||
} |
|
||||
} |
|
||||
.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; |
|
||||
// background-image: url("../../static/bg.png"); |
|
||||
background-repeat: no-repeat; |
|
||||
background-size: 100% 100%; |
|
||||
li { |
|
||||
&:hover { |
|
||||
color: #DF3434; |
|
||||
background-color: #FFE8E6 !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.is-active { |
|
||||
border-left: 3px solid #DF3434; |
|
||||
color: #DF3434; |
|
||||
border-bottom:0; |
|
||||
background-color: #FFE8E6 !important; |
|
||||
} |
|
||||
} |
|
||||
.openSidebar { |
|
||||
height: calc(100% - 84px); |
|
||||
} |
|
||||
.hideSidebar { |
|
||||
height: calc(100% - 84px); |
|
||||
.sidebar-container { |
|
||||
width: 60px !important; |
|
||||
} |
|
||||
.main-container { |
|
||||
margin-left: 60px; |
|
||||
} |
|
||||
.submenu-title-noDropdown { |
|
||||
padding-left: 10px !important; |
|
||||
position: relative; |
|
||||
.el-tooltip { |
|
||||
padding: 0 10px !important; |
|
||||
} |
|
||||
} |
|
||||
.el-submenu { |
|
||||
overflow: hidden; |
|
||||
&>.el-submenu__title { |
|
||||
padding-left: 10px !important; |
|
||||
.el-submenu__icon-arrow { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-menu--collapse { |
|
||||
.el-submenu { |
|
||||
&>.el-submenu__title { |
|
||||
&>span { |
|
||||
height: 0; |
|
||||
width: 0; |
|
||||
overflow: hidden; |
|
||||
visibility: hidden; |
|
||||
display: inline-block; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
//适配移动端 |
|
||||
.mobile { |
|
||||
.main-container { |
|
||||
margin-left: 0px; |
|
||||
} |
|
||||
.sidebar-container { |
|
||||
transition: transform .28s; |
|
||||
width: 180px !important; |
|
||||
} |
|
||||
&.hideSidebar { |
|
||||
.sidebar-container { |
|
||||
transition-duration: 0.3s; |
|
||||
transform: translate3d(-180px, 0, 0); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.withoutAnimation { |
|
||||
.main-container, |
|
||||
.sidebar-container { |
|
||||
transition: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-menu--horizontal { |
|
||||
// width: 100% !important; |
|
||||
// left: 0 !important; |
|
||||
|
|
||||
background-color: #F7F7F7; |
|
||||
.el-menu--popup { |
|
||||
min-width: 120px; |
|
||||
.is-active { |
|
||||
// border-bottom: 2px solid #fff; |
|
||||
background-color: rgba(255,232,230,1) !important; |
|
||||
} |
|
||||
.el-menu-item { |
|
||||
color: #000 !important; |
|
||||
&:hover { |
|
||||
background-color: rgba(255,232,230,1) !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -1,27 +0,0 @@ |
|||||
//sidebar |
|
||||
$menuText:#fff; |
|
||||
$menuText2:#212121; |
|
||||
$menuActiveText:#fff; |
|
||||
$menuActiveText2:rgb(217, 52, 223); |
|
||||
$subMenuActiveText:#4b4bce; //https://github.com/ElemeFE/element/issues/12951 |
|
||||
|
|
||||
$menuBg:rgba(0,0,0,0); |
|
||||
$menuHover: rgba(255,255,255,0.3); |
|
||||
|
|
||||
$subMenuBg:#000; |
|
||||
$subMenuHover:#ffffff33; |
|
||||
|
|
||||
$sideBarWidth: 200px; |
|
||||
|
|
||||
// the :export directive is the magic sauce for webpack |
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|
||||
:export { |
|
||||
menuText: $menuText; |
|
||||
menuActiveText: $menuActiveText; |
|
||||
subMenuActiveText: $subMenuActiveText; |
|
||||
menuBg: $menuBg; |
|
||||
menuHover: $menuHover; |
|
||||
subMenuBg: $subMenuBg; |
|
||||
subMenuHover: $subMenuHover; |
|
||||
sideBarWidth: $sideBarWidth; |
|
||||
} |
|
||||
|
Before Width: | Height: | Size: 374 KiB |
|
Before Width: | Height: | Size: 487 B |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 474 B |
|
Before Width: | Height: | Size: 329 B |
|
Before Width: | Height: | Size: 571 B |
|
Before Width: | Height: | Size: 18 KiB |
@ -1,86 +0,0 @@ |
|||||
|
|
||||
.search-container { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
height: 109.7%; |
|
||||
overflow: hidden; |
|
||||
margin-top: -84px; |
|
||||
.search-header { |
|
||||
width: 100%; |
|
||||
height: 90px; |
|
||||
padding: 0 20px; |
|
||||
// background:rgba(255,255,255,0.1); |
|
||||
.logo { |
|
||||
display: inline-block; |
|
||||
margin-top: 10px; |
|
||||
// width: 580px; |
|
||||
height: 70px; |
|
||||
border: 0; |
|
||||
} |
|
||||
.white-button { |
|
||||
position: relative; |
|
||||
float: right; |
|
||||
top: 30px; |
|
||||
background:transparent; |
|
||||
color: #fff; |
|
||||
border: 1px solid #fff; |
|
||||
&:active { |
|
||||
background-color: rgba(255, 255, 255, 0.3); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-footer { |
|
||||
position: fixed; |
|
||||
bottom: 0px; |
|
||||
width: 100%; |
|
||||
// background-color:rgba(255,255,255,0.1); |
|
||||
line-height: 60px; |
|
||||
font-size:14px; |
|
||||
font-family:PingFang-SC-Regular; |
|
||||
color:#fff; |
|
||||
z-index: 5; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.el-footer .copyright { |
|
||||
position: relative; |
|
||||
} |
|
||||
} |
|
||||
.search-form { |
|
||||
position: absolute; |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
transform: translate(-50%,-50%); |
|
||||
width: 773px; |
|
||||
height: 100px; |
|
||||
label { |
|
||||
display: inline-block; |
|
||||
margin: 10px; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
} |
|
||||
.search-form { |
|
||||
.el-input-group__append { |
|
||||
background-color: rgba(205,36,29,1); |
|
||||
color: #fff; |
|
||||
border: none; |
|
||||
&:active { |
|
||||
background-color: rgba(205,36,29,0.8); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.el-input { |
|
||||
box-shadow: 0px 0px 15px #888888; |
|
||||
&::before { |
|
||||
position: absolute; |
|
||||
content: ' '; |
|
||||
width: 14px; |
|
||||
height: 14px; |
|
||||
top: -13px; |
|
||||
left: 30px; |
|
||||
border-bottom: 7px solid #fff; |
|
||||
border-top: 7px solid transparent; |
|
||||
border-left: 7px solid transparent; |
|
||||
border-right: 7px solid transparent; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,166 +0,0 @@ |
|||||
//to reset element-ui default css |
|
||||
//table header reset css |
|
||||
.el-table thead { |
|
||||
color: #333333; |
|
||||
font-weight: 500; |
|
||||
font-size: 15px; |
|
||||
} |
|
||||
.el-table__header-wrapper tr { |
|
||||
background-color: #ececec !important; |
|
||||
} |
|
||||
.el-table th, |
|
||||
.el-table tr { |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
|
|
||||
//分页器reset css |
|
||||
.el-pagination { |
|
||||
padding: 30px 5px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.el-pagination.is-background .btn-next, |
|
||||
.el-pagination.is-background .btn-prev, |
|
||||
.el-pagination.is-background .el-pager li { |
|
||||
background-color: #ffffff; |
|
||||
border: 1px solid #ececec; |
|
||||
color: #606266; |
|
||||
} |
|
||||
.el-pagination.is-background .el-pager li:not(.disabled):hover { |
|
||||
color: #df3434; |
|
||||
} |
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active { |
|
||||
background-color: #df3434; |
|
||||
color: #fff; |
|
||||
} |
|
||||
.el-pagination__sizes .el-input .el-input__inner:hover { |
|
||||
border-color: #df3434; |
|
||||
} |
|
||||
.el-select .el-input.is-focus .el-input__inner { |
|
||||
border-color: #df3434; |
|
||||
} |
|
||||
.el-select-dropdown__item.selected { |
|
||||
color: #df3434; |
|
||||
} |
|
||||
.el-input.is-active .el-input__inner, |
|
||||
.el-input__inner:focus { |
|
||||
border-color: #df3434; |
|
||||
} |
|
||||
|
|
||||
.el-dialog__header { |
|
||||
background-color:rgba(248,248,248,1); |
|
||||
} |
|
||||
//下拉条 |
|
||||
.avatar-uploader .el-upload { |
|
||||
border: 1px dashed #929292; |
|
||||
border-radius: 6px; |
|
||||
cursor: pointer; |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.avatar-uploader .el-upload:hover { |
|
||||
border-color: #409EFF; |
|
||||
} |
|
||||
.avatar-uploader-icon { |
|
||||
font-size: 28px; |
|
||||
color: #8c939d; |
|
||||
width: 120px; |
|
||||
height: 120px; |
|
||||
line-height: 120px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.avatar { |
|
||||
width: 120px; |
|
||||
height: 120px; |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
//下拉菜单 |
|
||||
.el-dropdown-menu { |
|
||||
background-color: #F7F7F7 !important; |
|
||||
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { |
|
||||
background-color: #ffe8e6 !important; |
|
||||
color: #606266; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
//步骤条 |
|
||||
.el-step__head.is-process { |
|
||||
color: #DF3434; |
|
||||
border-color: #DF3434; |
|
||||
} |
|
||||
.el-step__title.is-process { |
|
||||
font-weight: 700; |
|
||||
color: #DF3434; |
|
||||
} |
|
||||
.el-step__description.is-process { |
|
||||
color: #DF3434; |
|
||||
} |
|
||||
|
|
||||
//文字链接 |
|
||||
.el-link { |
|
||||
vertical-align: unset; |
|
||||
} |
|
||||
|
|
||||
.el-header{ |
|
||||
position: relative; |
|
||||
width:100%; |
|
||||
padding: 0; |
|
||||
height:84px; |
|
||||
// background-color: #01496E; |
|
||||
z-index: 100; |
|
||||
} |
|
||||
|
|
||||
//el-dialog样式 |
|
||||
.el-dialog__title { |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
.el-dialog__headerbtn { |
|
||||
font-size: 22px; |
|
||||
} |
|
||||
.el-dialog__footer { |
|
||||
text-align: center; |
|
||||
} |
|
||||
//el-message-box样式 |
|
||||
.el-message-box__title { |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
.el-message-box__headerbtn { |
|
||||
font-size: 22px; |
|
||||
} |
|
||||
// .el-upload { |
|
||||
// input[type="file"] { |
|
||||
// display: none !important; |
|
||||
// } |
|
||||
// } |
|
||||
|
|
||||
// .el-upload__input { |
|
||||
// display: none; |
|
||||
// } |
|
||||
|
|
||||
// //暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461 |
|
||||
// .el-dialog { |
|
||||
// transform: none; |
|
||||
// left: 0; |
|
||||
// position: relative; |
|
||||
// margin: 0 auto; |
|
||||
// } |
|
||||
|
|
||||
// //element ui upload |
|
||||
// .upload-container { |
|
||||
// .el-upload { |
|
||||
// width: 100%; |
|
||||
// .el-upload-dragger { |
|
||||
// width: 100%; |
|
||||
// height: 200px; |
|
||||
// } |
|
||||
// } |
|
||||
// } |
|
||||
// //树形节点 |
|
||||
// .custom-tree-node { |
|
||||
// flex: 1; |
|
||||
// display: flex; |
|
||||
// align-items: center; |
|
||||
// justify-content: space-between; |
|
||||
// font-size: 14px; |
|
||||
// padding-right: 8px; |
|
||||
// } |
|
||||
@ -1,310 +0,0 @@ |
|||||
@import './variables.scss'; |
|
||||
// @import './mixin.scss'; |
|
||||
// @import './transition.scss'; |
|
||||
@import './element-ui.scss'; |
|
||||
@import './sidebar.scss'; |
|
||||
// @import './button.scss'; |
|
||||
// @import './header.scss'; |
|
||||
// @import './reset-el';//覆盖element 表单和表格样式 |
|
||||
html, |
|
||||
body, |
|
||||
h1, |
|
||||
h2, |
|
||||
h3, |
|
||||
h4, |
|
||||
h5, |
|
||||
h6, |
|
||||
div, |
|
||||
dl, |
|
||||
dt, |
|
||||
dd, |
|
||||
ul, |
|
||||
ol, |
|
||||
li, |
|
||||
p, |
|
||||
blockquote, |
|
||||
pre, |
|
||||
hr, |
|
||||
figure, |
|
||||
table, |
|
||||
caption, |
|
||||
th, |
|
||||
td, |
|
||||
form, |
|
||||
fieldset, |
|
||||
legend, |
|
||||
input, |
|
||||
button, |
|
||||
textarea, |
|
||||
menu { |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
body { |
|
||||
height: 100%; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
text-rendering: optimizeLegibility; |
|
||||
font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; |
|
||||
} |
|
||||
|
|
||||
label { |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
|
|
||||
html { |
|
||||
height: 100%; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
#app { |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
*, |
|
||||
*:before, |
|
||||
*:after { |
|
||||
box-sizing: inherit; |
|
||||
} |
|
||||
|
|
||||
a, |
|
||||
a:focus, |
|
||||
a:hover { |
|
||||
cursor: pointer; |
|
||||
color: inherit; |
|
||||
outline: none; |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
|
|
||||
div:focus { |
|
||||
outline: none; |
|
||||
} |
|
||||
|
|
||||
a:focus, |
|
||||
a:active { |
|
||||
outline: none; |
|
||||
} |
|
||||
|
|
||||
a, |
|
||||
a:focus, |
|
||||
a:hover { |
|
||||
cursor: pointer; |
|
||||
color: inherit; |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
|
|
||||
.clearfix { |
|
||||
&:after { |
|
||||
visibility: hidden; |
|
||||
display: block; |
|
||||
font-size: 0; |
|
||||
content: " "; |
|
||||
clear: both; |
|
||||
height: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.flex-box { |
|
||||
display: -webkit-box; |
|
||||
display: -webkit-flex; |
|
||||
/* Safari */ |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.flex-box-space-between { |
|
||||
display: -webkit-box; |
|
||||
display: -webkit-flex; |
|
||||
/* Safari */ |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.flex-box-column { |
|
||||
display: -webkit-box; |
|
||||
display: -webkit-flex; |
|
||||
/* Safari */ |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
.flex-box-column-reverse { |
|
||||
display: -webkit-box; |
|
||||
display: -webkit-flex; |
|
||||
/* Safari */ |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
flex-direction: column-reverse; |
|
||||
} |
|
||||
|
|
||||
.font-size-21 { |
|
||||
font-size: 21px; |
|
||||
} |
|
||||
|
|
||||
.font-size-13 { |
|
||||
font-size: 13px; |
|
||||
} |
|
||||
|
|
||||
.font-size-16 { |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
|
|
||||
.font-weight-bold { |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
|
|
||||
.line-height-2em { |
|
||||
line-height: 2em; |
|
||||
} |
|
||||
|
|
||||
.text-center { |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.flex-1 { |
|
||||
-webkit-box-flex: 1; |
|
||||
-webkit-flex: 1; |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
.color-success { |
|
||||
color: #5CB959; |
|
||||
} |
|
||||
|
|
||||
.color-error { |
|
||||
color: #EA6356; |
|
||||
} |
|
||||
|
|
||||
.color-wait { |
|
||||
color: #FFBF00; |
|
||||
} |
|
||||
|
|
||||
.float-left { |
|
||||
float: left; |
|
||||
} |
|
||||
|
|
||||
.float-right { |
|
||||
float: right; |
|
||||
} |
|
||||
|
|
||||
// ul,ol,li{ |
|
||||
// list-style: none; |
|
||||
// } |
|
||||
//main-container全局样式 |
|
||||
.app-main { |
|
||||
min-height: 100% |
|
||||
} |
|
||||
|
|
||||
.app-container { |
|
||||
padding: 20px; |
|
||||
background-color: #fff; |
|
||||
.input-suffix { |
|
||||
line-height: 60px; |
|
||||
display: inline; |
|
||||
margin: 0 1em; |
|
||||
} |
|
||||
.filter-container { |
|
||||
line-height: 50px; |
|
||||
text-align: right; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
//处理浏览器输入框记住账号密码后的背景色 |
|
||||
input:-webkit-autofill, |
|
||||
textarea:-webkit-autofill, |
|
||||
select:-webkit-autofill { |
|
||||
-webkit-text-fill-color: #333 !important; |
|
||||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important; |
|
||||
background-color: transparent; |
|
||||
background-image: none; |
|
||||
transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间 |
|
||||
} |
|
||||
|
|
||||
input { |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
|
|
||||
// .container-box{ |
|
||||
// .query-box{ |
|
||||
// background: #fff; |
|
||||
// margin-bottom:20px; |
|
||||
// border-radius: 5px; |
|
||||
// .title{ |
|
||||
// padding: 20px; |
|
||||
// font-size:18px; |
|
||||
// font-family:Microsoft YaHei; |
|
||||
// font-weight:400; |
|
||||
// color:rgba(52,123,229,1); |
|
||||
// border-bottom:1px solid #DEDEDE; |
|
||||
// } |
|
||||
// } |
|
||||
// .table-box{ |
|
||||
// background: #fff; |
|
||||
// border-radius: 5px; |
|
||||
// padding-bottom: 50px; |
|
||||
// .title-box{ |
|
||||
// .title{ |
|
||||
// padding: 21px 0 21px 21px; |
|
||||
// p{ |
|
||||
// font-size:18px; |
|
||||
// font-family:Microsoft YaHei; |
|
||||
// font-weight:400; |
|
||||
// color:rgba(68,138,231,1); |
|
||||
// border-left:3px solid #448AE7; |
|
||||
// padding-left: 8px; |
|
||||
// } |
|
||||
// } |
|
||||
// .btn{ |
|
||||
// padding: 11px 54px 11px 0; |
|
||||
// } |
|
||||
// } |
|
||||
// } |
|
||||
// } |
|
||||
// input:-webkit-autofill { |
|
||||
// -webkit-box-shadow: 0 0 0 1000px white inset !important; |
|
||||
// } |
|
||||
.header-banner { |
|
||||
position: relative; |
|
||||
height: 600px; |
|
||||
width: 100%; |
|
||||
padding-left: 20%; |
|
||||
padding-top: 100px; |
|
||||
margin-bottom: -84px; |
|
||||
.header-bg1 { |
|
||||
top: -84px; |
|
||||
left: 0; |
|
||||
// margin-left: -952px; |
|
||||
// right: 0; |
|
||||
position: absolute; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
z-index: -1; |
|
||||
} |
|
||||
.header-title-cn { |
|
||||
font-size: 64px; |
|
||||
line-height: 100px; |
|
||||
font-family: Source Han Sans CN; |
|
||||
font-weight: bold; |
|
||||
color: #fff; |
|
||||
} |
|
||||
.header-title-en { |
|
||||
font-size: 24px; |
|
||||
line-height: 50px; |
|
||||
font-family: Microsoft YaHei UI; |
|
||||
font-weight: 400; |
|
||||
color: #fff; |
|
||||
font-style: italic; |
|
||||
} |
|
||||
.header-download { |
|
||||
position: absolute; |
|
||||
bottom: 207px; |
|
||||
width: 74px; |
|
||||
height: 74px; |
|
||||
} |
|
||||
} |
|
||||
@ -1,232 +0,0 @@ |
|||||
|
|
||||
@import './variables.scss'; |
|
||||
#app { |
|
||||
// 主体区域 |
|
||||
.main-container { |
|
||||
position: relative; |
|
||||
min-height: 100%; |
|
||||
width: calc(100% -180px); |
|
||||
background-color: #EFEFEF; |
|
||||
transition: margin-left .28s; |
|
||||
margin-left: 180px; |
|
||||
} |
|
||||
.main-content { |
|
||||
width: 1200px; |
|
||||
margin: 0 15px; |
|
||||
} |
|
||||
.header-content { |
|
||||
width: 100%; |
|
||||
padding: 0 20px; |
|
||||
background: rgba(255,255,255,.1); |
|
||||
} |
|
||||
// 顶边栏 |
|
||||
.header-sidebar-container { |
|
||||
width: 100%; |
|
||||
// height: 60px; |
|
||||
position: fixed; |
|
||||
// background-color: #DF3434; |
|
||||
color: #fff; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
font-size: 18px; |
|
||||
z-index: 1001; |
|
||||
overflow: hidden; |
|
||||
.svg-icon { |
|
||||
color: #000; |
|
||||
margin-right: 16px; |
|
||||
} |
|
||||
.el-menu { |
|
||||
display: inline-block; |
|
||||
border: none; |
|
||||
height: 84px; |
|
||||
vertical-align: bottom; |
|
||||
a,.el-submenu { |
|
||||
display: inline-block; |
|
||||
float: left; |
|
||||
} |
|
||||
.el-submenu__icon-arrow { |
|
||||
position: static; |
|
||||
vertical-align: middle; |
|
||||
margin-left: 8px; |
|
||||
margin-top: -3px; |
|
||||
} |
|
||||
.el-menu-item, .el-submenu__title { |
|
||||
i { |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
height: 84px; |
|
||||
line-height: 84px; |
|
||||
font-size: 16px; |
|
||||
padding:0 25px; |
|
||||
&:hover { |
|
||||
background-color: $menuHover !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.is-active { |
|
||||
border-bottom: 3px solid #fff; |
|
||||
// border-bottom:0; |
|
||||
background-color: $menuHover !important; |
|
||||
} |
|
||||
// menu hover |
|
||||
// .submenu-title-noDropdown, |
|
||||
// .el-submenu__title { |
|
||||
// i { |
|
||||
// color: #ffffff; |
|
||||
// } |
|
||||
// &:hover { |
|
||||
// background-color: $menuHover !important; |
|
||||
// } |
|
||||
// } |
|
||||
// .is-active>.el-submenu__title { |
|
||||
// color: $subMenuActiveText !important; |
|
||||
// } |
|
||||
|
|
||||
// & .nest-menu .el-submenu>.el-submenu__title, |
|
||||
// & .el-submenu .el-menu-item { |
|
||||
// min-width: $sideBarWidth !important; |
|
||||
// background-color: $subMenuBg !important; |
|
||||
|
|
||||
// &:hover { |
|
||||
// background-color: $subMenuHover !important; |
|
||||
// } |
|
||||
// } |
|
||||
} |
|
||||
// 侧边栏 |
|
||||
.sidebar-container { |
|
||||
transition: width 0.28s; |
|
||||
width: 180px !important; |
|
||||
height: calc(100% - 84px); |
|
||||
position: absolute; |
|
||||
font-size: 0px; |
|
||||
top: 84px; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
z-index: 1001; |
|
||||
overflow: hidden; |
|
||||
//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 { |
|
||||
height: calc(100% + 15px); |
|
||||
.el-scrollbar__view { |
|
||||
height: 100%; |
|
||||
} |
|
||||
} |
|
||||
.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; |
|
||||
// background-image: url("../../static/bg.png"); |
|
||||
background-repeat: no-repeat; |
|
||||
background-size: 100% 100%; |
|
||||
li { |
|
||||
&:hover { |
|
||||
color: #DF3434; |
|
||||
background-color: #FFE8E6 !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.is-active { |
|
||||
border-left: 3px solid #DF3434; |
|
||||
color: #DF3434; |
|
||||
border-bottom:0; |
|
||||
background-color: #FFE8E6 !important; |
|
||||
} |
|
||||
} |
|
||||
.openSidebar { |
|
||||
height: calc(100% - 84px); |
|
||||
} |
|
||||
.hideSidebar { |
|
||||
height: calc(100% - 84px); |
|
||||
.sidebar-container { |
|
||||
width: 60px !important; |
|
||||
} |
|
||||
.main-container { |
|
||||
margin-left: 60px; |
|
||||
} |
|
||||
.submenu-title-noDropdown { |
|
||||
padding-left: 10px !important; |
|
||||
position: relative; |
|
||||
.el-tooltip { |
|
||||
padding: 0 10px !important; |
|
||||
} |
|
||||
} |
|
||||
.el-submenu { |
|
||||
overflow: hidden; |
|
||||
&>.el-submenu__title { |
|
||||
padding-left: 10px !important; |
|
||||
.el-submenu__icon-arrow { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-menu--collapse { |
|
||||
.el-submenu { |
|
||||
&>.el-submenu__title { |
|
||||
&>span { |
|
||||
height: 0; |
|
||||
width: 0; |
|
||||
overflow: hidden; |
|
||||
visibility: hidden; |
|
||||
display: inline-block; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
//适配移动端 |
|
||||
.mobile { |
|
||||
.main-container { |
|
||||
margin-left: 0px; |
|
||||
} |
|
||||
.sidebar-container { |
|
||||
transition: transform .28s; |
|
||||
width: 180px !important; |
|
||||
} |
|
||||
&.hideSidebar { |
|
||||
.sidebar-container { |
|
||||
transition-duration: 0.3s; |
|
||||
transform: translate3d(-180px, 0, 0); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.withoutAnimation { |
|
||||
.main-container, |
|
||||
.sidebar-container { |
|
||||
transition: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-menu--horizontal { |
|
||||
// width: 100% !important; |
|
||||
// left: 0 !important; |
|
||||
|
|
||||
background-color: #F7F7F7; |
|
||||
.el-menu--popup { |
|
||||
min-width: 120px; |
|
||||
.is-active { |
|
||||
// border-bottom: 2px solid #fff; |
|
||||
background-color: rgba(255,232,230,1) !important; |
|
||||
} |
|
||||
.el-menu-item { |
|
||||
color: #000 !important; |
|
||||
&:hover { |
|
||||
background-color: rgba(255,232,230,1) !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -1,27 +0,0 @@ |
|||||
//sidebar |
|
||||
$menuText:#fff; |
|
||||
$menuText2:#212121; |
|
||||
$menuActiveText:#fff; |
|
||||
$menuActiveText2:rgb(217, 52, 223); |
|
||||
$subMenuActiveText:#4b4bce; //https://github.com/ElemeFE/element/issues/12951 |
|
||||
|
|
||||
$menuBg:rgba(0,0,0,0); |
|
||||
$menuHover: rgba(255,255,255,0.3); |
|
||||
|
|
||||
$subMenuBg:#000; |
|
||||
$subMenuHover:#ffffff33; |
|
||||
|
|
||||
$sideBarWidth: 200px; |
|
||||
|
|
||||
// the :export directive is the magic sauce for webpack |
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|
||||
:export { |
|
||||
menuText: $menuText; |
|
||||
menuActiveText: $menuActiveText; |
|
||||
subMenuActiveText: $subMenuActiveText; |
|
||||
menuBg: $menuBg; |
|
||||
menuHover: $menuHover; |
|
||||
subMenuBg: $subMenuBg; |
|
||||
subMenuHover: $subMenuHover; |
|
||||
sideBarWidth: $sideBarWidth; |
|
||||
} |
|
||||
|
After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 648 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 142 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 239 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 176 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 360 KiB After Width: | Height: | Size: 103 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 272 KiB After Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 989 B |
|
Before Width: | Height: | Size: 152 KiB After Width: | Height: | Size: 159 KiB |
|
Before Width: | Height: | Size: 181 KiB After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,166 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="banner-box"> |
||||
|
<img class="banner-bg" :src="_getImage('联盟成果','top-banner.jpg')"/> |
||||
|
<div class="banner-content"> |
||||
|
<p class="mytitle">{{noticeList.length>0? noticeList[0].title :''}}</p> |
||||
|
<p class="description">{{noticeList.length>0? noticeList[0].description :''}}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<br><br><br> |
||||
|
<span class="title">技术标准</span> |
||||
|
<el-divider></el-divider> |
||||
|
<div class="notice-list" v-for="(item,index) in noticeList" :key="index" @click="showNoticeDetail(item)"> |
||||
|
<img :src="item.imgUrl ? item.imgUrl : require('../../assets/home/benchmark-eg.png')" alt="" class="img-block"> |
||||
|
<div class="content-block"> |
||||
|
<p class="text-title"><span style="color:#01496E;"></span>{{item.title}}</p> |
||||
|
<p class="text-content">{{item.description}}</p> |
||||
|
</div> |
||||
|
<span class="text-date">{{item.issueStartTime}}</span> |
||||
|
</div> |
||||
|
<el-pagination |
||||
|
layout="prev, pager, next" |
||||
|
:current-page.sync="currentPage" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:page-size="10" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import {getNoticeList} from "@/api/notice" |
||||
|
export default { |
||||
|
name: "benchmark", |
||||
|
data() { |
||||
|
return { |
||||
|
noticeList:[], |
||||
|
currentPage:1, |
||||
|
total:0 |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initData() |
||||
|
}, |
||||
|
methods:{ |
||||
|
initData(){ |
||||
|
let params = { |
||||
|
"pageNum": this.currentPage, |
||||
|
"pageSize": 10, |
||||
|
"search": { |
||||
|
"type": "JSBZ" |
||||
|
}, |
||||
|
"sort": "" |
||||
|
} |
||||
|
getNoticeList(params).then(res => { |
||||
|
this.noticeList = res.data.list |
||||
|
this.total = res.data.count |
||||
|
}) |
||||
|
}, |
||||
|
showNoticeDetail(item){ |
||||
|
this.$router.push({name:'noticeShow',query:{'id':item.id,'title':item.topicTypeText}}) |
||||
|
}, |
||||
|
//当前页变化 |
||||
|
handleCurrentChange(val) { |
||||
|
this.currentPage = val |
||||
|
this.initData() |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.banner-box { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 300px; |
||||
|
padding: 70px; |
||||
|
.banner-bg { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
.banner-content { |
||||
|
position: relative; |
||||
|
margin: 10px; |
||||
|
color: #000; |
||||
|
text-align: center; |
||||
|
.mytitle { |
||||
|
font-size: 28px; |
||||
|
font-weight: 600; |
||||
|
line-height: 60px; |
||||
|
} |
||||
|
.description { |
||||
|
font-size: 16px; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.title { |
||||
|
position: relative; |
||||
|
color: #1e50ae; |
||||
|
font-size: 18px; |
||||
|
padding: 0 10px; |
||||
|
font-weight: bold; |
||||
|
font-family: 微软雅黑; |
||||
|
&::before { |
||||
|
content: " "; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -25px; |
||||
|
width: 100%; |
||||
|
height: 4px; |
||||
|
background: #1e50ae; |
||||
|
} |
||||
|
} |
||||
|
.notice-list { |
||||
|
position: relative; |
||||
|
background-color: rgba(255,255,255,0); |
||||
|
cursor: pointer; |
||||
|
color: #999999; |
||||
|
font-family:PingFang SC; |
||||
|
border-bottom: 1px dotted #dcdcdc; |
||||
|
margin: 0 30px; |
||||
|
.img-block { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
vertical-align: top; |
||||
|
width: 120px; |
||||
|
height: 100px; |
||||
|
padding: 5px; |
||||
|
} |
||||
|
.content-block { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
width: calc(100% - 200px); |
||||
|
height: 100px; |
||||
|
padding: 0 15px; |
||||
|
} |
||||
|
.text-date { |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
vertical-align: super; |
||||
|
} |
||||
|
.text-title { |
||||
|
font-size: 16px; |
||||
|
margin: 6px 0; |
||||
|
font-weight:600; |
||||
|
color: #666666; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
.text-content { |
||||
|
font-size: 14px; |
||||
|
overflow: hidden; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp:2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
&:hover { |
||||
|
.text-title { |
||||
|
color: #3893c7; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,166 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="banner-box"> |
||||
|
<img class="banner-bg" :src="_getImage('联盟成果','top-banner.jpg')"/> |
||||
|
<div class="banner-content"> |
||||
|
<p class="mytitle">{{noticeList.length>0? noticeList[0].title :''}}</p> |
||||
|
<p class="description">{{noticeList.length>0? noticeList[0].description :''}}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<br><br><br> |
||||
|
<span class="title">电子会刊</span> |
||||
|
<el-divider></el-divider> |
||||
|
<div class="notice-list" v-for="(item,index) in noticeList" :key="index" @click="showNoticeDetail(item)"> |
||||
|
<img :src="item.imgUrl ? item.imgUrl : require('../../assets/home/electronicMeetings-eg.png')" alt="" class="img-block"> |
||||
|
<div class="content-block"> |
||||
|
<p class="text-title"><span style="color:#01496E;"></span>{{item.title}}</p> |
||||
|
<p class="text-content">{{item.description}}</p> |
||||
|
</div> |
||||
|
<span class="text-date">{{item.issueStartTime}}</span> |
||||
|
</div> |
||||
|
<el-pagination |
||||
|
layout="prev, pager, next" |
||||
|
:current-page.sync="currentPage" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:page-size="10" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import {getNoticeList} from "@/api/notice" |
||||
|
export default { |
||||
|
name: "electronicMeetings", |
||||
|
data() { |
||||
|
return { |
||||
|
noticeList:[], |
||||
|
currentPage:1, |
||||
|
total:0 |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initData() |
||||
|
}, |
||||
|
methods:{ |
||||
|
initData(){ |
||||
|
let params = { |
||||
|
"pageNum": this.currentPage, |
||||
|
"pageSize": 10, |
||||
|
"search": { |
||||
|
"type": "DZHK" |
||||
|
}, |
||||
|
"sort": "" |
||||
|
} |
||||
|
getNoticeList(params).then(res => { |
||||
|
this.noticeList = res.data.list |
||||
|
this.total = res.data.count |
||||
|
}) |
||||
|
}, |
||||
|
showNoticeDetail(item){ |
||||
|
this.$router.push({name:'noticeShow',query:{'id':item.id,'title':item.topicTypeText}}) |
||||
|
}, |
||||
|
//当前页变化 |
||||
|
handleCurrentChange(val) { |
||||
|
this.currentPage = val |
||||
|
this.initData() |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.banner-box { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 300px; |
||||
|
padding: 70px; |
||||
|
.banner-bg { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
.banner-content { |
||||
|
position: relative; |
||||
|
margin: 10px; |
||||
|
color: #000; |
||||
|
text-align: center; |
||||
|
.mytitle { |
||||
|
font-size: 28px; |
||||
|
font-weight: 600; |
||||
|
line-height: 60px; |
||||
|
} |
||||
|
.description { |
||||
|
font-size: 16px; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.title { |
||||
|
position: relative; |
||||
|
color: #1e50ae; |
||||
|
font-size: 18px; |
||||
|
padding: 0 10px; |
||||
|
font-weight: bold; |
||||
|
font-family: 微软雅黑; |
||||
|
&::before { |
||||
|
content: " "; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -25px; |
||||
|
width: 100%; |
||||
|
height: 4px; |
||||
|
background: #1e50ae; |
||||
|
} |
||||
|
} |
||||
|
.notice-list { |
||||
|
position: relative; |
||||
|
background-color: rgba(255,255,255,0); |
||||
|
cursor: pointer; |
||||
|
color: #999999; |
||||
|
font-family:PingFang SC; |
||||
|
border-bottom: 1px dotted #dcdcdc; |
||||
|
margin: 0 30px; |
||||
|
.img-block { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
vertical-align: top; |
||||
|
width: 120px; |
||||
|
height: 100px; |
||||
|
padding: 5px; |
||||
|
} |
||||
|
.content-block { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
width: calc(100% - 200px); |
||||
|
height: 100px; |
||||
|
padding: 0 15px; |
||||
|
} |
||||
|
.text-date { |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
vertical-align: super; |
||||
|
} |
||||
|
.text-title { |
||||
|
font-size: 16px; |
||||
|
margin: 6px 0; |
||||
|
font-weight:600; |
||||
|
color: #666666; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
.text-content { |
||||
|
font-size: 14px; |
||||
|
overflow: hidden; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp:2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
&:hover { |
||||
|
.text-title { |
||||
|
color: #3893c7; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,166 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="banner-box"> |
||||
|
<img class="banner-bg" :src="_getImage('联盟成果','top-banner.jpg')"/> |
||||
|
<div class="banner-content"> |
||||
|
<p class="mytitle">{{noticeList.length>0? noticeList[0].title :''}}</p> |
||||
|
<p class="description">{{noticeList.length>0? noticeList[0].description :''}}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<br><br><br> |
||||
|
<span class="title">应用案例</span> |
||||
|
<el-divider></el-divider> |
||||
|
<div class="notice-list" v-for="(item,index) in noticeList" :key="index" @click="showNoticeDetail(item)"> |
||||
|
<img :src="item.imgUrl ? item.imgUrl : require('../../assets/home/example-eg.png')" alt="" class="img-block"> |
||||
|
<div class="content-block"> |
||||
|
<p class="text-title"><span style="color:#01496E;"></span>{{item.title}}</p> |
||||
|
<p class="text-content">{{item.description}}</p> |
||||
|
</div> |
||||
|
<span class="text-date">{{item.issueStartTime}}</span> |
||||
|
</div> |
||||
|
<el-pagination |
||||
|
layout="prev, pager, next" |
||||
|
:current-page.sync="currentPage" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:page-size="10" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import {getNoticeList} from "@/api/notice" |
||||
|
export default { |
||||
|
name: "example", |
||||
|
data() { |
||||
|
return { |
||||
|
noticeList:[], |
||||
|
currentPage:1, |
||||
|
total:0 |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initData() |
||||
|
}, |
||||
|
methods:{ |
||||
|
initData(){ |
||||
|
let params = { |
||||
|
"pageNum": this.currentPage, |
||||
|
"pageSize": 10, |
||||
|
"search": { |
||||
|
"type": "YYAL" |
||||
|
}, |
||||
|
"sort": "" |
||||
|
} |
||||
|
getNoticeList(params).then(res => { |
||||
|
this.noticeList = res.data.list |
||||
|
this.total = res.data.count |
||||
|
}) |
||||
|
}, |
||||
|
showNoticeDetail(item){ |
||||
|
this.$router.push({name:'noticeShow',query:{'id':item.id,'title':item.topicTypeText}}) |
||||
|
}, |
||||
|
//当前页变化 |
||||
|
handleCurrentChange(val) { |
||||
|
this.currentPage = val |
||||
|
this.initData() |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.banner-box { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 300px; |
||||
|
padding: 70px; |
||||
|
.banner-bg { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
.banner-content { |
||||
|
position: relative; |
||||
|
margin: 10px; |
||||
|
color: #000; |
||||
|
text-align: center; |
||||
|
.mytitle { |
||||
|
font-size: 28px; |
||||
|
font-weight: 600; |
||||
|
line-height: 60px; |
||||
|
} |
||||
|
.description { |
||||
|
font-size: 16px; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.title { |
||||
|
position: relative; |
||||
|
color: #1e50ae; |
||||
|
font-size: 18px; |
||||
|
padding: 0 10px; |
||||
|
font-weight: bold; |
||||
|
font-family: 微软雅黑; |
||||
|
&::before { |
||||
|
content: " "; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -25px; |
||||
|
width: 100%; |
||||
|
height: 4px; |
||||
|
background: #1e50ae; |
||||
|
} |
||||
|
} |
||||
|
.notice-list { |
||||
|
position: relative; |
||||
|
background-color: rgba(255,255,255,0); |
||||
|
cursor: pointer; |
||||
|
color: #999999; |
||||
|
font-family:PingFang SC; |
||||
|
border-bottom: 1px dotted #dcdcdc; |
||||
|
margin: 0 30px; |
||||
|
.img-block { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
vertical-align: top; |
||||
|
width: 120px; |
||||
|
height: 100px; |
||||
|
padding: 5px; |
||||
|
} |
||||
|
.content-block { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
width: calc(100% - 200px); |
||||
|
height: 100px; |
||||
|
padding: 0 15px; |
||||
|
} |
||||
|
.text-date { |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
vertical-align: super; |
||||
|
} |
||||
|
.text-title { |
||||
|
font-size: 16px; |
||||
|
margin: 6px 0; |
||||
|
font-weight:600; |
||||
|
color: #666666; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
.text-content { |
||||
|
font-size: 14px; |
||||
|
overflow: hidden; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp:2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
&:hover { |
||||
|
.text-title { |
||||
|
color: #3893c7; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,166 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="banner-box"> |
||||
|
<img class="banner-bg" :src="_getImage('联盟成果','top-banner.jpg')"/> |
||||
|
<div class="banner-content"> |
||||
|
<p class="mytitle">{{noticeList.length>0? noticeList[0].title :''}}</p> |
||||
|
<p class="description">{{noticeList.length>0? noticeList[0].description :''}}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<br><br><br> |
||||
|
<span class="title">白皮书</span> |
||||
|
<el-divider></el-divider> |
||||
|
<div class="notice-list" v-for="(item,index) in noticeList" :key="index" @click="showNoticeDetail(item)"> |
||||
|
<img :src="item.imgUrl ? item.imgUrl : require('../../assets/home/whitepaper-eg.png')" alt="" class="img-block"> |
||||
|
<div class="content-block"> |
||||
|
<p class="text-title"><span style="color:#01496E;"></span>{{item.title}}</p> |
||||
|
<p class="text-content">{{item.description}}</p> |
||||
|
</div> |
||||
|
<span class="text-date">{{item.issueStartTime}}</span> |
||||
|
</div> |
||||
|
<el-pagination |
||||
|
layout="prev, pager, next" |
||||
|
:current-page.sync="currentPage" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:page-size="10" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import {getNoticeList} from "@/api/notice" |
||||
|
export default { |
||||
|
name: "whitepaper", |
||||
|
data() { |
||||
|
return { |
||||
|
noticeList:[], |
||||
|
currentPage:1, |
||||
|
total:0 |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initData() |
||||
|
}, |
||||
|
methods:{ |
||||
|
initData(){ |
||||
|
let params = { |
||||
|
"pageNum": this.currentPage, |
||||
|
"pageSize": 10, |
||||
|
"search": { |
||||
|
"type": "BPS" |
||||
|
}, |
||||
|
"sort": "" |
||||
|
} |
||||
|
getNoticeList(params).then(res => { |
||||
|
this.noticeList = res.data.list |
||||
|
this.total = res.data.count |
||||
|
}) |
||||
|
}, |
||||
|
showNoticeDetail(item){ |
||||
|
this.$router.push({name:'noticeShow',query:{'id':item.id,'title':item.topicTypeText}}) |
||||
|
}, |
||||
|
//当前页变化 |
||||
|
handleCurrentChange(val) { |
||||
|
this.currentPage = val |
||||
|
this.initData() |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.banner-box { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 300px; |
||||
|
padding: 70px; |
||||
|
.banner-bg { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
.banner-content { |
||||
|
position: relative; |
||||
|
margin: 10px; |
||||
|
color: #000; |
||||
|
text-align: center; |
||||
|
.mytitle { |
||||
|
font-size: 28px; |
||||
|
font-weight: 600; |
||||
|
line-height: 60px; |
||||
|
} |
||||
|
.description { |
||||
|
font-size: 16px; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.title { |
||||
|
position: relative; |
||||
|
color: #1e50ae; |
||||
|
font-size: 18px; |
||||
|
padding: 0 10px; |
||||
|
font-weight: bold; |
||||
|
font-family: 微软雅黑; |
||||
|
&::before { |
||||
|
content: " "; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -25px; |
||||
|
width: 100%; |
||||
|
height: 4px; |
||||
|
background: #1e50ae; |
||||
|
} |
||||
|
} |
||||
|
.notice-list { |
||||
|
position: relative; |
||||
|
background-color: rgba(255,255,255,0); |
||||
|
cursor: pointer; |
||||
|
color: #999999; |
||||
|
font-family:PingFang SC; |
||||
|
border-bottom: 1px dotted #dcdcdc; |
||||
|
margin: 0 30px; |
||||
|
.img-block { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
vertical-align: top; |
||||
|
width: 120px; |
||||
|
height: 100px; |
||||
|
padding: 5px; |
||||
|
} |
||||
|
.content-block { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
width: calc(100% - 200px); |
||||
|
height: 100px; |
||||
|
padding: 0 15px; |
||||
|
} |
||||
|
.text-date { |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
vertical-align: super; |
||||
|
} |
||||
|
.text-title { |
||||
|
font-size: 16px; |
||||
|
margin: 6px 0; |
||||
|
font-weight:600; |
||||
|
color: #666666; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
.text-content { |
||||
|
font-size: 14px; |
||||
|
overflow: hidden; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp:2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
&:hover { |
||||
|
.text-title { |
||||
|
color: #3893c7; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue