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

style: replace legacy typography classes with modern utilities

Browse Source 
Convert all legacy font-size-*, font-weight-*, and line-height-* CSS utility classes to modern inline utility formats (text-[Xpx], font-{weight}, leading-[Xpx]). Also remove unused GoodsInfo component SCSS file, its associated image asset, and clean up the stale style import in GoodsInfo.vue.
This commit is contained in:
DEV_DSW
2026-05-29 09:48:59 +08:00
parent 7f68ee06b7
commit a131531a81
42 changed files with 100 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/home/components/AnswerComponent/index.vue
View File

@@ -6,7 +6,7 @@
<div v-if="tag" class="long-answer-tag">{{ tag }}</div>
<div v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-4">
<uni-icons class="icon-active" type="fire-filled" size="18" color="opacity" />
<span class="font-size-16 font-500 span-color-900 ml-6"> {{ title }}</span>
<span class="text-[16px] font-medium span-color-900 ml-6"> {{ title }}</span>
</div>
<!-- 文字内容，最多显示3行 -->
<div v-if="processedContent" class="answer-content text-[12px] font-color-600">

2
src/pages/home/components/ChatCardMine/index.vue
View File

@@ -2,7 +2,7 @@
<!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-end） -->
<div class="chat-mine-row">
<div class="chat-mine bg-17294E">
<span class="font-size-15 text-white">{{ text }}</span>
<span class="text-[15px] text-white">{{ text }}</span>
<slot></slot>
</div>
</div>

2
src/pages/home/components/ChatMoreTips/index.vue
View File

@@ -2,7 +2,7 @@
<div class="more-tips bg-white ">
<div class="font-size-0 whitespace-nowrap scroll-x">
<div class="more-tips-item inline-block mr-8" v-for="(item, index) in guideWords" :key="index">
<span :class="['font-500 text-[12px] text-center', `color-${index}`]" @click="sendReply(item)">
<span :class="['font-medium text-[12px] text-center', `color-${index}`]" @click="sendReply(item)">
{{ item }}
</span>
</div>

2
src/pages/home/components/ChatTopWelcome/index.vue
View File

@@ -6,7 +6,7 @@ v
<SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
:displayWidth="spriteStyle.displayWidth" :fps="16" />
<div class="welcome-text text-[14px] font-500 font-family-misans-vf color-171717 line-height-24">
<div class="welcome-text text-[14px] font-medium font-family-misans-vf color-171717 leading-[24px]">
{{ welcomeContent }}
</div>
</div>

8
src/pages/home/components/FacilityLocationCard/index.vue
View File

@@ -7,7 +7,7 @@
<div class="facility-location-card__badge color-2563EB bg-EFF6FF text-[12px] font-900">
{{ type.text }}
</div>
<div class="facility-location-card__title color-1E293B font-size-18 font-900 ellipsis-1">
<div class="facility-location-card__title color-1E293B text-[18px] font-900 ellipsis-1">
{{ data.title }}
</div>
</div>
@@ -18,17 +18,17 @@
</div>
<div class="facility-location-card__location bg-F8FAFC rounded-20">
<div class="facility-location-card__location-label flex flex-items-center color-64748B font-size-13 font-900">
<div class="facility-location-card__location-label flex flex-items-center color-64748B text-[13px] font-900">
<span class="facility-location-card__location-dot">{{ location.icon }}</span>
<span>{{ location.label }}</span>
</div>
<div class="facility-location-card__location-text color-1E293B font-size-16 font-900">
<div class="facility-location-card__location-text color-1E293B text-[16px] font-900">
{{ location.text }}
</div>
</div>
<div
class="facility-location-card__button flex flex-items-center flex-justify-center bg-0F172A text-white font-size-18 font-900"
class="facility-location-card__button flex flex-items-center flex-justify-center bg-0F172A text-white text-[18px] font-900"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<span class="facility-location-card__button-icon">{{ action.icon }}</span>
<span>{{ action.text }}</span>

4
src/pages/home/components/FaqHelpCard/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="faq-help-card bg-white rounded-24 w-full">
<div class="faq-help-card__header flex flex-items-center">
<div class="faq-help-card__icon flex flex-items-center flex-justify-center rounded-full font-size-16 font-900">
<div class="faq-help-card__icon flex flex-items-center flex-justify-center rounded-full text-[16px] font-900">
{{ data.icon }}
</div>
<div class="faq-help-card__title color-1E293B font-size-20 font-900">
@@ -14,7 +14,7 @@
<div class="faq-help-card__list">
<div v-for="item in questions" :key="item.id || item.text" class="faq-help-card__item flex flex-items-center"
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<div class="faq-help-card__question color-475569 font-size-18 font-900 ellipsis-1 flex-full">
<div class="faq-help-card__question color-475569 text-[18px] font-900 ellipsis-1 flex-full">
{{ item.text }}
</div>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>

2
src/pages/home/components/GeneratorPhotoComponent/index.vue
View File

@@ -21,7 +21,7 @@
<div class="w-full px-12 pb-8 flex flex-row" @click="jumpClick">
<div class="btn-bg w-full p-4 rounded-24 flex flex-row">
<div
class="btn-bg-sub w-full p-16 rounded-20 flex flex-row flex-items-center flex-justify-center text-white text-center font-size-18 font-800">
class="btn-bg-sub w-full p-16 rounded-20 flex flex-row flex-items-center flex-justify-center text-white text-center text-[18px] font-800">
{{ props.toolCall.componentNameParams.buttonName }}
</div>
</div>

20
src/pages/home/components/LongTextGuideCard/index.vue
View File

@@ -6,10 +6,10 @@
<div class="long-text-guide-card__badge text-[12px] font-900" :class="`is-${item.badgeTone}`">
{{ item.badge }}
</div>
<div class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
<div class="long-text-guide-card__summary-title color-1E293B text-[18px] font-900">
{{ item.title }}
</div>
<div class="long-text-guide-card__summary-text color-94A3B8 text-[14px] font-500 ellipsis-2">
<div class="long-text-guide-card__summary-text color-94A3B8 text-[14px] font-medium ellipsis-2">
{{ item.summary }}
</div>
<div class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
@@ -25,7 +25,7 @@
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="long-text-guide-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1">
<div class="long-text-guide-card__detail-title color-1E293B text-[18px] font-900 ellipsis-1">
{{ activeItem.title }}
</div>
<div class="long-text-guide-card__badge long-text-guide-card__detail-badge text-[12px] font-900"
@@ -36,7 +36,7 @@
<div class="long-text-guide-card__rich-body">
<div v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage" :key="`before-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
class="long-text-guide-card__paragraph color-475569 text-[15px] font-medium">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`">
<span v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
@@ -49,7 +49,7 @@
<image v-if="activeItem.image" class="long-text-guide-card__main-image w-full rounded-14 block"
:src="activeItem.image" mode="aspectFill" />
<div class="long-text-guide-card__section-title color-1E293B font-size-16 font-900">
<div class="long-text-guide-card__section-title color-1E293B text-[16px] font-900">
{{ activeItem.sectionTitle }}
</div>
<div class="long-text-guide-card__tip-block bg-ECFDF5">
@@ -60,7 +60,7 @@
</div>
<div v-for="(paragraph, paragraphIndex) in paragraphsAfterTips" :key="`after-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
class="long-text-guide-card__paragraph color-475569 text-[15px] font-medium">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`">
<span v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
@@ -72,7 +72,7 @@
</div>
<div v-if="activeItem.action?.type === 'map'" class="long-text-guide-card__action-zone">
<div class="long-text-guide-card__action-label color-94A3B8 font-size-11 font-800">
<div class="long-text-guide-card__action-label color-94A3B8 text-[11px] font-800">
{{ activeItem.action.label }}
</div>
<div class="long-text-guide-card__map-card rounded-16 overflow-hidden">
@@ -85,7 +85,7 @@
</div>
<div class="long-text-guide-card__map-bar flex flex-items-center bg-white">
<div class="flex-full">
<div class="color-1E293B font-size-15 font-900">{{ activeItem.action.title }}</div>
<div class="color-1E293B text-[15px] font-900">{{ activeItem.action.title }}</div>
<div class="color-94A3B8 text-[12px] font-800 mt-2">{{ activeItem.action.subtitle }}</div>
</div>
<div class="long-text-guide-card__nav-btn text-white bg-0F172A text-[14px] font-900"
@@ -97,14 +97,14 @@
</div>
<div v-else-if="activeItem.action?.type === 'image'" class="long-text-guide-card__action-zone">
<div class="long-text-guide-card__action-label color-94A3B8 font-size-11 font-800">
<div class="long-text-guide-card__action-label color-94A3B8 text-[11px] font-800">
{{ activeItem.action.label }}
</div>
<div class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">
<img class="long-text-guide-card__photo-image w-full block" :src="activeItem.action.image"
mode="aspectFill" />
<div
class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full text-white font-size-18 font-900">
class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full text-white text-[18px] font-900">
↗
</div>
</div>

4
src/pages/home/components/LongTextGuideCardPreview/index.vue
View File

@@ -8,10 +8,10 @@
{{ item.badge }}
</div>
<div class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
<div class="long-text-guide-card__summary-title color-1E293B text-[18px] font-900">
{{ item.title }}
</div>
<div class="long-text-guide-card__summary-text color-94A3B8 text-[14px] font-500 ellipsis-2">
<div class="long-text-guide-card__summary-text color-94A3B8 text-[14px] font-medium ellipsis-2">
{{ item.summary }}
</div>
<div class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">

4
src/pages/home/components/MapNavigationCard/index.vue
View File

@@ -10,7 +10,7 @@
<div class="map-navigation-card__content flex flex-items-center">
<div class="map-navigation-card__info flex-full">
<div class="map-navigation-card__title color-1E293B font-size-18 font-900 ellipsis-1">
<div class="map-navigation-card__title color-1E293B text-[18px] font-900 ellipsis-1">
{{ data.title }}
</div>
<div class="map-navigation-card__distance color-94A3B8 text-[14px] font-900 ellipsis-1">
@@ -18,7 +18,7 @@
</div>
</div>
<div
class="map-navigation-card__button flex flex-items-center flex-justify-center bg-0F172A text-white font-size-18 font-900"
class="map-navigation-card__button flex flex-items-center flex-justify-center bg-0F172A text-white text-[18px] font-900"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<span class="map-navigation-card__button-icon">{{ action.icon }}</span>
<span>{{ action.text }}</span>

4
src/pages/home/components/MoreService/index.vue
View File

@@ -2,7 +2,7 @@
<van-popup ref="popup" position="bottom" v-model:show="show">
<div class="popup-content pt-12 pl-12 pr-12">
<div class="header flex flex-items-center pb-12">
<div class="title flex-full text-center font-size-17 color-000 font-500 ml-24">更多服务</div>
<div class="title flex-full text-center text-[17px] color-000 font-medium ml-24">更多服务</div>
<van-icon name="cross" size="24" color="#CACFD8" @click="close" />
</div>
@@ -11,7 +11,7 @@
<div class="flex flex-items-center flex-justify-center">
<img v-if="item.icon" class="left" :src="item.icon" />
<div class="center flex-full">
<div class="font-size-16 color-000 line-height-24 font-500">
<div class="text-[16px] color-000 leading-[24px] font-medium">
{{ item.title }}
</div>
<div class="text-[12px] color-A3A3A3 line-height-16">

6
src/pages/home/components/NoticeCard/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="notice-card w-full">
<div v-if="!detailOpen" class="notice-card__summary bg-FFFBEB rounded-24 w-full">
<div class="notice-card__summary-title color-B45309 font-size-16 font-900">
<div class="notice-card__summary-title color-B45309 text-[16px] font-900">
{{ summary.title }}
</div>
<div class="notice-card__summary-content color-D97706 text-[14px] font-900">
@@ -24,7 +24,7 @@
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="notice-card__head-title color-1E293B font-size-18 font-900">
<div class="notice-card__head-title color-1E293B text-[18px] font-900">
{{ detail.navTitle }}
</div>
</div>
@@ -35,7 +35,7 @@
<div class="notice-card__detail-title color-1E293B font-size-20 font-900">
{{ detail.title }}
</div>
<div class="notice-card__time-pill flex flex-items-center bg-F8FAFC color-475569 font-size-13 font-900">
<div class="notice-card__time-pill flex flex-items-center bg-F8FAFC color-475569 text-[13px] font-900">
<span class="notice-card__time-icon">{{ detail.timeIcon }}</span>
<span>{{ detail.publishTime }}</span>
</div>

2
src/pages/home/components/NoticeMessage/detail.vue
View File

@@ -11,7 +11,7 @@
<img v-if="coverImage" class="w-full block" :src="coverImage" mode="aspectFill" />
<div class="pt-16 px-12 pb-24 ">
<div class="color-171717 font-size-16 font-weight-600">{{ detailTitle }}</div>
<div class="color-171717 text-[16px] font-weight-600">{{ detailTitle }}</div>
<div v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-[16px]">
<uni-icons type="clock" size="18" color="#5A6780" />

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

@@ -5,7 +5,7 @@
<div class="poi-compare-card__mark flex flex-items-center flex-justify-center rounded-full flex-shrink-0">
{{ data.icon }}
</div>
<div class="poi-compare-card__title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
<div class="poi-compare-card__title color-1E293B text-[18px] font-900 ellipsis-1 flex-full">
{{ data.title }}
</div>
</div>
@@ -30,7 +30,7 @@
</div>
<div
class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A text-white font-size-15 font-900"
class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A text-white text-[15px] font-900"
:class="{ 'is-disabled': disabled }" @click="openDetail">
{{ data.detailButtonText }}
</div>
@@ -85,7 +85,7 @@
<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 font-size-15 font-900"
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 }]"
@click="handleAction(action)">
<span class="poi-compare-card__action-icon">{{ action.icon }}</span>

4
src/pages/home/components/PoiDetailCard/index.vue
View File

@@ -14,14 +14,14 @@
</div>
<div class="poi-detail-card__tip flex flex-items-center gap-10">
<div class="poi-detail-card__spark color-047857 font-size-18 font-900">✦</div>
<div class="poi-detail-card__spark color-047857 text-[18px] font-900">✦</div>
<div class="poi-detail-card__tip-text color-047857 text-[14px] font-800">
{{ data.tip?.text }}
</div>
</div>
<div
class="poi-detail-card__button flex flex-items-center flex-justify-center gap-8 text-white bg-0F172A font-size-16 font-900"
class="poi-detail-card__button flex flex-items-center flex-justify-center gap-8 text-white bg-0F172A text-[16px] font-900"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<span class="poi-detail-card__button-icon">↗</span>
<span>{{ data.action?.text }}</span>

2
src/pages/home/components/RecommendationListCard/index.vue
View File

@@ -7,7 +7,7 @@
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<img class="recommendation-list-card__image block w-full" :src="item.image" mode="aspectFill" />
<div class="recommendation-list-card__body p-16">
<div class="recommendation-list-card__name color-1E293B font-size-18 font-900 ellipsis-1">
<div class="recommendation-list-card__name color-1E293B text-[18px] font-900 ellipsis-1">
{{ item.title }}
</div>
<div

8
src/pages/home/components/RoutePlanCard/index.vue
View File

@@ -5,7 +5,7 @@
:class="{ 'is-disabled': disabled }" @click="openDetail">
<img class="route-plan-card__cover block flex-shrink-0" :src="data.image" mode="aspectFill" />
<div class="route-plan-card__body flex-full">
<div class="route-plan-card__title color-1E293B font-size-18 font-900 ellipsis-1">
<div class="route-plan-card__title color-1E293B text-[18px] font-900 ellipsis-1">
{{ data.title }}
</div>
<div class="route-plan-card__tags flex flex-items-center">
@@ -26,7 +26,7 @@
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="route-plan-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
<div class="route-plan-card__detail-title color-1E293B text-[18px] font-900 ellipsis-1 flex-full">
{{ data.title }}
</div>
<div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 text-[12px] font-900">
@@ -44,7 +44,7 @@
<div class="route-plan-card__node bg-white rounded-20 flex flex-items-center">
<img class="route-plan-card__node-image block flex-shrink-0" :src="node.image" mode="aspectFill" />
<div class="route-plan-card__node-body flex-full">
<div class="route-plan-card__node-title color-1E293B font-size-16 font-900 ellipsis-1">
<div class="route-plan-card__node-title color-1E293B text-[16px] font-900 ellipsis-1">
{{ node.title }}
</div>
<div class="route-plan-card__node-desc color-94A3B8 text-[12px] font-800 ellipsis-1">
@@ -74,7 +74,7 @@
{{ detail.tipsTitle }}
</div>
<div v-for="tip in tips" :key="tip"
class="route-plan-card__tip flex flex-items-center color-334155 font-size-13 font-900">
class="route-plan-card__tip flex flex-items-center color-334155 text-[13px] font-900">
<div class="route-plan-card__tip-dot rounded-full flex-shrink-0"></div>
<div>{{ tip }}</div>
</div>

4
src/pages/home/components/ScenicImageCard/index.vue
View File

@@ -4,13 +4,13 @@
<img class="scenic-image-card__image block w-full" :src="data.image" mode="aspectFill" />
<div
class="scenic-image-card__expand flex flex-items-center flex-justify-center rounded-full text-white font-size-18 font-900"
class="scenic-image-card__expand flex flex-items-center flex-justify-center rounded-full text-white text-[18px] font-900"
@click.stop="handleAction">
{{ action.icon }}
</div>
<div v-if="hasCaption" class="scenic-image-card__caption">
<div v-if="caption.title" class="scenic-image-card__title text-white font-size-18 font-900 ellipsis-1">
<div v-if="caption.title" class="scenic-image-card__title text-white text-[18px] font-900 ellipsis-1">
{{ caption.title }}
</div>
<div v-if="caption.subtitle" class="scenic-image-card__subtitle text-white text-[14px] font-900 ellipsis-1">

2
src/pages/home/components/SharedVisual/ActionRow.vue
View File

@@ -2,7 +2,7 @@
<div class="visual-action-row flex flex-items-center gap-[12px] p-[12px] bg-white rounded-18 "
:class="{ 'is-disabled': disabled }" @click="handleClick">
<div
class="visual-action-row__icon flex flex-items-center flex-justify-center w-42 h-42 rounded-14 font-size-18 font-900"
class="visual-action-row__icon flex flex-items-center flex-justify-center w-42 h-42 rounded-14 text-[18px] font-900"
:class="toneClass">
<slot name="icon">{{ icon }}</slot>
</div>