{"version":3,"file":"scenic-detail.js","sources":["pages/index/scenic-detail.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvc2NlbmljLWRldGFpbC52dWU"],"sourcesContent":["<template>\r\n\t<div class=\"page-wrapper\">\r\n\t\t<div class=\"bg-top\"></div>\r\n\r\n\t\t<!-- 页面内容 -->\r\n\t\t<div class=\"content-wrapper\">\r\n\t\t\t<!-- title -->\r\n\t\t\t<h1 class=\"title\">\r\n\t\t\t\t{{ scenic.name }}\r\n\t\t\t</h1>\r\n\r\n\t\t\t<!-- scenic.text -->\r\n\t\t\t<p v-if=\"scenic.text\">{{ scenic.text }}</p>\r\n\r\n\t\t\t<!-- scenic.videos -->\r\n\t\t\t<div v-if=\"scenic.videos && scenic.videos.length\" class=\"videos\">\r\n\t\t\t\t<video v-for=\"(video, index) in scenic.videos\" :key=\"index\" autoplay loop playsinline controls\r\n\t\t\t\t\t:src=\"video\"></video>\r\n\t\t\t</div>\r\n\r\n\t\t\t<!-- scenic.images -->\r\n\t\t\t<div v-if=\"scenic.images && scenic.images.length\" class=\"images\">\r\n\t\t\t\t<img v-for=\"(img, index) in scenic.images\" :key=\"index\" :src=\"img\" alt=\"景点图片\" />\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<!-- 底部背景 -->\r\n\t\t<div class=\"bg-bottom\"></div>\r\n\t</div>\r\n</template>\r\n\r\n\r\n<script>\r\n\timport {\r\n\t\tASSETS\r\n\t} from './assets.js';\r\n\timport {\r\n\t\tonMounted,\r\n\t\tref,\r\n\t\twatch\r\n\t} from \"vue\";\r\n\timport {\r\n\t\tuseRoute\r\n\t} from \"vue-router\";\r\n\r\n\texport default {\r\n\t\tsetup() {\r\n\t\t\tconst route = useRoute();\r\n\t\t\tconst scenic = ref({});\r\n\r\n\t\t\tconst loadData = (id) => {\r\n\t\t\t\tconst target = ASSETS.spots.find(item => item.id === id);\r\n\t\t\t\tif (target) scenic.value = target;\r\n\t\t\t};\r\n\r\n\t\t\t// 页面首次加载\r\n\t\t\tonMounted(() => {\r\n\t\t\t\t//loadData(route.query.id);\r\n\t\t\t\tloadData(uni.getStorageSync('scenic_id'))\r\n\t\t\t});\r\n\r\n\t\t\t// 监听 query.id 变化，保证返回后点击其他景点也刷新\r\n\t\t\t/*\r\n watch(\r\n () => route.query.id,\r\n (newId) => {\r\n if (newId) loadData(newId);\r\n }\r\n );\r\n\t*/\r\n\r\n\t\t\treturn {\r\n\t\t\t\tscenic\r\n\t\t\t};\r\n\t\t}\r\n\t};\r\n</script>\r\n\r\n<style>\r\n\t.page-wrapper {\r\n\t position: relative;\r\n\t min-height: 100vh; /* 确保小内容时填满视口 */\r\n\t overflow: hidden;\r\n\t}\r\n\t\r\n\t/* 顶部背景 */\r\n\t.bg-top {\r\n\t position: absolute;\r\n\t top: 0;\r\n\t left: 0;\r\n\t width: 100%;\r\n\t height: 500rpx; /* 可用固定像素或图片高度 */\r\n\t background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_top.jpg') no-repeat top center;\r\n\t background-size: cover;\r\n\t z-index: 0;\r\n\t}\r\n\t\r\n\t/* 底部背景 */\r\n\t.bg-bottom {\r\n\t position: absolute;\r\n\t bottom: 0;\r\n\t left: 0;\r\n\t width: 100%;\r\n\t height: 500rpx; /* 可用固定像素或图片高度 */\r\n\t background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_bottom.jpg') no-repeat bottom center;\r\n\t background-size: cover;\r\n\t z-index: 0;\r\n\t}\r\n\t\r\n\t/* 内容层 */\r\n\t.content-wrapper {\r\n\t position: relative;\r\n\t z-index: 1;\r\n\t padding: 2rem 1rem;\r\n\t}\r\n\r\n\r\n\t/* title 背景 */\r\n\t.title {\r\n\t\ttext-align: center;\r\n\t\tfont-size: 1.5rem;\r\n\t\tfont-weight: bold;\r\n\t\tpadding: 1rem;\r\n\t\tbackground: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_title.png') center/cover no-repeat;\r\n\t\tmargin-bottom: 1rem;\r\n\t}\r\n\r\n\t.videos {\r\n\t\tflex-direction: column;\r\n\t\ttext-align: center;\r\n\t\tpadding-top: 20rpx;\r\n\t}\r\n\r\n\t.videos video {\r\n\t\tmargin: auto;\r\n\t}\r\n\r\n\t.images {\r\n\t\ttext-align: center;\r\n\t\t/* 子元素 inline/inline-block 会居中 */\r\n\t}\r\n\r\n\t.images img {\r\n\t\twidth: 100%;\r\n\t\tmax-height: 24rem;\r\n\t\tmargin: 0 auto 1rem;\r\n\t\t/* 上下外边距为 0 和 1rem，左右为 auto */\r\n\t}\r\n\r\n\r\n\t.p-4 {\r\n\t\tpadding: 1rem;\r\n\t}\r\n\r\n\t.bg-white {\r\n\t\tbackground-color: #ffffff;\r\n\t}\r\n\r\n\t.space-y-6 {\r\n\t\tmargin-top: 1.5rem;\r\n\t}\r\n\r\n\t.text-2xl {\r\n\t\tfont-size: 1.5rem;\r\n\t\tline-height: 2rem;\r\n\t}\r\n\r\n\t.font-bold {\r\n\t\tfont-weight: 700;\r\n\t}\r\n\r\n\t.text-center {\r\n\t\ttext-align: center;\r\n\t}\r\n\r\n\t.text-base {\r\n\t\tfont-size: 1rem;\r\n\t\tline-height: 1.5rem;\r\n\t}\r\n\r\n\t.text-gray-700 {\r\n\t\tcolor: #374151;\r\n\t}\r\n\r\n\t.space-y-4 {\r\n\t\tmargin-top: 1rem;\r\n\t}\r\n\r\n\t.w-full {\r\n\t\twidth: 100%;\r\n\t}\r\n\r\n\t.max-h-96 {\r\n\t\tmax-height: 24rem;\r\n\t\t/* 384px */\r\n\t}\r\n\r\n\t.rounded-lg {\r\n\t\tborder-radius: 0.5rem;\r\n\t\t/* 8px */\r\n\t}\r\n</style>","import MiniProgramPage from 'D:/HBuilderProjects/园博园/pages/index/scenic-detail.vue'\nwx.createPage(MiniProgramPage)"],"names":["useRoute","ref","ASSETS","onMounted","uni"],"mappings":";;;AA6CC,MAAK,YAAU;AAAA,EACd,QAAQ;AACOA,2BAAU;AACxB,UAAM,SAASC,kBAAI,CAAA,CAAE;AAErB,UAAM,WAAW,CAAC,OAAO;AACxB,YAAM,SAASC,mBAAM,OAAC,MAAM,KAAK,UAAQ,KAAK,OAAO,EAAE;AACvD,UAAI;AAAQ,eAAO,QAAQ;AAAA;AAI5BC,kBAAAA,UAAU,MAAM;AAEf,eAASC,cAAG,MAAC,eAAe,WAAW,CAAC;AAAA,IACzC,CAAC;AAYD,WAAO;AAAA,MACN;AAAA;EAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACzEF,GAAG,WAAW,eAAe;"}
|
