炫酷的登陆注册页面【Html+CSS+Js】网页界面【开源】

小段爱开发

已于 2024-06-23 23:56:57 修改

阅读量495

点赞数 7

分类专栏： # 前端网页项目文章标签： html css javascript

于 2024-06-23 23:54:51 首次发布

本文链接：https://blog.csdn.net/m0_63324772/article/details/139908954

版权

前端网页项目专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

1.界面演示
2.部分代码
3.获取代码

1.界面演示

2.部分代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdn.staticfile.org/vue/2.6.9/vue.js"></script>
</head>

<body>
    <div id='app' class="container">
        <img src="./bg.jpg" />
        <div class="panel">
            <div class="content login">
                <div class="switch">
                    <span :class='{"active": active === "login"}' @click='go("login")'>登陆</span>
                    <span>/</span>
                    <span :class='{"active": active === "register"}' @click='go("register")'>注册</span>
                </div>
                <div class='form' id="fromLogin">
                    <template v-if='active === "register"'>
                        <div class="input"><input :class='{ hasValue: registerForm.email }' v-model='registerForm.email' type="text" name="email" id='email' /><label for="email">邮箱</label></div>
                        <div class="input"><input :class='{ hasValue: registerForm.Username }' v-model='registerForm.Username' type="text" name="Username" id="username" /><label for="username">用户名</label></div>
                        <div class="input"><input :class='{ hasValue: registerForm.Password }' v-model='registerForm.Password' type="password" name="Password" id="Password" /><label for="Password">密码</label></div>
                        <div class="input"><input :class='{ hasValue: registerForm.repeat }' v-model='registerForm.repeat' type="password" name="repeat" id="Passwordrepeat" /><label for="Passwordrepeat">重复密码</label></div>
                    </template>

                    <template v-if='active === "login"'>
                        <div class="input"><input :class='{ hasValue: loginForm.Username }' v-model='loginForm.Username' type="text" name="Username" id="username" /><label for="username">用户名</label></div>
                        <div class="input"><input :class='{ hasValue: loginForm.Password }' v-model='loginForm.Password' type="password" name="Password" id="Password" /><label for="Password">密码</label></div>
                    </template>

                    <span>忘记?</span>

                    <button type="submit" @click='submit'>登陆</button>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
var vue = new Vue({
    el: '#app',
    data: {
        active: 'login',
        registerForm: { email: '', Username: '', Password: '', repeat: '', },
        loginForm: { Username: '', Password: '', },
    },
    methods: {
        go (type) {
            this.active = type
        },
        submit() {
            if (type === 'login') {
                console.log('login', this.loginForm)
            } 

            if (type === 'register') {
                console.log('register', this.registerForm)
            }
        }
    },
    beforeMount () {}
})
</script>

</html>