改了categories.name部分文本

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);
 }