hookehuyr

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

将顶部关闭按钮移除,功能迁移至缩放控制栏,同时调整按钮位置样式以改善用户体验
<!--
* @Date: 2025-01-21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-10-22 10:49:55
* @LastEditTime: 2025-10-22 11:21:20
* @FilePath: /mlaj/src/components/ui/PdfViewer.vue
* @Description: PDF预览组件 - 使用pdf-vue3库
-->
......@@ -50,11 +50,11 @@
</div>
</div>
<!-- 关闭按钮 -->
<van-button class="close-btn" type="default" icon="cross" round @click="handleClose" />
<!-- 已移除顶部关闭按钮,关闭功能迁移至控制栏 -->
<!-- 缩放控制按钮 -->
<div v-if="!loading && !loadingError" class="zoom-controls">
<van-button class="zoom-btn zoom-close-btn" type="default" icon="cross" round @click="handleClose" />
<van-button class="zoom-btn zoom-out-btn" type="default" icon="minus" round @click="zoomOut" />
<div class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</div>
<van-button class="zoom-btn zoom-in-btn" type="default" icon="plus" round @click="zoomIn" />
......@@ -540,8 +540,8 @@ const addPreventSaveListeners = () => {
/* 关闭按钮样式 */
.close-btn {
position: fixed;
right: 20px;
top: 20px;
left: 20px;
bottom: 40px;
z-index: 100;
width: 40px;
height: 40px;
......@@ -554,7 +554,7 @@ const addPreventSaveListeners = () => {
/* 缩放控制按钮样式 */
.zoom-controls {
position: fixed;
bottom: 30px;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
......