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 }}折
-
-
{{ product.name }}
-
{{ truncateText(product.description, 50) }}
-
-
-
- {{ product.points }}
-
-
- {{ product.originalPoints }}
-
-
-
- 已售 {{ product.sales }}
- 库存 {{ product.stock }}
-
-
-
-
- {{ product.stock === 0 ? '缺货' : '兑换' }}
-
+
{{ product.name }}
+
+
+
+ {{ product.points }}
+
+
+ {{ product.originalPoints }}
+
@@ -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;
}
}
\ No newline at end of file