登录
This commit is contained in:
99
src/pages/modules/login/login.vue
Normal file
99
src/pages/modules/login/login.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-wraper">
|
||||
<div class="login-logo-wraper">
|
||||
<div class="login-logo"></div>
|
||||
<div class="login-logo-txts">
|
||||
<p class="login-logo-txt1">诺力智能搬运车系统</p>
|
||||
<p class="login-logo-txt2">NoBleLift intelligent truck system</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-content">
|
||||
<div class="login-content_wraper">
|
||||
<div class="dl">登录</div>
|
||||
<div class="login-items-wraper">
|
||||
<div class="login-item">
|
||||
<input type="text" class="login-input">
|
||||
</div>
|
||||
<div class="login-item">
|
||||
<input type="password" class="login-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-buttons-wraper">
|
||||
<button class="button button--primary button-login">登录</button>
|
||||
</div>
|
||||
<div class="login-forget-wraper">
|
||||
<router-link to="/home">忘记密码</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.login-container
|
||||
_wh(100%, 100%)
|
||||
background-color #64b4dc
|
||||
background-image linear-gradient(to right bottom,#4489e0, #55a1df, #64b4dc)
|
||||
_fj(center)
|
||||
.login-wraper
|
||||
_fj()
|
||||
_wh(80vw, 65vh)
|
||||
padding 20px
|
||||
background-color #fff
|
||||
border-radius 20px
|
||||
.login-logo-wraper
|
||||
width 50%
|
||||
padding 20px
|
||||
_fj(center,,column)
|
||||
.login-logo
|
||||
width 100px
|
||||
height 112px
|
||||
background center / 100% 100% url(../../../images/aio/car1.png) no-repeat
|
||||
.login-logo-txts
|
||||
// margin-top 20px
|
||||
text-align center
|
||||
.login-logo-txt1
|
||||
_font(24px, 34px, $red2,bold,center)
|
||||
.login-logo-txt2
|
||||
_font(20px, 34px, #464646,,center)
|
||||
.login-content
|
||||
width 50%
|
||||
padding 20px
|
||||
.login-content_wraper
|
||||
width 100%
|
||||
max-width 200px
|
||||
margin 0 auto
|
||||
_fj(center,,column)
|
||||
.dl
|
||||
width 100%
|
||||
_font(16px, 28px, #333, bold, center)
|
||||
margin-bottom 10px
|
||||
.login-items-wraper
|
||||
width 100%
|
||||
.login-item
|
||||
width 100%
|
||||
+.login-item
|
||||
margin-top 20px
|
||||
.login-input
|
||||
width 100%
|
||||
height 40px
|
||||
border 1px solid $gray2
|
||||
padding 5px 12px
|
||||
_font(14px, 16px, #323232,,)
|
||||
border-radius 6px
|
||||
.login-forget-wraper
|
||||
width 100%
|
||||
margin-top 15px
|
||||
text-align right
|
||||
a
|
||||
_font(14px, 20px, $red1,,)
|
||||
.login-buttons-wraper
|
||||
width 100%
|
||||
margin-top 20px
|
||||
.button-login
|
||||
width 100%
|
||||
border-radius 12px
|
||||
</style>
|
||||
@@ -2,6 +2,7 @@ import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
const Preload = r => require.ensure([], () => r(require('@page/Preload')), 'Preload')
|
||||
const Login = r => require.ensure([], () => r(require('@page/modules/login/login.vue')), 'login')
|
||||
const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
|
||||
|
||||
const IndexComponent = r => require.ensure([], () => r(require('@page/shells/index/index.vue')), 'shells')
|
||||
@@ -62,6 +63,10 @@ export default new Router({
|
||||
path: '/preload',
|
||||
component: Preload
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: Login
|
||||
},
|
||||
{
|
||||
path: '/setup',
|
||||
component: Setup
|
||||
|
||||
@@ -1,628 +0,0 @@
|
||||
@import 'mixin.styl'
|
||||
@import 'iconfont.styl'
|
||||
@font-face
|
||||
font-family 'iconfont';
|
||||
src url('iconfont/iconfont.eot');
|
||||
src url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('iconfont/iconfont.woff2') format('woff2'),
|
||||
url('iconfont/iconfont.woff') format('woff'),
|
||||
url('iconfont/iconfont.ttf') format('truetype'),
|
||||
url('iconfont/iconfont.svg#iconfont') format('svg');
|
||||
[class*=" el-icon-"], [class^=el-icon-]
|
||||
color #c0c4cc
|
||||
line-height .3rem
|
||||
.el-date-editor.el-input
|
||||
width calc(100% - .8rem)
|
||||
.el-input
|
||||
font-size .13rem
|
||||
.el-date-editor--daterange.el-input__inner
|
||||
width calc(100% - 0.8rem)
|
||||
padding .03rem .1rem
|
||||
vertical-align top
|
||||
.el-input__inner
|
||||
height .3rem
|
||||
line-height .3rem
|
||||
.el-date-range-picker__header div
|
||||
color #606266
|
||||
.el-date-table td span
|
||||
color #606266
|
||||
.el-date-editor .el-range__icon,.el-date-editor .el-range-separator
|
||||
font-size .14rem
|
||||
line-height .22rem
|
||||
.el-date-editor .el-range__close-icon
|
||||
line-height .22rem
|
||||
font-size .14rem
|
||||
.el-date-range-picker
|
||||
width 5.5rem
|
||||
.el-date-table td span
|
||||
width .2rem
|
||||
height .2rem
|
||||
line-height .2rem
|
||||
font-size .14rem
|
||||
.el-date-table td div
|
||||
height .24rem
|
||||
.el-date-table td
|
||||
padding 0
|
||||
height .28rem
|
||||
.el-date-range-picker__content
|
||||
padding .06rem
|
||||
.el-date-picker__header-label
|
||||
font-size .16rem
|
||||
line-height .22rem
|
||||
.el-date-editor .el-range-input
|
||||
font-size .14rem
|
||||
line-height .22rem
|
||||
.el-date-range-picker__content .el-date-range-picker__header div
|
||||
margin-left: .5rem
|
||||
margin-right: .5rem
|
||||
.el-date-range-picker__header div
|
||||
font-size .16rem
|
||||
.iconfont
|
||||
font-family "iconfont" !important
|
||||
font-size .16rem
|
||||
font-style normal
|
||||
-webkit-font-smoothing antialiased
|
||||
-moz-osx-font-smoothing grayscale
|
||||
[class*="_icon"]
|
||||
background none
|
||||
.button--primary
|
||||
min-width .6rem
|
||||
height .3rem
|
||||
line-height .3rem
|
||||
font-size .15rem
|
||||
color #ffffff
|
||||
background-color #D7592F
|
||||
padding 0 .1rem
|
||||
border-radius 5px
|
||||
.button--defalut
|
||||
color #606266
|
||||
border 1px solid #dcdfe6
|
||||
background-color #fff
|
||||
.button--cancle
|
||||
color #D7592F
|
||||
background-color #fff
|
||||
.top_header
|
||||
position fixed
|
||||
top 0
|
||||
width 100%
|
||||
border-bottom 1px solid #E1E1E1
|
||||
z-index 1000
|
||||
header
|
||||
position relative
|
||||
height .4rem
|
||||
line-height .4rem
|
||||
background-color #D7592F
|
||||
padding 0 .15rem
|
||||
box-sizing border-box
|
||||
.header-title
|
||||
width 3rem
|
||||
font-size .16rem
|
||||
padding-left .1rem
|
||||
overflow hidden
|
||||
.header-title_ex
|
||||
padding-left 0
|
||||
.header-name
|
||||
width auto
|
||||
.top-left
|
||||
text-align center
|
||||
position relative
|
||||
ul
|
||||
width 1.8rem
|
||||
position absolute
|
||||
background #d7592f
|
||||
left 0
|
||||
top .45rem
|
||||
border-radius 2px
|
||||
box-shadow 1px 2px 3px rgba(228,243,244,0.5)
|
||||
overflow hidden
|
||||
li
|
||||
line-height .36rem
|
||||
font-size .15rem
|
||||
border-bottom 1px solid #e1e1e1
|
||||
&:nth-of-type(2)
|
||||
border none
|
||||
text-align center
|
||||
.home-items
|
||||
display flex
|
||||
align-items center
|
||||
padding 0 5%
|
||||
height 100%
|
||||
li
|
||||
float left
|
||||
text-align center
|
||||
width 33.333333%
|
||||
img
|
||||
width 80%
|
||||
height 80%
|
||||
p
|
||||
line-height .34rem
|
||||
color #464646
|
||||
.drift
|
||||
transition height .3s linear
|
||||
.date-box
|
||||
width 2.3rem
|
||||
text-align left
|
||||
overflow hidden
|
||||
.date-box_time
|
||||
position absolute
|
||||
width 2.3rem
|
||||
height .44rem
|
||||
overflow hidden
|
||||
right 0
|
||||
.tabs
|
||||
width 100%
|
||||
font-size .18rem
|
||||
line-height .4rem
|
||||
height .4rem
|
||||
background-color #f5f5f5
|
||||
li
|
||||
float left
|
||||
width 1rem
|
||||
line-height .4rem
|
||||
text-align center
|
||||
a
|
||||
display inline-block
|
||||
line-height .4rem
|
||||
color #323232
|
||||
width 100%
|
||||
.router-link-active
|
||||
border-bottom 1px solid #D7592F
|
||||
.inner-wrap
|
||||
height 100%
|
||||
background-color #F5F5F5
|
||||
.wrap
|
||||
width 8rem
|
||||
padding .9rem .05rem .05rem .05rem
|
||||
.wrap_ex
|
||||
padding-top .44rem
|
||||
.wrap-filter-button
|
||||
width 100%
|
||||
padding .1rem .2rem
|
||||
margin .1rem auto
|
||||
border-radius .1rem
|
||||
background-color #fff
|
||||
.wrap-filter
|
||||
padding-bottom .1rem
|
||||
.filter_item
|
||||
width 50%
|
||||
padding 0 .2rem
|
||||
margin .1rem 0 0 0
|
||||
.filter_input
|
||||
width 100%
|
||||
display flex
|
||||
justify-content space-between
|
||||
.filter-label
|
||||
color #464646
|
||||
width .6rem
|
||||
line-height .3rem
|
||||
height .3rem
|
||||
text-align justify
|
||||
text-align-last justify
|
||||
&::after
|
||||
position absolute
|
||||
top .3rem
|
||||
left 0
|
||||
display inline-block
|
||||
content ''
|
||||
overflow hidden
|
||||
width .5rem
|
||||
height 0
|
||||
.wrap-button
|
||||
margin .1rem auto
|
||||
padding 0 .2rem
|
||||
text-align right
|
||||
.filter-table
|
||||
width 100%
|
||||
margin .2rem 0
|
||||
border-collapse separate
|
||||
border-spacing 0
|
||||
border: 1px#e1e1e1
|
||||
text-align center
|
||||
th,td
|
||||
color #464646
|
||||
background-color #fff
|
||||
border-right 1px solid #e1e1e1
|
||||
border-bottom 1px solid #e1e1e1
|
||||
&::first-child
|
||||
border-left 1px solid #e1e1e1
|
||||
.filter-table th
|
||||
font-size .13rem
|
||||
line-height .3rem
|
||||
padding 0 .01rem
|
||||
background-color #e1e1e1
|
||||
.filter-table td
|
||||
height 0.3rem
|
||||
line-height .18rem
|
||||
font-size .12rem
|
||||
padding .01rem
|
||||
.filter-table tr:first-child th:first-child
|
||||
border-top-left-radius .1rem
|
||||
.filter-table tr:first-child th:last-child
|
||||
border-top-right-radius .1rem
|
||||
.filter-table tr:last-child td:first-child
|
||||
border-bottom-left-radius .1rem
|
||||
.filter-table tr:last-child td:last-child
|
||||
border-bottom-right-radius .1rem
|
||||
.radio__icon
|
||||
display inline-block
|
||||
vertical-align middle
|
||||
width .2rem
|
||||
line-height .2rem
|
||||
height .2rem
|
||||
.radio__icon--square
|
||||
border-radius 3px
|
||||
border 1px solid #e5e5e5
|
||||
background-color #e5e5e5
|
||||
.radio__icon--round
|
||||
border 1px solid #e5e5e5
|
||||
background-color transparent
|
||||
border-radius 100%
|
||||
.radio__icon--disabled
|
||||
border 1px solid #c0c4cc
|
||||
background-color #c0c4cc
|
||||
.icon
|
||||
color #c0c4cc
|
||||
&::before
|
||||
content '\e608'
|
||||
.radio__icon--checked
|
||||
border-color #D7592F
|
||||
background-color #D7592F
|
||||
.icon
|
||||
color #fff
|
||||
&::before
|
||||
content '\e608'
|
||||
.input
|
||||
display inline-block
|
||||
// width calc(100% - .8rem)
|
||||
width 100%
|
||||
height .3rem
|
||||
line-height .3rem
|
||||
font-size .13rem
|
||||
color #606266
|
||||
text-indent .05rem
|
||||
background-color #fff
|
||||
border 1px solid #D1D1D1
|
||||
border-radius 4px
|
||||
.select
|
||||
position relative
|
||||
display inline-block
|
||||
width calc(100% - .8rem)
|
||||
height .3rem
|
||||
font-size .13rem
|
||||
color #606266
|
||||
line-height .3rem
|
||||
background-color #fff
|
||||
border 1px solid #D1D1D1
|
||||
border-radius 4px
|
||||
vertical-align top
|
||||
option
|
||||
line-height .3rem
|
||||
.select-wrap
|
||||
position relative
|
||||
display inline-block
|
||||
width calc(100% - .8rem)
|
||||
vertical-align top
|
||||
.input
|
||||
width 100%
|
||||
.select-option
|
||||
position absolute
|
||||
max-height 3.32rem
|
||||
overflow-y auto
|
||||
top calc(.3rem + 8px)
|
||||
left 0
|
||||
width 100%
|
||||
z-index 100
|
||||
background-color #ffffff
|
||||
border 1px solid #d1d1d1
|
||||
border-radius 4px
|
||||
box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
|
||||
li
|
||||
width 100%
|
||||
line-height .3rem
|
||||
height .3rem
|
||||
overflow hidden
|
||||
font-size .13rem
|
||||
color #606266
|
||||
padding 0 .05rem
|
||||
user-select none
|
||||
&:hover
|
||||
background #f5f5f5
|
||||
.fontRed
|
||||
color #D7592F
|
||||
.dropdown_icon_2
|
||||
position: absolute
|
||||
top .08rem
|
||||
right 0.15rem
|
||||
color #bbb
|
||||
width .14rem
|
||||
font-size .14rem
|
||||
line-height .14rem
|
||||
transition transform .3s
|
||||
.message-box__wrapper
|
||||
position fixed
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
z-index 2000
|
||||
text-align center
|
||||
background rgba(0,0,0,.5)
|
||||
.message-box__wrapper::after
|
||||
content ""
|
||||
display inline-block
|
||||
height 100%
|
||||
width 0
|
||||
vertical-align middle
|
||||
z-index 100
|
||||
.message-box
|
||||
display inline-block
|
||||
width 4.9rem
|
||||
padding-bottom 10px
|
||||
vertical-align middle
|
||||
background-color #fff
|
||||
border-radius 4px
|
||||
border 1px solid #ebeef5
|
||||
font-size 18px
|
||||
box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
|
||||
text-align left
|
||||
overflow hidden
|
||||
backface-visibility hidden
|
||||
.message-box__content
|
||||
position relative
|
||||
padding 10px 15px
|
||||
color #606266
|
||||
font-size 14px
|
||||
.message-box__btns
|
||||
padding 5px 15px 0
|
||||
text-align right
|
||||
.message-box__message p
|
||||
color #303133
|
||||
line-height .3rem
|
||||
border-bottom 1px solid #e1e1e1
|
||||
.message-box__input
|
||||
padding-top 15px
|
||||
color #606266
|
||||
.message-box__input .input-cus
|
||||
border 1px solid #dcdfe6
|
||||
padding-right .2rem
|
||||
.keyValue
|
||||
position relative
|
||||
.close_icon
|
||||
position absolute
|
||||
right .05rem
|
||||
top .075rem
|
||||
color #C0C4CC
|
||||
font-size .14rem
|
||||
&::before
|
||||
content '\e659'
|
||||
.input-cus-wrap
|
||||
position relative
|
||||
display inline-block
|
||||
.close_icon
|
||||
top .1rem
|
||||
.dropdown_icon
|
||||
position relative
|
||||
display inline-block
|
||||
left .07rem
|
||||
font-size .18rem
|
||||
color #ffffff
|
||||
.login_icon
|
||||
position absolute
|
||||
top .12rem
|
||||
right .1rem
|
||||
color #BBBBBB
|
||||
.back_icon
|
||||
font-size .20rem
|
||||
line-height .44rem
|
||||
.delete_icon_2
|
||||
position absolute
|
||||
top .07rem
|
||||
right .1rem
|
||||
color #BBBBBB
|
||||
.modal_item
|
||||
width 3.5rem
|
||||
margin 0 auto
|
||||
.textarea
|
||||
display inline-block
|
||||
width calc(100% - 0.8rem)
|
||||
line-height 0.3rem
|
||||
border 1px solid #d1d1d1
|
||||
border-radius 4px
|
||||
vertical-align top
|
||||
padding 0 .05rem
|
||||
.input_disabled
|
||||
background-color #e1e1e1
|
||||
.select_icon
|
||||
width .2rem
|
||||
height .2rem
|
||||
line-height .2rem
|
||||
text-align center
|
||||
border-radius 100%
|
||||
overflow hidden
|
||||
.selected_icon
|
||||
background-color #d7592f
|
||||
color #fff
|
||||
.unselect_icon
|
||||
background-color #c0c4cc
|
||||
color #c0c4cc
|
||||
/** 按钮 **/
|
||||
.btn
|
||||
min-width .6rem
|
||||
height .4rem
|
||||
// line-height .3rem
|
||||
font-size .15rem
|
||||
color #ffffff
|
||||
background-color #D7592F
|
||||
padding 0 .1rem
|
||||
border-radius 5px
|
||||
.btn-disabled
|
||||
background-color: $gray
|
||||
/** 提交栏 **/
|
||||
.submit-bar
|
||||
display flex
|
||||
justify-content space-between
|
||||
align-items center
|
||||
position fixed
|
||||
bottom 0
|
||||
width 100%
|
||||
background-color #fff
|
||||
box-shadow 0 0 20px 0 rgba(160,160,160,0.9)
|
||||
.submit-bt
|
||||
flex 1
|
||||
line-height .4rem
|
||||
margin .15rem 0.3rem
|
||||
.wrap2
|
||||
width 100%
|
||||
padding 0.05rem 0.05rem 0.05rem 0.05rem
|
||||
// no
|
||||
.fxrow
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
|
||||
.fxcol
|
||||
flex: 1
|
||||
overflow hidden
|
||||
// no
|
||||
.fxc
|
||||
display: inline-block;
|
||||
width: calc(100% - 0.8rem);
|
||||
height: 0.3rem;
|
||||
line-height: 0.3rem;
|
||||
font-size: 0.13rem;
|
||||
color: #606266;
|
||||
text-indent: 0.05rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d1d1d1;
|
||||
border-radius: 4px;
|
||||
|
||||
[class^="icon-"]
|
||||
display: inline-block
|
||||
height: inherit
|
||||
.search-input
|
||||
margin-right: .15rem
|
||||
_font(.28rem,.53rem,#929292)
|
||||
background: #ffffff
|
||||
&:disabled
|
||||
cursor: not-allowed
|
||||
.iliblock
|
||||
flex 1
|
||||
margin-left .2rem
|
||||
position relative
|
||||
.filter-scan
|
||||
display: block
|
||||
_ct()
|
||||
right .15rem
|
||||
_wh(.22rem,.22rem)
|
||||
.icon-scan
|
||||
flex 0 0 .22rem
|
||||
_bis('../images/saoma.png',.22rem)
|
||||
.filter-scan-input
|
||||
padding-right .5rem
|
||||
border-bottom 1px solid #d7d7d7
|
||||
.loading-tips
|
||||
_font(.12rem,.23rem,#929292,,center)
|
||||
margin-bottom .12rem
|
||||
.pagination-wrapper
|
||||
display flex
|
||||
justify-content flex-end
|
||||
align-items center
|
||||
.pagination-wrapper .total
|
||||
color: #464646
|
||||
margin-right 0.5rem
|
||||
.van-pagination__item
|
||||
color #464646
|
||||
.van-pagination__item--active
|
||||
background-color #d7592f
|
||||
color #fff
|
||||
.van-pagination__next, .van-pagination__prev
|
||||
padding: 0 20px
|
||||
// 弹窗 + 选择器
|
||||
.msg_wrapper
|
||||
position fixed
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
text-align center
|
||||
z-index 100
|
||||
&::after
|
||||
content ""
|
||||
display inline-block
|
||||
height 100%
|
||||
width 0
|
||||
vertical-align middle
|
||||
.msg_box
|
||||
display inline-block
|
||||
width 420px
|
||||
padding 25px
|
||||
vertical-align middle
|
||||
background-color #fff
|
||||
border-radius 4px
|
||||
border 1px solid #ebeef5
|
||||
font-size 18px
|
||||
box-shadow 0 2px 12px 0 rgb(0 0 0 / 10%)
|
||||
text-align left
|
||||
overflow hidden
|
||||
backface-visibility hidden
|
||||
.mask
|
||||
position fixed
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height 100%
|
||||
opacity .2
|
||||
background #000
|
||||
z-index 99
|
||||
.msg_item
|
||||
height 50px
|
||||
line-height 50px
|
||||
.label_item
|
||||
display inline-block
|
||||
width 90px
|
||||
font-size 16px
|
||||
line-height inherit
|
||||
.from_item
|
||||
display inline-block
|
||||
width calc(100% - 100px)
|
||||
line-height inherit
|
||||
.from_item .el-select
|
||||
width 100%
|
||||
.from_item .el-input
|
||||
font-size 14px
|
||||
.from_item .el-input__inner
|
||||
height 50px
|
||||
line-height inherit
|
||||
.el-select-dropdown__item span
|
||||
font-size 14px !important
|
||||
.el-select .el-input .el-select__caret
|
||||
line-height 50px
|
||||
.msg_btns
|
||||
height 35px
|
||||
line-height 35px
|
||||
width 300px
|
||||
margin 25px auto 0
|
||||
_fj()
|
||||
.msg_btn
|
||||
width 80px
|
||||
height 35px
|
||||
line-height 35px
|
||||
font-size 14px
|
||||
color #fff
|
||||
background-color #d7592f
|
||||
border-radius 5px
|
||||
text-align center
|
||||
::-webkit-scrollbar
|
||||
width 4px
|
||||
::-webkit-scrollbar-track
|
||||
background-color #fff
|
||||
::-webkit-scrollbar-track-piece
|
||||
background-color #e5e5e5
|
||||
::-webkit-scrollbar-thumb
|
||||
display block
|
||||
width 4px
|
||||
height 10px
|
||||
margin 0 auto
|
||||
cursor pointer
|
||||
border-radius 2px
|
||||
background-color #e1e1e1
|
||||
Reference in New Issue
Block a user