@import './templates/navbar/index.scss';

.home-container {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--background-color-base);
}

.column-wrapper {
  position: relative;
  z-index: 10;
  padding-top: 16rpx;
  margin-top: -20rpx;
  background: var(--background-color-base);
  border-radius: 26rpx 26rpx 0 0;
}

.colunm-container {
  .column-title {
    display: flex;
    padding: 0 var(--padding-size-base);
    margin: 32rpx auto 24rpx auto;
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    line-height: 48rpx;
    color: var(--text-color-base);
  }
}

.hotsale-content {
  --hot-sale-size: 346rpx;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 var(--padding-size-base);

  .hotsale-item {
    position: relative;
    width: var(--hot-sale-size);
    height: var(--hot-sale-size);
    overflow: hidden;
    color: var(--text-color-base-inverse);
  }

  .hotsale-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16rpx;
  }

  .hotsale-title {
    position: absolute;
    bottom: 55rpx;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
    padding: 0 var(--padding-size-base);
    font-size: 32rpx;
  }

  .hotsale-desc {
    position: absolute;
    bottom: 16rpx;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
    padding: 0 var(--padding-size-base);
    font-size: var(--font-size-base);
  }
}

.hotsale-content-single {
  padding: 0 var(--padding-size-base);

  .hotsale-img {
    width: 700rpx;
    height: 260rpx;
    overflow: hidden;
    border-radius: var(--border-radius-base);
  }
}

.tabs-container {
  padding-top: 35rpx;

  .tabs-content {
    padding: 35rpx 0;
  }

  .scroll-image-tab {
    padding: 24rpx var(--padding-size-base);
  }

  .van-tabs__scroll {
    background-color: transparent;
  }
}

.tabs-fixed {
  .scroll-image-tab {
    background-color: var(--background-color-white);
  }

  .van-tabs__scroll {
    background-color: var(--background-color-white);
  }
}

.circle-tabs {
  .van-tab--active {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
  }

  .van-tab {
    flex: none !important;
    padding: 0 var(--padding-size-base);
  }

  .van-tabs__line {
    height: 10rpx;
    background: url("data:image/svg+xml,%3Csvg width='44' height='10' viewBox='0 0 44 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.563.936C10.25 3.646 16.73 5 22 5 27.27 5 33.749 3.645 41.437.936A1.923 1.923 0 0 1 44 2.75v.722a3 3 0 0 1-1.932 2.803C35.551 8.758 28.862 10 22 10 15.138 10 8.449 8.758 1.932 6.275A3 3 0 0 1 0 3.472V2.75A1.924 1.924 0 0 1 2.563.936z' fill='%23FF7437' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 44rpx 10rpx;
  }
}