ca680ab41b
- Add new HeritageDiscoverySection and HeritageQuickPrompts components for dedicated heritage discovery view - Implement reusable AigcConsentDialog component for AI service user agreement prompts - Update Discovery page to toggle between explore and heritage tab layouts - Refactor legacy CardSwiper component into generic ExploreCards - Adjust ChatMainList layout to include home hero sprite animation and restructure welcome section - Refine NoticeMessage component styling and layout for better consistency - Add build best practices guidance to AGENTS.md documentation - Clean up minor config whitespace and formatting issues across files
81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<template>
|
|
<view class="explore-cards">
|
|
<scroll-view
|
|
class="explore-scroll"
|
|
scroll-x
|
|
show-scrollbar="false"
|
|
>
|
|
<view class="explore-track">
|
|
<view
|
|
v-for="(item, index) in normalizedList"
|
|
:key="getItemKey(item, index)"
|
|
class="explore-card"
|
|
:class="`is-${item.tone}`"
|
|
hover-class="is-pressed"
|
|
hover-stay-time="80"
|
|
@tap="handleCardTap(item.raw, index)"
|
|
>
|
|
<image
|
|
v-if="item.coverImage"
|
|
class="explore-card-image"
|
|
:src="item.coverImage"
|
|
mode="aspectFill"
|
|
/>
|
|
|
|
<view class="explore-card-gradient" />
|
|
|
|
<view class="explore-card-content">
|
|
<text class="explore-card-tag ellipsis-1">{{ item.tag }}</text>
|
|
<text class="explore-card-title ellipsis-1">{{ item.title }}</text>
|
|
<text v-if="item.subTitle" class="explore-card-desc ellipsis-1">
|
|
{{ item.subTitle }}
|
|
</text>
|
|
</view>
|
|
|
|
<view class="explore-card-arrow">
|
|
<text>→</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["didSelectItem"]);
|
|
|
|
const FALLBACK_TAGS = ["MUST VISIT", "CULTURE", "ADVENTURE", "NIGHTLIFE"];
|
|
const TONES = ["default", "culture", "adventure", "nightlife"];
|
|
|
|
const normalizedList = computed(() =>
|
|
props.list.map((item, index) => ({
|
|
raw: item,
|
|
id: item.id ?? item.tabContentId,
|
|
title: item.title || "",
|
|
subTitle: item.subTitle || "",
|
|
tag: item.tag || FALLBACK_TAGS[index % FALLBACK_TAGS.length],
|
|
coverImage: item.coverImage || "",
|
|
tone: TONES[index % TONES.length],
|
|
}))
|
|
);
|
|
|
|
const getItemKey = (item, index) => item.id ?? item.title ?? index;
|
|
|
|
const handleCardTap = (item, index) => {
|
|
emit("didSelectItem", item, index);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|