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

2
src/pages/ChatMain/ChatCardMine/index.vue
View File

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

16
src/pages/ChatModule/FacilityLocationCard/index.vue
View File

@@ -1,14 +1,10 @@
<template>
<view class="facility-location-card bg-white rounded-24 overflow-hidden w-full">
<image
class="facility-location-card__image block w-full"
:src="data.image"
mode="aspectFill"
/>
<image class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" />
<view class="facility-location-card__body px-24 pb-24">
<view class="facility-location-card__title-row flex flex-items-center">
<view class="facility-location-card__badge color-2563EB bg-EFF6FF font-size-12 font-900">
<view class="facility-location-card__badge color-2563EB bg-[#eff6ff] font-size-12 font-900">
{{ type.text }}
</view>
<view class="facility-location-card__title color-1E293B font-size-18 font-900 ellipsis-1">
@@ -21,7 +17,7 @@
<text>{{ distance.text }}</text>
</view>
<view class="facility-location-card__location bg-F8FAFC rounded-20">
<view class="facility-location-card__location bg-[#f8fafc] rounded-20">
<view class="facility-location-card__location-label flex flex-items-center color-64748B font-size-13 font-900">
<text class="facility-location-card__location-dot">{{ location.icon }}</text>
<text>{{ location.label }}</text>
@@ -32,10 +28,8 @@
</view>
<view
class="facility-location-card__button flex flex-items-center flex-justify-center bg-0F172A color-white font-size-18 font-900"
:class="{ 'is-disabled': disabled }"
@click="handleAction"
>
class="facility-location-card__button flex flex-items-center flex-justify-center bg-[#0f172a] color-white font-size-18 font-900"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<text class="facility-location-card__button-icon">{{ action.icon }}</text>
<text>{{ action.text }}</text>
</view>

103
src/pages/ChatModule/LongTextGuideCard/index.vue
View File

@@ -1,17 +1,10 @@
<template>
<view class="long-text-guide-card w-full">
<view v-if="mode === 'list'" class="long-text-guide-card__list w-full">
<view
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)"
>
<view
class="long-text-guide-card__badge font-size-12 font-900"
:class="`is-${item.badgeTone}`"
>
<view 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)">
<view class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
{{ item.badge }}
</view>
<view class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
@@ -29,76 +22,49 @@
<view v-else class="long-text-guide-card__detail-card bg-white rounded-24 border-box overflow-hidden">
<view class="long-text-guide-card__detail-header flex flex-items-center border-bottom-F1F5F9">
<view
class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
@click="closeDetail"
>
<view class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="long-text-guide-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1">
{{ activeItem.title }}
</view>
<view
class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
:class="`is-${activeItem.badgeTone}`"
>
<view class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
:class="`is-${activeItem.badgeTone}`">
{{ activeItem.badge }}
</view>
</view>
<view class="long-text-guide-card__rich-body">
<view
v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage"
:key="`before-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500"
>
<template
v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`"
>
<text
v-if="segment.highlight"
class="long-text-guide-card__highlight font-800"
>
<view v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage" :key="`before-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`">
<text v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
{{ segment.text }}
</text>
<text v-else>{{ segment.text }}</text>
</template>
</view>
<image
v-if="activeItem.image"
class="long-text-guide-card__main-image w-full rounded-14 block"
:src="activeItem.image"
mode="aspectFill"
/>
<image v-if="activeItem.image" class="long-text-guide-card__main-image w-full rounded-14 block"
:src="activeItem.image" mode="aspectFill" />
<view class="long-text-guide-card__section-title color-1E293B font-size-16 font-900">
{{ activeItem.sectionTitle }}
</view>
<view class="long-text-guide-card__tip-block bg-ECFDF5">
<view
v-for="(tip, index) in activeItem.tips || []"
:key="tip"
class="long-text-guide-card__tip color-047857 font-size-14 font-800"
>
<view class="long-text-guide-card__tip-block bg-[#ecfdf5]">
<view v-for="(tip, index) in activeItem.tips || []" :key="tip"
class="long-text-guide-card__tip color-047857 font-size-14 font-800">
{{ index + 1 }} {{ tip }}
</view>
</view>
<view
v-for="(paragraph, paragraphIndex) in paragraphsAfterTips"
:key="`after-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500"
>
<template
v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`"
>
<text
v-if="segment.highlight"
class="long-text-guide-card__highlight font-800"
>
<view v-for="(paragraph, paragraphIndex) in paragraphsAfterTips" :key="`after-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`">
<text v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
{{ segment.text }}
</text>
<text v-else>{{ segment.text }}</text>
@@ -112,11 +78,8 @@
</view>
<view class="long-text-guide-card__map-card rounded-16 overflow-hidden">
<view class="long-text-guide-card__map-image-wrap relative">
<image
class="long-text-guide-card__map-image w-full block"
:src="activeItem.action.image"
mode="aspectFill"
/>
<image class="long-text-guide-card__map-image w-full block" :src="activeItem.action.image"
mode="aspectFill" />
<view class="long-text-guide-card__map-tag color-white font-size-10 font-900">
{{ activeItem.action.tag }}
</view>
@@ -126,10 +89,8 @@
<view class="color-1E293B font-size-15 font-900">{{ activeItem.action.title }}</view>
<view class="color-94A3B8 font-size-12 font-800 mt-2">{{ activeItem.action.subtitle }}</view>
</view>
<view
class="long-text-guide-card__nav-btn color-white bg-0F172A font-size-14 font-900"
@click="handleAction(activeItem)"
>
<view class="long-text-guide-card__nav-btn color-white bg-[#0f172a] font-size-14 font-900"
@click="handleAction(activeItem)">
{{ activeItem.action.buttonText }}
</view>
</view>
@@ -141,12 +102,10 @@
{{ activeItem.action.label }}
</view>
<view class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">
<image
class="long-text-guide-card__photo-image w-full block"
:src="activeItem.action.image"
mode="aspectFill"
/>
<view class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900">
<image class="long-text-guide-card__photo-image w-full block" :src="activeItem.action.image"
mode="aspectFill" />
<view
class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900">
↗
</view>
</view>

12
src/pages/ChatModule/MapNavigationCard/index.vue
View File

@@ -1,11 +1,7 @@
<template>
<view class="map-navigation-card bg-white rounded-24 overflow-hidden w-full">
<view class="map-navigation-card__media">
<image
class="map-navigation-card__image block w-full"
:src="data.image"
mode="aspectFill"
/>
<image class="map-navigation-card__image block w-full" :src="data.image" mode="aspectFill" />
<view class="map-navigation-card__badge flex flex-items-center color-white font-size-12 font-900">
<text class="map-navigation-card__badge-icon">{{ badge.icon }}</text>
<text>{{ badge.text }}</text>
@@ -22,10 +18,8 @@
</view>
</view>
<view
class="map-navigation-card__button flex flex-items-center flex-justify-center bg-0F172A color-white font-size-18 font-900"
:class="{ 'is-disabled': disabled }"
@click="handleAction"
>
class="map-navigation-card__button flex flex-items-center flex-justify-center bg-[#0f172a] color-white font-size-18 font-900"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<text class="map-navigation-card__button-icon">{{ action.icon }}</text>
<text>{{ action.text }}</text>
</view>

37
src/pages/ChatModule/NoticeCard/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<view class="notice-card w-full">
<view v-if="!detailOpen" class="notice-card__summary bg-FFFBEB rounded-24 w-full">
<view v-if="!detailOpen" class="notice-card__summary bg-[#fffbeb] rounded-24 w-full">
<view class="notice-card__summary-title color-B45309 font-size-16 font-900">
{{ summary.title }}
</view>
@@ -11,11 +11,8 @@
<view class="notice-card__summary-time color-D97706 font-size-12 font-900">
{{ summary.publishTime }}
</view>
<view
class="notice-card__summary-link color-B45309 font-size-14 font-900"
:class="{ 'is-disabled': disabled }"
@click="openDetail"
>
<view class="notice-card__summary-link color-B45309 font-size-14 font-900" :class="{ 'is-disabled': disabled }"
@click="openDetail">
{{ summary.actionText }}
</view>
</view>
@@ -23,10 +20,8 @@
<view v-else class="notice-card__detail bg-white rounded-24 overflow-hidden w-full">
<view class="notice-card__detail-head flex flex-items-center">
<view
class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail"
>
<view class="notice-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="notice-card__head-title color-1E293B font-size-18 font-900">
@@ -34,31 +29,21 @@
</view>
</view>
<image
class="notice-card__image block w-full"
:src="detail.image"
mode="aspectFill"
/>
<image class="notice-card__image block w-full" :src="detail.image" mode="aspectFill" />
<view class="notice-card__detail-body">
<view class="notice-card__detail-title color-1E293B font-size-20 font-900">
{{ detail.title }}
</view>
<view class="notice-card__time-pill flex flex-items-center bg-F8FAFC color-475569 font-size-13 font-900">
<view class="notice-card__time-pill flex flex-items-center bg-[#f8fafc] color-475569 font-size-13 font-900">
<text class="notice-card__time-icon">{{ detail.timeIcon }}</text>
<text>{{ detail.publishTime }}</text>
</view>
<view class="notice-card__divider"></view>
<view
v-for="paragraph in paragraphs"
:key="paragraph.id"
class="notice-card__paragraph color-475569 font-size-14 font-800"
>
<text
v-for="segment in paragraph.segments"
:key="segment.text"
:class="{ 'notice-card__strong': segment.strong }"
>
<view v-for="paragraph in paragraphs" :key="paragraph.id"
class="notice-card__paragraph color-475569 font-size-14 font-800">
<text v-for="segment in paragraph.segments" :key="segment.text"
:class="{ 'notice-card__strong': segment.strong }">
{{ segment.text }}
</text>
</view>

2
src/pages/ChatModule/OpenMapComponent/index.vue
View File

@@ -12,7 +12,7 @@
<view class="font-color-900 font-size-14">打开导览地图</view>
<view class="font-color-500 font-size-12 mt-6">距你 {{ distance }} · 步行 {{ walk }}</view>
</view>
<view class="ml-[12px] flex flex-items-center flex-justify-center w-32 h-32 rounded-full bg-F2F5F8">
<view class="ml-[12px] 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" />
</view>
</view>

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] || "";
};

12
src/pages/ChatModule/PoiDetailCard/index.vue
View File

@@ -1,11 +1,7 @@
<template>
<view class="poi-detail-card bg-white rounded-24 border-box overflow-hidden">
<view class="poi-detail-card__hero relative">
<image
class="poi-detail-card__image w-full h-full block rounded-18"
:src="data.image"
mode="aspectFill"
/>
<image class="poi-detail-card__image w-full h-full block rounded-18" :src="data.image" mode="aspectFill" />
<view class="poi-detail-card__badge flex flex-items-center gap-4 font-size-10 font-900">
<text class="poi-detail-card__badge-icon">⌖</text>
<text>{{ data.badge?.text }}</text>
@@ -25,10 +21,8 @@
</view>
<view
class="poi-detail-card__button flex flex-items-center flex-justify-center gap-8 color-white bg-0F172A font-size-16 font-900"
:class="{ 'is-disabled': disabled }"
@click="handleAction"
>
class="poi-detail-card__button flex flex-items-center flex-justify-center gap-8 color-white bg-[#0f172a] font-size-16 font-900"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<text class="poi-detail-card__button-icon">↗</text>
<text>{{ data.action?.text }}</text>
</view>

65
src/pages/ChatModule/RoutePlanCard/index.vue
View File

@@ -1,27 +1,16 @@
<template>
<view class="route-plan-card w-full">
<view
v-if="!detailOpen"
<view v-if="!detailOpen"
class="route-plan-card__summary flex flex-items-center bg-white rounded-24 overflow-hidden w-full"
:class="{ 'is-disabled': disabled }"
@click="openDetail"
>
<image
class="route-plan-card__cover block flex-shrink-0"
:src="data.image"
mode="aspectFill"
/>
:class="{ 'is-disabled': disabled }" @click="openDetail">
<image class="route-plan-card__cover block flex-shrink-0" :src="data.image" mode="aspectFill" />
<view class="route-plan-card__body flex-full">
<view class="route-plan-card__title color-1E293B font-size-18 font-900 ellipsis-1">
{{ data.title }}
</view>
<view class="route-plan-card__tags flex flex-items-center">
<view
v-for="tag in summaryTags"
:key="tag.id || tag.text"
class="route-plan-card__tag font-size-12 font-900"
:class="getTagClass(tag.tone)"
>
<view v-for="tag in summaryTags" :key="tag.id || tag.text" class="route-plan-card__tag font-size-12 font-900"
:class="getTagClass(tag.tone)">
{{ tag.text }}
</view>
</view>
@@ -33,36 +22,27 @@
<view v-else class="route-plan-card__detail bg-white rounded-24 overflow-hidden w-full">
<view class="route-plan-card__detail-head flex flex-items-center">
<view
class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail"
>
<view class="route-plan-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="route-plan-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
{{ data.title }}
</view>
<view class="route-plan-card__detail-badge color-047857 bg-ECFDF5 font-size-12 font-900">
<view class="route-plan-card__detail-badge color-047857 bg-[#ecfdf5] font-size-12 font-900">
{{ detail.badge }}
</view>
</view>
<view class="route-plan-card__timeline">
<template v-for="(node, index) in nodes" :key="node.id || node.title">
<view
class="route-plan-card__node-wrap"
:class="{ 'is-disabled': disabled }"
@click="handleSelect(node)"
>
<view class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-ECFDF5 font-size-12 font-900">
<view class="route-plan-card__node-wrap" :class="{ 'is-disabled': disabled }" @click="handleSelect(node)">
<view
class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-[#ecfdf5] font-size-12 font-900">
{{ index + 1 }}
</view>
<view class="route-plan-card__node bg-white rounded-20 flex flex-items-center">
<image
class="route-plan-card__node-image block flex-shrink-0"
:src="node.image"
mode="aspectFill"
/>
<image class="route-plan-card__node-image block flex-shrink-0" :src="node.image" mode="aspectFill" />
<view class="route-plan-card__node-body flex-full">
<view class="route-plan-card__node-title color-1E293B font-size-16 font-900 ellipsis-1">
{{ node.title }}
@@ -70,10 +50,7 @@
<view class="route-plan-card__node-desc color-94A3B8 font-size-12 font-800 ellipsis-1">
{{ node.description }}
</view>
<view
v-if="node.tag"
class="route-plan-card__node-tag color-D97706 bg-FFFBEB font-size-12 font-900"
>
<view v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-[#fffbeb] font-size-12 font-900">
{{ node.tag }}
</view>
</view>
@@ -83,7 +60,8 @@
<view v-if="connectors[index]" class="route-plan-card__connector">
<view class="route-plan-card__connector-line"></view>
<view class="route-plan-card__connector-arrow"></view>
<view class="route-plan-card__connector-chip flex flex-items-center bg-F8FAFC rounded-full color-64748B font-size-12 font-900">
<view
class="route-plan-card__connector-chip flex flex-items-center bg-[#f8fafc] rounded-full color-64748B font-size-12 font-900">
<text class="route-plan-card__connector-icon">{{ connectors[index].icon }}</text>
<text>{{ connectors[index].text }}</text>
</view>
@@ -91,15 +69,12 @@
</template>
</view>
<view v-if="tips.length" class="route-plan-card__tips bg-F8FAFC rounded-20">
<view v-if="tips.length" class="route-plan-card__tips bg-[#f8fafc] rounded-20">
<view class="route-plan-card__tips-title color-64748B font-size-14 font-900">
{{ detail.tipsTitle }}
</view>
<view
v-for="tip in tips"
:key="tip"
class="route-plan-card__tip flex flex-items-center color-334155 font-size-13 font-900"
>
<view v-for="tip in tips" :key="tip"
class="route-plan-card__tip flex flex-items-center color-334155 font-size-13 font-900">
<view class="route-plan-card__tip-dot rounded-full flex-shrink-0"></view>
<view>{{ tip }}</view>
</view>
@@ -132,8 +107,8 @@ const connectors = computed(() => detail.value.connectors || []);
const tips = computed(() => detail.value.tips || []);
const getTagClass = (tone) => {
if (tone === "green") return "color-047857 bg-ECFDF5";
return "color-64748B bg-F1F5F9";
if (tone === "green") return "color-047857 bg-[#ecfdf5]";
return "color-64748B bg-[#f1f5f9]";
};
const openDetail = () => {

3
src/pages/ChatModule/SharedVisual/DetailShell.vue
View File

@@ -1,7 +1,8 @@
<template>
<CardShell variant="detail">
<view class="visual-detail__header flex flex-items-center px-16 border-box border-bottom-F1F5F9">
<view class="visual-detail__back mr-8 rounded-full bg-F8FAFC color-334155 font-900 text-center" @click="$emit('back')">
<view class="visual-detail__back mr-8 rounded-full bg-[#f8fafc] color-334155 font-900 text-center"
@click="$emit('back')">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="visual-detail__title flex-full color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</view>

9
src/pages/ChatModule/SharedVisual/MediaFrame.vue
View File

@@ -1,11 +1,6 @@
<template>
<view class="visual-media relative w-full overflow-hidden bg-F1F5F9" :class="{ 'rounded-16': rounded }">
<image
v-if="src"
class="visual-media__image block w-full h-full"
:src="src"
:mode="mode"
/>
<view class="visual-media relative w-full overflow-hidden bg-[#f1f5f9]" :class="{ 'rounded-16': rounded }">
<image v-if="src" class="visual-media__image block w-full h-full" :src="src" :mode="mode" />
<view v-else class="visual-media__empty block w-full h-full"></view>
<slot />
</view>

28
src/pages/goods/album/index.vue
View File

@@ -1,27 +1,17 @@
<template>
<view class="bg-F5F7FA flex flex-col h-screen overflow-hidden">
<view class="bg-[#f5f7fa] flex flex-col h-screen overflow-hidden">
<TopNavBar title="房间相册" backgroundColor="transparent" />
<view class="p-8">
<text class="ml-4 font-size-18 color-171717 font-500"
>全部({{ albumList.length }})</text
>
<text class="ml-4 font-size-18 color-171717 font-500">全部({{ albumList.length }})</text>
</view>
<scroll-view scroll-y class="scroll-container overflow-auto">
<view class="pl-4 pr-4 pb-24">
<view class="grid-container">
<view
class="album-item"
v-for="(item, index) in albumList"
:key="index"
>
<view class="album-item" v-for="(item, index) in albumList" :key="index">
<view class="album-image-wrapper">
<image
class="album-image"
:src="item.photoUrl"
mode="aspectFill"
@click="handlePreview(item.photoUrl)"
></image>
<image class="album-image" :src="item.photoUrl" mode="aspectFill" @click="handlePreview(item.photoUrl)">
</image>
<view class="album-title">{{ item.name }}</view>
</view>
</view>
@@ -87,11 +77,9 @@ const handlePreview = (photoUrl) => {
left: 0;
right: 0;
padding: 8px;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%
);
background: linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%);
color: #fff;
font-size: 14px;
font-weight: 500;

58
src/pages/goods/index.vue
View File

@@ -1,20 +1,12 @@
<template>
<view class="goods-container bg-gray">
<TopNavBar
:title="navOpacity < 0.5 ? '' : '商品详情'"
:background="`rgba(217, 238, 255, ${navOpacity})`"
<view class="goods-container bg-[#f5f5f5]">
<TopNavBar :title="navOpacity < 0.5 ? '' : '商品详情'" :background="`rgba(217, 238, 255, ${navOpacity})`"
:titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
:backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
/>
:backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'" />
<!-- 滚动区域 -->
<scroll-view class="content-wrapper" scroll-y @scroll="handleScroll">
<ImageSwiper
:border-radius="0"
:height="300"
:images="goodsData.commodityPhotoList"
thumbnailBottom="42px"
/>
<ImageSwiper :border-radius="0" :height="300" :images="goodsData.commodityPhotoList" thumbnailBottom="42px" />
<view class="goods-content">
<!-- 商品信息组件 -->
@@ -24,21 +16,17 @@
<LocationCard :orderData="goodsData" />
<!-- 日期选择区域 -->
<DateSelector
v-if="goodsData.orderType == 0"
@showCalendar="showCalendar"
:checkInDate="selectedDate.startDate"
:checkOutDate="selectedDate.endDate"
:checkInDay="''"
:checkOutDay="''"
:nights="selectedDate.totalDays"
/>
<DateSelector v-if="goodsData.orderType == 0" @showCalendar="showCalendar" :checkInDate="selectedDate.startDate"
:checkOutDate="selectedDate.endDate" :checkInDay="''" :checkOutDay="''" :nights="selectedDate.totalDays" />
<!-- 商品套餐组件 -->
<GoodPackage v-if="goodsData.orderType != 0 && goodsData.commodityPackageConfig && goodsData.commodityPackageConfig.length > 0" :goodsData="goodsData" />
<GoodPackage
v-if="goodsData.orderType != 0 && goodsData.commodityPackageConfig && goodsData.commodityPackageConfig.length > 0"
:goodsData="goodsData" />
<!-- 商品设施组件 -->
<GoodFacility v-if="goodsData.commodityEquipment && goodsData.commodityEquipment.length > 0" :goodsData="goodsData" />
<GoodFacility v-if="goodsData.commodityEquipment && goodsData.commodityEquipment.length > 0"
:goodsData="goodsData" />
<!-- 商品详情组件 -->
<GoodDetail :goodsData="goodsData" />
@@ -47,33 +35,19 @@
<!-- 立即抢购 -->
<view class="footer border-top">
<view
class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
>
<view class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8">
{{ calculatedTotalPrice }}
</view>
<view
class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8"
@click="navigateToPay(goodsData)"
>
<image
class="icon"
src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
/>
<view class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8" @click="navigateToPay(goodsData)">
<image class="icon" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
<text class="font-size-16 font-500 color-white">立即预定</text>
</view>
</view>
<!-- 日历组件 -->
<Calender
:visible="calendarVisible"
mode="range"
:range-require-price="true"
:price-data="priceData"
@close="handleCalendarClose"
@range-select="handleDateSelect"
/>
<Calender :visible="calendarVisible" mode="range" :range-require-price="true" :price-data="priceData"
@close="handleCalendarClose" @range-select="handleDateSelect" />
</view>
</template>

73
src/pages/test/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<scroll-view class="test-page h-screen bg-F5F7FA" scroll-y>
<scroll-view class="test-page h-screen bg-[#f5f7fa]" scroll-y>
<view class="test-page__header">
<view class="test-page__title">ChatModule 视觉组件预览</view>
<view class="test-page__subtitle">组件使用 props mock 数据渲染，点击事件仅打印日志。</view>
@@ -7,98 +7,67 @@
<view class="test-page__section">
<view class="test-page__section-title">LongTextGuideCard</view>
<LongTextGuideCard
:data="longTextGuideCardMock"
@select="handleEvent('LongTextGuideCard', 'select', $event)"
<LongTextGuideCard :data="longTextGuideCardMock" @select="handleEvent('LongTextGuideCard', 'select', $event)"
@back="handleEvent('LongTextGuideCard', 'back', $event)"
@action="handleEvent('LongTextGuideCard', 'action', $event)"
/>
@action="handleEvent('LongTextGuideCard', 'action', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">PoiDetailCard</view>
<PoiDetailCard
:data="poiDetailCardMock"
@action="handleEvent('PoiDetailCard', 'action', $event)"
/>
<PoiDetailCard :data="poiDetailCardMock" @action="handleEvent('PoiDetailCard', 'action', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">RecommendationListCard</view>
<RecommendationListCard
:data="recommendationListCardMock"
@select="handleEvent('RecommendationListCard', 'select', $event)"
/>
<RecommendationListCard :data="recommendationListCardMock"
@select="handleEvent('RecommendationListCard', 'select', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">PoiCompareCard</view>
<PoiCompareCard
:data="poiCompareCardMock"
@select="handleEvent('PoiCompareCard', 'select', $event)"
@back="handleEvent('PoiCompareCard', 'back', $event)"
/>
<PoiCompareCard :data="poiCompareCardMock" @select="handleEvent('PoiCompareCard', 'select', $event)"
@back="handleEvent('PoiCompareCard', 'back', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">RoutePlanCard</view>
<RoutePlanCard
:data="routePlanCardMock"
@select="handleEvent('RoutePlanCard', 'select', $event)"
@back="handleEvent('RoutePlanCard', 'back', $event)"
/>
<RoutePlanCard :data="routePlanCardMock" @select="handleEvent('RoutePlanCard', 'select', $event)"
@back="handleEvent('RoutePlanCard', 'back', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">FacilityLocationCard</view>
<FacilityLocationCard
:data="facilityLocationCardMock"
@select="handleEvent('FacilityLocationCard', 'select', $event)"
/>
<FacilityLocationCard :data="facilityLocationCardMock"
@select="handleEvent('FacilityLocationCard', 'select', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">ScenicImageCard</view>
<ScenicImageCard
:data="scenicImageCardMock"
@select="handleEvent('ScenicImageCard', 'select', $event)"
@action="handleEvent('ScenicImageCard', 'action', $event)"
/>
<ScenicImageCard :data="scenicImageCardMock" @select="handleEvent('ScenicImageCard', 'select', $event)"
@action="handleEvent('ScenicImageCard', 'action', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">MapNavigationCard</view>
<MapNavigationCard
:data="mapNavigationCardMock"
@select="handleEvent('MapNavigationCard', 'select', $event)"
@action="handleEvent('MapNavigationCard', 'action', $event)"
/>
<MapNavigationCard :data="mapNavigationCardMock" @select="handleEvent('MapNavigationCard', 'select', $event)"
@action="handleEvent('MapNavigationCard', 'action', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">AigcPhotoCard</view>
<AigcPhotoCard
:data="aigcPhotoCardMock"
@select="handleEvent('AigcPhotoCard', 'select', $event)"
@action="handleEvent('AigcPhotoCard', 'action', $event)"
/>
<AigcPhotoCard :data="aigcPhotoCardMock" @select="handleEvent('AigcPhotoCard', 'select', $event)"
@action="handleEvent('AigcPhotoCard', 'action', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">FaqHelpCard</view>
<FaqHelpCard
:data="faqHelpCardMock"
@select="handleEvent('FaqHelpCard', 'select', $event)"
/>
<FaqHelpCard :data="faqHelpCardMock" @select="handleEvent('FaqHelpCard', 'select', $event)" />
</view>
<view class="test-page__section">
<view class="test-page__section-title">NoticeCard</view>
<NoticeCard
:data="noticeCardMock"
@select="handleEvent('NoticeCard', 'select', $event)"
@back="handleEvent('NoticeCard', 'back', $event)"
/>
<NoticeCard :data="noticeCardMock" @select="handleEvent('NoticeCard', 'select', $event)"
@back="handleEvent('NoticeCard', 'back', $event)" />
</view>
</scroll-view>
</template>