dpzvc-ui 1.0.0

package/src/styles/components/spinner.less

@@ -0,0 +1,328 @@
+// spinner.less - 完整可用版本（无 unit()/round()，可直接编译）
+@SpinnerSize: 28px;
+@SpinnerColor: #ccc;
+
+// ---------- Blade Spinner ----------
+.dpzvc-spinner-blade {
+  position: relative;
+  height: @SpinnerSize;
+  width: @SpinnerSize;
+
+  .blade {
+    position: absolute;
+    left: 44.5%;
+    top: 37%;
+    width: 10%;
+    height: 25%;
+    border-radius: ~'50% / 20%';
+    animation: dpzvc-spinner-blade 1s linear infinite;
+    background-color: @SpinnerColor;
+  }
+
+  .blade-0 {
+    transform: rotate(30deg) translate(0, -150%);
+    animation-delay: -1.6667s;
+  }
+
+  .blade-1 {
+    transform: rotate(60deg) translate(0, -150%);
+    animation-delay: -1.5s;
+  }
+
+  .blade-2 {
+    transform: rotate(90deg) translate(0, -150%);
+    animation-delay: -1.3333s;
+  }
+
+  .blade-3 {
+    transform: rotate(120deg) translate(0, -150%);
+    animation-delay: -1.1667s;
+  }
+
+  .blade-4 {
+    transform: rotate(150deg) translate(0, -150%);
+    animation-delay: -1s;
+  }
+
+  .blade-5 {
+    transform: rotate(180deg) translate(0, -150%);
+    animation-delay: -0.8333s;
+  }
+
+  .blade-6 {
+    transform: rotate(210deg) translate(0, -150%);
+    animation-delay: -0.6667s;
+  }
+
+  .blade-7 {
+    transform: rotate(240deg) translate(0, -150%);
+    animation-delay: -0.5s;
+  }
+
+  .blade-8 {
+    transform: rotate(270deg) translate(0, -150%);
+    animation-delay: -0.3333s;
+  }
+
+  .blade-9 {
+    transform: rotate(300deg) translate(0, -150%);
+    animation-delay: -0.1667s;
+  }
+
+  .blade-10 {
+    transform: rotate(330deg) translate(0, -150%);
+    animation-delay: 0s;
+  }
+
+  .blade-11 {
+    transform: rotate(360deg) translate(0, -150%);
+    animation-delay: 0.1667s;
+  }
+}
+
+@keyframes dpzvc-spinner-blade {
+  0% {
+    opacity: 0.85;
+  }
+
+  50% {
+    opacity: 0.25;
+  }
+
+  100% {
+    opacity: 0.25;
+  }
+}
+
+// ---------- Double Bounce Spinner ----------
+.dpzvc-spinner-double-bounce {
+  position: relative;
+  height: @SpinnerSize;
+  width: @SpinnerSize;
+
+  .bounce {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: dpzvc-spinner-double-bounce 2s infinite ease-in-out;
+    background-color: @SpinnerColor;
+  }
+
+  .bounce-1 {
+    animation-delay: -1s;
+  }
+}
+
+@keyframes dpzvc-spinner-double-bounce {
+
+  0%,
+  100% {
+    transform: scale(0);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+}
+
+// ---------- Triple Bounce Spinner ----------
+@unitSize: @SpinnerSize / 3; // 28px / 3 = 9.3333px
+
+.dpzvc-spinner-triple-bounce {
+  font-size: 0;
+  padding: (@SpinnerSize - @unitSize) / 2 0;
+
+  .bounce {
+    border-radius: 100%;
+    display: inline-block;
+    animation: dpzvc-spinner-triple-bounce 1.4s infinite ease-in-out both;
+    background-color: @SpinnerColor;
+    width: @unitSize;
+    height: @unitSize;
+  }
+
+  .bounce-0 {
+    animation-delay: -0.32s;
+  }
+
+  .bounce-1 {
+    animation-delay: -0.16s;
+    margin: 0 (@unitSize * 0.4);
+  }
+}
+
+@keyframes dpzvc-spinner-triple-bounce {
+
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+}
+
+// ---------- Fading Circle Spinner ----------
+.dpzvc-spinner-fading-circle {
+  position: relative;
+  height: @SpinnerSize;
+  width: @SpinnerSize;
+
+  .block {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+
+    .circle {
+      margin: 0 auto;
+      width: 15%;
+      height: 15%;
+      border-radius: 100%;
+      animation: dpzvc-spinner-fading-circle 1.2s infinite ease-in-out both;
+      background-color: @SpinnerColor;
+    }
+  }
+
+  // 写死 12 个 block 类
+  .block-0 {
+    transform: rotate(0deg);
+
+    .circle-0 {
+      animation-delay: -1.2s;
+    }
+  }
+
+  .block-1 {
+    transform: rotate(30deg);
+
+    .circle-1 {
+      animation-delay: -1.1s;
+    }
+  }
+
+  .block-2 {
+    transform: rotate(60deg);
+
+    .circle-2 {
+      animation-delay: -1s;
+    }
+  }
+
+  .block-3 {
+    transform: rotate(90deg);
+
+    .circle-3 {
+      animation-delay: -0.9s;
+    }
+  }
+
+  .block-4 {
+    transform: rotate(120deg);
+
+    .circle-4 {
+      animation-delay: -0.8s;
+    }
+  }
+
+  .block-5 {
+    transform: rotate(150deg);
+
+    .circle-5 {
+      animation-delay: -0.7s;
+    }
+  }
+
+  .block-6 {
+    transform: rotate(180deg);
+
+    .circle-6 {
+      animation-delay: -0.6s;
+    }
+  }
+
+  .block-7 {
+    transform: rotate(210deg);
+
+    .circle-7 {
+      animation-delay: -0.5s;
+    }
+  }
+
+  .block-8 {
+    transform: rotate(240deg);
+
+    .circle-8 {
+      animation-delay: -0.4s;
+    }
+  }
+
+  .block-9 {
+    transform: rotate(270deg);
+
+    .circle-9 {
+      animation-delay: -0.3s;
+    }
+  }
+
+  .block-10 {
+    transform: rotate(300deg);
+
+    .circle-10 {
+      animation-delay: -0.2s;
+    }
+  }
+
+  .block-11 {
+    transform: rotate(330deg);
+
+    .circle-11 {
+      animation-delay: -0.1s;
+    }
+  }
+}
+
+@keyframes dpzvc-spinner-fading-circle {
+
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+
+  40% {
+    opacity: 1;
+  }
+}
+
+// ---------- Snake Spinner ----------
+.dpzvc-spinner-snake {
+  animation: dpzvc-spinner-snake 0.8s infinite linear;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 50%;
+  box-sizing: border-box;
+  height: @SpinnerSize;
+  width: @SpinnerSize;
+  border-width: @SpinnerSize / 8;
+  border-top-color: @SpinnerColor;
+  border-left-color: @SpinnerColor;
+  border-bottom-color: @SpinnerColor;
+}
+
+@keyframes dpzvc-spinner-snake {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/styles/components/swipe.less

@@ -0,0 +1,125 @@
+.dpzvc-swipe {
+  width: 100%;
+  position: relative;
+  height: auto;
+  overflow-x: hidden;
+
+  &-wrapper {
+
+    position: relative;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    transition: transform .2s ease-out;
+    will-change: transform;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  &-item {
+    flex: 1;
+
+    &.multiple {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+
+    }
+
+    >img {
+      display: block;
+      width: 100%;
+      height: 80%;
+      object-fit: cover;
+    }
+
+    >span {
+      display: block;
+      width: 100%;
+      line-height: 25px;
+      text-align: center;
+
+    }
+  }
+
+  &-single {
+    display: block;
+
+    >img {
+      display: block;
+      width: 100%;
+      height: 80%;
+      object-fit: cover;
+    }
+
+    >span {
+      display: block;
+      width: 100%;
+      line-height: 25px;
+      text-align: center;
+    }
+
+  }
+
+  &-multiple {
+    display: block;
+    flex: 1;
+    height: 100%;
+
+    >img {
+      display: block;
+      width: 100%;
+      height: 80%;
+      object-fit: cover;
+    }
+
+    >span {
+      display: block;
+      width: 100%;
+      line-height: 25px;
+      text-align: center;
+    }
+  }
+
+  &-dragging {
+    transition: none;
+    will-change: none
+  }
+
+  &-dots {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    align-items: center;
+
+    &-item {
+      margin: 0 2px;
+      background: #ffffff;
+      opacity: 0.3;
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      display: inline-block;
+
+    }
+
+    &-bottom {
+      bottom: 20px;
+    }
+
+    &-top {
+      top: 20px;
+    }
+  }
+
+  .dpzvc-swipe-dots-item.active {
+    opacity: 1;
+  }
+
+}

package/src/styles/components/switchBar.less

@@ -0,0 +1,88 @@
+.dpzvc-switch-ui {
+  display: block;
+  width: 35px;
+  height: 20px;
+  background: #ccc;
+  border-radius: 100px;
+  cursor: pointer;
+  position: relative;
+  -webkit-transition: all .3s ease;
+  -moz-transition: all .3s ease;
+  transition: all .3s ease;
+
+  &.small {
+    width: 24px;
+    height: 14px;
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    width: 18px;
+    height: 18px;
+    border-radius: 100px;
+    background: #fff;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    -webkit-transition: all .3s ease;
+    -moz-transition: all .3s ease;
+    transition: all .3s ease;
+  }
+
+
+  &.small:after {
+    width: 12px;
+    height: 12px;
+  }
+
+  &:active:after {
+    width: 24px;
+  }
+
+  &.small:active:after {
+    width: 16px;
+  }
+
+
+
+
+}
+
+
+
+
+.dpzvc-switch-checkbox:checked~label {
+  background: #39f;
+}
+
+.dpzvc-switch-checkbox:checked~label:after {
+  left: 16px;
+}
+
+.dpzvc-switch-checkbox:checked~label:active:after {
+  left: 10px;
+}
+
+
+.dpzvc-switch-checkbox:checked~label.small:after {
+  left: 11px;
+}
+
+.dpzvc-switch-checkbox:checked~label.small:active:after {
+  left: 7px;
+}
+
+.dpzvc-switch-checkbox:disabled~label {
+  background: #d5d5d5;
+  pointer-events: none;
+}
+
+.dpzvc-switch-checkbox:disabled~label:after {
+  background: #bcbdbc;
+}
+
+.dpzvc-switch-checkbox.hidden {
+  display: none;
+}

package/src/styles/components/tab.less

@@ -0,0 +1,69 @@
+.dpzvc-tab {
+  background: @TabBgColor;
+  position: absolute;
+  height: @TabHeight;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-sizing: content-box;
+
+
+  ul {
+    display: flex;
+    height: 100%;
+
+    li {
+      position: relative;
+      flex: 1;
+      width: 0%;
+      height: 100%;
+      color: @TabTxtColor;
+      font-size: @TabTxtSize;
+      line-height: @TabTxtSize;
+
+      a {
+        width: 100%;
+        display: inline-block;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate3d(-50%, -50%, 0);
+        vertical-align: middle;
+        text-align: center;
+        color: #666666;
+
+        i {
+          display: inline-block;
+          font-size: 22px;
+          line-height: 1;
+          margin-top: 2px;
+          text-align: center;
+        }
+
+
+        span {
+          display: inline-block;
+          width: 100%;
+          text-align: center;
+          line-height: 23px;
+        }
+
+        p {
+          width: 100%;
+          display: inline-block;
+        }
+
+
+        &.cur {
+          color: @TabTxtColorCur;
+        }
+
+      }
+
+
+
+    }
+  }
+
+
+}

package/src/styles/components/text.less

@@ -0,0 +1,80 @@
+.dpzvc-textBar {
+
+  background: #ffffff;
+  overflow: hidden;
+
+  &-input {
+    width: 100%;
+    display: inline-block;
+
+    &>input {
+      border: 1px solid @TextBorderColor;
+      border-radius: 0;
+      height: @TextInputHeight;
+      box-sizing: border-box;
+      width: 100%;
+      padding-left: 10px;
+      color: @TextColor;
+      transition: all .2s linear;
+    }
+
+    &>input:focus {
+
+      border-color: @ThemeColor;
+      box-shadow: 0 0 2px @ThemeColor
+    }
+
+    &>input::placeholder {
+      color: @TextPlaceholderColor;
+      font-family: "Microsoft Tai Le";
+    }
+  }
+
+
+  &-textarea {
+
+    width: 100%;
+    display: inline-block;
+
+    &>textarea {
+      width: 100%;
+      padding: 10px 5px;
+      box-sizing: border-box;
+      height: @TextAreaHeight;
+      border: 1px solid @TextBorderColor;
+      border-radius: 0;
+      color: @TextColor;
+      transition: border-color .2s linear;
+      will-change: border-color;
+      font-size: 12px;
+    }
+
+    &>textarea:focus {
+      border-color: #39f;
+      box-shadow: 0 0 2px #39f
+    }
+
+    &>textarea::placeholder {
+      color: #e5e5e5;
+      font-family: "Microsoft Tai Le";
+    }
+  }
+
+
+
+  &-tip {
+    flex: 1;
+    align-self: center;
+    text-indent: 3px;
+    line-height: 1;
+    font-size: 12px;
+  }
+
+  &-tip.success {
+    color: lightgreen;
+  }
+
+  &-tip.error {
+    color: red;
+  }
+}

package/src/styles/components/toTop.less

@@ -0,0 +1,26 @@
+.dpzvc-toTop {
+  position: fixed;
+  right: 15px;
+  bottom: 80px;
+  z-index: 100;
+
+  &-wrapper {
+    position: relative;
+    width: 45px;
+    height: 45px;
+    border-radius: 100%;
+    background: @ThemeColor;
+
+    &:before {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      content: '';
+      border-top: 2px solid #ffffff;
+      border-right: 2px solid #ffffff;
+      transform: rotate(-45deg) translate3d(-15%, -60%, 0);
+      height: 15px;
+      width: 15px;
+    }
+  }
+}

package/src/styles/components/upload.less

@@ -0,0 +1,23 @@
+.dpzvc-upload {
+  position: relative;
+
+  &-wrapper {
+    width: 100%;
+    height: 100%;
+    background: #39f;
+    color: #ffffff;
+    line-height: 50px;
+    text-align: center;
+    border-radius: 10px;
+  }
+
+  input[type=file] {
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+}