<template>
|
<div class="page-wrapper">
|
<div class="bg-top"></div>
|
|
<!-- 页面内容 -->
|
<div class="content-wrapper">
|
<!-- title -->
|
<h1 class="title">
|
{{ scenic.name }}
|
</h1>
|
|
<!-- scenic.text -->
|
<p v-if="scenic.text">{{ scenic.text }}</p>
|
|
<!-- scenic.videos -->
|
<div v-if="scenic.videos && scenic.videos.length" class="videos">
|
<video v-for="(video, index) in scenic.videos" :key="index" autoplay loop playsinline controls
|
:src="video"></video>
|
</div>
|
|
<!-- scenic.images -->
|
<div v-if="scenic.images && scenic.images.length" class="images">
|
<img v-for="(img, index) in scenic.images" :key="index" :src="img" alt="景点图片" />
|
</div>
|
</div>
|
|
<!-- 底部背景 -->
|
<div class="bg-bottom"></div>
|
</div>
|
</template>
|
|
|
<script>
|
import {
|
ASSETS
|
} from './assets.js';
|
import {
|
onMounted,
|
ref,
|
watch
|
} from "vue";
|
import {
|
useRoute
|
} from "vue-router";
|
|
export default {
|
setup() {
|
const route = useRoute();
|
const scenic = ref({});
|
|
const loadData = (id) => {
|
const target = ASSETS.spots.find(item => item.id === id);
|
if (target) scenic.value = target;
|
};
|
|
// 页面首次加载
|
onMounted(() => {
|
//loadData(route.query.id);
|
loadData(uni.getStorageSync('scenic_id'))
|
});
|
|
// 监听 query.id 变化，保证返回后点击其他景点也刷新
|
/*
|
watch(
|
() => route.query.id,
|
(newId) => {
|
if (newId) loadData(newId);
|
}
|
);
|
*/
|
|
return {
|
scenic
|
};
|
}
|
};
|
</script>
|
|
<style>
|
.page-wrapper {
|
position: relative;
|
min-height: 100vh; /* 确保小内容时填满视口 */
|
overflow: hidden;
|
}
|
|
/* 顶部背景 */
|
.bg-top {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 500rpx; /* 可用固定像素或图片高度 */
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_top.jpg') no-repeat top center;
|
background-size: cover;
|
z-index: 0;
|
}
|
|
/* 底部背景 */
|
.bg-bottom {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 500rpx; /* 可用固定像素或图片高度 */
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_bottom.jpg') no-repeat bottom center;
|
background-size: cover;
|
z-index: 0;
|
}
|
|
/* 内容层 */
|
.content-wrapper {
|
position: relative;
|
z-index: 1;
|
padding: 2rem 1rem;
|
}
|
|
|
/* title 背景 */
|
.title {
|
text-align: center;
|
font-size: 1.5rem;
|
font-weight: bold;
|
padding: 1rem;
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_title.png') center/cover no-repeat;
|
margin-bottom: 1rem;
|
}
|
|
.videos {
|
flex-direction: column;
|
text-align: center;
|
padding-top: 20rpx;
|
}
|
|
.videos video {
|
margin: auto;
|
}
|
|
.images {
|
text-align: center;
|
/* 子元素 inline/inline-block 会居中 */
|
}
|
|
.images img {
|
width: 100%;
|
max-height: 24rem;
|
margin: 0 auto 1rem;
|
/* 上下外边距为 0 和 1rem，左右为 auto */
|
}
|
|
|
.p-4 {
|
padding: 1rem;
|
}
|
|
.bg-white {
|
background-color: #ffffff;
|
}
|
|
.space-y-6 {
|
margin-top: 1.5rem;
|
}
|
|
.text-2xl {
|
font-size: 1.5rem;
|
line-height: 2rem;
|
}
|
|
.font-bold {
|
font-weight: 700;
|
}
|
|
.text-center {
|
text-align: center;
|
}
|
|
.text-base {
|
font-size: 1rem;
|
line-height: 1.5rem;
|
}
|
|
.text-gray-700 {
|
color: #374151;
|
}
|
|
.space-y-4 {
|
margin-top: 1rem;
|
}
|
|
.w-full {
|
width: 100%;
|
}
|
|
.max-h-96 {
|
max-height: 24rem;
|
/* 384px */
|
}
|
|
.rounded-lg {
|
border-radius: 0.5rem;
|
/* 8px */
|
}
|
</style>
|
