From 8958d61734cc1c0bffb29b2d4e74c234082bac86 Mon Sep 17 00:00:00 2001 From: hackrobot Date: Thu, 27 Mar 2025 08:30:03 -0500 Subject: [PATCH] 'ss' --- src/images/book.svg | 23 +++++++++ src/images/group.svg | 20 ++++++++ src/images/youtube copy.svg | 2 + src/pages/index/index.jsx | 55 ++++++++++++++++++---- src/pages/index/index.scss | 94 +++++++++++++++++++++++++++++++++++-- 5 files changed, 183 insertions(+), 11 deletions(-) create mode 100644 src/images/book.svg create mode 100644 src/images/group.svg create mode 100644 src/images/youtube copy.svg 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; } -