<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0,viewport-fit=cover">
<title></title>
<link rel="stylesheet" href="../css/order.css">
<style>
body{
padding: 0.2rem;
}
.page .h1{
color: skyblue;
font-size: 1rem;
text-align: center;
}
.page .content .h2{
font-size: 0.16rem;
padding-left: 1rem;
}
.page .content .form{
border-top: 0.2rem solid skyblue;
box-shadow: 0 0 2.5rem rgba(75, 86, 101, 0.3);
margin-top: 0.6rem;
padding: 0.6rem;
}
.page .form .box{
display: flex;
margin-left:2rem;
margin-bottom: 0.4rem;
}
.page .form .text{
width: 5rem;
display: flex;
font-size: 0.15rem;
font-weight: bold;
margin: auto 0;
}
.page .form .text .icon{
color: red;
}
.page .form .box>input{
width: 7rem;
height: 1.5rem;
}
.page .form .box .code{
width: 5rem;
}
.page .form .box>button{
border:0.15rem solid skyblue;
margin-left: 0.8rem;
background-color: white;
padding-left: 0.8rem;
padding-right: 0.8rem;
}
.button{
text-align: center;
margin-top: 1.5rem;
}
.button>button{
background-color: rgb(34, 165, 218);
color: white;
font-size: 0.28rem;
border: none;
padding: 0.6rem 2.8rem;
border-radius: 4px;
}
.mask{
height: 100%;
/* position: fixed;
left: 0;
top: 0; */
background-color: rgba(75, 86, 101, 0.1);
padding: 0.4rem;
}
.mask .shade{
border: 0.1rem solid black;
border-radius: 8px;
background-color: rgb(34, 165, 218);
}
.mask .shade .top{
display: flex;
padding: 0.6rem;
}
.mask .shade .top .h3{
margin: 0 auto;
color: #eee;
font-weight: bold;
}
.mask .shade .declare{
background-color: rgb(255, 255, 255);
padding: 0.4rem;
}
.mask .shade .declare-box{
margin-bottom: 0.8rem;
}
.p1{
margin: 0;
font-size: 0.9rem;
font-weight: bold;
padding-left: 0.6rem;
margin-bottom: 0.4rem;
}
.p2{
text-indent: 2em;
margin: 0;
font-size: 0.88rem;
padding-left: 0.6rem;
}
.check{
display: flex;
margin: 2rem 0 8rem 4rem;
}
.check>input{
width: 1rem;
height: 1rem;
}
.check>p{
font-size: 0.16rem;
}
.bottom{
text-align: center;
}
.bottom>button{
background-color: saddlebrown;
color: rgb(255, 255, 255);
padding: 0.5rem 6rem 0.5rem 6rem;
border: none;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="page">
<p class="h1">IQQA精准术前三维评估及手术规划</p>
<div class="content">
<p class="h2">请告诉我们您的手机号码，使我们能够及时通知到您服务的进度。</p>
<div class="form">
<p id="warn" style="color: red; display: none;">手机号码必须要填写！</p>
<div class="box">
<div class="text">
<p class="icon">*</p>
手机号码：
</div>
<input id="iphone" value="" type="text" maxlength="11" placeholder="手机号码">
</div>
<div class="box">
<div class="text">
<p class="icon">*</p>
姓名：
</div>
<input type="text" placeholder="用户姓名">
</div>
<div class="box">
<div class="text">
<p style="color: white; margin: auto 0;">*</p>
验证码：
</div>
<input class="code" type="text" placeholder="验证码">
<button id="button">获取验证码</button>
</div>
</div>
<p style="font-size: 0.16rem;padding-left: 1rem;margin-top: 1.2rem;">请确认病人是否正确，医生在查看报告时，会核对此处的姓名。</p>
<div class="form">
<div class="box">
<div class="text">
<p class="icon">*</p>
患者姓名：
</div>
<input id="iphone" value="" type="text" placeholder="手机号码">
</div>
<div class="box">
<div class="text">
<p style="color: white; margin: auto 0;">*</p>
就诊医院：
</div>
<input style="width: 12rem;" id="" value="" type="text" placeholder="XX医院" disabled>
</div>
<div class="box">
<div class="text">
<p style="color: white; margin: auto 0;">*</p>
就诊科室：
</div>
<input style="width: 8rem;" id="" value="" type="text" placeholder="胸外科">
</div>
<div class="box">
<div class="text">
<p style="color: white; margin: auto 0;">*</p>
就诊医生：
</div>
<input style="width: 8rem;" id="" value="" type="text" placeholder="">
</div>
<div class="box">
<div class="text">
<p style="color: white; margin: auto 0;">*</p>
邮寄地址：
</div>
<input style="width: 8rem;" id="" value="" type="text" placeholder="">
</div>
</div>
</div>
<div class="button">
<button>我要购买此服务</button>
</div>
</div>
<div class="mask" style="display: block;">
<div class="shade">
<div class="top">
<p class="h3">技术服务自愿购买声明</p>
<div id="close">X</div>
</div>
<div class="declare">
<div class="declare-box">
<p class="p1">【服务免责声明】</p>
<p class="p2">基于医学领域的有关规定，疾病的诊断、治疗等应以患者的专业医生的诊疗意见及决定为准。本服务所提供的技术服务内容仅供患者的专业诊疗医生参考使用，因此不承担因为诊断结论错误或治疗方案不当而引发的医疗纠纷和事故责任。</p>
</div>
<div class="declare-box">
<p class="p1">【技术服务购买者声明】</p>
<p class="p2">本人为患者本人或患者直系亲属/法定监护人，已经知晓并充分理解服务简介及服务免责声明相关内容，自愿自费订购本次IQQA-3D技术服务，并承诺所提供的信息均真实可靠。本人同意并授权技术服务提供方对患者的影像数据进行存储传输及处理。</p>
</div>
<div class="check">
<input type="checkbox" name="" id="choose">
<p>已阅读并同意以上声明内容</p>
</div>
<div class="bottom">
<button id="button" disabled>确定</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/distpicker.data.min.js"></script>
<script src="../js/distpicker.min.js"></script>
<script>
$("#close").click(function(){
$(".mask").css("display",'none')
})
$("#button").click(function(){
$(".mask").css("display",'none')
})
</script>
</html>