xin-procurement-weapp/src/pages/index/index.less

.home-page {
  min-height: 100vh;
  background: #f7f8fa;
  // 底部预留自定义 tabBar（110rpx + 安全区）+ 购物车悬浮球空间，避免内容被遮挡
  padding-bottom: calc(250rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;

  // ===== 自定义顶部导航栏 =====
  .home-header {
    background: linear-gradient(160deg, #d60410 0%, #ee0a24 55%, #ff4d4f 100%);
    // 底部留白供轮播图上移叠放
    padding-bottom: 88rpx;

    &__bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16rpx 32rpx 8rpx;
    }

    &__brand {
      display: flex;
      align-items: baseline;
    }

    &__title {
      color: #ffffff;
      font-size: 44rpx;
      font-weight: 700;
      letter-spacing: 4rpx;
    }

    &__slogan {
      margin-left: 16rpx;
      color: rgba(255, 255, 255, 0.75);
      font-size: 22rpx;
      letter-spacing: 2rpx;
    }

    &__notice {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.18);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &__search {
      padding: 8rpx 16rpx 0;
    }
  }

  // ===== 轮播图 =====
  .home-banner {
    // 上移叠在红色导航栏上，形成视觉连贯
    margin: -72rpx 24rpx 0;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 24rpx rgba(238, 10, 36, 0.15);
    position: relative;
    z-index: 2;

    &__swiper {
      border-radius: 20rpx;
    }

    &__image {
      width: 100%;
      height: 300rpx;
      display: block;
    }

    &__placeholder {
      width: 100%;
      height: 300rpx;
      background: linear-gradient(135deg, #ff8a5c, #ff4d4f);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    &__placeholder-title {
      color: #fff;
      font-size: 44rpx;
      font-weight: 700;
      letter-spacing: 8rpx;
    }

    &__placeholder-sub {
      margin-top: 16rpx;
      color: rgba(255, 255, 255, 0.85);
      font-size: 24rpx;
      letter-spacing: 2rpx;
    }
  }

  // ===== 宫格导航 =====
  .home-menu {
    margin: 20rpx 24rpx 0;
    background: #fff;
    border-radius: 20rpx;
    padding: 28rpx 0 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  }

  .menu-icon {
    width: 88rpx;
    height: 88rpx;
    border-radius: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    &__image {
      width: 88rpx;
      height: 88rpx;
      display: block;
    }

    &__text {
      color: #fff;
      font-size: 38rpx;
      font-weight: 600;
    }
  }

  // ===== 促销推荐卡片 =====
  .home-promo {
    margin: 20rpx 24rpx 0;
  }

  .promo-card {
    position: relative;
    height: 180rpx;
    border-radius: 20rpx;
    overflow: hidden;
    margin-bottom: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

    &:last-child {
      margin-bottom: 0;
    }

    &__bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    &__mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(160, 4, 16, 0.82) 0%, rgba(238, 10, 36, 0.45) 55%, rgba(238, 10, 36, 0) 100%);
    }

    &__content {
      position: absolute;
      left: 32rpx;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      z-index: 2;
    }

    &__title {
      color: #ffffff;
      font-size: 38rpx;
      font-weight: 700;
      letter-spacing: 2rpx;
      text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.25);
    }

    &__sub {
      margin-top: 10rpx;
      color: rgba(255, 255, 255, 0.9);
      font-size: 24rpx;
      letter-spacing: 1rpx;
    }
  }

  // ===== 推荐商品 =====
  .home-recommend {
    margin: 28rpx 24rpx 0;

    &__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8rpx 8rpx 20rpx;
    }

    &__title-wrap {
      display: flex;
      align-items: center;
    }

    &__title-bar {
      width: 8rpx;
      height: 30rpx;
      border-radius: 4rpx;
      background: linear-gradient(180deg, #ee0a24, #ff6034);
      margin-right: 14rpx;
    }

    &__title {
      font-size: 32rpx;
      font-weight: 600;
    }

    &__more {
      font-size: 24rpx;
      color: #969799;
    }

    &__empty {
      background: #fff;
      border-radius: 20rpx;
      padding: 80rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    &__empty-text {
      font-size: 26rpx;
      color: #969799;
    }

    &__loading {
      display: flex;
      justify-content: center;
      padding: 20rpx 0 8rpx;
    }

    &__loading-text {
      font-size: 24rpx;
      color: #969799;
    }

    &__login-btn {
      margin-top: 24rpx;
      padding: 14rpx 60rpx;
      background: #ee0a24;
      color: #fff;
      font-size: 28rpx;
      border-radius: 999rpx;
    }
  }

  // ===== 商品卡片（两列网格） =====
  .product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .product-card {
    width: 342rpx;
    background: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    margin-bottom: 16rpx;

    &__image {
      width: 100%;
      height: 300rpx;
      background: #f2f3f5;
      display: block;
    }

    &__info {
      padding: 16rpx 20rpx 20rpx;
    }

    &__name {
      font-size: 28rpx;
      color: #323233;
      font-weight: 500;
      overflow: hidden;
      margin-right: 20rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &__spec {
      margin-top: 8rpx;
      font-size: 22rpx;
      color: #969799;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &__bottom {
      margin-top: 8rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &__price {
      font-size: 30rpx;
      color: #ee0a24;
      font-weight: 600;

      &--none {
        color: #c8c9cc;
        font-weight: 400;
        font-size: 24rpx;
      }
    }

    &__add {
      width: 42rpx;
      height: 42rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, #ee0a24, #ff6034);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &__add-icon {
      color: #fff;
      font-size: 30rpx;
      line-height: 1;
    }
  }
}