|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>主界面</title>
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1"><!-- 宽度自动适配 -->
<meta content="telephone=no" name="format-detection" /><!-- 不识别页面上的数字为可拨打号码 -->
<style>
/*新增的显示边框的代码*/
.verify-content{
border: 1px solid #ccc;
}
.verify-block{
width: 260px;
margin: 0 auto;
}
:focus{
outline: none;
}
.verify-content{
background-color: #fff;
box-sizing:border-box;
padding: 0 15px;
border-radius: 4px;
line-height: 1.5;
color: #666;
overflow: hidden;
}
.verify-title {
font-size: 16px;
text-align: center;
color: #666;
margin-top: 15px;
}
.verify-code{
width:60%;
display: block;
border: 1px solid #ccc;
font-size: 14px;
padding: 0 5px;
line-height: 26px;
box-sizing: border-box;
color: #999;
border-radius: 2px;
-webkit-appearance: none;
}
.verify-info{
margin-top: 15px;
}
.verify-confirm{
padding: 15px 0 20px;
}
.btn-verify-getcode{
float: right;
position: relative;
width: 75px;
font-size: 12px;
line-height: 28px;
color: #fff;
text-align: center;
background-color: #2196f3;
border: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 2px;
-webkit-appearance: none;
padding: 0;
}
.btn-verify-getcode:not(:disabled):active{
background-color: #0c7cd5;
}
.btn-verify-confirm{
position: relative;
display: block;
width: 100%;
font-size: 14px;
line-height: 33px;
color: #fff;
text-align: center;
background-color: #ff8444;
border: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
-webkit-appearance: none;
padding: 0;
}
.btn-verify-confirm:not(:disabled):active{
background-color: #ff6211;
}
.verify-tips{
text-align: center;
color: #444;
font-size: 15px;
padding: 10px 0;
}
</style>
</head>
<body>
<!-- 尺寸为 260*150 -->
<div class="verify-block">
<div class="verify-content">
<div class="verify-title">权限验证</div>
<div class="verify-info">
<button class="btn-verify-getcode">获取验证码</button>
<input class="verify-code" type="text"/>
</div>
<div class="verify-confirm">
<button class="btn-verify-confirm">验证</button>
</div>
</div>
<div class="verify-tips">等待授权...</div>
</div>
</body>
</html>
|
