86f8e9adec
Replace custom CSS utility classes with Tailwind arbitrary value classes (e.g. color-CBD5E1 → text-[#cbd5e1]). Remove unused standalone SCSS style files for three home components. Swap legacy uni-icons to van-icon for arrow icons in LongTextGuideCard, and fix event emitter usage in DiscoveryCradContentList to use the imported events utility.
106 lines
3.0 KiB
Vue
106 lines
3.0 KiB
Vue
<template>
|
|
<div class="w-full bg-white border-ff overflow-hidden rounded-[20px] flex flex-col">
|
|
<!-- 占位撑开 -->
|
|
<div class="w-full"></div>
|
|
<div class="flex flex-col px-[16px] pt-16 pb-[12px] " @click="openDetail(item)">
|
|
|
|
<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 text-[#1e293b] text-[18px] font-bold">
|
|
{{ item.title }}
|
|
</div>
|
|
<div class="long-text-guide-card__summary-text text-[#94A3B8] text-[14px] font-medium ellipsis-2">
|
|
{{ item.summary }}
|
|
</div>
|
|
<div class="long-text-guide-card__summary-footer flex items-center justify-between">
|
|
<span class="text-[#cbd5e1] text-[12px] font-bold">{{ item.footer }}</span>
|
|
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, computed } from "vue";
|
|
import { getLongTextGuideDetailRoute } from "./detailRoutes.mjs";
|
|
const props = defineProps({
|
|
componentName: {
|
|
type: String,
|
|
default: 'longTextCard',
|
|
},
|
|
});
|
|
|
|
const longTextCard = {
|
|
type: 'longTextCard',
|
|
badge: "漂流攻略",
|
|
badgeTone: "amber",
|
|
title: "下水之前，先听小七唠两句",
|
|
summary: "卧龙潭漂流值得冲，全程四十分钟、三段激流，但晕水的人要掂量…",
|
|
footer: "点击查看完整攻略",
|
|
}
|
|
|
|
const longTextCardScenicSpot = {
|
|
type: 'longTextCardScenicSpot',
|
|
badge: "景点故事",
|
|
badgeTone: "green",
|
|
title: "小七孔古桥 · 走了三百年的石拱",
|
|
summary: "小七孔古桥是一座三百岁的七孔石桥，小七孔的名字就从这儿来…",
|
|
footer: "点击查看完整介绍",
|
|
}
|
|
|
|
const longTextCardRoute = {
|
|
type: 'longTextCardRoute',
|
|
badge: "路线指引",
|
|
badgeTone: "violet",
|
|
title: "漂完卧龙潭，顺道去鸳鸯湖",
|
|
summary: "卧龙潭到鸳鸯湖坐观光车约二十分钟。要紧的是鸳鸯湖分上下湖…",
|
|
footer: "点击查看完整路线",
|
|
}
|
|
|
|
const longTextCardSnap = {
|
|
type: 'longTextCardSnap',
|
|
badge: "拍照攻略",
|
|
badgeTone: "blue",
|
|
title: "鸳鸯湖玻璃船，这样拍才不亏",
|
|
summary: "玻璃船拍照，关键是拍水下那抹通透的绿，顺光时段最出片…",
|
|
footer: "点击查看完整攻略",
|
|
}
|
|
|
|
const item = computed(() => {
|
|
switch (props.componentName) {
|
|
case 'longTextCard':
|
|
return longTextCard;
|
|
case 'longTextCardSnap':
|
|
return longTextCardSnap;
|
|
case 'longTextCardRoute':
|
|
return longTextCardRoute;
|
|
case 'longTextCardScenicSpot':
|
|
return longTextCardScenicSpot;
|
|
default:
|
|
return longTextCard;
|
|
}
|
|
});
|
|
|
|
const openDetail = (item) => {
|
|
const url = getLongTextGuideDetailRoute(item.type);
|
|
if (!url) {
|
|
uni.showToast({
|
|
title: "暂未配置详情页",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
uni.navigateTo({ url });
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|