hookehuyr

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

- 移除 @tarojs/taro/html.css 全局样式导入
- 在组件 scoped style 中添加完整的富文本样式
- 解决 NavHeader 标题不居中的问题
...@@ -26,7 +26,7 @@ import { ref, watch, nextTick } from 'vue' ...@@ -26,7 +26,7 @@ import { ref, watch, nextTick } from 'vue'
26 import Taro from '@tarojs/taro' 26 import Taro from '@tarojs/taro'
27 import { $ } from '@tarojs/extend' 27 import { $ } from '@tarojs/extend'
28 import { useFileOperation } from '@/composables/useFileOperation' 28 import { useFileOperation } from '@/composables/useFileOperation'
29 -import '@tarojs/taro/html.css' 29 +// 注意:不再导入全局的 @tarojs/taro/html.css,改用 scoped 样式
30 30
31 /** 31 /**
32 * 组件属性 32 * 组件属性
...@@ -265,10 +265,75 @@ watch(() => props.enableTransform, () => { ...@@ -265,10 +265,75 @@ watch(() => props.enableTransform, () => {
265 265
266 <style lang="less" scoped> 266 <style lang="less" scoped>
267 .rich-text-content { 267 .rich-text-content {
268 - // 继承 Taro HTML 样式 268 + // Taro v-html 基础样式(替代 @tarojs/taro/html.css)
269 - :deep(img) { 269 + :deep(.h5-p) {
270 + margin: 16rpx 0;
271 + }
272 +
273 + :deep(.h5-img) {
270 max-width: 100%; 274 max-width: 100%;
271 height: auto; 275 height: auto;
276 + display: block;
277 + }
278 +
279 + :deep(h1) {
280 + font-size: 48rpx;
281 + font-weight: bold;
282 + margin: 32rpx 0 16rpx;
283 + }
284 +
285 + :deep(h2) {
286 + font-size: 40rpx;
287 + font-weight: bold;
288 + margin: 24rpx 0 12rpx;
289 + }
290 +
291 + :deep(h3) {
292 + font-size: 36rpx;
293 + font-weight: bold;
294 + margin: 20rpx 0 12rpx;
295 + }
296 +
297 + :deep(h4) {
298 + font-size: 32rpx;
299 + font-weight: bold;
300 + margin: 16rpx 0 8rpx;
301 + }
302 +
303 + :deep(p) {
304 + font-size: 28rpx;
305 + line-height: 1.6;
306 + margin: 12rpx 0;
307 + color: #333;
308 + }
309 +
310 + :deep(ul),
311 + :deep(ol) {
312 + padding-left: 48rpx;
313 + margin: 16rpx 0;
314 + }
315 +
316 + :deep(li) {
317 + font-size: 28rpx;
318 + line-height: 1.6;
319 + margin: 8rpx 0;
320 + }
321 +
322 + :deep(strong) {
323 + font-weight: bold;
324 + }
325 +
326 + :deep(em) {
327 + font-style: italic;
328 + }
329 +
330 + :deep(a) {
331 + color: #1989fa;
332 + text-decoration: underline;
333 + }
334 +
335 + :deep(span) {
336 + font-size: 28rpx;
272 } 337 }
273 338
274 // 文件链接样式 339 // 文件链接样式
......