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

style: migrate font-size classes to text-[size] syntax

Browse Source 
Additionally update spacing utilities and refactor the OrderQrcode component:
- Switch popup implementation from uni-popup to van-popup
- Remove the deprecated SCSS stylesheet
- Clean up component template and script code
This commit is contained in:
DEV_DSW
2026-05-29 09:21:36 +08:00
parent 02fef5dd89
commit e52f916231
44 changed files with 202 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,17 +9,17 @@
<span class="font-size-16 font-500 span-color-900 ml-6"> {{ title }}</span>
</div>
<!-- 文字内容，最多显示3行 -->
<div v-if="processedContent" class="answer-content font-size-12 font-color-600">
<div v-if="processedContent" class="answer-content text-[12px] font-color-600">
<ChatMarkdown :text="processedContent" />
</div>
<!-- 超过3行时显示...提示 -->
<div v-if="!finish" class="flex flex-row flex-items-center mt-8">
<span class="font-size-12 font-400 font-color-600">正在生成</span>
<span class="text-[12px] font-400 font-color-600">正在生成</span>
<ChatLoading />
</div>
<div v-if="isOverflow" class="flex flex-row flex-items-center flex-justify-between mt-4"
@click="lookDetailAction">
<span class="font-size-12 font-400 theme-color-500 mr-4">查看完整{{ tag }}</span>
<span class="text-[12px] font-400 theme-color-500 mr-4">查看完整{{ tag }}</span>
<uni-icons class="icon-active" type="right" size="14" color="opacity"></uni-icons>
</div>

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

@@ -2,7 +2,7 @@
<div class="more-tips bg-white border-box">
<div class="font-size-0 whitespace-nowrap scroll-x">
<div class="more-tips-item border-box inline-block mr-8" v-for="(item, index) in guideWords" :key="index">
<span :class="['font-500 font-size-12 text-center', `color-${index}`]" @click="sendReply(item)">
<span :class="['font-500 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 font-size-14 font-500 font-family-misans-vf color-171717 line-height-24">
<div class="welcome-text text-[14px] font-500 font-family-misans-vf color-171717 line-height-24">
{{ welcomeContent }}
</div>
</div>

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

@@ -4,7 +4,7 @@
<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 font-size-12 font-900">
<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">
@@ -12,7 +12,7 @@
</div>
</div>
<div class="facility-location-card__distance flex flex-items-center color-94A3B8 font-size-14 font-900">
<div class="facility-location-card__distance flex flex-items-center color-94A3B8 text-[14px] font-900">
<span class="facility-location-card__distance-icon">{{ distance.icon }}</span>
<span>{{ distance.text }}</span>
</div>

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

@@ -14,7 +14,7 @@
<img class="g_title mt-20" :src="props.toolCall.componentNameParams.title" />
<span class="font-size-14 font-400 color-white my-12 text-center">
<span class="text-[14px] font-400 color-white my-12 text-center">
{{ props.toolCall.componentNameParams.description }}
</span>

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

@@ -4,17 +4,17 @@
<div v-for="item in cards" :key="item.id"
class="long-text-guide-card__summary-card bg-white rounded-24 border-box" :class="{ 'is-disabled': disabled }"
@click="openDetail(item)">
<div class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
<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">
{{ item.title }}
</div>
<div class="long-text-guide-card__summary-text color-94A3B8 font-size-14 font-500 ellipsis-2">
<div class="long-text-guide-card__summary-text color-94A3B8 text-[14px] font-500 ellipsis-2">
{{ item.summary }}
</div>
<div class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
<text class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</text>
<text class="color-CBD5E1 text-[12px] font-800">{{ item.footer }}</text>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
</div>
</div>
@@ -29,7 +29,7 @@
<div class="long-text-guide-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1">
{{ activeItem.title }}
</div>
<div class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
<div class="long-text-guide-card__badge long-text-guide-card__detail-badge text-[12px] font-900"
:class="`is-${activeItem.badgeTone}`">
{{ activeItem.badge }}
</div>
@@ -55,7 +55,7 @@
</div>
<div class="long-text-guide-card__tip-block bg-ECFDF5">
<div v-for="(tip, index) in activeItem.tips || []" :key="tip"
class="long-text-guide-card__tip color-047857 font-size-14 font-800">
class="long-text-guide-card__tip color-047857 text-[14px] font-800">
{{ index + 1 }} {{ tip }}
</div>
</div>
@@ -87,9 +87,9 @@
<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-94A3B8 font-size-12 font-800 mt-2">{{ activeItem.action.subtitle }}</div>
<div class="color-94A3B8 text-[12px] font-800 mt-2">{{ activeItem.action.subtitle }}</div>
</div>
<div class="long-text-guide-card__nav-btn color-white bg-0F172A font-size-14 font-900"
<div class="long-text-guide-card__nav-btn color-white bg-0F172A text-[14px] font-900"
@click="handleAction(activeItem)">
{{ activeItem.action.buttonText }}
</div>

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

@@ -4,18 +4,18 @@
<div class="w-vw"></div>
<div class="flex flex-col px-16 pt-16 pb-12 border-box" @click="openDetail(item)">
<div class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
<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">
{{ item.title }}
</div>
<div class="long-text-guide-card__summary-text color-94A3B8 font-size-14 font-500 ellipsis-2">
<div class="long-text-guide-card__summary-text color-94A3B8 text-[14px] font-500 ellipsis-2">
{{ item.summary }}
</div>
<div class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
<span class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</span>
<span class="color-CBD5E1 text-[12px] font-800">{{ item.footer }}</span>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
</div>

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

@@ -2,7 +2,7 @@
<div class="map-navigation-card bg-white rounded-24 overflow-hidden w-full">
<div class="map-navigation-card__media">
<img class="map-navigation-card__image block w-full" :src="data.image" mode="aspectFill" />
<div class="map-navigation-card__badge flex flex-items-center color-white font-size-12 font-900">
<div class="map-navigation-card__badge flex flex-items-center color-white text-[12px] font-900">
<span class="map-navigation-card__badge-icon">{{ badge.icon }}</span>
<span>{{ badge.text }}</span>
</div>
@@ -13,7 +13,7 @@
<div class="map-navigation-card__title color-1E293B font-size-18 font-900 ellipsis-1">
{{ data.title }}
</div>
<div class="map-navigation-card__distance color-94A3B8 font-size-14 font-900 ellipsis-1">
<div class="map-navigation-card__distance color-94A3B8 text-[14px] font-900 ellipsis-1">
{{ data.distance }}
</div>
</div>

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

@@ -14,11 +14,11 @@
<div class="font-size-16 color-000 line-height-24 font-500">
{{ item.title }}
</div>
<div class="font-size-12 color-A3A3A3 line-height-16">
<div class="text-[12px] color-A3A3A3 line-height-16">
{{ item.content }}
</div>
</div>
<div class="right border-box font-size-12 color-white line-height-16" @click="handleClick(item)">
<div class="right border-box text-[12px] color-white line-height-16" @click="handleClick(item)">
{{ item.btnText }}
</div>
</div>

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

@@ -4,14 +4,14 @@
<div class="notice-card__summary-title color-B45309 font-size-16 font-900">
{{ summary.title }}
</div>
<div class="notice-card__summary-content color-D97706 font-size-14 font-900">
<div class="notice-card__summary-content color-D97706 text-[14px] font-900">
{{ summary.content }}
</div>
<div class="notice-card__summary-footer flex flex-items-center flex-justify-between">
<div class="notice-card__summary-time color-D97706 font-size-12 font-900">
<div class="notice-card__summary-time color-D97706 text-[12px] font-900">
{{ summary.publishTime }}
</div>
<div class="notice-card__summary-link color-B45309 font-size-14 font-900" :class="{ 'is-disabled': disabled }"
<div class="notice-card__summary-link color-B45309 text-[14px] font-900" :class="{ 'is-disabled': disabled }"
@click="openDetail">
{{ summary.actionText }}
</div>
@@ -41,7 +41,7 @@
</div>
<div class="notice-card__divider"></div>
<div v-for="paragraph in paragraphs" :key="paragraph.id"
class="notice-card__paragraph color-475569 font-size-14 font-800">
class="notice-card__paragraph color-475569 text-[14px] font-800">
<span v-for="segment in paragraph.segments" :key="segment.text"
:class="{ 'notice-card__strong': segment.strong }">
{{ segment.text }}

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

@@ -13,14 +13,14 @@
<div class="pt-16 px-12 pb-24 border-box">
<div class="color-171717 font-size-16 font-weight-600">{{ detailTitle }}</div>
<div v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-16">
<div v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-[16px]">
<uni-icons type="clock" size="18" color="#5A6780" />
<span class="color-171717 font-size-12 font-weight-600 ml-8">发布时间：{{ publishTime }}</span>
<span class="color-171717 text-[12px] font-weight-600 ml-8">发布时间：{{ publishTime }}</span>
</div>
<div class="mt-16 mx-12 bg-gray w-full height-1"></div>
<div class="mt-[16px] mx-12 bg-gray w-full height-1"></div>
<div class="mt-16 color-666 font-size-14 line-height-20">{{ noticeContent }}</div>
<div class="mt-[16px] color-666 text-[14px] line-height-20">{{ noticeContent }}</div>
</div>
</div>
</div>

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

@@ -9,8 +9,8 @@
</div>
</div>
<div class="center ml-12">
<div class="font-color-900 font-size-14">打开导览地图</div>
<div class="font-color-500 font-size-12 mt-6">距你 {{ distance }} · 步行 {{ walk }}</div>
<div class="font-color-900 text-[14px]">打开导览地图</div>
<div class="font-color-500 text-[12px] mt-6">距你 {{ distance }} · 步行 {{ walk }}</div>
</div>
<div class="ml-12 flex flex-items-center flex-justify-center w-32 h-32 rounded-full bg-F2F5F8">
<uni-icons class="mb-2" type="right" size="12" color="#99A0AE" />

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

@@ -15,14 +15,14 @@
: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 font-size-12 font-800">
<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 font-size-12 font-900"
<div v-if="field.tone" class="poi-compare-card__chip text-[12px] font-900"
:class="getToneClass(field.tone)">
{{ field.value }}
</div>
<div v-else class="poi-compare-card__field-value color-1E293B font-size-14 font-900">
<div v-else class="poi-compare-card__field-value color-1E293B text-[14px] font-900">
{{ field.value }}
</div>
</div>
@@ -45,7 +45,7 @@
<div class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
{{ detail.title }}
</div>
<div class="poi-compare-card__compare-label color-94A3B8 font-size-12 font-900">
<div class="poi-compare-card__compare-label color-94A3B8 text-[12px] font-900">
{{ 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 font-size-14 font-900">
class="poi-compare-card__table-title color-1E293B text-[14px] font-900">
{{ 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 font-size-12 font-900">
<div class="poi-compare-card__row-label color-94A3B8 text-[12px] font-900">
{{ row.label }}
</div>
<div 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)">
class="poi-compare-card__cell color-1E293B text-[14px] font-900" :class="getCellClass(cell.tone)">
{{ cell.text }}
</div>
</div>
</div>
<div class="poi-compare-card__recommend">
<div class="poi-compare-card__recommend-title color-94A3B8 font-size-12 font-900">
<div class="poi-compare-card__recommend-title color-94A3B8 text-[12px] font-900">
{{ 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 font-size-14 font-900">
<div class="poi-compare-card__tip-text color-334155 text-[14px] font-900">
{{ tip.text }}
</div>
</div>

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

@@ -15,7 +15,7 @@
<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__tip-text color-047857 font-size-14 font-800">
<div class="poi-detail-card__tip-text color-047857 text-[14px] font-800">
{{ data.tip?.text }}
</div>
</div>

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

@@ -11,12 +11,12 @@
{{ item.title }}
</div>
<div
class="recommendation-list-card__distance flex flex-items-center gap-4 mt-4 color-94A3B8 font-size-12 font-800">
class="recommendation-list-card__distance flex flex-items-center gap-4 mt-4 color-94A3B8 text-[12px] font-800">
<span class="recommendation-list-card__pin">⌖</span>
<span>{{ item.distance }}</span>
</div>
<div
class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-12 color-334155 font-size-12 font-900"
class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-12 color-334155 text-[12px] font-900"
@click.stop="handleSelect(item)">
{{ getActionText(item) }}
</div>

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

@@ -9,7 +9,7 @@
{{ data.title }}
</div>
<div class="route-plan-card__tags flex flex-items-center">
<div v-for="tag in summaryTags" :key="tag.id || tag.text" class="route-plan-card__tag font-size-12 font-900"
<div v-for="tag in summaryTags" :key="tag.id || tag.text" class="route-plan-card__tag text-[12px] font-900"
:class="getTagClass(tag.tone)">
{{ tag.text }}
</div>
@@ -29,7 +29,7 @@
<div class="route-plan-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
{{ data.title }}
</div>
<div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 font-size-12 font-900">
<div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 text-[12px] font-900">
{{ detail.badge }}
</div>
</div>
@@ -38,7 +38,7 @@
<template v-for="(node, index) in nodes" :key="node.id || node.title">
<div class="route-plan-card__node-wrap" :class="{ 'is-disabled': disabled }" @click="handleSelect(node)">
<div
class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-ECFDF5 font-size-12 font-900">
class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-ECFDF5 text-[12px] font-900">
{{ index + 1 }}
</div>
<div class="route-plan-card__node bg-white rounded-20 flex flex-items-center">
@@ -47,10 +47,10 @@
<div class="route-plan-card__node-title color-1E293B font-size-16 font-900 ellipsis-1">
{{ node.title }}
</div>
<div class="route-plan-card__node-desc color-94A3B8 font-size-12 font-800 ellipsis-1">
<div class="route-plan-card__node-desc color-94A3B8 text-[12px] font-800 ellipsis-1">
{{ node.description }}
</div>
<div v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-FFFBEB font-size-12 font-900">
<div v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-FFFBEB text-[12px] font-900">
{{ node.tag }}
</div>
</div>
@@ -61,7 +61,7 @@
<div class="route-plan-card__connector-line"></div>
<div class="route-plan-card__connector-arrow"></div>
<div
class="route-plan-card__connector-chip flex flex-items-center bg-F8FAFC rounded-full color-64748B font-size-12 font-900">
class="route-plan-card__connector-chip flex flex-items-center bg-F8FAFC rounded-full color-64748B text-[12px] font-900">
<span class="route-plan-card__connector-icon">{{ connectors[index].icon }}</span>
<span>{{ connectors[index].text }}</span>
</div>
@@ -70,7 +70,7 @@
</div>
<div v-if="tips.length" class="route-plan-card__tips bg-F8FAFC rounded-20">
<div class="route-plan-card__tips-title color-64748B font-size-14 font-900">
<div class="route-plan-card__tips-title color-64748B text-[14px] font-900">
{{ detail.tipsTitle }}
</div>
<div v-for="tip in tips" :key="tip"

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

@@ -13,7 +13,7 @@
<div v-if="caption.title" class="scenic-image-card__title color-white font-size-18 font-900 ellipsis-1">
{{ caption.title }}
</div>
<div v-if="caption.subtitle" class="scenic-image-card__subtitle color-white font-size-14 font-900 ellipsis-1">
<div v-if="caption.subtitle" class="scenic-image-card__subtitle color-white text-[14px] font-900 ellipsis-1">
{{ caption.subtitle }}
</div>
</div>

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

@@ -7,7 +7,7 @@
<slot name="icon">{{ icon }}</slot>
</div>
<div class="visual-action-row__body flex-full">
<div class="visual-action-row__title color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</div>
<div class="visual-action-row__title color-1E293B text-[14px] font-900 ellipsis-1">{{ title }}</div>
<div v-if="subtitle" class="visual-action-row__subtitle ellipsis-1">
{{ subtitle }}
</div>

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

@@ -5,7 +5,7 @@
@click="$emit('back')">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="visual-detail__title flex-full color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</div>
<div class="visual-detail__title flex-full color-1E293B text-[14px] font-900 ellipsis-1">{{ title }}</div>
<BadgePill v-if="tag" :label="tag" :tone="tone" />
</div>
<slot />