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)"
>
{{ category.icon }}
- {{ category.name }}
+
{{ category.name }}
@@ -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);
}