From 99feae7c590ef054fbfda20b26ba9cadb7519999 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 10:56:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E4=BA=86categories.name=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E6=96=87=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Shop.vue | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/views/Shop.vue b/src/views/Shop.vue
index 5fc0ca0..c837012 100644
--- a/src/views/Shop.vue
+++ b/src/views/Shop.vue
@@ -43,7 +43,7 @@
             @click="selectCategory(category.id)"
           >
             <el-icon>{{ category.icon }}</el-icon>
-            <span>{{ category.name }}</span>
+            <div class="category-name">{{ category.name }}</div>
           </div>
         </div>
       </el-scrollbar>
@@ -212,11 +212,11 @@ const userPoints = ref(0)
 // 分类数据
 const categories = ref([
   { id: 'all', name: '全部', icon: '🛍️' },
-  { id: '数码产品', name: '数码产品', icon: '📱' },
+  { id: '数码产品', name: '电子数码', icon: '📱' },
   { id: '图书文具', name: '图书文具', icon: '📚' },
-  { id: '生活用品', name: '生活用品', icon: '🏠' },
+  { id: '生活用品', name: '日用百货', icon: '🏠' },
   { id: '食品饮料', name: '食品饮料', icon: '🍔' },
-  { id: '服装配饰', name: '服装配饰', icon: '👕' },
+  { id: '服装配饰', name: '精美服饰', icon: '👕' },
   { id: '其他', name: '其他', icon: '📦' }
 ])
 
@@ -507,7 +507,8 @@ onMounted(() => {
 .category-item {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: center; /* 使子元素水平居中 */
+  justify-content: center; /* 使子元素垂直居中 */
   gap: 4px;
   padding: 8px 12px;
   border-radius: 8px;
@@ -520,6 +521,18 @@ onMounted(() => {
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
 
+.category-name {
+  font-size: 12px;
+  /* 移除以下三个属性，取消文本省略效果 */
+  /* white-space: nowrap; */
+  /* overflow: hidden; */
+  /* text-overflow: ellipsis; */
+  max-width: 100%;
+  text-align: center;
+  width: 100%;
+  display: block;
+}
+
 .category-item:hover {
   background: rgba(240,249,255,0.9);
 }