diff --git a/src/images/demo.svg b/src/images/demo.svg
new file mode 100644
index 0000000..330caa9
--- /dev/null
+++ b/src/images/demo.svg
@@ -0,0 +1,131 @@
+
+
diff --git a/src/images/youtube.svg b/src/images/youtube.svg
new file mode 100644
index 0000000..92aaf5a
--- /dev/null
+++ b/src/images/youtube.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/src/images/yt2.svg b/src/images/yt2.svg
new file mode 100644
index 0000000..8408694
--- /dev/null
+++ b/src/images/yt2.svg
@@ -0,0 +1,106 @@
+
+
+
\ No newline at end of file
diff --git a/src/images/yt3.svg b/src/images/yt3.svg
new file mode 100644
index 0000000..c50089c
--- /dev/null
+++ b/src/images/yt3.svg
@@ -0,0 +1,36 @@
+
+
+
\ No newline at end of file
diff --git a/src/images/yt4.svg b/src/images/yt4.svg
new file mode 100644
index 0000000..05c944a
--- /dev/null
+++ b/src/images/yt4.svg
@@ -0,0 +1,99 @@
+
+
+
\ No newline at end of file
diff --git a/src/pages/book/index.scss b/src/pages/book/index.scss
index 48e0118..cffdc3f 100644
--- a/src/pages/book/index.scss
+++ b/src/pages/book/index.scss
@@ -1,15 +1,13 @@
-
// 在 src/index.scss 中引入 GitHub Markdown 主题
-@import 'github-markdown-css/github-markdown.css';
+@import "github-markdown-css/github-markdown.css";
.Book {
padding: 40px;
-// font-size: 30px !important;
- // color: #666;
-
- .markdown-body{
- font-size: 30px !important;
+ .markdown-body {
+ font-size: 30px;
+ // color: #72d572;
}
+
img {
max-width: 100%;
height: auto; /* 保持图像的纵横比 */
@@ -19,19 +17,20 @@
flex-direction: row;
.codeBtn {
background-color: aquamarine;
- // height: 80px;
- // color: red;
}
}
.joinSalon {
- // position: relative;
- // bottom: 20px;
- // position: fixed;
width: 700px;
font-weight: 600;
- background-color:#72D572 ;
- border-color: #72D572 ;;
+ background-color: #72d572;
+ border-color: #72d572;
+ }
+}
+
+@media (min-width: 1536px) {
+ .Book .markdown-body {
+ font-size: 20px;
+ // color: red;
}
-
}
diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx
index 3631cf1..0849ba1 100644
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -40,6 +40,11 @@ import bookqr from "../../images/bookqr.jpg";
import loft from "../../images/loft.png";
import AIGC from "../../images/AIGC.png";
import robot192 from "../../images/robot192.png";
+import youtube from "../../images/youtube.svg";
+import youtube2 from "../../images/yt2.svg";
+import youtube3 from "../../images/yt3.svg";
+import youtube4 from "../../images/yt4.svg";
+import demo from "../../images/demo.svg";
// export default class Index extends Component {
const Index = () => {
@@ -325,109 +330,81 @@ const Index = () => {
});
};
+ const goRead = () => {
+ Taro.navigateTo({
+ url: "/pages/book/index",
+ });
+ };
+
return (
+ <>
{/* 在线图书 */}
+
{/* 参考资料https://readmake.com/ */}
-
+
+ 《Youtube运营笔记》
+ 数字游民-手册1
+
+ {
+ goRead();
+ }}
+ className="startRead"
+ type="primary"
+ size="small"
+ circle
+ >
+ 开始阅读
+
+
+
+
-
-
-
-
- 一人公司方法论
-
- 多元自动化收入
-
- {/* 两个核心主题:
*/}
- 1. 云手机+微信机器人+AIGC
-
- 2. youtube获利
- 3. 跨境电商
-
- 4. 独立开发者
-
- 5. 旅行与远程办公
-
-
- {
- // 19元解锁书籍
- // payh5("bookpay", 10);
- Taro.navigateTo({
- url: "/pages/book/index",
- });
-
- return false;
- if (!!userInfo?.ebook) {
- // 已预约
- Taro.atMessage({
- message: "已预约成功",
- type: "warning",
- });
- } else {
- if (!!wxid) {
- // 发起预约
- const userUpdateData = {
- ebook: 1, // 只更新 openid 字段
- };
- Taro.request({
- method: "PUT",
- // url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
- url: `${process.env.TARO_API_API}/user/${wxid}`, //仅为示例，并非真实的接口地址
- data: userUpdateData,
- header: {
- "Content-Type": "application/json",
- },
- success: function (res) {
- // 预约成功
- // Taro.atMessage({
- // message: "预约成功",
- // type: "success",
- // });
-
- if (res.data.code == "200") {
- setbookToast(true);
- }
- },
- fail: function (err) {},
- complete: function (finy) {
- // setTimeout(() => {
- // window.location.reload();
- // }, 2000);
- // getUserinfo()
- },
- });
- } else {
- setmeetupQR(true);
- }
- }
- }}
- >
-
- {/* {!!userInfo?.ebook ? "已预约" : "预约"} */}
- {/* {!!userInfo?.ebook ? "未完结" : "未完结"} */}
- {bookpay == 1 ? "查看" : "阅读"}
-
-
-
+
+
+
+
+ YPP(合作伙伴计划)
+
+
+
+ 💰赚美金
+
+
+
+ 📷自媒体
+
+
+
+
+
+
+ {/* */}
+
+ {/* 《Youtube运营笔记》 */}
+ Copyright © 2025
+
+
);
};
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index f18d235..ed02f9f 100644
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -2,84 +2,174 @@
// background-color: #002329;
// width: 100vw;
// height: 100vh;
- padding: 40px;
-
+ // padding-left: 100px;
+ // padding-right: 100px;
.index-book {
margin-top: 60px;
// width: 100%;
- height: 300px;
- padding: 20px;
+ min-height: 300px;
+ // padding: 20px;
display: flex;
- flex-direction: row;
+ flex-direction: column-reverse;
align-items: center;
- // justify-content: center;
+ justify-content: space-between;
// background-color: #f0f0f0;
- background-color: #f0f5ff;
- .bookImg {
- width: 40%;
- height: 100%;
- // background-color: #1bb14e;
- }
-
- .book-middle {
- width: 20px;
- height: 100%;
- }
- .nomad-right {
- // margin-left: 20px;
+ // background-color: #f0f5ff;
+ // background-color: yellow;
+ .index_book_left {
+ width: 600px;
+ height: 300px;
display: flex;
flex-direction: column;
- // align-items: center;
- justify-content: space-between;
- // background-color: yellow;
- // width: 100%;
- flex: 1;
- height: 100%;
+ align-items: center;
+ justify-content: space-around;
+ // background-color: rgb(208, 255, 0);
+ .left_title {
+ font-size: 40px;
+ font-weight: 700;
+ color: #69b1ff;
+ }
+ .left_text {
+ font-size: 24px;
+ }
+ .left_btn {
+ // background-color: aqua;
+ // display: none;
+ .startRead {
+ }
+ }
+ }
+ .index_book_img {
+ width: 300px;
+ height: 300px;
+ }
+ }
- .nomad-title {
- font-size: 35px;
+ .svgItems {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ // background-color: yellow;
+ margin-top: 20px;
+ // padding: 20px;
+ .bookImg {
+ display: none;
+ }
+ }
+ .index_btn {
+ // background-color: yellow;
+ .startRead {
+ width: 200px;
+ }
+ }
+}
+
+@media (min-width: 1536px) {
+
+ .index {
+ padding: 100px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ // background-color: aqua;
+
+ .index-book {
+ width: 100%;
+ max-width: 1400px;
+
+ // max-width: 2000px;
+ // padding: 20px;
display: flex;
flex-direction: row;
align-items: center;
- // justify-content: space-between;
- // background-color: red;
- .bookNmae {
- margin-left: 10px;
+ // justify-content: center;
+ justify-content: space-between;
+ background-color: #f0f5ff;
+ border-radius: 20px;
+
+ .index_book_left {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ // background-color: yellow;
+ // background-color: #69b1ff;
+ .left_btn {
+ display: flex;
+
+ .startRead {
+ // display: flex;
+ width: 200px;
+ }
+ }
+ }
+ .index_book_img {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ // background-color: yellow;
}
}
- .subtitle {
- font-size: 20px;
- color: red;
- }
- .bookText {
- font-size: 20px;
- }
- .bookPrice {
- font-size: 30px;
+
+ .svgItems {
+ // width: 1400px;
+ width: 100%;
+ max-width: 1400px;
+ margin-top: 80px;
+ // padding: 0px;
display: flex;
- flex-direction: row-reverse;
- .join {
- font-size: 20px;
- width: 100px;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ // background-color: #69b1ff;
+ // background-color: yellow;
+ // background-color: brown;
+ .svgItem {
+ // min-width: 1400px;
+ width: 100%;
display: flex;
flex-direction: row;
align-items: center;
- justify-content: center;
- background-color: #1bb14e;
- color: #fff;
- border-radius: 15%;
- position: relative;
- bottom: 10px;
- right: 10px;
+ justify-content: space-around;
+ // background-color: #69b1ff;
+ .bookImg {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ // background-color: yellow;
+ .bookImg_text {
+ margin-top: 20px;
+ font-size: 30px;
+ }
+ }
+ }
+ }
+
+
+ .index_btn {
+ .startRead {
+ display: none;
}
}
}
}
- .payBtn {
- position: fixed;
- bottom: 0;
- width: 100%;
- }
+
+.footer {
+ position: absolute;
+ bottom: 0px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 60px;
+ // margin-bottom: 20px;
+ font-size: 14px;
+ // background-color: yellow;
}