zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update AigcPhotoCard, FaqHelpCard, MapNavigationCard, NoticeCard, ScenicImageCard with new layouts, styles, and mock data; enhance user interaction and visual appeal

Browse Source
This commit is contained in:
DEV_DSW
2026-05-13 16:28:57 +08:00
parent 9da046c314
commit 0afb690262
15 changed files with 514 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,24 +1,40 @@
<template>
<CardShell class="map-navigation-card" variant="soft">
<view class="map-navigation-card__map">
<MediaFrame class="map-navigation-card__image h-178" :src="data.mapImage" />
<view class="map-navigation-card__pin color-334155 font-size-10 font-900">{{ data.pinText }}</view>
<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"
/>
<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>
</view>
</view>
<view class="map-navigation-card__bar flex flex-items-center gap-12">
<view class="map-navigation-card__content flex flex-items-center">
<view class="map-navigation-card__info flex-full">
<view class="map-navigation-card__title color-1E293B font-size-14 font-900 ellipsis-1">{{ data.title }}</view>
<view class="map-navigation-card__distance color-94A3B8 font-size-11 font-800 ellipsis-1">{{ data.distance }}</view>
<view class="map-navigation-card__title color-1E293B font-size-18 font-900 ellipsis-1">
{{ data.title }}
</view>
<view class="map-navigation-card__distance color-94A3B8 font-size-14 font-900 ellipsis-1">
{{ data.distance }}
</view>
</view>
<view class="map-navigation-card__button rounded-50 color-white bg-0F172A font-size-12 font-900" :class="{ 'is-disabled': disabled }" @click="handleAction">
{{ data.buttonText }}
<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"
>
<text class="map-navigation-card__button-icon">{{ action.icon }}</text>
<text>{{ action.text }}</text>
</view>
</view>
</CardShell>
</view>
</template>
<script setup>
import CardShell from "../SharedVisual/CardShell.vue";
import MediaFrame from "../SharedVisual/MediaFrame.vue";
import { computed } from "vue";
const props = defineProps({
data: {
@@ -33,6 +49,9 @@ const props = defineProps({
const emit = defineEmits(["select", "action"]);
const badge = computed(() => props.data.badge || {});
const action = computed(() => props.data.action || {});
const handleAction = () => {
if (props.disabled) return;
emit("select", props.data);