登陆页面模板

简单好看的登陆页面 vue项目代码 可忽略js部分

先来个效果图

<template>
 <div class="login">
   <div class="content">
    <p >账户密码登录</p>

      <div class="unit">
		<label class="label">用户名</label>
			<div class="input">
				<input type="text" placeholder="请输入用户名" maxlength="20" v-model="form.name">
			</div>
			</div>
      <div class="unit">
		<label class="label">密码</label>
			<div class="input">
				<input type="password" placeholder="请输入密码" maxlength="20" autocomplete="off" v-model="form.password">
			</div>
	  </div>

      <div class="unit">
		  	<label class="label">验证码</label>
		  	<div class="input">
		  		<input type="text" placeholder="请输入验证码" id="randCode" name="randCode" maxlength="4">
		  		<img id="randCodeImg" class="randCode" src="../assets/img/randImg.jpg">
		  	</div>
		  </div>
       
   <el-button type="primary" @click="submitLogin" :loading="loading">登录</el-button>
   </div>
 </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { Login } from "@/api/index.js";
import { useRouter } from "vue-router";
const $router=useRouter()
const form = reactive({
  name: '',
  password: '',
  code:''
})

async function submitLogin() {
 try {
    const { data } = await Login(form)
    console.log(data);
    if(data.respCode=='0000'){
      $router.push('/home')
    }
  } catch (error) {
  } finally {
  }
}

</script>
<style lang="scss" scoped>
.login{
  width: 100vw;
  height: 95vh;
  background-image: url('../assets/img/10001.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .content{
    width: 432px;
    height: 480px;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    padding: 64px 32px;
    box-sizing: border-box;

      p{
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 700;
      }
    

     .unit {
        position: relative;
        margin-bottom: 25px;
        .label {
          font-size: 14px;
          color: #ccc;
        }
        .input {
          position: relative;
          input {
            border: 0 none;
            border-bottom: 1px solid #e3e3e3;
            border-radius: 5px;
            user-select: none;
            outline: none;
            font-size: 16px;
            width: 100%;
            background: none;
            color: #000;
            display: block;
            font-size: 16px;
            padding: 10px 15px;
            box-sizing: border-box;
          }
        }
        .randCode {
          width: 100px;
          height: 30px;
          position: absolute;
          top: 50%;
          margin-top: -14px;
          right: 5px;
          vertical-align: middle;
          cursor: pointer;
        }
     }
     .el-button{
      width: 100%;
     }
  }
}
</style>