updated 首页样式改版
This commit is contained in:
PASSER-BY
parent
7964c8c1cb
commit
03b508590f
@ -98,7 +98,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="operation">
|
<div class="operation">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<p>快速选择：</p>
|
|
||||||
<p>
|
<p>
|
||||||
<span>
|
<span>
|
||||||
<button class="btn btn-small" data-value="爸爸">父</button>
|
<button class="btn btn-small" data-value="爸爸">父</button>
|
||||||
@ -123,9 +122,9 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<button class="btn btn-orange">回退</button>
|
<button class="btn btn-3 btn-orange">回退</button>
|
||||||
<button class="btn btn-red">清空</button>
|
<button class="btn btn-3 btn-red">清空</button>
|
||||||
<button class="btn btn-green">计算</button>
|
<button class="btn btn-3 btn-green">计算</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|||||||
103
style/index.css
103
style/index.css
@ -6,7 +6,7 @@ body{
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: Arial,Helvetica,"Microsoft Yahei";
|
font-family: Arial,Helvetica,"Microsoft Yahei";
|
||||||
color:#757575;
|
color: rgb(110, 119, 129);
|
||||||
}
|
}
|
||||||
button, input {
|
button, input {
|
||||||
font-family: Arial,Helvetica,"Microsoft Yahei";
|
font-family: Arial,Helvetica,"Microsoft Yahei";
|
||||||
@ -16,7 +16,7 @@ img{
|
|||||||
}
|
}
|
||||||
a{
|
a{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #757575;
|
color: rgb(110, 119, 129);
|
||||||
}
|
}
|
||||||
a:hover{
|
a:hover{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
@ -34,7 +34,7 @@ a:hover{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mod-head .hd,.mod-head .bd{
|
.mod-head .hd,.mod-head .bd{
|
||||||
max-width: 540px;
|
max-width: 500px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
margin:0 auto;
|
margin:0 auto;
|
||||||
}
|
}
|
||||||
@ -55,39 +55,54 @@ a:hover{
|
|||||||
border-bottom-right-radius: 6px;
|
border-bottom-right-radius: 6px;
|
||||||
}
|
}
|
||||||
.mod-head .bd{
|
.mod-head .bd{
|
||||||
padding: 10px;
|
height: 36px;
|
||||||
line-height: 30px;
|
padding: 10px 10px 0;
|
||||||
|
margin-bottom: 5px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.mod-head .btn{
|
.mod-head .btn{
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 80px;
|
min-width: 56px;
|
||||||
height: 30px;
|
height: 34px;
|
||||||
|
background: #fff;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
border: medium none;
|
border: 1px solid #ececec;
|
||||||
background: #eee;
|
border-radius: 6px;
|
||||||
line-height: 30px;
|
line-height: 32px;
|
||||||
text-align: center;
|
|
||||||
font-family: Tahoma,Arial, Helvetica,"Microsoft YaHei";
|
|
||||||
font-size: 15px;
|
|
||||||
color: #333;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: 3px;
|
text-align: center;
|
||||||
box-sizing: border-box;
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: color .2s,opacity .2s;
|
||||||
|
font-family: Tahoma,Arial, Helvetica,"Microsoft YaHei";
|
||||||
outline: none;
|
outline: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
.mod-head .btn:hover{
|
.mod-head .btn:after {
|
||||||
background: #e4e4e4;
|
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-blue{
|
.mod-head .btn span,.mod-head .btn svg{
|
||||||
background: #2095f2;
|
vertical-align: middle;
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
.mod-head .btn-blue:hover {
|
.mod-head .btn:hover {
|
||||||
background: #207fcc;
|
color: #000;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.mod-head .btn:hover:after {
|
||||||
|
opacity: .02;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mod-panel {
|
.mod-panel {
|
||||||
@ -95,9 +110,8 @@ a:hover{
|
|||||||
}
|
}
|
||||||
.mod-panel h1{
|
.mod-panel h1{
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
font-weight: 500;
|
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
color:#333;
|
color:#212121;
|
||||||
}
|
}
|
||||||
.mod-panel h2{
|
.mod-panel h2{
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
@ -106,13 +120,14 @@ a:hover{
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
.mod-panel .hd,.mod-panel .bd{
|
.mod-panel .hd,.mod-panel .bd{
|
||||||
max-width: 540px;
|
max-width: 500px;
|
||||||
margin:0 auto;
|
margin:0 auto;
|
||||||
}
|
}
|
||||||
.mod-panel .hd{
|
.mod-panel .hd{
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
|
margin-bottom: 5px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.mod-panel .hd b{
|
.mod-panel .hd b{
|
||||||
margin: 0 3px;
|
margin: 0 3px;
|
||||||
@ -121,7 +136,7 @@ a:hover{
|
|||||||
.mod-panel .bd .c-hd{
|
.mod-panel .bd .c-hd{
|
||||||
height: 36px;
|
height: 36px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
border-bottom: 1px solid #e2e2e2;
|
border-bottom: 1px solid #f0f0f0;
|
||||||
}
|
}
|
||||||
.mod-panel .bd .c-hd li{
|
.mod-panel .bd .c-hd li{
|
||||||
float: left;
|
float: left;
|
||||||
@ -179,8 +194,8 @@ a:hover{
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
background: #fafafa;
|
background: #f6f6f6;
|
||||||
border: 1px solid #e8e8e8;
|
border: 1px solid #ebebeb;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
@ -193,7 +208,7 @@ a:hover{
|
|||||||
.mod-panel .bd .btn {
|
.mod-panel .bd .btn {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
min-width: 90px;
|
min-width: 90px;
|
||||||
background: #eeeeee;
|
background: #f0f0f0;
|
||||||
border: medium none;
|
border: medium none;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
@ -240,8 +255,8 @@ a:hover{
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
padding:5px 10px;
|
padding:5px 10px;
|
||||||
background: #fafafa;
|
background: #f6f6f6;
|
||||||
border: 1px solid #e9e9e9;
|
border: 1px solid #ebebeb;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
resize: none;
|
resize: none;
|
||||||
@ -284,29 +299,28 @@ a:hover{
|
|||||||
color: #fd7474;
|
color: #fd7474;
|
||||||
}
|
}
|
||||||
.mod-panel .intro,.mod-panel .article{
|
.mod-panel .intro,.mod-panel .article{
|
||||||
padding: 10px 20px;
|
padding: 15px 20px;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
background: rgb(246, 248, 250);
|
background: #f6f6f6;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: rgb(110, 119, 129);
|
|
||||||
}
|
}
|
||||||
.mod-panel .intro h3{
|
.mod-panel .intro h3{
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: rgba(36, 41, 47, 0.8);
|
color: #646464;
|
||||||
}
|
}
|
||||||
.mod-panel .intro p{
|
.mod-panel .intro p{
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
.mod-panel .article p{
|
|
||||||
line-height: 22px;
|
|
||||||
text-indent: 2em;
|
|
||||||
}
|
|
||||||
.mod-panel .intro p.q{
|
.mod-panel .intro p.q{
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: rgba(36, 41, 47, 0.8);
|
color: #646464;
|
||||||
|
}
|
||||||
|
.mod-panel .article p{
|
||||||
|
line-height: 22px;
|
||||||
|
text-indent: 2em;
|
||||||
}
|
}
|
||||||
.mod-panel .table-inner{
|
.mod-panel .table-inner{
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
@ -411,6 +425,9 @@ a:hover{
|
|||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
.mod-panel .btn-3{
|
||||||
|
width: 32%;
|
||||||
|
}
|
||||||
|
|
||||||
.mod-qrcode{
|
.mod-qrcode{
|
||||||
position: static;
|
position: static;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user