Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fb2a6b35 1 parent a7064769

refactor(PdfViewer): 将关闭按钮移至缩放控制栏并调整样式 

将顶部关闭按钮移除，功能迁移至缩放控制栏，同时调整按钮位置样式以改善用户体验
Inline Side-by-side
Showing 1 changed file with 6 additions and 6 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 10:49:55 4 + * @LastEditTime: 2025-10-22 11:21:20
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 -->
...@@ -50,11 +50,11 @@ ...@@ -50,11 +50,11 @@
50 </div> 50 </div>
51 </div> 51 </div>
52 52
53 - <!-- 关闭按钮 --> 53 + <!-- 已移除顶部关闭按钮，关闭功能迁移至控制栏 -->
54 - <van-button class="close-btn" type="default" icon="cross" round @click="handleClose" />
55 54
56 <!-- 缩放控制按钮 --> 55 <!-- 缩放控制按钮 -->
57 <div v-if="!loading && !loadingError" class="zoom-controls"> 56 <div v-if="!loading && !loadingError" class="zoom-controls">
57 + <van-button class="zoom-btn zoom-close-btn" type="default" icon="cross" round @click="handleClose" />
58 <van-button class="zoom-btn zoom-out-btn" type="default" icon="minus" round @click="zoomOut" /> 58 <van-button class="zoom-btn zoom-out-btn" type="default" icon="minus" round @click="zoomOut" />
59 <div class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</div> 59 <div class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</div>
60 <van-button class="zoom-btn zoom-in-btn" type="default" icon="plus" round @click="zoomIn" /> 60 <van-button class="zoom-btn zoom-in-btn" type="default" icon="plus" round @click="zoomIn" />
...@@ -540,8 +540,8 @@ const addPreventSaveListeners = () => { ...@@ -540,8 +540,8 @@ const addPreventSaveListeners = () => {
540 /* 关闭按钮样式 */ 540 /* 关闭按钮样式 */
541 .close-btn { 541 .close-btn {
542 position: fixed; 542 position: fixed;
543 - right: 20px; 543 + left: 20px;
544 - top: 20px; 544 + bottom: 40px;
545 z-index: 100; 545 z-index: 100;
546 width: 40px; 546 width: 40px;
547 height: 40px; 547 height: 40px;
...@@ -554,7 +554,7 @@ const addPreventSaveListeners = () => { ...@@ -554,7 +554,7 @@ const addPreventSaveListeners = () => {
554 /* 缩放控制按钮样式 */ 554 /* 缩放控制按钮样式 */
555 .zoom-controls { 555 .zoom-controls {
556 position: fixed; 556 position: fixed;
557 - bottom: 30px; 557 + bottom: 60px;
558 left: 50%; 558 left: 50%;
559 transform: translateX(-50%); 559 transform: translateX(-50%);
560 z-index: 100; 560 z-index: 100;
......