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

'ss'

Browse Source
This commit is contained in:
hackrobot
2025-03-27 08:30:03 -05:00
parent d7008f6e2b
commit 8958d61734
5 changed files with 183 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/images/book.svg Normal file
View File

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
<path fill="#F9EBB2" d="M56,62H10c-2.209,0-4-1.791-4-4s1.791-4,4-4h46V62z"/>
<g>
<path fill="#45AAB8" d="M6,4v49.537C7.062,52.584,8.461,52,10,52h2V2H8C6.896,2,6,2.896,6,4z"/>
<path fill="#45AAB8" d="M56,2H14v50h42h2v-2V4C58,2.896,57.104,2,56,2z"/>
</g>
<g>
<path fill="#394240" d="M60,52V4c0-2.211-1.789-4-4-4H8C5.789,0,4,1.789,4,4v54c0,3.313,2.687,6,6,6h49c0.553,0,1-0.447,1-1
s-0.447-1-1-1h-1v-8C59.104,54,60,53.104,60,52z M6,4c0-1.104,0.896-2,2-2h4v50h-2c-1.539,0-2.938,0.584-4,1.537V4z M56,62H10
c-2.209,0-4-1.791-4-4s1.791-4,4-4h46V62z M56,52H14V2h42c1.104,0,2,0.896,2,2v46v2H56z"/>
<path fill="#394240" d="M43,26H23c-0.553,0-1,0.447-1,1s0.447,1,1,1h20c0.553,0,1-0.447,1-1S43.553,26,43,26z"/>
<path fill="#394240" d="M49,20H23c-0.553,0-1,0.447-1,1s0.447,1,1,1h26c0.553,0,1-0.447,1-1S49.553,20,49,20z"/>
<path fill="#394240" d="M23,16h12c0.553,0,1-0.447,1-1s-0.447-1-1-1H23c-0.553,0-1,0.447-1,1S22.447,16,23,16z"/>
</g>
<path opacity="0.2" fill="#231F20" d="M6,4v49.537C7.062,52.584,8.461,52,10,52h2V2H8C6.896,2,6,2.896,6,4z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

20
src/images/group.svg Normal file
View File

@@ -0,0 +1,20 @@
<?xml version="1.0" ?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 512 512" id="Layer_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
.st0{fill:#E6E6E6;}
.st1{fill:#69C9C9;}
.st2{fill:#4D5152;}
</style>
<g>
<path class="st0" d="M56.3,322.3v-10h-26c3.5-49.6,32.8-94,77.1-116.7c16.2,17.2,39.3,28,64.8,28c2.3,0,4.6-0.1,6.9-0.3 c2,16.9,7.7,32.7,16.4,46.5c-25.3,13.1-47.3,31.1-64.9,52.4L56.3,322.3z"/>
</g>
<g>
<path class="st1" d="M262.1,446.4H102.4c3.6-68.3,43.9-129.7,105.3-160.2c20.8,23,50.9,37.5,84.4,37.5c33.4,0,63.5-14.5,84.4-37.5 c61.4,30.5,101.7,91.9,105.3,160.2H322.1v10h-60V446.4z"/>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

2
src/images/youtube copy.svg Normal file
View File

@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="red" d="M14.712 4.633a1.754 1.754 0 00-1.234-1.234C12.382 3.11 8 3.11 8 3.11s-4.382 0-5.478.289c-.6.161-1.072.634-1.234 1.234C1 5.728 1 8 1 8s0 2.283.288 3.367c.162.6.635 1.073 1.234 1.234C3.618 12.89 8 12.89 8 12.89s4.382 0 5.478-.289a1.754 1.754 0 001.234-1.234C15 10.272 15 8 15 8s0-2.272-.288-3.367z"/><path fill="#ffffff" d="M6.593 10.11l3.644-2.098-3.644-2.11v4.208z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 613 B

55
src/pages/index/index.jsx
View File

@@ -32,7 +32,7 @@ import emoji from "../../images/emoji.png";
import phone from "../../images/phone.png"; import phone from "../../images/phone.png";
// import robot from "../../images/robot.png"; // import robot from "../../images/robot.png";
import nomad from "../../images/nomad.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 qrcode from "../../images/qrcode.png";
import meetup from "../../images/meetup.jpg"; import meetup from "../../images/meetup.jpg";
@@ -52,7 +52,9 @@ import nomadro from "../../images/nomadro.png";
import code from "../../images/code.svg"; import code from "../../images/code.svg";
import laptop from "../../images/laptop.svg"; import laptop from "../../images/laptop.svg";
import travel from "../../images/travel.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 { // export default class Index extends Component {
const Index = () => { const Index = () => {
const [current, setcurrent] = useState(0); const [current, setcurrent] = useState(0);
@@ -353,16 +355,54 @@ const Index = () => {
<View className="index_book_left"> <View className="index_book_left">
<View className="left_title">《从零开始,成为数字游民》</View> <View className="left_title">《从零开始,成为数字游民》</View>
{/* <View className="left_text">手册3</View> */} {/* <View className="left_text">手册3</View> */}
<View className="left_mobile"> {/* <View className="left_mobile">
<Text>🚀 边旅行转赚钱</Text> <Text>🚀 边旅行转赚钱</Text>
<Text>1️⃣ 杠杆:媒体与代码</Text> <Text>1️⃣ 杠杆:媒体与代码</Text>
<Text>2️⃣ 出海:地理套利</Text> <Text>2️⃣ 出海:地理套利</Text>
<Text>3️⃣ 即时业务:一夜之间上线网站</Text> <Text>3️⃣ 即时业务:一夜之间上线网站</Text>
<Text>4️⃣ homelab:你的全球总部</Text> <Text>4️⃣ homelab:你的全球总部</Text>
<Text>5️⃣ 远程团队:分布式协作</Text> <Text>5️⃣ 远程团队:分布式协作</Text>
{/* <Text>5️⃣ -----------------</Text> */} <Text>5️⃣ -----------------</Text>
{/* <Text>🔥 一起实践,交流</Text> */} <Text>🔥 一起实践,交流</Text>
</View> */}
{/* 卡片 */}
<View className="card">
<View className="cardItem">
<View className="cardItem_left">
<Image
className="cardItem_left_img youtubeSvg"
src={travel}
></Image>
</View>
<View className="cardItem_right">
<View className="cardItem_rightUp">出海套利</View>
<View className="cardItem_rightDown">
边旅行边赚钱,无国界
</View>
</View>
</View>
<View className="cardItem">
<View className="cardItem_left">
<Image className="cardItem_left_img" src={laptop}></Image>
</View>
<View className="cardItem_right">
<View className="cardItem_rightUp">远程办公</View>
<View className="cardItem_rightDown">自由职业,分布式团队</View>
</View>
</View>
<View className="cardItem">
<View className="cardItem_left">
<Image className="cardItem_left_img" src={group}></Image>
</View>
<View className="cardItem_right">
<View className="cardItem_rightUp">游民社区</View>
<View className="cardItem_rightDown">
信息交流,快人一步
</View>
</View>
</View>
</View> </View>
<View className="left_btn "> <View className="left_btn ">
@@ -416,10 +456,9 @@ const Index = () => {
</View> </View>
</View> </View>
</View> </View>
<View className="footer"> {/* <View className="footer">
{/* <View>《Youtube运营笔记》</View> */}
<View>Copyright © 2025 </View> <View>Copyright © 2025 </View>
</View> </View> */}
</View> </View>
{/* <View className="footer_div"></View> */} {/* <View className="footer_div"></View> */}
</> </>

94
src/pages/index/index.scss
View File

@@ -45,12 +45,99 @@
// justify-content: space-around; // justify-content: space-around;
// background-color: yellow; // 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 { .left_btn {
margin-top: 40px; margin-top: 40px;
// background-color: aqua; // background-color: aqua;
// display: none; // display: none;
.startRead { .startRead {
width: 200px; width: 500px;
} }
} }
} }
@@ -131,6 +218,9 @@
.left_mobile { .left_mobile {
display: none; display: none;
} }
.card {
display: none;
}
.left_btn { .left_btn {
display: flex; display: flex;
@@ -206,7 +296,6 @@
font-size: 14px; font-size: 14px;
// background-color: yellow; // background-color: yellow;
} }
} }
} }
@@ -214,4 +303,3 @@
width: 100%; width: 100%;
height: 60px; height: 60px;
} }