style(PdfViewer): 调整缩放按钮样式和布局
将放大和缩小按钮的图标样式调整为统一大小和颜色 移除注释掉的旧代码,保持代码整洁
Showing
1 changed file
with
8 additions
and
3 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-01-21 | 2 | * @Date: 2025-01-21 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-10-22 15:25:21 | 4 | + * @LastEditTime: 2025-10-22 15:53:46 |
| 5 | * @FilePath: /mlaj/src/components/ui/PdfViewer.vue | 5 | * @FilePath: /mlaj/src/components/ui/PdfViewer.vue |
| 6 | * @Description: PDF预览组件 - 使用pdf-vue3库 | 6 | * @Description: PDF预览组件 - 使用pdf-vue3库 |
| 7 | --> | 7 | --> |
| ... | @@ -65,7 +65,10 @@ | ... | @@ -65,7 +65,10 @@ |
| 65 | > | 65 | > |
| 66 | <van-button class="zoom-btn zoom-close-btn" type="default" icon="cross" round @click="handleClose" /> | 66 | <van-button class="zoom-btn zoom-close-btn" type="default" icon="cross" round @click="handleClose" /> |
| 67 | <!-- <van-button class="zoom-btn zoom-in-btn" type="default" icon="plus" round @click="zoomIn" /> --> | 67 | <!-- <van-button class="zoom-btn zoom-in-btn" type="default" icon="plus" round @click="zoomIn" /> --> |
| 68 | - <font-awesome-icon icon="magnifying-glass-plus" class="text-2xl text-gray-600 ml-2 mr-2" @click="zoomIn" /> | 68 | + <div class="zoom-btn flex items-center justify-center" @click="zoomIn"> |
| 69 | + <font-awesome-icon icon="magnifying-glass-plus" class="text-xl ml-2 mr-2" style="color: #000;" /> | ||
| 70 | + </div> | ||
| 71 | + <!-- <font-awesome-icon icon="magnifying-glass-plus" class="text-2xl text-gray-600 ml-2 mr-2" @click="zoomIn" /> --> | ||
| 69 | <div class="page-jump" @click="focusPageInput"> | 72 | <div class="page-jump" @click="focusPageInput"> |
| 70 | <span class="page-display">{{ currentPage }} / {{ totalPages || 0 }}</span> | 73 | <span class="page-display">{{ currentPage }} / {{ totalPages || 0 }}</span> |
| 71 | <input | 74 | <input |
| ... | @@ -81,7 +84,9 @@ | ... | @@ -81,7 +84,9 @@ |
| 81 | /> | 84 | /> |
| 82 | </div> | 85 | </div> |
| 83 | <!-- <van-button class="zoom-btn zoom-out-btn" type="default" icon="minus" round @click="zoomOut" /> --> | 86 | <!-- <van-button class="zoom-btn zoom-out-btn" type="default" icon="minus" round @click="zoomOut" /> --> |
| 84 | - <font-awesome-icon icon="magnifying-glass-minus" class="text-2xl text-gray-600 ml-2 mr-2" @click="zoomOut" /> | 87 | + <div class="zoom-btn flex items-center justify-center" @click="zoomOut"> |
| 88 | + <font-awesome-icon icon="magnifying-glass-minus" class="text-xl ml-2 mr-2" style="color: #000;" /> | ||
| 89 | + </div> | ||
| 85 | <van-button class="zoom-btn zoom-reset-btn" type="default" round @click="resetZoom"> | 90 | <van-button class="zoom-btn zoom-reset-btn" type="default" round @click="resetZoom"> |
| 86 | <van-icon name="replay" size="16" /> | 91 | <van-icon name="replay" size="16" /> |
| 87 | </van-button> | 92 | </van-button> | ... | ... |
-
Please register or login to post a comment