dpzvc-ui 1.0.0

package/src/styles/components/modal.less

@@ -0,0 +1,82 @@
+.dpzvc-modal {
+  transform: translate3d(-50%, -50%, 0) scale(1);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  overflow: hidden;
+  border-radius: @BorderRadius;
+  background: @ModalBgColor;
+  z-index: 100;
+  color: @ModalColor;
+
+  .dpzvc-modal-header {
+    text-align: center;
+    padding: 0 10px;
+
+    //border-bottom: 1px solid @BorderColor;
+    .dpzvc-modal-header-inner {
+      font-weight: bold;
+      font-size: 20px;
+      width: 100%;
+      padding-top: 20px;
+    }
+  }
+
+  .dpzvc-modal-body {
+
+    .dpzvc-modal-body-inner {
+      text-align: center;
+    }
+
+    line-height:25px;
+    padding:30px 20px;
+    word-wrap:break-word;
+    overflow-y:scroll;
+  }
+
+  .dpzvc-modal-footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    overflow: hidden;
+
+    .dpzvc-button {
+      border-top: 1px solid @BorderColor;
+    }
+
+    //.dpzvc-button:nth-of-type(1){
+    //  border-right:1px solid @BorderColor;
+    //}
+  }
+
+  .dpzvc-modal-button {
+    flex: 1;
+    height: 40px;
+    border: 1px solid @BorderColor;
+    border-left: 0 none;
+  }
+
+  .dpzvc-modal-button-sure {
+
+    color: red;
+  }
+
+  //.v-lc-modal-button-cancle,.dpzvc-prompt-button-cancle{
+  //
+  //  color: #ccc;
+  //}
+}
+
+//遮罩层
+.dpzvc-modal-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, .4);
+  z-index: 99;
+}

package/src/styles/components/number.less

@@ -0,0 +1,58 @@
+.dpzvc-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,150 @@
+.dpzvc-picker-wrapper {
+  position: relative;
+  height: 100%;
+
+  .dpzvc-mask {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: @MaskColor;
+    z-index: 10;
+  }
+
+  .dpzvc-picker-content {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    z-index: 10;
+  }
+
+  .dpzvc-picker,
+  .dpzvc-date-picker,
+  .dpzvc-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;
+    }
+
+    .dpzvc-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;
+          }
+        }
+      }
+
+
+    }
+
+  }
+
+
+
+  .dpzvc-picker-slot ul.dpzvc-picker-slot-dragging {
+    transition: none;
+  }
+
+}

package/src/styles/components/popup.less

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

package/src/styles/components/radioBox.less

@@ -0,0 +1,136 @@
+//.dpzvc-radiobox-checked{
+//  .dpzvc-radiobox-inner{
+//
+//    //border-color: @checkBoxColor!important;
+//    border-color: #555!important;
+//    &:after{
+//      background-color:@radioBoxColor!important;
+//    }
+//  }
+//}
+.dpzvc-radioBoxGroup.dpzvc-radioBoxGroup-vertical .dpzvc-radiobox {
+  margin-right: 0;
+  margin-bottom: 8px;
+}
+
+.dpzvc-radiobox {
+  display: inline-block;
+  margin-right: 8px;
+}
+
+
+.dpzvc-radiobox-wrapper {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+  line-height: 1;
+  position: relative
+}
+
+.dpzvc-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;
+}
+
+
+
+.dpzvc-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);
+}
+
+.dpzvc-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);
+}
+
+.dpzvc-radiobox-checked .dpzvc-radiobox-inner:after,
+.dpzvc-radiobox-checked .dpzvc-radiobox-inner:before {
+  opacity: 1;
+  transform: scale(1);
+  transition: all .2s ease-in-out;
+  box-shadow: 0 0 1px 1px @ThemeColor
+}
+
+
+.dpzvc-radiobox-disable.dpzvc-radiobox-checked .dpzvc-radiobox-inner:after,
+.dpzvc-radiobox-disable.dpzvc-radiobox-checked .dpzvc-radiobox-inner:before {
+  background-color: #f3f3f3;
+  cursor: not-allowed;
+}
+
+.dpzvc-radiobox-disable .dpzvc-radiobox-inner:after,
+.dpzvc-radiobox-disable .dpzvc-radiobox-inner:before {
+  background-color: #f3f3f3;
+  cursor: not-allowed;
+}
+
+
+.dpzvc-radiobox-checked.dpzvc-radiobox-disable .dpzvc-radiobox-inner {
+  border-color: #f3f3f3;
+  cursor: not-allowed;
+}
+
+.dpzvc-radiobox-disable input {
+  cursor: not-allowed;
+}
+
+.dpzvc-radiobox-disable .dpzvc-radiobox-inner {
+  border-color: #f3f3f3;
+  cursor: not-allowed;
+}
+
+.dpzvc-radiobox-disable+span {
+  color: #f3f3f3;
+  cursor: not-allowed;
+}
+
+
+
+
+.dpzvc-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,147 @@
+.dpzvc-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;
+  .dpzvc-slideBar-child {
+    overflow: hidden;
+
+    background-color: @SlideBackgroundCorlor;
+
+    >a {
+
+      color: @slideChildColor;
+    }
+  }
+}
+
+.dpzvc-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;
+    //}
+  }
+}
+
+.dpzvc-slideBar-wrapper {
+
+
+  //border-bottom: 1px solid #eeeeee;
+}
+
+.dpzvc-slideBar-wrapper-absolute {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background-color: @ThemeColor;
+  transition: transform .2s ease-out;
+  will-change: transform;
+  z-index: 3;
+}
+
+//.dpzvc-slideBar-wrapper::before {
+//  width:100%;
+//  bottom:0;
+//  left: 0;
+//  position: absolute;
+//  content: '';
+//  height: 1px;
+//  background: #eeeeee;
+//
+//}
+
+.dpzvc-slideBar-wrapper .dpzvc-slideBar-child {
+  height: 100%;
+  line-height: 1;
+}
+
+.dpzvc-slideBar-wrapper .dpzvc-slideBar-child.active>a {
+  color: @ThemeColor;
+}
+
+.dpzvc-slideBar-wrapper .dpzvc-slideBar-child a {
+  display: inline-block;
+  width: 100%;
+}
+
+.dpzvc-slideBar-wrapper.dpzvc-slideBar-flex {
+  display: flex;
+  align-items: center;
+
+}
+
+.dpzvc-slideBar-wrapper.dpzvc-slideBar-flex.normal {
+  flex-direction: row;
+}
+
+.dpzvc-slideBar-wrapper.dpzvc-slideBar-flex.vertical {
+  flex-direction: column;
+}
+
+.dpzvc-slideBar-wrapper.dpzvc-slideBar-flex .dpzvc-slideBar-child {
+  flex: 1;
+  width: 0;
+}
+
+.dpzvc-slideBar-slide {
+  width: auto;
+}
+
+.dpzvc-slideBar-slide .dpzvc-slideBar-child {
+  display: inline-block;
+  margin-bottom: -3px;
+}
+
+//.dpzvc-slideBar-slide .dpzvc-slideBar-child.normalChild {
+//  height: 30px;
+//}
+
+.dpzvc-slideBar-container {
+  width: 100%;
+  position: relative;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.dpzvc-slideBar-content {
+  transition: transform .2s ease-in;
+  will-change: transform;
+  height: 100%;
+  //display: flex;
+  //flex-flow: row nowrap;
+
+  overflow: auto;
+}
+
+.dpzvc-slideBar-content.dpzvc-slideBar-dragging {
+  transition: none;
+  will-change: none;
+}
+
+.dpzvc-slideBar-content-item {
+  //flex: 1;
+  //width:0;
+  display: inline-block;
+  height: 100%;
+
+}