style: standardize tailwind classes and cleanup legacy styles

Replace `flex-shrink-0` with `shrink-0` across components for consistency
Migrate legacy color utility classes to inline hex Tailwind classes
Replace background color utility classes with inline hex equivalents
Delete unused SCSS style files for ScenicImageCard and RoutePlanCard
Refactor RoutePlanCard to use inline Tailwind styles instead of external CSS
Update icon component usage in RoutePlanCard to match project standards
This commit is contained in:
DEV_DSW
2026-05-29 14:32:05 +08:00
parent f0a149d8a6
commit 79770b03d4
14 changed files with 74 additions and 341 deletions

View File

@@ -2,7 +2,7 @@
<div class="poi-compare-card w-full">
<div v-if="!isDetail" class="poi-compare-card__overdiv bg-white rounded-[24px] overflow-hidden">
<div class="poi-compare-card__head flex items-center">
<div class="poi-compare-card__mark flex items-center justify-center rounded-full flex-shrink-0">
<div class="poi-compare-card__mark flex items-center justify-center rounded-full shrink-0">
{{ data.icon }}
</div>
<div class="poi-compare-card__title text-[#1e293b] text-[18px] font-bold truncate flex-1">
@@ -15,7 +15,7 @@
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<img class="poi-compare-card__image block w-full" :src="item.image" mode="aspectFill" />
<div v-for="field in item.fields" :key="field.label" class="poi-compare-card__field">
<div class="poi-compare-card__field-label color-94A3B8 text-[12px] font-800">
<div class="poi-compare-card__field-label text-[#94A3B8] text-[12px] font-800">
{{ field.label }}
</div>
<div v-if="field.tone" class="poi-compare-card__chip text-[12px] font-bold"
@@ -37,14 +37,13 @@
<div v-else class="poi-compare-card__detail-card bg-white rounded-[24px] overflow-hidden">
<div class="poi-compare-card__detail-head flex items-center">
<div class="poi-compare-card__back flex items-center justify-center rounded-full flex-shrink-0"
@click="closeDetail">
<div class="poi-compare-card__back flex items-center justify-center rounded-full shrink-0" @click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="poi-compare-card__detail-title text-[#1e293b] font-size-20 font-bold flex-1">
{{ detail.title }}
</div>
<div class="poi-compare-card__compare-label color-94A3B8 text-[12px] font-bold">
<div class="poi-compare-card__compare-label text-[#94A3B8] text-[12px] font-bold">
{{ detail.compareLabel }}
</div>
</div>
@@ -58,7 +57,7 @@
</div>
</div>
<div v-for="row in detail.rows" :key="row.label" class="poi-compare-card__table-row poi-compare-card__data-row">
<div class="poi-compare-card__row-label color-94A3B8 text-[12px] font-bold">
<div class="poi-compare-card__row-label text-[#94A3B8] text-[12px] font-bold">
{{ row.label }}
</div>
<div v-for="cell in row.values" :key="row.label + '-' + cell.text"
@@ -69,12 +68,12 @@
</div>
<div class="poi-compare-card__recommend">
<div class="poi-compare-card__recommend-title color-94A3B8 text-[12px] font-bold">
<div class="poi-compare-card__recommend-title text-[#94A3B8] text-[12px] font-bold">
{{ detail.recommendTitle }}
</div>
<div class="poi-compare-card__tips">
<div v-for="tip in detail.tips" :key="tip.text" class="poi-compare-card__tip flex gap-10">
<div class="poi-compare-card__dot rounded-full flex-shrink-0" :class="getDotClass(tip.tone)" />
<div class="poi-compare-card__dot rounded-full shrink-0" :class="getDotClass(tip.tone)" />
<div class="poi-compare-card__tip-text text-[#334155] text-[14px] font-bold">
{{ tip.text }}
</div>
@@ -117,8 +116,8 @@ const detail = computed(() => props.data.detail || {});
const getToneClass = (tone) => {
const toneMap = {
green: "poi-compare-card__chip--green color-047857 bg-ECFDF5",
amber: "poi-compare-card__chip--amber color-D97706 bg-FFFBEB",
green: "poi-compare-card__chip--green text-[#047857] bg-[#ecfdf5]",
amber: "poi-compare-card__chip--amber text-[#D97706] bg-[#FFFBEB]",
};
return toneMap[tone] || "";
};