diff --git a/src/pages/category/components/item.vue b/src/components/tab-view/components/item.vue
similarity index 55%
rename from src/pages/category/components/item.vue
rename to src/components/tab-view/components/item.vue
index ed8245b..273b247 100644
--- a/src/pages/category/components/item.vue
+++ b/src/components/tab-view/components/item.vue
@@ -27,12 +27,22 @@ const props = defineProps({
       <view class="min-w-0 overflow-hidden overflow-ellipsis whitespace-nowrap">
         <text class="text-base">{{ props.title }}</text>
       </view>
-      <view>
-        <text class="text-orange-500 text-base">{{ props.price }}</text>
+      <view class="flex justify-between align-middle items-center">
+        <view>
+          <text class="text-orange-500 text-base">{{ props.price }}</text>
 
-        <text v-show="props.oldPrice != null" class="ml-1 text-xs text-gray-500 line-through">
-          {{ props.oldPrice }}
-        </text>
+          <text v-show="props.oldPrice != null" class="ml-1 text-xs text-gray-500 line-through">
+            {{ props.oldPrice }}
+          </text>
+        </view>
+
+        <view class="text-right">
+          <slot name="button">
+            <view class="rounded-[50%] bg-yellow-400 w-5 h-5 leading-5 text-center font-bold">
+              <uni-icons type="plusempty" size="16"></uni-icons>
+            </view>
+          </slot>
+        </view>
       </view>
     </view>
   </view>
diff --git a/src/components/tab-view/index.vue b/src/components/tab-view/index.vue
index d12168a..213d25e 100644
--- a/src/components/tab-view/index.vue
+++ b/src/components/tab-view/index.vue
@@ -2,7 +2,7 @@
 import {reactive} from "vue";
 import {onLoad} from "@dcloudio/uni-app";
 import SidebarView from "@/components/sidebar-view/index.vue"
-import Item from "@/pages/category/components/item";
+import Item from "@/components/tab-view/components/item";
 const props = defineProps({
   tabs: {
     type: Array,
@@ -67,7 +67,6 @@ onLoad(() => {
 
               <scroll-view scroll-y class="flex-grow min-h-0 text-left">
                 <Item v-for="i in 10" :key="i"
-                      @tap="toCommodity(i)"
                       img="https://www.httpbin.org/image/png"
                       title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99"/>
 
diff --git a/src/pages/category/category.vue b/src/pages/category/category.vue
index f0f5e73..386d240 100644
--- a/src/pages/category/category.vue
+++ b/src/pages/category/category.vue
@@ -2,7 +2,7 @@
 import {reactive} from "vue";
 import qs from "qs";
 import SideBarView from "@/components/sidebar-view/index.vue";
-import Item from "./components/item.vue";
+import Item from "../../components/tab-view/components/item.vue";
 
 const ctx = reactive({
   current: 0,
@@ -65,12 +65,29 @@ function toCommodity() {
 
     <template #default="{data}">
       <scroll-view scroll-y class="flex-grow min-h-0 text-left">
-        <Item v-for="i in 10" :key="i"
+        <Item v-for="i in 2" :key="i"
               @tap="toCommodity(i)"
               img="https://www.httpbin.org/image/png"
-              title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99"/>
+              title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99">
+          <template #button>
+            <view class="bg-yellow-400 text-center px-1 py-0.5 rounded text-sm">
+              选规格
+            </view>
+          </template>
+        </Item>
 
-        <Item v-for="i in 20" :key="i"
+        <Item v-for="i in 2" :key="i"
+              @tap="toCommodity(i)"
+              img="https://www.httpbin.org/image/png"
+              title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99">
+          <template #button>
+            <view class="text-center px-1 py-0.5 text-gray-400 text-xs">
+              50分钟
+            </view>
+          </template>
+        </Item>
+
+        <Item v-for="i in 10" :key="i"
               img="https://www.httpbin.org/image/jpeg"
               title="测试商品" price="9999.99"
               oldPrice="8888.88"/>