<!DOCTYPE HTML>
<html lang="zxx">
<head>
<title>登录</title>
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="keywords" content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements">
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!-- Meta tag Keywords -->
<!-- css files -->
<link rel="stylesheet" href="static/css/style.css" type="text/css" media="all">
<!-- Style-CSS -->
<link href="static/css/font-awesome.min.css" rel="stylesheet">
<!-- Font-Awesome-Icons-CSS -->
<!-- //css files -->
</head>
<body>
<div class="main-bg" id="mian">
<!-- title -->
<h1>XXXX后台管理系统</h1>
<!-- //title -->
<div class="sub-main-w3">
<div class="image-style">
</div>
<!-- vertical tabs -->
<div class="vertical-tab">
<div id="section1" class="section-w3ls">
<input type="radio" name="sections" id="option1" checked="">
<label for="option1" class="icon-left-w3pvt"><span class="fa fa-user-circle" aria-hidden="true"></span>登录</label>
<article>
<form action="#" method="post">
<h3 class="legend">账号登录</h3>
<div class="input">
<span class="fa fa-envelope-o" aria-hidden="true"></span>
<input type="email" v-model="logindata.email" placeholder="邮箱" name="email" required="">
</div>
<div class="input">
<span class="fa fa-key" aria-hidden="true"></span>
<input type="password" v-model="logindata.password" placeholder="密码" name="password" required="">
</div>
<button type="submit" class="btn submit">登 录</button>
<a href="#" class="bottom-text-w3ls">忘记密码?</a>
</form>
</article>
</div>
<div id="section2" class="section-w3ls">
<input type="radio" name="sections" id="option2">
<label for="option2" class="icon-left-w3pvt"><span class="fa fa-pencil-square" aria-hidden="true"></span>注册</label>
<article>
<form action="#" method="post">
<h3 class="legend">注册帐户</h3>
<div class="input">
<span class="fa fa-user-o" aria-hidden="true"></span>
<input type="text" v-model="registerdata.name" placeholder="用户名" name="name" required="">
</div>
<div class="input">
<span class="fa fa-key" aria-hidden="true"></span>
<input type="password" v-model="registerdata.password" placeholder="密码" name="password" required="">
</div>
<div class="input">
<span class="fa fa-key" aria-hidden="true"></span>
<input type="password" v-model="registerdata.confirmPassword" placeholder="确认密码" name="confirmPassword" required="">
</div>
<button type="submit" class="btn submit">注 册</button>
</form>
</article>
</div>
<div id="section3" class="section-w3ls">
<input type="radio" name="sections" id="option3">
<label for="option3" class="icon-left-w3pvt"><span class="fa fa-lock" aria-hidden="true"></span>忘记密码?</label>
<article>
<form action="#" method="post">
<h3 class="legend last">重置密码</h3>
<p class="para-style">请在下面输入您的电子邮件地址，我们将给您发送一封带有说明的电子邮件。</p>
<p class="para-style-2"><strong>需要帮助?</strong>了解更多关于如何 <a href="#">#</a></p>
<div class="input">
<span class="fa fa-envelope-o" aria-hidden="true"></span>
<input type="email" v-model="forgetdata.email" placeholder="邮箱" name="email" required="">
</div>
<button type="submit" class="btn submit last-btn">提交</button>
</form>
</article>
</div>
</div>
<!-- //vertical tabs -->
<div class="clear"></div>
</div>
<!-- copyright -->
<div class="copyright">
<h2>Copyright © 2019 - {{nowYear}} 版权所有| by
<a href="#">ChanKwongwing</a>
</h2>
</div>
<!-- //copyright -->
</div>
</body>
<!-- script -->
<script src="static/js/vue.min.js"></script>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
new Vue({
el:'#mian',
data: {
nowYear:new Date().getFullYear(),
logindata:{
email:"123@foxmail.com",
password:"admin123"
},
registerdata:{
name:"123@foxmail.com",
password:"admin123",
confirmPassword:"admin123"
},
forgetdata:{
email:"123@foxmail.com",
}
}
});
</script>
<!-- //script -->
</html>
vue网站后台登录注册和忘记密码切换页
版权申诉
5星 · 超过95%的资源 151 浏览量
2022-07-13
15:14:21
上传
评论 1
收藏 250KB RAR 举报 
Zp_demo.demohuo.top_73.rar （7个子文件） 
Zp_demo.demohuo.top_73 
index.html 5KB static css 
font-awesome.min.css 30KB style.css 11KB image 
m.jpg 14KB 435.jpg 123KB js vue.min.js 75KB font fontawesome-webfont.woff2 75KB
你热爱好热啊
- 粉丝: 2
- 资源: 1385
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减3.57元 开通VIP
- 1
- 2
- 3
前往页