Home Verkennen Help
Inloggen
asiainfo
/
static
Volgen 2
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Commits 2089 Publicaties 4 Wiki
Bladeren bron

增加手机输入和手机验证两个静态页面

guohh 4 jaren geleden
bovenliggende
e1b3debd20
commit
0b630ee1a6
6 gewijzigde bestanden met toevoegingen van 181 en 3 verwijderingen
Split View Toon Diff Stats
  1. 56 0
      2021/ng-srb/biz/css/base-ghh.css
  2. 0 0
      2021/ng-srb/biz/js/pages/welcome-phone-auth.js
  3. 30 0
      2021/ng-srb/biz/js/pages/welcome-phone-check.js
  4. 3 3
      2021/ng-srb/welcome-auth.html
  5. 52 0
      2021/ng-srb/welcome-phone-check.html
  6. 40 0
      2021/ng-srb/welcome-phone-input.html

+ 56 - 0
2021/ng-srb/biz/css/base-ghh.css
Bestand weergeven 

@ -542,6 +542,7 @@
542 542 
  background-color: rgba(0, 0, 0, .4);
543 543 
}
544 544
545 
.dailog-login-block,
545 546 
.phoneno-switch-block,
546 547 
.phoneno-warn-block {
547 548 
  position: absolute;
 
@ -597,11 +598,17 @@
597 598 
  margin-left: .31rem;
598 599 
}
599 600
601 
.phone-input-btn.btn,
600 602 
.welcome-auth-buttons .btn-wrap + .btn-wrap .btn {
601 603 
  color: #fff;
602 604 
  background-color: #47B5ED;
603 605 
}
604 606
607 
.welcome-auth-buttons .btn.phone-input-btn {
608 
  width: 40%;
609 
  margin: 0 auto;
610 
}
611
605 612 
.phoneno-switch-title {
606 613 
  font-size: .14rem;
607 614 
  font-weight: bold;
 
@ -631,4 +638,53 @@
631 638 
  width: .16rem;
632 639 
  height: .16rem;
633 640 
  margin-right: .11rem;
641 
}
642
643 
.dailog-login-title {
644 
  padding-top: .21rem;
645 
  text-align: center;
646 
  font-size: .14rem
647 
  font-weight: bold;
648 
  color: #333333;
649 
  line-height: 1;
650 
}
651
652 
.dialog-login-input-row {
653 
  margin: .12rem .31rem;
654 
  height: .35rem;
655 
  background: #FFFFFF;
656 
  border: 1px solid #ccc;
657 
  border-radius: .03rem;
658 
  line-height: .33rem;
659 
}
660
661 
.dialog-login-input {
662 
  display: block;
663 
  width: 100%;
664 
  -webkit-appearance: none;
665 
  border: none;
666 
  box-shadow: none;
667 
  padding: 0 .1rem;
668 
  font-size: .12rem;
669 
  font-weight: 500;
670 
  color: #333;
671 
}
672
673 
.dialog-login-input::-webkit-input-placeholder {
674 
  color: #999;
675 
}
676
677 
.dialog-send-code {
678 
  font-size: .1rem;
679 
  font-weight: 500;
680 
  color: #47B5ED;
681 
  padding: 0 .1rem;
682 
}
683
684 
.dialog-login-input-rows {
685 
  padding: .03rem .08rem;
686 
}
687
688 
.dialog-send-code.time {
689 
  color: #999;
634 690 
}

2021/ng-srb/biz/js/pages/welcome-auth.js → 2021/ng-srb/biz/js/pages/welcome-phone-auth.js
Bestand weergeven


+ 30 - 0
2021/ng-srb/biz/js/pages/welcome-phone-check.js
Bestand weergeven 

@ -0,0 +1,30 @@
1 
require(["ipuUI", "jquery"], function (ipuUI, $) {
2 
  $.sizeReady(function () {
3
4 
    // 显示切换手机号
5 
    $(".dialog-send-code").click(function () {
6 
      if ($(this).hasClass("time")) { // 正在倒计时
7 
        return
8 
      } else {
9 
        $(".dialog-send-code").addClass("time");  // 计时的样式不一样
10 
      }
11
12 
      var _this = $(this);
13 
      var originText = _this.text(); // 取原始文本信息
14 
      var count = 6;
15
16 
      function countTime() {
17 
        count--;
18 
        if (count > 0) {
19 
          _this.text(count + '(s)');
20 
          setTimeout(countTime, 1000);
21 
        } else {
22 
          _this.text(originText).removeClass("time");
23 
        }
24 
      }
25
26 
      countTime();
27 
    });
28
29 
  });
30 
});

+ 3 - 3
2021/ng-srb/welcome-auth.html
Bestand weergeven 

@ -1,7 +1,7 @@
1 1 
<!DOCTYPE html>
2 2 
<html>
3 3 
<head>
4 
  <title>模板页面</title>
4 
  <title>手机号认证</title>
5 5 
  <meta charset="utf-8">
6 6 
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
7 7 
  <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
 
@ -9,9 +9,9 @@
9 9
10 10 
  <script src="ipu/lib/requirejs/require.js"></script>
11 11 
  <script src="biz/js/require-config.js"></script>
12 
  <script src="biz/js/pages/welcome-auth.js"></script>
12 
  <script src="biz/js/pages/welcome-phone-auth.js"></script>
13 13 
</head>
14 
<body class="pages-welcome-auth">
14 
<body class="pages-welcome-phone-auth">
15 15
16 16 
<div class="welcome-img">
17 17 
  <div class="center-img"></div>

+ 52 - 0
2021/ng-srb/welcome-phone-check.html
Bestand weergeven 

@ -0,0 +1,52 @@
1 
<!DOCTYPE html>
2 
<html>
3 
<head>
4 
  <title>模板页面</title>
5 
  <meta charset="utf-8">
6 
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
7 
  <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
8 
  <link rel="stylesheet" type="text/css" href="biz/css/base.css">
9
10 
  <script src="ipu/lib/requirejs/require.js"></script>
11 
  <script src="biz/js/require-config.js"></script>
12 
  <script src="biz/js/pages/welcome-phone-check.js"></script>
13 
</head>
14 
<body class="pages-welcome-phone-check">
15
16 
<div class="welcome-img">
17 
  <div class="center-img"></div>
18 
  <div class="logo-img"></div>
19 
  <div class="bottom-img"></div>
20 
</div>
21
22 
<div class="welcome-auth-content">
23 
  <div class="dailog-login-block">
24 
    <div class="dailog-login-title">
25 
      手机号码验证
26 
    </div>
27 
    <div class="dialog-login-input-rows">
28 
      <div class="dialog-login-input-row">
29 
        <input type="text" class="dialog-login-input" placeholder="请输入手机号">
30 
      </div>
31 
      <div class="dialog-login-input-row ipu-flex">
32 
        <div class="dialog-login-input-wrap ipu-flex-grow-1">
33 
          <input type="text" class="dialog-login-input" placeholder="请输入验证码">
34 
        </div>
35 
        <div class="dialog-send-code ipu-flex-grow-0">获取验证码</div>
36 
      </div>
37 
    </div>
38 
    <div class="ipu-flex welcome-auth-buttons">
39 
      <div class="ipu-flex-grow-1 btn-wrap">
40 
        <button class="btn">退出</button>
41 
      </div>
42 
      <div class="ipu-flex-grow-1 btn-wrap">
43 
        <button class="btn to-change-phone">确定</button>
44 
      </div>
45 
    </div>
46 
  </div>
47
48 
</div>
49
50
51 
</body>
52 
</html>

+ 40 - 0
2021/ng-srb/welcome-phone-input.html
Bestand weergeven 

@ -0,0 +1,40 @@
1 
<!DOCTYPE html>
2 
<html>
3 
<head>
4 
  <title>手机号验证</title>
5 
  <meta charset="utf-8">
6 
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
7 
  <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
8 
  <link rel="stylesheet" type="text/css" href="biz/css/base.css">
9
10 
  <script src="ipu/lib/requirejs/require.js"></script>
11 
  <script src="biz/js/require-config.js"></script>
12 
</head>
13 
<body class="pages-welcome-phone-input">
14
15 
<div class="welcome-img">
16 
  <div class="center-img"></div>
17 
  <div class="logo-img"></div>
18 
  <div class="bottom-img"></div>
19 
</div>
20
21 
<div class="welcome-auth-content">
22 
  <div class="dailog-login-block">
23 
    <div class="dailog-login-title">
24 
      请输4A账号对应的手机号码
25 
    </div>
26 
    <div class="dialog-login-input-rows">
27 
      <div class="dialog-login-input-row">
28 
        <input type="text" class="dialog-login-input" placeholder="在此输入手机号码">
29 
      </div>
30 
    </div>
31 
    <div class="ipu-flex welcome-auth-buttons">
32 
        <button class="btn phone-input-btn">确定</button>
33 
    </div>
34 
  </div>
35
36 
</div>
37
38
39 
</body>
40 
</html>