优化cate-tab示例

ijry · Dec 16, 2024 · 8f88c15 · 8f88c15
1 parent 2edc5d4
commit 8f88c15
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/pages/componentsD/cateTab/cateTab.vue b/src/pages/componentsD/cateTab/cateTab.vue
@@ -3,32 +3,38 @@
     height: calc(100vh - 150px);
     /* #ifdef H5 */
     height: calc(100vh - 150px - var(--window-top));
-    /* #endif */
+    /* #endif */
+	.text-red {
+		color: red;
+	}
 }
 </style>
 <template>
     <view class="u-page">
-        <view style="height: 138px;background: #f1f1f1;"></view>
+        <view style="height: 138px;background: #f1f1f1;margin-bottom: 10px;"></view>
 		<up-cate-tab class="cate-tab" :tabList="tabList" tabKeyName="title" itemKeyName="title">
             <template #pageItem="{pageItem}">
-                <view class="w-full">
+                <view class="w-full" style="width: 100%;">
                     <up-cell-group :border='false'>
                         <up-cell :border='false'>
                             <template #icon>
-                                <up-image :src="pageItem.cover" width="100px" height="100px"></up-image>
+                                <up-image :src="pageItem.cover" width="80px" height="60px"></up-image>
                             </template>
                             <template v-slot:title>
                                 <view>
                                     {{ pageItem.title }}
                                 </view>
                             </template>
                             <template v-slot:label>
-                                <view class="h-100 pt-1">
+                                <view class="h-100 pt-1 up-flex up-flex-end" style="margin-bottom: 10px;">
                                     <text class="text-md text-red">￥{{ pageItem.price }}</text>
-                                </view>
+                                </view>
+								<view class="up-flex up-flex-end">
+									<up-number-box buttonSize="22px"></up-number-box>
+								</view>
                             </template>
                             <template v-slot:value>
-                                <up-number-box></up-number-box>
+
                             </template>
                         </up-cell>
                     </up-cell-group>

diff --git a/src/pages/example/components.config.js b/src/pages/example/components.config.js
@@ -319,6 +319,11 @@ export default [{
 		icon: 'box',
 		title: 'Box 盒子',
 		title_en: 'Box'
+    }, {
+		path: '/pages/componentsD/cateTab/cateTab',
+		icon: 'box',
+		title: 'CateTab 垂直TAB',
+		title_en: 'CateTab'
     }
     ]
 },