<template>
	<fix-base-style :styleSpacing="styleSpacing" :styleColor="styleColor" :index="index">
		<view class="fix-rich-text">
			<mp-html :content="data"></mp-html>
		</view>
	</fix-base-style>
</template>

<script lang="ts" name="fix-rich-text" setup>
import { baseProps } from "../../hooks";
const props = defineProps({
	data: {
		type: String,
		default: "",
	},
	index: {
		type: Number,
		default: 0,
	},
	...baseProps,
});
</script>

<style lang="scss" scoped>
.fix-rich-text {
	box-sizing: border-box;
	overflow: hidden;
	:deep(img) {
		width: 100%;
		max-width: 100%;
		height: auto; /* 保持图像的原始纵横比 */
		display: block; /* 消除图像下方的默认间隙（如果是内联元素的话）*/
	}
}
</style>
