kboss/f/web-kboss/src/views/H5/less/home/index.less

.h5-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.main {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 为iOS添加平滑滚动 */
}

/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
}

.fade-enter-from {
  opacity: 0;
  transform: translateY(0.2rem);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(-0.2rem);
}

/* 返回顶部按钮样式 */
.back-to-top {
  position: fixed;
  right: 0.4rem;
  bottom: 1.5rem;
  /* 在底部导航栏上方 */
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
  border-radius: 50%;
  box-shadow: 0 0.08rem 0.24rem rgba(102, 126, 234, 0.4);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* 悬停效果 */
  &:hover {
    transform: translateY(-0.1rem);
    box-shadow: 0 0.12rem 0.36rem rgba(102, 126, 234, 0.6);
    background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
  }

  /* 激活效果 */
  &:active {
    transform: scale(0.95);
  }

  /* 点击动画 */
  &.clicked {
    animation: pulse 0.3s ease;
  }

  .back-to-top-icon {
    width: 0.45rem;
    height: 0.45rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.04rem;

    svg {
      width: 100%;
      height: 100%;
      stroke: currentColor;
      transition: transform 0.3s ease;
    }
  }

  .back-to-top-text {
    color: white;
    font-size: 0.24rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02rem;
    text-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
  }
}

/* 脉冲动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

/* 返回顶部按钮动画 */
.fade-scale-enter-active,
.fade-scale-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-scale-enter-from,
.fade-scale-leave-to {
  opacity: 0;
  transform: scale(0.8) translateY(0.2rem);
}

/* TabBar 样式 */
.tabBar {
  padding: 0.2rem 0;
  background-color: rgba(255, 255, 255, 0.95);
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 -0.02rem 0.2rem rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.05);

  .tabBar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.1rem 0.15rem;
    border-radius: 0.3rem;
    position: relative;
    overflow: hidden;
    user-select: none;

    /* 悬停效果 */
    &:hover {
      background-color: rgba(24, 144, 255, 0.08);
      transform: translateY(-0.05rem);
    }

    /* 激活状态 */
    &.active {
      .item-text {
        color: #1890ff;
        font-weight: 600;
      }
    }

    /* 点击动画 */
    &.click-animation {
      animation: tabClick 0.3s ease;
    }

    /* 激活指示器 */
    .active-indicator {
      position: absolute;
      bottom: 0.05rem;
      left: 50%;
      transform: translateX(-50%);
      width: 0.3rem;
      height: 0.04rem;
      // background: linear-gradient(90deg, #1890ff);
      border-radius: 0.02rem;
      animation: indicatorAppear 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
  }

  .item-img {
    margin-bottom: 0.08rem;
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 100%;
      height: 100%;
      display: block;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  .item-text {
    font-size: 0.24rem;
    color: #666;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    height: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 图标动画 */
.icon-bounce-enter-active {
  animation: iconBounceIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.icon-bounce-leave-active {
  animation: iconBounceOut 0.3s ease;
}

@keyframes iconBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-30deg);
  }

  50% {
    transform: scale(1.2) rotate(10deg);
  }

  70% {
    transform: scale(0.9) rotate(-5deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes iconBounceOut {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.5) rotate(30deg);
  }
}

/* 文字动画 */
.text-slide-enter-active {
  animation: textSlideIn 0.3s ease-out;
}

.text-slide-leave-active {
  animation: textSlideOut 0.2s ease-in;
}

@keyframes textSlideIn {
  0% {
    opacity: 0;
    transform: translateY(0.1rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes textSlideOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-0.1rem);
  }
}

/* Tab点击动画 */
@keyframes tabClick {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

/* 指示器出现动画 */
@keyframes indicatorAppear {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
}

/* 响应式调整 */
@media (max-width: 480px) {
  .back-to-top {
    right: 0.3rem;
    bottom: 1.6rem;
    width: 1rem;
    height: 1rem;

    .back-to-top-icon {
      width: 0.4rem;
      height: 0.4rem;
      margin-bottom: 0.03rem;
    }

    .back-to-top-text {
      font-size: 0.22rem;
    }
  }

  .tabBar {
    padding: 0.15rem 0;

    .tabBar-item {
      padding: 0.08rem 0.12rem;
    }

    .item-img {
      width: 0.45rem;
      height: 0.45rem;
    }

    .item-text {
      font-size: 0.22rem;
    }
  }
}

@media (min-width: 768px) {
  .back-to-top {
    right: 0.5rem;
    bottom: 2rem;
    width: 1.2rem;
    height: 1.2rem;

    .back-to-top-icon {
      width: 0.5rem;
      height: 0.5rem;
      margin-bottom: 0.05rem;
    }

    .back-to-top-text {
      font-size: 0.26rem;
    }
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .back-to-top {
    background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
    box-shadow: 0 0.08rem 0.24rem rgba(138, 43, 226, 0.4);

    &:hover {
      background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
      box-shadow: 0 0.12rem 0.36rem rgba(138, 43, 226, 0.6);
    }
  }

  .tabBar {
    background-color: rgba(30, 30, 30, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.05);

    .tabBar-item {
      .item-text {
        color: #b0b0b0;
      }

      &:hover {
        background-color: rgba(100, 181, 246, 0.08);
      }

      &.active {
        .item-text {
          color: #64b5f6;
        }

        .active-indicator {
          background: linear-gradient(90deg, #64b5f6, #81c784);
        }
      }
    }
  }
}

/* 安全区域适配（iPhone X及以上机型） */
@supports (padding: max(0px)) {
  .back-to-top {
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
  }

  .tabBar {
    padding-bottom: calc(0.2rem + env(safe-area-inset-bottom, 0));
  }

  @media (max-width: 480px) {
    .back-to-top {
      bottom: calc(1.6rem + env(safe-area-inset-bottom, 0));
    }

    .tabBar {
      padding-bottom: calc(0.15rem + env(safe-area-inset-bottom, 0));
    }
  }

  @media (min-width: 768px) {
    .back-to-top {
      bottom: calc(2rem + env(safe-area-inset-bottom, 0));
    }
  }
}