front/pages/tool/page.vue

<template>
	<view class="page-container" v-if="fetch && fetch.content">
		<use-tabbar :tabbar="false"></use-tabbar>
		
		<!-- 标题区域 -->
		<view class="page-title">
			{{ title }}
		</view>

		<!-- 内容卡片 -->
		<view class="content-card">
			<u-parse :content="fetch.content"></u-parse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fetch: {},
				title: '',
			};
		},
		onLoad(options) {
			let title = '单页内容';
			if (options) {
				if (!options.title) {
					this.Dever.alert('单页名称不能为空');
					return;
				}
				title = this.title = options.title;
			}
			uni.setNavigationBarTitle({
				title: title
			})
			this.DeverApi.get(this, 'main.page', { name: this.title });
		},
	}
</script>

<style lang="scss">
.page-container {
	background-color: #f7f8fa;
	min-height: 100vh;
	padding: 20rpx;
	box-sizing: border-box;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	text-align: center;
}

.content-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
	line-height: 1.8;
	font-size: 28rpx;
	color: #444;

	img {
		width: 100%;
		border-radius: 12rpx;
		margin: 20rpx 0;
	}
	p {
		margin-bottom: 20rpx;
	}
}
</style>