PixelAI-mobile/pages/index/rich-detail.vue

<!-- 纯富文本展示页 -->
<template>
	<!-- #ifdef APP -->
	<view class="rich-detail" :style="{ backgroundImage: `url(${myFileUrl+background})`,paddingTop: CustomBar+'rpx' }">
		<view class="app-top" :style="{ height: CustomBar+'rpx',
		background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
	<!-- #endif -->
	<!-- #ifndef APP -->
	<view class="rich-detail" :style="{ backgroundImage: `url(${myFileUrl+background})` }">
	<!-- #endif -->
		<view class="rdt-top">
			<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
				<!-- #ifndef MP-WEIXIN -->
				<u-icon name="arrow-left" size="40" class="back" @click="back"
				:color="topLevel===0? '#f9f9f9' : `rgba(194, 234, 4,${topLevel})`"></u-icon>
				<image :src="myFileUrl+logo"></image>
				<view style="width: 75rpx;"></view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN  -->
				<image :src="myFileUrl+logo"></image>
				<!-- #endif -->
			</view>
			<view class="detail-content">
				<u-parse :html="content"></u-parse>
			</view>
		</view>
		<Loading :show="loading" />
	</view>
</template>

<script>
	import configService from '@/common/config.service.js';
	export default {
		data(){
			return{
				content: '',
				loading: true,// 加载
				// 基础路径
				myFileUrl: configService.fileUrl + 'pixel/my/',
				// 我的页面背景
				background: 'background.png',
				// logo图标
				logo: 'logo.png',
				// 顶部距离等级
				topLevel: 0,
			}
		},
		// #ifndef H5
		onPageScroll(e) {
			const level = e.scrollTop/60;
			if(level<=1) this.topLevel = level;
			else this.topLevel = 1;
		},
		// #endif
		
		// #ifdef H5
		mounted(){
			let that = this;
			window.onscroll = function () {
			    //为了保证兼容性，这里取三个值，哪个有值取哪一个
			    //scrollTop就是触发滚轮事件时滚轮的高度
			    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				const level = scrollTop/60;
				if(level<=1) that.topLevel = level;
				else that.topLevel = 1;
			}
		},
		
		onHide() {
			window.onscroll = null;
		},
		// #endif
		methods:{
			// 返回
			back(){
				uni.navigateBack();
			},
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.name || '协议内容'
			});
			this.content = `<p><h2>${options.name}</h2></p><p>最后更新日期：2024年12月</p><p>欢迎使用我们的pixel.ai制图软件（以下简称“本软件”）。我们非常重视您的隐私保护，因此我们制定了以下隐私协议，以帮助您了解我们如何收集、使用、存储和保护您的个人信息。请您在使用本软件之前仔细阅读本协议。</p><h3>1. 信息的收集</h3><p>在您使用本软件的过程中，我们可能会收集以下类型的信息：</p><ul><li><strong>个人信息</strong>：包括您的姓名、电子邮箱、联系方式等，您在注册、使用服务或联系我们时提供的。</li><li><strong>使用数据</strong>：我们可能会自动收集您使用本软件时的相关信息，例如访问的页面、点击的按钮、以及使用频率等。</li></ul><h3>2. 信息的使用</h3><p>我们收集的信息将用于以下目的：</p><ul><li>提供和维护本软件的正常运行。</li><li>改进我们的服务和用户体验。</li><li>向您发送更新、推广信息及其他与服务相关的通知。</li><li>处理您的反馈与请求。</li></ul><h3>3. 信息的共享</h3><p>我们不会将您的个人信息出售或租赁给第三方。我们可能会在以下情况下共享您的信息：</p><ul><li>在法律规定的情况下，或为保护您的权利、财产和安全而需要的情况下。</li><li>与我们的合作伙伴和服务提供商分享，以便为您提供服务。</li></ul><h3>4. 信息的存储与保护</h3><p>我们会采取合理的技术和管理措施来保护您的个人信息不被未授权访问、泄露、篡改或毁坏。我们会根据法律法规的要求，合理保存您的个人信息。</p><h3>5. 您的权利</h3><p>您有权随时访问、修改或删除您的个人信息。如果您希望对您的个人信息进行查看或修改，请通过以下方式联系我们。</p><h3>6. Cookies的使用</h3><p>本软件可能会使用cookies来提高用户体验。您可以通过浏览器设置禁用cookies，但这可能会影响某些功能的正常使用。</p><h3>7. 未成年人保护</h3><p>本软件不适用于未满13岁的儿童。我们不会故意收集未成年人的个人信息。如果您是监护人，且发现您的孩子向我们提供了个人信息，请及时联系我们，我们将采取适当措施删除相关信息。</p><h3>8. 协议的变更</h3><p>我们可能会不时更新本隐私协议。我们将在软件内或其他适当的地点发布变更通知。请定期查看本协议，以了解最新的隐私政策。</p><h3>9. 联系我们</h3><p>如对本隐私协议有任何疑问或建议，请通过以下方式联系我们：</p><ul><li>电子邮箱：<a href="mailto:support@example.com" target="_blank">support@example.com</a></li></ul><p>感谢您使用我们的制图软件，我们将竭诚为您提供优质服务！</p>`;
			this.loading = false;
		},
	}
</script>

<style scoped lang="scss">
.rich-detail{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-size: cover;
	// #ifdef APP
	.app-top{
		width: 100%;
		position: fixed;
		z-index: 81;
		top: 0;
	}
	// #endif
	.rdt-top{
		// #ifdef APP
		.app-top{
			width: 100%;
			position: fixed;
			z-index: 81;
			top: 0;
		}
		// #endif
		.mobile-logo{
			width: 100%;
			display: flex;
			justify-content: center;
			// #ifndef MP-WEIXIN
			justify-content: space-between;
			align-items: center;
			.back{
				margin-left: 35rpx;
				margin-top: 5rpx
			}
			// #endif
			position: fixed;
			z-index: 81;
			padding: 15rpx 0;
			image{
				width: 200rpx;
				height: 45rpx;
			}
			// .u-icon{
				
			// }
		}
	}
	// padding: 40rpx;
	.detail-content{
		margin: 80rpx 40rpx 32rpx;
		background-color: rgba(160, 160, 160, 0.4);
		border-radius: 20rpx;
		padding: 40rpx 25rpx 20rpx;
		color: #f9f9f9;
	}
}
</style>