mirror of https://gitee.com/y_project/RuoYi.git
更换切换开关
RuoYi
parent
07dc3ee287
commit
b90b1704cf
|
|
@ -413,6 +413,79 @@ label.error {
|
|||
background-position: -180px 0
|
||||
}
|
||||
|
||||
/* 切换开关 */
|
||||
.toggle-switch {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.toggle-switch input {
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
.toggle-switch span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: #ebebeb;
|
||||
border: 2px solid #ebebeb;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all .1s ease;
|
||||
-o-transition: all .1s ease;
|
||||
transition: all .1s ease
|
||||
}
|
||||
.toggle-switch span:after {
|
||||
content: '';
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: -7px;
|
||||
color: #aaa;
|
||||
-webkit-transition: all .1s ease;
|
||||
-o-transition: all .1s ease;
|
||||
transition: all .1s ease;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
background-color: #fff;
|
||||
-webkit-box-shadow: rgba(0,0,0,.12) 0 1px 6px,rgba(0,0,0,.12) 0 1px 4px;
|
||||
box-shadow: rgba(0,0,0,.12) 0 1px 6px,rgba(0,0,0,.12) 0 1px 4px
|
||||
}
|
||||
.toggle-switch input:checked~span:after {
|
||||
left: -webkit-calc(100% - 20px);
|
||||
left: calc(100% - 20px);
|
||||
background-color: #15c377
|
||||
}
|
||||
|
||||
.toggle-switch.switch-solid span {
|
||||
height: 20px;
|
||||
}
|
||||
.toggle-switch.switch-solid span:after {
|
||||
top: -2px;
|
||||
}
|
||||
.switch-solid input:checked~span {
|
||||
background-color: #15c377;
|
||||
border-color: #15c377
|
||||
}
|
||||
.switch-solid input:checked~span:after {
|
||||
background-color: #fff;
|
||||
color: #15c377
|
||||
}
|
||||
|
||||
/** 遮罩层 **/
|
||||
.loaderbox {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -28,13 +28,10 @@
|
|||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">状态：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" th:checked="true" class="onoffswitch-checkbox" id="status" name="status">
|
||||
<label class="onoffswitch-label" for="status">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
<label class="toggle-switch switch-solid">
|
||||
<input type="checkbox" id="status" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
|
|||
|
|
@ -29,13 +29,10 @@
|
|||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">状态：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" th:checked="${role.status == '0' ? true : false}" class="onoffswitch-checkbox" id="status" name="status">
|
||||
<label class="onoffswitch-label" for="status">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
<label class="toggle-switch switch-solid">
|
||||
<input type="checkbox" id="status" th:checked="${role.status == '0' ? true : false}">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
|
|||
|
|
@ -83,13 +83,10 @@
|
|||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label">用户状态：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" th:checked="true" class="onoffswitch-checkbox" id="status">
|
||||
<label class="onoffswitch-label" for="status">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
<label class="toggle-switch switch-solid">
|
||||
<input type="checkbox" id="status" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -131,6 +128,7 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-offset-5 col-sm-10">
|
||||
<button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>
|
||||
|
|
|
|||
|
|
@ -62,13 +62,10 @@
|
|||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label">用户状态：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" th:checked="${user.status == '0' ? true : false}" class="onoffswitch-checkbox" id="status">
|
||||
<label class="onoffswitch-label" for="status">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
<label class="toggle-switch switch-solid">
|
||||
<input type="checkbox" id="status" th:checked="${user.status == '0' ? true : false}">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -101,13 +101,10 @@
|
|||
</label>
|
||||
|
||||
<div class="col-sm-9">
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" th:checked="true" class="onoffswitch-checkbox" id="status" name="status">
|
||||
<label class="onoffswitch-label" for="status">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
<label class="toggle-switch switch-solid">
|
||||
<input type="checkbox" id="status" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group draggable">
|
||||
|
|
|
|||
Loading…
Reference in New Issue