4D_uniapp_service/pages/account/about.vue

<template>
	<view>
		<uni-nav-bar :fixed="true" shadow left-icon="left" title="关于我们" :statusBar="true" @clickLeft="handleToBack" />
		<view class="content">
			<view>
				<uni-list :border="false">
					<uni-list-chat
						:avatar-circle="true"
						:title="item.title"
						:avatar="item.avatar"
						:note="item.note"
						v-for="(item, index) in items"
						:key="index"
						clickable
						@click="handleToHelp(item.id)"
					>
						<view class="chat-custom-right">
							<image src="/static/common/right.png" class="extra_image" mode="aspectFill" />
						</view>
					</uni-list-chat>
				</uni-list>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

const statusBarHeight = ref();
const items = reactive([
	{
		id: '3',
		title: '责任声明',
		avatar: '/static/account/about/statement.png',
		note: '点击查看嘀咚点到责任声明'
	},
	{
		id: '21',
		title: '用户协议',
		avatar: '/static/account/about/agreement.png',
		note: '点击查看嘀咚点到用户协议'
	},
	{
		id: '5',
		title: '隐私政策',
		avatar: '/static/account/about/privacy.png',
		note: '点击查看嘀咚点到隐私政策'
	}
]);

const handleToHelp = (id) => {
	uni.navigateTo({
		url: `/pages/account/help?id=${id}`
	});
};
const handleToBack = () => {
	const canNavBack = getCurrentPages();
	if (canNavBack && canNavBack.length > 1) uni.navigateBack();
	else history.back();
};

onLoad((option) => {
	statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
});

onShow(() => {
	uni.$emit('fastOrderNum', false);
	uni.$emit('receiveOrdernum', false);
})
</script>

<style lang="scss" scoped>
.content {
	padding: 20upx;

	.uni-list {
		background: transparent;

		:deep(.uni-list-chat) {
			margin: 10upx 0;
			height: 150upx;
			.uni-list-chat__header {
				width: 84upx;
				height: 80upx;
				.uni-list-chat__header-image {
					width: 76upx;
					height: 76upx;
				}
			}

			.uni-list-chat__container {
				padding: 40upx;

				.uni-list-chat__content-title {
					font-size: 32upx;
					font-weight: 400;
					color: #000000;
				}
				.uni-list-chat__content-note {
					font-size: 24upx;
					font-weight: 400;
					color: #999999;
				}
				.uni-list-chat__content-extra {
					justify-content: center;
					.chat-custom-right {
						.extra_image {
							width: 14upx;
							height: 24upx;
						}
					}
				}
			}
		}
	}
}
</style>