126 lines
2.7 KiB
Vue
126 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-flex-center-between tn-w-full tn-p-lg">
|
|
<view class="icon">
|
|
<image :src="config.logo" mode="aspectFill" style="width: 100%;height: 100%;"></image>
|
|
</view>
|
|
<view class="title tn-text-2xl tn-mt-xl tn-pt-sm">
|
|
{{config.siteName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="detail tn-p tn-radius tn-shadow">
|
|
<view class="title tn-text-bold tn-text-center tn-text-2xl tn-p-sm">
|
|
{{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="my-love" size="28"/>{{detail.user}}
|
|
</view>
|
|
<view class="time">
|
|
<TnIcon name="time" size="28"/>{{dayjs(detail.createTime).format('YYYY-MM-DD')}}
|
|
</view>
|
|
</view>
|
|
<view class="content tn-mt tn-text-lg" style="letter-spacing: 4rpx;">
|
|
<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';
|
|
import dayjs from 'dayjs';
|
|
|
|
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)
|
|
}
|
|
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: 50rpx;
|
|
left: 0;
|
|
.icon{
|
|
width: 280rpx;
|
|
height: 100rpx;
|
|
}
|
|
.title{
|
|
letter-spacing: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
::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:-160rpx;
|
|
.info{
|
|
border-radius: 0;
|
|
}
|
|
.content{
|
|
line-height: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
</style> |