init

uni_modules/nutui-uni/components/switch/index.scss

@@ -0,0 +1,74 @@
+.nut-theme-dark {
+  .nut-switch {
+    &.nut-switch-close {
+      background-color: $dark-background4;
+    }
+  }
+}
+
+.nut-switch {
+  display: inline-flex;
+  flex: 0 0 auto; // 防止被压缩
+  align-items: center;
+  cursor: pointer;
+  background-color: $primary-color;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 100%;
+  border-radius: $switch-border-radius;
+
+  .nut-icon-loading1 {
+    width: 12px;
+    height: 12px;
+    font-size: 12px;
+  }
+
+  &.nut-switch-close {
+    background-color: $switch-close-bg-color;
+  }
+
+  .nut-switch-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $white;
+    border-radius: 50%;
+    transition: transform 0.3s;
+
+    .nut-switch-label {
+      font-size: $font-size-1;
+      color: $white;
+
+      &.open {
+        transform: translateX(-16px);
+      }
+
+      &.close {
+        transform: translateX(16px);
+      }
+    }
+  }
+
+  &.nut-switch-disabled {
+    opacity: 0.6;
+  }
+
+  &.nut-switch-base {
+    min-width: $switch-width;
+    height: $switch-height;
+    overflow: hidden;
+    line-height: $switch-line-height;
+
+    .nut-switch-button {
+      width: $switch-inside-width;
+      height: $switch-inside-height;
+      transform: $switch-inside-close-transform;
+    }
+
+    &.nut-switch-open {
+      .nut-switch-button {
+        transform: $switch-inside-open-transform;
+      }
+    }
+  }
+}