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>