Página Inicial Explorar Ajuda
Entrar
asiainfo
/
static
Observar 2
Favorito 0
Fork 0
Código Problemas 0 Pull Requests 0 Commits 862 Versões 4 Wiki
Ver Código Fonte

号码归属地查询页面

zengqiao 5 anos atrás
pai
5390be6db7
commit
1ccd07bbdf
5 arquivos alterados com 158 adições e 3 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 51 1
      2019/scaffold-project-demo/biz/css/base.css
  2. 22 0
      2019/scaffold-project-demo/biz/js/phone-search.js
  3. 83 0
      2019/scaffold-project-demo/phone-search.html
  4. 1 1
      2019/scaffold-project-demo/zfk-account-result.html
  5. 1 1
      2019/scaffold-project-demo/zfk-main.html

+ 51 - 1
2019/scaffold-project-demo/biz/css/base.css
Ver Arquivo 

@ -157,7 +157,7 @@ a {
157 157 
}
158 158
159 159 
.user-query {
160 
    background: linear-gradient(#0F76FD 100%, #0F76FD 100%) center top no-repeat;
160 
    background: linear-gradient(#474747 100%, #474747 100%) center top no-repeat;
161 161 
    background-size: 100% .45rem;
162 162 
    margin-bottom: .1rem;
163 163 
}
 
@ -1585,4 +1585,54 @@ a {
1585 1585 
    padding: .08rem 0;
1586 1586 
    font-size: .14rem;
1587 1587 
    line-height: 1.5;
1588 
}
1589
1590 
.search-result-info{
1591 
    margin: .3rem .16rem 0;
1592 
    background: #fff;
1593 
    box-shadow: 0 .05rem .1rem 0 rgba(0, 0, 0, 0.07);
1594 
    border-radius: .09rem;
1595 
    padding-bottom: .2rem;
1596 
}
1597
1598 
.search-result-title{
1599 
    height: .515rem;
1600 
    background-color: #F18C38;
1601 
    border-top-left-radius: .09rem;
1602 
    border-top-right-radius: .09rem;
1603 
}
1604
1605 
.search-result-title .info-title{
1606 
    margin-top: .16rem;
1607 
    text-align: center;
1608 
    font-size: .14rem;
1609 
    font-weight: 600;
1610 
    color: rgba(40,45,59,1);
1611 
    line-height: .2rem;
1612 
}
1613
1614 
.result-item{
1615 
    height: .4rem;
1616 
    margin-left: .16rem;
1617 
    margin-right: .16rem;
1618 
}
1619
1620 
.result-item .item-name{
1621 
    font-size: .12rem;
1622 
    font-weight:400;
1623 
    color:rgba(66,80,92,1);
1624 
    line-height: .39rem;
1625 
    margin-left: .06rem;
1626 
}
1627
1628 
.result-item .item-state{
1629 
    font-size: .12rem;
1630 
    font-weight:500;
1631 
    color:rgba(40,45,59,1);
1632 
    line-height: .39rem;
1633 
    margin-right: .06rem;
1634 
}
1635
1636 
.info-background-gray{
1637 
    background-color: rgba(242,244,247,1);
1588 1638 
}

+ 22 - 0
2019/scaffold-project-demo/biz/js/phone-search.js
Ver Arquivo 

@ -0,0 +1,22 @@
1 
require(['jquery', 'ipuUI'], function ($, ipuUI) {
2 
  $(function () {
3 
    //用户信息查询输入框变更事件
4 
    $(".user-query-input").change(function () {
5 
      $(this).toggleClass("input-value", $(this).val() != '');
6 
    });
7
8 
    // 查询用户
9 
    $(".btn-user-query").click(function () {
10 
      var queryCustomerStr = $(".user-query-input").val().trim();
11 
      if (queryCustomerStr == null || queryCustomerStr == "") {
12 
        ipuUI.alert("糟糕，你输入了什么", "糟糕", null);
13 
        return;
14 
      }else{
15 
        $(".search-result-info").removeClass("ipu-fn-hide");
16 
        $(".user-query-input").val("");
17 
        $(".user-query-input").removeClass("input-value");
18 
      }
19
20 
    });
21 
  });
22 
});

+ 83 - 0
2019/scaffold-project-demo/phone-search.html
Ver Arquivo 

@ -0,0 +1,83 @@
1 
<!doctype html>
2 
<html>
3 
<head>
4 
  <title>号码归属地查询</title>
5 
  <meta charset="utf-8">
6 
  <!-- 宽度自动适配 -->
7 
  <meta name="viewport"
8 
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"/>
9 
  <!-- 不识别页面上的数字为可拨打号码 -->
10 
  <meta content="telephone=no" name="format-detection"/>
11 
  <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
12 
  <link rel="stylesheet" type="text/css" href="biz/css/iconfont/iconfont.css">
13 
  <link rel="stylesheet" type="text/css" href="biz/css/mdi/css/mdi.css">
14 
  <link rel="stylesheet" type="text/css" href="biz/css/base.css">
15
16 
  <script src="ipu/lib/requirejs/require.min.js"></script>
17 
  <script src="biz/js/require-config.js"></script>
18 
  <script src="biz/js/phone-search.js"></script>
19 
</head>
20 
<body class="pages-phone-search">
21
22 
<div class="ipu-flex-row ipu-flex-vertical">
23 
  <div class="ipu-flex-col-auto">
24 
    <div class="ipu-toolbar">
25 
      <div class="ipu-flex-col">
26 
        <header class="ipu-toolbar">
27 
          <a class="ipu-fn-left link-back" href="javascript:;" id="back">
28 
            <i class="app-icon icon-chevron-left"></i>返回
29 
          </a>
30 
          <h1 class="ipu-toolbar-title">号码归属地查询</h1>
31 
        </header>
32 
      </div>
33 
    </div>
34 
    <div class="user-query">
35 
      <div class="user-query-content">
36 
        <div class="history-user-list">
37 
          <!--<span class="history-user">-->
38 
          <!--13932514267-->
39 
          <!--</span>-->
40 
        </div>
41 
        <div class="input-wrap">
42 
          <input type="text" class="user-query-input" placeholder="请输入手机号码"/>
43 
          <i class="app-icon icon-magnify app-icon-query"></i>
44 
          <button class="ipu-btn common-btn btn-user-query">
45 
            立即查询
46 
          </button>
47 
        </div>
48 
      </div>
49 
    </div>
50
51 
    <div class="ipu-flex-col search-result-info ipu-fn-hide">
52 
      <div class="ipu-flex search-result-title">
53 
        <div class="ipu-flex-col-auto info-title">查询结果</div>
54 
      </div>
55 
      <div class="ipu-flex result-item">
56 
        <div class="ipu-flex-col-auto item-name">电话号码：</div>
57 
        <div class="ipu-flex-col item-state">13635190851</div>
58 
      </div>
59 
      <div class="search-result-success">
60 
      <div class="ipu-flex result-item info-background-gray">
61 
        <div class="ipu-flex-col-auto item-name">省份：</div>
62 
        <div class="ipu-flex-col item-state">上海</div>
63 
      </div>
64 
      <div class="ipu-flex result-item">
65 
        <div class="ipu-flex-col-auto item-name">城市：</div>
66 
        <div class="ipu-flex-col item-state">上海</div>
67 
      </div>
68 
      <div class="ipu-flex result-item info-background-gray">
69 
        <div class="ipu-flex-col-auto item-name">运营商：</div>
70 
        <div class="ipu-flex-col item-state">中国移动</div>
71 
      </div>
72 
      </div>
73 
      <div class="ipu-flex result-item info-background-gray ipu-fn-hide" id="search-result-null">
74 
        <div class="ipu-flex-col-auto item-name">没有查询到该号码的相关信息</div>
75 
        <div class="ipu-flex-col item-state"></div>
76 
      </div>
77 
    </div>
78
79 
  </div>
80 
</div>
81 
</body>
82
83 
</html>

+ 1 - 1
2019/scaffold-project-demo/zfk-account-result.html
Ver Arquivo 

@ -1,8 +1,8 @@
1 1 
<!doctype html>
2 2 
<html>
3 3 
<head>
4 
  <title>开户结果</title>
4 5 
  <meta charset="utf-8">
5 
  <title>主副卡-主卡开户-结果</title>
6 6 
  <!-- 宽度自动适配 -->
7 7 
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"/>
8 8 
  <!-- 不识别页面上的数字为可拨打号码 -->

+ 1 - 1
2019/scaffold-project-demo/zfk-main.html
Ver Arquivo 

@ -1,8 +1,8 @@
1 1 
<!doctype html>
2 2 
<html>
3 3 
<head>
4 
  <title>开户流程</title>
4 5 
  <meta charset="utf-8">
5 
  <title>主副卡-主界面</title>
6 6 
  <!-- 宽度自动适配 -->
7 7 
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"/>
8 8 
  <!-- 不识别页面上的数字为可拨打号码 -->