@nutui/nutui 3.1.19-beta.7 → 3.1.20-beta.0

package/dist/packages/avatar/index.scss

@@ -5,6 +5,11 @@
   display: inline-block;
   position: relative;
   flex: 0 0 auto; // 防止被压缩
+  text-align: center;
+  img {
+    width: 100%;
+    height: 100%;
+  }
   .icon {
     background-size: 100% 100%;
     position: absolute;
@@ -24,25 +29,25 @@
     overflow: hidden;
   }
 }
-.avatar-large {
+.nut-avatar-large {
   width: $avatar-large-width;
   height: $avatar-large-height;
   line-height: $avatar-large-height;
 }
-.avatar-small {
+.nut-avatar-small {
   width: $avatar-small-width;
   height: $avatar-small-height;
   line-height: $avatar-small-height;
 }
-.avatar-normal {
+.nut-avatar-normal {
   width: $avatar-normal-width;
   height: $avatar-normal-height;
   line-height: $avatar-normal-height;
 }
-.avatar-round {
+.nut-avatar-round {
   border-radius: 50%;
   overflow: hidden;
 }
-.avatar-square {
+.nut-avatar-square {
   border-radius: $avatar-square;
 }

package/dist/packages/avatargroup/index.scss

@@ -0,0 +1,14 @@
+.nut-avatar-group {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: inline-block;
+  position: relative;
+  flex: 0 0 auto; // 防止被压缩
+  .nut-avatar {
+    border: 1px solid #fff;
+    &:not(:first-of-type) {
+      margin-left: -8px;
+    }
+  }
+}

package/dist/packages/category/index.scss

@@ -0,0 +1,38 @@
+.nut-category {
+  &__cateList {
+    display: flex;
+    background: $category-bg-color;
+  }
+
+  &__cateListLeft {
+    background: $category-ListLeft-bg-color;
+  }
+
+  &__cateListItemChecked,
+  &__cateListItem {
+    width: 100px;
+    height: 50px;
+    font-size: 13px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: $category-ListItem-color;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s;
+  }
+  &__cateListItemChecked {
+    background: $category-ListItemChecked-color;
+    font-weight: 500;
+    transition: all 0.3s;
+    position: relative;
+    &::before {
+      position: absolute;
+      content: '';
+      left: 0;
+      width: 5px;
+      height: 18px;
+      background: $category-ListItemChecked-img-bg-color;
+    }
+  }
+}

package/dist/packages/categorypane/index.scss

@@ -0,0 +1,124 @@
+.nut-categorypane {
+  &__cateList {
+    display: flex;
+    background: rgba(255, 255, 255, 1);
+  }
+
+  &__cateListLeft {
+    background: rgba(246, 247, 249, 1);
+  }
+
+  &__cateListItemChecked,
+  &__cateListItem {
+    width: 100px;
+    height: 50px;
+    font-size: 13px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: rgba(51, 51, 51, 1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s;
+  }
+  &__cateListItemChecked {
+    background: rgba(255, 255, 255, 1);
+    font-weight: 500;
+    transition: all 0.3s;
+  }
+
+  &__cateListRight {
+    padding-left: 15px;
+    background: rgba(255, 255, 255, 1);
+  }
+
+  &__childTitle {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    font-size: 13px;
+    font-family: PingFangSC;
+    font-weight: 500;
+    color: rgba(51, 51, 51, 1);
+  }
+
+  &__childItemList {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  &__childItem {
+    margin-right: 10px;
+  }
+
+  &__childImg {
+    width: 75px;
+    height: 75px;
+    border-radius: 5px;
+  }
+
+  &__skuName {
+    margin-right: 10px;
+    width: 75px;
+    height: 40px;
+    border: 1px solid rgba(153, 153, 153, 1);
+    border-radius: 5px;
+    font-size: 12px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: rgba(102, 102, 102, 1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    &:nth-child(n + 4) {
+      margin-top: 15px;
+    }
+  }
+
+  &__skuImg {
+    font-size: 12px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: rgba(102, 102, 102, 1);
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  &__selfItemList {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  &__selfskuName {
+    margin-left: 15px;
+    margin-top: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 75px;
+    height: 40px;
+    border: 1px solid rgba(153, 153, 153, 1);
+    border-radius: 5px;
+    font-size: 12px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: rgba(102, 102, 102, 1);
+  }
+
+  &__skuName {
+    margin-left: 15px;
+    margin-top: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 75px;
+    height: 40px;
+    border: 1px solid rgba(153, 153, 153, 1);
+    border-radius: 5px;
+    font-size: 12px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: rgba(102, 102, 102, 1);
+  }
+}

package/dist/packages/circleprogress/index.scss

@@ -1,65 +1,24 @@
 .nut-circleprogress {
   position: relative;
 
-  .nut-circleprogress-content {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-  .nut-circleprogress__right {
-    width: 50%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    float: right;
-  }
-  .nut-circleprogress__left {
-    width: 50%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    float: left;
+  &-hover {
+    stroke: $circleprogress-primary-color;
+    transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;
   }
 
-  .nut-circleprogress__line {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    overflow: hidden;
-    &.nut-circleprogress__l {
-      top: 0px;
-      transform: rotate(0deg);
-      left: 0px;
-    }
-
-    &.nut-circleprogress__r {
-      top: 0px;
-      transform: rotate(180deg);
-      right: 0px;
-    }
+  &-path {
+    stroke: $circleprogress-path-color;
   }
 
-  .nut-circleprogress__progress {
+  &-text {
     position: absolute;
     top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 16px;
-    font-family: PingFangSC;
-    font-weight: normal;
-    color: rgba(29, 29, 33, 1);
-  }
-
-  .nut-circleprogress__line__c {
-    width: 200%;
-    height: 100%;
-    border: 10px solid transparent;
-    border-radius: 50%;
-    position: absolute;
+    left: 0;
     box-sizing: border-box;
-    top: 0;
-    transform: rotate(-45deg);
+    width: 100%;
+    transform: translateY(-50%);
+    text-align: center;
+    color: $circleprogress-text-color;
+    font-size: $circleprogress-text-size;
   }
 }

package/dist/packages/col/index.scss

@@ -15,10 +15,10 @@
 
 @for $i from 1 through 24 {
   .nut-col-offset-#{$i} {
-    margin-left: 100/ 24 * $i * 1%;
+    margin-left: calc(100 / 24) * $i * 1%;
   }
 
   .nut-col-#{$i} {
-    width: 100/ 24 * $i * 1%;
+    width: calc(100 / 24) * $i * 1%;
   }
 }

package/dist/packages/collapseitem/index.scss

@@ -68,13 +68,15 @@
   // .extraRender {
   //   display: block;
   // }
-  .collapse-wrapper {
+  .collapse-wrapper,
+  .collapse-extraWrapper {
     display: block;
     position: relative;
     height: 0;
     overflow: hidden;
     transition: height 0.3s ease-in-out;
-    .collapse-content {
+    .collapse-content,
+    .collapse-extraRender {
       display: block;
       padding: $collapse-wrapper-content-padding;
       color: $collapse-wrapper-content-color;
@@ -86,6 +88,14 @@
       padding: $collapse-wrapper-empty-content-padding;
     }
   }
+  .collapse-extraWrapper {
+    height: auto;
+    .collapse-extraRender {
+      word-wrap: break-word;
+      word-break: break-all;
+      overflow: hidden;
+    }
+  }
   .open-style {
     will-change: height;
     height: auto;

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/ecard/index.scss

@@ -27,7 +27,7 @@
 
       &.active {
         background: $white;
-        border: 1px solid $primary-color;
+        outline: 1px solid $primary-color;
         border-radius: 4px;
       }
     }
@@ -61,7 +61,7 @@
 
       &.active {
         background: $white;
-        border: 1px solid $primary-color;
+        outline: 1px solid $primary-color;
 
         > view > input {
           background: $white;