style: update flex alignment classes and clean up UI styles

Replace all deprecated `flex-items-center` utility classes with standard `items-center` across components. Additionally, update font weight classes from `font-900` to `font-bold`, standardize hex color class syntax to use bracket notation, and remove unused SCSS styles from the SharedVisual component.
This commit is contained in:
DEV_DSW
2026-05-29 10:21:21 +08:00
parent 6e227ff441
commit 653cdd5139
40 changed files with 163 additions and 186 deletions

View File

@@ -3,32 +3,32 @@
<img class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" />
<div class="facility-location-card__body px-24 pb-24">
<div class="facility-location-card__title-row flex flex-items-center">
<div class="facility-location-card__badge color-2563EB bg-EFF6FF text-[12px] font-900">
<div class="facility-location-card__title-row flex items-center">
<div class="facility-location-card__badge color-2563EB bg-EFF6FF text-[12px] font-bold">
{{ type.text }}
</div>
<div class="facility-location-card__title color-1E293B text-[18px] font-900 truncate">
<div class="facility-location-card__title text-[#1e293b] text-[18px] font-bold truncate">
{{ data.title }}
</div>
</div>
<div class="facility-location-card__distance flex flex-items-center color-94A3B8 text-[14px] font-900">
<div class="facility-location-card__distance flex items-center color-94A3B8 text-[14px] font-bold">
<span class="facility-location-card__distance-icon">{{ distance.icon }}</span>
<span>{{ distance.text }}</span>
</div>
<div class="facility-location-card__location bg-F8FAFC rounded-20">
<div class="facility-location-card__location-label flex flex-items-center color-64748B text-[13px] font-900">
<div class="facility-location-card__location bg-[#f8fafc] rounded-20">
<div class="facility-location-card__location-label flex items-center color-64748B text-[13px] font-bold">
<span class="facility-location-card__location-dot">{{ location.icon }}</span>
<span>{{ location.label }}</span>
</div>
<div class="facility-location-card__location-text color-1E293B text-[16px] font-900">
<div class="facility-location-card__location-text text-[#1e293b] text-[16px] font-bold">
{{ location.text }}
</div>
</div>
<div
class="facility-location-card__button flex flex-items-center flex-justify-center bg-0F172A text-white text-[18px] font-900"
class="facility-location-card__button flex items-center flex-justify-center bg-0F172A text-white text-[18px] font-bold"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<span class="facility-location-card__button-icon">{{ action.icon }}</span>
<span>{{ action.text }}</span>