176 lines
3.5 KiB
Vue
176 lines
3.5 KiB
Vue
<template>
|
|
<view class="park-detail-page" v-if="flag">
|
|
<tn-navbar
|
|
fixed
|
|
bg-color="rgba(255, 255, 255, 0.01)"
|
|
:bottom-shadow="false"
|
|
:placeholder="false"
|
|
/>
|
|
<!-- 园区概况 -->
|
|
<view class="park-summary"
|
|
:style="{'background':'url('+ parkSummary.image +') no-repeat','backgroundPosition':'center center','backgroundSize':'100% 100%'}"
|
|
>
|
|
<view class="summary-content">
|
|
<view class="summary-info">
|
|
<view class="title">{{ parkSummary.title }}</view>
|
|
<view class="desc">{{ parkSummary.desc }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 园区详情 -->
|
|
<view class="park-detail">
|
|
<view class="title tn-text-2xl tn-mb-xl">
|
|
{{parkSummary.title}}简介
|
|
</view>
|
|
|
|
<view class="introduction-content tn-gradient-bg__grey-light tn-p-sm tn-radius">
|
|
<mp-html :content="parkSummary.content"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import baseUrl from '@/config/config';
|
|
import { onLoad } from "@dcloudio/uni-app"
|
|
import onShare from '@/utils/share';
|
|
|
|
const { onShareAppMessage,onShareTimeline } = onShare()
|
|
|
|
const shareTitle = ref()
|
|
|
|
const shareParam = ref()
|
|
|
|
interface ParkSummary {
|
|
title?: string
|
|
desc?: string
|
|
image?: string
|
|
content?: string
|
|
}
|
|
|
|
const flag = ref(false);
|
|
|
|
const parkSummary = ref<ParkSummary>();
|
|
|
|
const getInfo = (id:number) => {
|
|
uni.request({
|
|
url:baseUrl + '/front/parks/' + id,
|
|
success: (res:any) => {
|
|
if(res.data.code === 0){
|
|
parkSummary.value = res.data.data
|
|
shareTitle.value = res.data.data.title
|
|
shareParam.value = res.data.data.parkId
|
|
}else{
|
|
uni.showToast({
|
|
title:res.data.message,
|
|
icon:'none'
|
|
})
|
|
return
|
|
}
|
|
flag.value = true;
|
|
}
|
|
})
|
|
}
|
|
|
|
onShareAppMessage(() => {
|
|
return {
|
|
title:shareTitle.value,
|
|
path:'/pages/park/index?id=' + shareParam.value
|
|
}
|
|
})
|
|
|
|
onShareTimeline(() => {
|
|
return {
|
|
title:shareTitle.value,
|
|
path:'/pages/park/index?id=' + shareParam.value
|
|
}
|
|
})
|
|
|
|
onLoad((option)=>{
|
|
getInfo(option.id)
|
|
})
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.park-summary {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 450rpx;
|
|
z-index: 2;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.4) 0%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
z-index: 1;
|
|
}
|
|
|
|
.summary-content {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 80rpx;
|
|
width: 100%;
|
|
padding: 0rpx 30rpx;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.summary-info {
|
|
flex: 1;
|
|
color: #fff;
|
|
|
|
.title {
|
|
font-size: 52rpx;
|
|
font-weight: bold;
|
|
letter-spacing: 8rpx;
|
|
text-shadow: 4rpx 4rpx 10rpx #585858;
|
|
}
|
|
.desc {
|
|
font-size: 34rpx;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 16rpx;
|
|
text-shadow: 4rpx 4rpx 10rpx #585858;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* end */
|
|
|
|
/* start */
|
|
.park-detail {
|
|
position: relative;
|
|
top: -40rpx;
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
background-color: #fff;
|
|
padding: 50rpx 30rpx 20rpx 30rpx;
|
|
z-index: 10;
|
|
.title{
|
|
text-align: center;
|
|
line-height: 2em;
|
|
font-weight: bold;
|
|
}
|
|
.introduction-content{
|
|
font-size: 34rpx;
|
|
line-height: 2em;
|
|
letter-spacing: 4rpx;
|
|
text-align: justify;
|
|
}
|
|
.topic-item {
|
|
& + .topic-item {
|
|
margin-top: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
/* 话题列表 end */
|
|
|
|
</style>
|