登录页及主页样式
Before Width: | Height: | Size: 121 KiB After Width: | Height: | Size: 97 KiB |
BIN
src/assets/img/icon-密码.png
Normal file
After Width: | Height: | Size: 885 B |
BIN
src/assets/img/icon-账户.png
Normal file
After Width: | Height: | Size: 778 B |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/img/login_button_hover.png
Normal file
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/img/loginbg.png
Normal file
After Width: | Height: | Size: 6.8 MiB |
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 2.9 KiB |
|
@ -1,10 +1,12 @@
|
|||
@bordercolor : #327290;
|
||||
@bordercolor : #C8C8C8;
|
||||
@headercolor : #1f232a;
|
||||
@backcolor : #454959;
|
||||
@inpuitbackcolor : #343642;
|
||||
@labelDeaultColor : #9698a4;
|
||||
@inpuitbackcolor : #ffffff;
|
||||
@labelDeaultColor : #282828;
|
||||
@defaultWhiteColor: #eeeeee;
|
||||
@fontfamily : 'Microsoft YaHei';
|
||||
@tableheadColor : #e5e8eb;
|
||||
@tableColor : #575D63;
|
||||
|
||||
/* 滚动条优化 start */
|
||||
::-webkit-scrollbar {
|
||||
|
@ -36,7 +38,7 @@
|
|||
}
|
||||
body {
|
||||
// 打开滚动条固定显示
|
||||
overflow-y: hidden;
|
||||
overflow: hidden;
|
||||
|
||||
&.colorWeak {
|
||||
filter: invert(80%);
|
||||
|
@ -59,22 +61,27 @@ body {
|
|||
color: #8a8e9e !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* chrome 记住密码样式 */
|
||||
.user-layout-login .has-success input:-webkit-autofill {
|
||||
box-shadow : inset 0 0 1000px #252c40 !important;
|
||||
-webkit-text-fill-color: @labelDeaultColor !important;
|
||||
box-shadow: inset 0 0 1000px 1000px #0f142a !important;
|
||||
-webkit-text-fill-color: #fff !important;
|
||||
}
|
||||
|
||||
.ant-layout {
|
||||
background: url('~@/assets/img/layoutbg.png') no-repeat center bottom !important;
|
||||
// background: url('~@/assets/img/layoutbg.png') no-repeat center bottom !important;
|
||||
background-color: #fff !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-layout-header {
|
||||
background: url('~@/assets/img/header_bg.png') no-repeat center top !important;
|
||||
height: 154px !important;
|
||||
margin-top: -4px;
|
||||
background-image: url('~@/assets/img/header_bg.png') !important;
|
||||
background-size: 100% 100%;
|
||||
height: 64px !important;
|
||||
}
|
||||
|
||||
|
||||
.signdiv,
|
||||
.ant-card-head,
|
||||
.ant-form-item label,
|
||||
|
@ -198,11 +205,11 @@ ul li {
|
|||
font-family: @fontfamily;
|
||||
font-weight: 400 !important;
|
||||
font-size : 16px !important;
|
||||
color : #d4d4d4 !important;
|
||||
color : @tableColor !important;
|
||||
}
|
||||
|
||||
.table-page-search-wrapper {
|
||||
padding: 8px 0 0 0;
|
||||
padding: 30px 10px 10px 20px;
|
||||
}
|
||||
|
||||
|
||||
|
@ -212,9 +219,6 @@ ul li {
|
|||
background: none !important;
|
||||
}
|
||||
|
||||
.ant-layout-header {
|
||||
height: 160px !important;
|
||||
}
|
||||
|
||||
.libraryConfiguration .border-card {
|
||||
height: 670px !important;
|
||||
|
@ -265,11 +269,11 @@ ul li {
|
|||
}
|
||||
.ant-radio-wrapper,
|
||||
.ant-input-affix-wrapper .ant-input-prefix,
|
||||
.ant-input-affix-wrapper .ant-input-suffix,
|
||||
.ant-input-affix-wrapper .ant-input-suffix,
|
||||
.ant-pagination-disabled .ant-pagination-item-link,
|
||||
.ant-pagination-item a,
|
||||
.ant-empty-normal,
|
||||
.anticon.anticon-schedule, .border-card:hover,
|
||||
.anticon.anticon-schedule, .border-card:hover,
|
||||
.ant-tabs-tab-active,
|
||||
.ant-tabs-tab:hover,
|
||||
.ant-form-item,
|
||||
|
@ -290,11 +294,12 @@ ul li {
|
|||
}
|
||||
|
||||
.ant-layout-content {
|
||||
margin : 0 30px;
|
||||
padding : 20px 50px !important;
|
||||
background : url(~@/assets/img/layoutcontentTop.png) 0 0 no-repeat, url(~@/assets/img/layoutcontentMiddle.png) 0 24px no-repeat, url(~@/assets/img/layoutcontentBottom.png) 0 calc(100vh - 182px) no-repeat;
|
||||
background-size: calc(100vw - 80px) 24px, calc(100vw - 80px) calc(100vh - 206px), calc(100vw - 80px) 24px;
|
||||
height : calc(100vh - 155px) !important;
|
||||
padding : 0 !important;
|
||||
// background : url(~@/assets/img/layoutcontentTop.png) 0 0 no-repeat, url(~@/assets/img/layoutcontentMiddle.png) 0 24px no-repeat, url(~@/assets/img/layoutcontentBottom.png) 0 calc(100vh - 182px) no-repeat;
|
||||
// background-size: calc(100vw - 80px) 24px, calc(100vw - 80px) calc(100vh - 206px), calc(100vw - 80px) 24px;
|
||||
height : calc(100vh - 64px) !important;
|
||||
margin-top: -2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout {
|
||||
|
@ -441,12 +446,12 @@ ul li {
|
|||
margin : auto;
|
||||
padding: 0 20px 0 0;
|
||||
display: flex;
|
||||
height : 80px;
|
||||
height : 64px;
|
||||
|
||||
.ant-menu.ant-menu-horizontal {
|
||||
border : none;
|
||||
height : 80px;
|
||||
line-height: 80px;
|
||||
height : 64px;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
.header-index-left {
|
||||
|
@ -454,9 +459,9 @@ ul li {
|
|||
|
||||
.logo.top-nav-header {
|
||||
width : 165px;
|
||||
height : 80px;
|
||||
height : 64px;
|
||||
position : relative;
|
||||
line-height: 80px;
|
||||
line-height: 64px;
|
||||
transition : all 0.3s;
|
||||
overflow : hidden;
|
||||
|
||||
|
@ -479,7 +484,7 @@ ul li {
|
|||
|
||||
.header-index-right {
|
||||
float : right;
|
||||
height : 80px;
|
||||
height : 64px;
|
||||
overflow: hidden;
|
||||
|
||||
.action:hover {
|
||||
|
@ -570,7 +575,7 @@ textarea,
|
|||
.ant-input-number-handler-wrap,
|
||||
.ant-select-dropdown-content {
|
||||
border : 1px solid @bordercolor !important;
|
||||
border-radius: 0 !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ant-input-number-handler-down {
|
||||
|
@ -605,6 +610,7 @@ textarea,
|
|||
color: #919499 !important;
|
||||
}
|
||||
|
||||
|
||||
.ant-modal-body,
|
||||
.ant-drawer-body {
|
||||
|
||||
|
@ -624,12 +630,6 @@ textarea,
|
|||
}
|
||||
}
|
||||
|
||||
.ant-table-align-center,
|
||||
.ant-table-thead tr th {
|
||||
background-color: @backcolor !important;
|
||||
color : @labelDeaultColor !important;
|
||||
}
|
||||
|
||||
.ant-table-bordered .ant-table-thead>tr>th,
|
||||
.ant-table-bordered .ant-table-tbody>tr>td,
|
||||
.ant-table-content .ant-table-thead>tr>th,
|
||||
|
@ -650,7 +650,7 @@ textarea,
|
|||
}
|
||||
|
||||
.ant-btn {
|
||||
width : 160px !important;
|
||||
min-width : 60px !important;
|
||||
height : 36px !important;
|
||||
font-family: @fontfamily;
|
||||
color : @defaultWhiteColor !important;
|
||||
|
@ -658,7 +658,7 @@ textarea,
|
|||
|
||||
.ant-btn,
|
||||
.ant-input-search-button {
|
||||
background : url('~@/assets/img/buttonDefault.png') !important;
|
||||
// background : url('~@/assets/img/buttonDefault.png') !important;
|
||||
border : none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
@ -674,9 +674,9 @@ textarea,
|
|||
}
|
||||
|
||||
.ant-menu-light {
|
||||
height : 850px;
|
||||
padding-bottom: 10px;
|
||||
overflow-y : scroll;
|
||||
height : 100%;
|
||||
padding-bottom: 0;
|
||||
overflow-y : none;
|
||||
}
|
||||
|
||||
.ant-layout-sider {
|
||||
|
@ -748,17 +748,20 @@ textarea,
|
|||
|
||||
.ant-menu-horizontal .ant-menu-item,
|
||||
.ant-menu-submenu.ant-menu-submenu-horizontal {
|
||||
background : url('~@/assets/img/menuDefault.png') no-repeat;
|
||||
width : 176px !important;
|
||||
margin : 0 20px !important;
|
||||
min-height : 60px !important;
|
||||
line-height : 60px !important;
|
||||
background-image: url('~@/assets/img/menuDefault.png');
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
min-width : 130px !important;
|
||||
margin : 0 10px !important;
|
||||
min-height : 36px !important;
|
||||
line-height : 36px !important;
|
||||
text-align : center;
|
||||
font-weight : bold;
|
||||
font-size : 18px !important;
|
||||
padding : 0px !important;
|
||||
font-size : 16px !important;
|
||||
padding :0 20px !important;
|
||||
vertical-align: middle !important;
|
||||
font-family : @fontfamily;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.ant-menu-item>a>span,
|
||||
|
@ -776,8 +779,9 @@ textarea,
|
|||
|
||||
.ant-menu-submenu-horizontal.ant-menu-submenu-selected,
|
||||
.ant-menu-submenu-horizontal.ant-menu-submenu-open,
|
||||
.ant-menu-horizontal .ant-menu-item-selected,
|
||||
.ant-menu-horizontal .ant-menu-item-active {
|
||||
background: url('~@/assets/img/menuSelect.png') no-repeat !important;
|
||||
background-image: url('~@/assets/img/menuSelect.png') !important;
|
||||
}
|
||||
|
||||
.ant-menu-vertical .ant-menu-item,
|
||||
|
@ -797,7 +801,8 @@ textarea,
|
|||
.ant-menu-submenu-vertical.ant-menu-submenu-open,
|
||||
.ant-menu-vertical .ant-menu-item-selected,
|
||||
.ant-menu-vertical .ant-menu-item-active {
|
||||
background: url('~@/assets/img/MenuSecSelect.png') no-repeat;
|
||||
background-image: url('~@/assets/img/MenuSecSelect.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.ant-menu-submenu-placement-rightTop {
|
||||
|
@ -877,7 +882,6 @@ textarea,
|
|||
|
||||
.ant-table-align-center,
|
||||
.ant-table-selection-column,
|
||||
.ant-table-thead th,
|
||||
.ant-table-row-expand-icon {
|
||||
background-color: transparent !important;
|
||||
color : @labelDeaultColor !important;
|
||||
|
@ -906,12 +910,16 @@ tr.ant-table-expanded-row:hover {
|
|||
.ant-table-tbody>tr td,
|
||||
.ant-table-row>td>span>a {
|
||||
background-color: transparent !important;
|
||||
color : @defaultWhiteColor;
|
||||
color : #00A2FF;
|
||||
height : 50px;
|
||||
font-family : @fontfamily;
|
||||
font-weight : 400 !important;
|
||||
font-size : 16px !important;
|
||||
}
|
||||
.ant-divider{
|
||||
background:#00A2FF !important;
|
||||
}
|
||||
|
||||
|
||||
.ant-table-tbody>tr.ant-table-row-hover>td,
|
||||
.ant-table-tbody>tr.ant-table-row-hover>td>span>a,
|
||||
|
@ -964,14 +972,25 @@ tr.ant-table-expanded-row:hover {
|
|||
border-bottom: 1px solid #31343d !important;
|
||||
}
|
||||
|
||||
.ant-table-tbody>tr>td {
|
||||
color: @tableColor !important;
|
||||
}
|
||||
.ant-table-align-center,
|
||||
.ant-table-thead tr th {
|
||||
background-color: @tableheadColor !important;
|
||||
color : @labelDeaultColor !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.ant-alert-info {
|
||||
background-color: #3D4145;
|
||||
border : none;
|
||||
color : @defaultWhiteColor;
|
||||
}
|
||||
|
||||
|
||||
.ant-alert-info>a {
|
||||
color: @defaultWhiteColor;
|
||||
color: #00A2FF;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
|
@ -1026,7 +1045,10 @@ tr.ant-table-expanded-row:hover {
|
|||
|
||||
.content {
|
||||
.table-operator {
|
||||
position: absolute;
|
||||
margin-bottom: 18px;
|
||||
right: 10px;
|
||||
top:30px;
|
||||
|
||||
button {
|
||||
margin-right: 8px;
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
<span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<div style="margin: 12px 12px 0;">
|
||||
<div>
|
||||
<transition name="page-toggle">
|
||||
<keep-alive v-if="multipage">
|
||||
<router-view v-if="reloadFlag"/>
|
||||
|
|
|
@ -59,7 +59,7 @@ export default {
|
|||
.container {
|
||||
width: 1920px;
|
||||
min-height: 100%;
|
||||
background: url('~@/assets/img/layoutbg.png') no-repeat center bottom ;
|
||||
background: url('~@/assets/img/loginbg.png') no-repeat center center ;
|
||||
background-size: 100%;
|
||||
// padding: 110px 0 144px;
|
||||
position: relative;
|
||||
|
@ -112,9 +112,9 @@ export default {
|
|||
}
|
||||
|
||||
.main {
|
||||
width: 670px;
|
||||
height: 488px;
|
||||
margin: 200px auto;
|
||||
width: 568px;
|
||||
height: 440px;
|
||||
margin: 293px 1173px;
|
||||
background: url(~@/assets/img/login_bg.png) no-repeat;
|
||||
}
|
||||
|
||||
|
|
|
@ -99,14 +99,15 @@ export default {
|
|||
renderItem (menu) {
|
||||
if (!menu.hidden) {
|
||||
return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
|
||||
return this.renderMenuItem(menu)
|
||||
}
|
||||
return null
|
||||
},
|
||||
renderMenuItem (menu) {
|
||||
if(menu.meta.title == '首页')
|
||||
{
|
||||
return null
|
||||
}
|
||||
// if(menu.meta.title == '首页')
|
||||
// {
|
||||
// return null
|
||||
// }
|
||||
const target = menu.meta.target || null
|
||||
const tag = target && 'a' || 'router-link'
|
||||
let props = { to: { name: menu.name } }
|
||||
|
@ -139,6 +140,7 @@ export default {
|
|||
if (!menu.alwaysShow) {
|
||||
menu.children.forEach(item => itemArr.push(this.renderItem(item)))
|
||||
}
|
||||
|
||||
return (
|
||||
<SubMenu {...{ key: menu.path }}>
|
||||
<span slot="title">
|
||||
|
|
|
@ -28,35 +28,24 @@
|
|||
<!-- 顶部导航栏模式 -->
|
||||
<div v-else :class="['top-nav-header-index', theme]">
|
||||
<div class="header-index-wide">
|
||||
<div class="header-nowTime" :style="topMenuStyle.headerIndexLeft">
|
||||
<div class="nowTime">{{ nowTime }}</div>
|
||||
<div class="nowDate">{{ nowDate }}</div>
|
||||
<div class="nowWeek">{{ nowWeek }}</div>
|
||||
</div>
|
||||
<div class="header-nowTime" :style="topMenuStyle.headerIndexLeft">末端数据接入处理系统</div>
|
||||
<div class="header-index-center" :style="topMenuStyle.headerIndexCenter">
|
||||
<logo class="top-nav-header" :show-title="device !== 'mobile'" />
|
||||
<div class="header-index-wide">
|
||||
<div class="header-index-center" :style="topMenuStyle.topmenuCenter">
|
||||
<s-menu mode="horizontal" :menu="menus" :theme="theme"></s-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight" />
|
||||
</div>
|
||||
|
||||
<div class="header-index-wide">
|
||||
<div class="header-index-left" :style="topMenuStyle.topmenuLeft">
|
||||
<img src="~@/assets/img/MenuLeft.png" alt="" style="margin-top: 11px" />
|
||||
</div>
|
||||
<div class="header-index-center" :style="topMenuStyle.topmenuCenter">
|
||||
<s-menu mode="horizontal" :menu="menus" :theme="theme"></s-menu>
|
||||
</div>
|
||||
<div class="header-index-left" :style="topMenuStyle.topmenuLeft">
|
||||
<img src="~@/assets/img/MenuRight.png" alt="" style="float: right; margin-top: 11px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserMenu from '../tools/UserMenu'
|
||||
import SMenu from '../menu/'
|
||||
import SMenu from '../menu'
|
||||
import Logo from '../tools/Logo'
|
||||
|
||||
import { mixin } from '@/utils/mixin.js'
|
||||
|
@ -104,11 +93,9 @@ export default {
|
|||
//update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
|
||||
topMenuStyle: {
|
||||
headerIndexLeft: {},
|
||||
headerIndexCenter: {},
|
||||
topNavHeader: {},
|
||||
headerIndexRight: {},
|
||||
headerIndexCenter: {},
|
||||
topmenuCenter: {},
|
||||
topmenuLeft: {},
|
||||
},
|
||||
chatStatus: '',
|
||||
}
|
||||
|
@ -134,7 +121,6 @@ export default {
|
|||
if (this.mode === 'topmenu') {
|
||||
this.buildTopMenuStyle()
|
||||
}
|
||||
this.nowTimes()
|
||||
},
|
||||
methods: {
|
||||
handleScroll() {
|
||||
|
@ -157,57 +143,20 @@ export default {
|
|||
if (this.mode === 'topmenu') {
|
||||
if (this.device === 'mobile') {
|
||||
// 手机端需要清空样式,否则显示会错乱
|
||||
this.topMenuStyle.topNavHeader = {}
|
||||
this.topMenuStyle.headerIndexRight = {}
|
||||
this.topMenuStyle.headerIndexLeft = {}
|
||||
this.topMenuStyle.headerIndexCenter = {}
|
||||
this.topMenuStyle.topmenuCenter = {}
|
||||
this.topMenuStyle.topmenuLeft = {}
|
||||
} else {
|
||||
let rightWidth = '460px'
|
||||
let menuLeftWidth = '300px'
|
||||
let menuLeftWidth = '0px'
|
||||
this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth }
|
||||
this.topMenuStyle.headerIndexLeft = { width: rightWidth }
|
||||
this.topMenuStyle.headerIndexCenter = { width: `calc(100% - ${rightWidth} - ${rightWidth})` }
|
||||
this.topMenuStyle.topmenuLeft = { width: menuLeftWidth }
|
||||
this.topMenuStyle.topmenuCenter = { width: `calc(100% - ${menuLeftWidth} - ${menuLeftWidth})` }
|
||||
}
|
||||
}
|
||||
},
|
||||
//日期显示
|
||||
timeFormate(timeStamp) {
|
||||
let month =
|
||||
new Date(timeStamp).getMonth() + 1 < 10
|
||||
? '0' + (new Date(timeStamp).getMonth() + 1)
|
||||
: new Date(timeStamp).getMonth() + 1
|
||||
let date =
|
||||
new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate()
|
||||
let hh =
|
||||
new Date(timeStamp).getHours() < 10 ? '0' + new Date(timeStamp).getHours() : new Date(timeStamp).getHours()
|
||||
let mm =
|
||||
new Date(timeStamp).getMinutes() < 10
|
||||
? '0' + new Date(timeStamp).getMinutes()
|
||||
: new Date(timeStamp).getMinutes()
|
||||
let ss =
|
||||
new Date(timeStamp).getSeconds() < 10
|
||||
? '0' + new Date(timeStamp).getSeconds()
|
||||
: new Date(timeStamp).getSeconds()
|
||||
|
||||
var myddy = new Date(timeStamp).getDay() //获取存储当前日期
|
||||
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||||
this.nowTime = hh + ':' + mm
|
||||
this.nowDate = month + '月' + date + '日'
|
||||
this.nowWeek = weekday[myddy]
|
||||
},
|
||||
nowTimes() {
|
||||
this.timeFormate(new Date())
|
||||
setInterval(this.nowTimes, 1000)
|
||||
this.clear()
|
||||
},
|
||||
clear() {
|
||||
clearInterval(this.nowTimes)
|
||||
this.nowTimes = null
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
@ -222,8 +171,8 @@ export default {
|
|||
margin-left: 10px;
|
||||
|
||||
.ant-menu.ant-menu-horizontal {
|
||||
height: 82px;
|
||||
line-height: 82px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
}
|
||||
}
|
||||
.trigger {
|
||||
|
@ -237,7 +186,7 @@ export default {
|
|||
.header {
|
||||
z-index: 2;
|
||||
color: white;
|
||||
height: 82px;
|
||||
height: 64px;
|
||||
background-color: @primary-color;
|
||||
transition: background 300ms;
|
||||
|
||||
|
@ -258,32 +207,15 @@ export default {
|
|||
}
|
||||
|
||||
.ant-layout-header {
|
||||
height: 82px;
|
||||
line-height: 76px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
}
|
||||
.header-nowTime {
|
||||
color: #00c3ff;
|
||||
color: #fff;
|
||||
font-family: 'Microsoft YaHei';
|
||||
letter-spacing: 2px;
|
||||
.nowTime {
|
||||
font-size: 40px;
|
||||
width: 120px;
|
||||
float: left;
|
||||
margin-left:27px;
|
||||
}
|
||||
.nowDate {
|
||||
font-size: 14px;
|
||||
width: 200px;
|
||||
height: 42px;
|
||||
float: left;
|
||||
line-height: 62px;
|
||||
}
|
||||
.nowWeek {
|
||||
font-size: 14px;
|
||||
width: 200px;
|
||||
height: 14px;
|
||||
float: left;
|
||||
line-height: 14px;
|
||||
}
|
||||
font-size: 26px;
|
||||
letter-spacing: 3px;
|
||||
font-weight: 700;
|
||||
padding-left:23px;
|
||||
}
|
||||
</style>
|
|
@ -133,6 +133,7 @@ export default {
|
|||
//--update-begin----author:scott---date:20190320------for:根据后台菜单配置,判断是否路由菜单字段,动态选择是否生成路由(为了支持参数URL菜单)------
|
||||
//this.menus = this.mainRouters.find((item) => item.path === '/').children;
|
||||
this.menus = this.permissionMenuList
|
||||
console.log(this.permissionMenuList)
|
||||
// 根据后台配置菜单,重新排序加载路由信息
|
||||
//console.log('----加载菜单逻辑----')
|
||||
//console.log(this.mainRouters)
|
||||
|
|
|
@ -102,11 +102,17 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
|
||||
|
||||
.page-header {
|
||||
padding: 16px 32px 0;
|
||||
margin: 0;
|
||||
padding: 8px 20px;
|
||||
height:40px;
|
||||
width:calc(100vw - 260px);
|
||||
position: absolute;
|
||||
top: 124px;
|
||||
left: -18px;
|
||||
top: 110px;
|
||||
left: 260px;
|
||||
background-color:#F1F4F8;
|
||||
border-top:2px solid #2B85D1;
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 16px;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :style="!$route.meta.pageHeader ? 'margin: -10px -24px 0;' : null">
|
||||
<div :style="!$route.meta.pageHeader ? 'margin: 0;' : null">
|
||||
<!-- pageHeader , route meta hideHeader:true on hide -->
|
||||
<page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
|
||||
<slot slot="action" name="action"></slot>
|
||||
|
@ -28,6 +28,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</page-header>
|
||||
<div class="leftMenu"></div>
|
||||
<div class="content">
|
||||
<div :class="['page-header-index-wide']">
|
||||
<slot></slot>
|
||||
|
@ -85,8 +86,19 @@
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.leftMenu {
|
||||
width: 260px;
|
||||
height: calc(100vh - 64px);
|
||||
background-color: #00467C;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 24px 12px 0;
|
||||
width: calc(100vw - 261px);
|
||||
position: absolute;
|
||||
left: 260px;
|
||||
top: 140px;
|
||||
|
||||
.link {
|
||||
margin-top: 16px;
|
||||
|
@ -94,6 +106,7 @@
|
|||
&:not(:empty) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-right: 32px;
|
||||
height: 24px;
|
||||
|
@ -105,6 +118,7 @@
|
|||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
@ -114,14 +128,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-menu-search {
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.page-menu-tabs {
|
||||
margin-top: 48px;
|
||||
}
|
||||
.page-header[data-v-6740ec88] {
|
||||
margin: 0px 24px 0;
|
||||
}
|
||||
</style>
|
|
@ -33,7 +33,7 @@
|
|||
</span> -->
|
||||
<!-- <header-notice class="action"/> -->
|
||||
<a-dropdown>
|
||||
<span class="action action-full ant-dropdown-link user-dropdown-menu" style="margin-top: 20px;">
|
||||
<span class="action action-full ant-dropdown-link user-dropdown-menu" >
|
||||
<!-- <a-avatar class="avatar" size="small" :src="getAvatar()"/> -->
|
||||
<img src="~@/assets/u8.png" alt="logo" style="margin-right: 10px;margin-top: -6px;" >
|
||||
<span v-if="isDesktop()" style="color:#00c3ff">欢迎您,{{ nickname() }}</span>
|
||||
|
|
|
@ -2,18 +2,23 @@
|
|||
<div class="main">
|
||||
<a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
|
||||
<div class="header">
|
||||
<span class="title">公报产品同步软件</span>
|
||||
<span class="title">末端数据接入处理系统</span>
|
||||
</div>
|
||||
<a-form-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<div class="name">
|
||||
<span class="title">用户登录</span>
|
||||
</div>
|
||||
<a-form-item label=" " :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<img class="aicon" src="~@/assets/img/icon-账户.png"/>
|
||||
<a-input size="large" v-decorator="['username']" type="text" placeholder="请输入账号"> </a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-form-item label=" " :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<img class="aicon" src="~@/assets/img/icon-密码.png"/>
|
||||
<a-input v-decorator="['password']" size="large" type="password" autocomplete="false" placeholder="请输入密码">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item style="margin-top: 17px; margin-left: 100px">
|
||||
<a-form-item style="margin-top: 17px; margin-left: 95px">
|
||||
<a-button
|
||||
size="large"
|
||||
type="primary"
|
||||
|
@ -25,16 +30,6 @@
|
|||
>
|
||||
登录
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
size="large"
|
||||
type="cancel"
|
||||
class="login-button-cancel"
|
||||
@click.stop.prevent="handleCancel"
|
||||
:disabled="loginBtn"
|
||||
>
|
||||
取消
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
|
||||
|
@ -76,7 +71,7 @@ export default {
|
|||
},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 7 },
|
||||
sm: { span: 4 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
|
@ -226,13 +221,16 @@ export default {
|
|||
})
|
||||
},
|
||||
loginSuccess() {
|
||||
this.$router.push({ path: '/dashboard/analysis' }).catch(() => {
|
||||
console.log('登录跳转首页出错,这个错误从哪里来的')
|
||||
})
|
||||
this.$notification.success({
|
||||
message: '欢迎',
|
||||
description: `${timeFix()},欢迎回来`,
|
||||
})
|
||||
this.loginBtn = false
|
||||
this.$router.push({ path: '/dashboard/analysis' }).then(() => {
|
||||
console.log('222')
|
||||
}).catch(() => {
|
||||
console.log('登录跳转首页出错,这个错误从哪里来的')
|
||||
})
|
||||
},
|
||||
cmsFailed(err) {
|
||||
this.$notification['error']({
|
||||
|
@ -298,34 +296,61 @@ export default {
|
|||
|
||||
<style lang="less">
|
||||
.user-layout-login {
|
||||
padding-left: 30px;
|
||||
.header {
|
||||
padding-top: 80px;
|
||||
height: 175px;
|
||||
position: absolute;
|
||||
top:257px;
|
||||
left:1249px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-size: 38px;
|
||||
color: #fff;
|
||||
font-family: 'Microsoft YaHei';
|
||||
letter-spacing: 10px;
|
||||
letter-spacing: 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
padding-top: 53px;
|
||||
height: 135px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
.title {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #25BEFC;
|
||||
font-family: 'Microsoft YaHei';
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-layout-login .ant-form-item {
|
||||
margin-bottom: 14px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
.user-layout-login input {
|
||||
background: #333c4e;
|
||||
font-size: 20px;
|
||||
background: #0f142a;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
|
||||
border: 0px !important;
|
||||
padding-left: 80px;
|
||||
border: 1px solid #1C6094 !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
border-color: #fff !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-layout-login .aicon
|
||||
{
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: -7px;
|
||||
z-index: 11;
|
||||
}
|
||||
.user-layout-login input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.user-layout-login .valid-error .ant-select-selection__placeholder {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
@ -340,36 +365,26 @@ export default {
|
|||
float: right !important;
|
||||
}
|
||||
.user-layout-login .ant-input-lg {
|
||||
height: 50px !important;
|
||||
width: 316px !important;
|
||||
height: 60px !important;
|
||||
width: 400px !important;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.user-layout-login .ant-form-item-label > label::after {
|
||||
content: '';
|
||||
}
|
||||
.user-layout-login .login-button,
|
||||
.user-layout-login .login-button:hover,
|
||||
.user-layout-login .login-button:active {
|
||||
width: 156px !important;
|
||||
.user-layout-login .login-button{
|
||||
width: 400px !important;
|
||||
height: 60px !important;
|
||||
border: none !important;
|
||||
background: url(~@assets/img/login_button.png) !important;
|
||||
font-size: 20px;
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
font-family: 'Microsoft YaHei';
|
||||
}
|
||||
.user-layout-login .login-button-cancel,
|
||||
.user-layout-login .login-button-cancel:hover,
|
||||
.user-layout-login .login-button-cancel:active {
|
||||
width: 156px !important;
|
||||
height: 60px !important;
|
||||
border: none !important;
|
||||
margin-left: 97px !important;
|
||||
background: url(~@assets/img/login_button_cancel.png) !important;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
font-family: 'Microsoft YaHei';
|
||||
.user-layout-login .login-button:hover,
|
||||
.user-layout-login .login-button:active {
|
||||
background: url(~@assets/img/login_button_hover.png) !important;
|
||||
}
|
||||
.user-layout-login .ant-tabs-ink-bar {
|
||||
display: none !important;
|
||||
|
|