You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.7 KiB
TypeScript
118 lines
3.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Image } from 'antd';
|
|
import { EyeOutlined } from '@ant-design/icons';
|
|
import moment from 'moment';
|
|
|
|
|
|
interface ImageSinglePopoverProps {
|
|
src: string;
|
|
involved: any;
|
|
// handleInvolved: () => void;
|
|
reload: any;
|
|
time: any;
|
|
}
|
|
|
|
const ImageSinglePopover: React.FC<ImageSinglePopoverProps> = ({ src, involved, reload, time}) => {
|
|
const [visible, setVisible] = useState(false);
|
|
// const [open, setOpen] = useState(false);
|
|
|
|
// 定义一个方法，用于生成自定义的遮罩层
|
|
const generateMask = (text:any) => (
|
|
<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', fontSize: 12 }}>
|
|
<EyeOutlined style={{ marginRight: 8, fontSize: 12 }} />
|
|
<div>{text}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
// const content = (
|
|
// <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center',alignItems: 'center', height: 56}}>
|
|
// {/* <div>选项1</div>
|
|
// <div>选项2</div> */}
|
|
// <Button
|
|
// type="text"
|
|
// style={{ height:22, padding: 0,fontSize: 12,color: '#FFF' }}
|
|
// icon={<InfoCircleOutlined style={{ color: '#FAAD14',fontSize: 12}} />}
|
|
// onClick={()=>{
|
|
// // setInvolved(true)
|
|
// // handleInvolved();
|
|
// // reload()
|
|
// setOpen(false)
|
|
// }}
|
|
// >加入重点关注</Button>
|
|
// <Button
|
|
// type="text"
|
|
// style={{ height:22, padding: 0,fontSize: 12,color: '#FFF' }}
|
|
// icon={<CloseCircleOutlined style={{ color: '#E80D0D',fontSize: 12}} />}
|
|
// onClick={()=>{
|
|
// // setInvolved(false)
|
|
// // handleInvolved();
|
|
// // reload()
|
|
// setOpen(false)
|
|
// }}
|
|
// >移除重点关注</Button>
|
|
// </div>
|
|
// );
|
|
const handleVisibleChange = (value: boolean) => {
|
|
setVisible(value);
|
|
};
|
|
|
|
// const handleOpenChange = (value: boolean) => {
|
|
// setOpen(value);
|
|
// };
|
|
|
|
return (
|
|
<div style={{ position: 'relative', boxSizing: 'border-box', width: 140, height: 170, marginRight: 12 }}>
|
|
<Image
|
|
style={{ borderRadius: 4 }}
|
|
width={140}
|
|
height={140}
|
|
preview={{
|
|
visible,
|
|
src,
|
|
onVisibleChange: handleVisibleChange,
|
|
mask: generateMask("点击可预览大图"),
|
|
}}
|
|
src={src}
|
|
/>
|
|
<div style={{height: 30,textAlign: 'center',lineHeight: '30px',fontWeight: 500,color: '#333'}}>{moment(time).format('YYYY-MM-DD hh:mm:ss')}</div>
|
|
{/* <Popover
|
|
placement="right"
|
|
content={content}
|
|
trigger="click"
|
|
style={{ width: 104, height: 64 }}
|
|
color="rgba(0, 0, 0, 0.6)"
|
|
overlayInnerStyle={{ width: 104, height: 64, padding: 4, borderRadius: 2 }}
|
|
open={open}
|
|
onOpenChange={handleOpenChange}
|
|
>
|
|
<Button
|
|
style={{ position: 'absolute', bottom: 8, right: 0 }}
|
|
type="text"
|
|
icon={<EllipsisOutlined style={{ color: '#fff', fontSize: 24, transform: 'rotate(90deg)' }} />}
|
|
/>
|
|
</Popover> */}
|
|
{involved === 1 && (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
width: 64,
|
|
height: 24,
|
|
background: '#FAAD14',
|
|
borderRadius: '0px 4px 0px 4px',
|
|
color: '#FFF',
|
|
fontSize: 12,
|
|
textAlign: 'center',
|
|
lineHeight: '24px'
|
|
}}
|
|
>
|
|
重点关注
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ImageSinglePopover; |