From 3c87b60c18c33fd9edf0dd1e3dc929adf1d59b95 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Mon, 1 Sep 2025 16:38:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2UI=E6=98=BE=E7=A4=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 标题改为半透明悬浮显示，添加毛玻璃效果
- 图片模式改为aspectFill消除黑边
- 为图片预览提供更大显示空间
---
 src/pages/index/index.css | 22 +++++++++++++++-------
 src/pages/index/index.tsx |  2 +-
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/pages/index/index.css b/src/pages/index/index.css
index c7e8f5d..c523522 100644
--- a/src/pages/index/index.css
+++ b/src/pages/index/index.css
@@ -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 {
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 5d85ed9..46e56e1 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -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>