feat(图片预览): 添加自定义关闭按钮并调整预览样式

在图片预览组件中添加自定义关闭按钮，移除默认关闭功能，并调整相关样式以提升用户体验。同时优化PDF查看器的控制栏样式和交互效果。

 <!--
 <!--
  * @Date: 2025-01-21
  * @Date: 2025-01-21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-22 14:11:50
+ * @LastEditTime: 2025-10-22 15:08:11
  * @FilePath: /mlaj/src/components/ui/PdfViewer.vue
  * @FilePath: /mlaj/src/components/ui/PdfViewer.vue
  * @Description: PDF预览组件 - 使用pdf-vue3库
  * @Description: PDF预览组件 - 使用pdf-vue3库
 -->
 -->
@@ -864,27 +864,30 @@ const applyPinchZoom = (newZoom, centerX, centerY, container) => {
     flex-direction: row;
     flex-direction: row;
     align-items: center;
     align-items: center;
     gap: 12px;
     gap: 12px;
-    background: rgba(255, 255, 255, 0.95);
+    background: rgba(255, 255, 255, 0.15);
     padding: 12px 20px;
     padding: 12px 20px;
     border-radius: 25px;
     border-radius: 25px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-    backdrop-filter: blur(8px);
+    backdrop-filter: blur(1px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
     transition: all 0.3s ease;
     transition: all 0.3s ease;
     cursor: grab;
     cursor: grab;
     user-select: none;
     user-select: none;
 }
 }
 
 
 .zoom-controls:hover {
 .zoom-controls:hover {
-    background: rgba(255, 255, 255, 1);
+    background: rgba(255, 255, 255, 0.7);
     box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
     box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
     transform: translateX(-50%) translateY(-2px);
     transform: translateX(-50%) translateY(-2px);
+    backdrop-filter: blur(20px);
 }
 }
 
 
 .zoom-controls.dragging {
 .zoom-controls.dragging {
     cursor: grabbing;
     cursor: grabbing;
     transform: translateX(-50%) scale(1.05);
     transform: translateX(-50%) scale(1.05);
     box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
     box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
-    background: rgba(255, 255, 255, 1);
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(25px);
     transition: none;
     transition: none;
 }
 }
 
 

@@ -221,13 +221,18 @@
         <van-image-preview
         <van-image-preview
             v-model:show="showPreview"
             v-model:show="showPreview"
             :images="previewImages"
             :images="previewImages"
-            :close-on-click-image="true"
-            :show-index="true"
-            closeable
+            :show-index="false"
+            :close-on-click-image="false"
         >
         >
             <template #image="{ src, style, onLoad }">
             <template #image="{ src, style, onLoad }">
                 <img :src="src" :style="[{ width: '100%' }, style]" @load="onLoad" />
                 <img :src="src" :style="[{ width: '100%' }, style]" @load="onLoad" />
             </template>
             </template>
+            <template #cover>
+                <!-- 关闭按钮 -->
+                <div class="image-preview-close-btn" @click="closeImagePreview">
+                    <van-icon name="cross" size="20" color="#fff" />
+                </div>
+            </template>
         </van-image-preview>
         </van-image-preview>
 
 
         <!-- 课程目录弹出层 -->
         <!-- 课程目录弹出层 -->
@@ -753,6 +758,11 @@ const showImagePreview = (startPosition) => {
     showPreview.value = true;
     showPreview.value = true;
 };
 };
 
 
+// 关闭图片预览
+const closeImagePreview = () => {
+    showPreview.value = false;
+};
+
 // 评论列表分页参数
 // 评论列表分页参数
 const popupCommentList = ref([]);
 const popupCommentList = ref([]);
 const popupLoading = ref(false);
 const popupLoading = ref(false);
@@ -1967,4 +1977,33 @@ const getFileType = (fileName) => {
     width: 100%;
     width: 100%;
     padding: 0px;
     padding: 0px;
 }
 }
+
+// 图片预览关闭按钮样式
+.image-preview-close-btn {
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    width: 50px;
+    height: 50px;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.image-preview-close-btn:hover {
+    background: rgba(0, 0, 0, 0.8);
+    transform: translateX(-50%) scale(1.1);
+}
+
+.image-preview-close-btn:active {
+    transform: translateX(-50%) scale(0.95);
+}
 </style>
 </style>