// Post页面样式
.post-page {
  // 车辆卡片样式
  .vehicle-list {
    // 图片容器尺寸优化
    .w-32 {
      width: 200rpx !important;
      height: 150rpx !important;
    }
    
    // 卡片样式增强
    .bg-white {
      border: 1px solid #f0f0f0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      
      &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
      }
      
      &:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      }
    }
    
    // 收藏按钮样式
    .absolute.top-2.right-2 {
      transition: transform 0.2s ease;
      
      &:hover {
        transform: scale(1.1);
      }
      
      &:active {
        transform: scale(0.95);
      }
    }
    
    // 价格样式优化
    .text-orange-500 {
      color: #f97316;
      font-weight: 700;
    }
    
    // 认证标识样式
    .bg-orange-500 {
      background: linear-gradient(135deg, #f97316, #ea580c);
      box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
    }
    
    // 文字省略
    .font-medium {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  
  // 精品推荐区域
  .grid {
    // 图片容器
    .w-full.h-36 {
      height: 280rpx;
    }
    
    // 卡片样式
    .bg-white {
      border: 1px solid #f0f0f0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      
      &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
      }
    }
  }
  
  // 加载状态样式
  .load-more-container {
    padding: 40rpx 0;
    
    .loading-container {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      
      .loading-spinner {
        width: 40rpx;
        height: 40rpx;
        border: 4rpx solid #f3f3f3;
        border-top: 4rpx solid #f97316;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-right: 16rpx;
      }
      
      .loading-text {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .no-more-data {
      text-align: center;
      color: #999;
      font-size: 28rpx;
    }
  }
}

// NutUI组件样式覆盖
.nut-menu {
  border-bottom: 1px solid #f0f0f0;
  
  .nut-menu-item {
    font-size: 28rpx;
    
    &.active {
      color: #f97316;
    }
  }
}

.nut-searchbar {
  .nut-searchbar__input {
    font-size: 28rpx;
  }
}

.nut-button {
  &[type="default"] {
    border-color: #f97316;
    color: #f97316;
    
    &:hover {
      background-color: #f97316;
      color: white;
    }
  }
}

// 响应式适配
@media (max-width: 750rpx) {
  .post-page {
    .vehicle-list {
      .w-32 {
        width: 180rpx !important;
        height: 135rpx !important;
      }
    }
    
    .grid {
      .w-full.h-36 {
        height: 240rpx;
      }
    }
    
    .font-medium {
      font-size: 26rpx;
    }
    
    .text-xs {
      font-size: 22rpx;
    }
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .post-page {
    .bg-white {
      background-color: #1f2937;
      border-color: #374151;
      color: #f9fafb;
    }
    
    .text-gray-600 {
      color: #9ca3af;
    }
    
    .text-gray-500 {
      color: #6b7280;
    }
  }
}

// 动画效果
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 卡片进入动画
.post-page .vehicle-list > .space-y-4 > view {
  animation: fadeInUp 0.6s ease-out;
}

.post-page .grid > view {
  animation: fadeInUp 0.6s ease-out;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 8rpx;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4rpx;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4rpx;
  
  &:hover {
    background: #a8a8a8;
  }
}