index.less 2.21 KB
// 我的关注页面样式
.favorites-list {
  .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32rpx 0;
    
    .loading-text {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .no-more-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32rpx 0;
    
    text {
      font-size: 24rpx;
      color: #ccc;
    }
  }
}

// 车辆卡片样式
.car-item {
  background: white;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 24rpx;
  
  .car-image {
    position: relative;
    
    .follow-tag {
      position: absolute;
      top: 8rpx;
      right: 8rpx;
      background-color: #ef4444;
      color: white;
      font-size: 20rpx;
      padding: 4rpx 8rpx;
      border-radius: 8rpx;
      z-index: 2;
    }
  }
  
  .car-info {
    padding: 24rpx;
    
    .car-name {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 8rpx;
    }
    
    .car-details {
      font-size: 24rpx;
      color: #666;
      margin-bottom: 16rpx;
    }
    
    .price-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .price-info {
        .current-price {
          font-size: 32rpx;
          font-weight: bold;
          color: #ff6b35;
        }
        
        .original-price {
          font-size: 24rpx;
          color: #999;
          text-decoration: line-through;
          margin-left: 16rpx;
        }
      }
      
      .unfollow-btn {
        padding: 12rpx 24rpx;
        border: 2rpx solid #ddd;
        border-radius: 32rpx;
        font-size: 24rpx;
        color: #666;
        background: white;
        
        &:active {
          background: #f5f5f5;
        }
      }
    }
  }
}

// 空状态样式
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

// 通用样式
.text-center {
  text-align: center;
}

.py-4 {
  padding-top: 32rpx;
  padding-bottom: 32rpx;
}

.mb-3 {
  margin-bottom: 24rpx;
}

.space-y-4 > * + * {
  margin-top: 32rpx;
}