89fd9acb71
- remove deprecated `mode="aspectFill"` prop from all image and img tags - replace deprecated `scroll-y` directive with modern overflow-y-auto and scrollbar hiding classes - refactor notice page to use TypeScript and proper route query handling - update styling and layout for NoticeMessage, Tabs and QuickCard components - fix spacing inconsistencies across multiple pages
129 lines
6.0 KiB
Vue
129 lines
6.0 KiB
Vue
<template>
|
||
<div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
|
||
<TopNavBar title="景点故事" background="#E5EFE9" />
|
||
|
||
<div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
|
||
<div class="box-border">
|
||
<div class="overflow-hidden">
|
||
<div class="pt-4 px-[18px] pb-[14px] border-b border-[rgba(15,23,42,0.06)]">
|
||
<div class="text-[#1e293b] text-[18px] font-black leading-[26px]">小七孔古桥 · 走了三百年的石拱</div>
|
||
<div
|
||
class="inline-flex w-fit min-h-6 mt-[10px] px-[10px] items-center border rounded-full text-[11px] font-black leading-[18px] text-[#047857] bg-[#ecfdf5] border-[#a7f3d0]">
|
||
景点故事
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pt-[18px] px-[18px] pb-1">
|
||
<div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
|
||
小七孔古桥静静卧在响水河上，七个石拱挨着排开，桥身爬满青苔藤蔓。它建于清道光年间，
|
||
<text class="px-[5px] py-[1px] rounded bg-[#ecfdf5] text-[#065f46] font-black">三百多岁</text>
|
||
了。整个景区的名字，就是从这座桥来的。
|
||
</div>
|
||
|
||
<img class="block w-full h-[160px] my-1 mt-1 mb-4 rounded-[14px] bg-[#f1f5f9]"
|
||
src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp2.jpg" />
|
||
|
||
<div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">站在这儿，看什么</div>
|
||
<div
|
||
class="my-1 mt-1 mb-4 px-[14px] py-[10px] border-l-[3px] rounded-[12px] text-[#065f46] bg-[#f0fdf4] text-[12px] font-extrabold leading-[22px] border-l-[#34d399]">
|
||
① 桥拱与水面倒影合成完整的圆，这是古桥最经典的一眼<br />
|
||
② 桥身的青苔和藤蔓，是三百年时间慢慢长出来的<br />
|
||
③ 桥下水浅处清澈见底，能看见鹅卵石和游鱼
|
||
</div>
|
||
|
||
<div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
|
||
小七的建议：别急着走过去。先在桥侧站一会儿，古桥不是用来打卡的，是用来
|
||
<span class="px-[5px] py-[1px] rounded bg-[#ecfdf5] text-[#065f46] font-black">慢慢看</span>
|
||
的。光线斜下来的时候，石桥、绿水、倒影会一起把你框进画里。
|
||
</div>
|
||
|
||
<div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">顺带一提</div>
|
||
<div
|
||
class="my-1 mt-1 mb-4 px-[14px] py-[10px] border-l-[3px] rounded-[12px] text-[12px] font-extrabold leading-[22px] border-l-[#fbbf24] text-[#92400e] bg-[#fffbeb]">
|
||
桥面是三百年的老石头，雨后偏滑，慢点走；别翻护栏到桥下浅滩，既危险也伤桥。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-1 pb-5 border-t border-[rgba(15,23,42,0.06)]">
|
||
<div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
|
||
查看景点详情
|
||
</div>
|
||
<div
|
||
class="mx-4 mb-3 overflow-hidden border border-[#f1f5f9] rounded-[24px] bg-white shadow-[0_4px_20px_rgba(15,23,42,0.04)]"
|
||
@click="showToast('跳转 H5 景点详情页：小七孔古桥')">
|
||
<div
|
||
class="inline-flex w-fit mt-[14px] ml-[14px] px-[10px] py-1 items-center rounded-[8px] text-[#059669] bg-[rgba(255,255,255,0.9)] shadow-[0_1px_4px_rgba(15,23,42,0.08)] text-[10px] font-black">
|
||
核心地标
|
||
</div>
|
||
<div class="pt-[10px] px-5 pb-4">
|
||
<div class="mb-[10px] text-[#1e293b] text-[19px] font-black leading-[26px]">小七孔古桥</div>
|
||
<div
|
||
class="mb-3 px-3 py-[10px] border border-[rgba(167,243,208,0.5)] rounded-[12px] text-[#065f46] bg-[linear-gradient(to_right,#ecfdf5,rgba(240,253,250,0.5))] text-[12px] font-extrabold leading-5">
|
||
清道光年间建的七孔石桥，响水河上的镇景之宝，小七孔之名由此而来，桥畔可观涵碧潭。
|
||
</div>
|
||
<button
|
||
class="w-full h-[42px] p-0 border-0 rounded-[14px] text-white bg-[#0f172a] text-[13px] font-black leading-[42px] [&::after]:border-0"
|
||
@click.stop="openMap">
|
||
带我去
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
|
||
继续追问
|
||
</div>
|
||
<div class="mx-4">
|
||
<div v-for="question in faq" :key="question"
|
||
class="inline-flex mr-[6px] mb-2 px-[13px] py-2 border border-[#e2e8f0] rounded-[20px] text-[#475569] bg-white text-[11.5px] font-extrabold leading-4"
|
||
@click="sendReply(question)">
|
||
{{ question }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { emitter } from '@/utils/events'
|
||
import TopNavBar from "@/components/TopNavBar/index.vue";
|
||
import { SEND_MESSAGE_CONTENT_TEXT } from "@/constants/constant";
|
||
|
||
const faq = ["古桥有什么传说", "最佳观赏时间", "旁边还有什么景点"];
|
||
|
||
const showToast = (title) => {
|
||
showToast(title);
|
||
};
|
||
|
||
// 打开地图
|
||
const openMap = () => {
|
||
const address = '小七孔古桥';
|
||
const latitude = 25.248714;
|
||
const longitude = 107.745735;
|
||
|
||
uni.getLocation({
|
||
type: "gcj02", //返回可以用于uni.openLocation的经纬度
|
||
success: (res) => {
|
||
console.log("当前经纬度", latitude, longitude);
|
||
|
||
uni.openLocation({
|
||
latitude: latitude,
|
||
longitude: longitude,
|
||
address: address,
|
||
success: () => {
|
||
console.log("success");
|
||
},
|
||
});
|
||
},
|
||
});
|
||
};
|
||
|
||
const sendReply = (item) => {
|
||
uni.navigateBack();
|
||
emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item);
|
||
};
|
||
|
||
</script>
|