167 lines
3.8 KiB
Vue
167 lines
3.8 KiB
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>
|