dpzvc3-ui 3.0.0

package/src/styles/components/button.less

@@ -0,0 +1,124 @@
+@width: 40px;
+@import "../base/variable.less";
+
+.dpzvc3-button {
+  position: relative;
+  width: 100%;
+  overflow-x: hidden;
+  box-sizing: content-box;
+
+
+  .loading {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &-radius {
+    border-radius: 5px;
+  }
+
+}
+
+.dpzvc3-button.dpzvc3-button-circle {
+
+  width: @width;
+  height: @width;
+  border-radius: 50%
+}
+
+.dpzvc3-button .dpzvc3-button-btn {
+  width: 100%;
+  height: 100%;
+
+  &::after {
+    position: absolute;
+    content: '';
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: #000;
+    opacity: 0;
+  }
+
+}
+
+.dpzvc3-button-inline {
+  letter-spacing: -3px;
+}
+
+.dpzvc3-button-inline>button {
+
+  letter-spacing: 0;
+}
+
+.dpzvc3-button-success {
+  background: @ButtonSuccessBgColor;
+  color: @ButtonColor;
+  border-color: @ButtonSuccessBgColor;
+
+  &:active {
+    background: @SuccessActiveBgColor;
+    border-color: @SuccessActiveBgColor;
+  }
+}
+
+.dpzvc3-button-danger {
+  color: @ButtonColor;
+  background-color: @ButtonDangerBgColor;
+  border-color: @ButtonDangerBgColor;
+
+  &:active {
+    background: @DangerActiveBgColor;
+    border-color: @DangerActiveBgColor;
+  }
+}
+
+.dpzvc3-button-primary {
+  color: #4d4d4d;
+  background-color: @ButtonPrimaryBgColor;
+  border-color: @ButtonPrimaryBgColor;
+
+  &:active {
+    background-color: @PrimaryActiveBgColor;
+    border-color: @PrimaryActiveBgColor;
+  }
+}
+
+.dpzvc3-button-warning {
+  color: @ButtonColor;
+  background-color: @ButtonWarningBgColor;
+  border-color: @ButtonWarningBgColor;
+
+  &:active {
+    background-color: @WarningActiveBgColor;
+    border-color: @WarningActiveBgColor;
+  }
+}
+
+.dpzvc3-button-normal {
+  color: @ButtonColor;
+  background-color: @ButtonNormalBgColor;
+  border-color: @ButtonNormalBgColor;
+
+  &:active {
+    background-color: @NormalActiveBgColor;
+    border-color: @NormalActiveBgColor;
+  }
+}
+
+.dpzvc3-button-text {
+  color: #657180;
+  background-color: @ButtonTextBgColor;
+  border-color: @ButtonTextBgColor;
+
+  &:active {
+    background-color: @TextActiveBgColor;
+    border-color: @TextActiveBgColor;
+  }
+}
+
+.dpzvc3-button-btn.dpzvc3-button-disabled {
+  color: @ButtonColor;
+  opacity: .6;
+}

package/src/styles/components/card.less

@@ -0,0 +1,31 @@
+.dpzvc3-card {
+  background: #ffffff;
+  width: 100%;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  overflow: hidden;
+
+  &-header,
+  &-footer {
+    position: relative;
+    box-sizing: border-box;
+    padding: 0 10px;
+    display: flex;
+    height: 48px;
+    overflow: hidden;
+
+  }
+
+
+  &-content {
+    position: relative;
+    box-sizing: border-box;
+
+    .main {
+      min-height: 300px;
+
+    }
+  }
+
+
+}

package/src/styles/components/cell-swipe.less

@@ -0,0 +1,20 @@
+.dpzvc3-cell-swipe {
+  &-group {
+    height: 100%;
+  }
+
+  &-btn {
+    height: 100%;
+    line-height: 48px;
+    text-align: center;
+    padding: 0 10px;
+    display: inline-block;
+
+  }
+}
+
+.dpzvc3-cell-main,
+.dpzvc3-cell-left,
+.dpzvc3-cell-right {
+  transition: transform 150ms ease-in;
+}

package/src/styles/components/cell.less

@@ -0,0 +1,75 @@
+.dpzvc3-cell {
+  box-sizing: border-box;
+  color: inherit;
+  background-color: #ffffff;
+  min-height: 48px;
+  display: block;
+  overflow: hidden;
+  position: relative;
+  text-decoration: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &-mask:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: #000;
+    opacity: 0;
+
+  }
+
+  &:active>&-mask:before {
+    opacity: .1;
+  }
+
+  &-left {
+    position: absolute;
+    left: 0;
+
+    height: 100%;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  &-right {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  &-main {
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    min-height: inherit;
+    overflow: hidden;
+    padding: 0 10px;
+    width: 100%;
+    font-size: 16px;
+
+    &-title {
+      flex: 1;
+
+    }
+
+    &-label {
+      font-size: 12px;
+      color: #999;
+      margin-top: 6px;
+      display: block;
+    }
+
+    &-value {
+      color: #999;
+      display: flex;
+      align-items: center;
+    }
+  }
+}

package/src/styles/components/checkBox.less

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

package/src/styles/components/editor.less

@@ -0,0 +1,3 @@
+.ace-twilight{
+  background-color: #555!important;
+}

package/src/styles/components/header.less

@@ -0,0 +1,72 @@
+@import "../base/variable.less";
+
+.dpzvc3-header {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+
+    &+div {
+        padding-top: @HeaderHeight;
+    }
+
+    &>header {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: @HeaderHeight;
+        background: @HeaderBgColor;
+        color: @HeaderTxtColor;
+    }
+
+    .left,
+    .right {
+        height: 100%;
+        font-size: @FontSizeSmall;
+        display: flex;
+        align-items: center;
+
+    }
+
+    .left {
+        padding-left: @SpaceHor;
+
+        .arrow {
+            width: 8px;
+            height: 8px;
+            border-top: 1px solid #ffffff;
+            border-left: 1px solid #ffffff;
+            transform: rotate(-45deg);
+            display: inline-block;
+        }
+
+        .text {
+            display: inline-block;
+        }
+
+    }
+
+    .right {
+        padding-right: @SpaceHor;
+    }
+
+    .title {
+        flex: 1;
+        font-size: @HeaderTitleSize;
+        padding: 0 @SpaceHor;
+        text-align: center;
+    }
+
+    &.dpzvc3-header-fixed>header {
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        z-index: 3;
+    }
+
+    .header-place {
+        padding-top: @HeaderHeight;
+
+    }
+}

package/src/styles/components/indicator.less

@@ -0,0 +1,39 @@
+@import "../base/variable.less";
+
+.dpzvc3-Indicator {
+  width: 100%;
+  position: absolute;
+  height: 100%;
+  left: 0;
+  top: 0;
+
+  &-container {
+    position: relative;
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    width: 35%;
+    height: 0;
+    padding-bottom: 35%;
+
+  }
+
+  &-wrapper {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .7);
+    border-radius: @BorderRadius;
+
+    >span {
+      margin-top: 20px;
+      font-size: 16px;
+    }
+  }
+}

package/src/styles/components/loadmore.less

@@ -0,0 +1,48 @@
+.dpzvc3-loadmore {
+  height: 100%;
+  overflow-y: scroll;
+  box-sizing: border-box;
+
+  //-webkit-overflow-scrolling: touch;
+  &-top,
+  &-bottom {
+
+    position: relative;
+    height: 0;
+    line-height: 40px;
+    overflow: hidden;
+    font-size: 14px;
+    transform: translateZ(0);
+
+    .dpzvc3-loadmore-status {
+      vertical-align: middle;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+
+      .spinner {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      .dpzvc3-loadmore-text {
+        margin-left: 5px;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  &-bottom {
+    height: 40px;
+  }
+
+  &-content {
+    height: auto;
+    background: #ffffff;
+
+  }
+
+  &-drag {
+    transition: all .3s linear;
+  }
+}

package/src/styles/components/message.less

@@ -0,0 +1,57 @@
+.dpzvc3-message {
+  z-index: 300;
+  width: 150px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  //transform: translate3d(50%,50%,0);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  white-space: normal;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.7);
+  overflow-y: scroll;
+
+  &-position-center {
+
+    transform: translate3d(-50%, -50%, 0)
+  }
+
+  &-position-top {
+    top: 5%;
+    transform: translate3d(-50%, 0, 0)
+  }
+
+  &-position-bottom {
+
+    top: 90%;
+    transform: translate3d(-50%, 0, 0)
+  }
+
+  &-left {
+    display: block;
+    padding: 10px;
+  }
+
+  &-text {
+    width: calc(100% - 30px);
+    padding: 0 15px;
+    line-height: 40px;
+    color: #ffffff;
+    font-size: 18px;
+    white-space: normal;
+  }
+}
+
+.dpzvc3-message-group {
+
+  position: static;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 150px;
+
+}

package/src/styles/components/modal.less

@@ -0,0 +1,84 @@
+@import "../base/variable.less";
+
+.dpzvc3-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;
+
+  .dpzvc3-modal-header {
+    text-align: center;
+    padding: 0 10px;
+
+    //border-bottom: 1px solid @BorderColor;
+    .dpzvc3-modal-header-inner {
+      font-weight: bold;
+      font-size: 20px;
+      width: 100%;
+      padding-top: 20px;
+    }
+  }
+
+  .dpzvc3-modal-body {
+
+    .dpzvc3-modal-body-inner {
+      text-align: center;
+    }
+
+    line-height:25px;
+    padding:30px 20px;
+    word-wrap:break-word;
+    overflow-y:scroll;
+  }
+
+  .dpzvc3-modal-footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    overflow: hidden;
+
+    .dpzvc3-button {
+      border-top: 1px solid @BorderColor;
+    }
+
+    //.dpzvc3-button:nth-of-type(1){
+    //  border-right:1px solid @BorderColor;
+    //}
+  }
+
+  .dpzvc3-modal-button {
+    flex: 1;
+    height: 40px;
+    border: 1px solid @BorderColor;
+    border-left: 0 none;
+  }
+
+  .dpzvc3-modal-button-sure {
+
+    color: red;
+  }
+
+  //.v-lc-modal-button-cancle,.dpzvc3-prompt-button-cancle{
+  //
+  //  color: #ccc;
+  //}
+}
+
+//遮罩层
+.dpzvc3-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;
+}