79770b03d4
Replace `flex-shrink-0` with `shrink-0` across components for consistency Migrate legacy color utility classes to inline hex Tailwind classes Replace background color utility classes with inline hex equivalents Delete unused SCSS style files for ScenicImageCard and RoutePlanCard Refactor RoutePlanCard to use inline Tailwind styles instead of external CSS Update icon component usage in RoutePlanCard to match project standards
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="color-CBD5E1 text-[12px] font-800">{{ 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>
|