book-hi/pages-home/pages/about-us.vue

<template>
    <view class="user-agreement">
        <!-- <view class="agreement-title">{{ aboutUsData.title }}</view> -->
        <view class="agreement-content">
            <u-parse
                v-if="articleHtml"
                :html="articleHtml"
                :autoscroll="true"
                :autoset-title="false"
                :tag-style="articleTagStyle"
                class="agreement-parse"
            />
        </view>
    </view>
</template>

<script>
import { ARTICLE_TAG_STYLE, formatArticleHtml } from '@/utils/article-content.js'

export default {
    data() {
        return {
            aboutUsData: {
                title: '',
                content: '',
            },
            articleHtml: '',
            articleTagStyle: ARTICLE_TAG_STYLE,
        }
    },
    onLoad() {
        this.getAboutUs();
    },
    methods: {
        // 获取关于书嗨
        getAboutUs() {
            uni.showLoading({
                title: "加载中...",
            });
            uni.$u.http
                .get("/token/getArticleOne?code=aboutShuHi")
                .then((res) => {
                    if (res.code === 200) {
                        this.aboutUsData = res.data
                        this.articleHtml = formatArticleHtml(res.data.content || '')
                    } else {
                        this.$u.toast(res.msg || "获取关于书嗨失败");
                    }
                })
                .finally(() => {
                    uni.hideLoading();
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.user-agreement {
    min-height: 100vh;
    background-color: $app-theme-bg-color;
    padding: 30rpx;
    padding-bottom: 50px;

    .agreement-title {
        font-size: 36rpx;
        font-weight: bold;
        color: $app-theme-text-color;
        text-align: center;
        margin-bottom: 40rpx;
    }

    .agreement-content {
        font-size: 28rpx;
        color: $app-theme-text-color;
        line-height: 1.8;
        width: 100%;
        overflow: hidden;
    }

    .agreement-parse {
        width: 100%;
    }
}

::v-deep .agreement-parse {
    .interlayer {
        width: 100%;
        max-width: 100%;
    }

    .article-table-scroll,
    view[style*='overflow'] {
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
}
</style>