zcdsj
/
mat
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(h5): 首页大类卡片改为横向布局，高度收紧到 80px 

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
caoqianming 2026-04-27 09:38:37 +08:00
parent d1201d6923
commit d0af6b1596
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend-h5/src/components/MajorCategoryCard.vue
View File

@ -2,9 +2,12 @@
defineProps({ label: String, value: String, active: Boolean })
</script>
<template>
<div class="aspect-square rounded-card shadow-card flex flex-col items-center justify-center transition active:scale-[0.98] cursor-pointer"
<div class="h-20 px-4 rounded-card shadow-card flex items-center gap-3 transition active:scale-[0.98] cursor-pointer"
:class="active ? 'bg-brand text-white' : 'bg-white text-neutral-800'">
<div class="text-3xl font-semibold">{{ label.slice(0,1) }}</div>
<div class="mt-2 text-sm">{{ label }}</div>
<div class="w-10 h-10 rounded-xl flex items-center justify-center text-xl font-semibold shrink-0"
:class="active ? 'bg-white/15' : 'bg-brand/10 text-brand'">
{{ label.slice(0,1) }}
</div>
<div class="text-base font-medium">{{ label }}</div>
</div>
</template>