去除小图加载

src/App.vue

-
 <script setup>
 import { ref } from 'vue'
 import BookReader from './components/BookReader.vue'
@@ -10,14 +9,14 @@ const fetchDocumentDetail = async (id) => {
   try {
     const res = await getDocumentDetail(id);
     // images.value  =res.map(item=>import.meta.env.VITE_API_BASE_URL +'/static/'+item.page_url)
-    documentPages.value = res.map(item=>{
+    documentPages.value = res.map(item => {
       return {
         ...item,
-        page_url:import.meta.env.VITE_API_BASE_URL +'/static/'+item.page_url,
-        images:item.images.map(img=>{
+        page_url: import.meta.env.VITE_API_BASE_URL + '/static/' + item.page_url,
+        images: item.images.map(img => {
           return {
             ...img,
-            url:import.meta.env.VITE_API_BASE_URL +'/static/'+img.url
+            url: import.meta.env.VITE_API_BASE_URL + '/static/' + img.url
           }
         })
       }
@@ -39,7 +38,7 @@ onMounted(() => {
 <template>
   <div class="app">
     <!-- <FileUpload @upload-complete="handleUploadComplete" /> -->
-    <BookReader v-if="documentPages.length > 0" :pages="documentPages" showExitMessage/>
+    <BookReader v-if="documentPages.length > 0" :pages="documentPages" showExitMessage />
     <!-- <div v-else class="empty-state">
       请上传PDF文件开始阅读
     </div> -->
@@ -47,6 +46,11 @@ onMounted(() => {
 </template>
 
 <style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
 .app {
   width: 100%;
   height: 100vh;

src/components/BookReader.vue

@@ -23,7 +23,7 @@
               width: `${(smallImage.position.x2 - smallImage.position.x1) * 100}%`,
               height: `${(smallImage.position.y2 - smallImage.position.y1) * 100}%`
             }" @click="handleSmallImageClick(smallImage, page.page_num)">
-              <img :src="smallImage.url" :alt="`小图 ${imgIndex + 1}`" class="small-image" />
+              <!-- <img :src="smallImage.url" :alt="`小图 ${imgIndex + 1}`" class="small-image" /> -->
             </div>
           </div>
         </div>
@@ -208,9 +208,9 @@ const initBook = async () => {
 
     // 初始化 turn.js
     $magazine.turn({
-      width: pageWidth * 1,
+      width: pageWidth * 2,
       height: pageHeight,
-      display: 'single',
+      display: 'double',
       acceleration: false,
       gradients: true,
       elevation: 50,
@@ -517,6 +517,7 @@ const handleSmallImageClick = (smallImage, pageNum) => {
   align-items: center;
   background-color: #333;
   position: relative;
+  background-image: url('../assets/images/bg2.jpg');
 }
 
 .magazine-viewport {