vue登录注册模块代码编写。
效果图:
当a标签中没有href属性的时候,没有小手的标志。
测试阶段,因此用的私人微信号来充当二维码。
增加了阴影效果,圆角化处理。
代码展示:
<template>
<div class="login-container">
<div class="header">
<div class="logo">
<router-link to="/home">
<img src="images/logo3.png" />
</router-link>
<p>欢迎登录</p>
</div>
</div>
<!-- 登录 -->
<div class="login-wrap">
<div class="login">
<div class="loginform">
<ul class="tab clearFix">
<li>
<a href="##"
@click="changeToCode"
style="border-right: 0"
:class="{ active: isActive == 0 }"
>扫码登录</a
>
</li>
<li>
<a href="##"
@click="changToAccount" :class="{ active: isActive == 1 }"
>账户登录</a
>
</li>
</ul>
<div class="content">
<!-- 账号登陆 -->
<form action="##" v-if="isAccount == true">
<div class="input-text clearFix">
<span class="account"></span>
<input type="text" placeholder="邮箱/用户名/手机号" />
</div>
<div class="input-text clearFix">
<span class="pwd"></span>
<input type="text" placeholder="请输入密码" />
</div>
<div class="setting clearFix">
<label class="checkbox inline">
<input name="m1" type="checkbox" value="2" checked="" />
自动登录
</label>
<span class="forget">忘记密码?</span>
</div>
<button class="btn">登 录</button>
</form>
<!-- 扫码登陆 -->
<form action="##" v-if="isCode == true">
<div class="codecontent">
<img src="./images/gaoan.jpg" />
<p>打开手机app 扫码登录</p>
</div>
</form>
<div class="call clearFix">
<ul>
<li><img src="./images/qq.png" alt="" /></li>
<li><img src="./images/sina.png" alt="" /></li>
<li><img src="./images/ali.png" alt="" /></li>
<li><img src="./images/weixin.png" alt="" /></li>
</ul>
<router-link class="register" to="/register"
>立即注册</router-link
>
</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="copyright">
<ul>
<li>关于我们</li>
<li>联系我们</li>
<li>联系客服</li>
<li>商家入驻</li>
<li>营销中心</li>
</ul>
<div class="address">
</div>
<div class="beian">XXXXXX</div>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
isCode: false,
isAccount: true,
isActive: 1,
};
},
methods: {
changeToCode() {
this.isAccount = false;
this.isCode = true;
this.isActive = 0;
},
changToAccount() {
this.isCode = false;
this.isAccount = true;
this.isActive = 1;
},
},
};
</script>
<style lang="less" scoped>
.login-container {
.header {
height: 100px;
.logo {
padding-left: 32%;
img {
height: 100px;
float: left;
}
p {
float: left;
font-size: 28px;
padding-top: 50px;
padding-left: 10px;
}
}
}
.login-wrap {
height: 487px;
background-color: #ff5e39;
.login {
width: 1200px;
height: 487px;
margin: 0 auto;
background: url() no-repeat;
}
.loginform {
width: 420px;
height: 406px;
box-sizing: border-box;
background: #fff;
float: right;
margin-right: 80px;
top: 45px;
position: relative;
padding: 20px;
border-radius: 10px;
-webkit-filter: drop-shadow(
10px 10px 10px rgba(0, 0, 0, 0.5)
); /*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
.tab {
li {
width: 50%;
float: left;
text-align: center;
a {
width: 100%;
display: block;
height: 50px;
line-height: 50px;
font-size: 20px;
font-weight: 700;
color: #333;
border: 1px solid #ddd;
box-sizing: border-box;
text-decoration: none;
}
.current {
border-bottom: none;
border-top-color: #28a3ef;
color: #ff5e39;
}
.active {
border-bottom: none;
// border-top-color: #28a3ef;
color: #ff5e39;
}
}
}
.content {
width: 380px;
height: 316px;
box-sizing: border-box;
border: 1px solid #ddd;
border-top: none;
padding: 18px;
form {
margin: 15px 0 18px 0;
font-size: 12px;
line-height: 18px;
.input-text {
margin-bottom: 16px;
span {
float: left;
width: 37px;
height: 32px;
border: 1px solid #ccc;
// backgrou: ;nd: url() no-repeat -10px -201px;
box-sizing: border-box;
border-radius: 2px 0 0 2px;
}
.account {
background: url("./images/account.png");
width: 40px;
height: 40px;
background-color: #eaeaea;
margin-left: 17px;
}
.pwd {
// background-position: -72px -201px;
background: url("./images/pwd.png");
width: 40px;
height: 40px;
background-color: #eaeaea;
margin-left: 17px;
}
input {
width: 264px;
height: 40px;
box-sizing: border-box;
border: 1px solid #ccc;
border-left: none;
float: left;
padding-top: 6px;
padding-bottom: 6px;
font-size: 14px;
line-height: 22px;
padding-right: 8px;
padding-left: 8px;
border-radius: 0 2px 2px 0;
outline: none;
}
}
.setting {
label {
float: left;
margin-left: 18px;
}
.forget {
float: right;
margin-right: 18px;
}
}
.btn {
background-color: #ff5e39;
padding: 6px;
border-radius: 0;
font-size: 16px;
font-family: 微软雅黑;
word-spacing: 4px;
border: 1px solid #ff5e39;
color: #fff;
width: 90%;
height: 36px;
margin-top: 25px;
margin-left: 18px;
outline: none;
}
.codecontent {
img {
padding-left: 90px;
// padding-top: 10px;
height: 169px;
width: 163px;
}
p {
font-size: 14px;
padding-left: 97px;
// padding-top: 10px;
}
}
}
.call {
margin-top: 50px;
ul {
float: left;
margin-left: 18px;
li {
float: left;
margin-right: 5px;
}
}
.register {
float: right;
font-size: 15px;
line-height: 38px;
margin-right: 18px;
color: #e1251b;
}
.register:hover {
color: #4cb9fc;
text-decoration: underline;
}
}
}
}
}
.copyright {
width: 1200px;
margin: 0 auto;
text-align: center;
line-height: 24px;
background-color: #eaeaea;
width: 100%;
padding-bottom: 50px;
ul {
li {
display: inline-block;
border-right: 1px solid #e4e4e4;
padding: 0 20px;
margin: 15px 0;
}
}
}
}
</style>