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

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

@@ -2,7 +2,7 @@
<div class="w-full bg-white border-ff overflow-hidden rounded-20 flex flex-col">
<!-- 占位撑开 -->
<div class="w-vw"></div>
<div class="flex flex-col px-16 pt-16 pb-[12px] ">
<div class="flex flex-col px-[16px] pt-16 pb-[12px] ">
<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" />
@@ -13,12 +13,11 @@
<ChatMarkdown :text="processedContent" />
</div>
<!-- 超过3行时显示...提示 -->
<div v-if="!finish" class="flex flex-row flex-items-center mt-8">
<div v-if="!finish" class="flex flex-row items-center mt-8">
<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">
<div v-if="isOverflow" class="flex flex-row items-center flex-justify-between mt-4" @click="lookDetailAction">
<span class="text-[12px] font-400 theme-color-500 mr-[4px]">查看完整{{ 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

@@ -1,7 +1,7 @@
<template>
<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">
<div class="more-tips-item inline-block mr-[8px]" v-for="(item, index) in guideWords" :key="index">
<span :class="['font-medium text-[12px] text-center', `color-${index}`]" @click="sendReply(item)">
{{ item }}
</span>

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

@@ -2,7 +2,7 @@ v
<template>
<div class="welcome-content p-[12px]">
<div class="wrap rounded-20">
<div class="flex flex-items-center flex-justify-between pl-12 pr-12">
<div class="flex items-center flex-justify-between pl-12 pr-12">
<SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
:displayWidth="spriteStyle.displayWidth" :fps="16" />

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

@@ -3,32 +3,32 @@
<img class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" />
<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 text-[12px] font-900">
<div class="facility-location-card__title-row flex items-center">
<div class="facility-location-card__badge color-2563EB bg-EFF6FF text-[12px] font-bold">
{{ type.text }}
</div>
<div class="facility-location-card__title color-1E293B text-[18px] font-900 truncate">
<div class="facility-location-card__title text-[#1e293b] text-[18px] font-bold truncate">
{{ data.title }}
</div>
</div>
<div class="facility-location-card__distance flex flex-items-center color-94A3B8 text-[14px] font-900">
<div class="facility-location-card__distance flex items-center color-94A3B8 text-[14px] font-bold">
<span class="facility-location-card__distance-icon">{{ distance.icon }}</span>
<span>{{ distance.text }}</span>
</div>
<div class="facility-location-card__location bg-F8FAFC rounded-20">
<div class="facility-location-card__location-label flex flex-items-center color-64748B text-[13px] font-900">
<div class="facility-location-card__location bg-[#f8fafc] rounded-20">
<div class="facility-location-card__location-label flex items-center color-64748B text-[13px] font-bold">
<span class="facility-location-card__location-dot">{{ location.icon }}</span>
<span>{{ location.label }}</span>
</div>
<div class="facility-location-card__location-text color-1E293B text-[16px] font-900">
<div class="facility-location-card__location-text text-[#1e293b] text-[16px] font-bold">
{{ location.text }}
</div>
</div>
<div
class="facility-location-card__button flex flex-items-center flex-justify-center bg-0F172A text-white text-[18px] font-900"
class="facility-location-card__button flex items-center flex-justify-center bg-0F172A text-white text-[18px] font-bold"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<span class="facility-location-card__button-icon">{{ action.icon }}</span>
<span>{{ action.text }}</span>

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

@@ -1,10 +1,10 @@
<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 text-[16px] font-900">
<div class="faq-help-card__header flex items-center">
<div class="faq-help-card__icon flex items-center flex-justify-center rounded-full text-[16px] font-bold">
{{ data.icon }}
</div>
<div class="faq-help-card__title color-1E293B font-size-20 font-900">
<div class="faq-help-card__title text-[#1e293b] font-size-20 font-bold">
{{ data.title }}
</div>
</div>
@@ -12,9 +12,9 @@
<div class="faq-help-card__divider"></div>
<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"
<div v-for="item in questions" :key="item.id || item.text" class="faq-help-card__item flex items-center"
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<div class="faq-help-card__question color-475569 text-[18px] font-900 truncate flex-1">
<div class="faq-help-card__question color-475569 text-[18px] font-bold truncate flex-1">
{{ item.text }}
</div>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>

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

@@ -3,7 +3,7 @@
<!-- 占位撑开 -->
<div class="w-vw"></div>
<div class="content flex flex-col m-4 rounded-24">
<div class="flex flex-col p-6 flex-items-center justify-center">
<div class="flex flex-col p-6 items-center justify-center">
<img class="w-full rounded-20" :src="props.toolCall.componentNameParams.background" mode="widthFix" />
<!-- 左上角标签 -->
@@ -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 text-[18px] font-800">
class="btn-bg-sub w-full p-16 rounded-20 flex flex-row items-center flex-justify-center text-white text-center text-[18px] font-800">
{{ props.toolCall.componentNameParams.buttonName }}
</div>
</div>

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

@@ -3,16 +3,16 @@
<div v-if="mode === 'list'" class="long-text-guide-card__list w-full">
<div v-for="item in cards" :key="item.id" class="long-text-guide-card__summary-card bg-white rounded-24 "
:class="{ 'is-disabled': disabled }" @click="openDetail(item)">
<div class="long-text-guide-card__badge text-[12px] font-900" :class="`is-${item.badgeTone}`">
<div class="long-text-guide-card__badge text-[12px] font-bold" :class="`is-${item.badgeTone}`">
{{ item.badge }}
</div>
<div class="long-text-guide-card__summary-title color-1E293B text-[18px] font-900">
<div class="long-text-guide-card__summary-title text-[#1e293b] text-[18px] font-bold">
{{ item.title }}
</div>
<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">
<div class="long-text-guide-card__summary-footer flex items-center flex-justify-between">
<text class="color-CBD5E1 text-[12px] font-800">{{ item.footer }}</text>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
</div>
@@ -20,15 +20,15 @@
</div>
<div v-else class="long-text-guide-card__detail-card bg-white rounded-24 overflow-hidden">
<div class="long-text-guide-card__detail-header flex flex-items-center border-bottom-F1F5F9">
<div class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
<div class="long-text-guide-card__detail-header flex items-center border-bottom-F1F5F9">
<div class="long-text-guide-card__back flex items-center flex-justify-center rounded-full font-700"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="long-text-guide-card__detail-title color-1E293B text-[18px] font-900 truncate">
<div class="long-text-guide-card__detail-title text-[#1e293b] text-[18px] font-bold truncate">
{{ activeItem.title }}
</div>
<div class="long-text-guide-card__badge long-text-guide-card__detail-badge text-[12px] font-900"
<div class="long-text-guide-card__badge long-text-guide-card__detail-badge text-[12px] font-bold"
:class="`is-${activeItem.badgeTone}`">
{{ activeItem.badge }}
</div>
@@ -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 text-[16px] font-900">
<div class="long-text-guide-card__section-title text-[#1e293b] text-[16px] font-bold">
{{ activeItem.sectionTitle }}
</div>
<div class="long-text-guide-card__tip-block bg-ECFDF5">
@@ -79,16 +79,16 @@
<div class="long-text-guide-card__map-image-wrap relative">
<img class="long-text-guide-card__map-image w-full block" :src="activeItem.action.image"
mode="aspectFill" />
<div class="long-text-guide-card__map-tag text-white font-size-10 font-900">
<div class="long-text-guide-card__map-tag text-white font-size-10 font-bold">
{{ activeItem.action.tag }}
</div>
</div>
<div class="long-text-guide-card__map-bar flex flex-items-center bg-white">
<div class="long-text-guide-card__map-bar flex items-center bg-white">
<div class="flex-1">
<div class="color-1E293B text-[15px] font-900">{{ activeItem.action.title }}</div>
<div class="text-[#1e293b] text-[15px] font-bold">{{ 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"
<div class="long-text-guide-card__nav-btn text-white bg-0F172A text-[14px] font-bold"
@click="handleAction(activeItem)">
{{ activeItem.action.buttonText }}
</div>
@@ -104,7 +104,7 @@
<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 text-[18px] font-900">
class="long-text-guide-card__expand flex items-center flex-justify-center rounded-full text-white text-[18px] font-bold">
↗
</div>
</div>

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

@@ -2,19 +2,19 @@
<div class="w-full bg-white border-ff overflow-hidden rounded-20 flex flex-col">
<!-- 占位撑开 -->
<div class="w-vw"></div>
<div class="flex flex-col px-16 pt-16 pb-[12px] " @click="openDetail(item)">
<div class="flex flex-col px-[16px] pt-16 pb-[12px] " @click="openDetail(item)">
<div class="long-text-guide-card__badge text-[12px] font-900" :class="`is-${item.badgeTone}`">
<div class="long-text-guide-card__badge text-[12px] font-bold" :class="`is-${item.badgeTone}`">
{{ item.badge }}
</div>
<div class="long-text-guide-card__summary-title color-1E293B text-[18px] font-900">
<div class="long-text-guide-card__summary-title text-[#1e293b] text-[18px] font-bold">
{{ item.title }}
</div>
<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">
<div class="long-text-guide-card__summary-footer flex items-center flex-justify-between">
<span class="color-CBD5E1 text-[12px] font-800">{{ item.footer }}</span>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
</div>

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

@@ -2,23 +2,23 @@
<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 text-white text-[12px] font-900">
<div class="map-navigation-card__badge flex items-center text-white text-[12px] font-bold">
<span class="map-navigation-card__badge-icon">{{ badge.icon }}</span>
<span>{{ badge.text }}</span>
</div>
</div>
<div class="map-navigation-card__content flex flex-items-center">
<div class="map-navigation-card__content flex items-center">
<div class="map-navigation-card__info flex-1">
<div class="map-navigation-card__title color-1E293B text-[18px] font-900 truncate">
<div class="map-navigation-card__title text-[#1e293b] text-[18px] font-bold truncate">
{{ data.title }}
</div>
<div class="map-navigation-card__distance color-94A3B8 text-[14px] font-900 truncate">
<div class="map-navigation-card__distance color-94A3B8 text-[14px] font-bold truncate">
{{ data.distance }}
</div>
</div>
<div
class="map-navigation-card__button flex flex-items-center flex-justify-center bg-0F172A text-white text-[18px] font-900"
class="map-navigation-card__button flex items-center flex-justify-center bg-0F172A text-white text-[18px] font-bold"
: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

@@ -1,14 +1,14 @@
<template>
<van-popup ref="popup" position="bottom" v-model:show="show">
<div class="popup-content pt-[12px] pl-12 pr-12">
<div class="header flex flex-items-center pb-[12px]">
<div class="header flex items-center pb-[12px]">
<div class="title flex-1 text-center text-[17px] text-black font-medium ml-24">更多服务</div>
<van-icon name="cross" size="24" color="#CACFD8" @click="close" />
</div>
<div class="list bg-white pl-20 pr-20">
<div class="item border-bottom pt-20 pb-20" v-for="(item, index) in list" :key="index">
<div class="flex flex-items-center flex-justify-center">
<div class="flex items-center flex-justify-center">
<img v-if="item.icon" class="left" :src="item.icon" />
<div class="center flex-1">
<div class="text-[16px] text-black leading-[24px] font-medium">

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

@@ -1,17 +1,17 @@
<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 text-[16px] font-900">
<div class="notice-card__summary-title color-B45309 text-[16px] font-bold">
{{ summary.title }}
</div>
<div class="notice-card__summary-content color-D97706 text-[14px] font-900">
<div class="notice-card__summary-content color-D97706 text-[14px] font-bold">
{{ summary.content }}
</div>
<div class="notice-card__summary-footer flex flex-items-center flex-justify-between">
<div class="notice-card__summary-time color-D97706 text-[12px] font-900">
<div class="notice-card__summary-footer flex items-center flex-justify-between">
<div class="notice-card__summary-time color-D97706 text-[12px] font-bold">
{{ summary.publishTime }}
</div>
<div class="notice-card__summary-link color-B45309 text-[14px] font-900" :class="{ 'is-disabled': disabled }"
<div class="notice-card__summary-link color-B45309 text-[14px] font-bold" :class="{ 'is-disabled': disabled }"
@click="openDetail">
{{ summary.actionText }}
</div>
@@ -19,12 +19,12 @@
</div>
<div v-else class="notice-card__detail bg-white rounded-24 overflow-hidden w-full">
<div class="notice-card__detail-head flex flex-items-center">
<div class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
<div class="notice-card__detail-head flex items-center">
<div class="notice-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="notice-card__head-title color-1E293B text-[18px] font-900">
<div class="notice-card__head-title text-[#1e293b] text-[18px] font-bold">
{{ detail.navTitle }}
</div>
</div>
@@ -32,10 +32,10 @@
<image class="notice-card__image block w-full" :src="detail.image" mode="aspectFill" />
<div class="notice-card__detail-body">
<div class="notice-card__detail-title color-1E293B font-size-20 font-900">
<div class="notice-card__detail-title text-[#1e293b] font-size-20 font-bold">
{{ detail.title }}
</div>
<div class="notice-card__time-pill flex flex-items-center bg-F8FAFC color-475569 text-[13px] font-900">
<div class="notice-card__time-pill flex items-center bg-[#f8fafc] color-475569 text-[13px] font-bold">
<span class="notice-card__time-icon">{{ detail.timeIcon }}</span>
<span>{{ detail.publishTime }}</span>
</div>

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

@@ -13,7 +13,7 @@
<div class="pt-16 px-12 pb-24 ">
<div class="text-[#171717] text-[16px] font-weight-600">{{ detailTitle }}</div>
<div v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-[16px]">
<div v-if="publishTime" class="notice-time-tag flex flex-row items-center mt-[16px]">
<uni-icons type="clock" size="18" color="#5A6780" />
<span class="text-[#171717] text-[12px] font-weight-600 ml-8">发布时间：{{ publishTime }}</span>
</div>

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

@@ -2,9 +2,9 @@
<div class="w-full bg-white border-ff overflow-hidden rounded-20 flex flex-col">
<!-- 占位撑开 -->
<div class="w-vw"></div>
<div class="flex flex-items-center flex-justify-between p-[12px] " @click="openMap">
<div class="flex items-center flex-justify-between p-[12px] " @click="openMap">
<div class="rounded-[16px] p-16 bg-theme-color-50">
<div class="w-32 h-32 rounded-full bg-white flex flex-items-center flex-justify-center">
<div class="w-32 h-32 rounded-full bg-white flex items-center flex-justify-center">
<uni-icons type="location" size="16" color="#171717" />
</div>
</div>
@@ -12,7 +12,7 @@
<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">
<div class="ml-12 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" />
</div>
</div>

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>

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

@@ -2,26 +2,26 @@
<div class="poi-detail-card bg-white rounded-24 overflow-hidden">
<div class="poi-detail-card__hero relative">
<image class="poi-detail-card__image w-full h-full block rounded-18" :src="data.image" mode="aspectFill" />
<div class="poi-detail-card__badge flex flex-items-center gap-4 font-size-10 font-900">
<div class="poi-detail-card__badge flex items-center gap-4 font-size-10 font-bold">
<span class="poi-detail-card__badge-icon">⌖</span>
<span>{{ data.badge?.text }}</span>
</div>
</div>
<div class="poi-detail-card__body">
<div class="poi-detail-card__title color-1E293B font-size-24 font-900">
<div class="poi-detail-card__title text-[#1e293b] font-size-24 font-bold">
{{ data.title }}
</div>
<div class="poi-detail-card__tip flex flex-items-center gap-10">
<div class="poi-detail-card__spark color-047857 text-[18px] font-900">✦</div>
<div class="poi-detail-card__tip flex items-center gap-10">
<div class="poi-detail-card__spark color-047857 text-[18px] font-bold">✦</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 text-[16px] font-900"
class="poi-detail-card__button flex items-center flex-justify-center gap-8 text-white bg-0F172A text-[16px] font-bold"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<span class="poi-detail-card__button-icon">↗</span>
<span>{{ data.action?.text }}</span>

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

@@ -7,16 +7,16 @@
: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 text-[18px] font-900 truncate">
<div class="recommendation-list-card__name text-[#1e293b] text-[18px] font-bold truncate">
{{ item.title }}
</div>
<div
class="recommendation-list-card__distance flex flex-items-center gap-4 mt-4 color-94A3B8 text-[12px] font-800">
class="recommendation-list-card__distance 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-[12px] color-334155 text-[12px] font-900"
class="recommendation-list-card__button flex items-center flex-justify-center mt-[12px] text-[#334155] text-[12px] font-bold"
@click.stop="handleSelect(item)">
{{ getActionText(item) }}
</div>

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

@@ -1,15 +1,15 @@
<template>
<div class="route-plan-card w-full">
<div v-if="!detailOpen"
class="route-plan-card__summary flex flex-items-center bg-white rounded-24 overflow-hidden w-full"
class="route-plan-card__summary flex items-center bg-white rounded-24 overflow-hidden w-full"
: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-1">
<div class="route-plan-card__title color-1E293B text-[18px] font-900 truncate">
<div class="route-plan-card__title text-[#1e293b] text-[18px] font-bold truncate">
{{ 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 text-[12px] font-900"
<div class="route-plan-card__tags flex items-center">
<div v-for="tag in summaryTags" :key="tag.id || tag.text" class="route-plan-card__tag text-[12px] font-bold"
:class="getTagClass(tag.tone)">
{{ tag.text }}
</div>
@@ -21,15 +21,15 @@
</div>
<div v-else class="route-plan-card__detail bg-white rounded-24 overflow-hidden w-full">
<div class="route-plan-card__detail-head flex flex-items-center">
<div class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
<div class="route-plan-card__detail-head flex items-center">
<div class="route-plan-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="route-plan-card__detail-title color-1E293B text-[18px] font-900 truncate flex-1">
<div class="route-plan-card__detail-title text-[#1e293b] text-[18px] font-bold truncate flex-1">
{{ data.title }}
</div>
<div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 text-[12px] font-900">
<div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 text-[12px] font-bold">
{{ detail.badge }}
</div>
</div>
@@ -38,19 +38,19 @@
<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 text-[12px] font-900">
class="route-plan-card__node-number flex items-center flex-justify-center rounded-full color-047857 bg-ECFDF5 text-[12px] font-bold">
{{ index + 1 }}
</div>
<div class="route-plan-card__node bg-white rounded-20 flex flex-items-center">
<div class="route-plan-card__node bg-white rounded-20 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-1">
<div class="route-plan-card__node-title color-1E293B text-[16px] font-900 truncate">
<div class="route-plan-card__node-title text-[#1e293b] text-[16px] font-bold truncate">
{{ node.title }}
</div>
<div class="route-plan-card__node-desc color-94A3B8 text-[12px] font-800 truncate">
{{ node.description }}
</div>
<div v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-FFFBEB text-[12px] font-900">
<div v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-FFFBEB text-[12px] font-bold">
{{ 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 text-[12px] font-900">
class="route-plan-card__connector-chip flex items-center bg-[#f8fafc] rounded-full color-64748B text-[12px] font-bold">
<span class="route-plan-card__connector-icon">{{ connectors[index].icon }}</span>
<span>{{ connectors[index].text }}</span>
</div>
@@ -69,12 +69,12 @@
</template>
</div>
<div v-if="tips.length" class="route-plan-card__tips bg-F8FAFC rounded-20">
<div class="route-plan-card__tips-title color-64748B text-[14px] font-900">
<div v-if="tips.length" class="route-plan-card__tips bg-[#f8fafc] rounded-20">
<div class="route-plan-card__tips-title color-64748B text-[14px] font-bold">
{{ detail.tipsTitle }}
</div>
<div v-for="tip in tips" :key="tip"
class="route-plan-card__tip flex flex-items-center color-334155 text-[13px] font-900">
class="route-plan-card__tip flex items-center text-[#334155] text-[13px] font-bold">
<div class="route-plan-card__tip-dot rounded-full flex-shrink-0"></div>
<div>{{ tip }}</div>
</div>

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

@@ -4,16 +4,16 @@
<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 text-[18px] font-900"
class="scenic-image-card__expand flex items-center flex-justify-center rounded-full text-white text-[18px] font-bold"
@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 text-[18px] font-900 truncate">
<div v-if="caption.title" class="scenic-image-card__title text-white text-[18px] font-bold truncate">
{{ caption.title }}
</div>
<div v-if="caption.subtitle" class="scenic-image-card__subtitle text-white text-[14px] font-900 truncate">
<div v-if="caption.subtitle" class="scenic-image-card__subtitle text-white text-[14px] font-bold truncate">
{{ caption.subtitle }}
</div>
</div>

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

@@ -1,13 +1,13 @@
<template>
<div class="visual-action-row flex flex-items-center gap-[12px] p-[12px] bg-white rounded-18 "
<div class="visual-action-row 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 text-[18px] font-900"
class="visual-action-row__icon flex items-center flex-justify-center w-42 h-42 rounded-14 text-[18px] font-bold"
:class="toneClass">
<slot name="icon">{{ icon }}</slot>
</div>
<div class="visual-action-row__body flex-1">
<div class="visual-action-row__title color-1E293B text-[14px] font-900 truncate">{{ title }}</div>
<div class="visual-action-row__title text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</div>
<div v-if="subtitle" class="visual-action-row__subtitle truncate">
{{ subtitle }}
</div>

3
src/pages/home/components/SharedVisual/BadgePill.vue
View File

@@ -1,6 +1,5 @@
<template>
<div
class="visual-badge flex flex-items-center flex-justify-center rounded-[5px]0 font-size-10 font-800 whitespace-nowrap"
<div class="visual-badge flex items-center flex-justify-center rounded-[5px]0 font-size-10 font-800 whitespace-nowrap"
:class="toneClass">
<slot>{{ label }}</slot>
</div>

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

@@ -1,11 +1,12 @@
<template>
<CardShell variant="detail">
<div class="visual-detail__header flex flex-items-center px-16 border-bottom-F1F5F9">
<div class="visual-detail__back mr-8 rounded-full bg-F8FAFC color-334155 font-900 text-center"
<div class="min-h-[48px] flex items-center px-[16px] border-bottom-F1F5F9">
<div
class="w-[30px] h-[30px] text-[22px] leading-[28px] mr-[8px] rounded-full bg-[#f8fafc] text-[#334155] font-bold text-center"
@click="$emit('back')">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
<van-icon name="arrow-left" size="16" color="#CBD5E1"></van-icon>
</div>
<div class="visual-detail__title flex-1 color-1E293B text-[14px] font-900 truncate">{{ title }}</div>
<div class="flex-1 text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</div>
<BadgePill v-if="tag" :label="tag" :tone="tone" />
</div>
<slot />
@@ -33,7 +34,3 @@ defineProps({
defineEmits(["back"]);
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

15
src/pages/home/components/SharedVisual/styles/index.scss
View File

@@ -62,21 +62,6 @@
background: #f5f3ff;
}
.visual-detail__header {
min-height: 48px;
}
.visual-detail__back {
width: 30px;
height: 30px;
font-size: 22px;
line-height: 28px;
}
.visual-detail__title {
min-width: 0;
}
.visual-action-row {}
.visual-action-row__icon {}