ajy/code/ajyApp/pages/my/questions/quesinfo.nvue

<template>
	<view class="page">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<image src="/static/public/backBlack.png" mode="aspectFill" class="back-img" @click="goBack"></image>
			<text class="nav-title">问题解答</text>
			<view class="nav-right"></view>
		</view>

		<!-- 内容区域 -->
		<scroll-view class="content-scroll" scroll-y="true">
			<text class="ques-title">{{title}}</text>
			<rich-text class="rich-content" :nodes="detail"></rich-text>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 44,
			id: '',
			title: '',
			detail: ''
		}
	},
	onLoad(options) {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
		if (options && options.id) {
			this.id = options.id
		}
		if (options && options.title) {
			this.title = decodeURIComponent(options.title)
		}
		this.init()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		init() {
			// TODO: 后续对接后台接口获取问题详情
		}
	}
}
</script>

<style>
.page {
	flex: 1;
	background-color: #FFFFFF;
}
.status-bar {
	background-color: #FFFFFF;
}
.nav-bar {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding-left: 54rpx;
	padding-right: 54rpx;
	background-color: #FFFFFF;
}
.back-img {
	width: 50rpx;
	height: 50rpx;
}
.nav-title {
	font-weight: bold;
	font-size: 32rpx;
	color: #545F71;
}
.nav-right {
	width: 50rpx;
	height: 50rpx;
}
/* 内容区域 */
.content-scroll {
	flex: 1;
	padding-left: 38rpx;
	padding-right: 38rpx;
	padding-top: 20rpx;
}
.ques-title {
	font-weight: bold;
	font-size: 36rpx;
	color: #545F71;
	margin-bottom: 36rpx;
}
.rich-content {
	width: 650rpx;
}
</style>