zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: convert legacy color classes to tailwind syntax

Browse Source 
Replace all custom `bg-*` utility classes across Vue components with Tailwind's arbitrary hex color notation (e.g. `bg-[#f7f7f7]`). Remove redundant hardcoded background color definitions from src/static/scss/background.scss, clean up template formatting, and update gradient button styles to use direct hex values.
This commit is contained in:
duanshuwen
2026-07-24 15:56:35 +08:00
parent d3d15b1a19
commit aa0203819c
27 changed files with 225 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/pages/ChatModule/PoiCompareCard/index.vue
View File

@@ -11,31 +11,15 @@
</view>
<view class="poi-compare-card__columns grid grid-cols-2 gap-16">
<view
v-for="item in items"
:key="item.id || item.name"
class="poi-compare-card__place"
:class="{ 'is-disabled': disabled }"
@click="handleSelect(item)"
>
<image
class="poi-compare-card__image block w-full"
:src="item.image"
mode="aspectFill"
/>
<view
v-for="field in item.fields"
:key="field.label"
class="poi-compare-card__field"
>
<view v-for="item in items" :key="item.id || item.name" class="poi-compare-card__place"
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<image class="poi-compare-card__image block w-full" :src="item.image" mode="aspectFill" />
<view v-for="field in item.fields" :key="field.label" class="poi-compare-card__field">
<view class="poi-compare-card__field-label color-94A3B8 font-size-12 font-800">
{{ field.label }}
</view>
<view
v-if="field.tone"
class="poi-compare-card__chip font-size-12 font-900"
:class="getToneClass(field.tone)"
>
<view v-if="field.tone" class="poi-compare-card__chip font-size-12 font-900"
:class="getToneClass(field.tone)">
{{ field.value }}
</view>
<view v-else class="poi-compare-card__field-value color-1E293B font-size-14 font-900">
@@ -46,20 +30,16 @@
</view>
<view
class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A color-white font-size-15 font-900"
:class="{ 'is-disabled': disabled }"
@click="openDetail"
>
class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-[#0f172a] color-white font-size-15 font-900"
:class="{ 'is-disabled': disabled }" @click="openDetail">
{{ data.detailButtonText }}
</view>
</view>
<view v-else class="poi-compare-card__detail-card bg-white rounded-24 overflow-hidden">
<view class="poi-compare-card__detail-head flex flex-items-center">
<view
class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail"
>
<view class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
@@ -73,28 +53,18 @@
<view class="poi-compare-card__table">
<view class="poi-compare-card__table-head poi-compare-card__table-row">
<view></view>
<view
v-for="item in items"
:key="item.id || item.name"
class="poi-compare-card__table-title color-1E293B font-size-14 font-900"
>
<view v-for="item in items" :key="item.id || item.name"
class="poi-compare-card__table-title color-1E293B font-size-14 font-900">
{{ item.name }}
</view>
</view>
<view
v-for="row in detail.rows"
:key="row.label"
class="poi-compare-card__table-row poi-compare-card__data-row"
>
<view v-for="row in detail.rows" :key="row.label"
class="poi-compare-card__table-row poi-compare-card__data-row">
<view class="poi-compare-card__row-label color-94A3B8 font-size-12 font-900">
{{ row.label }}
</view>
<view
v-for="cell in row.values"
:key="row.label + '-' + cell.text"
class="poi-compare-card__cell color-1E293B font-size-14 font-900"
:class="getCellClass(cell.tone)"
>
<view v-for="cell in row.values" :key="row.label + '-' + cell.text"
class="poi-compare-card__cell color-1E293B font-size-14 font-900" :class="getCellClass(cell.tone)">
{{ cell.text }}
</view>
</view>
@@ -105,11 +75,7 @@
{{ detail.recommendTitle }}
</view>
<view class="poi-compare-card__tips">
<view
v-for="tip in detail.tips"
:key="tip.text"
class="poi-compare-card__tip flex gap-10"
>
<view v-for="tip in detail.tips" :key="tip.text" class="poi-compare-card__tip flex gap-10">
<view class="poi-compare-card__dot rounded-full flex-shrink-0" :class="getDotClass(tip.tone)" />
<view class="poi-compare-card__tip-text color-334155 font-size-14 font-900">
{{ tip.text }}
@@ -119,13 +85,10 @@
</view>
<view class="poi-compare-card__actions grid grid-cols-2 gap-14">
<view
v-for="action in detail.actions"
:key="action.id || action.text"
<view v-for="action in detail.actions" :key="action.id || action.text"
class="poi-compare-card__action flex flex-items-center flex-justify-center font-size-15 font-900"
:class="[action.primary ? 'poi-compare-card__action--primary bg-0F172A color-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
@click="handleAction(action)"
>
:class="[action.primary ? 'poi-compare-card__action--primary bg-[#0f172a] color-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
@click="handleAction(action)">
<text class="poi-compare-card__action-icon">{{ action.icon }}</text>
<text>{{ action.text }}</text>
</view>
@@ -156,8 +119,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 color-047857 bg-[#ecfdf5]",
amber: "poi-compare-card__chip--amber color-D97706 bg-[#fffbeb]",
};
return toneMap[tone] || "";
};