4af4255610
remove the unused src/static/scss/width.scss file and its import from index.scss, replace all existing custom width utility class usages with the equivalent Tailwind arbitrary width syntax
118 lines
3.6 KiB
Vue
118 lines
3.6 KiB
Vue
<template>
|
|
<view class="w-full bg-white border-ff overflow-hidden rounded-[20px] flex flex-col">
|
|
<!-- 占位撑开 -->
|
|
<view class="w-screen"></view>
|
|
<view class="flex flex-col px-[16px] pt-[16px] pb-[12px] border-box" @click="openDetail(item)">
|
|
|
|
<view class="long-text-guide-card__badge text-[12px] font-bold" :class="`is-${item.badgeTone}`">
|
|
{{ item.badge }}
|
|
</view>
|
|
|
|
<view class="long-text-guide-card__summary-title text-[#1e293b] text-[18px] font-bold">
|
|
{{ item.title }}
|
|
</view>
|
|
<view class="long-text-guide-card__summary-text text-[#94a3b8] text-[14px] font-[500] line-clamp-2">
|
|
{{ item.summary }}
|
|
</view>
|
|
<view class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
|
|
<text class="text-[#cbd5e1] text-[12px] font-bold">{{ item.footer }}</text>
|
|
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, computed } from "vue";
|
|
import { getLongTextGuideDetailRoute } from "./detailRoutes.mjs";
|
|
const props = defineProps({
|
|
componentName: {
|
|
type: String,
|
|
default: 'longTextCardStrategyPreview',
|
|
},
|
|
});
|
|
|
|
const longTextCardStrategyPreview = {
|
|
type: 'longTextCardStrategyPreview',
|
|
badge: "漂流攻略",
|
|
badgeTone: "amber",
|
|
title: "下水之前，先听小七唠两句",
|
|
summary: "卧龙潭漂流值得冲，全程四十分钟、三段激流，但晕水的人要掂量…",
|
|
footer: "点击查看完整攻略",
|
|
}
|
|
|
|
const longTextCardScenicSpotPreview = {
|
|
type: 'longTextCardScenicSpotPreview',
|
|
badge: "景点故事",
|
|
badgeTone: "green",
|
|
title: "小七孔古桥 · 走了三百年的石拱",
|
|
summary: "小七孔古桥是一座三百岁的七孔石桥，小七孔的名字就从这儿来…",
|
|
footer: "点击查看完整介绍",
|
|
}
|
|
|
|
const longTextCardRoutePreview = {
|
|
type: 'longTextCardRoutePreview',
|
|
badge: "路线指引",
|
|
badgeTone: "violet",
|
|
title: "漂完卧龙潭，顺道去鸳鸯湖",
|
|
summary: "卧龙潭到鸳鸯湖坐观光车约二十分钟。要紧的是鸳鸯湖分上下湖…",
|
|
footer: "点击查看完整路线",
|
|
}
|
|
|
|
const longTextCardSnapPreview = {
|
|
type: 'longTextCardSnapPreview',
|
|
badge: "拍照攻略",
|
|
badgeTone: "blue",
|
|
title: "鸳鸯湖玻璃船，这样拍才不亏",
|
|
summary: "玻璃船拍照，关键是拍水下那抹通透的绿，顺光时段最出片…",
|
|
footer: "点击查看完整攻略",
|
|
}
|
|
|
|
const longTextCardFullDocPreview = {
|
|
type: 'longTextCardFullDocPreview',
|
|
badge: "初游攻略",
|
|
badgeTone: "amber",
|
|
title: "第一次来小七孔，照着这条线走就对了",
|
|
summary: "第一次来，别犹豫，直接锁死「东门进、西门出」这条线…",
|
|
footer: "点击查看完整攻略",
|
|
}
|
|
|
|
|
|
const item = computed(() => {
|
|
switch (props.componentName) {
|
|
case 'longTextCardStrategyPreview':
|
|
return longTextCardStrategyPreview;
|
|
case 'longTextCardSnapPreview':
|
|
return longTextCardSnapPreview;
|
|
case 'longTextCardRoutePreview':
|
|
return longTextCardRoutePreview;
|
|
case 'longTextCardScenicSpotPreview':
|
|
return longTextCardScenicSpotPreview;
|
|
case 'longTextCardFullDocPreview':
|
|
return longTextCardFullDocPreview;
|
|
default:
|
|
return longTextCardStrategyPreview;
|
|
}
|
|
});
|
|
|
|
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>
|