@nutui/nutui 3.1.21-beta.0 → 3.1.21-beta.3

package/dist/packages/comment/index.scss

@@ -0,0 +1,353 @@
+.nut-comment {
+  width: 100%;
+  font-size: 12px;
+
+  &-header {
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+
+    &__user {
+      flex: 1;
+      display: flex;
+      align-items: center;
+
+      &-avter {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        margin-right: 10px;
+        overflow: hidden;
+
+        img {
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+      &-name {
+        @include oneline-ellipsis();
+        margin-right: 5px;
+        font-size: 12px;
+        color: $comment-header-user-name-color;
+        width: auto;
+        max-width: 80px;
+      }
+
+      &-default {
+        flex: 1;
+        &-name {
+          display: flex;
+          align-items: center;
+          margin-bottom: 3px;
+
+          @include oneline-ellipsis();
+          font-size: 12px;
+          color: $comment-header-user-name-color;
+
+          > span {
+            margin-right: 8px;
+          }
+        }
+      }
+
+      &-complex {
+        display: flex;
+        align-items: center;
+        font-weight: bold;
+
+        &-name {
+          margin-right: 10px;
+          @include text-ellipsis();
+          max-width: 80px;
+        }
+      }
+
+      &-score {
+        .nut-rate-item {
+          display: block !important;
+          line-height: 10px;
+
+          .nut-icon {
+            line-height: 10px;
+          }
+        }
+      }
+    }
+
+    &__time {
+      width: 100px;
+      text-align: right;
+      font-size: 12px;
+      color: $comment-header-time-color;
+    }
+
+    &__complex-score {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .nut-rate-item {
+        display: block !important;
+        line-height: 12px;
+
+        .nut-icon {
+          line-height: 12px;
+        }
+      }
+
+      &-i {
+        margin: 0 8px 0 6px;
+        display: inline-block;
+        width: 1px;
+        height: 6px;
+        background: $text-color;
+        opacity: 0.4;
+        font-style: inherit;
+      }
+      &-size {
+        @include oneline-ellipsis();
+      }
+    }
+
+    &__labels--item {
+      display: inline-block;
+      height: 16px;
+      margin-right: 4px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &__main {
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+    white-space: pre-wrap;
+  }
+
+  &-images {
+    display: flex;
+    margin: 10px 0 12px;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    &__item {
+      position: relative;
+      width: 80px;
+      height: 80px;
+      margin-right: 5px;
+      border-radius: 6px;
+      overflow: hidden;
+      flex-shrink: 0;
+
+      img {
+        width: 80px;
+        height: 80px;
+      }
+
+      &--imgbox {
+        //   background: #f00;
+      }
+
+      &--video {
+        img {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          // height: auto;
+        }
+      }
+    }
+
+    &__mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 105px;
+      height: 105px;
+      line-height: 105px;
+      background: rgba(0, 0, 0, 0.5);
+      font-size: 12px;
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+
+  &-images--multi {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    overflow: hidden;
+    width: 331px;
+    margin: 10px auto 15px;
+
+    .nut-comment-images__item {
+      margin: 8px 8px 0 0;
+
+      width: 105px;
+      height: 105px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      .svg-demo {
+        width: 40px;
+        height: 40px;
+      }
+
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+    }
+
+    &:after {
+      content: '';
+      display: block;
+      width: 105px;
+    }
+  }
+
+  &__follow {
+    &-title {
+      position: relative;
+      // display: flex;
+      // align-items: center;
+      font-size: 14px;
+      font-weight: bold;
+      color: $black;
+      padding-left: 8px;
+
+      i {
+        position: absolute;
+        left: 0;
+        top: 13%;
+        color: $primary-color;
+        transform: rotate(90deg);
+        opacity: 0.4;
+      }
+    }
+    &-com {
+      margin: 8px 0px 8px 8px;
+      @include moreline-ellipsis(6);
+    }
+    &-img {
+      margin: 0 0 8px 8px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &-bottom {
+    display: flex;
+    justify-content: space-between;
+    color: $comment-bottom-label-color;
+    margin-right: 5px;
+
+    &__lable {
+      flex: 1;
+      margin-right: 10px;
+      @include oneline-ellipsis();
+    }
+    &__cpx {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      color: $black;
+
+      &-item {
+        position: relative;
+        margin-right: 18px;
+        display: flex;
+        align-items: center;
+
+        span {
+          color: $black;
+          margin-right: 5px;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        &-popover {
+          position: absolute;
+          top: 35px;
+          right: 18px;
+          width: max-content;
+          background: $white;
+          padding: 10px;
+          box-shadow: 0 0 6px $disable-color;
+          border-radius: 5px 0 5px 5px;
+
+          &::after {
+            content: '';
+            position: absolute;
+            top: -20px;
+            right: 0px;
+            width: 0;
+            height: 0;
+            border-left: 14px solid transparent;
+            border-right: 0px solid transparent;
+            border-top: 10px solid transparent;
+            border-bottom: 10px solid $white;
+          }
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: -22px;
+            right: -1px;
+            width: 0;
+            height: 0;
+            border-left: 14px solid transparent;
+            border-right: 0px solid transparent;
+            border-top: 10px solid transparent;
+            border-bottom: 10px solid rgba(114, 113, 113, 0.1);
+          }
+        }
+      }
+    }
+  }
+
+  &-images__play {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%);
+    transform: translate(-50%, -50%);
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+
+    &::after {
+      display: block;
+      content: '';
+      position: absolute;
+      left: 15px;
+      top: 11px;
+      border-top: 9px solid transparent;
+      border-bottom: 9px solid transparent;
+      border-left: 15px solid #fff;
+    }
+  }
+
+  .nut-comment-shop {
+    width: 100%;
+    margin-top: 20px;
+    padding-top: 10px;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    @include moreline-ellipsis(6);
+    span {
+      color: $comment-shop-color;
+    }
+  }
+}

package/dist/packages/countdown/index.scss

@@ -0,0 +1,5 @@
+.nut-countdown {
+  display: $countdown-display;
+  color: $countdown-color;
+  font-size: $countdown-font-size;
+}

package/dist/packages/countup/index.scss

@@ -0,0 +1,67 @@
+.nut-countup {
+  display: inline-block;
+  width: 100%;
+  padding: 5px;
+  color: #000;
+  font-weight: bold;
+  font-family: PingFangSC-Regular;
+  // text-align:center;
+  .run-number {
+    display: inline-block;
+    width: 100%;
+    // margin: 0 auto;
+    padding: 0;
+    overflow: hidden;
+    // height: 50px;
+    // line-height: 50px;
+    text-align: center;
+    font-weight: bold;
+    position: relative;
+    .numberItem {
+      position: absolute;
+      transition: none;
+      list-style: none;
+      // transition: all linear .1s;
+      // animation: myMove 1s linear infinite;
+      // animation-fill-mode: forwards;
+      // @keyframes myMove {
+      //     0% {
+      //       transform: translateY(0);
+      //     }
+      //     100% {
+      //       transform: translateY(-50px);
+      //     }
+      // }
+      .itemSpan {
+        display: block;
+        font-family: PingFangSC-Regular;
+      }
+    }
+  }
+  .pointstyl {
+    position: absolute;
+    display: block;
+  }
+  .run-number-machine-img {
+    overflow: hidden;
+    .run-number-machine-img-li {
+      float: left;
+      background-position: center 0;
+      background-repeat: repeat-y;
+      background-attachment: scroll;
+    }
+  }
+  .run-number-img {
+    position: relative;
+    display: inline-block;
+    .run-number-img-li {
+      position: absolute;
+      display: block;
+      transition: none;
+      display: inline-block;
+      background-position: 0 0;
+      background-repeat: no-repeat;
+      font-family: PingFangSC-Regular;
+    }
+  }
+}

package/dist/packages/datepicker/index.scss

@@ -0,0 +1,2 @@
+.nut-datepicker {
+}

package/dist/packages/dialog/index.scss

@@ -0,0 +1,65 @@
+.nut-dialog {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: $dialog-width;
+  min-height: 156px;
+  padding: 28px 24px 16px 24px;
+  box-sizing: border-box;
+
+  &__header {
+    display: block;
+    text-align: center;
+    height: 20px;
+    font-size: 16px;
+    color: rgba(38, 38, 38, 1);
+    @include oneline-ellipsis();
+  }
+  &__content {
+    width: 100%;
+    overflow: auto;
+    flex: 1;
+    margin: 20px 0;
+    max-height: 268px;
+    line-height: 16px;
+    font-size: 12px;
+    color: $text-color;
+    word-wrap: break-word;
+    word-break: break-all;
+    white-space: pre-wrap;
+  }
+  &__footer {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-around;
+
+    &.horizontal {
+    }
+    &.vertical {
+      flex-direction: column;
+
+      .nut-button {
+        min-width: 100%;
+        margin: 0;
+        &.nut-dialog__footer-cancel {
+          border: 0;
+        }
+        &.nut-dialog__footer-ok {
+          margin-top: 10px;
+        }
+      }
+    }
+
+    .nut-button {
+      min-width: 100px;
+    }
+
+    &-cancel {
+      margin-right: 20px;
+    }
+    &-ok {
+      max-width: 128px;
+    }
+  }
+}

package/dist/packages/divider/index.scss

@@ -0,0 +1,54 @@
+.nut-divider {
+  display: flex;
+  align-items: center;
+  font-size: $divider-text-font-size;
+  color: $divider-text-color;
+  margin: $divider-margin;
+
+  &::before,
+  &::after {
+    content: '';
+    border: $divider-line-height solid currentColor;
+    border-width: $divider-line-height 0 0;
+    height: $divider-line-height;
+    flex: 1;
+  }
+
+  &.nut-divider-center,
+  &.nut-divider-left,
+  &.nut-divider-right {
+    &::before {
+      margin-right: $divider-before-margin-right;
+    }
+
+    &::after {
+      margin-left: $divider-after-margin-left;
+    }
+  }
+
+  &.nut-divider-left {
+    &::before {
+      max-width: 10%;
+    }
+  }
+
+  &.nut-divider-right {
+    &::after {
+      max-width: 10%;
+    }
+  }
+
+  &.nut-divider-dashed {
+    &::before,
+    &::after {
+      border-style: dashed;
+    }
+  }
+
+  &.nut-divider-hairline {
+    &::before,
+    &::after {
+      transform: scaleY(0.5);
+    }
+  }
+}

package/dist/packages/drag/index.scss

@@ -0,0 +1,18 @@
+.nut-drag {
+  position: fixed;
+  display: inline-block;
+  z-index: 9997 !important;
+  width: fit-content;
+  height: fit-content;
+
+  .nut-fixednav {
+    position: relative !important;
+  }
+}
+.nut-taro-drag {
+  // position: fixed;
+  display: inline-block;
+  z-index: 9997 !important;
+  width: fit-content;
+  height: fit-content;
+}

package/dist/packages/ecard/index.scss

@@ -0,0 +1,83 @@
+.nut-ecard {
+  width: 100%;
+
+  &__title {
+    line-height: 1;
+    font-size: 15px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  &__list {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 15px;
+
+    &__item {
+      width: 48%;
+      height: 46px;
+      background: $ecard-bg-color;
+      border-radius: 4px;
+      margin-bottom: 12px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &.active {
+        background: $white;
+        outline: 1px solid $primary-color;
+        border-radius: 4px;
+      }
+    }
+
+    &__input {
+      width: 100%;
+      height: 46px;
+      background: $ecard-bg-color;
+      color: rgba(0, 0, 0, 0.8);
+      border-radius: 4px;
+      display: flex;
+      padding: 0 15px 0 20px;
+      font-size: 14px;
+      justify-content: space-between;
+      align-items: center;
+
+      &--con {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        > input {
+          caret-color: $primary-color; //光标颜色
+          text-align: right;
+          background: $ecard-bg-color;
+          margin-right: 10px;
+          outline: 0 none;
+          border: 0;
+          text-decoration: none;
+        }
+      }
+
+      &.active {
+        background: $white;
+        outline: 1px solid $primary-color;
+
+        > view > input {
+          background: $white;
+        }
+      }
+    }
+
+    &__step {
+      width: 100%;
+      margin-top: 17px;
+      display: flex;
+      justify-content: space-between;
+      font-size: 20px;
+      font-family: PingFangSC;
+      font-weight: normal;
+      color: $primary-color;
+    }
+  }
+}

package/dist/packages/elevator/index.scss

@@ -0,0 +1,73 @@
+.nut-elevator {
+  width: 100%;
+  display: block;
+  position: relative;
+  &__list {
+    display: block;
+    overflow: auto;
+    &__item {
+      display: block;
+      font-size: $elevator-list-item-font-size;
+      color: $elevator-list-item-font-color;
+      &__code {
+        position: relative;
+        height: $elevator-list-item-code-height;
+        line-height: $elevator-list-item-code-line-height;
+        font-size: $elevator-list-item-code-font-size;
+        color: $elevator-list-item-code-font-color;
+        padding: $elevator-list-item-code-padding;
+        font-weight: $elevator-list-item-code-font-weight;
+        &::after {
+          content: ' ';
+          width: $elevator-list-item-code-after-width;
+          height: $elevator-list-item-code-after-height;
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          background-color: $elevator-list-item-code-after-bg-color;
+        }
+      }
+      &__name {
+        display: flex;
+        align-items: center;
+        padding: $elevator-list-item-name-padding;
+        height: $elevator-list-item-name-height;
+        line-height: $elevator-list-item-name-line-height;
+        &--highcolor {
+          color: $elevator-list-item-highcolor;
+        }
+      }
+    }
+  }
+  &__code--current {
+    position: $elevator-list-item-code-current-position;
+    right: $elevator-list-item-code-current-right;
+    top: $elevator-list-item-code-current-top;
+    transform: $elevator-list-item-code-current-transform;
+    width: $elevator-list-item-code-current-width;
+    height: $elevator-list-item-code-current-height;
+    line-height: $elevator-list-item-code-current-line-height;
+    border-radius: $elevator-list-item-code-current-border-radius;
+    background: $elevator-list-item-code-current-bg-color;
+    box-shadow: $elevator-list-item-code-current-box-shadow;
+    text-align: $elevator-list-item-code-current-text-align;
+  }
+  &__bars {
+    position: $elevator-list-item-bars-position;
+    right: $elevator-list-item-bars-right;
+    top: $elevator-list-item-bars-top;
+    transform: $elevator-list-item-bars-transform;
+    padding: $elevator-list-item-bars-padding;
+    background-color: $elevator-list-item-bars-background-color;
+    border-radius: $elevator-list-item-bars-border-radius;
+    text-align: $elevator-list-item-bars-text-align;
+    z-index: $elevator-list-item-bars-z-index;
+    &__inner {
+      &__item {
+        display: block;
+        padding: $elevator-list-item-bars-inner-item-padding;
+        font-size: $elevator-list-item-bars-inner-item-font-size;
+      }
+    }
+  }
+}