feat: 添加 预警大图组件
This commit is contained in:
parent
cd4bf82223
commit
1633eb9c99
@ -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' }}>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user