style(PdfViewer): 修改缩放按钮和页码跳转的背景颜色
将放大缩小按钮的图标颜色改为绿色(#4caf50),页码跳转背景透明度调整为50%
Showing
1 changed file
with
4 additions
and
4 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 17:40:14 | 4 | + * @LastEditTime: 2025-10-27 14:15:25 |
| 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 | --> |
| ... | @@ -66,7 +66,7 @@ | ... | @@ -66,7 +66,7 @@ |
| 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 | <div class="zoom-btn flex items-center justify-center" @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;" /> | 69 | + <font-awesome-icon icon="magnifying-glass-plus" class="text-xl ml-2 mr-2" style="color: #4caf50;" /> |
| 70 | </div> | 70 | </div> |
| 71 | <!-- <font-awesome-icon icon="magnifying-glass-plus" class="text-2xl text-gray-600 ml-2 mr-2" @click="zoomIn" /> --> | 71 | <!-- <font-awesome-icon icon="magnifying-glass-plus" class="text-2xl text-gray-600 ml-2 mr-2" @click="zoomIn" /> --> |
| 72 | <div class="page-jump" @click="focusPageInput"> | 72 | <div class="page-jump" @click="focusPageInput"> |
| ... | @@ -85,7 +85,7 @@ | ... | @@ -85,7 +85,7 @@ |
| 85 | </div> | 85 | </div> |
| 86 | <!-- <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" /> --> |
| 87 | <div class="zoom-btn flex items-center justify-center" @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;" /> | 88 | + <font-awesome-icon icon="magnifying-glass-minus" class="text-xl ml-2 mr-2" style="color: #4caf50;" /> |
| 89 | </div> | 89 | </div> |
| 90 | <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"> |
| 91 | <van-icon name="replay" size="16" /> | 91 | <van-icon name="replay" size="16" /> |
| ... | @@ -1057,7 +1057,7 @@ const applyPinchZoom = (newZoom, centerX, centerY, container) => { | ... | @@ -1057,7 +1057,7 @@ const applyPinchZoom = (newZoom, centerX, centerY, container) => { |
| 1057 | } | 1057 | } |
| 1058 | 1058 | ||
| 1059 | .page-jump:hover { | 1059 | .page-jump:hover { |
| 1060 | - background: rgba(0, 0, 0, 0.8); | 1060 | + background: rgba(0, 0, 0, 0.5); |
| 1061 | } | 1061 | } |
| 1062 | 1062 | ||
| 1063 | /* 错误状态样式 */ | 1063 | /* 错误状态样式 */ | ... | ... |
-
Please register or login to post a comment