删除多余的样式

src/components/BookReader/index.vue

@@ -85,10 +85,18 @@
     <el-row :gutter="10" class="tab-bar">
       <el-col :class="['left', { isMobile }]" :span="isMobile ? 24 : 8">
         <svg-icon name="menu" size="20" @click="showGuide"></svg-icon>
-        <!-- <svg-icon name="list" size="20" @click="showGuide"></svg-icon> -->
-        <svg-icon name="zoom-in" size="20" @click="zoomOut"></svg-icon>
-        <svg-icon name="zoom-out" size="20" @click="zoomIn"></svg-icon>
-        <!-- <svg-icon name="volumn" size="20"></svg-icon> -->
+        <svg-icon
+          name="zoom-in"
+          size="20"
+          v-if="!isMobile"
+          @click="zoomOut"
+        ></svg-icon>
+        <svg-icon
+          name="zoom-out"
+          size="20"
+          v-if="!isMobile"
+          @click="zoomIn"
+        ></svg-icon>
         <!-- 修改音量图标部分 -->
         <svg-icon
           :name="isMuted ? 'volume-mute' : 'volume-high'"
@@ -96,10 +104,10 @@
           @click="toggleMute"
         />
       </el-col>
-      <el-col class="center" :span="8" v-if="!isMobile">
+      <el-col class="center" :span="8">
         <svg-icon name="to-first" size="30" @click="toFirst"></svg-icon>
         <svg-icon name="to-left" size="22" @click="previous"></svg-icon>
-        <div class="page-count">第{{ currentPage }}页</div>
+        <div class="page-count" v-if="!isMobile">第{{ currentPage }}页</div>
         <svg-icon name="to-right" size="22" @click="next"></svg-icon>
         <svg-icon name="to-end" size="30" @click="toEnd"></svg-icon>
       </el-col>
@@ -368,9 +376,9 @@ const initBook = async () => {
       width: isMobile.value ? pageWidth : pageWidth * 2,
       height: pageHeight,
       display: isMobile.value ? "single" : "double",
-      acceleration: false,
+      acceleration: true,
       gradients: true,
-      elevation: 50,
+      elevation: 100,
       duration: 800,
       autoCenter: true,
       turnCorners: "bl,br",
@@ -809,19 +817,18 @@ const showGuide = () => {
 </script>
 
 <style scoped lang="scss">
-@import "./mobile.scss";
-.page {
-  width: 100%;
-  height: 100%;
-  background-color: white; // 确保翻页时有白色背景
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-}
+// .page {
+//   width: 100%;
+//   height: 100%;
+//   background-color: white !important; // 确保翻页时有白色背景
+//   overflow: hidden;
+//   backface-visibility: visible; // 确保背面可见
+//   img {
+//     width: 100%;
+//     height: 100%;
+//     object-fit: contain;
+//   }
+// }
 
 .book-reader-container {
   position: relative;
@@ -871,26 +878,26 @@ const showGuide = () => {
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
   will-change: transform;
   visibility: visible !important;
-  backface-visibility: hidden;
+  // backface-visibility: hidden;
   transform-style: preserve-3d;
 }
 
-// .magazine::after {
-//   content: "";
-//   position: absolute;
-//   top: 0;
-//   left: 50%;
-//   width: 1px;
-//   height: 100%;
-//   background: linear-gradient(
-//     to bottom,
-//     rgba(0, 0, 0, 0.1) 0%,
-//     rgba(0, 0, 0, 0.2) 50%,
-//     rgba(0, 0, 0, 0.1) 100%
-//   );
-//   z-index: 10;
-//   pointer-events: none;
-// }
+.magazine::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 1px;
+  height: 100%;
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.1) 0%,
+    rgba(0, 0, 0, 0.2) 50%,
+    rgba(0, 0, 0, 0.1) 100%
+  );
+  z-index: 10;
+  pointer-events: none;
+}
 
 .page {
   background-color: white;
@@ -900,105 +907,105 @@ const showGuide = () => {
   overflow: hidden;
   user-select: none;
   visibility: visible !important;
-  backface-visibility: hidden;
+  backface-visibility: visible;
   transform-style: preserve-3d;
   transform: translate3d(0, 0, 0);
   box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
 }
 
-.page:before {
-  content: "";
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  bottom: 0;
-  z-index: 10;
-}
+// .page:before {
+//   content: "";
+//   position: absolute;
+//   width: 100px;
+//   height: 100px;
+//   bottom: 0;
+//   z-index: 10;
+// }
 
-.page.odd:before {
-  right: 0;
-  background: linear-gradient(315deg, rgba(0, 0, 0, 0.2) 0%, transparent 50%);
-}
+// .page.odd:before {
+//   right: 0;
+//   background: linear-gradient(315deg, rgba(0, 0, 0, 0.2) 0%, transparent 50%);
+// }
 
-.page.even:before {
-  left: 0;
-  background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, transparent 50%);
-}
+// .page.even:before {
+//   left: 0;
+//   background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, transparent 50%);
+// }
 
-.page-image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  pointer-events: none;
-  visibility: visible !important;
-  backface-visibility: hidden;
-  transform-style: preserve-3d;
-  transform: translate3d(0, 0, 0);
-}
+// .page-image {
+//   width: 100%;
+//   height: 100%;
+//   object-fit: contain;
+//   pointer-events: none;
+//   visibility: visible !important;
+//   // backface-visibility: hidden;
+//   transform-style: preserve-3d;
+//   transform: translate3d(0, 0, 0);
+// }
 
-.exit-message {
-  position: fixed;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(0, 0, 0, 0.5);
-  color: white;
-  padding: 10px 20px;
-  border-radius: 4px;
-  z-index: 1000;
-}
+// .exit-message {
+//   position: fixed;
+//   top: 20px;
+//   left: 50%;
+//   transform: translateX(-50%);
+//   background: rgba(0, 0, 0, 0.5);
+//   color: white;
+//   padding: 10px 20px;
+//   border-radius: 4px;
+//   z-index: 1000;
+// }
 
-.page.wide-page {
-  width: 200% !important;
-  left: 0 !important;
-  z-index: 5 !important;
-}
+// .page.wide-page {
+//   width: 200% !important;
+//   left: 0 !important;
+//   z-index: 5 !important;
+// }
 
-.page.wide-page.isHidden {
-  display: none !important;
-}
+// .page.wide-page.isHidden {
+//   display: none !important;
+// }
 
-.wide-image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
+// .wide-image {
+//   width: 100%;
+//   height: 100%;
+//   object-fit: contain;
+// }
 
 /* 确保宽图页面的阴影效果 */
-.page.wide-page::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2);
-  pointer-events: none;
-  z-index: 1;
-}
+// .page.wide-page::after {
+//   content: "";
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+//   right: 0;
+//   bottom: 0;
+//   box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2);
+//   pointer-events: none;
+//   z-index: 1;
+// }
 
 /* 角落悬停效果 */
-.page.hover::before {
-  content: "";
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  pointer-events: none;
-  z-index: 10;
-  transition: all 0.3s ease;
-}
+// .page.hover::before {
+//   content: "";
+//   position: absolute;
+//   width: 100px;
+//   height: 100px;
+//   pointer-events: none;
+//   z-index: 10;
+//   transition: all 0.3s ease;
+// }
 
-.page.hover:nth-child(odd)::before {
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(315deg, rgba(0, 0, 0, 0.2) 0%, transparent 80%);
-}
+// .page.hover:nth-child(odd)::before {
+//   right: 0;
+//   bottom: 0;
+//   background: linear-gradient(315deg, rgba(0, 0, 0, 0.2) 0%, transparent 80%);
+// }
 
-.page.hover:nth-child(even)::before {
-  left: 0;
-  bottom: 0;
-  background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, transparent 80%);
-}
+// .page.hover:nth-child(even)::before {
+//   left: 0;
+//   bottom: 0;
+//   background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, transparent 80%);
+// }
 
 /* 缩放状态样式 */
 .magazine.zoomed {
@@ -1017,15 +1024,6 @@ const showGuide = () => {
   }
 }
 
-.magazine-viewport.turn-page-wrapper .turn-page {
-  overflow: hidden !important;
-  background-color: red;
-}
-
-#magazine .turn-page {
-  background-color: red;
-  background-size: 100% 100%;
-}
 .small-images-overlay {
   position: absolute;
   top: 0;