shujuju/boman-h5/src/views/Login.vue

<template>
  <div>
      <login-top Text="登录">
            <div slot="right" style="font-size:3.611vw" @click="$router.push('/register')">用户注册</div>
      </login-top>
        <div class="login_img" style="width: 100%;height: 100%;">
			<img src="../assets/img/pic_dlbg.png" alt="" style="width: 100%; height: 100%;">
		</div>
		<div class="login_dl">
			登录
		</div> 
		<div class="user_name">
			<p>用户名</p>
			<p><input type="text" placeholder="请输入用户名"></p>
		</div>
		<div class="user_name">
			<p>密码</p>
			<p><input type="text" placeholder="请输入密码"></p>
		</div>
        <!-- <login-text label="用户名" 
        placeholder="请输入用户名"
         @contentWatch="res => model.username = res"
         style="margin:4.167vw 0"
         >
        </login-text>

        <login-text label="密码" 
            placeholder="请输入密码" 
            type="password"
            @contentWatch="res => model.password = res"
        >
        </login-text> -->

        <login-btn BtnText="登录" @TextClick="AjaxInsert"></login-btn>
  </div>
</template>

<script>
import LoginTop from '@/components/common/LoginTop.vue'
import LoginText from '@/components/common/LoginText.vue'
import LoginBtn from '@/components/common/LoginBtn.vue'
export default {
    data() {
        return {
            model:{}
        }
    },
    components:{
        LoginTop,
        LoginText,
        LoginBtn
    },
    methods:{
        async AjaxInsert() {
            let rulg = /^.{6,16}$/
            if(rulg.test(this.model.username)&&rulg.test(this.model.password)){
                const res =  await this.$http.post('/login',this.model)
                this.$msg.fail(res.data.msg)
                if(res.data.code == 301 || res.data.code == 302){
                    return
                }
                localStorage.setItem('token',res.data.token)
                localStorage.setItem('id',res.data.id)
                setTimeout(() => {  
                    this.$router.push('/userinfo')
                },1000)
            }else{
                this.$msg.fail('格式不正确,请重新输入!')
            }
        }
    }
}
</script>

<style lang="less">
 .login_img{
	//  height: 100vh;
	// background: url('../assets/img/pic_dlbg.png'); 
	position: fixed;
	z-index: -1;
 }
 .login_dl{
	 font-size: 25px;
	 font-family: PingFang SC;
	 font-weight: 800;
	 color: #009FE8;
	 line-height: 13px;
	 margin-left: 50%;
	 transform: translateX(-50%);
	 text-align: center;
	 margin-top: 232px;
	 margin-bottom: 30px;
 }
 .user_name{
	 padding: 34px;
	 padding-top: 0;
	 padding-bottom: 0;
	 margin-bottom: 30px;
	 p:nth-child(1){
		 font-size: 14px;
		 font-family: PingFang SC;
		 font-weight: 400;
		 color: #343434;
		 margin-bottom: 10px;
	 }
	 p:nth-child(2){
		border-bottom: 1px solid #009FE8;
		
		input{
			font-size: 14px;
			margin-bottom: 4.999px;
		} 
	 }
	 input{
		 background:none;  
		 outline:none;  
		 border:none;
	 }
 }
</style>