暂存
This commit is contained in:
Dragon
157
view/peko/modules/register/css/index.css
Normal file
157
view/peko/modules/register/css/index.css
Normal file
@@ -0,0 +1,157 @@
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #A2E1FE;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 21.6533333333rem;
|
||||
background: url(../images/body.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: 9.7866666667rem;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 9.0666666667rem;
|
||||
height: 10.3466666667rem;
|
||||
background: url(../images/boxBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box .phone {
|
||||
width: 8.2133333333rem;
|
||||
height: 1.68rem;
|
||||
line-height: 1.68rem;
|
||||
margin: 0.9333333333rem auto 0.6666666667rem;
|
||||
position: relative;
|
||||
}
|
||||
.box .phone .num {
|
||||
height: 100%;
|
||||
color: #1F1A4E;
|
||||
font-size: 0.4266666667rem;
|
||||
position: absolute;
|
||||
left: 0.5866666667rem;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box .phone input {
|
||||
outline: none;
|
||||
background: #FFFFFF;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: none;
|
||||
border-radius: 0.2666666667rem;
|
||||
font-weight: bold;
|
||||
color: #1F1A4E;
|
||||
font-size: 0.4266666667rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0.1333333333rem 0.1333333333rem 0.1333333333rem 1.7rem;
|
||||
}
|
||||
.box .code {
|
||||
width: 8.2133333333rem;
|
||||
height: 1.68rem;
|
||||
line-height: 1.68rem;
|
||||
margin: 0 auto 1.0666666667rem;
|
||||
position: relative;
|
||||
}
|
||||
.box .code .num {
|
||||
height: 100%;
|
||||
color: #1F1A4E;
|
||||
font-size: 0.4266666667rem;
|
||||
position: absolute;
|
||||
right: 0.5866666667rem;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box .code input {
|
||||
outline: none;
|
||||
background: #FFFFFF;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: none;
|
||||
border-radius: 0.2666666667rem;
|
||||
font-weight: bold;
|
||||
color: #1F1A4E;
|
||||
font-size: 0.4266666667rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0.1333333333rem 3rem 0.1333333333rem 0.1333333333rem;
|
||||
}
|
||||
.box .but {
|
||||
width: 4.4rem;
|
||||
height: 1.4933333333rem;
|
||||
background: linear-gradient(255deg, #CC66FF 1%, #9CB3FF 52%, #13E2F5 100%);
|
||||
border-radius: 0.2666666667rem;
|
||||
margin: 0 auto 0;
|
||||
text-align: center;
|
||||
line-height: 1.4933333333rem;
|
||||
color: #fff;
|
||||
font-size: 0.5333333333rem;
|
||||
}
|
||||
|
||||
.pop_up {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: none;
|
||||
}
|
||||
.pop_up .pop_up_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 8.2666666667rem;
|
||||
height: 5.2266666667rem;
|
||||
background: #fff;
|
||||
border-radius: 0.32rem;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.pop_up .pop_up_in img {
|
||||
width: 0.5866666667rem;
|
||||
height: 0.5866666667rem;
|
||||
position: absolute;
|
||||
right: 0.4rem;
|
||||
top: 0.2666666667rem;
|
||||
}
|
||||
.pop_up .pop_up_in .title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #1F1A4E;
|
||||
font-size: 0.4533333333rem;
|
||||
font-weight: bold;
|
||||
margin: 0.6666666667rem auto 0.48rem;
|
||||
}
|
||||
.pop_up .pop_up_in .content {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #6D6B89;
|
||||
font-size: 0.3733333333rem;
|
||||
margin: 0 auto 1.0133333333rem;
|
||||
}
|
||||
.pop_up .pop_up_in .but {
|
||||
width: 3.6rem;
|
||||
height: 0.9866666667rem;
|
||||
line-height: 0.9866666667rem;
|
||||
border-radius: 0.9866666667rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.3733333333rem;
|
||||
margin: 0 auto 0;
|
||||
background: linear-gradient(255deg, #CC66FF 1%, #9CB3FF 52%, #13E2F5 100%);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
174
view/peko/modules/register/css/index.scss
Normal file
174
view/peko/modules/register/css/index.scss
Normal file
@@ -0,0 +1,174 @@
|
||||
@import '../../../common/css/flex.scss';
|
||||
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #A2E1FE;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: px2rem(1624, );
|
||||
background: url(../images/body.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: px2rem(734, );
|
||||
}
|
||||
|
||||
.box {
|
||||
width: px2rem(680, );
|
||||
height: px2rem(776, );
|
||||
background: url(../images/boxBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
overflow: hidden;
|
||||
|
||||
.phone {
|
||||
width: px2rem(616, );
|
||||
height: px2rem(126, );
|
||||
line-height: px2rem(126, );
|
||||
margin: px2rem(70, ) auto px2rem(50, );
|
||||
position: relative;
|
||||
|
||||
.num {
|
||||
height: 100%;
|
||||
color: #1F1A4E;
|
||||
font-size: px2rem(32, );
|
||||
position: absolute;
|
||||
left: px2rem(44, );
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input {
|
||||
outline: none;
|
||||
background: #FFFFFF;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: none;
|
||||
border-radius: px2rem(20, );
|
||||
font-weight: bold;
|
||||
color: #1F1A4E;
|
||||
font-size: px2rem(32, );
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(10, ) px2rem(10, ) px2rem(10, ) 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
width: px2rem(616, );
|
||||
height: px2rem(126, );
|
||||
line-height: px2rem(126, );
|
||||
margin: 0 auto px2rem(80, );
|
||||
position: relative;
|
||||
|
||||
.num {
|
||||
height: 100%;
|
||||
color: #1F1A4E;
|
||||
font-size: px2rem(32, );
|
||||
position: absolute;
|
||||
right: px2rem(44, );
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input {
|
||||
outline: none;
|
||||
background: #FFFFFF;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: none;
|
||||
border-radius: px2rem(20, );
|
||||
font-weight: bold;
|
||||
color: #1F1A4E;
|
||||
font-size: px2rem(32, );
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(10, ) 3rem px2rem(10, ) px2rem(10, );
|
||||
}
|
||||
}
|
||||
|
||||
.but {
|
||||
width: px2rem(330, );
|
||||
height: px2rem(112, );
|
||||
background: linear-gradient(255deg, #CC66FF 1%, #9CB3FF 52%, #13E2F5 100%);
|
||||
border-radius: px2rem(20, );
|
||||
margin: 0 auto 0;
|
||||
text-align: center;
|
||||
line-height: px2rem(112, );
|
||||
color: #fff;
|
||||
font-size: px2rem(40, );
|
||||
}
|
||||
}
|
||||
|
||||
.pop_up {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
background: rgba(0, 0, 0, .8);
|
||||
display: none;
|
||||
|
||||
.pop_up_in {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: px2rem(620, );
|
||||
height: px2rem(392, );
|
||||
background: #fff;
|
||||
border-radius: px2rem(24, );
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
img {
|
||||
width: px2rem(44, );
|
||||
height: px2rem(44, );
|
||||
position: absolute;
|
||||
right: px2rem(30, );
|
||||
top: px2rem(20, );
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #1F1A4E;
|
||||
font-size: px2rem(34, );
|
||||
font-weight: bold;
|
||||
margin: px2rem(50, ) auto px2rem(36, );
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #6D6B89;
|
||||
font-size: px2rem(28, );
|
||||
margin: 0 auto px2rem(76, );
|
||||
}
|
||||
|
||||
.but {
|
||||
width: px2rem(270, );
|
||||
height: px2rem(74, );
|
||||
line-height: px2rem(74, );
|
||||
border-radius: px2rem(74, );
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(28, );
|
||||
margin: 0 auto 0;
|
||||
background: linear-gradient(255deg, #CC66FF 1%, #9CB3FF 52%, #13E2F5 100%);
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
view/peko/modules/register/images/body.png
Normal file
BIN
view/peko/modules/register/images/body.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
BIN
view/peko/modules/register/images/boxBg.png
Normal file
BIN
view/peko/modules/register/images/boxBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
view/peko/modules/register/images/close.png
Normal file
BIN
view/peko/modules/register/images/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 B |
43
view/peko/modules/register/index.html
Normal file
43
view/peko/modules/register/index.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>注册</title>
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="phone">
|
||||
<div class="num">+86 </div>
|
||||
<input type="number">
|
||||
</div>
|
||||
<div class="code">
|
||||
<div class="num">獲取驗證碼</div>
|
||||
<input type="number">
|
||||
</div>
|
||||
<div class="but">提交</div>
|
||||
</div>
|
||||
<div class="pop_up">
|
||||
<div class="pop_up_in">
|
||||
<img src="./images/close.png" alt="">
|
||||
<p class="title">提交成功</p>
|
||||
<p class="content">申請結果會通過短信通知，請耐心等候</p>
|
||||
<div class="but">我知道了</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/pingpp.js"></script>
|
||||
<script src="../../common/js/common2.js?v=8.0"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
|
||||
</html>
|
||||
68
view/peko/modules/register/js/index.js
Normal file
68
view/peko/modules/register/js/index.js
Normal file
@@ -0,0 +1,68 @@
|
||||
// 封装layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加载中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success (e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
var browser = checkVersion();
|
||||
const urlPrefix = getUrlPrefix();
|
||||
var getUrl = getQueryString();
|
||||
if (EnvCheck() == 'test') {//degBug
|
||||
new VConsole();
|
||||
}
|
||||
$(function () {
|
||||
getInfoFromClient();//请求依赖
|
||||
})
|
||||
function request () {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '',
|
||||
data: {},
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
$('.box .phone input').val('');
|
||||
$('.box .code input').val('');
|
||||
$('.pop_up').show();
|
||||
hideLoading(layerIndex)
|
||||
} else {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg(ress.message)
|
||||
}
|
||||
},
|
||||
error () {
|
||||
toastMsg('網絡錯誤');
|
||||
}
|
||||
});
|
||||
}
|
||||
// 提交按钮
|
||||
$('.box .but').click(function () {
|
||||
var num = Number($('.box .phone .num').text().match(/\d+/)[0]);
|
||||
var phone = Number($('.box .phone input').val());
|
||||
var code = Number($('.box .code input').val());
|
||||
console.log(num, phone, code);
|
||||
})
|
||||
// 关闭弹窗
|
||||
$('.pop_up .pop_up_in img').click(function () {
|
||||
$('.pop_up').hide();
|
||||
})
|
||||
// 关闭弹窗
|
||||
$('.pop_up .pop_up_in .but').click(function () {
|
||||
$('.pop_up').hide();
|
||||
})
|
||||
Reference in New Issue
Block a user