From af0ff9600e838038e96c97a17741211b437647b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=A7=E8=84=8F=E7=8B=BC?= <786316265@qq.com>
Date: Tue, 12 Aug 2025 09:38:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E6=97=B6=E5=A5=BD=E5=83=8F=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E9=97=AE=E9=A2=98=E7=9A=84/shop=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E6=9B=B4=E6=94=B9v1=EF=BC=88=E6=B2=A1=E6=94=B9=E5=AE=8C?=
 =?UTF-8?q?=E5=AD=98=E4=B8=AA=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Shop.vue | 95 +++++++++++++---------------------------------
 1 file changed, 26 insertions(+), 69 deletions(-)

diff --git a/src/views/Shop.vue b/src/views/Shop.vue
index 6293e32..bdbdf01 100644
--- a/src/views/Shop.vue
+++ b/src/views/Shop.vue
@@ -81,32 +81,15 @@
               {{ product.discount }}折
             </div>
           </div>
-          <div class="product-info">
-            <h4 class="product-name">{{ product.name }}</h4>
-            <p class="product-desc">{{ truncateText(product.description, 50) }}</p>
-            <div class="product-price">
-              <span class="current-price">
-                <el-icon><Coin /></el-icon>
-                {{ product.points }}
-              </span>
-              <span v-if="product.originalPoints" class="original-price">
-                {{ product.originalPoints }}
-              </span>
-            </div>
-            <div class="product-stats">
-              <span class="sales">已售 {{ product.sales }}</span>
-              <span class="stock">库存 {{ product.stock }}</span>
-            </div>
-          </div>
-          <div class="product-actions">
-            <el-button 
-              type="primary" 
-              size="small"
-              @click.stop="addToCart(product)"
-              :disabled="product.stock === 0"
-            >
-              {{ product.stock === 0 ? '缺货' : '兑换' }}
-            </el-button>
+          <h4 class="product-name">{{ product.name }}</h4>
+          <div class="product-price">
+            <span class="current-price">
+              <el-icon><Coin /></el-icon>
+              {{ product.points }}
+            </span>
+            <span v-if="product.originalPoints" class="original-price">
+              {{ product.originalPoints }}
+            </span>
           </div>
         </div>
       </div>
@@ -567,12 +550,16 @@ onMounted(() => {
 }
 
 .product-card {
+  width: 163px;
+  height: 217px;
   background: white;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: all 0.3s;
+  display: flex;
+  flex-direction: column;
 }
 
 .product-card:hover {
@@ -583,8 +570,9 @@ onMounted(() => {
 .product-image {
   position: relative;
   width: 100%;
-  height: 120px;
+  height: 163px;
   overflow: hidden;
+  flex-shrink: 0;
 }
 
 .product-image img {
@@ -604,30 +592,23 @@ onMounted(() => {
   font-size: 12px;
 }
 
-.product-info {
-  padding: 12px;
-}
-
 .product-name {
-  margin: 0 0 4px 0;
+  margin: 8px 8px 4px;
   font-size: 14px;
   font-weight: 500;
   color: #333;
   line-height: 1.4;
-}
-
-.product-desc {
-  margin: 0 0 8px 0;
-  font-size: 12px;
-  color: #666;
-  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .product-price {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: 8px;
+  margin: 0 8px;
+  padding-bottom: 8px;
 }
 
 .current-price {
@@ -636,7 +617,7 @@ onMounted(() => {
   gap: 2px;
   color: #ff6b35;
   font-weight: 600;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .original-price {
@@ -645,22 +626,6 @@ onMounted(() => {
   text-decoration: line-through;
 }
 
-.product-stats {
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  color: #999;
-  margin-bottom: 8px;
-}
-
-.product-actions {
-  padding: 0 12px 12px;
-}
-
-.product-actions .el-button {
-  width: 100%;
-}
-
 .empty-state {
   text-align: center;
   padding: 60px 20px;
@@ -764,21 +729,13 @@ onMounted(() => {
 /* 响应式设计 */
 @media (max-width: 480px) {
   .products-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
+    justify-items: center;
   }
   
   .product-card {
-    display: flex;
-  }
-  
-  .product-image {
-    width: 120px;
-    height: 120px;
-    flex-shrink: 0;
-  }
-  
-  .product-info {
-    flex: 1;
+    width: calc(50vw - 24px);
+    max-width: 163px;
   }
 }
 </style>
\ No newline at end of file