117 lines
2.3 KiB
Vue
117 lines
2.3 KiB
Vue
<template>
|
|
<view class="project-detail-container">
|
|
<!-- 标题和日期 -->
|
|
<view class="header">
|
|
<text class="title">{{ projectData.title }}</text>
|
|
<text v-if="projectData.createTime" class="time">
|
|
{{ formatDate(projectData.createTime) }}
|
|
</text>
|
|
</view>
|
|
|
|
<!-- 封面图片 -->
|
|
<template v-if="projectData.coverUrl">
|
|
<image
|
|
v-for="item in projectData.coverUrl.split(',')"
|
|
:src="item"
|
|
class="cover-image"
|
|
mode="widthFix"
|
|
/>
|
|
</template>
|
|
|
|
<!-- 内容区域 -->
|
|
<view class="content-box">
|
|
<rich-text
|
|
:nodes="removeBackgroundStyle(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) {
|
|
//return this.$u.date(timestamp, "yyyy-mm-dd");
|
|
|
|
// 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;
|
|
// }
|
|
return timestamp;
|
|
},
|
|
|
|
removeBackgroundStyle(html) {
|
|
if (!html) return [];
|
|
|
|
// 1. 移除背景色样式
|
|
return html.replace(/background-color:[^;"]*;?/g, "");
|
|
},
|
|
},
|
|
};
|
|
</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>
|