去除中缝和其他冗余代码

src/components.d.ts

@@ -10,10 +10,12 @@ declare module 'vue' {
   export interface GlobalComponents {
     BookMarks: typeof import('./components/GuideMobile/bookMarks.vue')['default']
     BookReader: typeof import('./components/BookReader/index.vue')['default']
+    copy: typeof import('./components/BookReader/index copy.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElRow: typeof import('element-plus/es')['ElRow']
     FileUpload: typeof import('./components/FileUpload.vue')['default']
     Guide: typeof import('./components/GuideMobile/guide.vue')['default']

src/components/BookReader/index.vue

@@ -49,9 +49,7 @@
                 }%`,
               }"
               @click="handleSmallImageClick(smallImage, page.page_num)"
-            >
-              <!-- <img :src="smallImage.url" :alt="`小图 ${imgIndex + 1}`" class="small-image" /> -->
-            </div>
+            ></div>
           </div>
         </div>
       </div>
@@ -122,7 +120,6 @@
 <script setup>
 import $ from "jquery";
 import "turn.js";
-// import * as 'turn' from '/public/js/turn'
 import { ref, onMounted, onUnmounted, watch, nextTick, computed } from "vue";
 import VueEasyLightbox from "vue-easy-lightbox";
 import GuideMobile from "../GuideMobile/index.vue";
@@ -882,22 +879,22 @@ const showGuide = () => {
   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;

src/router/index.js

@@ -15,10 +15,6 @@ export const constantRoutes = [
         path: '/detail/:id',
         component: () => import('@/views/detail/index.vue'),
     },
-    {
-        path: '/test',
-        component: () => import('@/views/test/index.vue'),
-    },
     {
         path: '/:pathMatch(.*)*',
         component: () => import('@/views/error/404.vue'),

src/views/detail/index.vue

@@ -39,7 +39,8 @@ async function loadData(id) {
 }
 
 function goBack() {
-  router.go(-1);
+  // router.go(-1);
+  router.push("/");
 }
 onMounted(() => {
   const { id } = route.params;

src/views/index/index.vue

 <template>
   <div class="book-list-container">
-    <!-- <van-nav-bar title="微方志" class="nav-bar">
-      <template #right>
-        <van-icon name="search" size="20" />
-      </template>
-    </van-nav-bar> -->
     <el-header class="header">微方志</el-header>
 
-    <!-- <van-row class="book-card-list">
-      <van-col
-        span="8"
+    <div class="book-card-list">
+      <div
+        class="book-card"
         v-for="(book, index) in books"
-        :key="book.book_id + index"
+        shadow="hover"
+        @click="openBook(book)"
       >
-        <div class="book-card" shadow="hover" @click="openBook(book)">
         <div class="book-cover"></div>
         <div class="book-name">{{ book.name }}</div>
       </div>
-      </van-col>
-    </van-row> -->
-    <el-row :gutter="16" class="book-card-list">
-      <el-col
-        v-for="(book, index) in books"
-        :key="book.book_id + index"
-        :span="8"
-        :lg="4"
-      >
-        <div class="book-card" shadow="hover" @click="openBook(book)">
-          <div class="book-cover"></div>
-          <div class="book-name">{{ book.name }}</div>
     </div>
-      </el-col>
-    </el-row>
   </div>
 </template>
 
@@ -56,7 +37,6 @@ async function loadData() {
 }
 
 function openBook(book) {
-  console.log(book);
   const query = {
     title: book.name,
   };
@@ -85,30 +65,36 @@ onMounted(() => {
   background-image: url(@/assets/images/5.jpg);
   background-size: cover;
   .book-card-list {
-    padding: 50px 13%;
+    padding: 30px 8%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 20px;
     .book-card {
       border-radius: 8px;
       cursor: pointer;
-      transition: all ease 0.3s;
+      transition: all 0.3s ease;
       &:hover {
-        transform: translateY(-10px);
+        transform: translateY(-5px);
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
       }
       .book-cover {
         background-image: url(@/assets/images/default2.jpg);
         background-size: cover;
+        aspect-ratio: 2/3;
         border-radius: 8px;
         display: flex;
         justify-content: center;
+        align-items: center;
         font-family: 楷体;
         font-size: 20px;
         margin-bottom: 10px;
-        width: 150px; /* 固定宽度 */
-        height: 200px; /* 高度按比例计算（2:3） */
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        box-sizing: border-box;
-        padding: 10px;
+      }
+      .book-name {
+        font-size: 16px;
+        text-align: center;
+        @media (min-width: 768px) {
+          font-size: 18px;
+        }
       }
     }
   }
@@ -116,23 +102,9 @@ onMounted(() => {
 
 @media (max-width: 768px) {
   .book-card-list {
-    padding: 30px;
-    .book-card {
-      border-radius: 8px;
-
-      .book-cover {
-        background-color: rgba(65, 184, 131, 0.4);
-        padding: 50px 10px;
-        border-radius: 8px;
-        display: flex;
-        justify-content: center;
-        font-family: 楷体;
-        font-size: 18px;
-        margin-bottom: 10px;
-        width: 150px; /* 固定宽度 */
-        height: 150px; /* 高度按比例计算（2:3） */
-      }
-    }
+    padding: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 15px;
   }
 }
 </style>

src/views/test/index.vue

-<template>
-  <book-reader-v2 />
-</template>
-
-<script lang="ts" setup></script>
-
-<style lang="scss" scoped></style>