console
<!DOCTYPE html>
<html>
<head>
<title>填写基本信息</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no" viewport-fit="cover"/>
<link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="css/jquery-weui.css">
<link rel="stylesheet" href="css/tijian.css">
</head>
<body>
<div class="page__bd pad-bottom-fixed">
<div class="form-tips">
<h3>温馨提示</h3>
<p>1、只有北京中医药大学下属学院职工才可预约</p>
<p>2、请输入真实准确的姓名、身份证号和手机号，预约成功后会收到短信提示</p>
</div>
<form action="">
<div class="form-box">
<div class="form-list">
<span class="form-label"><img src="img/form-name.png" alt="">姓名</span>
<div><input class="input" type="text" placeholder="请输入您的姓名"></div>
</div>
<div class="form-list">
<span class="form-label"><img src="img/form-shenfen.png" alt="">身份证号</span>
<div><input class="input" type="text" placeholder="请输入您的身份证号"></div>
</div>
<div class="form-list">
<span class="form-label"><img src="img/form-phone.png" alt="">手机号</span>
<div><input class="input" type="text" placeholder="请输入您的手机号"></div>
</div>
<div class="form-list">
<span class="form-label"><img src="img/form-ma.png" alt="">验证码</span>
<div class="weui-flex">
<span class="weui-flex__item"><input class="input" type="text" placeholder="请输入验证码"></span>
<button class="form-ma-btn" disabled="disabled"><i>58s</i>后再次发送</button>
</div>
</div>
</div>
<div class="fixed-btn">
<div class="my-form-line my-yuyue-form_btn">
<input type="button" value="2323" class="weui-btn weui-btn_primary" readonly="readonly" />
</div>
</div>
</form>
</div>
<script>
$("#get_sub_id").click(function(){
$("input").blur();
});
</script>
</body>
</html>
img {
display: block;
width: 100%;
}
body {
color: #333;
background-color: #fff;
font-size: 16px;
}
body,html{
padding:0;
margin:0;
}
.bg-gray {
background-color: #f8f8f8;
}
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
content: " ";
display: table;
clear: both;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #ccc;
opacity: 1;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #ccc;
opacity: 1;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #ccc;
opacity: 1;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #ccc;
opacity: 1;
}
a.weui-cell_access:active {
background-color: #fff;
}
.home-entry .weui-cell {
background-color: #fff;
margin: 15px 10px 0;
border-radius: 5px;
box-shadow: 0 2px 5px #ebebeb;
padding: 20px 13px;
}
.home-entry .weui-cell .home-tips {
font-size: 12px;
color: #999;
}
.home-entry .weui-cell .home-icon {
width: 49px;
margin-right: 12px;
}
.home-entry .weui-cell .weui-cell__ft:after {
border-color: #c4c4c4;
}
.home-entry .disabled .home-title {
color: #aaa;
}
.home-entry .disabled .home-tips {
font-size: 12px;
color: #aaa;
}
.home-entry .disabled .home-icon {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
opacity: 0.6;
}
.home-entry .disabled .weui-cell__ft:after {
border-color: #c4c4c480;
}
.home-text {
padding: 40px 15px 15px;
}
.home-text h3 {
font-weight: normal;
font-size: 14px;
padding-bottom: 10px;
vertical-align: top;
}
.home-text h3:before {
content: "*";
display: block;
float: left;
color: #dd675c;
font-size: 20px;
vertical-align: top;
margin-right: 7px;
line-height: 20px;
margin-top: 4px;
}
.home-text p {
font-size: 13px;
color: #999;
padding-top: 8px;
line-height: 1.8;
}
.form-tips {
padding: 15px;
color: rgba(255, 255, 255, 0.9);
background-color: #6382cc;
line-height: 1.8;
}
.form-tips h3 {
font-weight: normal;
font-size: 13px;
vertical-align: top;
}
.form-tips h3:before {
content: "*";
display: block;
float: left;
font-size: 16px;
vertical-align: top;
margin-right: 3px;
line-height: 16px;
margin-top: 5px;
}
.form-tips p {
font-size: 12px;
}
.form-box {
padding: 30px 33px 0;
}
.form-box .form-list {
border-bottom: 1px solid #eee;
margin-bottom: 20px;
}
.form-box .form-list .form-label {
color: #333;
font-size: 13px;
}
.form-box .form-list .form-label img {
width: 11px;
display: inline-block;
float: left;
margin-top: 8px;
margin-right: 4px;
}
.form-box .form-list .form-label-gray {
opacity: .4;
}
.form-box .form-list .form-label-gray img {
opacity: .7;
}
.form-box .form-list input {
font-size: 19px;
width: 100%;
height: 46px;
line-height: 46px;
border: 0;
}
.form-box .form-list input:focus {
outline: none;
}
.form-box .form-list .form-ma-btn {
height: 46px;
line-height: 46px;
font-size: 12px;
color: #65bc82;
padding: 0 10px;
border: 0;
background: transparent;
}
.form-box .form-list .form-ma-btn:before {
content: " ";
display: block;
float: left;
vertical-align: top;
height: 20px;
width: 1px;
overflow: hidden;
background-color: #eee;
margin-right: 13px;
margin-top: 13px;
}
.form-box .form-list .form-ma-btn:disabled {
color: #999;
}
.form-box .form-list .form-ma-btn:disabled i {
font-style: normal;
color: #65bc82;
}
.none-img {
width: 90px;
margin: 126px auto 18px;
}
.none-text {
color: #ccc;
font-size: 15px;
text-align: center;
}
.my-panel .weui-panel__hd.my-yuyue__hd {
font-size: 15px;
color: #333;
overflow: hidden;
}
.my-panel-xx .my-panel-xx__left {
color: #999;
}
span.my-yuyue__hd-jz,
span.my-yuyue__hd-gq {
float: right;
margin-right: 5px;
color: #65bc82;
font-size: 14px;
}
span.my-yuyue__hd-gq {
color: #999;
}
.my-panel-xx {
font-size: 14px;
line-height: 22px;
padding: 15px;
color: #333;
}
.my-panel-xx_lg {
font-size: 15px;
padding: 15px 20px;
}
.my-panel-xx li {
margin-bottom: 10px;
overflow: hidden;
list-style: none;
}
.my-panel-xx div {
overflow: hidden;
}
.my-panel-xx__left {
float: left;
position: relative;
}
.my-panel-xx__rt {
float: right;
position: relative;
font-size: 12px;
color: #999;
margin-left: 10px;
}
.my-yuyue_cg {
font-size: 21px;
color: #65bc82;
text-align: center;
line-height: 24px;
padding-top: 48px;
padding-bottom: 20px;
}
.my-yuyue_qx {
color: #333;
}
.my-yuyue_cg img {
width: 25px;
display: inline-block;
vertical-align: top;
margin-right: 15px;
}
.my-yuyue_cg-ts {
font-size: 12px;
color: #999;
text-align: center;
padding: 0 12% 20px;
}
.my-yuyue-detail__hd {
font-size: 18px;
font-weight: bold;
color: #181818;
}
.my-panel-xx {
font-size: 14px;
line-height: 22px;
padding: 15px;
}
.my-panel-xx_lg {
font-size: 15px;
padding: 15px 20px;
}
.my-panel-xx li {
margin-bottom: 10px;
overflow: hidden;
list-style: none;
}
.my-panel-xx div {
overflow: hidden;
}
.my-panel-xx__left {
float: left;
position: relative;
}
.my-panel-xx__rt {
float: right;
position: relative;
font-size: 12px;
color: #999;
margin-left: 10px;
}
.my-panel .weui-panel__hd {
font-size: 14px;
}
.weui-panel:after,
.weui-panel:before {
height: 0;
border: 0;
}
.fixed-btn {
position: fixed;
bottom: 0;
background-color: #fff;
width: 100%;
}
.pad-bottom-fixed {
padding-bottom: 62px;
}
.my-yuyue-form_btn {
padding: 10px 15px;
}
.weui-btn_primary {
border: 0;
background-color: #65bc82;
line-height: 32px;
font-size: 15px;
margin-top: 0;
}
.weui-btn_plain-default {
background-color: #fff;
border-color: #65bc82;
color: #65bc82;
line-height: 30px;
font-size: 15px;
margin-top: 0;
}
.weui-btn_primary:disabled {
background-color: #ddd;
}
.weui-btn_plain-default:disabled {
border-color: #ddd;
color: #ccc;
}
.weui-btn_primary:after {
border: 0;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
color: #fff;
background-color: #65bc82;
}