duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update flex alignment classes and clean up UI styles

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/home/components/PoiCompareCard/index.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="poi-compare-card w-full">
<div v-if="!isDetail" class="poi-compare-card__overdiv bg-white rounded-24 overflow-hidden">
<div class="poi-compare-card__head flex flex-items-center">
<div class="poi-compare-card__mark flex flex-items-center flex-justify-center rounded-full flex-shrink-0">
<div class="poi-compare-card__head flex items-center">
<div class="poi-compare-card__mark flex items-center flex-justify-center rounded-full flex-shrink-0">
{{ data.icon }}
</div>
<div class="poi-compare-card__title color-1E293B text-[18px] font-900 truncate flex-1">
<div class="poi-compare-card__title text-[#1e293b] text-[18px] font-bold truncate flex-1">
{{ data.title }}
</div>
</div>
@@ -18,11 +18,11 @@
<div class="poi-compare-card__field-label color-94A3B8 text-[12px] font-800">
{{ field.label }}
</div>
<div v-if="field.tone" class="poi-compare-card__chip text-[12px] font-900"
<div v-if="field.tone" class="poi-compare-card__chip text-[12px] font-bold"
:class="getToneClass(field.tone)">
{{ field.value }}
</div>
<div v-else class="poi-compare-card__field-value color-1E293B text-[14px] font-900">
<div v-else class="poi-compare-card__field-value text-[#1e293b] text-[14px] font-bold">
{{ field.value }}
</div>
</div>
@@ -30,22 +30,22 @@
</div>
<div
class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A text-white text-[15px] font-900"
class="poi-compare-card__primary flex items-center flex-justify-center bg-0F172A text-white text-[15px] font-bold"
:class="{ 'is-disabled': disabled }" @click="openDetail">
{{ data.detailButtonText }}
</div>
</div>
<div v-else class="poi-compare-card__detail-card bg-white rounded-24 overflow-hidden">
<div class="poi-compare-card__detail-head flex flex-items-center">
<div class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
<div class="poi-compare-card__detail-head flex items-center">
<div class="poi-compare-card__back flex items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-1">
<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-900">
<div class="poi-compare-card__compare-label color-94A3B8 text-[12px] font-bold">
{{ detail.compareLabel }}
</div>
</div>
@@ -54,29 +54,29 @@
<div class="poi-compare-card__table-head poi-compare-card__table-row">
<div></div>
<div v-for="item in items" :key="item.id || item.name"
class="poi-compare-card__table-title color-1E293B text-[14px] font-900">
class="poi-compare-card__table-title text-[#1e293b] text-[14px] font-bold">
{{ item.name }}
</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-900">
<div class="poi-compare-card__row-label color-94A3B8 text-[12px] font-bold">
{{ row.label }}
</div>
<div v-for="cell in row.values" :key="row.label + '-' + cell.text"
class="poi-compare-card__cell color-1E293B text-[14px] font-900" :class="getCellClass(cell.tone)">
class="poi-compare-card__cell text-[#1e293b] text-[14px] font-bold" :class="getCellClass(cell.tone)">
{{ cell.text }}
</div>
</div>
</div>
<div class="poi-compare-card__recommend">
<div class="poi-compare-card__recommend-title color-94A3B8 text-[12px] font-900">
<div class="poi-compare-card__recommend-title color-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__tip-text color-334155 text-[14px] font-900">
<div class="poi-compare-card__tip-text text-[#334155] text-[14px] font-bold">
{{ tip.text }}
</div>
</div>
@@ -85,8 +85,8 @@
<div class="poi-compare-card__actions grid grid-cols-2 gap-14">
<div v-for="action in detail.actions" :key="action.id || action.text"
class="poi-compare-card__action flex flex-items-center flex-justify-center text-[15px] font-900"
:class="[action.primary ? 'poi-compare-card__action--primary bg-0F172A text-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
class="poi-compare-card__action flex items-center flex-justify-center text-[15px] font-bold"
:class="[action.primary ? 'poi-compare-card__action--primary bg-0F172A text-white' : 'poi-compare-card__action--secondary text-[#334155]', { 'is-disabled': disabled }]"
@click="handleAction(action)">
<span class="poi-compare-card__action-icon">{{ action.icon }}</span>
<span>{{ action.text }}</span>