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

feat: 手机UI更新

Browse Source
This commit is contained in:
hackrobot
2025-03-27 08:04:09 -05:00
parent b26cb27740
commit 8c88eb063d
63 changed files with 144 additions and 725 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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";
@@ -47,12 +47,14 @@ import youtube4 from "../../images/yt4.svg";
import ytGpt from "../../images/ytGpt.png";
import demo from "../../images/demo.svg";
import group from "../../images/group.svg";
import book from "../../images/book.svg";
import youtubeIco from "../../images/youtube.ico";
import youtube from "../../images/youtube.png";
import youtube192 from "../../images/youtube192.png";
// export default class Index extends Component {
const Index = () => {
const [current, setcurrent] = useState(0);
@@ -365,15 +367,54 @@ const Index = () => {
<View className="index_book_left">
<View className="left_title">《Youtube运营笔记》</View>
<View className="left_text">数字游民-手册1</View>
<View className="left_mobile">
<Text>🚀 油管踩坑笔记</Text>
<Text>1️⃣ YPP: 如何加入合作伙伴计划</Text>
<Text>2️⃣ 基础:系统环境与静态住宅ip</Text>
<Text>3️⃣ 收款:PIN码验证与外汇结算</Text>
<Text>4️⃣ AI:辅助剪辑/生成视频</Text>
{/* <Text>5️⃣ -----------------</Text> */}
{/* <Text>🔥 一起实践,交流</Text> */}
{/* 卡片 */}
<View className="card">
<View className="cardItem">
<View className="cardItem_left">
<Image className="cardItem_left_img youtubeSvg" src={youtubesvg}></Image>
</View>
<View className="cardItem_right">
<View className="cardItem_rightUp">出海赚美金</View>
<View className="cardItem_rightDown">
开通YPP合作伙伴计划
</View>
</View>
</View>
<View className="cardItem">
<View className="cardItem_left">
<Image className="cardItem_left_img" src={book}></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 className="cardItem">
<View className="left_mobile">
<Text>🚀 油管踩坑笔记</Text>
<Text>1️⃣ YPP: 如何加入合作伙伴计划</Text>
<Text>2️⃣ 基础:系统环境与静态住宅ip</Text>
<Text>3️⃣ 收款:PIN码验证与外汇结算</Text>
<Text>4️⃣ AI:辅助剪辑/生成视频</Text>
<Text>5️⃣ -----------------</Text>
<Text>🔥 一起实践,交流</Text>
</View>
</View> */}
</View>
<View className="left_btn ">

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

@@ -4,6 +4,10 @@
// height: 100vh;
// padding-left: 100px;
// padding-right: 100px;
display: flex;
flex-direction: column;
// align-items: center;
// justify-content: center;
.index_book {
margin-top: 80px;
@@ -33,22 +37,100 @@
.left_text {
font-size: 30px;
}
.left_mobile {
.card {
margin-top: 20px;
width: 100%;
font-size: 30px;
display: flex;
flex-direction: column;
// align-items: center;
// justify-content: space-around;
// background-color: yellow;
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: 300px;
width: 500px;
}
}
}
@@ -130,6 +212,9 @@
justify-content: space-around;
// background-color: yellow;
// background-color: #69b1ff;
.card{
display: none;
}
.left_mobile {
display: none;
}