<!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{ display: flex; font-size: 0.15rem; font-weight: bold; text-align: right; } .page .form .text .icon{ color: red; margin: auto; } .page .form .box>input{ width: 7rem; height: 1.5rem; } .page .form .box .code{ width: 4rem; } .page .form .box>button{ border:0.15rem solid skyblue; margin-left: 0.8rem; background-color: white; padding-left: 0.8rem; padding-right: 0.8rem; } </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"> <p style="color: white;;; margin: auto 0;">*</p> <p class="text">验证码:</p> <input class="code" type="text" placeholder="验证码"> <button id="button">获取验证码</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> </script> </html>