wxhuanart/miniprogram/pages/index/index.less

/**index.wxss**/
.page-wrap {
  height: calc(100vh - constant(safe-area-inset-bottom) - 100rpx);
  height: calc(100vh - env(safe-area-inset-bottom) - 100rpx);
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

.swiper-wrap {
  margin-top: 20rpx;
}

.t-image__swiper {
  width: 100%;
  height: 300rpx;
  border-radius: 10rpx;
}

.row-class {
  background-color: yellow;
}
.home-swiper {
  height: 481rpx;
}

.t-image__swiper {
  height: 481rpx;
}

.cateimage {
  height: 50rpx;
}

.timg1 {
  width: 516rpx;
  height: 193rpx;
}

.timg2 {
  width: 217rpx;
  height: 291rpx;
}

.timgactive {
  width: 672rpx;
  height: 234rpx;
}
.timgcasourel {
  width: 750rpx;
  height: 1466rpx;
  transform: scale(1.3);
  transform-origin: center 74%;
  transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1);
}

.movefloatbtn {
  position: absolute;
  bottom: 16%;
  left: 50%;
  width: 275rpx;
  height: 62rpx;
  background-color: transparent;
  background-size: 100% 100%;
  border: 0;
  transform: translateX(-50%);
  image-rendering: -moz-crisp-edges; /* Firefox        */
  image-rendering: -o-crisp-edges; /* Opera          */
  image-rendering: -webkit-optimize-contrast; /* Safari         */
  image-rendering: optimize-contrast; /* CSS3 Proposed  */
  image-rendering: crisp-edges; /* CSS4 Proposed  */
}

.movecenter {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-50%, 0, 0);

  .movebtn {
    background: rgba(0, 0, 0, 0);
    border: 0;
    color: #fff;
  }

  .t-icon-base {
    animation: movement 1s infinite;
  }

  @keyframes movement {
    0% {
      transform: translate3d(0, -30%, 0);
    }
    100% {
      transform: translate3d(0, 30%, 0);
    }
  }
}

.zoom {
  .movefloatbtn {
    top: 824rpx;
  }

  .movecenter {
    .t-icon-base {
      animation: movement2 0.4s forwards;
    }

    @keyframes movement2 {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(180deg);
      }
    }
  }

  .timgcasourel {
    object-fit: scale-down;
    transform: scale(1);
  }
}