dpzvc3-ui 3.0.0

package/src/styles/components/number.less

@@ -0,0 +1,60 @@
+@import "../base/variable.less";
+
+.dpzvc3-number {
+
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  color: #4a4a4a;
+
+
+  & input {
+    box-sizing: border-box;
+    border: .5px solid #c0c4cc;
+    text-align: center;
+    transition: border-color .2s linear;
+    will-change: border-color;
+    background: #ffffff;
+  }
+
+  & input:focus {
+    border-color: @ThemeColor
+  }
+
+  & .disabled {
+
+    color: #c0c4cc;
+
+
+  }
+
+  &-changevalue {
+    align-items: center;
+    position: relative;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: center;
+    border: .5px solid #c0c4cc;
+    background: #e1e2ea;
+
+
+
+
+  }
+
+  &-changevalue.left {
+    border-bottom-left-radius: 3px;
+    border-top-left-radius: 3px;
+    border-right: 0;
+
+  }
+
+  &-changevalue.right {
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    border-left: 0;
+
+  }
+}

package/src/styles/components/picker.less

@@ -0,0 +1,152 @@
+@import "../base/variable.less";
+
+.dpzvc3-picker-wrapper {
+  position: relative;
+  height: 100%;
+
+  .dpzvc3-mask {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: @MaskColor;
+    z-index: 10;
+  }
+
+  .dpzvc3-picker-content {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    z-index: 10;
+  }
+
+  .dpzvc3-picker,
+  .dpzvc3-date-picker,
+  .dpzvc3-normal-picker {
+
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      background: @PickerHeaderBgColor;
+      color: @ThemeColor;
+
+      .title {
+        height: @PickerHeaderHeight;
+        line-height: @PickerHeaderHeight;
+        font-weight: bold;
+        color: #454545;
+        font-size: 15px;
+      }
+
+      .left,
+      .right {
+
+        height: @PickerHeaderHeight;
+        line-height: @PickerHeaderHeight;
+        font-size: 14px;
+        padding: 0 @SpaceHor;
+        font-weight: bold;
+      }
+
+      .left {
+        color: #c0c4cc;
+      }
+
+
+    }
+
+    .main {
+      height: @PickerHeight;
+      display: flex;
+      justify-content: center;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .dpzvc3-picker-slot {
+      flex: 1;
+      position: relative;
+      height: 100%;
+      overflow: hidden;
+
+      ul {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        transition: all .2s ease-in;
+
+        li {
+          width: 100%;
+          height: 35px;
+          line-height: 35px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          color: @PickerTxtColor;
+
+          &.level_1 {
+            transform: rotateY(15deg);
+            transform-style: preserve-3d;
+            font-size: @PickerTxtSize - 2;
+            opacity: .7;
+          }
+
+          &.level_1_1 {
+            transform: rotateY(-15deg);
+            transform-style: preserve-3d;
+            font-size: @PickerTxtSize - 2;
+            opacity: .7;
+          }
+
+          &.level_2 {
+            transform: rotateY(20deg);
+            transform-style: preserve-3d;
+            font-size: @PickerTxtSize - 3;
+            opacity: .5;
+          }
+
+          &.level_2_1 {
+            transform: rotateY(-20deg);
+            transform-style: preserve-3d;
+            font-size: @PickerTxtSize - 3;
+            opacity: .5;
+          }
+
+          &.level_3 {
+            transform: rotateY(45deg);
+            transform-style: preserve-3d;
+            font-size: @PickerTxtSize - 4;
+            opacity: .3;
+          }
+
+          &.level_3_1 {
+            transform: rotateY(-45deg);
+            transform-style: preserve-3d;
+            font-size: @PickerTxtSize - 4;
+            opacity: .3;
+          }
+
+          &.current {
+            font-size: @PickerTxtSize;
+            font-weight: bold;
+          }
+        }
+      }
+
+
+    }
+
+  }
+
+
+
+  .dpzvc3-picker-slot ul.dpzvc3-picker-slot-dragging {
+    transition: none;
+  }
+
+}

package/src/styles/components/popup.less

@@ -0,0 +1,46 @@
+.dpzvc3-popup {
+
+  &-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .7);
+  }
+
+  &-content {
+    background: #ffffff;
+    position: absolute;
+    z-index: 300;
+  }
+
+  &-left {
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &-right {
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  &-top {
+    top: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    min-height: 50px;
+    line-height: 50px;
+    color: #ffffff;
+    background: rgba(0, 0, 0, .7);
+  }
+
+  &-bottom {
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}

package/src/styles/components/progress.less

@@ -0,0 +1,52 @@
+@import "../base/variable.less";
+
+.dpzvc3-progress {
+  display: flex;
+  position: relative;
+  height: @ProgressHeight;
+  line-height: @ProgressHeight;
+
+  &>[slot="left"] {
+    margin-right: 5px;
+  }
+
+  &>[slot="right"] {
+    margin-left: 5px;
+  }
+
+  &>* {
+    display: flex;
+  }
+
+  &-outer {
+    flex: 1;
+    position: relative;
+
+
+  }
+
+  &-runaway {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+    right: 0;
+    background: #ebebeb;
+    height: 3px;
+  }
+
+  &-progress {
+    position: absolute;
+    display: block;
+    top: 50%;
+    transform: translate(0, -50%);
+    background: -webkit-linear-gradient(left, #ffffff, @ThemeColor);
+    width: 0;
+    height: 3px;
+    transition: width 150ms ease-out;
+    will-change: width;
+  }
+
+
+
+}

package/src/styles/components/prompt.less

@@ -0,0 +1,37 @@
+.dpzvc3-prompt-content {
+
+  width: 100%;
+
+  .dpzvc3-prompt-spec {
+    display: inline-block;
+    width: 100%;
+    line-height: 25px;
+    text-indent: 5px;
+    color: #555;
+    font-size: 13px;
+  }
+
+
+
+}
+
+.dpzvc3-prompt-button {
+  width: 50%;
+  border: 1px solid #eee;
+  border-left: 0 none;
+
+
+  button {
+    background: #ffffff;
+    color: red;
+  }
+}
+
+.dpzvc3-prompt-error {
+
+  color: red;
+  text-align: left;
+  text-indent: 5px;
+  line-height: 25px;
+  height: 25px;
+}

package/src/styles/components/radioBox.less

@@ -0,0 +1,138 @@
+//.dpzvc3-radiobox-checked{
+//  .dpzvc3-radiobox-inner{
+//
+//    //border-color: @checkBoxColor!important;
+//    border-color: #555!important;
+//    &:after{
+//      background-color:@radioBoxColor!important;
+//    }
+//  }
+//}
+@import "../base/variable.less";
+
+.dpzvc3-radioBoxGroup.dpzvc3-radioBoxGroup-vertical .dpzvc3-radiobox {
+  margin-right: 0;
+  margin-bottom: 8px;
+}
+
+.dpzvc3-radiobox {
+  display: inline-block;
+  margin-right: 8px;
+}
+
+
+.dpzvc3-radiobox-wrapper {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+  line-height: 1;
+  position: relative
+}
+
+.dpzvc3-radiobox-inner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  position: relative;
+  top: 0;
+  left: 0;
+  border: 1px solid #d7dde4;
+  border-radius: 100%;
+  background-color: #fff;
+  transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
+}
+
+
+
+.dpzvc3-radiobox-inner:before {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  left: 0px;
+  top: 0px;
+  border-radius: 50%;
+  display: table;
+  border-top: 0;
+  border-left: 0;
+  content: " ";
+  background-color: @radioBoxColor;
+  opacity: 0;
+  transition: all .2s ease-in-out;
+  transform: scale(0);
+}
+
+.dpzvc3-radiobox-inner:after {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  left: 4px;
+  top: 4px;
+  border-radius: 50%;
+  display: table;
+  border-top: 0;
+  border-left: 0;
+  content: " ";
+  background-color: #ffffff;
+  opacity: 0;
+  transition: all .2s ease-in-out;
+  transform: scale(0);
+}
+
+.dpzvc3-radiobox-checked .dpzvc3-radiobox-inner:after,
+.dpzvc3-radiobox-checked .dpzvc3-radiobox-inner:before {
+  opacity: 1;
+  transform: scale(1);
+  transition: all .2s ease-in-out;
+  box-shadow: 0 0 1px 1px @ThemeColor
+}
+
+
+.dpzvc3-radiobox-disable.dpzvc3-radiobox-checked .dpzvc3-radiobox-inner:after,
+.dpzvc3-radiobox-disable.dpzvc3-radiobox-checked .dpzvc3-radiobox-inner:before {
+  background-color: #f3f3f3;
+  cursor: not-allowed;
+}
+
+.dpzvc3-radiobox-disable .dpzvc3-radiobox-inner:after,
+.dpzvc3-radiobox-disable .dpzvc3-radiobox-inner:before {
+  background-color: #f3f3f3;
+  cursor: not-allowed;
+}
+
+
+.dpzvc3-radiobox-checked.dpzvc3-radiobox-disable .dpzvc3-radiobox-inner {
+  border-color: #f3f3f3;
+  cursor: not-allowed;
+}
+
+.dpzvc3-radiobox-disable input {
+  cursor: not-allowed;
+}
+
+.dpzvc3-radiobox-disable .dpzvc3-radiobox-inner {
+  border-color: #f3f3f3;
+  cursor: not-allowed;
+}
+
+.dpzvc3-radiobox-disable+span {
+  color: #f3f3f3;
+  cursor: not-allowed;
+}
+
+
+
+
+.dpzvc3-radiobox-input {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  z-index: 1;
+  cursor: pointer;
+}

package/src/styles/components/slide-Bar.less

@@ -0,0 +1,149 @@
+@import "../base/variable.less";
+
+.dpzvc3-slideBar {
+  border-top-color: @SlideBarBgColor;
+  border-bottom-color: @SlideBarBgColor;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+
+  //border-bottom: 1px solid #eee;
+  //border-top: 1px solid #eee;
+  .dpzvc3-slideBar-child {
+    overflow: hidden;
+
+    background-color: @SlideBackgroundCorlor;
+
+    >a {
+
+      color: @slideChildColor;
+    }
+  }
+}
+
+.dpzvc3-slideBar {
+  display: block;
+  width: 100%;
+  background: #ffffff;
+  overflow: hidden;
+  position: relative;
+
+  &-header {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    width: 100%;
+    position: relative;
+    //&.fixed {
+    //  position: absolute;
+    //  top:0;
+    //  left:0;
+    //  z-index:10;
+    //  background: #fff;
+    //}
+  }
+}
+
+.dpzvc3-slideBar-wrapper {
+
+
+  //border-bottom: 1px solid #eeeeee;
+}
+
+.dpzvc3-slideBar-wrapper-absolute {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background-color: @ThemeColor;
+  transition: transform .2s ease-out;
+  will-change: transform;
+  z-index: 3;
+}
+
+//.dpzvc3-slideBar-wrapper::before {
+//  width:100%;
+//  bottom:0;
+//  left: 0;
+//  position: absolute;
+//  content: '';
+//  height: 1px;
+//  background: #eeeeee;
+//
+//}
+
+.dpzvc3-slideBar-wrapper .dpzvc3-slideBar-child {
+  height: 100%;
+  line-height: 1;
+}
+
+.dpzvc3-slideBar-wrapper .dpzvc3-slideBar-child.active>a {
+  color: @ThemeColor;
+}
+
+.dpzvc3-slideBar-wrapper .dpzvc3-slideBar-child a {
+  display: inline-block;
+  width: 100%;
+}
+
+.dpzvc3-slideBar-wrapper.dpzvc3-slideBar-flex {
+  display: flex;
+  align-items: center;
+
+}
+
+.dpzvc3-slideBar-wrapper.dpzvc3-slideBar-flex.normal {
+  flex-direction: row;
+}
+
+.dpzvc3-slideBar-wrapper.dpzvc3-slideBar-flex.vertical {
+  flex-direction: column;
+}
+
+.dpzvc3-slideBar-wrapper.dpzvc3-slideBar-flex .dpzvc3-slideBar-child {
+  flex: 1;
+  width: 0;
+}
+
+.dpzvc3-slideBar-slide {
+  width: auto;
+}
+
+.dpzvc3-slideBar-slide .dpzvc3-slideBar-child {
+  display: inline-block;
+  margin-bottom: -3px;
+}
+
+//.dpzvc3-slideBar-slide .dpzvc3-slideBar-child.normalChild {
+//  height: 30px;
+//}
+
+.dpzvc3-slideBar-container {
+  width: 100%;
+  position: relative;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.dpzvc3-slideBar-content {
+  transition: transform .2s ease-in;
+  will-change: transform;
+  height: 100%;
+  //display: flex;
+  //flex-flow: row nowrap;
+
+  overflow: auto;
+}
+
+.dpzvc3-slideBar-content.dpzvc3-slideBar-dragging {
+  transition: none;
+  will-change: none;
+}
+
+.dpzvc3-slideBar-content-item {
+  //flex: 1;
+  //width:0;
+  display: inline-block;
+  height: 100%;
+
+}