eric/gitlab-instance-0a899031_nomadcna
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 图书封面+链接

Browse Source
This commit is contained in:
hackrobot
2025-04-07 11:27:21 -05:00
parent e527889827
commit 49d7cf2040
2 changed files with 51 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/book/index.scss
View File

@@ -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 {

87
src/pages/book/index.tsx
View File

@@ -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.slice(0, 80)}...`
{item.content.length > 5
? `${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>
);