yizhizan-h5/my/setting/weekXiYi.vue

<template>
    <view class="agreement-page">
        <!-- 顶部间距占位 -->
        <view class="top-spacing"></view>
        
        <!-- 顶部导航栏 -->
        <view class="page-header">
            <!-- 返回图标 -->
            <view class="back-icon" @click="goBack">
				<u-icon name="arrow-leftward" size="36" color="#333"></u-icon>
            </view>
            
            <text class="header-title">会员服务协议</text>
        </view>
        
        <!-- 富文本内容区域 -->
        <scroll-view class="content-container" scroll-y="true">
            <view class="agreement-content" v-html="content"></view>
            
            <!-- 底部提示 -->
            <view class="agreement-footer">
                <text class="footer-text">以上协议内容最终解释权归本平台所有</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            content: ''
        }
    },
    onLoad() {
        this.getGuize();
    },
    methods: {
        getGuize() {
            this.$Request.getT('/app/common/type/315').then(res => {
                if (res.code === 0) {
                    this.content = res.data.value;
                } else {
                    this.content = '<div style="text-align:center;padding:50upx;">协议内容加载失败，请稍后重试</div>';
                }
            }).catch(err => {
                console.error('协议加载失败:', err);
                this.content = '<div style="text-align:center;padding:50upx;">协议内容加载失败，请检查网络连接</div>';
            });
        },
        // 返回上一页
        goBack() {
            uni.navigateBack({
                delta: 1
            });
        }
    }
}
</script>

<style scoped>
/* 页面整体样式 */
.agreement-page {
    width: 100%;
    min-height: 100vh;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
}

/* 顶部间距占位 - 控制整体下移的距离 */
.top-spacing {
    height: 60upx; /* 可根据需要调整这个值来控制下移距离 */
    background-color: #FFFFFF;
}

/* 顶部导航栏 */
.page-header {
    height: 88upx;
    line-height: 88upx;
    text-align: center;
    border-bottom: 1px solid #EEEEEE;
    background-color: #fff;
    position: sticky;
    top: 60upx; /* 对应top-spacing的高度 */
    z-index: 10;
    /* 开启flex布局，实现返回按钮和标题的排列 */
    display: flex;
    align-items: center;
    padding: 0 20upx;
}

/* 返回图标样式 */
.back-icon {
    position: absolute;
    left: 20upx;
    top: 50%;
    transform: translateY(-50%);
    width: 44upx;
    height: 44upx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-title {
    font-size: 36upx;
    font-weight: 600;
    color: #333333;
    /* 让标题居中显示 */
    flex: 1;
}

/* 内容滚动容器 */
.content-container {
    flex: 1;
    padding: 32upx;
    box-sizing: border-box;
}

/* 富文本内容样式 */
.agreement-content {
    font-size: 28upx;
    line-height: 1.8;
    color: #333333;
}

/* 富文本内部元素样式重置 */
.agreement-content >>> p {
    margin: 0 0 20upx 0;
}

.agreement-content >>> h1,
.agreement-content >>> h2,
.agreement-content >>> h3 {
    font-weight: 600;
    margin: 30upx 0 15upx 0;
}

.agreement-content >>> h1 {
    font-size: 32upx;
}

.agreement-content >>> h2 {
    font-size: 30upx;
}

.agreement-content >>> ul,
.agreement-content >>> ol {
    padding-left: 40upx;
    margin: 10upx 0;
}

.agreement-content >>> li {
    margin-bottom: 10upx;
}

.agreement-content >>> a {
    color: #007AFF;
    text-decoration: underline;
}

/* 底部提示 */
.agreement-footer {
    margin-top: 40upx;
    padding-top: 20upx;
    border-top: 1px solid #EEEEEE;
}

.footer-text {
    font-size: 24upx;
    color: #999999;
    text-align: center;
}
</style>