learn_applet/pagesMy/introduce/index.vue

<template>
	<view class="content">
		<view class="one">
			<view class="one_1">
				<view class="text">关于我们</view>
				<view class="value">
					<rich-text class="rich" :nodes="formatRichText(config.brief)"></rich-text>
				</view>
			</view>
			<view class="one_1">
				<view class="text">联系我们</view>
				<view class="value">联系电话：{{config.phone||'暂无'}}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onShow } from "@dcloudio/uni-app";
	// 基本信息
	const config = ref({ logo: [], file: [] });
	onShow(async () => {
		await searchConfig();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 处理富文本
	const formatRichText = (html) => {
		if (html) {
			// 富文本内容格式化
			return html && html.replace(/<img[^>]*>/gi, function (match, capture) {
				// 查找所有的 img 元素
				return match.replace(/style=".*"/gi, '').replace(/style='.*'/gi,
					'')
				// 删除找到的所有 img 元素中的 style 属性
			}).replace(/\<img/gi, '<img style="width:100%;"') // 对 img 元素增加 style 属性，并设置宽度为 100%
		}
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		margin: 4vw;

		.one {
			padding: 2vw;
			border-radius: 5px;
			box-shadow:
				0 0 5px rgba(0, 0, 0, 0.1),
				/* 内阴影 */
				4px 0 5px rgba(0, 0, 0, 0.1),
				/* 右上 */
				-4px 0 5px rgba(0, 0, 0, 0.1),
				/* 左上 */
				0 4px 5px rgba(0, 0, 0, 0.1),
				/* 右下 */
				0 -4px 5px rgba(0, 0, 0, 0.1);

			/* 左下 */
			.one_1 {
				margin: 0 0 2vw 0;
				border: 1px solid var(--f9Color);

				.text {
					color: var(--3c9Color);
					font-size: var(--font16Size);
					margin: 0 0 2vw 0;
				}

				.value {
					font-size: var(--font14Size);

					.rich img {
						max-width: 100%;
						/* 图片宽度不超过其容器宽度 */
						height: auto;
						/* 图片高度自动 */
						display: block;
						/* 图片作为块级元素显示 */
						margin: 0 auto;
						/* 图片居中 */
					}
				}
			}
		}
	}
</style>