updated 修复一处bug及页面改版
This commit is contained in:
PASSER-BY
501
style/index.css
501
style/index.css
@@ -23,21 +23,23 @@ a:hover{
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
background: #fdfdfd;
|
||||
background: url('../image/bg.svg') center top no-repeat;
|
||||
}
|
||||
.header{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.container{
|
||||
padding: 0 15px 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.inner{
|
||||
max-width: 720px;
|
||||
max-width: 1000px;
|
||||
padding: 0 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mod-head .bd{
|
||||
max-width: 540px;
|
||||
height: 36px;
|
||||
padding: 10px;
|
||||
margin:0 auto 5px;
|
||||
padding: 10px 0;
|
||||
text-align: right;
|
||||
}
|
||||
.mod-head .bd span.language{
|
||||
@@ -45,7 +47,8 @@ a:hover{
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
padding: 0 8px;
|
||||
background: #f0f0f0;
|
||||
background: rgba(255,255,255,0.3);
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
line-height: 36px;
|
||||
color: #666;
|
||||
border-radius: 6px;
|
||||
@@ -63,9 +66,9 @@ a:hover{
|
||||
display: inline-block;
|
||||
min-width: 56px;
|
||||
height: 34px;
|
||||
background: #fff;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #ececec;
|
||||
background: rgba(255,255,255,0.3);
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
border-radius: 6px;
|
||||
line-height: 34px;
|
||||
text-decoration: none;
|
||||
@@ -107,60 +110,94 @@ a:hover{
|
||||
opacity: .02;
|
||||
}
|
||||
|
||||
.mod-panel {
|
||||
width: 100%;
|
||||
.mod-panel{
|
||||
margin-bottom: 75px;
|
||||
}
|
||||
.mod-panel h1{
|
||||
line-height: 32px;
|
||||
font-size: 22px;
|
||||
color:#212121;
|
||||
.mod-panel .hd{
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding-top: 15px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.mod-panel h1 span.tag{
|
||||
.mod-panel .hd h1{
|
||||
margin-bottom: 10px;
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
color:#1a2b3b;
|
||||
}
|
||||
.mod-panel .hd h1 span.name{
|
||||
display: block;
|
||||
}
|
||||
.mod-panel .hd h1 span.tag{
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
margin: 0 5px;
|
||||
background: rgb(246, 248, 250);
|
||||
line-height: 22px;
|
||||
background: rgba(255, 255, 255,0.8);
|
||||
line-height: 26px;
|
||||
vertical-align: middle;
|
||||
font-size: 13px;
|
||||
color: rgb(110, 119, 129);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.03);
|
||||
}
|
||||
.mod-panel h2{
|
||||
line-height: 30px;
|
||||
.mod-panel .hd p{
|
||||
line-height: 26px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.mod-panel .hd .picture{
|
||||
position: relative;
|
||||
padding-top: 15px;
|
||||
margin-right: 20%;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
}
|
||||
.mod-panel .hd,.mod-panel .bd{
|
||||
max-width: 540px;
|
||||
margin:0 auto;
|
||||
.mod-panel .hd .picture .btn{
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
margin-top: -20px;
|
||||
padding: 0 20px;
|
||||
background: #2095f2;
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
border-radius: 6px;
|
||||
line-height: 36px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
transition: color .2s,opacity .2s;
|
||||
font-family: Tahoma,Arial, Helvetica,"Microsoft YaHei";
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.mod-panel .hd{
|
||||
padding: 10px 0;
|
||||
margin-bottom: 5px;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
.mod-panel .hd .picture .btn:hover {
|
||||
background: #207fcc;
|
||||
}
|
||||
.mod-panel .hd b{
|
||||
margin: 0 3px;
|
||||
color: #fd7474;
|
||||
}
|
||||
.mod-panel .bd{
|
||||
margin-left: 55%;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.025);
|
||||
border: 1px solid rgba(0,0,0,0.025);
|
||||
}
|
||||
.mod-panel .bd .c-hd{
|
||||
height: 36px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
height: 44px;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
}
|
||||
.mod-panel .bd .c-hd li{
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
.mod-panel .bd .c-hd li a{
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -180,18 +217,36 @@ a:hover{
|
||||
background: #2095f2;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.mod-panel .bd .c-bd{
|
||||
height: 450px;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
.mod-panel .bd .c-panel{
|
||||
display: none;
|
||||
}
|
||||
.mod-panel .bd .operation{
|
||||
.mod-panel .bd .c-panel .operation{
|
||||
margin: 10px 0;
|
||||
}
|
||||
.mod-panel .bd .row{
|
||||
.mod-panel .bd .c-panel .row{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.mod-panel .bd .field{
|
||||
.mod-panel .bd .c-panel .field{
|
||||
line-height: 28px;
|
||||
}
|
||||
.mod-panel .bd .c-panel .intro{
|
||||
padding: 10px 15px;
|
||||
margin: 25px 0;
|
||||
background: #fffbf5;
|
||||
line-height: 24px;
|
||||
color: #666;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.mod-panel .bd .c-panel .intro h3{
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
.mod-panel .bd p{
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -206,7 +261,7 @@ a:hover{
|
||||
.mod-panel .bd .input-text{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
height: 36px;
|
||||
background: #fafafa;
|
||||
border: 1px solid #ebebeb;
|
||||
padding: 5px 10px;
|
||||
@@ -220,7 +275,7 @@ a:hover{
|
||||
}
|
||||
.mod-panel .bd .btn {
|
||||
height: 32px;
|
||||
min-width: 90px;
|
||||
min-width: 80px;
|
||||
background: #f0f0f0;
|
||||
border: medium none;
|
||||
line-height: 30px;
|
||||
@@ -256,7 +311,8 @@ a:hover{
|
||||
background: #e18309;
|
||||
}
|
||||
.mod-panel .bd .btn-small{
|
||||
min-width: 40px;
|
||||
min-width: 36px;
|
||||
margin-right: -1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mod-panel .bd .btn[disabled]{
|
||||
@@ -279,164 +335,144 @@ a:hover{
|
||||
line-height: 22px;
|
||||
}
|
||||
.mod-panel .bd p span{
|
||||
margin-right: 10px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.mod-panel .ft{
|
||||
padding-top: 10px;
|
||||
border-top:1px dotted #e0e0e0;
|
||||
|
||||
.mod-intro{
|
||||
margin-bottom: 65px;
|
||||
}
|
||||
.mod-panel .about{
|
||||
padding: 0 20px;
|
||||
margin-bottom: 20px;
|
||||
.mod-intro .hd{
|
||||
margin: 0 5px 5px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.mod-panel .about p{
|
||||
line-height: 24px;
|
||||
text-indent: 2em;
|
||||
.mod-intro .hd span{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #646464;
|
||||
}
|
||||
.mod-panel .copy{
|
||||
.mod-intro .bd ul{
|
||||
overflow: hidden;
|
||||
}
|
||||
.mod-intro .bd li{
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
}
|
||||
.mod-intro .bd .item{
|
||||
padding: 15px;
|
||||
margin: 0 5px 10px;
|
||||
background: rgb(246, 248, 250);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.mod-intro .bd p{
|
||||
line-height: 22px;
|
||||
}
|
||||
.mod-intro .bd p.q{
|
||||
font-weight: bold;
|
||||
color: #646464;
|
||||
}
|
||||
.mod-intro .article p{
|
||||
line-height: 22px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
.mod-intro .table-inner{
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.mod-article{
|
||||
margin-bottom: 65px;
|
||||
}
|
||||
.mod-article .bd{
|
||||
position: relative;
|
||||
padding: 30px 0;
|
||||
}
|
||||
.mod-article .bd::before{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: '“';
|
||||
font-size: 60px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.mod-article .bd::after{
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
right: 0;
|
||||
content: '”';
|
||||
font-size: 60px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.mod-article .bd p{
|
||||
margin-bottom: 12px;
|
||||
line-height: 28px;
|
||||
font-size: 15px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.mod-copy{
|
||||
margin-bottom: 65px;
|
||||
padding: 35px 0 45px;
|
||||
background: rgb(246, 248, 250);
|
||||
}
|
||||
.mod-copy .hd{
|
||||
margin: 0 5px 5px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.mod-copy .hd span{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #646464;
|
||||
}
|
||||
.mod-copy .bd{
|
||||
margin:0 5px;
|
||||
}
|
||||
.mod-copy .bd p{
|
||||
line-height: 28px;
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
.mod-copy .bd .buttons{
|
||||
margin-top: 15px;
|
||||
}
|
||||
.mod-copy .bd .text-red{
|
||||
font-weight: bold;
|
||||
color: #fd7474;
|
||||
}
|
||||
|
||||
|
||||
.mod-foot .bd{
|
||||
padding: 10px 0;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.mod-panel .copy p{
|
||||
.mod-foot .bd p{
|
||||
line-height: 22px;
|
||||
}
|
||||
.mod-panel .copy p a,.mod-panel .copy p span{
|
||||
.mod-foot .bd p a,.mod-foot .bd p span{
|
||||
vertical-align: middle;
|
||||
}
|
||||
.mod-panel .copy p.buttons{
|
||||
.mod-foot .bd 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 .banner{
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
box-shadow: 1px 2px 8px rgba(0,0,0,0.03);
|
||||
}
|
||||
.mod-panel .banner a{
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 160px;
|
||||
padding: 10px;
|
||||
background: #fcfcfc;
|
||||
.mod-foot .box{
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
margin: 0 auto 20px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mod-panel .banner a:hover{
|
||||
text-decoration: none;
|
||||
background: #fffbf5;
|
||||
}
|
||||
.mod-panel .banner img{
|
||||
margin-top: -5px;
|
||||
}
|
||||
.mod-panel .banner span{
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
}
|
||||
.mod-panel .banner span.picture{
|
||||
float: left;
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
}
|
||||
.mod-panel .banner span.title{
|
||||
margin-top: 45px;
|
||||
margin-left: 50%;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #646464;
|
||||
}
|
||||
.mod-panel .banner span.subtitle{
|
||||
margin-left: 50%;
|
||||
font-size: 18px;
|
||||
}
|
||||
.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{
|
||||
.mod-foot p{
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
@media screen and (max-width: 1020px) {
|
||||
.header{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.inner{
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.mod-head .hd span.tag{
|
||||
padding: 5px 8px;
|
||||
}
|
||||
@@ -445,28 +481,62 @@ a:hover{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mod-panel{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.mod-panel .hd{
|
||||
padding-top: 10px;
|
||||
float: none;
|
||||
padding-top: 0;
|
||||
width: auto;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.mod-panel .hd h1{
|
||||
margin-bottom: 5px;
|
||||
line-height: 26px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.mod-panel .hd h1 span.name{
|
||||
display: inline;
|
||||
}
|
||||
.mod-panel .hd p{
|
||||
line-height: 22px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mod-panel .c-hd ul{
|
||||
.mod-panel .hd .picture{
|
||||
margin-right: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
.mod-panel .hd .picture img{
|
||||
width: 213.33px;
|
||||
}
|
||||
.mod-panel .hd .picture .btn{
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.mod-panel .bd{
|
||||
margin-left: 0;
|
||||
}
|
||||
.mod-panel .bd .c-hd{
|
||||
text-align: center;
|
||||
}
|
||||
.mod-panel .bd .c-hd ul{
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mod-panel .c-hd li{
|
||||
.mod-panel .bd .c-hd li{
|
||||
float: none;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
min-width: 30%
|
||||
}
|
||||
.mod-panel .c-hd li a{
|
||||
.mod-panel .bd .c-hd li a{
|
||||
padding: 0 4px;
|
||||
}
|
||||
.mod-panel .bd .c-bd{
|
||||
height: auto;
|
||||
}
|
||||
.mod-panel textarea{
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
@@ -486,33 +556,58 @@ a:hover{
|
||||
.mod-panel .btn-3{
|
||||
width: 32%;
|
||||
}
|
||||
.mod-panel .banner a{
|
||||
height: 100px;
|
||||
|
||||
.mod-intro{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.mod-panel .banner img{
|
||||
zoom:0.5;
|
||||
.mod-intro .bd li{
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
.mod-panel .banner span{
|
||||
line-height: 24px;
|
||||
.mod-intro .bd .item{
|
||||
margin: 0 5px 5px;
|
||||
}
|
||||
.mod-panel .banner span.picture{
|
||||
width: 35%;
|
||||
|
||||
.mod-article{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.mod-panel .banner span.title{
|
||||
margin-top: 25px;
|
||||
margin-left: 40%;
|
||||
font-size: 18px;
|
||||
.mod-article .bd{
|
||||
padding: 15px 0;
|
||||
}
|
||||
.mod-panel .banner span.subtitle{
|
||||
margin-left: 40%;
|
||||
.mod-article .bd::before{
|
||||
font-size: 48px;
|
||||
}
|
||||
.mod-article .bd::after{
|
||||
font-size: 48px;
|
||||
}
|
||||
.mod-article .bd p{
|
||||
margin-bottom: 7px;
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mod-qrcode{
|
||||
position: static;
|
||||
margin-bottom: 10px;
|
||||
.mod-copy{
|
||||
padding: 15px 0 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.mod-qrcode .box{
|
||||
margin: 0 auto;
|
||||
.mod-copy .bd p{
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.mod-panel .inner{
|
||||
padding: 10px 0;
|
||||
}
|
||||
.mod-panel .bd .c-bd{
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.mod-intro .hd{
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
.mod-intro .bd .item{
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user