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

's'

Browse Source
This commit is contained in:
eric
2026-03-09 11:50:53 -05:00
parent abd5c928b8
commit c84de6b7e2
3 changed files with 315 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,71 +1,16 @@
import { Component } from "react";
import Taro ,{useRouter}from "@tarojs/taro";
import Taro, { useRouter } from "@tarojs/taro";
import { View, Text, Image, Button } from "@tarojs/components";
import "./index.scss";
import { AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState, useRef } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import React, { useEffect, useState, useRef } from "react";
import { AtButton } from "taro-ui";
import { AtSearchBar } from "taro-ui";
import { Picker } from "@tarojs/components";
import { AtList, AtListItem, AtNavBar, AtTag, AtMessage } from "taro-ui";
import { marked } from "marked";
import infoText from "../book/info.md";
import bookText from "../book/book.md";
import index from "./index.md";
import {
AtModal,
AtModalHeader,
AtModalContent,
AtModalAction,
AtAvatar,
AtAccordion,
} from "taro-ui";
import { AtToast } from "taro-ui";
import { AtIcon } from "taro-ui";
import { VIEW } from "@tarojs/runtime";
import indexMd from "./index.md";
import "animate.css";
import touxiang from "../../images/touxiang.png";
import hackrobot from "../../images/hackrobot.png";
import cat from "../../images/cat.jpg";
import girl from "../../images/girl.jpg";
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 qrcode from "../../images/qrcode.png";
import meetup from "../../images/meetup.jpg";
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 ssh from "../../images/ssh.svg";
import robot from "../../images/robot.svg";
import host from "../../images/host.svg";
import ytGpt from "../../images/ytGpt.png";
import demo from "../../images/demo.svg";
import AI from "../../images/AI.png";
import nomadro from "../../images/nomadro.png";
import phone2 from "../../images/phone2.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 planet from "../../images/avatar.jpg";
import book from "../../images/book.svg";
import youtubesvg from "../../images/youtube.svg";
// PocketBase 配置
@@ -97,8 +42,7 @@ const Index = () => {
const [bookpay, setbookpay] = useState(0);
const [isWeChat, setisWeChat] = useState(false);
const [markText, setmarkText] = useState(paidType ? index : index);
const [headers, setHeaders] = useState([]); // 存储所有 <h1> 的内容
const [headers, setHeaders] = useState([]);
const contentRef = useRef(null); // 用于获取渲染后的 DOM
const router = useRouter(); // Taro 3+ 获取路由参数
@@ -124,14 +68,9 @@ const Index = () => {
const h2Elements = contentRef.current.querySelectorAll("h2");
const h1Texts = Array.from(h1Elements).map((el) => el.textContent);
const h2Texts = Array.from(h2Elements).map((el) => el.textContent);
setHeaders(h1Texts);
// console.log("获取到的 H1 标题:"); // 控制台查看
console.log("获取到的 H1 标题:", h1Texts); // 控制台查看
console.log("获取到的 H2 标题:", h2Texts); // 控制台查看
}
}, [markText]); // 监听 HTML 内容变化
}, [indexMd]); // 监听内容变化
const getOpenidFromUrl = (url) => {
const pattern = /[?&]openid=([^&#]+)/;
const match = url.match(pattern);
@@ -221,9 +160,9 @@ const Index = () => {
const getWxidFromUrl = () => {
const urlParams = new URLSearchParams(window.location.search);
const urlwxid = urlParams.get("wxid");
if (!!urlwxid) {
if (urlwxid) {
setwxid(urlwxid);
window.localStorage.setItem("wxid", wxid);
window.localStorage.setItem("wxid", urlwxid);
// 优先查询openid是否存在数据库
Taro.request({
method: "GET",
@@ -267,7 +206,7 @@ const Index = () => {
// tg消息通知
// tgMessage();
}
return wxid;
return urlwxid;
};
// 绑定wxid与openid
@@ -441,12 +380,11 @@ const Index = () => {
useEffect(() => {
// 判断是否在微信
isWeChatFun()
// 方法1：Taro 3+ 推荐方式（支持小程序 + H5）
if (router && router.params && router.params.type === 'clean') {
isWeChatFun();
const params = router?.params || {};
if (params.type === 'clean') {
clearAllStorage();
return
return;
}
const init = async () => {
@@ -745,7 +683,7 @@ const Index = () => {
className="markdown-body markVip" // 添加 GitHub Markdown 主题类
dangerouslySetInnerHTML={{
// __html: marked(markText),
__html: marked(paidType ? index : index),
__html: marked(indexMd),
}}
></View>
@@ -753,24 +691,20 @@ const Index = () => {
{paidType === 'vip' ? (
<View className="vipcode">
<View
onClick={() => {
window.location.href = `https://qun.hackrobot.cn`;
}}
className="vipcode-link"
onClick={() => { window.location.href = 'https://qun.hackrobot.cn'; }}
>
{/* 👉星球地址: memos.hackrobot.org */}
👉星球地址: qun.hackrobot.cn
👉 星球地址: qun.hackrobot.cn
</View>
<View>账号:{Taro.getStorageSync('userName')}</View>
<Button onClick={handleCopyUsername}>复制账号</Button>
<View>密码:{"123456"}</View>{" "}
<View>打开网页后,请点击"左上角头像",打开侧面栏</View>
{/* <View>
添加
<span style={{ color: "green" }}>微信好友: hackrobot</span>
</View> */}
{/* <Image className="vipcodeImg" src={hackrobot}></Image> */}
{/* <View>获取 账号</View> */}
<View className="vipcode-row">
<Text>账号: {userName || Taro.getStorageSync('userName') || '-'}</Text>
<Button size="mini" onClick={handleCopyUsername}>复制账号</Button>
</View>
<View className="vipcode-row">
<Text>密码: 123456</Text>
<Button size="mini" onClick={handleCopyPassword}>复制密码</Button>
</View>
<View className="vipcode-tip">打开网页后，请点击「左上角头像」打开侧面栏</View>
</View>
) : (
<AtButton

56
src/pages/index/index.md
View File

@@ -1,50 +1,48 @@
<img title="" src="https://minioweb.hackrobot.cn/hackrobot/image_20251231_015321_20586.jpg" alt="image_20251231_015321_20586.jpg" width="271">
<img src="https://minioweb.hackrobot.cn/hackrobot/image_20251231_015321_20586.jpg" alt="异度星球" width="271">
🌟你将收获：
🚀 业务方向：无人直播、RPA 自动化、web开发
## 🌟 你将收获
⚙️ 技术杠杆：云手机、PVE 虚拟化、服务器集群
**🚀 业务方向**
无人直播 · RPA 自动化 · Web 开发
🌐 海外平台：YouTube、TikTok、SaaS 运营实战
**⚙️ 技术杠杆**
云手机 · PVE 虚拟化 · 服务器集群
**🌐 海外平台**
YouTube · TikTok · SaaS 运营实战
---
<br/>
## 📖 解锁权益
📖 解锁=>电子书+视频教程
**电子书 + 视频教程**
1️⃣[《数字游民》：地理套利 + 自动化杠杆](https://hackrobot.cn)
1. [《数字游民》：地理套利 + 自动化杠杆](https://hackrobot.cn)
2. [《云手机》：低成本工作室搭建指南](https://android.hackrobot.cn)
2️⃣ [《云手机》：低成本工作室搭建指南](https://android.hackrobot.cn)
<img src="https://minioweb.hackrobot.cn/hackrobot/20260101205143_20260101_205202_1552.png" alt="权益" width="180">
<img src="https://minioweb.hackrobot.cn/hackrobot/20260101205143_20260101_205202_1552.png" title="" alt="20260101205143_20260101_205202_1552.png" width="180">
**📱 设备自助下单**（开箱即用）
<img src="https://minioweb.hackrobot.cn/hackrobot/wqdq_20260101_212749_8560.jpg" alt="设备下单" width="282">
**📚 即时问答**（技术咨询）
📱设备自助下单(开箱即用)
<img src="https://minioweb.hackrobot.cn/hackrobot/20260101203904_20260101_204741_699.png" alt="即时问答" width="284">
<img title="" src="https://minioweb.hackrobot.cn/hackrobot/wqdq_20260101_212749_8560.jpg" alt="wqdq_20260101_212749_8560.jpg" width="282">
**㊙️ 私密社群**
<img src="https://minioweb.hackrobot.cn/hackrobot/20260101204456_20260101_204802_768.png" alt="私密社群" width="186">
---
📚 即时问答 (技术咨询)
## ⚠️ 须知
<img src="https://minioweb.hackrobot.cn/hackrobot/20260101203904_20260101_204741_699.png" title="" alt="20260101203904_20260101_204741_699.png" width="284">
- 🚫 内容不适合想躺赚、现金流紧张的人
- 💰 价格随参与人数阶梯式调整（维护与答疑成本随规模增长）
- 📌 本内容为虚拟数字交付，不支持退款
㊙️私密社群
---
<img src="https://minioweb.hackrobot.cn/hackrobot/20260101204456_20260101_204802_768.png" title="" alt="20260101204456_20260101_204802_768.png" width="186">
<br/>
🚫 内容不适合想躺赚、现金流紧张的人
💰 价格随参与人数阶梯式调整
（维护与答疑成本随规模增长）
📌 本内容为虚拟数字交付
不支持退款
<!-- 👉 **确认理解规则，进入系统构建通道** -->
👉 **限时特惠,3月12日恢复**
👉 **限时特惠 · 3月12日恢复原价**

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

@@ -1,6 +1,6 @@
// 在 src/index.scss 中引入 GitHub Markdown 主题
@import "github-markdown-css/github-markdown.css";
// marktext的换行处理
// Markdown 内容样式
.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
@@ -13,23 +13,47 @@
}
.markdown-body li > p {
margin-top: 0px;
margin-top: 0;
}
.markVip {
padding-left: 100px;
padding-right: 100px;
padding: 0 16px;
width: 100%;
box-sizing: border-box;
img {
display: block;
margin: 20px auto; // 上下间距 + 水平居中
max-width: 100%; // 响应式：不超过容器宽度
height: auto; // 保持比例
border-radius: 12px; // 可选：圆角美化
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); // 可选：轻微阴影提升质感
margin: 16px auto;
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
}
.markdown-body p {
font-size: 30px;
// text-align: center !important;
font-size: 30px; /* H5 2倍 */
line-height: 1.6;
}
.markVip .markdown-body {
h2 {
font-size: 36px; /* H5 2倍 */
margin: 20px 0 12px;
color: #262626;
font-weight: 600;
}
hr {
margin: 20px 0;
border: none;
border-top: 1px solid #e8e8e8;
}
ul {
padding-left: 20px;
margin: 8px 0;
}
li {
margin: 4px 0;
}
}
.book_header_div {
width: 100%;
@@ -88,44 +112,44 @@
// 响应式断点
$mobile: 480px;
$tablet: 768px;
$desktop: 1024px;
$wide: 1280px;
.index {
// background-color: #002329;
// width: 100vw;
// padding-top: 80px;
height: 100vh;
// height: 100%;
// padding-left: 100px;
// padding-right: 100px;
// background-color: yellow;
min-height: 100vh;
width: 100%;
overflow-x: hidden;
box-sizing: border-box;
.index-book {
// margin-top: 80px;
// width: 100%;
min-height: 300px;
// padding: 20px;
min-height: 280px;
width: 100%;
padding: 20px 16px;
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: space-between;
// justify-content: center;
justify-content: flex-start;
box-sizing: border-box;
// background-color: #f0f0f0;
// background-color: #f0f5ff;
// background-color: yellow;
.index_book_left {
min-width: 600px;
min-height: 300px;
width: 100%;
max-width: 100%;
min-height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
// justify-content: center;
// background-color: rgb(208, 255, 0);
box-sizing: border-box;
.left_title {
font-size: 50px;
font-size: 64px; /* H5 2倍 */
font-weight: 700;
color: #69b1ff;
margin-top: 10px;
margin-top: 8px;
text-align: center;
}
.left_text {
font-size: 30px;
@@ -142,125 +166,93 @@
}
.card {
margin-top: 20px;
margin-top: 16px;
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// background-color: #69b1ff;
.cardItem {
padding: 20px;
// padding-top: 20px;
width: 500px;
// height: 300px;
margin-bottom: 20px;
.cardItem {
padding: 16px 20px;
width: 100%;
max-width: 340px;
margin-bottom: 12px;
display: flex;
flex-direction: row;
background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity, 1));
// background-color: yellow;
align-items: center;
background-color: #f0f5ff;
border-radius: 20px;
border-radius: 16px;
box-sizing: border-box;
// 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;
justify-content: center;
margin-right: 16px;
flex-shrink: 0;
.cardItem_left_img {
width: 80px;
height: 80px;
width: 56px;
height: 56px;
}
.youtubeSvg {
position: relative;
top: -5px;
top: -2px;
}
}
.cardItem_right {
flex: 1;
min-width: 0;
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;
font-size: 36px; /* H5 2倍 */
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;
.cardItem_rightDown {
font-size: 28px; /* H5 2倍 */
color: #595959;
margin-top: 4px;
}
}
}
}
.left_btn {
// position: fixed;
// bottom: -10px;
margin-top: 24px;
margin-bottom: 24px;
width: 100%;
display: flex;
justify-content: center;
margin-top: 30px;
margin-bottom: 30px;
// background-color: aqua;
// display: none;
.startRead {
width: 500px;
// width: 100%;
width: 100%;
max-width: 320px;
}
}
}
.index_book_img {
margin-top: 30px;
width: 400px;
height: 400px;
// margin: 0 auto;
margin-top: 20px;
width: 200px;
height: 200px;
flex-shrink: 0;
.book_img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
.svgItems {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
// background-color: yellow;
display: none;
margin-top: 20px;
// padding: 20px;
.bookImg {
display: none;
}
}
.index_btn {
// background-color: yellow;
@@ -280,128 +272,171 @@
width: 100%;
height: 60px;
// margin-bottom: 20px;
font-size: 14px;
font-size: 28px; /* H5 2倍 */
// background-color: yellow;
}
}
@media (min-width: 1536px) {
// 平板
@media (min-width: $tablet) {
.markVip {
padding: 0 32px;
}
.markdown-body p {
font-size: 17px;
}
.index .index-book .index_book_left {
.left_title {
font-size: 40px;
}
.card .cardItem {
max-width: 420px;
.cardItem_left_img {
width: 64px;
height: 64px;
}
.cardItem_rightUp {
font-size: 20px;
}
.cardItem_rightDown {
font-size: 30px; /* H5 2倍 */
}
}
.left_btn .startRead {
max-width: 360px;
}
}
.index .index-book .index_book_img {
width: 260px;
height: 260px;
}
}
// 桌面端
@media (min-width: $desktop) {
.markVip {
padding: 0 48px;
}
.markdown-body p {
font-size: 18px;
}
}
// 大屏 PC
@media (min-width: $wide) {
.index {
// padding: 100px;
// height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// background-color: aqua;
position: relative;
justify-content: flex-start;
padding: 40px 24px 60px;
.index-book {
width: 100%;
max-width: 1400px;
// max-width: 2000px;
// padding: 20px;
max-width: 1200px;
padding: 40px 48px;
display: flex;
flex-direction: row;
align-items: center;
// justify-content: center;
align-items: stretch;
justify-content: space-between;
background-color: #f0f5ff;
border-radius: 20px;
background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 100%);
border-radius: 24px;
box-shadow: 0 8px 32px rgba(105, 177, 255, 0.12);
.index_book_left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
// background-color: yellow;
// background-color: #69b1ff;
.left_mobile {
display: none;
flex: 1;
max-width: 560px;
min-width: 0;
align-items: flex-start;
justify-content: flex-start;
.left_title {
font-size: 44px;
text-align: left;
}
.card {
display: none;
}
.markVip {
padding: 0;
width: 100%;
}
.left_btn {
display: flex;
margin-top: 28px;
justify-content: flex-start;
.startRead {
// display: flex;
width: 200px;
max-width: 220px;
}
}
}
.index_book_img {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// height: 100%;
// background-color: yellow;
margin-top: 0;
margin-left: 48px;
width: 320px;
height: 320px;
flex-shrink: 0;
.book_img {
margin-bottom: 40px;
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
.svgItems {
// width: 1400px;
width: 100%;
max-width: 1400px;
margin-top: 80px;
// padding: 0px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
// background-color: #69b1ff;
// background-color: yellow;
// background-color: brown;
width: 100%;
max-width: 1200px;
margin-top: 48px;
padding: 0 24px;
.svgItem {
// min-width: 1400px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
// background-color: #69b1ff;
justify-content: space-between;
gap: 24px;
.bookImg {
width: 350px;
height: 350px;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// background-color: yellow;
padding: 24px 16px;
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: transform 0.2s, box-shadow 0.2s;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(105, 177, 255, 0.15);
}
.bookImg_text {
margin-top: 20px;
font-size: 30px;
margin-top: 12px;
font-size: 16px;
font-weight: 500;
color: #262626;
}
}
}
}
}
}
.index_btn {
.startRead {
display: none;
}
}
.footer {
position: absolute;
// position: fixed;
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;
}
// 超宽屏
@media (min-width: 1536px) {
.index .index-book {
max-width: 1400px;
}
.index .svgItems {
max-width: 1400px;
}
}
@@ -414,13 +449,54 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 24px 20px;
background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
border-radius: 16px;
width: 100%;
max-width: 360px;
box-sizing: border-box;
font-size: 30px;
line-height: 1.5;
color: #262626;
.vipcode-link {
cursor: pointer;
color: #69b1ff;
font-weight: 600;
word-break: break-all;
}
.vipcode-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
justify-content: center;
}
.vipcode-tip {
font-size: 26px; /* H5 2倍 */
color: #8c8c8c;
text-align: center;
}
button {
margin-top: 8px;
padding: 10px 24px;
font-size: 28px; /* H5 2倍 */
}
.vipcodeImg {
width: 300px;
height: 300px;
width: 200px;
height: 200px;
}
}
.payBtntext {
font-size: 20px;
@media (min-width: $wide) {
.vipcode {
max-width: 420px;
font-size: 16px;
padding: 28px 24px;
}
}