fix: 优化预览页面UI显示效果
- 标题改为半透明悬浮显示,添加毛玻璃效果 - 图片模式改为aspectFill消除黑边 - 为图片预览提供更大显示空间
This commit is contained in:
parent
e7c1743bd5
commit
3c87b60c18
|
|
@ -215,21 +215,26 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 40rpx;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
padding: 30rpx 40rpx;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10rpx);
|
||||
color: white;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fullscreen-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
text-shadow: 0 2px 8rpx rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
|
|
@ -256,8 +261,11 @@
|
|||
|
||||
/* 全屏滑动器 */
|
||||
.fullscreen-swiper {
|
||||
flex: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ export default function Index() {
|
|||
>
|
||||
{state.images.map((url, index) => (
|
||||
<SwiperItem key={index} className="swiper-item">
|
||||
<Image className="fullscreen-image" src={url} mode="aspectFit" />
|
||||
<Image className="fullscreen-image" src={url} mode="aspectFill" />
|
||||
</SwiperItem>
|
||||
))}
|
||||
</Swiper>
|
||||
|
|
|
|||
Loading…
Reference in New Issue