diff --git a/src/app.scss b/src/app.scss index d2cf1a5..85f0cbf 100644 --- a/src/app.scss +++ b/src/app.scss @@ -39,3 +39,120 @@ button[open-type="chooseAvatar"] { line-height: inherit !important; border-radius: 0 !important; } + +.content { + padding: 32px; + + // 富文本内容样式 + :global { + // 标题样式 + h1, h2, h3, h4, h5, h6 { + margin: 0; + font-weight: bold; + line-height: 1.4; + } + + h1 { font-size: 24px; } + h2 { font-size: 22px; } + h3 { font-size: 20px; } + h4 { font-size: 18px; } + h5 { font-size: 16px; } + h6 { font-size: 14px; } + + // 图片样式 + img { + max-width: 100%; + height: auto; + border-radius: 8px; + margin: 8px 0; + display: block; + } + + // 列表样式 + ul, ol { + li { + margin: 0; + } + } + + // 引用样式 + blockquote { + margin: 8px 0; + padding: 12px; + background-color: #f5f5f5; + border-left: 4px solid #ddd; + border-radius: 4px; + + p { + margin: 0; + font-style: italic; + } + } + + // 代码样式 + code { + background-color: #f5f5f5; + padding: 2px 6px; + border-radius: 4px; + font-family: 'Courier New', monospace; + font-size: 14px; + } + + pre { + background-color: #f5f5f5; + padding: 12px; + border-radius: 8px; + overflow-x: auto; + margin: 8px 0; + + code { + background: none; + padding: 0; + } + } + + // 表格样式 + table { + width: 100%; + border-collapse: collapse; + margin: 8px 0; + + th, td { + border: 1px solid #ddd; + padding: 12px; + text-align: left; + } + + th { + background-color: #f5f5f5; + font-weight: bold; + } + } + + // 链接样式 + a { + color: #1890ff; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + // 分割线样式 + hr { + margin: 12px 0; + border: none; + border-top: 1px solid #eee; + } + + // 强调样式 + strong, b { + font-weight: bold; + } + + em, i { + font-style: italic; + } + } +} diff --git a/src/article/detail.scss b/src/article/detail.scss deleted file mode 100644 index 94aed36..0000000 --- a/src/article/detail.scss +++ /dev/null @@ -1,128 +0,0 @@ -.content { - padding: 32px; - line-height: 2.4rem; - - // 富文本内容样式 - :global { - // 段落样式 - p { - margin: 16px 0; - line-height: 1.8; - text-align: justify; - } - - // 标题样式 - h1, h2, h3, h4, h5, h6 { - margin: 24px 0 16px 0; - font-weight: bold; - line-height: 1.4; - } - - h1 { font-size: 24px; } - h2 { font-size: 22px; } - h3 { font-size: 20px; } - h4 { font-size: 18px; } - h5 { font-size: 16px; } - h6 { font-size: 14px; } - - // 图片样式 - img { - max-width: 100%; - height: auto; - border-radius: 8px; - margin: 16px 0; - display: block; - } - - // 列表样式 - ul, ol { - margin: 16px 0; - padding-left: 24px; - - li { - margin: 8px 0; - line-height: 1.6; - } - } - - // 引用样式 - blockquote { - margin: 16px 0; - padding: 16px; - background-color: #f5f5f5; - border-left: 4px solid #ddd; - border-radius: 4px; - - p { - margin: 0; - font-style: italic; - } - } - - // 代码样式 - code { - background-color: #f5f5f5; - padding: 2px 6px; - border-radius: 4px; - font-family: 'Courier New', monospace; - font-size: 14px; - } - - pre { - background-color: #f5f5f5; - padding: 16px; - border-radius: 8px; - overflow-x: auto; - margin: 16px 0; - - code { - background: none; - padding: 0; - } - } - - // 表格样式 - table { - width: 100%; - border-collapse: collapse; - margin: 16px 0; - - th, td { - border: 1px solid #ddd; - padding: 12px; - text-align: left; - } - - th { - background-color: #f5f5f5; - font-weight: bold; - } - } - - // 链接样式 - a { - color: #1890ff; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - - // 分割线样式 - hr { - margin: 24px 0; - border: none; - border-top: 1px solid #eee; - } - - // 强调样式 - strong, b { - font-weight: bold; - } - - em, i { - font-style: italic; - } - } -} diff --git a/src/article/detail.tsx b/src/article/detail.tsx index 1fa7125..22d5313 100644 --- a/src/article/detail.tsx +++ b/src/article/detail.tsx @@ -6,7 +6,6 @@ import {CmsArticle} from "@/api/cms/cmsArticle/model" import {Eye} from '@nutui/icons-react-taro' // 显示html富文本 import {View, RichText} from '@tarojs/components' -import './detail.scss' import Line from "@/components/Gap"; import {getCmsArticle} from "@/api/cms/cmsArticle"; @@ -35,7 +34,7 @@ function Detail() {