uniapp vue3 uview-plus实现一个关于我们页面

uniapp yekong

uniapp vue3 uview-plus实现一个关于我们页面

unapp微信小程序开发过程中,经常需要一个关于我们的页面,一般这种页面都不复杂只需要文本加富文本来实现,这里我们通过uview-plus的u-navbar和富文本组件up-parse来实现。

<template>
	<view>
		<u-navbar title="关于我们" :placeholder="true" :autoBack="true" :safeAreaInsetTop="true"></u-navbar>
		<view class="page">
			<view class="content">
				<div class="title">关于我们</div>
				<view class="description">
					<up-parse :content="content" :tagStyle="style"></up-parse>
				</view>
				<u-gap height="80" bgColor="rgba(0,0,0,0)" marginTop="10" marginBottom="10"></u-gap>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '<p>这是一个关于我们的介绍</p>',
				style: {
					p: 'font-size:28rpx;color:#000',
					span: 'font-size: 28rpx;color:#000',
				}
			};
		},
		mounted() {},
		methods: {}
	};
</script>

<style scoped lang="scss">
	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #000;
		padding: 30rpx 0;
	}

	.page {
		background-color: #fff;
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.content {
			flex: 1;
			color: #2e2e2e;
			font-size: 26rpx;
			line-height: 40rpx;
			overflow-y: auto;

			.description {
				width: 686rpx;
				margin: auto;
			}
		}
	}
</style>
喜欢