webfront / fupai · 提交

转到一个项目

作者 吴孟雨
提交 b49982a7cd6898d52ed41e183a554c108a3e586a 0 个父辈

init

内嵌 并排对比
正在显示 35 个修改的文件 包含 1540 行增加 和 0 行删除
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6 + <title>我的福牌</title>
  7 + <script src="js/jquery-2.1.0.js"></script>
  8 + <script src="js/fontsize.js"></script>
  9 + <link href="css/blessing.css" rel="stylesheet">
  10 +</head>
  11 +<body>
  12 + <div class="content">
  13 + <div class="cards-list">
  14 + <div class="item" onclick="enter()">
  15 + <image src="./images/bpic01@2x.png" class="img"></image>
  16 + <div class="right">
  17 + <div class="name">天津大悲院</div>
  18 + <div class="author">萧何</div>
  19 + <div class="time">2018年10月16日-2019年10月16日</div>
  20 + </div>
  21 + </div>
  22 + <div class="item" onclick="enter()">
  23 + <image src="./images/bpic01@2x.png" class="img"></image>
  24 + <div class="right">
  25 + <div class="name">天津大悲院</div>
  26 + <div class="author">萧何</div>
  27 + <div class="time">2018年10月16日-2019年10月16日</div>
  28 + </div>
  29 + </div>
  30 + </div>
  31 + </div>
  32 +</body>
  33 +<script>
  34 + function enter() {
  35 + window.location.href='./cards-detail.html';
  36 + }
  37 +</script>
  38 +</html>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6 + <title>我的福牌</title>
  7 + <script src="js/jquery-2.1.0.js"></script>
  8 + <script src="js/fontsize.js"></script>
  9 + <link href="css/cards.css" rel="stylesheet">
  10 +</head>
  11 +<body>
  12 + <div class="content">
  13 + <div class="head">
  14 + <div class="border-line">
  15 + <div class="order-num">编号:201807122659</div>
  16 + </div>
  17 + <div class="center">
  18 + <div class="author">萧何</div>
  19 + <div class="area">武财神内区 3行-6列</div>
  20 + <div class="term">预定为固定期限1年</div>
  21 + <div class="term-of-validity">2018年10月16日-2019年10月16日</div>
  22 + </div>
  23 + <div class="renew-box">
  24 + <div class="renew-btn">续费</div>
  25 + </div>
  26 + </div>
  27 + <div class="bottom">
  28 + <div class="border-box">
  29 + <div class="name">福牌信息</div>
  30 + <div class="edit" onclick="enter()">
  31 + <div class="name-info">信息有误，要修改</div>
  32 + <image src="./images/bicon03@2x.png" class="arrow"></image>
  33 + </div>
  34 + </div>
  35 + </div>
  36 + <div class="personal-info">
  37 + <div class="top">
  38 + <image src="./images/head01@2x.png" class="avatar"></image>
  39 + <div class="detail">
  40 + <div class="support">奉养人:萧何</div>
  41 + <div class="blessing">祈祷语:祝你平平安安，幸福健康</div>
  42 + </div>
  43 + </div>
  44 + <div class="img-box">
  45 + <image src="./images/bicon02@2x.png" class="image"></image>
  46 + </div>
  47 + </div>
  48 + </div>
  49 +</body>
  50 +<script>
  51 + function enter() {
  52 + window.location.href='./edit.html';
  53 + }
  54 +</script>
  55 +</html>
  1 +body, html{
  2 + margin: 0;
  3 + padding: 0;
  4 + background-color: #f5f6fa;
  5 +}
  6 +.content {
  7 +
  8 +}
  9 +.head {
  10 + width: 100%;
  11 + background-color: #fff;
  12 + padding: 0.38rem 1.77rem 0.58rem 1.77rem;
  13 + -webkit-box-sizing: border-box;
  14 + -moz-box-sizing: border-box;
  15 + box-sizing: border-box;
  16 + display: flex;
  17 + align-items: center;
  18 + justify-content: center;
  19 + margin-bottom: 0.24rem;
  20 +}
  21 +.center {
  22 + display: flex;
  23 + flex-direction: column;
  24 + justify-content: space-between;
  25 + text-align: center;
  26 +}
  27 +.area {
  28 + color: #000000;
  29 + font-size: 0.36rem;
  30 + font-weight: bold;
  31 + margin-bottom: 0.31rem;
  32 +}
  33 +.btn {
  34 + display: flex;
  35 + justify-content: center;
  36 + align-items: center;
  37 + text-align: center;
  38 + margin-bottom: 0.36rem;
  39 +}
  40 +.seat-num {
  41 + /*width: 1.8rem;*/
  42 + height: 0.72rem;
  43 + line-height: 0.72rem;
  44 + /*border: 1px solid #DD3E34;*/
  45 + border-radius: 0.36rem;
  46 + color: #DD3E34;
  47 + background-color: #fff;
  48 + font-size: 0.24rem;
  49 + /*margin-right: 0.36rem;*/
  50 +}
  51 +.reset {
  52 + width: 1.8rem;
  53 + height: 0.72rem;
  54 + line-height: 0.72rem;
  55 + background-color: #DD3E34;
  56 + color: #ffffff;
  57 + border-radius: 0.36rem;
  58 + font-size: 0.3rem;
  59 + box-shadow: 0 0.15rem 0.25rem 0 #F8CDCA;
  60 + background: -webkit-linear-gradient(left, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Safari 5.1 - 6.0 */
  61 + background: -o-linear-gradient(right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Opera 11.1 - 12.0 */
  62 + background: -moz-linear-gradient(right,RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Firefox 3.6 - 15 */
  63 + background: linear-gradient(to right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1) ); /* 标准的语法 */
  64 +}
  65 +.tips {
  66 + color: #979DA8;
  67 + font-size: 0.24rem;
  68 +}
  69 +.seat-list {
  70 +}
  71 +.list-item {
  72 + /*padding: 0 0.32rem;*/
  73 + -webkit-box-sizing: border-box;
  74 + -moz-box-sizing: border-box;
  75 + box-sizing: border-box;
  76 + background-color: #fff;
  77 + margin-bottom: 0.16rem;
  78 +}
  79 +.line-num {
  80 + font-weight: bold;
  81 + font-size: 0.26rem;
  82 + color: #292525;
  83 + height: 0.6rem;
  84 + line-height: 0.6rem;
  85 + padding: 0 0.32rem;
  86 + border-bottom: 1px solid #EBEBEB;
  87 +}
  88 +.column-list {
  89 + display: flex;
  90 + justify-content: space-between;
  91 + display: -webkit-box;
  92 + overflow-x: scroll;
  93 + -webkit-overflow-scrolling:touch;
  94 + padding: 0.16rem 0.32rem 0.21rem 0.32rem;
  95 + -webkit-box-sizing: border-box;
  96 + -moz-box-sizing: border-box;
  97 + box-sizing: border-box;
  98 +}
  99 +.item {
  100 + display: flex;
  101 + flex-direction: column;
  102 + align-items:center;
  103 + justify-content: center;
  104 + margin-right: 0.08rem;
  105 + position: relative;
  106 +}
  107 +.column-list .item:last-child {
  108 + padding-right: 0.32rem;
  109 +}
  110 +.img {
  111 + width: 1.16rem;
  112 + height: 1.7rem;
  113 + margin-bottom: 0.1rem;
  114 +}
  115 +.column-num {
  116 + font-size: 0.24rem;
  117 + color: #000000;
  118 +}
  119 +.modal {
  120 + width: 1.16rem;
  121 + height: 1.7rem;
  122 + background-color: #000000;
  123 + opacity: 0.5;
  124 + /*display: none;*/
  125 + position: absolute;
  126 + top: 0;
  127 + left: 0;
  128 +}
  1 +body, html{
  2 + margin: 0;
  3 + padding: 0;
  4 +}
  5 +.content {
  6 + width: 100%;
  7 +}
  8 +.cards-list {
  9 + width: 100%;
  10 + display: flex;
  11 + flex-direction:column;
  12 + padding: 0 0.32rem;
  13 + -webkit-box-sizing: border-box;
  14 + -moz-box-sizing: border-box;
  15 + box-sizing: border-box;
  16 +}
  17 +.item {
  18 + width: 100%;
  19 + padding: 0.36rem 0;
  20 + display: flex;
  21 + align-items: center;
  22 + justify-content: space-between;
  23 +}
  24 +.right {
  25 + display: flex;
  26 + flex-direction: column;
  27 + flex:1;
  28 + margin-left: 0.32rem;
  29 +}
  30 +.item .img {
  31 + width: 1.8rem;
  32 + height: 1.8rem;
  33 +}
  34 +.name {
  35 + color: #000000;
  36 + font-size: 0.32rem;
  37 + margin-bottom: 0.3rem;
  38 +}
  39 +.author {
  40 + color: #666666;
  41 + font-size: 0.26rem;
  42 + margin-bottom: 0.29rem;
  43 +}
  44 +.time {
  45 + color:#53555C;
  46 + font-size: 0.24rem;
  47 +}
  1 +body, html{
  2 + margin: 0;
  3 + padding: 0;
  4 +}
  5 +.content {
  6 + background-color: #f5f6fa;
  7 +}
  8 +.head {
  9 + background-color: #fff;
  10 +}
  11 +.border-line {
  12 + padding: 0.32rem 0.43rem;
  13 + -webkit-box-sizing: border-box;
  14 + -moz-box-sizing: border-box;
  15 + box-sizing: border-box;
  16 + border-bottom: 1px solid #ebebeb;
  17 +}
  18 +.order-num {
  19 + font-size: 0.26rem;
  20 + color: #1A1A1A;
  21 +}
  22 +.center {
  23 + display: flex;
  24 + flex-direction: column;
  25 + justify-content: space-between;
  26 + padding: 0.36rem 0.42rem;
  27 + -webkit-box-sizing: border-box;
  28 + -moz-box-sizing: border-box;
  29 + box-sizing: border-box;
  30 + border-bottom: 1px solid #ebebeb;
  31 +}
  32 +.author {
  33 + font-size: 0.26rem;
  34 + color: #1A1A1A;
  35 + font-weight: bold;
  36 + margin-bottom: 0.23rem;
  37 +}
  38 +.area{
  39 + color: #000000;
  40 + font-size: 0.28rem;
  41 + font-weight: bold;
  42 + margin-bottom: 0.23rem;
  43 +}
  44 +.term, .term-of-validity{
  45 + color: #53555C;
  46 + font-size: 0.26rem;
  47 + margin-bottom: 0.23rem;
  48 +}
  49 +.term-of-validity {
  50 + margin-bottom: 0;
  51 +}
  52 +.renew-box {
  53 + width: 100%;
  54 + height: 1.08rem;
  55 + padding: 0.24rem 0.32rem;
  56 + -webkit-box-sizing: border-box;
  57 + -moz-box-sizing: border-box;
  58 + box-sizing: border-box;
  59 + display: flex;
  60 + align-items: center;
  61 + justify-content: flex-end;
  62 + margin-bottom: 0.16rem;
  63 +}
  64 +.renew-btn {
  65 + width: 1.8rem;
  66 + height: 0.6rem;
  67 + line-height: 0.6rem;
  68 + text-align: center;
  69 + background-color: #E04338;
  70 + color: #ffffff;
  71 + font-size: 0.26rem;
  72 + border-radius: 0.3rem;
  73 +}
  74 +.bottom {
  75 + background-color: #fff;
  76 + padding: 0.31rem 0.37rem 0.32rem 0.37rem;
  77 + -webkit-box-sizing: border-box;
  78 + -moz-box-sizing: border-box;
  79 + box-sizing: border-box;
  80 + border-bottom: 1px solid #EBEBEB;
  81 +}
  82 +.border-box {
  83 + display: flex;
  84 + align-items: center;
  85 + justify-content: space-between;
  86 +}
  87 +.avatar-img {
  88 + width: 0.84rem;
  89 + height: 0.84rem;
  90 +}
  91 +.edit {
  92 + display: flex;
  93 + align-items: center;
  94 + justify-content: space-between;
  95 + color: #666666;
  96 + font-size: 0.26rem;
  97 +}
  98 +.arrow {
  99 + margin-left: 0.16rem;
  100 + width: 0.16rem;
  101 + height: 0.28rem;
  102 +}
  103 +.name {
  104 + font-size: 0.3rem;
  105 + color: #000000;
  106 + font-weight: bold;
  107 +}
  108 +.personal-info {
  109 + width: 100%;
  110 + padding: 0.24rem 0.32rem;
  111 + -webkit-box-sizing: border-box;
  112 + -moz-box-sizing: border-box;
  113 + box-sizing: border-box;
  114 + background-color: #fff;
  115 +}
  116 +.top {
  117 + display: flex;
  118 + align-items: center;
  119 +}
  120 +.avatar {
  121 + width: 0.99rem;
  122 + height: 0.99rem;
  123 + border-radius: 50%;
  124 +}
  125 +.detail {
  126 + display: flex;
  127 + flex:1;
  128 + flex-direction: column;
  129 + justify-content: space-between;
  130 + margin-left: 0.25rem;
  131 +}
  132 +.support, .blessing {
  133 + font-size: 0.28rem;
  134 + color: #000000;
  135 +}
  136 +.support {
  137 + margin-bottom: 0.23rem;
  138 +}
  139 +.img-box {
  140 + margin-top: 0.31rem;
  141 + text-align: center;
  142 +}
  143 +.image {
  144 + width: 3.12rem;
  145 + height: 4.55rem;
  146 +}
  147 +.name-info {
  148 + text-align: right;
  149 +}
  1 +body, html{
  2 + margin: 0;
  3 + padding: 0;
  4 +}
  5 +.content {
  6 + /*width: 7.5rem;*/
  7 + /*height: 12.06rem;*/
  8 + width: 100%;
  9 + height: 100%;
  10 + background-image: url('../images/bbg01@2x.png');
  11 + background-repeat: no-repeat;
  12 + background-position:center;
  13 + -webkit-background-size: 100% 100%;
  14 + background-size: 100% 100%;
  15 + position: fixed;
  16 +}
  17 +.head {
  18 + padding: 0.81rem 1.69rem;
  19 + -webkit-box-sizing: border-box;
  20 + -moz-box-sizing: border-box;
  21 + box-sizing: border-box;
  22 + color: #000000;
  23 + text-align: center;
  24 +}
  25 +.title {
  26 + font-size: 0.36rem;
  27 + margin-bottom: 0.16rem;
  28 + font-weight: bold;
  29 +}
  30 +.tips {
  31 + font-size: 0.28rem;
  32 + font-weight: bold;
  33 +}
  34 +.swiper-list {
  35 + padding: 0 0.32rem;
  36 + -webkit-box-sizing: border-box;
  37 + -moz-box-sizing: border-box;
  38 + box-sizing: border-box;
  39 + display: flex;
  40 + display: -webkit-box;
  41 + overflow-x: scroll;
  42 + -webkit-overflow-scrolling:touch;
  43 +}
  44 +.swiper-item {
  45 + width: 1.2rem;
  46 + height: 7.11rem;
  47 + background-image: url('../images/bele01@2x.png');
  48 + background-repeat: no-repeat;
  49 + background-position:center;
  50 + -webkit-background-size: 100% 100%;
  51 + background-size: 100% 100%;
  52 + /*position: fixed;*/
  53 + color: #6A3706;
  54 + font-size: 0.64rem;
  55 + text-align: center;
  56 + display: flex;
  57 + flex-direction: column;
  58 + justify-content: space-around;
  59 + position: relative;
  60 +}
  61 +.name {
  62 + /*margin-top: 1.77rem;*/
  63 +}
  64 +.number {
  65 + font-size: 0.36rem;
  66 + position: absolute;
  67 + bottom: 0.42rem;
  68 + left: 0.34rem;
  69 + /*margin-bottom: 0.42rem;*/
  70 +}
  1 +body, html{
  2 + margin: 0;
  3 + padding: 0;
  4 +}
  5 +.btn {
  6 + background-color: #DD3E34;
  7 + border-radius: 0.36rem;
  8 +
  9 +}
  10 +.btn .reset {
  11 + width: 100%;
  12 +}
  13 +.name-info {
  14 + border: none;
  15 + line-height: 1rem;
  16 + width: 100%;
  17 + font-size: 0.26rem;
  18 + text-align: right;
  19 + outline: none;
  20 +}
  21 +.edit-box {
  22 + flex: 1;
  23 + text-align: right;
  24 + display: flex;
  25 + justify-content: flex-end;
  26 + align-items: center;
  27 + height: 1rem;
  28 +}
  1 +body, html {
  2 + margin: 0;
  3 + padding: 0;
  4 + background-color: #f5f6fa;
  5 +
  6 +}
  7 +
  8 +.head {
  9 + width: 100%;
  10 + height: 0.88rem;
  11 + display: flex;
  12 + align-items: center;
  13 + justify-content: space-between;
  14 + padding: 0 0.32rem;
  15 + -webkit-box-sizing: border-box;
  16 + -moz-box-sizing: border-box;
  17 + box-sizing: border-box;
  18 + background-color: #fff;
  19 +}
  20 +
  21 +.city {
  22 + /*width: 20%;*/
  23 + position: relative;
  24 + margin-right: 0.34rem;
  25 + display: flex;
  26 + align-items: baseline;
  27 +}
  28 +
  29 +.city div {
  30 + color: #292625;
  31 + font-size: 0.26rem;
  32 + line-height: 0.88rem;
  33 + margin-right: 0.1rem;
  34 +}
  35 +
  36 +.city_name {
  37 + position: relative;
  38 +}
  39 +
  40 +.city img {
  41 + width: 0.1rem;
  42 + height: 0.1rem;
  43 + position: absolute;
  44 + right: -0.2rem;
  45 + bottom: 0.3rem;
  46 +}
  47 +
  48 +.input-box {
  49 + flex: 1;
  50 + height: 0.64rem;
  51 + display: flex;
  52 + align-items: center;
  53 + justify-content: space-between;
  54 + background-color: #FAFAFA;
  55 + border-radius: 0.32rem;
  56 + font-size: 0.26rem;
  57 + padding: 0 0.31rem;
  58 +}
  59 +
  60 +.input-box input {
  61 + border: none;
  62 + outline: none;
  63 + font-size: 0.26rem;
  64 + background-color: #FAFAFA;
  65 + /*padding: 0 0.31rem;*/
  66 +}
  67 +
  68 +.icon {
  69 + width: 0.33rem;
  70 + height: 0.33rem;
  71 +}
  72 +
  73 +.section {
  74 + margin-top: 0.16rem;
  75 + display: flex;
  76 + justify-content: space-between;
  77 + flex-wrap: wrap;
  78 +}
  79 +
  80 +.list-item {
  81 + padding: 0.28rem 0.4rem 0.26rem 0.32rem;
  82 + -webkit-box-sizing: border-box;
  83 + -moz-box-sizing: border-box;
  84 + box-sizing: border-box;
  85 + background-color: #fff;
  86 + display: flex;
  87 + flex-direction: column;
  88 + position: relative;
  89 + margin-bottom: 0.07rem;
  90 +}
  91 +
  92 +.list-item .img {
  93 + width: 3rem;
  94 + height: 3.02rem;
  95 +}
  96 +
  97 +.list-item .name {
  98 + color: #000000;
  99 + font-size: 0.28rem;
  100 + margin-bottom:0.18rem;
  101 +}
  102 +
  103 +.people-num {
  104 + font-size: 0.25rem;
  105 + color: #666666;
  106 +}
  107 +
  108 +.people-num span {
  109 + color: #FF0000;
  110 + font-size: 0.32rem;
  111 +}
  112 +
  113 +.enter {
  114 + width: 1rem;
  115 + height: 0.5rem;
  116 + color: #ffffff;
  117 + font-size: 0.28rem;
  118 + background-color: #9D0A00;
  119 + border-radius: 0.25rem;
  120 + text-align: center;
  121 + position: absolute;
  122 + right: 0.2rem;
  123 + bottom: 0.4rem;
  124 + display: flex;
  125 + align-items: center;
  126 + justify-content: center;
  127 +}
  1 +body, html {
  2 + margin: 0;
  3 + padding: 0;
  4 +}
  5 +
  6 +.content {
  7 + /*width: 7.5rem;*/
  8 + /*height: 12.06rem;*/
  9 + width: 100%;
  10 + height: 100%;
  11 + background-image: url('../images/abg01@2x.png');
  12 + background-repeat: no-repeat;
  13 + background-position: center;
  14 + -webkit-background-size: 100% 100%;
  15 + background-size: 100% 100%;
  16 + position: fixed;
  17 +}
  18 +
  19 +.input-box {
  20 + display: flex;
  21 + flex-direction: column;
  22 + align-items: center;
  23 + padding-top: 3.6rem;
  24 +}
  25 +
  26 +.top-input, .bottom-input {
  27 + width: 100%;
  28 + /*height: 4rem;*/
  29 + padding: 0 1.15rem;
  30 + -webkit-box-sizing: border-box;
  31 + -moz-box-sizing: border-box;
  32 + box-sizing: border-box;
  33 + margin-bottom: 0.8rem;
  34 +}
  35 +
  36 +.phone-icon {
  37 + width: 0.24rem;
  38 + height: 0.35rem;
  39 + margin-right: 0.26rem;
  40 +}
  41 +
  42 +.code-icon {
  43 + width: 0.32rem;
  44 + height: 0.34rem;
  45 + margin-right: 0.26rem;
  46 +}
  47 +
  48 +.phone-input, .code-input {
  49 + border: none;
  50 + width: 5.2rem;
  51 + height: 1rem;
  52 + font-size: 0.28rem;
  53 + background-color: transparent;
  54 + outline: none;
  55 +}
  56 +
  57 +.input-code-box {
  58 + display: flex;
  59 + align-items: center;
  60 +}
  61 +
  62 +.code-input {
  63 + /*width: 20%;*/
  64 + width: 2rem;
  65 +}
  66 +
  67 +.border-line-box, .border-line-box2 {
  68 + border-bottom: 1px solid #DEDEDE;
  69 + display: flex;
  70 + align-items: center;
  71 + justify-content: space-between;
  72 +}
  73 +
  74 +.getCode {
  75 + border: none;
  76 + background: none;
  77 + font-size: 0.24rem;
  78 + color: #FE0A01;
  79 + outline: none;
  80 +}
  81 +
  82 +.next-btn {
  83 + width: 100%;
  84 + height: 0.88rem;
  85 + padding: 2.08rem 1.95rem;
  86 + -webkit-box-sizing: border-box;
  87 + -moz-box-sizing: border-box;
  88 + box-sizing: border-box;
  89 + display: flex;
  90 + align-items: center;
  91 + justify-content: center;
  92 + text-align: center;
  93 +}
  94 +
  95 +.next {
  96 + width: 3.6rem;
  97 + line-height: 0.88rem;
  98 + font-size: 0.32rem;
  99 + color: #ffffff;
  100 + border-radius: 0.44rem;
  101 + border: none;
  102 + /*box-shadow: 0.15rem 0.15rem 5 #FE0A01;*/
  103 + /*box-shadow: 2px 26px 40px #F8CDCA;*/
  104 + box-shadow: 0 0.15rem 0.25rem 0 #F8CDCA;
  105 + background: -webkit-linear-gradient(left, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Safari 5.1 - 6.0 */
  106 + background: -o-linear-gradient(right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Opera 11.1 - 12.0 */
  107 + background: -moz-linear-gradient(right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Firefox 3.6 - 15 */
  108 + background: linear-gradient(to right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* 标准的语法 */
  109 +}
  1 +body, html{
  2 + margin: 0;
  3 + padding: 0;
  4 + background: #fff;
  5 + overflow: hidden;
  6 +}
  7 +.content {
  8 + width: 100%;
  9 + height: 100%;
  10 +}
  11 +.name-box, .age-box, .sex-box, .family-box{
  12 + width: 100%;
  13 + height: 1rem;
  14 + display: flex;
  15 + align-items: center;
  16 + font-size: 0.3rem;
  17 + color: #000000;
  18 + margin-bottom: 0.3rem;
  19 + padding: 0 0.33rem;
  20 +}
  21 +.family-box{
  22 + margin-bottom: 3.5rem;
  23 +}
  24 +.name-box input, .age-box input, .sex-box input, .family-box input {
  25 + border: none;
  26 + font-size: 0.28rem;
  27 + color: #1A1A1A;
  28 + line-height: 1rem;
  29 + outline: none;
  30 + background: none;
  31 +}
  32 +.input-box {
  33 + width: 100%;
  34 + display: flex;
  35 + align-items: center;
  36 + border-bottom: 1px solid #ebebeb;
  37 +}
  38 +.input-box text {
  39 + margin-right: 0.36rem;
  40 +}
  41 +.man, .women {
  42 + /*padding: 0.17rem 0.46rem;*/
  43 + width: 1.18rem;
  44 + height: 0.6rem;
  45 + background-color: #fff;
  46 + border: 1px solid #DD3D32;
  47 + border-radius: 0.3rem;
  48 + color: #DD3D32;
  49 + margin-right: 0.24rem;
  50 + text-align: center;
  51 + font-size: 0.28rem;
  52 + display: flex;
  53 + align-items: center;
  54 + justify-content: center;
  55 +}
  56 +.sex-box {
  57 + border-bottom: 0.16rem solid #fcfbfa;
  58 +}
  59 +.sex-box .input-box {
  60 + border-bottom: 0;
  61 +}
  62 +.family-box {
  63 + height: 2rem;
  64 + display: flex;
  65 + flex-direction: column;
  66 + align-items: flex-start;
  67 +}
  68 +.family-box .input-box {
  69 + height: 1rem;
  70 +}
  71 +.family-box .input-box text {
  72 + line-height: 1rem;
  73 +}
  74 +.family-box input {
  75 + height: 1rem;
  76 +}
  77 +.address-input .input{
  78 + width: 7rem;
  79 +}
  80 +.footer {
  81 + width: 100%;
  82 + height: 0.88rem;
  83 + padding: 0 0.32rem;
  84 + -webkit-box-sizing: border-box;
  85 + -moz-box-sizing: border-box;
  86 + box-sizing: border-box;
  87 + /*position: fixed;*/
  88 + /*bottom: 0.32rem;*/
  89 + /*left: 0;*/
  90 +}
  91 +.confirm-btn {
  92 + width: 100%;
  93 + line-height: 0.88rem;
  94 + text-align: center;
  95 + color: #ffffff;
  96 + font-size: 0.32rem;
  97 + border-radius: 0.44rem;
  98 + box-shadow: 0 0.15rem 0.3rem 0 #F8CDCA;
  99 + background: -webkit-linear-gradient(left, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Safari 5.1 - 6.0 */
  100 + background: -o-linear-gradient(right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Opera 11.1 - 12.0 */
  101 + background: -moz-linear-gradient(right,RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Firefox 3.6 - 15 */
  102 + background: linear-gradient(to right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1) ); /* 标准的语法 */
  103 +}
  104 +.active{
  105 + background: #DD3D32;
  106 + color: #fff;
  107 +}
  1 +body, html{
  2 + margin: 0;
  3 + padding: 0;
  4 +}
  5 +.head {
  6 + width: 100%;
  7 + background-color: #fff;
  8 + padding: 0.38rem 1.36rem 0.4rem 1.36rem;
  9 + -webkit-box-sizing: border-box;
  10 + -moz-box-sizing: border-box;
  11 + box-sizing: border-box;
  12 + display: flex;
  13 + align-items: center;
  14 + justify-content: center;
  15 + margin-bottom: 0.16rem;
  16 +}
  17 +.center {
  18 + display: flex;
  19 + flex-direction: column;
  20 + justify-content: space-between;
  21 + text-align: center;
  22 +}
  23 +.area, .line-column{
  24 + color: #000000;
  25 + font-size: 0.36rem;
  26 + font-weight: bold;
  27 + margin-bottom: 0.31rem;
  28 +}
  29 +.line-column {
  30 + margin-bottom: 0.5rem;
  31 +}
  32 +.term, .term-of-validity{
  33 + color: #53555C;
  34 + font-size: 0.28rem;
  35 + margin-bottom: 0.3rem;
  36 +}
  37 +.term-of-validity {
  38 + margin-bottom: 0.5rem;
  39 +}
  40 +.price {
  41 + color:#17181A;
  42 + font-size: 0.28rem;
  43 + font-weight: bold;
  44 +}
  45 +.section {
  46 + width: 100%;
  47 + background: #fff;
  48 +}
  49 +.section .title {
  50 + height: 0.6rem;
  51 + line-height: 0.6rem;
  52 + font-size: 0.26rem;
  53 + color: #292525;
  54 + padding: 0 0.37rem;
  55 + font-weight: bold;
  56 + border-bottom: 1px solid #EBEBEB;
  57 +}
  58 +.avatar-box, .name-box {
  59 + width: 100%;
  60 + height: 1.08rem;
  61 + padding: 0.13rem 0.32rem 0.11rem 0.32rem;
  62 + -webkit-box-sizing: border-box;
  63 + -moz-box-sizing: border-box;
  64 + box-sizing: border-box;
  65 +}
  66 +.border-box {
  67 + height: 1.08rem;
  68 + border-bottom: 1px solid #EBEBEB;
  69 + display: flex;
  70 + align-items: center;
  71 + justify-content: space-between;
  72 +}
  73 +.avatar-img {
  74 + width: 0.84rem;
  75 + height: 0.84rem;
  76 + border-radius: 50%;
  77 +}
  78 +.edit {
  79 + display: flex;
  80 + align-items: center;
  81 + justify-content: space-between;
  82 + color: #666666;
  83 + font-size: 0.26rem;
  84 +}
  85 +.arrow {
  86 + margin-left: 0.16rem;
  87 + width: 0.16rem;
  88 + height: 0.28rem;
  89 +}
  90 +.name {
  91 + font-size: 0.3rem;
  92 + color: #000000;
  93 + font-weight: bold;
  94 +}
  95 +.name-input {
  96 + border: none;
  97 + outline: none;
  98 + width: 0.6rem;
  99 + height: 1.08rem;
  100 + font-size: 0.26rem;
  101 +}
  102 +.bless-box {
  103 + width: 100%;
  104 + padding: 0.35rem 0.32rem;
  105 + -webkit-box-sizing: border-box;
  106 + -moz-box-sizing: border-box;
  107 + box-sizing: border-box;
  108 + display: flex;
  109 + align-items: center;
  110 +}
  111 +.bless-box .bless-title {
  112 + width: 16%;
  113 + color: #000000;
  114 + font-size: 0.3rem;
  115 + font-weight: bold;
  116 + margin-right: 0.5rem;
  117 +}
  118 +.bless-box .bless-input {
  119 + color: #666666;
  120 + font-size: 0.26rem;
  121 + border: none;
  122 + outline: none;
  123 + flex: 1;
  124 +}
  125 +.footer {
  126 + width: 100%;
  127 + position: absolute;
  128 + bottom: 0;
  129 + left: 0;
  130 + -webkit-box-sizing: border-box;
  131 + -moz-box-sizing: border-box;
  132 + box-sizing: border-box;
  133 +}
  134 +.btn {
  135 + display: flex;
  136 + justify-content: space-between;
  137 + align-items: center;
  138 + text-align: center;
  139 + margin: 0 0.32rem 0.24rem 0.32rem;
  140 +}
  141 +.seat-num {
  142 + width: 3.23rem;
  143 + height: 0.72rem;
  144 + line-height: 0.72rem;
  145 + border: 1px solid #DD3E34;
  146 + border-radius: 0.36rem;
  147 + color: #DD3E34;
  148 + background-color: #fff;
  149 + font-size: 0.28rem;
  150 + margin-right: 0.36rem;
  151 +}
  152 +.reset {
  153 + width: 3.23rem;
  154 + height: 0.72rem;
  155 + line-height: 0.72rem;
  156 + background-color: #DD3E34;
  157 + color: #ffffff;
  158 + border-radius: 0.36rem;
  159 + font-size: 0.3rem;
  160 + box-shadow: 0 0.15rem 0.25rem 0 #F8CDCA;
  161 + background: -webkit-linear-gradient(left, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Safari 5.1 - 6.0 */
  162 + background: -o-linear-gradient(right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Opera 11.1 - 12.0 */
  163 + background: -moz-linear-gradient(right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Firefox 3.6 - 15 */
  164 + background: linear-gradient(to right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* 标准的语法 */
  165 +}
  166 +.list_input{
  167 + width: 1.5rem;
  168 + text-align: right;
  169 + position: relative;
  170 +}
  171 +.list_input input{
  172 + border: none;
  173 + outline: none;
  174 + opacity: 0;
  175 + position: absolute;
  176 + left: 0;
  177 + top: 0;
  178 +}
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6 + <title>我的福牌</title>
  7 + <script src="js/jquery-2.1.0.js"></script>
  8 + <script src="js/fontsize.js"></script>
  9 + <link href="css/edit.css" rel="stylesheet">
  10 + <link href="css/temple.css" rel="stylesheet">
  11 +</head>
  12 +<body>
  13 + <div class="section">
  14 + <div class="title">福牌显示信息</div>
  15 + <div class="avatar-box">
  16 + <div class="border-box">
  17 + <image src="./images/head01@2x.png" class="avatar-img"></image>
  18 + <div class="edit">
  19 + <div class="list_input">
  20 + <input type="file" value="">
  21 + 编辑头像
  22 + </div>
  23 + <image src="./images/bicon03@2x.png" class="arrow"></image>
  24 + </div>
  25 + </div>
  26 + </div>
  27 + <div class="name-box">
  28 + <div class="border-box">
  29 + <div class="name">姓名</div>
  30 + <!--<input type="text" placeholder="" class="name-input"/>-->
  31 + <div class="edit-box">
  32 + <input class="name-info" type="text" placeholder="" ></input>
  33 + <image src="./images/bicon03@2x.png" class="arrow"></image>
  34 + </div>
  35 + </div>
  36 + </div>
  37 + <div class="bless-box">
  38 + <div class="bless-title">祈祷语</div>
  39 + <input type="text" placeholder="请输入祈祷语" class="bless-input"/>
  40 + </div>
  41 + <div class="footer">
  42 + <div class="btn">
  43 + <!--<div class="seat-num">重新选区</div>-->
  44 + <div class="reset" onclick="confirm()">确定</div>
  45 + </div>
  46 + </div>
  47 +</div>
  48 +</body>
  49 +<script>
  50 + function confirm() {
  51 + window.history.go(-1);
  52 + }
  53 +</script>
  54 +</html>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6 + <title>预定具体财神灯位置</title>
  7 + <script src="../js/jquery-2.1.0.js"></script>
  8 + <script src="../js/fontsize.js"></script>
  9 + <link href="../css/appointment.css" rel="stylesheet">
  10 +</head>
  11 +<body>
  12 + <div class="content">
  13 + <div class="head">
  14 + <div class="center">
  15 + <div class="area"># 武财神内区 #</div>
  16 + <div class="seat-num">46个空位</div>
  17 + <div class="btn">
  18 + <div class="reset" onclick="resetChoose()">重新选区</div>
  19 + </div>
  20 + <div class="tips">灯暗的为可选，灯亮的为已被预定</div>
  21 + </div>
  22 + </div>
  23 + <div class="seat-list">
  24 + <div class="list-item">
  25 + <div class="line-num">一行</div>
  26 + <div class="column-list">
  27 + <div class="item" onclick="showModal()">
  28 + <div class="modal"></div>
  29 + <image src="../images/bicon01@2x.png" class="img"></image>
  30 + <div class="column-num">9列</div>
  31 + </div>
  32 + <div class="item" onclick="enter()">
  33 + <image src="../images/bicon01@2x.png" class="img"></image>
  34 + <div class="column-num">9列</div>
  35 + </div>
  36 + <div class="item" onclick="showModal()">
  37 + <div class="modal"></div>
  38 + <image src="../images/bicon01@2x.png" class="img"></image>
  39 + <div class="column-num">9列</div>
  40 + </div>
  41 + <div class="item" onclick="enter()">
  42 + <image src="../images/bicon01@2x.png" class="img"></image>
  43 + <div class="column-num">9列</div>
  44 + </div>
  45 + <div class="item" onclick="enter()">
  46 + <image src="../images/bicon01@2x.png" class="img"></image>
  47 + <div class="column-num">9列</div>
  48 + </div>
  49 + <div class="item" onclick="enter()">
  50 + <image src="../images/bicon01@2x.png" class="img"></image>
  51 + <div class="column-num">9列</div>
  52 + </div>
  53 + <div class="item" onclick="showModal()">
  54 + <div class="modal"></div>
  55 + <image src="../images/bicon01@2x.png" class="img"></image>
  56 + <div class="column-num">9列</div>
  57 + </div>
  58 +
  59 + </div>
  60 + </div>
  61 + <div class="list-item" onclick="enter()">
  62 + <div class="line-num">二行</div>
  63 + <div class="column-list">
  64 + <div class="item">
  65 + <image src="../images/bicon01@2x.png" class="img"></image>
  66 + <div class="column-num">9列</div>
  67 + </div>
  68 + <div class="item">
  69 + <image src="../images/bicon01@2x.png" class="img"></image>
  70 + <div class="column-num">9列</div>
  71 + </div>
  72 + <div class="item">
  73 + <image src="../images/bicon01@2x.png" class="img"></image>
  74 + <div class="column-num">9列</div>
  75 + </div>
  76 + <div class="item">
  77 + <image src="../images/bicon01@2x.png" class="img"></image>
  78 + <div class="column-num">9列</div>
  79 + </div>
  80 + <div class="item">
  81 + <image src="../images/bicon01@2x.png" class="img"></image>
  82 + <div class="column-num">9列</div>
  83 + </div>
  84 + <div class="item">
  85 + <image src="../images/bicon01@2x.png" class="img"></image>
  86 + <div class="column-num">9列</div>
  87 + </div>
  88 + <div class="item">
  89 + <image src="../images/bicon01@2x.png" class="img"></image>
  90 + <div class="column-num">9列</div>
  91 + </div>
  92 +
  93 + </div>
  94 + </div>
  95 + </div>
  96 + </div>
  97 +</body>
  98 +<script>
  99 + function enter() {
  100 + window.location.href='./temple-info.html';
  101 + }
  102 + function resetChoose() {
  103 + window.history.go(-1);
  104 + }
  105 + function showModal() {
  106 + alert("不能选择")
  107 + }
  108 +</script>
  109 +</html>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6 + <title>福牌公众号</title>
  7 + <script src="../js/jquery-2.1.0.js"></script>
  8 + <script src="../js/fontsize.js"></script>
  9 + <link href="../css/detail.css" rel="stylesheet">
  10 +</head>
  11 +<body>
  12 + <div class="content">
  13 + <div class="head">
  14 + <div class="title">预定财神庙财神灯供奉</div>
  15 + <div class="tips">选择区域:左右滑动查看所有区域</div>
  16 + </div>
  17 + <div class="swiper-list">
  18 + <div class="swiper-item" onclick="enter()">
  19 + <div class="name">武财神外</div>
  20 + <div class="number">95</div>
  21 + </div>
  22 + <div class="swiper-item" onclick="enter()">
  23 + <div class="name">武财神外</div>
  24 + <div class="number">95</div>
  25 + </div>
  26 + <div class="swiper-item" onclick="enter()">
  27 + <div class="name">Q</div>
  28 + <div class="number">95</div>
  29 + </div>
  30 + <div class="swiper-item" onclick="enter()">
  31 + <div class="name">武财神外</div>
  32 + <div class="number">95</div>
  33 + </div>
  34 + <div class="swiper-item" onclick="enter()">
  35 + <div class="name">武财神外</div>
  36 + <div class="number">95</div>
  37 + </div>
  38 + <div class="swiper-item" onclick="enter()">
  39 + <div class="name">武财神外</div>
  40 + <div class="number">95</div>
  41 + </div>
  42 + <div class="swiper-item" onclick="enter()">
  43 + <div class="name">武财神外</div>
  44 + <div class="number">95</div>
  45 + </div>
  46 + <div class="swiper-item" onclick="enter()">
  47 + <div class="name">武财神外</div>
  48 + <div class="number">95</div>
  49 + </div>
  50 + <div class="swiper-item" onclick="enter()">
  51 + <div class="name">武财神外</div>
  52 + <div class="number">95</div>
  53 + </div>
  54 + </div>
  55 + </div>
  56 +</body>
  57 +<script>
  58 + function enter() {
  59 + window.location.href='./appointment-seat.html';
  60 + }
  61 +</script>
  62 +</html>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6 + <title>福牌公众号</title>
  7 + <script src="../js/jquery-2.1.0.js"></script>
  8 + <script src="../js/fontsize.js"></script>
  9 + <link href="../css/home-index.css" rel="stylesheet">
  10 +</head>
  11 +<body>
  12 +<div class="content">
  13 + <div class="head">
  14 + <div class="city">
  15 + <div class="city_name">
  16 + <text>北京</text>
  17 + <image src="../images/aicon03@2x.png"></image>
  18 + </div>
  19 +
  20 + </div>
  21 + <div class="input-box">
  22 + <input type="text" class="search-input" placeholder="输入寺庙名称"/>
  23 + <image src="../images/fangdajing.png" class="icon" onclick="enterSearch()"></image>
  24 + </div>
  25 + </div>
  26 +
  27 + <div class="section">
  28 + <div class="list-item" onclick="enter()">
  29 + <image src="../images/aicon01@2x.png" class="img"></image>
  30 + <div class="name">天津大悲禅院</div>
  31 + <div class="people-num">已有<span>4268</span>人供奉</div>
  32 + <div class="enter">进入</div>
  33 + </div>
  34 + <div class="list-item">
  35 + <image src="../images/aicon01@2x.png" class="img"></image>
  36 + <div class="name">天津大悲禅院</div>
  37 + <div class="people-num">已有<span>4268</span>人供奉</div>
  38 + <div class="enter">进入</div>
  39 + </div>
  40 + <div class="list-item">
  41 + <image src="../images/aicon01@2x.png" class="img"></image>
  42 + <div class="name">天津大悲禅院</div>
  43 + <div class="people-num">已有<span>4268</span>人供奉</div>
  44 + <div class="enter">进入</div>
  45 + </div>
  46 + </div>
  47 +</div>
  48 +</body>
  49 +<script>
  50 + function enter() {
  51 + window.location.href = './detail.html';
  52 + }
  53 +
  54 + function enterSearch() {
  55 + window.location.href = '../blessing-cards.html';
  56 + }
  57 +</script>
  58 +</html>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6 + <title>财神庙</title>
  7 + <script src="../js/jquery-2.1.0.js"></script>
  8 + <script src="../js/fontsize.js"></script>
  9 + <link href="../css/temple.css" rel="stylesheet">
  10 +</head>
  11 +<body>
  12 +<div class="content">
  13 + <div class="head">
  14 + <div class="center">
  15 + <div class="area"># 武财神内区 #</div>
  16 + <div class="line-column">3行-6列</div>
  17 + <div class="term">预定为固定期限1年</div>
  18 + <div class="term-of-validity">2018年10月16日-2019年10月16日</div>
  19 + <div class="price">价格：1800元</div>
  20 + </div>
  21 + </div>
  22 + <div class="section">
  23 + <div class="title">福牌显示信息</div>
  24 + <div class="avatar-box" onclick="editAvatar()">
  25 + <div class="border-box">
  26 + <image src="../images/head01@2x.png" class="avatar-img"></image>
  27 + <div class="edit">
  28 + <div class="">编辑头像</div>
  29 + <image src="../images/bicon03@2x.png" class="arrow"></image>
  30 + </div>
  31 + </div>
  32 + </div>
  33 + <div class="name-box" onclick="editAvatar()">
  34 + <div class="border-box">
  35 + <div class="name">姓名</div>
  36 + <!--<input type="text" placeholder="" class="name-input"/>-->
  37 + <div class="edit">
  38 + <div class="name-info">向昱筱</div>
  39 + <image src="../images/bicon03@2x.png" class="arrow"></image>
  40 + </div>
  41 + </div>
  42 + </div>
  43 + <div class="bless-box">
  44 + <div class="bless-title">祈祷语</div>
  45 + <div class="bless-input"><input type="text" placeholder="请输入祈祷语" class="bless-input"/></div>
  46 + </div>
  47 + <div class="footer">
  48 + <div class="btn">
  49 + <div class="seat-num" onclick="resetChoose()">重新选区</div>
  50 + <div class="reset" onclick="">我要预定</div>
  51 + </div>
  52 + </div>
  53 + </div>
  54 +</div>
  55 +</body>
  56 +<script>
  57 + function resetChoose() {
  58 + window.location.href = './detail.html';
  59 + }
  60 +
  61 + function editAvatar() {
  62 + window.location.href = '../edit.html';
  63 + }
  64 +</script>
  65 +</html>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6 + <title>福牌公众号</title>
  7 + <script src="js/jquery-2.1.0.js"></script>
  8 + <script src="js/fontsize.js"></script>
  9 + <link href="css/index.css" rel="stylesheet">
  10 +</head>
  11 +<body>
  12 +<div class="content">
  13 + <div class="input-box">
  14 + <div class="top-input">
  15 + <div class="border-line-box">
  16 + <image src="./images/phone_icon.png" class="phone-icon"></image>
  17 + <!--<form action="" onsubmit="return doValidate()" name="forma" class="form">-->
  18 + <input type="number" name="name" id="phone" placeholder="手机号" class="phone-input" value="">
  19 + <!--</form>-->
  20 + </div>
  21 + </div>
  22 + <div class="bottom-input">
  23 + <div class="border-line-box2">
  24 + <div class="input-code-box">
  25 + <image src="./images/code_icon.png" class="code-icon"></image>
  26 + <input type="number" placeholder="验证码" class="code-input">
  27 + </div>
  28 + <button class="getCode">获取验证码</button>
  29 + </div>
  30 + </div>
  31 + </div>
  32 + <div class="next-btn">
  33 + <div class="next" onclick="goNext()">下一步</div>
  34 + </div>
  35 +</div>
  36 +</body>
  37 +<script>
  38 + function goNext() {
  39 + window.location.href = './personal-info.html';
  40 + }
  41 +
  42 + // function doValidate() {
  43 + // var phone = document.getElementById('phone').value;
  44 + // if (!(/(^[0-9]{3,4}\-[0-9]{7}$)|(^[0-9]{7}$)|(^[0-9]{3,4}[0-9]{7}$)|(^0{0,1}13[0-9]{9}$)/.test(phone))) {
  45 + // alert("手机号码有误，请重填");
  46 + // return false;
  47 + // } else {
  48 + // // btnCheck()
  49 + // }
  50 + // }
  51 +
  52 + // $("input[type='button']").click(doValidate);
  53 + /**
  54 + * [btnCheck 按钮倒计时常用于获取手机短信验证码]
  55 + */
  56 + // function btnCheck() {
  57 + // $(this).addClass("on");
  58 + // var time = 60;
  59 + // $(this).attr("disabled", true);
  60 + // var timer = setInterval(function() {
  61 + // if (time == 0) {
  62 + // clearInterval(timer);
  63 + // $(".button").attr("disabled", false);
  64 + // $(".button").val("获取验证码");
  65 + // $(".button").removeClass("on");
  66 + // } else {
  67 + // $('.button').val(time + "秒");
  68 + // time--;
  69 + // }
  70 + // }, 1000);
  71 + // }
  72 +
  73 +
  74 + $(function () {
  75 + //获取短信验证码
  76 + var validCode = true;
  77 + $(".getCode").click(function () {
  78 + var time = 60;
  79 + var $code = $(this);
  80 + if (validCode) {
  81 + validCode = false;
  82 + var t = setInterval(function () {
  83 + time--;
  84 + $code.html(time + "秒");
  85 + if (time == 0) {
  86 + clearInterval(t);
  87 + $code.html("重新获取");
  88 + validCode = true;
  89 + }
  90 + }, 1000)
  91 + }
  92 + })
  93 + })
  94 +
  95 +</script>
  96 +</html>
  1 + !function(a){
  2 + function b(){
  3 + var b=a.document,c=b.documentElement,
  4 + d=c.getBoundingClientRect().width;
  5 + document.documentElement.style.fontSize=100*(d/750)+"px"}
  6 + window.addEventListener("DOMContentLoaded",function(){b()},!1),
  7 + window.addEventListener("resize",function(){b()}),b()}(window);
此 diff 太大无法显示。
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6 + <title>福牌公众号</title>
  7 + <script src="js/jquery-2.1.0.js"></script>
  8 + <script src="js/fontsize.js"></script>
  9 + <link href="css/personal-info.css" rel="stylesheet">
  10 +</head>
  11 +<body>
  12 + <div class="content">
  13 + <div class="name-box">
  14 + <div class="input-box">
  15 + <text>姓名</text>
  16 + <input class="input" type="text" placeholder="向昱筱" cursor="100" placeholder-class="placeholder-style"
  17 + value="" bindinput="inputName"/>
  18 + </div>
  19 + </div>
  20 + <div class="age-box">
  21 + <div class="input-box">
  22 + <text>年龄</text>
  23 + <input class="input" type="text" placeholder="18" cursor="100" placeholder-class="placeholder-style"
  24 + value="" bindinput="inputName"/>
  25 + </div>
  26 + </div>
  27 + <div class="sex-box">
  28 + <div class="input-box">
  29 + <text>性别</text>
  30 + <div class="man active">男</div>
  31 + <div class="women">女</div>
  32 + </div>
  33 + </div>
  34 + <div class="family-box">
  35 + <div class="input-box">家庭住址</div>
  36 + <div class="address-input">
  37 + <input class="input" type="text" placeholder="请填写您的家庭住址" cursor="100" placeholder-class="placeholder-style"
  38 + value="" bindinput="inputName"/>
  39 + </div>
  40 + </div>
  41 + <div class="footer" onclick="goNext()">
  42 + <div class="confirm-btn">
  43 + <text>确定</text>
  44 + </div>
  45 + </div>
  46 + </div>
  47 +</body>
  48 +<script>
  49 + function goNext() {
  50 + window.location.href='./home/index.html';
  51 + }
  52 +</script>
  53 +</html>