103 lines
2.0 KiB
Vue
103 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<view class="project-detail-container">
|
||
|
|
<!-- 封面图片 -->
|
||
|
|
<image
|
||
|
|
v-if="projectData.coverUrl"
|
||
|
|
:src="projectData.coverUrl"
|
||
|
|
class="cover-image"
|
||
|
|
mode="widthFix"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<!-- 标题和日期 -->
|
||
|
|
<view class="header">
|
||
|
|
<text class="title">{{ projectData.title }}</text>
|
||
|
|
<text v-if="projectData.createTime" class="time">
|
||
|
|
{{ formatDate(projectData.createTime) }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 内容区域 -->
|
||
|
|
<view class="content-box">
|
||
|
|
<rich-text :nodes="projectData.content"></rich-text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "projectDetail",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
projectData: {
|
||
|
|
title: "",
|
||
|
|
content: "",
|
||
|
|
createTime: "",
|
||
|
|
coverUrl: "",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
this.projectData = {
|
||
|
|
title: decodeURIComponent(options.title || ""),
|
||
|
|
content: decodeURIComponent(options.content || ""),
|
||
|
|
createTime: decodeURIComponent(options.createTime || ""),
|
||
|
|
coverUrl: decodeURIComponent(options.coverUrl || ""),
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 格式化日期
|
||
|
|
formatDate(timestamp) {
|
||
|
|
if (!timestamp) return "";
|
||
|
|
const date = new Date(timestamp);
|
||
|
|
return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
|
||
|
|
|
||
|
|
function padZero(num) {
|
||
|
|
return num < 10 ? `0${num}` : num;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.project-detail-container {
|
||
|
|
padding: 30rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cover-image {
|
||
|
|
width: 100%;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333;
|
||
|
|
line-height: 1.5;
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-box {
|
||
|
|
padding: 20rpx 0;
|
||
|
|
|
||
|
|
.content {
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #666;
|
||
|
|
line-height: 1.8;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|