chore: split index.css

src/component/switch/index.less

@@ -0,0 +1,82 @@
+@import "../../theme/variable.less";
+
+.layui-form-switch {
+  position: relative;
+  height: 22px;
+  line-height: 22px;
+  min-width: 35px;
+  padding: 0 5px;
+  border: 1px solid @global-neutral-color-6;
+  border-radius: 20px;
+  cursor: pointer;
+  background-color: #fff;
+  -webkit-transition: 0.1s linear;
+  transition: 0.1s linear;
+}
+
+.layui-form-switch i {
+  position: absolute;
+  left: 5px;
+  top: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 20px;
+  background-color: @global-neutral-color-6;
+  -webkit-transition: 0.1s linear;
+  transition: 0.1s linear;
+}
+
+.layui-form-switch em {
+  position: relative;
+  top: 0;
+  width: 25px;
+  margin-left: 21px;
+  padding: 0 !important;
+  text-align: center !important;
+  color: #999 !important;
+  font-style: normal !important;
+  font-size: 12px;
+}
+
+.layui-form-onswitch {
+  border-color: @global-checked-color;
+  background-color: @global-checked-color;
+}
+
+.layui-form-onswitch i {
+  left: 100%;
+  margin-left: -21px;
+  background-color: #fff;
+}
+
+.layui-form-onswitch em {
+  margin-left: 5px;
+  margin-right: 21px;
+  color: #fff !important;
+}
+
+.layui-switch-disabled[lay-skin="primary"] span {
+  background: 0 0 !important;
+  color: @global-neutral-color-8 !important;
+}
+
+.layui-switch-disabled[lay-skin="primary"]:hover i {
+  border-color: @global-neutral-color-6;
+}
+
+.layui-switch-disabled,
+.layui-switch-disabled i {
+  border-color: @global-neutral-color-3 !important;
+}
+
+.layui-switch-disabled span {
+  background-color: @global-neutral-color-3 !important;
+}
+
+.layui-switch-disabled em {
+  color: @global-neutral-color-6 !important;
+}
+
+.layui-switch-disabled:hover i {
+  color: #fff !important;
+}

src/component/switch/index.vue

@@ -47,7 +47,7 @@ const handleClick = function () {
       :class="{
         'layui-disabled': disabled,
         'layui-form-onswitch': isActive,
-        'layui-checkbox-disbaled': disabled,
+        'layui-switch-disabled': disabled,
       }"
     >
       <em>{{ isActive == true ? activeText : inactiveText }}</em>