440 lines
8.4 KiB
CSS
440 lines
8.4 KiB
CSS
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h3,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}
|
|
html{
|
|
height:100%;
|
|
}
|
|
body{
|
|
height: 100%;
|
|
font-size: 14px;
|
|
font-family: Arial,Helvetica,"Microsoft Yahei";
|
|
color: rgb(110, 119, 129);
|
|
}
|
|
button, input {
|
|
font-family: Arial,Helvetica,"Microsoft Yahei";
|
|
}
|
|
img{
|
|
vertical-align: middle;
|
|
}
|
|
a{
|
|
text-decoration: none;
|
|
color: rgb(110, 119, 129);
|
|
}
|
|
a:hover{
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.wrapper{
|
|
background: #fdfdfd;
|
|
}
|
|
.container{
|
|
padding: 0 15px 30px;
|
|
}
|
|
.inner{
|
|
max-width: 728px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.mod-head .hd,.mod-head .bd{
|
|
max-width: 500px;
|
|
padding: 0 10px;
|
|
margin:0 auto;
|
|
}
|
|
.mod-head .hd{
|
|
position: relative;
|
|
}
|
|
.mod-head .hd span.tag{
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 0;
|
|
display: block;
|
|
height: 20px;
|
|
padding: 5px 12px;
|
|
background: #eee;
|
|
line-height: 20px;
|
|
color: #444;
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
}
|
|
.mod-head .bd{
|
|
height: 36px;
|
|
padding: 10px 10px 0;
|
|
margin-bottom: 5px;
|
|
text-align: right;
|
|
}
|
|
.mod-head .btn{
|
|
position: relative;
|
|
display: inline-block;
|
|
min-width: 56px;
|
|
height: 34px;
|
|
background: #fff;
|
|
padding: 0 12px;
|
|
border: 1px solid #ececec;
|
|
border-radius: 6px;
|
|
line-height: 32px;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #333;
|
|
overflow: hidden;
|
|
transition: color .2s,opacity .2s;
|
|
font-family: Tahoma,Arial, Helvetica,"Microsoft YaHei";
|
|
outline: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
.mod-head .btn:after {
|
|
content: " ";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
transition: opacity .2s;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
.mod-head .btn span,.mod-head .btn svg{
|
|
vertical-align: middle;
|
|
}
|
|
.mod-head .btn:hover {
|
|
color: #000;
|
|
opacity: 1;
|
|
}
|
|
.mod-head .btn:hover:after {
|
|
opacity: .02;
|
|
}
|
|
|
|
.mod-panel {
|
|
width: 100%;
|
|
}
|
|
.mod-panel h1{
|
|
line-height: 32px;
|
|
font-size: 22px;
|
|
color:#212121;
|
|
}
|
|
.mod-panel h2{
|
|
line-height: 30px;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
font-size: 18px;
|
|
}
|
|
.mod-panel .hd,.mod-panel .bd{
|
|
max-width: 500px;
|
|
margin:0 auto;
|
|
}
|
|
.mod-panel .hd{
|
|
padding: 10px 0;
|
|
margin-bottom: 5px;
|
|
line-height: 22px;
|
|
text-align: left;
|
|
}
|
|
.mod-panel .hd b{
|
|
margin: 0 3px;
|
|
color: #fd7474;
|
|
}
|
|
.mod-panel .bd .c-hd{
|
|
height: 36px;
|
|
margin-bottom: 10px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
.mod-panel .bd .c-hd li{
|
|
float: left;
|
|
width: 33.33%;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
}
|
|
.mod-panel .bd .c-hd li a{
|
|
display: block;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
color: #999;
|
|
cursor: pointer;
|
|
}
|
|
.mod-panel .bd .c-hd li.active a{
|
|
position: relative;
|
|
color: #333;
|
|
}
|
|
.mod-panel .bd .c-hd li.active a::after{
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
display: block;
|
|
content: '';
|
|
width: 16px;
|
|
height: 4px;
|
|
margin-left: -8px;
|
|
background: #2095f2;
|
|
border-radius: 3px;
|
|
}
|
|
.mod-panel .bd .c-panel{
|
|
display: none;
|
|
}
|
|
.mod-panel .bd .operation{
|
|
margin: 10px 0;
|
|
}
|
|
.mod-panel .bd .row{
|
|
margin-bottom: 5px;
|
|
}
|
|
.mod-panel .bd .field{
|
|
line-height: 28px;
|
|
}
|
|
.mod-panel .bd p{
|
|
overflow: hidden;
|
|
}
|
|
.mod-panel .bd label{
|
|
display: inline-block;
|
|
min-width: 90px;
|
|
margin-right: 15px;
|
|
}
|
|
.mod-panel .bd label span,.mod-panel .bd label input{
|
|
vertical-align: middle;
|
|
}
|
|
.mod-panel .bd .input-text{
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 30px;
|
|
background: #f6f6f6;
|
|
border: 1px solid #ebebeb;
|
|
padding: 5px 10px;
|
|
box-sizing: border-box;
|
|
line-height: 20px;
|
|
border-radius: 5px;
|
|
outline: none;
|
|
}
|
|
.mod-panel .bd .input-text-small{
|
|
width: 200px;
|
|
}
|
|
.mod-panel .bd .btn {
|
|
height: 32px;
|
|
min-width: 90px;
|
|
background: #f0f0f0;
|
|
border: medium none;
|
|
line-height: 30px;
|
|
vertical-align: middle;
|
|
font-size: 15px;
|
|
color: #333333;
|
|
cursor: pointer;
|
|
outline: none;
|
|
border-radius: 4px;
|
|
}
|
|
.mod-panel .bd .btn:hover{
|
|
background: #e4e4e4;
|
|
}
|
|
.mod-panel .bd .btn-green{
|
|
background: #4bae4f;
|
|
color: #fff;
|
|
}
|
|
.mod-panel .bd .btn-green:hover{
|
|
background: #47a04b;
|
|
}
|
|
.mod-panel .bd .btn-red{
|
|
background: #f56954;
|
|
color: #fff;
|
|
}
|
|
.mod-panel .bd .btn-red:hover{
|
|
background: #f4543c;;
|
|
}
|
|
.mod-panel .bd .btn-orange{
|
|
background: #ff9000;
|
|
color: #fff;
|
|
}
|
|
.mod-panel .bd .btn-orange:hover{
|
|
background: #e18309;
|
|
}
|
|
.mod-panel .bd .btn-small{
|
|
min-width: 40px;
|
|
cursor: pointer;
|
|
}
|
|
.mod-panel .bd .btn[disabled]{
|
|
background: #f0f0f0;
|
|
color: #aaa;
|
|
}
|
|
.mod-panel .bd textarea{
|
|
display: block;
|
|
width: 100%;
|
|
height: 120px;
|
|
padding:5px 10px;
|
|
background: #f6f6f6;
|
|
border: 1px solid #ebebeb;
|
|
box-sizing: border-box;
|
|
border-radius: 5px;
|
|
resize: none;
|
|
outline: none;
|
|
}
|
|
.mod-panel .bd p{
|
|
line-height: 22px;
|
|
}
|
|
.mod-panel .bd p span{
|
|
margin-right: 10px;
|
|
}
|
|
.mod-panel .ft{
|
|
padding-top: 5px;
|
|
border-top:1px dotted #e0e0e0;
|
|
}
|
|
.mod-panel .about{
|
|
padding: 0 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.mod-panel .about p{
|
|
line-height: 24px;
|
|
text-indent: 2em;
|
|
}
|
|
.mod-panel .copy{
|
|
padding: 10px 0;
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
.mod-panel .copy p{
|
|
line-height: 22px;
|
|
}
|
|
.mod-panel .copy p a,.mod-panel .copy p span{
|
|
vertical-align: middle;
|
|
}
|
|
.mod-panel .copy p.buttons{
|
|
margin: 10px 0 5px;
|
|
}
|
|
.mod-panel .copy .text-red{
|
|
font-weight: bold;
|
|
color: #fd7474;
|
|
}
|
|
.mod-panel .intro,.mod-panel .article{
|
|
padding: 15px 20px;
|
|
margin: 10px 0;
|
|
background: rgb(246, 248, 250);
|
|
border-radius: 6px;
|
|
}
|
|
.mod-panel .intro h3{
|
|
margin-bottom: 10px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #646464;
|
|
}
|
|
.mod-panel .intro p{
|
|
line-height: 22px;
|
|
}
|
|
.mod-panel .intro p.q{
|
|
margin-top: 10px;
|
|
font-weight: bold;
|
|
color: #646464;
|
|
}
|
|
.mod-panel .article p{
|
|
line-height: 22px;
|
|
text-indent: 2em;
|
|
}
|
|
.mod-panel .table-inner{
|
|
overflow-x: auto;
|
|
}
|
|
.mod-panel table {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
border: 1px solid #cee1ee;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
.mod-panel thead{
|
|
background-color: #e3eef8;
|
|
}
|
|
.mod-panel tr {
|
|
border-bottom: 1px solid #cee1ee;
|
|
line-height: 24px;
|
|
font-size: 13px;
|
|
}
|
|
.mod-panel tr td,.mod-panel tr th{
|
|
word-break: break-all;
|
|
word-wrap: break-word;
|
|
padding: 5px 8px;
|
|
border: 1px solid #cee1ee;
|
|
line-height: 20px;
|
|
font-weight: normal;
|
|
}
|
|
.mod-panel tr p.name{
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
}
|
|
.mod-panel tr .download{
|
|
display: inline-block;
|
|
padding: 0 15px;
|
|
background: #32ccc8;
|
|
color: #fff;
|
|
line-height: 32px;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
text-decoration: none;
|
|
}
|
|
.mod-panel tr .download:hover{
|
|
background: #2e9e9b;
|
|
}
|
|
|
|
.mod-qrcode{
|
|
position: fixed;
|
|
right: 25px;
|
|
bottom: 25px;
|
|
text-align: center;
|
|
}
|
|
.mod-qrcode .box{
|
|
width: 150px;
|
|
height: 148px;
|
|
overflow: hidden;
|
|
}
|
|
.mod-qrcode p{
|
|
line-height: 30px;
|
|
}
|
|
@media screen and (max-width: 800px) {
|
|
.mod-panel .hd{
|
|
padding-top: 10px;
|
|
}
|
|
.mod-panel .hd h1{
|
|
font-size: 20px;
|
|
}
|
|
.mod-panel .hd p{
|
|
line-height: 22px;
|
|
overflow: hidden;
|
|
}
|
|
.mod-panel .hd span.tag{
|
|
top: 5px;
|
|
margin-left: -148px;
|
|
font-size: 13px;
|
|
}
|
|
.mod-panel .c-hd ul{
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
.mod-panel .c-hd li{
|
|
float: none;
|
|
display: inline-block;
|
|
width: auto;
|
|
}
|
|
.mod-panel .c-hd li a{
|
|
padding: 0 4px;
|
|
}
|
|
.mod-panel textarea{
|
|
width: 100%;
|
|
height: 80px;
|
|
box-sizing: border-box;
|
|
}
|
|
.mod-panel .bd p span{
|
|
float: left;
|
|
width: 50%;
|
|
text-align: center;
|
|
margin-right: 0;
|
|
}
|
|
.mod-panel .btn{
|
|
width: 48%;
|
|
margin-bottom: 5px;
|
|
line-height: 24px;
|
|
}
|
|
.mod-panel .btn-3{
|
|
width: 32%;
|
|
}
|
|
|
|
.mod-qrcode{
|
|
position: static;
|
|
margin-bottom: 10px;
|
|
}
|
|
.mod-qrcode .box{
|
|
margin: 0 auto;
|
|
}
|
|
}
|