暂时好像没有问题的/shop前端更改v1（没改完存个档

src/views/Shop.vue

@@ -81,32 +81,15 @@
               {{ product.discount }}折
             </div>
           </div>
-          <div class="product-info">
+          <h4 class="product-name">{{ product.name }}</h4>
-            <h4 class="product-name">{{ product.name }}</h4>
+          <div class="product-price">
-            <p class="product-desc">{{ truncateText(product.description, 50) }}</p>
+            <span class="current-price">
-            <div class="product-price">
+              <el-icon><Coin /></el-icon>
-              <span class="current-price">
+              {{ product.points }}
-                <el-icon><Coin /></el-icon>
+            </span>
-                {{ product.points }}
+            <span v-if="product.originalPoints" class="original-price">
-              </span>
+              {{ product.originalPoints }}
-              <span v-if="product.originalPoints" class="original-price">
+            </span>
-                {{ 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>
           </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;
-}
+  white-space: nowrap;
-
+  overflow: hidden;
-.product-desc {
+  text-overflow: ellipsis;
-  margin: 0 0 8px 0;
-  font-size: 12px;
-  color: #666;
-  line-height: 1.4;
 }
 
 .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;
+    width: calc(50vw - 24px);
-  }
+    max-width: 163px;
-  
-  .product-image {
-    width: 120px;
-    height: 120px;
-    flex-shrink: 0;
-  }
-  
-  .product-info {
-    flex: 1;
   }
 }
 </style>