网页版
This commit is contained in:
225
src/pages/project/Login.vue
Normal file
225
src/pages/project/Login.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div class="login_bg">
|
||||
<div class="login_wrap">
|
||||
<div class="login-form-logo">
|
||||
<div class="login-logo-text login-logo-text1">欢迎来到</div>
|
||||
<div class="login-logo-text login-logo-text2">辽宁奥美手持系统！</div>
|
||||
</div>
|
||||
<div class="login_cnt">
|
||||
<div class="login_card">
|
||||
<div class="card_wrap">
|
||||
<div class="inputOuter">
|
||||
<input type="text" placeholder="用户名" v-model="loginname" class="inputStyle">
|
||||
</div>
|
||||
<div class="inputOuter">
|
||||
<input placeholder="密码" :type="type" v-model="password" class="inputStyle">
|
||||
<i class="icon-eye" :class="type === 'password' ? 'icon-eye-close' : 'icon-eye-open'" @click="changeType"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fxrow check-setup-box">
|
||||
<!-- <div class="check-box">
|
||||
<i class="icon-name-check" :class="{'icon-name-checked': memberName === 'true'}" @click="Remember"></i>
|
||||
<span class="meber-desc">记住用户名</span>
|
||||
</div> -->
|
||||
<div class="setup-box" @click="toSetup">配置</div>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<button class="btn submit-button" @click="_Login" :disabled="disabled">登 录</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {loginApi} from '@config/getData2'
|
||||
import {encrypt} from '../../main.js'
|
||||
export default {
|
||||
name: 'Login',
|
||||
data () {
|
||||
return {
|
||||
loginname: '',
|
||||
password: '',
|
||||
type: 'password',
|
||||
jobnum: '',
|
||||
qrcode: '',
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.getElementsByTagName('body')[0].className = 'login-bg'
|
||||
},
|
||||
methods: {
|
||||
changeType () {
|
||||
this.type = this.type === 'password' ? 'text' : 'password'
|
||||
},
|
||||
async loginApi () {
|
||||
try {
|
||||
let res = await loginApi(this.loginname, encrypt(this.password))
|
||||
let obj = {}
|
||||
obj = Object.assign({}, res.user.user, {token: res.token})
|
||||
this.$store.dispatch('userInfo', JSON.stringify(obj))
|
||||
this.$router.push('/home')
|
||||
this.disabled = false
|
||||
} catch (err) {
|
||||
this.disabled = false
|
||||
}
|
||||
},
|
||||
_Login () {
|
||||
this.disabled = true
|
||||
if (this.loginname === '') {
|
||||
this.toast('用户名不能为空')
|
||||
this.disabled = false
|
||||
return
|
||||
}
|
||||
if (this.password === '') {
|
||||
this.toast('密码不能为空')
|
||||
this.disabled = false
|
||||
return
|
||||
}
|
||||
this.logintype = '01'
|
||||
this.loginApi()
|
||||
},
|
||||
toSetup () {
|
||||
this.$router.push('/setup')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.icon-eye
|
||||
position absolute
|
||||
right 0
|
||||
width 35px
|
||||
height 40px
|
||||
.icon-eye-close
|
||||
_bis('../../images/eyeclose.png',20px)
|
||||
.icon-eye-open
|
||||
_bis('../../images/eyeopen.png',20px)
|
||||
.check-setup-box
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
margin-top 24px
|
||||
.setup-box
|
||||
line-height 40px
|
||||
font-size 16px
|
||||
color #4A54FF
|
||||
.check-box
|
||||
display flex
|
||||
align-items center
|
||||
justify-content flex-start
|
||||
.icon-name-check
|
||||
width 22px
|
||||
height 22px
|
||||
margin-right 6px
|
||||
border 1px solid #e2e2e2
|
||||
border-radius 50%
|
||||
.icon-name-checked
|
||||
border none
|
||||
background center / 100% auto url(../../images/select.png) no-repeat
|
||||
background-size 22px 22px
|
||||
border 1px solid #e2e2e2
|
||||
.meber-desc
|
||||
line-height 40px
|
||||
font-size 16px
|
||||
color #4A54FF
|
||||
.login_bg
|
||||
width 100%
|
||||
height 100%
|
||||
// background center bottom / 100% auto url(../../images/bg_01.png) no-repeat
|
||||
.login_wrap
|
||||
position fixed
|
||||
left 50%
|
||||
top 50%
|
||||
width 472px
|
||||
min-height 460px
|
||||
transform translate3d(-50%, -50%, 0)
|
||||
border-radius 12px
|
||||
overflow hidden
|
||||
box-shadow 0 0 6px 0 rgb(0 0 0 / 20%)
|
||||
background #fff center bottom / 100% auto url(../../images/bg.png) no-repeat
|
||||
.login-form-logo
|
||||
width 100%
|
||||
height 180px
|
||||
display flex
|
||||
flex-direction column
|
||||
align-items center
|
||||
justify-content center
|
||||
background-color #e74f1a
|
||||
background-image linear-gradient(180deg, #f77130 0, #c64602 100%), linear-gradient(126deg, #f7874e 15%, #c04103 100%)
|
||||
border-radius 12px 12px 0 0
|
||||
box-shadow 0 2px 7px 0 #e84f1a
|
||||
.login-logo-text
|
||||
font-size 20px
|
||||
line-height 30px
|
||||
color #fff
|
||||
.login-logo-text2
|
||||
font-sise 22px
|
||||
font-weight bold
|
||||
.login_cnt
|
||||
position relative
|
||||
width 100%
|
||||
overflow hidden
|
||||
.login_card
|
||||
width 323px
|
||||
margin 0 auto
|
||||
.card_wrap
|
||||
overflow hidden
|
||||
.inputOuter
|
||||
position relative
|
||||
width 100%
|
||||
margin-top 24px
|
||||
label
|
||||
display block
|
||||
font-size .16rem
|
||||
line-height .3rem
|
||||
color #333
|
||||
.inputStyle, select
|
||||
width 100%
|
||||
line-height 40px
|
||||
height 40px
|
||||
color #595959
|
||||
padding 0 12px
|
||||
font-size 16px
|
||||
border 1px solid #dfdfdf
|
||||
box-sizing border-box
|
||||
border-radius 4px
|
||||
select
|
||||
appearance auto
|
||||
outline none
|
||||
.submit
|
||||
width 100%
|
||||
margin 24px auto
|
||||
text-align center
|
||||
.btn
|
||||
background-color #2778f3
|
||||
font-size 16px
|
||||
line-height 40px
|
||||
color #fff
|
||||
width 100%
|
||||
border-radius 999px
|
||||
margin 0
|
||||
padding 0
|
||||
.submit-button
|
||||
background center center #e74f1a
|
||||
background-image linear-gradient(315deg,#D7592F 0,#E2663C 100%)
|
||||
.scan_icon
|
||||
width .4rem
|
||||
font-size .3rem
|
||||
line-height .4rem
|
||||
color #D7592F
|
||||
text-align center
|
||||
border 1px solid #D7592F
|
||||
border-radius 100%
|
||||
margin .1rem auto
|
||||
&::before
|
||||
content: '\e607'
|
||||
.san_text
|
||||
font-size .16rem
|
||||
color #D7592F
|
||||
text-align center
|
||||
</style>
|
||||
Reference in New Issue
Block a user