diff --git a/src/pages/book/index.scss b/src/pages/book/index.scss index a4cff76..7247a90 100644 --- a/src/pages/book/index.scss +++ b/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,元素数量随可用空间调整 */ - max-width: 540px; + flex-basis: 400px; /* 基本宽度为 300px,元素数量随可用空间调整 */ + // 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 { diff --git a/src/pages/book/index.tsx b/src/pages/book/index.tsx index c91cade..110ad3a 100644 --- a/src/pages/book/index.tsx +++ b/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 = () => { {[ + { + 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 ( { - // window.open(item?.url, '_blank'); setTimeout(() => { window.location.href = item?.url; }, 0); // ⏱️ 解耦浏览器的调试器 }} > - + { {item.title} - {item.content.length > 80 - ? `${item.content.slice(0, 80)}...` + {item.content.length > 5 + ? `${item.content.slice(0, 50)}...` : item.content} - {item?.text} + {/* {item?.text} */} + );