图片调整

This commit is contained in:
xixi 2024-07-25 16:58:56 +08:00
parent 73425b4cd7
commit 1771ea779b
3 changed files with 55 additions and 30 deletions

View File

@ -156,11 +156,12 @@ export default function CardProj(props: any) {
<div className='cpb-left-img'> <div className='cpb-left-img'>
<Carousel autoplay dots={false}> <Carousel autoplay dots={false}>
<div> <div className='cpb-left-imgX'>
<img src={downloadUrl(data.loginpage.loginpagePreviewImgs)} height={'143px'} alt="" /> <img src={downloadUrl(data.loginpage.loginpagePreviewImgs)} height={'143px'} alt="" />
</div> </div>
<div> <div className='cpb-left-imgX'>
<img src={downloadUrl(data.codeTypePage.previewImgs)} height={'143px'} alt="" /> <img src={downloadUrl(data.codeTypePage.previewImgs)} height={'143px'} alt="" />
</div> </div>
@ -498,7 +499,8 @@ export default function CardProj(props: any) {
onCancel={() => { onCancel={() => {
setLoginPageOpne(false); setLoginPageOpne(false);
// window.location.reload(); // 在取消时刷新页面 // window.location.reload(); // 在取消时刷新页面
}} }
}
footer={null} footer={null}
> >

View File

@ -127,14 +127,27 @@
height: 143px; height: 143px;
background: #F5F5F5; background: #F5F5F5;
border-radius: 6px; border-radius: 6px;
overflow: hidden;
}
.cpb-left-imgX {
/* width: 249px; */
width: 290px;
height: 143px;
background: #F5F5F5;
border-radius: 6px;
} }
.cpb-left-img img { .cpb-left-img img {
width: 100%; /* 使图片宽度等于容器宽度 */ width: 100%; /* 使图片宽度等于父元素宽度 */
height: 100%; /* 使图片高度等于容器高度 */ height: 100%; /* 使图片高度等于父元素高度 */
object-fit: cover; /* 图片等比例缩放并裁剪超出部分 */ object-fit: cover; /* 使图片等比例缩放并裁剪超出部分 */
object-position: center; /* 图片居中显示 */ object-position: center ; /* 确保图片在容器内居中显示 */
display: block; /* 去掉图片底部的空隙 */
/* 去掉图片底部的空隙 */
display: block;
} }
.cpbl-right { .cpbl-right {

View File

@ -187,6 +187,11 @@ export default function Payment(props: IPaymentProps) {
setIsRechargeMoneyEdit(false); setIsRechargeMoneyEdit(false);
getPay() getPay()
}}></Button> }}></Button>
<span style={{ color: '#1677ff', cursor: 'pointer' }}
onClick={() => {
setIsRechargeMoneyEdit(false)
}}
></span>
</div> </div>
) )
} }
@ -361,7 +366,12 @@ export default function Payment(props: IPaymentProps) {
} }
return <> return <>
<Flex gap="middle" align="center" justify="center" vertical> <Flex gap="middle" align="center" justify="center" vertical>
<div className="qr-code"> <div className="qr-code" style={{ position: 'relative' }}>
<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: "rgba(0,0,0,0.6)",backdropFilter: 'blur(10px)', zIndex: 99 ,display:isRechargeMoneyEdit?'block':'none'}}>
<div style={{color:'#fff', width: '100%', height: '100%',fontSize:30,display:'flex',alignItems:'center',justifyContent:'center'}}>
,...
</div>
</div>
<Image src={thirdPartyPayUrl} fallback={errorImage} preview={false} /> <Image src={thirdPartyPayUrl} fallback={errorImage} preview={false} />
{/* { {/* {
isCountdownTimeout ? ( isCountdownTimeout ? (