circle_xcx/src/components/game-intro/index.tsx

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;