style(home components): convert rounded-24 to rounded-[24px] across card components

Update all home page card components to use Tailwind's arbitrary radius syntax. Also adjust SharedVisual/CardShell.vue to add a subtle box shadow, fix border class formatting, and include transition and opacity styles for pressable and disabled states.
This commit is contained in:
DEV_DSW
2026-05-29 10:28:47 +08:00
parent 653cdd5139
commit 971b4d9cfa
11 changed files with 20 additions and 18 deletions

View File

@@ -1,7 +1,7 @@
<template>
<div class="long-text-guide-card w-full">
<div v-if="mode === 'list'" class="long-text-guide-card__list w-full">
<div v-for="item in cards" :key="item.id" class="long-text-guide-card__summary-card bg-white rounded-24 "
<div v-for="item in cards" :key="item.id" class="long-text-guide-card__summary-card bg-white rounded-[24px] "
:class="{ 'is-disabled': disabled }" @click="openDetail(item)">
<div class="long-text-guide-card__badge text-[12px] font-bold" :class="`is-${item.badgeTone}`">
{{ item.badge }}
@@ -19,7 +19,7 @@
</div>
</div>
<div v-else class="long-text-guide-card__detail-card bg-white rounded-24 overflow-hidden">
<div v-else class="long-text-guide-card__detail-card bg-white rounded-[24px] overflow-hidden">
<div class="long-text-guide-card__detail-header flex items-center border-bottom-F1F5F9">
<div class="long-text-guide-card__back flex items-center flex-justify-center rounded-full font-700"
@click="closeDetail">