dpzvc3-ui 3.0.0

package/src/styles/components/upload.less

@@ -0,0 +1,23 @@
+.dpzvc3-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%;
+  }
+
+}

package/src/styles/index.less

@@ -0,0 +1,38 @@
+// base
+@import "base/variable.less";
+@import "base/reset.less";
+
+// utils
+@import "utils/animation.less";
+@import "utils/nowrap.less";
+@import "utils/1px.less";
+
+// components
+@import "components/header.less";
+@import "components/actionsheet.less";
+@import "components/message.less";
+@import "components/picker.less";
+@import "components/tab.less";
+@import "components/modal.less";
+@import "components/prompt.less";
+@import "components/slide-Bar.less";
+@import "components/button.less";
+@import "components/checkBox.less";
+@import "components/radioBox.less";
+@import "components/editor.less";
+@import "components/number.less";
+@import "components/text.less";
+@import "components/swipe.less";
+@import "components/switchBar.less";
+@import "components/upload.less";
+@import "components/spinner.less";
+@import "components/loadmore.less";
+@import "components/popup.less";
+@import "components/indicator.less";
+@import "components/progress.less";
+@import "components/toTop.less";
+@import "components/cell.less";
+@import "components/cell-swipe.less";
+@import "components/badge.less";
+@import "components/card.less";
+@import "base/font.less";

package/src/styles/utils/1px.less

@@ -0,0 +1,206 @@
+// 使用1px类时，需要注意 如果是absolute定位的，在引入mx-1px后，需要重新写入absolute定位
+@import "../base/variable.less";
+
+.dpzvc3-1px {
+  &-all {
+    .dpzvc3-1px(@BorderColor);
+  }
+
+  &-top {
+    .dpzvc3-1px-side(@BorderColor, top, before);
+  }
+
+  &-bottom {
+    .dpzvc3-1px-side(@BorderColor, bottom, after);
+  }
+
+  &-left {
+    .dpzvc3-1px-side(@BorderColor, left, before);
+  }
+
+  &-right {
+    .dpzvc3-1px-side(@BorderColor, right, after);
+  }
+
+  &-left-right {
+    .dpzvc3-1px-side(@BorderColor, left, before);
+    .dpzvc3-1px-side(@BorderColor, right, after);
+  }
+
+  &-top-bottom {
+    .dpzvc3-1px-side(@BorderColor, top, before);
+    .dpzvc3-1px-side(@BorderColor, bottom, after);
+  }
+
+  &-left-top {
+    .dpzvc3-1px-side(@BorderColor, left, before);
+    .dpzvc3-1px-side(@BorderColor, top, after);
+  }
+
+  &-left-bottom {
+    .dpzvc3-1px-side(@BorderColor, left, before);
+    .dpzvc3-1px-side(@BorderColor, bottom, after);
+  }
+
+  &-right-top {
+    .dpzvc3-1px-side(@BorderColor, right, before);
+    .dpzvc3-1px-side(@BorderColor, top, after);
+  }
+
+  &-right-bottom {
+    .dpzvc3-1px-side(@BorderColor, right, before);
+    .dpzvc3-1px-side(@BorderColor, bottom, after);
+  }
+}
+
+// @mixin
+.dpzvc3-1px(@color: #ccc) {
+  position: relative;
+  border-color: @color;
+
+  &:before {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    transform-origin: 0 0;
+    box-sizing: border-box;
+    pointer-events: none;
+    border: 1px solid;
+    border-color: inherit;
+    border-radius: inherit;
+  }
+
+  @media screen and (-webkit-min-device-pixel-ratio:1.5) {
+    &:before {
+      width: 150%;
+      height: 150%;
+      transform: scale(0.6667);
+    }
+  }
+
+  @media screen and (-webkit-min-device-pixel-ratio: 2) {
+    &:before {
+      width: 200%;
+      height: 200%;
+      transform: scale(0.5);
+    }
+  }
+}
+
+.dpzvc3-1px-side-base(@color, @pseudo) {
+  position: relative;
+  border-color: @color;
+
+  &:@{pseudo} {
+    position: absolute;
+    content: "";
+    transform-origin: 0 0;
+  }
+}
+
+.dpzvc3-1px-side(@color: #ccc, @direction: top, @pseudo: before) when (@direction =top) {
+  .dpzvc3-1px-side-base(@color, @pseudo);
+
+  &:@{pseudo} {
+    width: 100%;
+    height: 1px;
+    top: 0;
+    left: 0;
+    border-top: 1px solid;
+    border-color: inherit;
+  }
+
+  .dpzvc3-1px-device-fix(@pseudo, "Y");
+}
+
+.dpzvc3-1px-side(@color: #ccc, @direction: top, @pseudo: before) when (@direction =bottom) {
+  .dpzvc3-1px-side-base(@color, @pseudo);
+
+  &:@{pseudo} {
+    width: 100%;
+    height: 1px;
+    bottom: -1px;
+    left: 0;
+    border-bottom: 1px solid;
+    border-color: inherit;
+  }
+
+  .dpzvc3-1px-device-fix(@pseudo, "Y");
+}
+
+.dpzvc3-1px-side(@color: #ccc, @direction: top, @pseudo: before) when (@direction =left) {
+  .dpzvc3-1px-side-base(@color, @pseudo);
+
+  &:@{pseudo} {
+    width: 1px;
+    height: 100%;
+    top: 0;
+    left: 0;
+    border-left: 1px solid;
+    border-color: inherit;
+  }
+
+  .dpzvc3-1px-device-fix(@pseudo, "X");
+}
+
+.dpzvc3-1px-side(@color: #ccc, @direction: top, @pseudo: before) when (@direction =right) {
+  .dpzvc3-1px-side-base(@color, @pseudo);
+
+  &:@{pseudo} {
+    width: 1px;
+    height: 100%;
+    top: 0;
+    right: -1px;
+    border-right: 1px solid;
+    border-color: inherit;
+  }
+
+  .dpzvc3-1px-device-fix(@pseudo, "X");
+}
+
+.dpzvc3-1px-device-fix(@pseudo, @transform) when (@transform ="X") {
+  @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
+    &:@{pseudo} {
+      transform: scaleX(0.6667);
+    }
+  }
+
+  @media screen and (-webkit-min-device-pixel-ratio: 2) {
+    &:@{pseudo} {
+      transform: scaleX(0.5);
+    }
+  }
+
+  @media screen and (-webkit-min-device-pixel-ratio: 3) {
+    &:@{pseudo} {
+      transform: scaleX(0.333);
+    }
+  }
+}
+
+;
+
+.dpzvc3-1px-device-fix(@pseudo, @transform) when (@transform ="Y") {
+  @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
+    &:@{pseudo} {
+      transform: scaleY(0.6667);
+    }
+  }
+
+  @media screen and (-webkit-min-device-pixel-ratio: 2) {
+    &:@{pseudo} {
+      transform: scaleY(0.5);
+    }
+  }
+
+  @media screen and (-webkit-min-device-pixel-ratio: 3) {
+    &:@{pseudo} {
+      transform: scaleY(0.333);
+    }
+  }
+}
+
+;

package/src/styles/utils/animation.less

@@ -0,0 +1,165 @@
+.dpzvc3-ani {
+    &-fade {
+
+        &-enter-from,
+        &-leave-to {
+            opacity: 0;
+        }
+
+        &-enter-to,
+        &-leave-from {
+            opacity: 1;
+        }
+
+        &-enter-active,
+        &-leave-active {
+            transition: opacity .3s ease;
+            will-change: opacity;
+        }
+    }
+
+    &-bottom {
+
+        &-enter-from,
+        &-leave-to {
+            transform: translate3d(0, 100%, 0);
+        }
+
+        &-enter-to,
+        &-leave-from {
+            transform: translate3d(0, 0, 0);
+        }
+
+        &-enter-active,
+        &-leave-active {
+            transition: transform .3s ease-out 100ms;
+            will-change: transform;
+        }
+    }
+
+    &-scale {
+
+        &-enter-from,
+        &-leave-to {
+            transform: translate3d(-50%, -50%, 0) scale(.9);
+            opacity: .2;
+        }
+
+        &-enter-to,
+        &-leave-from {
+            transform: translate3d(-50%, -50%, 0) scale(1);
+            opacity: 1;
+        }
+
+        &-enter-active,
+        &-leave-active {
+            transition: all .3s ease-in;
+            will-change: transform, opacity;
+        }
+    }
+
+    &-top {
+
+        &-enter-from,
+        &-leave-to {
+            transform: translate3d(0, -100%, 0);
+        }
+
+        &-enter-to,
+        &-leave-from {
+            transform: translate3d(0, 0, 0);
+        }
+
+        &-enter-active,
+        &-leave-active {
+            transition: transform .3s ease-out 100ms;
+            will-change: transform;
+        }
+    }
+
+    &-left {
+
+        &-enter-from,
+        &-leave-to {
+            transform: translate3d(-100%, 0, 0);
+        }
+
+        &-enter-to,
+        &-leave-from {
+            transform: translate3d(0, 0, 0);
+        }
+
+        &-enter-active,
+        &-leave-active {
+            transition: all .3s ease;
+            will-change: transform;
+        }
+    }
+
+    &-right {
+
+        &-enter-from,
+        &-leave-to {
+            transform: translate3d(100%, 0, 0);
+        }
+
+        &-enter-to,
+        &-leave-from {
+            transform: translate3d(0, 0, 0);
+        }
+
+        &-enter-active,
+        &-leave-active {
+            transition: all .3s ease;
+            will-change: transform;
+        }
+    }
+
+    &-slide-up {
+
+        &-enter-from,
+        &-leave-to {
+            transform: translate3d(0, 100%, 0);
+        }
+
+        &-enter-to,
+        &-leave-from {
+            transform: translate3d(0, 0, 0);
+        }
+
+        &-enter-active,
+        &-leave-active {
+            transition: all .3s ease;
+            will-change: transform;
+        }
+    }
+
+    &-slide-down {
+
+        &-enter-from,
+        &-leave-to {
+            transform: translate3d(0, -100%, 0);
+        }
+
+        &-enter-to,
+        &-leave-from {
+            transform: translate3d(0, 0, 0);
+        }
+
+        &-enter-active,
+        &-leave-active {
+            transition: all .3s ease;
+            will-change: transform;
+        }
+    }
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg) translateZ(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg) translateZ(0deg);
+    }
+}

package/src/styles/utils/nowrap.less

@@ -0,0 +1,19 @@
+.dpzvc3-nowrap {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.dpzvc3-nowrap(@n, @i: 1) when (@i <=@n) {
+  .dpzvc3-nowrap-@{i} {
+    .dpzvc3-nowrap();
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: @i;
+  }
+
+  .dpzvc3-nowrap(@n, (@i+1));
+}
+
+.dpzvc3-nowrap(5);

package/src/template/index.ejs

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <title>丁平中vc移动端组件</title>
+  <meta name="viewport"
+        content="width=device-width,
+                 initial-scale=1.0,
+                 maximum-scale=1.0,
+                 minimum-scale=1.0">
+  <style>
+    html, body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+
+  <script>
+    (function (doc, win) {
+      var docEl = doc.documentElement;
+
+      function recalc() {
+        var clientWidth = docEl.clientWidth;
+        if (!clientWidth) return;
+
+        if (clientWidth > 750) clientWidth = 750;
+
+        docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
+      }
+
+      win.addEventListener('resize', recalc);
+      doc.addEventListener('DOMContentLoaded', recalc);
+    })(document, window);
+  </script>
+</body>
+</html>