feat: 添加 预警大图组件

This commit is contained in:
YuanHongbo 2024-03-05 11:11:36 +08:00
parent cd4bf82223
commit 1633eb9c99
2 changed files with 11 additions and 10 deletions

View File

@ -1,5 +1,5 @@
import React, { useImperativeHandle, useRef, useState, forwardRef } from 'react'; import React, { useImperativeHandle, useRef, useState, forwardRef } from 'react';
import { Modal, ModalProps, Space } from 'antd'; import { Modal, ModalProps, Space, SpaceProps } from 'antd';
import theme from 'antd/lib/theme'; import theme from 'antd/lib/theme';
import { DownloadOutlined } from '@ant-design/icons'; import { DownloadOutlined } from '@ant-design/icons';
import './index.less' import './index.less'
@ -23,12 +23,13 @@ interface ViewLargerImageModalProps {
title: string; title: string;
downloadText?: string; downloadText?: string;
modalProps?: ModalProps modalProps?: ModalProps
spaceProps?: SpaceProps;
} }
export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLargerImageModalProps>( export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLargerImageModalProps>(
(props, ref) => { (props, ref) => {
const { modalProps, downloadImg, imgStyle, title, downloadText = '下载大图' } = props const { modalProps, downloadImg, imgStyle, title, downloadText = '下载大图' ,spaceProps} = props
const { useToken } = theme const { useToken } = theme
const { token } = useToken() const { token } = useToken()
const [open, setOpen] = useState<boolean>(false); const [open, setOpen] = useState<boolean>(false);
@ -61,7 +62,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
onCancel={handleCancel} onCancel={handleCancel}
{...modalProps} {...modalProps}
> >
<Space size={0} styles={{ item: { backgroundColor: token.colorBgElevated } }}> <Space size={0} styles={{ item: { backgroundColor: '#F6F9FAFF' } }} {...spaceProps}>
<img alt={title} src={imgSrc} style={{ width: 789, height: 444, display: 'block', borderRadius: '0 0 0 6px', ...imgStyle }} /> <img alt={title} src={imgSrc} style={{ width: 789, height: 444, display: 'block', borderRadius: '0 0 0 6px', ...imgStyle }} />
<div className='right-context' style={{ borderRadius: '0 0 0 6px' }}> <div className='right-context' style={{ borderRadius: '0 0 0 6px' }}>

View File

@ -1,6 +1,6 @@
.zhst-biz-warning-record-card { .zhst-biz-warning-record-card {
.ant-card-body { .ant-card-body {
padding: 0 !important; padding: 0;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
line-height: 19px; line-height: 19px;
display: flex; display: flex;
@ -9,16 +9,16 @@
.left-context { .left-context {
flex: 1; flex: 1;
> div{ >div {
margin-top: 6px; margin-top: 6px;
} }
> div:nth-child(1) { >div:nth-child(1) {
margin-top: 0; margin-top: 0;
} }
} }
.description{ .description {
font-weight: bold; font-weight: bold;
} }
} }