<template> <div class="app-container"> <form v-show="loginShow" @submit.prevent="false"> <h3>登录账号</h3> <input type="email" placeholder="请输入邮箱地址" required name="email" /> <input type="password" placeholder="请输入密码" required name="password" /> <button>登录</button> <p> <a>忘记密码</a> <a href="javascript:void(0);" @click="loginShow = false">注册账号</a> </p> </form> <form v-show="!loginShow" @submit.prevent="false"> <h3>注册账号</h3> <input type="email" placeholder="请输入邮箱地址" required name="email" /> <input type="password" placeholder="请输入密码" required name="password" /> <input type="text" placeholder="请输入用户名" name="username" /> <button>注册</button> <p> <a href="javascript:void(0);" @click="loginShow = true" >已有账号?马上登录</a > </p> </form> </div> </template> <script> export default { name: "AppAuth", components: {}, data() { return { loginShow: true, }; }, computed: {}, methods: {}, beforeMount() {}, }; </script> <style lang="scss" scoped> .app-container { width: 100%; height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; & > form { width: 100%; max-width: 500px; & > h3 { font-size: 25px; color: #4cd1e0; text-align: center; } & > input { width: 100%; height: 50px; line-height: 50px; padding: 6px 12px; margin: 10px 0px; } & > button { background: #4cd1e0; color: #fff; margin: 10px 0 30px; width: 100%; height: 50px; outline: none; display: block; font-size: 16px; border: 0 none; cursor: pointer; text-align: center; line-height: 50px; resize: none; font-family: "微软雅黑"; border-radius: 3px; box-shadow: 0 15px 25px #bae4ec; } & > p { color: #4cd1e0; display: flex; font-size: 13px; flex-direction: row; justify-content: space-between; } } } </style>