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