hookehuyr

fix(rich-text): 移除全局CSS导入避免影响其他组件样式

- 移除 @tarojs/taro/html.css 全局样式导入
- 在组件 scoped style 中添加完整的富文本样式
- 解决 NavHeader 标题不居中的问题
......@@ -26,7 +26,7 @@ import { ref, watch, nextTick } from 'vue'
import Taro from '@tarojs/taro'
import { $ } from '@tarojs/extend'
import { useFileOperation } from '@/composables/useFileOperation'
import '@tarojs/taro/html.css'
// 注意:不再导入全局的 @tarojs/taro/html.css,改用 scoped 样式
/**
* 组件属性
......@@ -265,10 +265,75 @@ watch(() => props.enableTransform, () => {
<style lang="less" scoped>
.rich-text-content {
// 继承 Taro HTML 样式
:deep(img) {
// Taro v-html 基础样式(替代 @tarojs/taro/html.css)
:deep(.h5-p) {
margin: 16rpx 0;
}
:deep(.h5-img) {
max-width: 100%;
height: auto;
display: block;
}
:deep(h1) {
font-size: 48rpx;
font-weight: bold;
margin: 32rpx 0 16rpx;
}
:deep(h2) {
font-size: 40rpx;
font-weight: bold;
margin: 24rpx 0 12rpx;
}
:deep(h3) {
font-size: 36rpx;
font-weight: bold;
margin: 20rpx 0 12rpx;
}
:deep(h4) {
font-size: 32rpx;
font-weight: bold;
margin: 16rpx 0 8rpx;
}
:deep(p) {
font-size: 28rpx;
line-height: 1.6;
margin: 12rpx 0;
color: #333;
}
:deep(ul),
:deep(ol) {
padding-left: 48rpx;
margin: 16rpx 0;
}
:deep(li) {
font-size: 28rpx;
line-height: 1.6;
margin: 8rpx 0;
}
:deep(strong) {
font-weight: bold;
}
:deep(em) {
font-style: italic;
}
:deep(a) {
color: #1989fa;
text-decoration: underline;
}
:deep(span) {
font-size: 28rpx;
}
// 文件链接样式
......