xcxFront/pages/park/intro.vue

  <template>
	  <view class="home-page" v-if="flag">
	  	<!-- <TnNavbar
	  	  fixed
	  	  bg-color="rgba(255, 255, 255, 0.01)"
	  	  :bottom-shadow="false"
	  	  :placeholder="false"
	  	/> -->
		<view class="banner">
		  <image class="tn-image" :src="banner" mode="aspectFill" />
		  <view class="banner-content tn-pt-sm tn-pl-lg">
		  	<view class="tn-pt-xl">
		  		<view class="top tn-flex tn-pl">
		  			<view class="logo tn-mr">
		  				<TnAvatar :url="logo" :border="true" :border-bold="true" size="xl"/>
		  			</view>
		  			<view class="name tn-text-left tn-text-3xl" style="font-family: handsome;line-height: 1.4em;letter-spacing: 16rpx;">
		  				重庆市江津区<br>工业园
		  			</view>
		  		</view>
		  		<view class="bottom tn-flex tn-mt-sm tn-pl">
		  			<view class="left tn-text-center tn-text-bold tn-border-right tn-pr tn-pl-sm">
		  				江<span style="width: 1em;display: inline-block;"></span>津<br>工业园
		  			</view>
		  			<view class="right tn-pl">
		  				国家新型工业化产业示范基地<br>国家级绿色工业园区
		  			</view>
		  		</view>		  
		  	</view>
		  </view>
		</view>
	  	<view class="introduction-page">
	  	  <!-- 容器标题 -->
	  	  <view class="title-container">
	  	    <view class="left">
	  	      <view class="title">{{shareTitle}}</view>
	  	    </view>
	  	  </view>
		  
	  	  <!-- 富文本内容 -->
	  	  <view class="introduction-content tn-gradient-bg__grey-light tn-p-sm tn-radius">
	  		  <mp-html :content="summary"/>
	  	  </view>
	  	</view>
		<tab-bar :current="1"></tab-bar>
	</view>
</template>


<script lang="ts" setup>
	import baseUrl from '@/config/config';
	import onShare from '@/utils/share';
	import { ref } from 'vue';
	import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
	import TabBar from '@/pages/components/tab-bar.vue';

	const { onShareAppMessage, onShareTimeline } = onShare()
	
	const banner = ref('https://static1.cqtlcm.com/attachment/kxc-xcx/index_top.png')
	
	const logo = ref('https://static1.cqtlcm.com/attachment/kxc-xcx/logo.jpg ')
	
	const flag = ref(false);
	
	const summary = ref('');
	
	const shareTitle = ref()
	
	const getParkList = () => {
		uni.request({
		  url:baseUrl + '/front/main_park',
		  success: (res:any) => {

			shareTitle.value = res.data.name
				
			summary.value = res.data.content
				
			flag.value = true

			}
		})
	}
	
	onShareAppMessage(() => {
		return {
			title:shareTitle.value,
			path:'/pages/parks/intro'
		}
	})
	
	onShareTimeline(() => {
		return {
			title:shareTitle.value,
			path:'/pages/parks/intro'
		}
	})

	getParkList()
</script>

<style lang="scss" scoped>
	.home-page{
		background-color: #fff;
		.banner{
			position: relative;
			height: 450rpx;
			.banner-content{
				position: absolute;
				top:80rpx;
				color: #FFF;
				width: 100%;
				z-index: 20;
				.top{
					letter-spacing: 8rpx;
					height:140rpx;
					.logo{
						height:140rpx;
						margin-top: 15rpx;
					}
				}
				.bottom{
					.left{
						text-align: justify;
					}
				}
			}
		}
		/* 内容区域 start */
		.introduction-page {
		  position: relative;
		  top: -40rpx;
		  background-color: #fff;
		  border-radius: 40rpx 40rpx 0rpx 0rpx;
		  padding: 60rpx 30rpx 40rpx 30rpx;
		  /* 标题区域 start */
		  .title-container {
		    width: 100%;
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    line-height: 1;
		
		    .left {
		      flex: 1;
		
		      .title {
		        font-size: 40rpx;
		        font-weight: bold;
				text-align: center;
		      }
		    }
		  }
		  /* 标题区域 end */
		
		  .introduction-content {
		    position: relative;
			font-size: 34rpx;
		    width: 100%;
		    margin-top: 40rpx;
			letter-spacing: 4rpx;
		    line-height: 2em;
			text-align: justify;
		  }
		}
	}
</style>