diff --git a/src/app.scss b/src/app.scss
index e69de29..8f83a80 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -0,0 +1,4 @@
+.taro_page {
+    // 禁止页面切换动画
+    transition: none !important;  // 去除页面跳转动画
+  }
\ No newline at end of file
diff --git a/src/pages/book/index.scss b/src/pages/book/index.scss
index 9dd2ef0..4eead0c 100644
--- a/src/pages/book/index.scss
+++ b/src/pages/book/index.scss
@@ -1,26 +1,50 @@
-
 // 在 src/index.scss 中引入 GitHub Markdown 主题
-@import 'github-markdown-css/github-markdown.css';
+@import "github-markdown-css/github-markdown.css";
 
 .Book {
-  padding: 40px;
-//   font-size: 30px !important;
-  // color: #666;
-
-  .markdown-body{
-    font-size: 30px !important;
-  }
-  img {
-    max-width: 100%;
-    height: auto; /* 保持图像的纵横比 */
-  }
-  .formCode {
+  font-size: 40px;
+  .BookItems {
     display: flex;
     flex-direction: row;
-    .codeBtn {
-      background-color: aquamarine;
-      // height: 80px;
-      // color: red;
+    align-items: center;
+    // justify-content: space-around;
+    // background-color: yellow;
+    flex-wrap: wrap;
+    padding: 40px;
+    gap: 40px;
+    .BookItem {
+      flex-grow: 1; /* 自动增长填充空间 */
+      flex-basis: 300px; /* 基本宽度为 300px，元素数量随可用空间调整 */
+      max-width: 320px;
+      height: 350px;
+      background-color: greenyellow;
+      // margin-right: 100px;
+      margin-bottom: 40px;
+    }
+  }
+}
+
+@media (min-width: 1536px) {
+  .Book {
+    font-size: 20px;
+    .BookItems {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      // justify-content: space-around;
+      // background-color: yellow;
+      flex-wrap: wrap;
+      padding: 40px;
+      gap: 60px;
+      .BookItem {
+        flex-grow: 1; /* 自动增长填充空间 */
+        flex-basis: 240px; /* 基本宽度为 300px，元素数量随可用空间调整 */
+        max-width: 260px;
+        height: 350px;
+        background-color: green;
+        // margin-right: 100px;
+        margin-bottom: 40px;
+      }
     }
   }
 }
diff --git a/src/pages/book/index.tsx b/src/pages/book/index.tsx
index 8ffa802..48eb04d 100644
--- a/src/pages/book/index.tsx
+++ b/src/pages/book/index.tsx
@@ -15,28 +15,12 @@ import { AtList, AtListItem } from "taro-ui";
 import { AtForm, AtMessage } from "taro-ui";
 import { marked } from "marked";
 import markdownText from "./text.md";
+// import Nav from "@/pages/components/Nav/index.tsx";
+// import Nav from "../componments/Nav/index";
+import Nav from "@/pages/componments/Nav/index";
+import elevenImage from "@/images/book/11.jpg";
+import elevenImage2 from "@/images/book/22.jpg";
 
-marked.setOptions({
-  breaks: true, // 是否回车换行
-  gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
-  // pedantic: true, //严格模式
-  // highlight(code:any, lang:any) {
-  //   //  语法高亮
-  //   let val = code;
-  //   if (lang) {
-  //     val = hljs.highlight(lang, code).value;
-  //   } else {
-  //     val = hljs.highlightAuto(code).value;
-  //   }
-  //   return val;
-  // },
-});
-
-// const renderer = new marked.Renderer();
-// // 使用拓展
-// marked.use({ renderer });
-
-// export default class Index extends Component {
 const Book = () => {
   const [markText, setmarkText] = useState();
 
@@ -51,17 +35,41 @@ const Book = () => {
 
   return (
     <View className="Book">
-      {/* 渲染markdown */}
-      {/* <View
-        className="markdown-body" // 添加 GitHub Markdown 主题类
-        dangerouslySetInnerHTML={{ __html: marked(markdownText) }}
-      ></View> */}
-
-      <View>分类</View>
+      {/* 导航 */}
+      <Nav></Nav>
       <View className="BookItems">
-        <View className="BookItem">列表1</View>{" "}
-        <View className="BookItem">列表2</View>{" "}
-        <View className="BookItem">列表3</View>
+        {[
+          { imagePath: elevenImage, text: "列表1" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+          { imagePath: elevenImage2, text: "列表2" },
+        ].map((item, index) => {
+          return (
+            <View className="BookItem">
+              <Image
+                src={item?.imagePath}
+                style={{ width: "100%", height: "100%", objectFit: "cover" }}
+              />
+            </View>
+          );
+        })}
       </View>
     </View>
   );
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index 3fa3232..8dcaf30 100644
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -42,14 +42,14 @@
       .nomadcna {
         color: aqua !important;
       }
-      .AvatarView{
+      .AvatarView {
         margin-top: 10px;
         margin-bottom: 10px;
         display: flex;
         flex-direction: row;
         // align-items: center;
         // justify-content: space-between;
-        .Avatar{
+        .Avatar {
           width: 40px;
           height: 40px;
           margin-right: -10px;
@@ -58,7 +58,6 @@
         }
       }
 
-    
       .upjonNomad {
         margin-top: 40px;
         width: 100%;
@@ -124,7 +123,6 @@
     }
   }
 
-  
   .items {
     height: 100%;
     padding: 20px;