125 lines
2.7 KiB
Vue
125 lines
2.7 KiB
Vue
<template>
|
|
<view class="detail-page">
|
|
<view class="banner">
|
|
<view class="img">
|
|
<image :src="topImg" mode="aspectFill" style="width: 100%;height: 100%;"></image>
|
|
<view class="topText tn-flex tn-ml-xl">
|
|
<view class="icon tn-mt-sm">
|
|
<image :src="config.logo" mode="aspectFill" style="width: 100%;height: 100%;"></image>
|
|
</view>
|
|
<view class="title tn-ml tn-text-3xl tn-text-bold tn-mt">
|
|
{{config.siteName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="detail tn-m-sm tn-p-sm tn-radius tn-shadow">
|
|
<view class="title tn-text-bold tn-text-center tn-text-xl tn-p">
|
|
{{detail.title}}
|
|
</view>
|
|
<view class="info tn-flex tn-flex-center-between tn-pb-xs tn-pl tn-pr tn-gray-dark_text tn-border-bottom tn-grey-disabled_border tn-text-sm">
|
|
<view class="user">
|
|
<TnIcon name="pushpin"/>{{detail.user}}
|
|
</view>
|
|
<view class="time">
|
|
<TnIcon name="time"/>{{detail.createTime}}
|
|
</view>
|
|
</view>
|
|
<view class="content tn-mt tn-text-xl" style="letter-spacing: 2rpx;">
|
|
<mp-html :content="detail.content" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
import request from '@/utils/request';
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import config from '@/config/config';
|
|
|
|
const topImg = ref('/static/index_top.jpg')
|
|
|
|
const id = ref()
|
|
|
|
const detail = reactive({
|
|
title:'',
|
|
user:'',
|
|
createTime:'',
|
|
content:''
|
|
})
|
|
|
|
const getDetail = () => {
|
|
let url = '/front/content/detail?id=' + id;
|
|
request({
|
|
url:url,
|
|
method:'GET',
|
|
data:{
|
|
'id':id.value
|
|
}
|
|
}).then(res=>{
|
|
if(res.data.data.image){
|
|
res.data.data.image = JSON.parse(res.data.data.image)
|
|
// topImg.value = res.data.data.image[0]
|
|
}
|
|
Object.assign(detail,res.data.data)
|
|
uni.setNavigationBarTitle({
|
|
title:res.data.data.title
|
|
})
|
|
})
|
|
}
|
|
|
|
onLoad((option) => {
|
|
id.value = option.id
|
|
})
|
|
|
|
onMounted(()=>{
|
|
getDetail()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.detail-page{
|
|
min-height: 100vh;
|
|
.banner{
|
|
height: 450rpx;
|
|
position: relative;
|
|
.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
.topText{
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 100rpx;
|
|
left: 0;
|
|
.icon{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.title{
|
|
letter-spacing: 4rpx;
|
|
text-shadow: 6rpx 6rpx 8rpx #5c5c5c;
|
|
}
|
|
}
|
|
}
|
|
::after{
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 120rpx;
|
|
top: 330rpx;
|
|
left: 0;
|
|
background:linear-gradient(180deg,rgba(255, 255, 255, 0.01),rgba(255, 255, 255, 0.9))
|
|
}
|
|
}
|
|
.detail{
|
|
background-color: #fff;
|
|
position: relative;
|
|
top:-130rpx;
|
|
.info{
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
</style> |