瀏覽代碼

💄 style(goods-list): 优化商品列表UI样式

- 将分类筛选按钮从Button组件改为View组件,统一视觉风格
- 调整非激活分类项默认背景为浅灰色,增强层次感
- 增大加入购物车按钮尺寸,从mini改为sm,提升点击体验
yourname 3 月之前
父節點
當前提交
af9dd97958
共有 1 個文件被更改,包括 5 次插入7 次删除
  1. 5 7
      mini/src/pages/goods-list/index.tsx

+ 5 - 7
mini/src/pages/goods-list/index.tsx

@@ -151,14 +151,12 @@ export default function GoodsListPage() {
           {/* 分类筛选 */}
           <View className="flex space-x-2 mb-4 overflow-x-auto">
             {categories.map((category) => (
-              <Button
+              <View
                 key={category.id}
-                size="sm"
-                variant={activeCategory === category.id ? "solid" : "ghost"}
-                className={`whitespace-nowrap rounded-full px-4 py-2 transition-all ${
+                className={`whitespace-nowrap rounded-full px-4 py-2 transition-all cursor-pointer ${
                   activeCategory === category.id
                     ? 'bg-blue-500 text-white shadow-md'
-                    : 'text-gray-600 hover:bg-gray-100'
+                    : 'text-gray-600 bg-gray-100 hover:bg-gray-200'
                 }`}
                 onClick={() => {
                   setActiveCategory(category.id)
@@ -166,7 +164,7 @@ export default function GoodsListPage() {
                 }}
               >
                 {category.name}
-              </Button>
+              </View>
             ))}
           </View>
 
@@ -238,7 +236,7 @@ export default function GoodsListPage() {
                         </View>
                         
                         <Button
-                          size="mini"
+                          size="sm"
                           className={`!w-8 !h-8 !p-0 rounded-full transition-all ${
                             goods.stock > 0
                               ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-md active:shadow-lg'