|
|
@@ -2,7 +2,7 @@
|
|
|
/*示例:
|
|
|
<div class="com-del-box">
|
|
|
<div class="title">
|
|
|
- <a><i class="fa fa-close fa-lg"></i></a>
|
|
|
+ <i></i>
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<p><i class="fa fa-exclamation-circle"></i>是否要删除此发票?</p>
|
|
|
@@ -15,7 +15,7 @@
|
|
|
*/
|
|
|
.com-del-box{
|
|
|
position: fixed;
|
|
|
- z-index: 2;
|
|
|
+ z-index: 10;
|
|
|
height: 152px;
|
|
|
opacity: 1;
|
|
|
background-color: white;
|
|
|
@@ -33,9 +33,13 @@
|
|
|
padding-right: 15px;
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
-.com-del-box .title a{
|
|
|
- color: white;
|
|
|
- font-size: 16px;
|
|
|
+.com-del-box .title i{
|
|
|
+ background: url(../img/icon/close.png) no-repeat;
|
|
|
+ display: inline-block;
|
|
|
+ width: 9px;
|
|
|
+ height: 9px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
.com-del-box .content{
|
|
|
width: 100%;
|
|
|
@@ -64,6 +68,7 @@
|
|
|
display: inline-block;
|
|
|
text-align: center;
|
|
|
font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
.com-del-box .content div a:first-child{
|
|
|
background: #b4b5b9;
|
|
|
@@ -89,17 +94,20 @@
|
|
|
display: inline-block;
|
|
|
padding: 7px 19px;
|
|
|
font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
.com-btn-level2 {
|
|
|
display: inline-block;
|
|
|
padding: 5px 11px;
|
|
|
border-radius: 2px;
|
|
|
font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
.com-btn-level3 {
|
|
|
display: inline-block;
|
|
|
padding: 5px 12px;
|
|
|
font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
/*btnType*/
|
|
|
.com-btn-submit {
|
|
|
@@ -150,25 +158,22 @@ i.fa-minus-circle{
|
|
|
|
|
|
/*---------------------标准控件-单选框start---------------------*/
|
|
|
/** html代码
|
|
|
- <label class="check-act">
|
|
|
+ <label class="com-check-radio">
|
|
|
<input type="radio" id="effect" name="radio">
|
|
|
<label for="effect"></label>
|
|
|
生效
|
|
|
</label>
|
|
|
- <label class="check-act">
|
|
|
+ <label class="com-check-radio">
|
|
|
<input type="radio" id="no-effect" name="radio" checked="checked">
|
|
|
<label for="no-effect"></label>
|
|
|
暂不生效
|
|
|
</label>
|
|
|
**/
|
|
|
-.check-act{
|
|
|
- margin-right: 40px!important;
|
|
|
-}
|
|
|
-.check-act input[type='radio']{
|
|
|
+.com-check-radio input[type='radio']{
|
|
|
display: none!important;
|
|
|
margin: 7px 8px 0!important;
|
|
|
}
|
|
|
-.check-act input[type='radio'] + label{
|
|
|
+.com-check-radio input[type='radio'] + label{
|
|
|
position: relative!important;
|
|
|
top: 7px!important;
|
|
|
margin-right: 5px!important;
|
|
|
@@ -176,45 +181,43 @@ i.fa-minus-circle{
|
|
|
width: 12px!important;
|
|
|
height: 12px!important;
|
|
|
font-weight: normal!important;
|
|
|
- background: url(static/img/icon/check-rule.png) no-repeat!important;
|
|
|
+ background: url(../img/icon/check-rule.png) no-repeat;
|
|
|
}
|
|
|
-.check-act label{
|
|
|
+.com-check-radio label{
|
|
|
background-position: 0 0!important;
|
|
|
}
|
|
|
-.check-act input:checked + label{
|
|
|
+.com-check-radio input:checked + label{
|
|
|
background-position: -15px 0!important;
|
|
|
}
|
|
|
/*---------------------标准控件-单选框end---------------------*/
|
|
|
|
|
|
/*---------------------标准控件-复选框start---------------------*/
|
|
|
/** html代码
|
|
|
- <label class="check-act">
|
|
|
- <input type="checkbox" id="1" checked="checked">
|
|
|
- <label for="1"></label>
|
|
|
+ <label class="com-check-box">
|
|
|
+ <input type="checkbox" id="1">
|
|
|
+ <label for="1"></label>
|
|
|
</label>
|
|
|
**/
|
|
|
-.check-act input[type='checkbox'] {
|
|
|
+.com-check-box input {
|
|
|
display: none!important;
|
|
|
}
|
|
|
-.check-act input[type='checkbox'] + label{
|
|
|
+.com-check-box input[type="checkbox"] + label{
|
|
|
display: inline-block!important ;
|
|
|
position: relative!important ;
|
|
|
top: 2px!important ;
|
|
|
width: 12px!important ;
|
|
|
height: 12px!important ;
|
|
|
- background: url(static/img/icon/check-rule.png) no-repeat!important ;
|
|
|
-}
|
|
|
-.check-act label {
|
|
|
+ background: url(../img/icon/check-rule.png) no-repeat ;
|
|
|
background-position: -48px 0;
|
|
|
}
|
|
|
-.check-act input:checked + label {
|
|
|
+.com-check-box input:checked + label {
|
|
|
background-position: -31px 0;
|
|
|
}
|
|
|
/*---------------------标准控件-复选框end---------------------*/
|
|
|
|
|
|
/*---------------------标准控件-开关(蓝色)start---------------------*/
|
|
|
/** html代码
|
|
|
- <div class="switch">
|
|
|
+ <div class="com-switch-blue">
|
|
|
<span class="checkbox">
|
|
|
<span><em></em></span>
|
|
|
</span>
|
|
|
@@ -223,13 +226,13 @@ i.fa-minus-circle{
|
|
|
</span>
|
|
|
</div>
|
|
|
**/
|
|
|
-div.switch .checkbox {
|
|
|
+div.com-switch-blue .checkbox {
|
|
|
margin: 0 auto;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
display: block;
|
|
|
}
|
|
|
-div.switch .checkbox span {
|
|
|
+div.com-switch-blue .checkbox span {
|
|
|
width: 46px;
|
|
|
height: 12px;
|
|
|
display: inline-block;
|
|
|
@@ -241,13 +244,13 @@ div.switch .checkbox span {
|
|
|
background: -webkit-gradient(linear,0% 0%, 0% 100%, from(#E0E0E0), to(#E8E8E8), color-stop(0.5,#F2F2F2));
|
|
|
transition: background-color .1s ease-out;
|
|
|
}
|
|
|
-div.switch .checkbox.active span{
|
|
|
+div.com-switch-blue .checkbox.active span{
|
|
|
background: #b9cffa;
|
|
|
}
|
|
|
-div.switch .checkbox.active span em{
|
|
|
+div.com-switch-blue .checkbox.active span em{
|
|
|
left: 34px;
|
|
|
}
|
|
|
-div.switch .checkbox span em{
|
|
|
+div.com-switch-blue .checkbox span em{
|
|
|
position: absolute;
|
|
|
width: 16px;
|
|
|
top: -5px;
|
|
|
@@ -262,7 +265,7 @@ div.switch .checkbox span em{
|
|
|
color: #666;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
-div.switch .checkbox span em:after{
|
|
|
+div.com-switch-blue .checkbox span em:after{
|
|
|
content: '';
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
@@ -277,7 +280,7 @@ div.switch .checkbox span em:after{
|
|
|
|
|
|
/*---------------------标准控件-开关(绿色)start---------------------*/
|
|
|
/** html代码
|
|
|
- <div class="switch">
|
|
|
+ <div class="com-switch-green">
|
|
|
<span class="checkbox">
|
|
|
<span><em></em></span>
|
|
|
</span>
|
|
|
@@ -286,13 +289,13 @@ div.switch .checkbox span em:after{
|
|
|
</span>
|
|
|
</div>
|
|
|
**/
|
|
|
-div.switch .checkbox {
|
|
|
+div.com-switch-green .checkbox {
|
|
|
margin: 0 auto;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
display: block;
|
|
|
}
|
|
|
-div.switch .checkbox span {
|
|
|
+div.com-switch-green .checkbox span {
|
|
|
width: 34px;
|
|
|
height: 18px;
|
|
|
display: inline-block;
|
|
|
@@ -304,13 +307,13 @@ div.switch .checkbox span {
|
|
|
background: -webkit-gradient(linear,0% 0%, 0% 100%, from(#bbbcba), to(#bfc1be), color-stop(0.5,#c5c7c4));
|
|
|
transition: background-color .1s ease-out;
|
|
|
}
|
|
|
-div.switch .checkbox.active span{
|
|
|
+div.com-switch-green .checkbox.active span{
|
|
|
background: #3acb14;
|
|
|
}
|
|
|
-div.switch .checkbox.active span em{
|
|
|
+div.com-switch-green .checkbox.active span em{
|
|
|
left: 18px;
|
|
|
}
|
|
|
-div.switch .checkbox span em{
|
|
|
+div.com-switch-green .checkbox span em{
|
|
|
position: absolute;
|
|
|
top: -2px;
|
|
|
left: -3px;
|
|
|
@@ -325,7 +328,7 @@ div.switch .checkbox span em{
|
|
|
color: #666;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
-div.switch .checkbox span em:after{
|
|
|
+div.com-switch-green .checkbox span em:after{
|
|
|
content: '';
|
|
|
width: 6px;
|
|
|
height: 6px;
|