更换切换开关

master
RuoYi 5 years ago committed by Limy
parent 3c94411d03
commit ea0a1f3d0a

@ -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>&nbsp;

@ -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…
Cancel
Save