fix: constrain images in news detail modal
This commit is contained in:
@@ -1,9 +1,20 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Descriptions, Modal, Tag, Typography } from 'antd';
|
import { Descriptions, Modal, Tag, Typography } from 'antd';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
import DictTag from '@/components/DictTag';
|
import DictTag from '@/components/DictTag';
|
||||||
import type { DictValueEnumObj } from '@/components/DictTag';
|
import type { DictValueEnumObj } from '@/components/DictTag';
|
||||||
import { normalizeNewsContent } from '@/utils/newsImageUrl';
|
import { normalizeNewsContent } from '@/utils/newsImageUrl';
|
||||||
|
|
||||||
|
const useStyles = createStyles(() => ({
|
||||||
|
content: {
|
||||||
|
'& img': {
|
||||||
|
display: 'block',
|
||||||
|
maxWidth: '100%',
|
||||||
|
height: 'auto',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
interface DetailModalProps {
|
interface DetailModalProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
data?: API.NewsInfo.NewsInfoItem;
|
data?: API.NewsInfo.NewsInfoItem;
|
||||||
@@ -11,7 +22,10 @@ interface DetailModalProps {
|
|||||||
onCancel: () => void;
|
onCancel: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const DetailModal: React.FC<DetailModalProps> = ({ open, data, moduleEnum, onCancel }) => (
|
const DetailModal: React.FC<DetailModalProps> = ({ open, data, moduleEnum, onCancel }) => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
title="新闻资讯详情"
|
title="新闻资讯详情"
|
||||||
open={open}
|
open={open}
|
||||||
@@ -37,7 +51,7 @@ const DetailModal: React.FC<DetailModalProps> = ({ open, data, moduleEnum, onCan
|
|||||||
<Descriptions.Item label="正文" span={2}>
|
<Descriptions.Item label="正文" span={2}>
|
||||||
{data?.content ? (
|
{data?.content ? (
|
||||||
<Typography
|
<Typography
|
||||||
className="news-detail-content"
|
className={`${styles.content} news-detail-content`}
|
||||||
dangerouslySetInnerHTML={{ __html: normalizeNewsContent(data.content) }}
|
dangerouslySetInnerHTML={{ __html: normalizeNewsContent(data.content) }}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
@@ -50,5 +64,6 @@ const DetailModal: React.FC<DetailModalProps> = ({ open, data, moduleEnum, onCan
|
|||||||
</Descriptions>
|
</Descriptions>
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default DetailModal;
|
export default DetailModal;
|
||||||
|
|||||||
Reference in New Issue
Block a user