$theme-color: #02ce26;

// pages/index/index.scss
.category-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100rpx);
  overflow: hidden;
  // 包名
  .category-header {
    padding-top: 100rpx;
    background: #fbeccb;
    .appName {
      padding-left: 40rpx;
      font-size: 28rpx;
      font-weight: 600;
    }
    // 搜索区域
    .category-search {
      margin: 16rpx 16rpx 0;
      .search-bar {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 50rpx;
        padding: 10rpx 6rpx 10rpx 24rpx;
        .search-button {
          padding-right: 20rpx;
          font-size: 26rpx;
          color: $theme-color;
        }
        input {
          flex: 1;
          padding-right: 40rpx;
          margin-left: 15rpx;
          font-size: 28rpx;
        }
        .placeholder {
          color: #ccc;
        }
      }
    }
    // 分类导航
    .category-scroll {
      .category-list {
        display: flex;
        padding: 16rpx 30rpx;
        gap: 40rpx;
        .category-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex-shrink: 0;
          .category-icon {
            width: 80rpx;
            height: 80rpx;
            background: #e3e3e3;
            border-radius: 32rpx;
            border: 6rpx solid #e3e3e3;
            font-size: 48rpx;
            margin-bottom: 10rpx;
          }
          .category-name {
            padding: 4rpx 8rpx;
            font-size: 24rpx;
            color: #333;
          }
          &.active{
            .category-icon{
                border: 6rpx solid $theme-color;
            }
            .category-name{
                color: #fff;
                background: $theme-color;
                border-radius: 24rpx;
            }
          }
        }
      }
    }
  }
  // 主内容区
  .main-content {
    flex: 1;
    height: calc(100vh - 100rpx - 360rpx);
    display: flex;
    .left-categories {
      max-width: 200rpx;
      background: #f8f8f8;
      .left-category-item {
        padding: 30rpx 16rpx;
        font-size: 24rpx;
        color: #666;
        text-align: center;
        border-left: 6rpx solid transparent;
        &.active {
          background: white;
          color: $theme-color;
          border-left-color: $theme-color;
          font-weight: bold;
        }
      }
    }
    .right-products {
      flex: 1;
      background: white;
      // 推荐标签
      .tag-list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1rpx solid #f0f0f0;
        .tag-item {
          padding: 24rpx;
          font-size: 24rpx;
          color: #666;
          &.active {
            color: $theme-color;
          }
        }
      }
      .products-grid {
        .product-card {
          padding: 20rpx;
          display: flex;
          .product-image {
            flex-shrink: 0;
            flex-grow: 0;
            width: 200rpx;
            height: 200rpx;
            border-radius: 24rpx;
            background: #ddd;
          }
          .product-info {
            flex: 1;
            margin-left: 20rpx;
            border-bottom: 2rpx solid #eee;
            .product-name {
              font-size: 28rpx;
              color: #333;
              font-weight: bold;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
            .product-desc {
              font-size: 24rpx;
              color: #666;
            }
            .product-tags {
              margin-top: 4rpx;
              display: flex;
              align-items: flex-start;
              gap: 10rpx;
              .tag {
                background: #fff2f0;
                color: #ff4d4f;
                padding: 4rpx 8rpx;
                border-radius: 6rpx;
                font-size: 20rpx;
              }
            }
            .price-section {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .price-left {
                display: flex;
                align-items: center;
                .current-price {
                  font-size: 32rpx;
                  color: #ff3b30;
                  font-weight: bold;
                  margin-right: 10rpx;
                }
                .original-price {
                  font-size: 24rpx;
                  color: #999;
                  text-decoration: line-through;
                }
              }
              .add-cart-btn {
                color: $theme-color;
              }
            }
          }
        }
      }
    }
  }
}