100 lines
2.3 KiB
Vue
100 lines
2.3 KiB
Vue
|
<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>
|