diff --git a/src/pages/book/index.scss b/src/pages/book/index.scss
index 4eead0c..a4cff76 100644
--- a/src/pages/book/index.scss
+++ b/src/pages/book/index.scss
@@ -14,12 +14,34 @@
     gap: 40px;
     .BookItem {
       flex-grow: 1; /* 自动增长填充空间 */
-      flex-basis: 300px; /* 基本宽度为 300px，元素数量随可用空间调整 */
+      flex-basis: 310px; /* 基本宽度为 300px，元素数量随可用空间调整 */
       max-width: 320px;
-      height: 350px;
-      background-color: greenyellow;
+      min-height: 350px;
+      // background-color: greenyellow;
       // margin-right: 100px;
       margin-bottom: 40px;
+      display: flex;
+      flex-direction: column;
+      // background-color: yellow;
+      // box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+
+      .BookItem_img {
+      }
+      .BookItem_right {
+        display: none;
+        // display: flex;
+        // flex-direction: column;
+        // align-items: center;
+        .BookItem_right_title{
+          font-size: 34px;
+        }
+        .BookItem_right_content {
+          // display: none;
+        }
+        .BookItem_right_text {
+          // display: none;
+        }
+      }
     }
   }
 }
@@ -38,12 +60,48 @@
       gap: 60px;
       .BookItem {
         flex-grow: 1; /* 自动增长填充空间 */
-        flex-basis: 240px; /* 基本宽度为 300px，元素数量随可用空间调整 */
-        max-width: 260px;
-        height: 350px;
-        background-color: green;
-        // margin-right: 100px;
+        flex-basis: 500px; /* 基本宽度为 300px，元素数量随可用空间调整 */
+        max-width: 540px;
+        height: 300px;
         margin-bottom: 40px;
+
+        display: flex;
+        flex-direction: row;
+
+        /* 添加卡片阴影样式 */
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+        border-radius: 8px; /* 圆角 */
+        background-color: #fff; /* 背景色 */
+        transition: box-shadow 0.3s ease;
+
+        &:hover {
+          box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15),
+            0 3px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .BookItem_img {
+          // background-color: yellow;
+          min-width: 300px;
+        }
+        .BookItem_right {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          padding-top: 20px;
+          padding-bottom: 20px;
+          padding-right: 10px;
+          .BookItem_right_title {
+            font-size: 24px;
+          }
+          .BookItem_right_content {
+            font-size: 16px;
+            color: greenyellow;
+          }
+          .BookItem_right_text {
+            font-size: 16px;
+            // color: greenyellow;
+          }
+        }
       }
     }
   }
diff --git a/src/pages/book/index.tsx b/src/pages/book/index.tsx
index 48eb04d..c91cade 100644
--- a/src/pages/book/index.tsx
+++ b/src/pages/book/index.tsx
@@ -39,34 +39,93 @@ const Book = () => {
       <Nav></Nav>
       <View className="BookItems">
         {[
-          { 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" },
+          {
+            imagePath: elevenImage,
+            text: "作者",
+            title: "认知跃迁",
+            content:
+              "认知跃迁认知跃迁认知跃迁认知跃迁认知认知跃迁认知跃迁认知跃知跃迁认知认知跃迁知跃迁认知认知跃迁知跃迁认知认知跃迁知跃迁认知认知跃迁迁认知跃迁认知跃迁跃迁认知跃迁认知跃迁认知跃迁",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },
+          {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },
+          {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },     {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },     {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },     {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },     {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },     {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },     {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          }
+
         ].map((item, index) => {
           return (
-            <View className="BookItem">
-              <Image
-                src={item?.imagePath}
-                style={{ width: "100%", height: "100%", objectFit: "cover" }}
-              />
+            <View
+              className="BookItem"
+              key={index}
+              onClick={() => {
+              
+                // window.open(item?.url, '_blank');
+                setTimeout(() => {
+                  window.location.href = item?.url;
+                }, 0); // ⏱️ 解耦浏览器的调试器
+              }}
+            >
+              <View className="BookItem_img" >
+                <Image
+                  src={item?.imagePath}
+                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                />
+              </View>
+              <View className="BookItem_right">
+                <View className="BookItem_right_title">{item.title}</View>
+                <View className="BookItem_right_content">
+                  {item.content.length > 80
+                    ? `${item.content.slice(0, 80)}...`
+                    : item.content}
+                </View>
+                <View className="BookItem_right_text">{item?.text}</View>
+              </View>
             </View>
           );
         })}
diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx
index 287eb89..579627d 100644
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -77,7 +77,9 @@ import IndexDetail from "./componments/IndexDetail/index";
 
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import "react-lazy-load-image-component/src/effects/blur.css";
-import Nav from './componments/Nav/index'
+// import Nav from './componments/Nav/index'
+import Nav from '@/pages/componments/Nav/index'
+
 // export default class Index extends Component {
 const Index = () => {
   const [current, setcurrent] = useState(0);