diff --git a/src/components/goodsItem/goodsItem.vue b/src/components/goodsItem/goodsItem.vue
new file mode 100644
index 0000000..6f6c590
--- /dev/null
+++ b/src/components/goodsItem/goodsItem.vue
@@ -0,0 +1,50 @@
+<template>
+    <navigator :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`" class="composite_item" >
+    <!-- 商品图片容器 -->
+    <view class="goods_img">
+      <u-image width="200rpx" height="200rpx" :src="item.goods_small_logo" ></u-image>
+    </view>
+    <!-- 商品信息 -->
+    <view class="goods_info">
+      <view class="goods_name u-line-2">{{item.goods_name}}</view>
+      <view class="goods_price">￥{{item.goods_price || 9999}}</view>
+    </view>
+  </navigator>
+</template>
+
+<script>
+export default {
+  props: ["item"]
+}
+</script>
+
+<style lang="scss">
+  .composite_item {
+    display: flex;
+    padding: 10rpx 0;
+    .goods_img {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .goods_info {
+      flex: 2;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .goods_name {
+        font-size: 30rpx;
+        color: #333;
+      }
+
+      .goods_price {
+        font-size: 30rpx;
+        color: #eb4450;
+      }
+    }
+  }
+</style>>
+
+</style>
\ No newline at end of file
diff --git a/src/pages/goods_list/goods_list.vue b/src/pages/goods_list/goods_list.vue
index fe98d67..24c4b4c 100644
--- a/src/pages/goods_list/goods_list.vue
+++ b/src/pages/goods_list/goods_list.vue
@@ -14,17 +14,7 @@
       <view class="composite">
         <block v-for="item in goods" :key="item.goods_id">
           <u-line color="red" />
-          <navigator class="composite_item">
-            <!-- 3.1.1 图片 -->
-            <view class="goods_img">
-              <u-image width="190rpx" height="190rpx" mode="widthFix" :src="item.goods_small_logo"></u-image>
-            </view>
-            <!-- 3.1.2 商品信息-->
-            <view class="goods_info">
-              <view class="goods_name u-line-2">{{item.goods_name}}</view>
-              <view class="goods_price">￥{{item.goods_price||99999}}</view>
-            </view>
-          </navigator>
+          <goodsItem :item="item" />
         </block>
       </view>
     </block>
@@ -131,32 +121,5 @@ export default {
 </script>
 
 <style lang="scss">
-  .composite {
-    .composite_item {
-      display: flex;
-      padding: 10rpx 0;
-      .goods_img {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .goods_info {
-        flex: 2;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        .goods_name {
-          font-size: 30rpx;
-          color: #333;
-        }
-
-        .goods_price {
-          font-size: 30rpx;
-          color: #eb4450;
-        }
-      }
-    }
-  }
+  
 </style>
\ No newline at end of file