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

'课程主页'

Browse Source
This commit is contained in:
hackrobot
2025-03-26 09:05:48 -05:00
parent a82a3d9100
commit 63e50fdf09
2 changed files with 112 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,6 +52,7 @@ 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 { AtTabs, AtTabsPane } from "taro-ui";
// export default class Index extends Component {
const Index = () => {
@@ -73,6 +74,12 @@ const Index = () => {
const [bookpay, setbookpay] = useState(0);
const [isWeChat, setisWeChat] = useState(false);
const tabList = [
{ title: "基础 & 工具" },
{ title: "产品 & 营销" },
{ title: "实战 & 变现" },
];
// const [current,setcurrent]=useState(null)
const getOpenidFromUrl = (url) => {
const pattern = /[?&]openid=([^&#]+)/;
@@ -349,7 +356,7 @@ const Index = () => {
{/* 在线图书 */}
{/* 参考资料https://readmake.com/ */}
<View className="index-book animate__animated animate__pulse">
<View className="index_book animate__animated animate__pulse">
<View className="index_book_left">
<View className="left_title">《从零开始,成为数字游民》</View>
{/* <View className="left_text">手册3</View> */}
@@ -387,7 +394,49 @@ const Index = () => {
</View>
</View>
<View className="svgItems">
<View className="tabs">
<AtTabs
current={current}
tabList={tabList}
onClick={(value) => {
setcurrent(value);
}}
>
<AtTabsPane current={current} index={0}>
<View className="tab1">
<View className="videos">
{
[1,2,3,4,5].map((item,index)=>{
return <View className="video">
<View className="video_up">docker入门课</View>{" "}
<View className="video_middle">从原理到实践</View>{" "}
<View className="video_down">主讲:eric</View>
</View>
})
}
{/* <View className="video">
<View className="video_up">docker入门课</View>{" "}
<View className="video_middle">从原理到实践</View>{" "}
<View className="video_down">主讲:eric</View>
</View> */}
</View>
</View>
</AtTabsPane>
<AtTabsPane current={current} index={1}>
<View style="padding: 100px 50px;background-color: #FAFBFC;text-align: center;">
标签页二的内容
</View>
</AtTabsPane>
<AtTabsPane current={current} index={2}>
<View style="padding: 100px 50px;background-color: #FAFBFC;text-align: center;">
标签页三的内容
</View>
</AtTabsPane>
</AtTabs>
</View>
{/* <View className="svgItems">
<View className="svgItem">
{" "}
<View className="bookImg">
@@ -415,7 +464,7 @@ const Index = () => {
<View className="bookImg_text">远程办公</View>
</View>
</View>
</View>
</View> */}
<View className="footer">
{/* <View>《Youtube运营笔记》</View> */}
<View>Copyright © 2025 </View>

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

@@ -2,12 +2,17 @@
// background-color: #002329;
// width: 100vw;
// padding-top: 80px;
height: 100vh;
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
// height: 100%;
// padding-left: 100px;
// padding-right: 100px;
// background-color: yellow;
.index-book {
.index_book {
// margin-top: 80px;
// width: 100%;
min-height: 300px;
@@ -28,7 +33,7 @@
justify-content: space-around;
// background-color: rgb(208, 255, 0);
.left_title {
font-size: 50px;
font-size: 40px;
font-weight: 700;
color: #69b1ff;
}
@@ -103,13 +108,15 @@
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// justify-content: center;
// background-color: aqua;
position: relative;
// position: relative;
.index-book {
.index_book {
width: 100%;
max-width: 1400px;
max-width: 1200px;
height: 200px;
margin-top: 60px;
// max-width: 2000px;
// padding: 20px;
@@ -141,6 +148,8 @@
}
}
.index_book_img {
width: 300px;
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
@@ -149,6 +158,51 @@
}
}
.tabs {
width: 100%;
max-width: 1100px;
// color: #8a9ba8;
font-size: 24px;
// background-color: yellow;
.at-tabs {
.at-tabs__item--active {
// font-size: 24px;
}
.at-tabs__body {
.at-tabs-pane--active {
.tab1 {
// width: 1000px;
min-height: 200px;
// background-color: red;
.videos{
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 50px; // 控制间距
padding: 20px;
// background-color: aqua;
// justify-content: center;
// justify-content: space-between;
.video{
flex: 1; // 让视频项自动伸缩
min-width: 300px;
max-width: 320px;
height: 300px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
background-color: yellow;
// background-color: yellow;
// margin-right: 20px;
// margin-top: 10px;
// margin-bottom: 10px;
}
}
}
}
}
}
}
.svgItems {
// width: 1400px;
width: 100%;
@@ -206,7 +260,6 @@
font-size: 14px;
// background-color: yellow;
}
}
}
@@ -214,4 +267,3 @@
width: 100%;
height: 60px;
}