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

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

feat(图片预览): 添加自定义关闭按钮并调整预览样式
在图片预览组件中添加自定义关闭按钮，移除默认关闭功能，并调整相关样式以提升用户体验。同时优化PDF查看器的控制栏样式和交互效果。
hookehuyr
Commit 6e51b43b31476b8b24d96d0e721e22ff9d997569 6e51b43b 1 parent fc7c974f
Showing 2 changed files with 63 additions and 21 deletions
src/components/ui/PdfViewer.vue
src/views/study/StudyDetailPage.vue
--- a/src/components/ui/PdfViewer.vue
View file @6e51b43
+++ b/src/components/ui/PdfViewer.vue
View file @6e51b43
 <!--
  * @Date: 2025-01-21
  * @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
  * @Description: PDF预览组件 - 使用pdf-vue3库
 -->
@@ -53,8 +53,8 @@
             <!-- 已移除顶部关闭按钮，关闭功能迁移至控制栏 -->
             <!-- 缩放控制按钮 -->
-            <div 
+            <div
-                v-if="!loading && !loadingError" 
+                v-if="!loading && !loadingError"
                 class="zoom-controls"
                 :class="{ 'dragging': isDragging }"
                 :style="{ bottom: controlsY + 'px' }"
@@ -206,7 +206,7 @@ const handleDragStart = (e) => {
     if (e.target.closest('.zoom-btn') || e.target.closest('.page-jump')) {
         return;
     }
-    
+
     dragStartY.value = e.clientY;
     initialControlsY.value = controlsY.value; // 记录拖动开始时的位置
     dragOffset.value = 0;
@@ -220,19 +220,19 @@ const handleDragStart = (e) => {
  */
 const handleDragMove = (e) => {
     const deltaY = Math.abs(dragStartY.value - e.clientY);
-    
+
     // 只有移动距离超过阈值才开始拖动
     if (!isDragging.value && deltaY > dragThreshold) {
         isDragging.value = true;
         e.preventDefault();
     }
-    
+
     if (!isDragging.value) return;
-    
+
     const actualDeltaY = dragStartY.value - e.clientY; // 向上为正，向下为负
     const dampingFactor = 0.3; // 阻尼系数，降低移动速度
     const dampedDelta = actualDeltaY * dampingFactor;
-    
+
     const newY = Math.max(20, Math.min(window.innerHeight - 100, initialControlsY.value + dampedDelta));
     controlsY.value = newY;
     dragOffset.value = dampedDelta;
@@ -259,7 +259,7 @@ const handleTouchStart = (e) => {
         if (e.target.closest('.zoom-btn') || e.target.closest('.page-jump')) {
             return;
         }
-        
+
         dragStartY.value = e.touches[0].clientY;
         initialControlsY.value = controlsY.value; // 记录拖动开始时的位置
         dragOffset.value = 0;
@@ -272,21 +272,21 @@ const handleTouchStart = (e) => {
  */
 const handleTouchMove = (e) => {
     if (e.touches.length !== 1) return;
-    
+
     const deltaY = Math.abs(dragStartY.value - e.touches[0].clientY);
-    
+
     // 只有移动距离超过阈值才开始拖动
     if (!isDragging.value && deltaY > dragThreshold) {
         isDragging.value = true;
         e.preventDefault();
     }
-    
+
     if (!isDragging.value) return;
-    
+
     const actualDeltaY = dragStartY.value - e.touches[0].clientY; // 向上为正，向下为负
     const dampingFactor = 0.4; // 移动端稍微高一点的阻尼系数
     const dampedDelta = actualDeltaY * dampingFactor;
-    
+
     const newY = Math.max(20, Math.min(window.innerHeight - 100, initialControlsY.value + dampedDelta));
     controlsY.value = newY;
     dragOffset.value = dampedDelta;
@@ -864,27 +864,30 @@ const applyPinchZoom = (newZoom, centerX, centerY, container) => {
     flex-direction: row;
     align-items: center;
     gap: 12px;
-    background: rgba(255, 255, 255, 0.95);
+    background: rgba(255, 255, 255, 0.15);
     padding: 12px 20px;
     border-radius: 25px;
     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;
     cursor: grab;
     user-select: none;
 }
 .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);
     transform: translateX(-50%) translateY(-2px);
+    backdrop-filter: blur(20px);
 }
 .zoom-controls.dragging {
     cursor: grabbing;
     transform: translateX(-50%) scale(1.05);
     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;
 }
--- a/src/views/study/StudyDetailPage.vue
View file @6e51b43
+++ b/src/views/study/StudyDetailPage.vue
View file @6e51b43
@@ -221,13 +221,18 @@
         <van-image-preview
             v-model:show="showPreview"
             :images="previewImages"
-            :close-on-click-image="true"
+            :show-index="false"
-            :show-index="true"
+            :close-on-click-image="false"
-            closeable
         >
             <template #image="{ src, style, onLoad }">
                 <img :src="src" :style="[{ width: '100%' }, style]" @load="onLoad" />
             </template>
+            <template #cover>
+                <!-- 关闭按钮 -->
+                <div class="image-preview-close-btn" @click="closeImagePreview">
+                    <van-icon name="cross" size="20" color="#fff" />
+                </div>
+            </template>
         </van-image-preview>
         <!-- 课程目录弹出层 -->
@@ -753,6 +758,11 @@ const showImagePreview = (startPosition) => {
     showPreview.value = true;
 };
+// 关闭图片预览
+const closeImagePreview = () => {
+    showPreview.value = false;
+};
+
 // 评论列表分页参数
 const popupCommentList = ref([]);
 const popupLoading = ref(false);
@@ -1967,4 +1977,33 @@ const getFileType = (fileName) => {
     width: 100%;
     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>