/* pages/index/index.scss */
// 定义变量
$primary-color: #ff3040;
$text-color: #333;
$light-text: #999;
$white: #ffffff;
$theme-color: #06CD31;

// 通用样式
.home-page {
    padding-top: 250rpx;
  background: linear-gradient(
    to bottom,
    $primary-color 250rpx,
    #f5f5f5 50%,
    #f5f5f5 100%
  );
  padding-bottom: 100rpx;
  .home-page-block-gap {
    margin: 16rpx 24rpx 0;
    border-radius: 24rpx;
  }
  .home-page__header{
      position: fixed;
      top: 0;
      left: 0;
      padding-bottom: 20rpx;
      width: 100%;
      background: $primary-color;
      z-index: 10000;
      transition: background 0.3s ease;
  }
  .scrolled-style{
    background: $white;
  }
}
// 包名
.header-appName {
  padding-top: 100rpx;
  margin: 0 40rpx;
  .appName {
    font-size: 28rpx;
    font-weight: 600;
  }
}
// 包名和搜索区域
.home-search {
  .search-bar {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 50rpx;
    padding: 6rpx 6rpx 6rpx 24rpx;
    .van-button {
      font-size: 26rpx;
    }
    input {
      flex: 1;
      padding-right: 40rpx;
      margin-left: 15rpx;
      font-size: 28rpx;
    }
    .placeholder {
      color: #ccc;
    }
    .van-button{
        min-width: 120rpx;
        height: 58rpx;
        font-size: 30rpx;
    }
  }
}
// 分类网格
.category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: $white;
  padding: 24rpx 0;
  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20rpx;
    .category-icon {
      width: 100rpx;
      height: 100rpx;
      background-color: #bbb;
      border-radius: 40rpx;
      margin-bottom: 8rpx;
    }
    .category-name {
      font-size: 24rpx;
      color: $text-color;
    }
  }
}
// 促销横幅
.promo-banner {
    .van-notice-bar{
        padding: 0 16rpx;
        border-radius: 16rpx;
        font-size: 24rpx;
        height: 60rpx;
    }
}
// 限时秒杀
.flash-sale {
  background: linear-gradient(
    to bottom,
    #e3f1b6 0%,
    #f1f7de 10%,
    white 30%,
    white 100%
  );
  padding: 24rpx 30rpx;
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
    }
    .view-more {
      font-size: 24rpx;
      color: $light-text;
    }
  }
  .sale-products {
    margin-top: 24rpx;
    white-space: nowrap;
    .sale-item {
      display: inline-block;
      width: 25%;
      padding-right: 24rpx;
      box-sizing: border-box;
      text-align: center;
      .sale-image {
        width: 136rpx;
        height: 136rpx;
        background: #bbb;
        border-radius: 50%;
      }
      .sale-price-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        .sale-price {
          display: block;
          font-size: 28rpx;
          color: $primary-color;
          font-weight: bold;
        }
        .original-price {
          margin-left: 4rpx;
          display: block;
          font-size: 22rpx;
          color: $light-text;
          text-decoration: line-through;
        }
      }
    }
  }
}
.recommendation-header {
  &.home-page-block-gap {
    margin-top: 32rpx;
  }
  padding-left: 40rpx;
  display: flex;
  .tab {
    flex-shrink: 0;
    margin-right: 40rpx;
    font-size: 32rpx;
    padding-bottom: 10rpx;
    &.active {
      color: $primary-color;
      font-weight: bold;
      border-bottom: 4rpx solid $primary-color;
    }
  }
}
// 猜你喜欢
.recommendation {
  .product-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30rpx;
    .product-item {
      background: $white;
      padding: 8rpx;
      border-radius: 16rpx;
      .item-image {
        width: 100%;
        height: 300rpx;
        background: #bbb;
        border-radius: 16rpx;
      }
      .item-name {
        display: block;
        font-size: 26rpx;
        margin: 8rpx 12rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      /*  .item-tags {
        margin-bottom: 15rpx;
        .tag {
          display: inline-block;
          font-size: 20rpx;
          color: $primary-color;
          background: #ffecec;
          padding: 5rpx 15rpx;
          border-radius: 10rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
        }
      } */
      .price-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 12rpx 12rpx 16rpx 8rpx;
        .current-price {
          font-size: 32rpx;
          color: $primary-color;
          font-weight: bold;
        }
        .original-price {
          font-size: 24rpx;
          color: $light-text;
          text-decoration: line-through;
        }
        .van-button {
          height: 48rpx;
          padding: 0 20rpx;
          font-size: 24rpx !important;
          background: $primary-color !important;
        }
      }
      /*  .purchase-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .sales {
          font-size: 22rpx;
          color: $light-text;
        }
        .buy-btn {
          background: $primary-color;
          color: $white;
          font-size: 24rpx;
          padding: 10rpx 25rpx;
          border-radius: 30rpx;
          line-height: 1.2;
        }
      } */
    }
  }
}