vue---移动端登录页面

最近在用vue做移动端，做了一个好看的移动端登录界面，保存一下，以后方便直接使用。

具体代码：

<template><div class="main-login-container"><div class="login-top"><img class="img" :src="logintop"></div><div class="login-box"><div class="login-title">{{ loginTitle }}</div><div class="login-from"><div class="login-from-box"><div class="title">登录</div><div class="from-item"><div class="tips" v-if="loginForm.account">手机号</div><div class="input" :class="errors.account ? 'errors' : ''"><input type="text" v-model="loginForm.account" placeholder="手机号" @focus="handleFocus('account')"></div><div class="info" v-if="errors.account">* {{ errors.account }}</div></div><div class="from-item"><div class="tips" v-if="loginForm.password">密码</div><div class="input" :class="errors.password ? 'errors' : ''"><input type="password" v-model="loginForm.password" placeholder="密码" @focus="handleFocus('password')"></div><div class="info" v-if="errors.password">* {{ errors.password }}</div></div><div class="from-item"><div class="tips" v-if="loginForm.checkCode">验证码</div><div class="input code" :class="errors.checkCode ? 'errors' : ''"><input type="text" v-model="loginForm.checkCode" placeholder="验证码" @focus="handleFocus('checkcode')"><img class="img" :src="codeImg" @click="handleCode"></div><div class="info" v-if="errors.checkCode">* {{ errors.checkCode }}</div></div><div class="submit-btn" @click="handleSubmit">登录</div></div></div></div><div class="login-bottom flex"><span class="copy">&copy;</span>Copyright © 2022-现在 云科技 All Rights Reserved. 沪ICP备512451200125号</div></div>
</template><script>
import { login, checkcode } from "@/api/index.js";
import { loginTitle } from "@/settings.js";
export default {data() {return {loginTitle:'云oA管理后台',isPost: false,codeImg: "",logintop: require("@/assets/logintop.jpg"),loginForm: {account: "18313888888",password: "888888",checkCode: "123456",},errors: {account: "",password: "",checkCode: "",},redirect: undefined,};},watch: {$route: {handler: function (route) {this.redirect = route.query && route.query.redirect;},immediate: true,},},mounted() {this.handleCode();},methods: {// get code
    handleCode() {let imgSrc = checkcode();imgSrc = imgSrc + "?" + Math.round(Math.random() * 10);this.codeImg = imgSrc;},// submit
    handleSubmit() {let that = this;// validateif (that.validate()) return false;if (that.isPost) return false;that.isPost = true;that.$store.dispatch("user/login", that.loginForm).then(() => {that.isPost = false;that.$router.push({ path: that.redirect || "/" });}).catch(() => {that.isPost = false;});},// focus
    handleFocus(value) {this.errors[value] = "";},// validate
    validate() {let arr = [];if (!this.loginForm.account) {arr.push("account");this.errors.account = "账号不能为空";}if (!this.loginForm.password) {arr.push("password");this.errors.password = "密码不能为空";}if (!this.loginForm.checkCode) {arr.push("checkCode");this.errors.checkCode = "验证码不能为空";}return arr.length ? true : false;},},
};
</script>
</style>
<style lang="scss" scoped>
.main-login-container {background: #fff;position: absolute;top: 0;right: 0;bottom: 0;left: 0;.login-top {width: 100%;height: 240px;background: #0793ff;position: absolute;left: 0;top: 0;.img{width: 100%;position: absolute;left: 0;bottom: 0;}}.login-box {position: relative;z-index: 10;.login-title {font-size: 26px;color: #fff;font-weight: 600;text-align: center;line-height: 50px;padding: 70px 0 0;letter-spacing: 3px;}.login-from {margin-top: 45px;padding: 0 20px;.login-from-box {padding: 20px 0px 40px;border-radius: 10px;.title {font-size: 20px;line-height: 50px;font-weight: bold;margin-bottom: 10px;text-indent: 2px;}.from-item {margin-bottom: 15px;.tips {font-size: 14px;color: #888;text-indent: 5px;}.input {margin-top: 2px;position: relative;border-bottom: 1px solid #eee;input {width: 100%;height: 40px;text-indent: 5px;line-height: 40px;font-size: 14px;color: #333;border: none;}.img {width: 85px;height: 40px;position: absolute;right: 0;bottom: 8px;}}.code {input {width: calc(100% - 95px);}}.errors {border-bottom-color: red;}.info {text-indent: 5px;font-size: 12px;line-height: 30px;color: red;}}.submit-btn {width: 100%;margin-top: 30px;height: 45px;line-height: 45px;border-radius: 5px;background: #2c76fc;color: #fff;font-size: 18px;text-align: center;letter-spacing: 3px;cursor: pointer;}}}}.login-bottom {width: 100%;min-height: 40px;line-height: 40px;color: #bbb;text-align: center;font-size: 14px;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;position: fixed;left: 0;bottom: 0;padding: 0 40px 10px;word-break: break-all;line-height: 20px;.copy {font-size: 16px;line-height: 20px;margin-right: 5px;}}
}
</style>

用到的头部图片：

打完收工！