diff --git a/src/app.config.js b/src/app.config.js
index 642d9a3..5685e61 100644
--- a/src/app.config.js
+++ b/src/app.config.js
@@ -2,6 +2,8 @@ export default defineAppConfig({
   pages: [
     'pages/index/index',
     'pages/index/componments/KeywordJoin/index',
+    'pages/index/componments/NomadbookPage/index',
+
     'pages/my/index',
     'pages/my/componments/Log/index',
     'pages/my/componments/Quesion/index',
diff --git a/src/pages/index/componments/Nomadbook/index.jsx b/src/pages/index/componments/Nomadbook/index.jsx
index 9fd79f4..fb05c8d 100644
--- a/src/pages/index/componments/Nomadbook/index.jsx
+++ b/src/pages/index/componments/Nomadbook/index.jsx
@@ -25,7 +25,14 @@ const Nomadbook = () => {
   const [open, setopen] = useState(false);
 
   return (
-    <View className="Nomadbook">
+    <View
+      className="Nomadbook"
+      onClick={() => {
+        Taro.navigateTo({
+          url: "/pages/index/componments/NomadbookPage/index",
+        });
+      }}
+    >
       <View className="book">
         {[
           { imagePath: rework },
diff --git a/src/pages/index/componments/NomadbookPage/index.config.js b/src/pages/index/componments/NomadbookPage/index.config.js
new file mode 100644
index 0000000..f5bc592
--- /dev/null
+++ b/src/pages/index/componments/NomadbookPage/index.config.js
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '图书'
+})
diff --git a/src/pages/index/componments/NomadbookPage/index.jsx b/src/pages/index/componments/NomadbookPage/index.jsx
new file mode 100644
index 0000000..3acbb02
--- /dev/null
+++ b/src/pages/index/componments/NomadbookPage/index.jsx
@@ -0,0 +1,60 @@
+import { View, Text, Image, Button, Icon } from "@tarojs/components";
+import { useLoad } from "@tarojs/taro";
+import Taro from "@tarojs/taro";
+import {
+  AtAvatar,
+  AtTag,
+  AtIcon,
+  AtTabBar,
+  AtButton,
+  AtAccordion,
+  AtList,
+  AtListItem,
+} from "taro-ui";
+import "./index.scss";
+import rework from "@/images/book/rework.jpg";
+import dangan from "@/images/book/dangan.jpg";
+import fuye from "@/images/book/fuye.jpg";
+import poquan from "@/images/book/poquan.jpg";
+import chuangye from "@/images/book/chuangye.jpg";
+import hours from "@/images/book/hours.jpg";
+
+import { useEffect, useState } from "react";
+
+const NomadbookPage = () => {
+  const [open, setopen] = useState(false);
+
+  return (
+    <View className="NomadbookPage">
+      {/* <View>NomadbookPage</View> */}
+      <View className="book">
+        {[
+          { imagePath: rework },
+          { imagePath: dangan },
+          { imagePath: fuye },
+          { imagePath: poquan },
+          { imagePath: chuangye },
+          { imagePath: hours },
+        ].map((item, index) => {
+          return (
+            <View className="bookItem">
+              {" "}
+              <Image
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  background: " #fff",
+                  borderRadius: "10px",
+                }}
+                mode="scaleToFill"
+                src={item.imagePath}
+              />
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+export default NomadbookPage;
diff --git a/src/pages/index/componments/NomadbookPage/index.scss b/src/pages/index/componments/NomadbookPage/index.scss
new file mode 100644
index 0000000..d58ec72
--- /dev/null
+++ b/src/pages/index/componments/NomadbookPage/index.scss
@@ -0,0 +1,35 @@
+.NomadbookPage {
+  padding: 10px;
+  font-size: 25px;
+  // width: 320px;
+  // height: 230px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  // justify-content: center;
+  // background-color: red;
+  border-radius: 20px;
+  // border: solid 1px #8c8c8c;
+  // background-color: yellow;
+
+  .book {
+    // width: 100%;
+
+    // height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    // background-color: aquamarine;
+    padding: 10px;
+    .bookItem {
+      width: 200px;
+      height: 200px;
+      // background-color: yellow;
+      margin-top: 10px;
+      // margin-right: 10px;
+    }
+  }
+}