一个简单的登录页面，加了一个需要点击阅读才可以登录的小功能，里面我把aixos请求的后端接口地址没有填写，需要改成自己需要的地址。

<template>

<div class="card">

<div class="login">

<div id="logintwo">

<div style="display: flex; width: 100%; height: 100%; overflow: hidden">

<div class="login-modal">

<div class="title">登录</div>

<el-alert

v-show="error"

title="账号或密码错误"

type="error"

:closable="false"

></el-alert>

<el-form class="login-form" ref="loginForm" label-width="0">

<el-form-item

prop="username"

style="border-radius: 13px 13px 13px 13px"

>

<el-input

style="border-radius: 13px 13px 13px 13px"

placeholder="请输入用户名"

prefix-icon="el-icon-user"

v-model="user.username"

>

</el-input>

</el-form-item>

<el-form-item prop="password">

<el-input

type="password"

style="border-radius: 13px 13px 13px 13px"

show-password

placeholder="请输入密码"

prefix-icon="el-icon-lock"

v-model="user.password"

>

</el-input>

</el-form-item>

<el-form-item>

<el-row :span="24">

<el-col :span="12" width="300">

<span

style="color: #1890ff; cursor: pointer"

@click="signup"

>注册/</span

>

<span

style="color: #1890ff; cursor: pointer"

@click="dialogVisible = true"

>忘记密码</span

>

</el-col>

<el-col :span="12">

<el-popover

placement="top-start"

title=""

width="50"

trigger="hover"

content="点击阅读协议书"

>

<el-checkbox

slot="reference"

v-model="checkedBut"

@click="checked"

style="float: right; font-size: 14px"

>

<a @click="read">请勾选阅读协议书</a>

</el-checkbox>

</el-popover>

</el-col>

</el-row>

</el-form-item>

<el-form-item>

<el-button

type="primary"

style="width: 100%"

@click="login"

class="login-submit"

>

登录

</el-button>

</el-form-item>

</el-form>

</div>

</div>

</div>

</div>

<el-dialog

title="找回密码"

:visible.sync="dialogVisible"

width="30%"

:before-close="handleClose"

>

<span>请输入您的账号和身份证号找回密码</span>

<el-form

:model="findPassword"

status-icon

ref="ruleForm"

label-width="100px"

class="demo-ruleForm"

style="margin-top: 30px"

>

<el-form-item label="输入账号" style="width: 350px">

<el-input

type="text"

v-model="findPassword.username"

autocomplete="off"

></el-input>

</el-form-item>

<el-form-item label="输入身份证号" style="width: 350px">

<el-input

type="text"

v-model="findPassword.idcard"

autocomplete="off"

></el-input>

</el-form-item>

</el-form>

<span slot="footer" class="dialog-footer">

<el-button @click="dialogVisible = false">取 消</el-button>

<el-button type="primary" @click="find">确 定</el-button>

</span>

</el-dialog>

</div>

</template>

<script>

export default {

name: "Login",

data() {

return {

checkedBut: false,

dialogVisible: false,

user: {

username: "",

password: "",

rememberPwd: "",

},

findPassword: {

username: "",

idcard: "",

},

loading: true,

error: false,

};

},

methods: {

login() {

if (this.checkedBut == true) {

this.errorcheak = false;

var axios = require("axios");

let data = {

username: this.user.username,

password: this.user.password,

};

let url = {

method: "post",

url: "",

data: data,

};

axios(url).then(

(response) => {

console.log(response);

if (response.data.code == 0) {

this.$session.set("userMessage", response.data.data);

console.log(this.$session.get("userMessage"));

this.$router.push({

name: "Works",

});

} else {

this.error = true;

}

},

(error) => {}

);

} else {

alert("请阅读协议书");

}

},

read() {

window.open(

"https://shop447273813.taobao.com/?spm=a1z10.1-c.0.0.8b2f706eT5EENp"

);

},

checked() {

console.log(this.checkedBut);

},

find() {

var axios = require("axios");

let data = {

username: this.findPassword.username,

Idcard: this.findPassword.idcard,

};

let url = {

method: "post",

// 填写自己请求的地址接口

url: "",

data: data,

};

axios(url).then((response) => {

this.$confirm(

"密码已经找回,为: " + response.data.data.password + " 请您记住",

"提示",

{

confirmButtonText: "确定",

cancelButtonText: "取消",

}

).then(() => {});

console.log(response.data.data);

});

},

loginForm() {},

rememberPwd() {},

signup() {

this.$router.push({

path: "signup",

});

},

handleClose(done) {

this.$confirm("确认关闭？")

.then((_) => {

done();

})

.catch((_) => {});

},

},

};

</script>

<style scoped>

.el-input__inner {

border-radius: 13px 13px 13px 13px !important;

}

#logintwo {

width: 100%;

height: 100%;

background-size: 100% 100%;

background-repeat: no-repeat;

/* background-image:url('../login/like2.png'); */

/* background-image: url("../login/888.png"); */

background-position: center center;

overflow: auto;

position: fixed;

line-height: 100%;

background-color: #f9f9f9;

}

.logo {

width: auto;

height: 60px;

display: flex;

overflow: hidden;

background-color: #1fb494;

}

.logo img {

width: 32px;

height: 32px;

margin: 14px 10px 0 15px;

}

.logo .title {

font-size: 16px;

text-overflow: ellipsis;

color: white;

line-height: 61px;

}

.top-box {

height: 60px;

display: flex;

background-color: #1fb494;

}

.top-box-i {

width: 32px;

height: 32px;

font-size: 24px;

margin: 16px 10px 0 15px;

/* color: #ffffff; */

}

.avue-home {

/*background-color: #303133;*/

background-color: rgba(39, 51, 59, 1);

height: 100%;

display: flex;

flex-direction: column;

}

.avue-home__main {

user-select: none;

width: 100%;

flex-grow: 1;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

.avue-home__footer {

width: 100%;

flex-grow: 0;

text-align: center;

padding: 1em 0;

}

.avue-home__footer > a {

font-size: 12px;

color: #ababab;

text-decoration: none;

}

.avue-home__loading {

height: 32px;

width: 32px;

margin-bottom: 20px;

}

.avue-home__title {

color: #fff;

font-size: 14px;

margin-bottom: 10px;

}

.avue-home__sub-title {

color: #ababab;

font-size: 12px;

}

::-webkit-scrollbar {

width: 7px;

height: 7px;

display: none;

background-color: transparent;

}

::-webkit-scrollbar-thumb {

border-radius: 5px;

background-color: rgba(39, 51, 59, 1);

}

::-webkit-scrollbar-track-piece {

background-color: transparent;

}

a {

/* color: #ffffff; */

text-decoration: none;

}

.name {

line-height: 50px;

font-size: 30px;

font-weight: 700;

color: #ffffff;

margin-left: 10px;

}

.login-modal {

box-shadow: rgb(206, 206, 206) 10px 10px 30px 5px;

position: relative;

width: 420px;

height: 450px;

margin: 0 auto;

top: 50%;

margin-top: -225px;

/* background-color:#ffc2cc; */

border-radius: 20px 20px 20px 20px;

}

.title {

height: 100px;

line-height: 100px;

font-weight: 650;

text-align: center;

font-size: 28px;

}

.login-form {

margin: 20px 40px;

}

</style>