feat: 图书封面+链接

src/pages/book/index.scss

@@ -15,24 +15,29 @@
     .BookItem {
       flex-grow: 1; /* 自动增长填充空间 */
       flex-basis: 310px; /* 基本宽度为 300px，元素数量随可用空间调整 */
+      // align-items: center;
+      // justify-content: center;
+
       max-width: 320px;
       min-height: 350px;
+      max-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);
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
 
       .BookItem_img {
+        height: 350px;
       }
       .BookItem_right {
         display: none;
         // display: flex;
         // flex-direction: column;
         // align-items: center;
-        .BookItem_right_title{
+        .BookItem_right_title {
           font-size: 34px;
         }
         .BookItem_right_content {
@@ -60,8 +65,12 @@
       gap: 60px;
       .BookItem {
         flex-grow: 1; /* 自动增长填充空间 */
-        flex-basis: 500px; /* 基本宽度为 300px，元素数量随可用空间调整 */
+        flex-basis: 400px; /* 基本宽度为 300px，元素数量随可用空间调整 */
-        max-width: 540px;
+        // max-width: 600px;
+        // align-items: center;
+        justify-content: center;
+
+        max-width: 440px;
         height: 300px;
         margin-bottom: 40px;
 
@@ -72,6 +81,7 @@
         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; /* 背景色 */
+        // background-color: yellow;
         transition: box-shadow 0.3s ease;
 
         &:hover {

src/pages/book/index.tsx

@@ -20,6 +20,12 @@ import markdownText from "./text.md";
 import Nav from "@/pages/componments/Nav/index";
 import elevenImage from "@/images/book/11.jpg";
 import elevenImage2 from "@/images/book/22.jpg";
+import vps from "@/images/book/vpsbook.png";
+import ro from "@/images/book/robook.png";
+import yt from "@/images/book/ytbook.png";
+import company from "@/images/book/company.png";
+import ytGpt from "@/images/book/ytGpt.png";
+import nomadro from "@/images/book/nomadro.png";
 
 const Book = () => {
   const [markText, setmarkText] = useState();
@@ -39,6 +45,30 @@ const Book = () => {
       <Nav></Nav>
       <View className="BookItems">
         {[
+          {
+            imagePath: nomadro,
+            text: "数字游民",
+            title: "从零开始,做数字游民",
+            content:
+              "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://nomadro.com",
+          },
+          {
+            imagePath: ytGpt,
+            text: "youtube运营笔记",
+            title: "youtube运营笔记",
+            content:
+              "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://nomadyt.com",
+          },
+          {
+            imagePath: company,
+            text: "一人公司",
+            title: "一人公司",
+            content:
+              "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://nomadvps.com",
+          },
           {
             imagePath: elevenImage,
             text: "作者",
@@ -51,67 +81,23 @@ const Book = () => {
             imagePath: elevenImage2,
             text: "创业行",
             title: "创业行",
-            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            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"
               key={index}
               onClick={() => {
-              
                 // window.open(item?.url, '_blank');
                 setTimeout(() => {
                   window.location.href = item?.url;
                 }, 0); // ⏱️ 解耦浏览器的调试器
               }}
             >
-              <View className="BookItem_img" >
+              <View className="BookItem_img">
                 <Image
                   src={item?.imagePath}
                   style={{ width: "100%", height: "100%", objectFit: "cover" }}
@@ -120,11 +106,12 @@ const Book = () => {
               <View className="BookItem_right">
                 <View className="BookItem_right_title">{item.title}</View>
                 <View className="BookItem_right_content">
-                  {item.content.length > 80
+                  {item.content.length > 5
-                    ? `${item.content.slice(0, 80)}...`
+                    ? `${item.content.slice(0, 50)}...`
                     : item.content}
                 </View>
-                <View className="BookItem_right_text">{item?.text}</View>
+                {/* <View className="BookItem_right_text">{item?.text}</View> */}
+                <View className="BookItem_right_text"></View>
               </View>
             </View>
           );