nutui/src/packages/magic/magic.scss

.adjust-position {
  margin-top: -20px;
  margin-bottom: -20px;
}
.header-wrap {
  position: relative;
  height: 710px;
  .img-header {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}

$module_name: '.cube-item';
#{$module_name} {
  height: 90px;
  width: 88px;
  // margin-left: auto;
  // margin-right: 10px;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    border-radius: 0 0 26px 26px;
  }
  &-box {
    height: 63px;
    width: 100%;
    text-align: center;
    position: absolute;
    background: #fff;
    border-radius: 26px 26px 11px 11px;
    transform: translateZ(0);
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
  }

  .sub-name {
    width: 100%;
    position: absolute;
    top: 63px;
    padding: 0 10px;
    box-sizing: border-box;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 27px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateZ(0);
  }

  .sub-image {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background-color: #fff;
    background-position: center;
    background-size: 100%;
    transform: translateY(6px);
  }
  .sub-desc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 77px;
    box-sizing: border-box;
    height: 15px;
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
    position: absolute;
    bottom: 29px;
    left: 50%;
    transform-origin: 0 center;
    transform: translate3d(-50%, 0, 1px);
    span {
      width: 100%;
      display: block;
      line-height: normal;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
  // 图片
  &--pic {
    &::before {
      background: url('https://img12.360buyimg.com/imagetools/jfs/t1/184083/34/6101/38841/60b065caEaaf7c5d0/eec4cd260f46d9f0.png') no-repeat
        center/100%;
      height: 100%;
    }
    .cube-item-box {
      display: none;
    }
    .sub-desc {
      display: none;
    }
    .sub-name {
      display: none;
    }
  }
  // 活动
  &--act {
    &::before {
      background: url('https://img11.360buyimg.com/imagetools/jfs/t1/195605/17/5252/39357/60b065caEe0aa4c7e/04a341f4e51c6a9b.png') no-repeat
        center/100%;
    }
    .sub-desc {
      background: #ff5c17;
    }
  }
  // 榜单
  &--rank {
    &::before {
      background: url('https://img14.360buyimg.com/imagetools/jfs/t1/183388/37/6207/39741/60b065caEea1440a1/8860c63660fc9ac4.png') no-repeat
        center/100%;
    }
    .sub-desc {
      background: #1f95fb;
    }
  }
  // shop
  &--shop {
    &::before {
      background: url('https://img12.360buyimg.com/imagetools/jfs/t1/184083/34/6101/38841/60b065caEaaf7c5d0/eec4cd260f46d9f0.png') no-repeat
        center/100%;
    }
    .sub-desc {
      background: #ffd01f;
      span {
        color: #000;
      }
    }
  }
  // lbs
  &--lbs {
    &::before {
      background: url('https://img10.360buyimg.com/imagetools/jfs/t1/129094/23/18726/38672/60b065caEb849e8cb/da761e3ebae5bc84.png') no-repeat
        center/100%;
    }
    .sub-desc {
      background: #ffd01f;
      span {
        color: #000;
      }
    }
  }
  // 未读
  &--unread {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    animation: show 2s infinite;
  }
  &--special {
    background-size: cover;
    background-repeat: no-repeat;
    &:before {
      display: none;
    }
    .cube-item-box {
      display: none;
    }
    .sub-desc {
      display: none;
    }
  }
  @keyframes show {
    0% {
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    }
    50% {
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
    100% {
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    }
  }
  @at-root .cube-wrapper--inited {
    .cube-col {
      .cube-item {
        .sub-image {
          animation: cube-image 0.2s cubic-bezier(0.33, 0, 0.67, 1) 1s forwards;
        }
      }
    }
  }

  @keyframes cube-image {
    0% {
      transform: translateY(13px);
    }
    66% {
      transform: translateY(-5px);
    }
    100% {
      transform: translateY(0);
    }
  }
}

$module_name1: '.cube';

#{$module_name1} {
  width: 100%;
  // position: absolute;
  z-index: 10;

  &-container {
    width: 100%;
    padding: 15px 0;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
  }
  &-wrapper {
    width: 100%;
    white-space: nowrap;
    perspective: 500px;
    animation-play-state: paused;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  &-col {
    display: inline-block;
    width: 25%;
    box-sizing: border-box;
    // padding: 0 4px;
    transition: inherit;

    &--anime:nth-child(5) {
      #{$module_name1}-item-wrap {
        animation: cube5 560ms cubic-bezier(0.33, 0, 0.67, 1) 1s both;
      }
    }
    @keyframes cube5 {
      0% {
        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
        transform: translate3d(733px, 0, 0);
      }
      57% {
        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
        transform: translate3d(-30px, 0, 0);
      }
      58% {
        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
        transform: translate3d(-30px, 0, 0);
      }
      100% {
        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
        transform: translate3d(0, 0, 0);
      }
    }

    &--anime:nth-child(6) {
      #{$module_name1}-item-wrap {
        animation: cube6 560ms cubic-bezier(0.33, 0, 0.83, 1) 1.08s both;
      }
    }
    @keyframes cube6 {
      0% {
        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
        transform: translate3d(554px, 0, 0);
      }
      57% {
        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
        transform: translate3d(-20px, 0, 0);
      }
      58% {
        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
        transform: translate3d(-20px, 0, 0);
      }
      100% {
        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
        transform: translate3d(0, 0, 0);
      }
    }

    &--anime:nth-child(7) {
      #{$module_name1}-item-wrap {
        animation: cube7 560ms cubic-bezier(0.33, 0, 0.83, 1) 1.16s both;
      }
    }
    @keyframes cube7 {
      0% {
        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
        transform: translate3d(378px, 0, 0);
      }
      57% {
        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
        transform: translate3d(-20px, 0, 0);
      }
      58% {
        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
        transform: translate3d(-20px, 0, 0);
      }
      100% {
        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
        transform: translate3d(0, 0, 0);
      }
    }
    &--anime:nth-child(8) {
      #{$module_name1}-item-wrap {
        animation: cube8 560ms cubic-bezier(0.33, 0, 0.83, 1) 1.28s both;
      }
    }
    @keyframes cube8 {
      0% {
        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
        transform: translate3d(205px, 0, 0);
      }
      57% {
        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
        transform: translate3d(-20px, 0, 0);
      }
      58% {
        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
        transform: translate3d(-20px, 0, 0);
      }
      100% {
        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
        transform: translate3d(0, 0, 0);
      }
    }
  }
  &-item-wrap {
    margin-bottom: 16px;
  }
}