051f7d1134
Clean up style-related code across all components: - Replace deprecated color-* classes with text-[color]/text-white equivalents - Remove redundant border-box declarations and fix broken empty box-sizing rule - Correct invalid rounded corner class syntax - Standardize line-height to leading-[value] utilities - Uniform margin and padding notation to [xxpx] format
106 lines
3.0 KiB
Vue
106 lines
3.0 KiB
Vue
<template>
|
|
<div class="w-full bg-white border-ff overflow-hidden rounded-20 flex flex-col">
|
|
<!-- 占位撑开 -->
|
|
<div class="w-vw"></div>
|
|
<div class="flex flex-col px-16 pt-16 pb-12 " @click="openDetail(item)">
|
|
|
|
<div class="long-text-guide-card__badge text-[12px] font-900" :class="`is-${item.badgeTone}`">
|
|
{{ item.badge }}
|
|
</div>
|
|
|
|
<div class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
|
|
{{ item.title }}
|
|
</div>
|
|
<div class="long-text-guide-card__summary-text color-94A3B8 text-[14px] font-500 ellipsis-2">
|
|
{{ item.summary }}
|
|
</div>
|
|
<div class="long-text-guide-card__summary-footer flex flex-items-center flex-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>
|