diff --git a/src/images/book.svg b/src/images/book.svg
new file mode 100644
index 0000000..6f4476d
--- /dev/null
+++ b/src/images/book.svg
@@ -0,0 +1,23 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/images/group.svg b/src/images/group.svg
new file mode 100644
index 0000000..507db71
--- /dev/null
+++ b/src/images/group.svg
@@ -0,0 +1,20 @@
+
+
+
\ No newline at end of file
diff --git a/src/images/youtube copy.svg b/src/images/youtube copy.svg
new file mode 100644
index 0000000..92aaf5a
--- /dev/null
+++ b/src/images/youtube copy.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx
index fafe690..47c53e1 100644
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -32,7 +32,7 @@ import emoji from "../../images/emoji.png";
import phone from "../../images/phone.png";
// import robot from "../../images/robot.png";
import nomad from "../../images/nomad.png";
-import book from "../../images/book.png";
+// import book from "../../images/book.png";
import qrcode from "../../images/qrcode.png";
import meetup from "../../images/meetup.jpg";
@@ -52,7 +52,9 @@ import nomadro from "../../images/nomadro.png";
import code from "../../images/code.svg";
import laptop from "../../images/laptop.svg";
import travel from "../../images/travel.svg";
-
+import group from "../../images/group.svg";
+import book from "../../images/book.svg";
+import youtubesvg from "../../images/youtube.svg";
// export default class Index extends Component {
const Index = () => {
const [current, setcurrent] = useState(0);
@@ -353,16 +355,54 @@ const Index = () => {
《从零开始,成为数字游民》
{/* 手册3 */}
-
+ {/*
🚀 边旅行转赚钱
1️⃣ 杠杆:媒体与代码
2️⃣ 出海:地理套利
3️⃣ 即时业务:一夜之间上线网站
4️⃣ homelab:你的全球总部
5️⃣ 远程团队:分布式协作
- {/* 5️⃣ ----------------- */}
+ 5️⃣ -----------------
- {/* 🔥 一起实践,交流 */}
+ 🔥 一起实践,交流
+ */}
+
+ {/* 卡片 */}
+
+
+
+
+
+
+ 出海套利
+
+ 边旅行边赚钱,无国界
+
+
+
+
+
+
+
+
+ 远程办公
+ 自由职业,分布式团队
+
+
+
+
+
+
+
+ 游民社区
+
+ 信息交流,快人一步
+
+
+
@@ -416,10 +456,9 @@ const Index = () => {
-
- {/* 《Youtube运营笔记》 */}
+ {/*
Copyright © 2025
-
+ */}
{/* */}
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index f3c5f8e..c18d114 100644
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -45,12 +45,99 @@
// justify-content: space-around;
// background-color: yellow;
}
+
+ .card {
+ margin-top: 40px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ .cardItem {
+ padding: 20px;
+ // padding-top: 20px;
+ width: 500px;
+ // height: 300px;
+
+ margin-bottom: 20px;
+ display: flex;
+ flex-direction: row;
+ background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity, 1));
+ // background-color: yellow;
+ background-color: #f0f5ff;
+ border-radius: 20px;
+
+ // align-items: center;
+ // justify-content: center;
+ .cardItem_left {
+ // width: 100px;
+ // height: 100%;
+ // background-color: #69b1ff;
+ display: flex;
+ flex-direction: column;
+ // align-items: center;
+ // justify-content: center;
+ margin-right: 40px;
+ .cardItem_left_img {
+ width: 80px;
+ height: 80px;
+ }
+ .youtubeSvg {
+ position: relative;
+ top: -5px;
+ }
+ }
+ .cardItem_right {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ // background-color: red;
+ .cardItem_rightUp {
+ width: 100%;
+ height: 80px;
+ // background-color: aquamarine;
+ display: flex;
+ flex-direction: row;
+ font-weight: 700;
+ font-size: 35px;
+ // align-items: center;
+ // justify-content: center;
+ }
+ .cardItem_rightDown {
+ width: 100%;
+ // height: 200px;
+ flex: 1;
+ // background-color: red;
+ display: flex;
+ flex-direction: row;
+ // align-items: center;
+ // justify-content: center;
+ font-size: 30px;
+ flex-wrap: wrap;
+ color: #262626;
+ }
+ }
+ .left_mobile {
+ margin-top: 20px;
+ // width: 100%;
+ font-size: 30px;
+ display: flex;
+ flex-direction: column;
+ // background-color: aqua;
+ // align-items: center;
+ // justify-content: space-around;
+ // background-color: yellow;
+ }
+ }
+ }
+
.left_btn {
margin-top: 40px;
// background-color: aqua;
// display: none;
.startRead {
- width: 200px;
+ width: 500px;
}
}
}
@@ -131,6 +218,9 @@
.left_mobile {
display: none;
}
+ .card {
+ display: none;
+ }
.left_btn {
display: flex;
@@ -206,7 +296,6 @@
font-size: 14px;
// background-color: yellow;
}
-
}
}
@@ -214,4 +303,3 @@
width: 100%;
height: 60px;
}
-