修复了点击推荐商品不跳转的bug，修改了部分样式

src/views/ProductDetail.vue

@@ -42,6 +42,9 @@
               <img :src="image" :alt="product.name" class="product-image" />
             </el-carousel-item>
           </el-carousel>
+          <div v-for="(image, index) in product.images" :key="index" class="small-images">
+            <img :src="image" :alt="product.name" class="small-image" />
+          </div>
         </div>
 
         <!-- 商品信息 -->
@@ -236,6 +239,8 @@ import {
 } from '@element-plus/icons-vue'
 import api from '@/utils/api'
 
+import { watch } from 'vue'
+
 const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
@@ -320,7 +325,7 @@ const buyNow = async () => {
 }
 
 const goToProduct = (productId) => {
-  router.push(`/product/${productId}`)
+  router.replace(`/product/${productId}`)
 }
 
 const previewImage = (image) => {
@@ -342,15 +347,26 @@ const getUserPoints = async () => {
 
 // 生命周期
 onMounted(() => {
-  getProductDetail()
+  //getProductDetail()
   getUserPoints()
 })
+
+watch(
+  () => route.params.id,
+  (newId) => {
+    if (newId) {
+      getProductDetail()
+      quantity.value = 1 // 重置数量
+    }
+  },
+  { immediate: true }
+)
 </script>
 
 <style scoped>
 .product-detail-page {
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background: linear-gradient(to bottom, #ffae00, #f3f3f3);
 }
 
 .navbar {
@@ -394,12 +410,12 @@ onMounted(() => {
 }
 
 .product-detail {
-  background: white;
+  background: transparent;
 }
 
 .product-images {
   padding: 20px;
-  background: white;
+  background: transparent;
 }
 
 .product-image {
@@ -409,10 +425,29 @@ onMounted(() => {
   border-radius: 8px;
 }
 
+/* 小图容器样式 */
+.small-images {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+
+/* 小图样式 */
+.small-image {
+  width: 64px;
+  height: 64px;
+  object-fit: cover;
+  border-radius: 6px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
 .product-info {
   padding: 20px;
-  background: white;
-  border-bottom: 8px solid #f5f5f5;
+  background: transparent;
 }
 
 .product-header {
@@ -522,7 +557,6 @@ onMounted(() => {
 .detail-item {
   display: flex;
   padding: 8px 0;
-  border-bottom: 1px solid #f5f5f5;
 }
 
 .detail-label {
@@ -556,8 +590,7 @@ onMounted(() => {
   display: flex;
   gap: 12px;
   padding: 20px;
-  background: white;
-  border-top: 1px solid #eee;
+  background: transparent;
   position: sticky;
   bottom: 0;
 }
@@ -568,8 +601,7 @@ onMounted(() => {
 
 .product-reviews {
   padding: 20px;
-  background: white;
-  border-bottom: 8px solid #f5f5f5;
+  background: transparent;
 }
 
 .reviews-header {
@@ -661,7 +693,7 @@ onMounted(() => {
 
 .recommended-products {
   padding: 20px;
-  background: white;
+  background: transparent;
 }
 
 .recommended-products h3 {