diff --git a/src/pages/category/category.vue b/src/pages/category/category.vue
index 77ecb35..b68a208 100644
--- a/src/pages/category/category.vue
+++ b/src/pages/category/category.vue
@@ -67,7 +67,10 @@ function toCommodity(){
             @tap="toCommodity(i)"
             img="https://www.httpbin.org/image/png"
             title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99"/>
-      <Item v-for="i in 20" :key="i" img="https://www.httpbin.org/image/jpeg" title="测试商品" price="9999.99"
+
+      <Item v-for="i in 20" :key="i"
+            img="https://www.httpbin.org/image/jpeg"
+            title="测试商品" price="9999.99"
             oldPrice="8888.88"/>
     </scroll-view>
   </SideBarView>
diff --git a/src/pages/commodity/commodity.vue b/src/pages/commodity/commodity.vue
index 4cb7e73..dd556af 100644
--- a/src/pages/commodity/commodity.vue
+++ b/src/pages/commodity/commodity.vue
@@ -1,5 +1,13 @@
 <template>
   <view class="w-full h-full">
+    <view class="-z-20 absolute top-0 left-0 w-full h-full">
+      <image src="https://cn.bing.com/th?id=OHR.TajMahalReflection_ZH-CN7498774173_1024x768.jpg" class="w-full h-32"></image>
+    </view>
+
+    <view class="pt-12 bg-black bg-opacity-10">
+      <ShopTitle />
+    </view>
+
     <view class="text-center">
       商品页
     </view>
@@ -8,6 +16,8 @@
 
 <script setup lang="ts">
 import {onLoad} from "@dcloudio/uni-app";
+import ShopTitle from "./components/shop-title.vue";
+
 
 onLoad((query)=>{
   console.log(query)
diff --git a/src/pages/commodity/components/shop-title.vue b/src/pages/commodity/components/shop-title.vue
new file mode 100644
index 0000000..508359c
--- /dev/null
+++ b/src/pages/commodity/components/shop-title.vue
@@ -0,0 +1,40 @@
+<script setup>
+
+</script>
+
+<template>
+  <view>
+    <view class="bg-[#FAFAFA] w-[90%] h-32 mx-auto p-5 rounded-lg">
+      <view class="flex mb-1">
+        <view class="flex-grow-0 min-w-12 max-w-12 h-12">
+          <image src="https://www.httpbin.org/image/png" mode="widthFix" class="w-full h-full"/>
+        </view>
+
+        <view class="min-w-0 flex-grow overflow-hidden overflow-ellipsis whitespace-nowrap px-1">
+          <view class="overflow-hidden overflow-ellipsis whitespace-nowrap">
+            <text class="text-lg font-bold">Shop NameShop NameShop NameShop NameShop NameShop Name</text>
+          </view>
+
+          <view class="text-gray-500 text-xs overflow-hidden overflow-ellipsis whitespace-nowrap">
+            <text>Shop AddressShop AddressShop AddressShop AddressShop AddressShop Address</text>
+          </view>
+        </view>
+      </view>
+
+      <view>
+        <view class="text-gray-500 text-xs overflow-hidden overflow-ellipsis whitespace-nowrap">
+          <text>Shop AddressShop AddressShop AddressShop AddressShop AddressShop Address</text>
+        </view>
+
+        <view class="mt-2">
+          <uni-tag class="m-1" type="error" size="mini" inverted text="100减10"/>
+          <uni-tag class="m-1" type="error" size="mini" inverted text="50减2"/>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+
+</style>