staff/pagesB/agreement/index.vue

<template>
	<view class="complaint-page">
		<!-- 自定义导航栏 -->
		<wd-navbar :bordered="false"
			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
			safeAreaInsetTop fixed placeholder>
			<template #left>
				<view class="li-ml-15 li-mt-10 li-flex li-items-center">
					<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
						@click="toPages({type:'nav'})"></text>
					<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
						@click="toPages({type:'home'})"></text>
					<text class="li-text-42">{{paramsType=='1'?'用户协议':'隐私政策'}}</text>
				</view>
			</template>
		</wd-navbar>
		<!-- 导航栏背景 -->
		<view class="nav-bg-layer"></view>
		<view v-html="rawHtml"></view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { useNavigation } from '@/hooks/useNavigation';
	import { useToast } from '@/uni_modules/wot-design-uni';

	const Toast = useToast();

	// 使用导航composable
	const {
		hasMultiplePages,
		isTabBarPage,
		checkRouteStack
	} = useNavigation();

	const paramsType = ref('1')
    const rawHtml = ref('<div style="text-align:center;background-color: #007AFF;"><div >我是内容</div><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>')


	// 页面跳转
	const toPages = (item) => {
		switch (item.type) {
			case 'nav':
				uni.navigateBack({
					delta: 1
				});
				break;
			case 'home':
				uni.switchTab({
					url: '/pages/index/index'
				});
				break;

			default:
				break;
		}
	};


	// 生命周期钩子
	onLoad((options) => {
		checkRouteStack();
		paramsType.value = options.type
	});
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.complaint-page {
		min-height: 100vh;
	}

	.nav-bg-layer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(var(--status-bar-height) + 88rpx);
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
		z-index: -1;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.status-tag {
		padding: 8rpx 24rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #666;
		background: #f5f5f5;
		margin-right: 16rpx;
		transition: all 0.3s;
	}

	.status-tag.active {
		color: #0070F0;
		background: rgba(0, 112, 240, 0.1);
		font-weight: 500;
	}

	.complaint-card {
		transition: all 0.3s;

		&:active {
			transform: scale(0.98);
			opacity: 0.9;
		}
	}

	.complaint-header {
		.status-badge {
			padding: 4rpx 20rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
		}
	}

	.li-bottom-border2 {
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	.preview-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		object-fit: cover;
	}

	.more-image-text {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 120rpx;
		height: 120rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
	}

	/* 覆盖组件样式 */
	::v-deep .wd-search {
		background-color: transparent !important;
		padding: 0 !important;
		border-radius: 10rpx !important;
	}

	::v-deep .wd-search__block {
		background-color: rgba(255, 255, 255, 0.8) !important;
		padding: 8rpx !important;
		border-radius: 10rpx !important;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.015);
	}

	::v-deep .wd-status-tip__text {
		margin-top: 30rpx !important;
		color: #999 !important;
	}
</style>