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

42
src/pages/ChatModule/AigcPhotoCard/index.vue
View File

@@ -1,31 +1,27 @@
<template>
<CardShell class="aigc-photo-card p-16" variant="soft">
<view class="aigc-photo-card__body flex flex-items-center gap-12">
<view class="aigc-photo-card__icon flex flex-items-center flex-justify-center w-44 h-44 rounded-16 bg-CCFBF1 font-size-22 font-900">{{ data.icon }}</view>
<view class="aigc-photo-card__content flex-full">
<view class="aigc-photo-card__title font-size-16 font-900">{{ data.title }}</view>
<view class="aigc-photo-card__subtitle color-0F766E font-size-11 font-700">{{ data.subtitle }}</view>
</view>
<view
class="aigc-photo-card relative rounded-24 overflow-hidden w-full"
:class="{ 'is-disabled': disabled }"
@click="handleAction"
>
<image
class="aigc-photo-card__image block w-full"
:src="data.cover"
mode="aspectFill"
/>
<view class="aigc-photo-card__shade"></view>
<view class="aigc-photo-card__play flex flex-items-center flex-justify-center rounded-full">
<view class="aigc-photo-card__triangle"></view>
</view>
<view class="aigc-photo-card__preview grid grid-cols-3 gap-8 mt-14">
<MediaFrame
v-for="(image, index) in images"
:key="image || index"
class="aigc-photo-card__image h-82 rounded-14"
:src="image"
/>
<view class="aigc-photo-card__title color-white font-size-16 font-900">
{{ data.title }}
</view>
<view class="aigc-photo-card__button mt-14 p-12 rounded-16 color-white bg-0F766E font-size-13 font-900 text-center" :class="{ 'is-disabled': disabled }" @click="handleAction">
{{ data.buttonText }}
</view>
</CardShell>
</view>
</template>
<script setup>
import { computed } from "vue";
import CardShell from "../SharedVisual/CardShell.vue";
import MediaFrame from "../SharedVisual/MediaFrame.vue";
const props = defineProps({
data: {
type: Object,
@@ -39,8 +35,6 @@ const props = defineProps({
const emit = defineEmits(["select", "action"]);
const images = computed(() => props.data.images || []);
const handleAction = () => {
if (props.disabled) return;
emit("select", props.data);