fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit 6bf566f1148c15942a5e19c1962170e9f206f791 1 parent e6758732

reg-page-ok

Inline Side-by-side
Showing 7 changed files with 163 additions and 7 deletions
class Reg {
regPage(req, res) {
res.render('reg-new', {
module: 'passport',
page: 'reg-new',
width750: true,
});
}
}
module.exports = Reg;
... ...
... ... @@ -163,10 +163,13 @@ let captcha = require('./controllers/captcha');
router.get('/passport/captcha/get', captcha.get);
router.get('/passport/img-check.jpg', captcha.imgCheck);
// 新的登录注册
const LoginNew = require('./controllers/login-new');
const loginNew = new LoginNew();
const RegNew = require('./controllers/reg-new');
const regNew = new RegNew();
router.get('/passport/login-new', loginNew.loginPage);
router.get('/passport/reg-new', regNew.regPage);
module.exports = router;
... ...
... ... @@ -13,10 +13,10 @@
</div>
<div class="login-form">
<div class="form-group username">
<label for="username" class="iconfont">&#xe648;</label><input type="text" placeholder="请输入手机号/邮箱"><i class="iconfont">&#xe648;</i>
<label for="username" class="iconfont">&#xe648;</label><input type="text" name="username" placeholder="请输入手机号/邮箱"><i class="iconfont">&#xe648;</i>
</div>
<div class="form-group password">
<label for="password" class="iconfont">&#xe648;</label><input type="password" placeholder="请输入密码"><i class="iconfont">&#xe648;</i>
<label for="password" class="iconfont">&#xe648;</label><input type="password" name="password" placeholder="请输入密码"><i class="iconfont">&#xe648;</i>
</div>
<div class="other-info">
<a href="">海外账号</a>
... ...
<div class="reg-new-page">
<div class="top-operation-bar">
<button class="back iconfont">&#xe648;</button>
<span class="page-title">注册</span>
<button class="close iconfont">&#xe648;</button>
</div>
<div class="reg-form">
<div class="form-group mobile">
<label for="mobile" class="iconfont">&#xe648;</label><button class="country-code">+86<i class="iconfont">&#xe648;</i></button><i class="line">|</i><input type="text" name="mobile" placeholder="请输入手机号/邮箱" class="mobile-input"><i class="iconfont">&#xe648;</i>
</div>
<div class="form-group verify-code">
<label for="verifyCode" class="iconfont">&#xe648;</label><input type="text" name="verifyCode" placeholder="请输入验证码" class="verify-code-input"><button class="get-verify-code">获取验证码</button>
</div>
<div class="form-group password">
<label for="password" class="iconfont">&#xe648;</label><input type="password" name="password" placeholder="请输入密码"><i class="iconfont">&#xe648;</i>
</div>
<div class="form-group invite-code">
<label for="inviteCode" class="iconfont">&#xe648;</label><input type="text" name="inviteCode" placeholder="邀请码（无邀请码非必填）">
</div>
<button class="reg-btn">注册</button>
</div>
</div>
\ No newline at end of file
... ...
require('passport/reg-new.page.css');
... ...
... ... @@ -17,6 +17,8 @@
margin-top: 18px;
}
$top-bar-font-color: #fff;
.login-new-page {
.banner-box {
width: 750px;
... ... @@ -44,21 +46,24 @@
> .top-operation-bar > button {
height: 50px;
text-align: center;
&.close {
width: 50px;
float: left;
background-color: transparent;
color: #fff;
font-size: 50px;
color: $top-bar-font-color;
font-size: 45px;
overflow: hidden;
padding: 0;
}
&.register {
width: 110px;
border-radius: 25px;
background-color: transparent;
color: #fff;
border: solid 1px #fff;
color: $top-bar-font-color;
border: solid 1px $top-bar-font-color;
float: right;
}
}
... ...
@define-extend padding-75 {
padding-left: 75px;
padding-right: 75px;
}
$top-bar-font-color: #444;
.reg-new-page {
@extend padding-75;
.top-operation-bar {
width: 600px;
height: 50px;
margin-top: 50px;
color: $top-bar-font-color;
> button {
height: 50px;
width: 50px;
background-color: transparent;
font-size: 45px;
overflow: hidden;
padding: 0;
text-align: center;
&.back {
float: left;
}
&.close {
float: right;
}
}
> .page-title {
width: 500px;
font-size: 34px;
text-align: center;
display: inline-block;
margin-top: 7px;
}
}
.reg-form {
margin-top: 100px;
> .form-group {
border-bottom: 1px solid #e0e0e0;
height: 50px;
margin-bottom: 56px;
> label {
font-size: 26px;
margin-right: 45px;
}
> input {
width: 400px;
border: none;
box-shadow: none;
background-color: transparent;
&.mobile-input {
width: 300px;
}
&.verify-code-input {
width: 260px;
}
}
> i {
float: right;
&.line {
float: none;
margin-right: 20px;
}
}
.country-code {
width: 98px;
height: 22px;
font-size: 28px;
line-height: 1.14;
color: #444;
background-color: transparent;
margin-right: 20px;
}
> .get-verify-code {
width: 140px;
height: 50px;
border-radius: 25px;
background-color: #444;
color: #fff;
font-size: 22px;
float: right;
margin-top: -8px;
}
}
.reg-btn {
width: 600px;
height: 70px;
border-radius: 4px;
background-color: #b0b0b0;
margin-top: 100px;
font-size: 32px;
color: #fff;
}
}
}
... ...