'课程主页'

src/pages/index/index.jsx

@@ -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>

src/pages/index/index.scss

@@ -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;
 }
-