更换切换开关

ruoyi-admin/src/main/resources/static/ruoyi/css/ry-ui.css

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

ruoyi-admin/src/main/resources/templates/system/role/add.html

@@ -28,15 +28,12 @@
 			<div class="form-group">
 				<label class="col-sm-3 control-label">状态：</label>
 				<div class="col-sm-8">
-					<div class="onoffswitch">
+			        <label class="toggle-switch switch-solid">
-                         <input type="checkbox" th:checked="true" class="onoffswitch-checkbox" id="status" name="status">
+                        <input type="checkbox" id="status" checked>
-                         <label class="onoffswitch-label" for="status">
+                        <span></span>
-                             <span class="onoffswitch-inner"></span>
-                             <span class="onoffswitch-switch"></span>
                     </label>
 				</div>
 			</div>
-			</div>
 			<div class="form-group">
 				<label class="col-sm-3 control-label">备注：</label>
 				<div class="col-sm-8">

ruoyi-admin/src/main/resources/templates/system/role/edit.html

@@ -29,15 +29,12 @@
 			<div class="form-group">
 				<label class="col-sm-3 control-label">状态：</label>
 				<div class="col-sm-8">
-					<div class="onoffswitch">
+					<label class="toggle-switch switch-solid">
-                         <input type="checkbox" th:checked="${role.status == '0' ? true : false}" class="onoffswitch-checkbox" id="status" name="status">
+                        <input type="checkbox" id="status" th:checked="${role.status == '0' ? true : false}">
-                         <label class="onoffswitch-label" for="status">
+                        <span></span>
-                             <span class="onoffswitch-inner"></span>
-                             <span class="onoffswitch-switch"></span>
                     </label>
 				</div>
 			</div>
-			</div>
 			<div class="form-group">
 				<label class="col-sm-3 control-label">备注：</label>
 				<div class="col-sm-8">

ruoyi-admin/src/main/resources/templates/system/user/add.html

@@ -83,17 +83,14 @@
                     <div class="form-group">
                         <label class="col-sm-4 control-label">用户状态：</label>
                         <div class="col-sm-8">
-                            <div class="onoffswitch">
+                            <label class="toggle-switch switch-solid">
-		                         <input type="checkbox" th:checked="true" class="onoffswitch-checkbox" id="status">
+	                            <input type="checkbox" id="status" checked>
-		                         <label class="onoffswitch-label" for="status">
+	                            <span></span>
-		                             <span class="onoffswitch-inner"></span>
-		                             <span class="onoffswitch-switch"></span>
 	                        </label>
                         </div>
                     </div>
                 </div>
             </div>
-            </div>
             <div class="row">
             	<div class="col-sm-12">
                     <div class="form-group">
@@ -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;

ruoyi-admin/src/main/resources/templates/system/user/edit.html

@@ -62,17 +62,14 @@
                     <div class="form-group">
                         <label class="col-sm-4 control-label">用户状态：</label>
                         <div class="col-sm-8">
-                            <div class="onoffswitch">
+                            <label class="toggle-switch switch-solid">
-		                         <input type="checkbox" th:checked="${user.status == '0' ? true : false}" class="onoffswitch-checkbox" id="status">
+	                            <input type="checkbox" id="status" th:checked="${user.status == '0' ? true : false}">
-		                         <label class="onoffswitch-label" for="status">
+	                            <span></span>
-		                             <span class="onoffswitch-inner"></span>
-		                             <span class="onoffswitch-switch"></span>
 	                        </label>
                         </div>
                     </div>
                 </div>
             </div>
-            </div>
             <div class="row">
                 <div class="col-sm-6">
                     <div class="form-group">

ruoyi-admin/src/main/resources/templates/tool/build/build.html

@@ -101,15 +101,12 @@
                                 </label>
 
                                 <div class="col-sm-9">
-                                    <div class="onoffswitch">
+                                    <label class="toggle-switch switch-solid">
-										 <input type="checkbox" th:checked="true" class="onoffswitch-checkbox" id="status" name="status">
+			                            <input type="checkbox" id="status" checked>
-										 <label class="onoffswitch-label" for="status">
+			                            <span></span>
-											 <span class="onoffswitch-inner"></span>
-											 <span class="onoffswitch-switch"></span>
 			                        </label>
                                 </div>
                             </div>
-                            </div>
                             <div class="form-group draggable">
                                 <label class="col-sm-3 control-label">日期选择：</label>