fix(rich-text): 移除全局CSS导入避免影响其他组件样式
- 移除 @tarojs/taro/html.css 全局样式导入 - 在组件 scoped style 中添加完整的富文本样式 - 解决 NavHeader 标题不居中的问题
Showing
1 changed file
with
68 additions
and
3 deletions
| ... | @@ -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 | // 文件链接样式 | ... | ... |
-
Please register or login to post a comment