游戏介绍

src/app.ts

@@ -1,19 +0,0 @@
-import React, { useEffect } from 'react'
-import { useDidShow, useDidHide } from '@tarojs/taro'
-// 全局样式
-import './app.scss'
-
-function App(props) {
-  // 可以使用所有的 React Hooks
-  useEffect(() => {})
-
-  // 对应 onShow
-  useDidShow(() => {})
-
-  // 对应 onHide
-  useDidHide(() => {})
-
-  return props.children
-}
-
-export default App

src/app.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect } from "react";
+import { useDidShow, useDidHide } from "@tarojs/taro";
+import { ConfigProvider } from "@nutui/nutui-react-taro";
+// 全局样式
+import "./app.scss";
+
+function App(props: { children: React.ReactNode }) {
+  const darkTheme = {
+    nutuiColorPrimary: "#606cd2",
+    nutuiColorPrimaryStop1: "#606cd2",
+    nutuiColorPrimaryStop2: "#606cd2",
+    "--nutui-tabs-tabpane-padding": "0",
+  };
+  // 可以使用所有的 React Hooks
+  useEffect(() => {});
+
+  // 对应 onShow
+  useDidShow(() => {});
+
+  // 对应 onHide
+  useDidHide(() => {});
+
+  return <ConfigProvider theme={darkTheme}>{props.children}</ConfigProvider>;
+}
+
+export default App;

src/components/game-intro/index.tsx

@@ -0,0 +1,79 @@
+import { Image, Swiper, Button } from "@nutui/nutui-react-taro";
+import { Video, View } from "@tarojs/components";
+const GameIntro = () => {
+  return (
+    <View className="absolute w-[100%] h-[100vh] left-[0px] top-[0px] bg-[#606cd2] relative">
+      <Swiper indicator>
+        <Swiper.Item>
+          <Video
+            autoplay={true}
+            loop={true}
+            showFullscreenBtn={false}
+            showPlayBtn={false}
+            showCenterPlayBtn={false}
+            enableProgressGesture={false}
+            showMuteBtn={false}
+            muted={true}
+            showProgress={false}
+            controls={false}
+            poster="https://upload.yunfanyouxi.com/nbc/nativeMaterial/32/936a44ec19d63d6640b78cdba5be365a281de8.mp4"
+            src="https://upload.yunfanyouxi.com/nbc/nativeMaterial/32/936a44ec19d63d6640b78cdba5be365a281de8.mp4"
+          />
+        </Swiper.Item>
+        <Swiper.Item>
+          <Image
+            mode="scaleToFill"
+            src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg"
+          />
+        </Swiper.Item>
+      </Swiper>
+      <View className="w-[94%] p-[10px] mx-auto mt-[-10px] rounded-[5px] relative z-10 left-[0px] top-[0px] bg-[#fff]">
+        <View className="flex items-center">
+          <View className="w-[100px] h-[100px] rounded-[10px] overflow-hidden">
+            <Image
+              mode="scaleToFill"
+              src="https://nie.res.netease.com/r/pic/20250724/10d06793-87aa-48c5-a51f-1bd9934f5705.png"
+            />
+          </View>
+          <View className="ml-[10px] text-[16px] font-[800] text-[#333]">
+            <View>美丽大冒险</View>
+            <View className="text-[12px] text-[#999]">
+              美丽大冒险，是一款全名抑制游戏
+            </View>
+          </View>
+        </View>
+        <View className="flex items-center text-[12px] mt-[10px]  flex-wrap">
+          <View className="p-[4px] bg-[#e8ebff] text-[#333] rounded-[5px] mr-[10px] mb-[10px]">
+            万众期待
+          </View>
+          <View className="p-[4px] bg-[#f8f8f8] text-[#333] rounded-[5px] mr-[10px] mb-[10px]">
+            角色模拟
+          </View>
+          <View className="p-[4px] bg-[#f8f8f8] text-[#333] rounded-[5px] mr-[10px] mb-[10px]">
+            角色模拟
+          </View>
+          <View className="p-[4px] bg-[#f8f8f8] text-[#333] rounded-[5px] mr-[10px] mb-[10px]">
+            角色模拟
+          </View>
+          <View className="p-[4px] bg-[#f8f8f8] text-[#333] rounded-[5px] mr-[10px] mb-[10px]">
+            角色模拟
+          </View>
+          <View className="p-[4px] bg-[#f8f8f8] text-[#333] rounded-[5px] mr-[10px] mb-[10px]">
+            角色模拟
+          </View>
+          <View className="p-[4px] bg-[#f8f8f8] text-[#333] rounded-[5px] mr-[10px] mb-[10px]">
+            角色模拟
+          </View>
+          <View className="p-[4px] bg-[#f8f8f8] text-[#333] rounded-[5px] mr-[10px] mb-[10px]">
+            角色模拟
+          </View>
+        </View>
+        <Button size="large" type="primary" block className="mt-[80px]">
+          下载游戏
+        </Button>
+      </View>
+    </View>
+  );
+};
+
+export default GameIntro;

src/pages/index/index.tsx

@@ -7,19 +7,13 @@ import "./index.scss";
 import { Image, Sticky, TabPane, Tabs } from "@nutui/nutui-react-taro";
 import { useEffect, useRef, useState } from "react";
 import { getCircleInfoApi } from "../../api/circle";
+import GameIntro from "../../components/game-intro";
 
 function Index() {
   const [circleData, setCircleData] = useState<any>(null);
-  const [tab1value, setTab1value] = useState<string | number>("0");
-  const [stickyNum, setStickyNum] = useState<number>(50);
+  const [tab1value, setTab1value] = useState<string | number>("1");
   const containerTopRef = useRef<HTMLDivElement>(null);
   const postListRef = useRef<PostListRef>(null);
-  // const [userInfo, setUserInfo] = useState<any>(null);
-
-  // const getUserInfo = () => {
-  //   const userInfo = getStorageSync("User");
-  //   setUserInfo(userInfo);
-  // };
   useEffect(() => {
     getCircleInfoApi({ id: 1 }).then((res: any) => {
       setCircleData(res.data);
@@ -29,14 +23,11 @@ function Index() {
 
   const handleUpperThreshold = () => {
     console.log("handleUpperThreshold");
-    setStickyNum(50);
   };
   const handleScroll = (e: any) => {
     console.log("handleScroll", e);
     if (e.detail.scrollTop > 50) {
-      setStickyNum(0);
     } else {
-      setStickyNum(50);
       containerTopRef.current?.scrollTo({
         top: 50,
         behavior: "smooth",
@@ -56,7 +47,7 @@ function Index() {
   };
   return (
     <View
-      style={{ height: "calc(100vh - 50px)" }}
+      style={{ height: "calc(100vh)" }}
       ref={containerTopRef}
       className="index"
     >
@@ -99,19 +90,19 @@ function Index() {
         <View className="page-content">
           <View className="scrollable-banner h-[100px] pb-[10px] bg-[#6069d9] pt-[60px] flex items-center justify-around">
             <View
-              className="text-[#fff] w-[100px] h-[30px] flex items-center justify-center text-center text-[14px] font-[800] px-[10px] bg-[#5258acf0] "
+              className="text-[#fff] w-[28%] h-[30px] flex items-center justify-center text-center text-[12px]  rounded-[5px] font-[800] px-[10px] bg-[#5258acf0] "
               onClick={() => {
                 navigateTo({ url: "/pages/act/index" });
               }}
             >
               积分中心
             </View>
-            <View className="text-[#fff] w-[100px] h-[30px] flex items-center justify-center text-center text-[14px] font-[800] px-[10px] bg-[#5258acf0]">
+            <View className="text-[#fff] w-[28%] h-[30px] flex items-center justify-center text-center text-[12px] rounded-[5px]  font-[800] px-[10px] bg-[#5258acf0]">
               <Gift size={16} />
               礼包中心
             </View>
             <View
-              className="text-[#fff] w-[100px] h-[30px] flex items-center justify-center text-center text-[14px] font-[800] px-[10px] bg-[#5258acf0]"
+              className="text-[#fff] w-[28%] h-[30px] flex items-center justify-center text-center text-[12px] rounded-[5px]  font-[800] px-[10px] bg-[#5258acf0]"
               onClick={() => {
                 navigateTo({ url: "/pages/publish/index" });
               }}
@@ -128,6 +119,9 @@ function Index() {
                 setTab1value(value);
               }}
             >
+              <TabPane title="游戏介绍">
+                <GameIntro />
+              </TabPane>
               <TabPane title="最新">
                 <ScrollView
                   upperThreshold={50}
@@ -136,7 +130,7 @@ function Index() {
                   onScrollToLower={handleScrollToLower}
                   onScroll={handleScroll}
                   scrollY
-                  style={{ height: "calc(100vh - 50px)" }}
+                  style={{ height: "calc(100vh)" }}
                 >
                   <PostList ref={postListRef} />
                 </ScrollView>