修改一下样式

craco.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    style: {
+      postcss: {
+        plugins: [
+          require('tailwindcss'),
+          require('autoprefixer'),
+        ],
+      },
+    },
+  }

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/core": "^7.16.0",
+    "@craco/craco": "^7.1.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.11.15",

src/App.js

@@ -3,7 +3,7 @@ import { GameUI } from "./scene/ui";
 import React from "react";
 function App() {
   return (
-    <div className="App">
+    <div className="App w-screen h-screen">
       <GameUI></GameUI>
     </div>
   );

src/index.css

@@ -1,4 +1,4 @@
-body {
+/* body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -10,4 +10,8 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+} */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/scene/lottery.tsx

@@ -140,12 +140,15 @@ export const LotteryScene = ({ setScene, setPrompts }: LotterySceneProps) => {
     console.log(prompts);
     if (prompts) setPrompts(prompts);
   }, [setPrompts, activeTokens, pointPrompts]);
+
+  
   return (
     <div>
       <p>你穿越到了异世界，可以对你的老婆进行私人定制！</p>
       {step === 1 && <div>
         <p>第一阶段：你将抽取10个随机属性，并选取其中三个。</p>
         <p>当前阶段你还可以选取{count}个属性。</p>
+        <div className=" my-2">
             <Button
             variant="outlined"
             onClick={() => {
@@ -162,7 +165,12 @@ export const LotteryScene = ({ setScene, setPrompts }: LotterySceneProps) => {
             >
             十连抽！
             </Button>
+        </div>
+        {
+            activeTokens.length > 0 &&
             <Divider />
+        }
+        <div className=" my-2">
             {activeTokens.map((token, index) => (
             <Button
                 size="small"
@@ -183,30 +191,33 @@ export const LotteryScene = ({ setScene, setPrompts }: LotterySceneProps) => {
                 {token.label}
             </Button>
             ))}
+        </div>
         <Divider />
+        <div className=" mt-2">
             <Button
             variant={"outlined"}
             onClick={() => {
                 setStep(2);
             }}>进入下一阶段</Button>
         </div>
+      </div>
       }
       {step === 2 && <div>
         <p>第二阶段：请分配天赋点，不同的词条需要不同数量的天赋点数，请仔细选择。</p>
         <p>当前阶段你剩余{point}个天赋点。</p>
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <span>发色：</span>{SinglePointSelector('hairColor', HAIR_COLOR)}
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <span>发型：</span>{SinglePointSelector('hairStyle', HAIR_STYLE)}
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <span>胸部：</span>{SinglePointSelector('bodyBreasts', BODY_BREASTS)}
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <span>表情：</span>{SinglePointSelector('facialExpression', FACIAL_EXPRESSION)}
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <span>服饰：</span>{SinglePointSelector('bodyClothing', BODY_CLOTHING)}
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <span>腿部：</span>{SinglePointSelector('bodyShoes', BODY_SHOES)}
-        <Divider />
+        <div className="my-2"><Divider /></div>
         <Button
           variant={"outlined"}
           onClick={() => {

src/scene/ui.css

@@ -0,0 +1,18 @@
+.arrow {
+    position: relative; /* 确保箭头相对于其父元素进行定位 */
+    animation-name: down-fade; /* 指定动画名称 */
+    animation-duration: 3s; /* 动画持续时间（秒）*/
+    animation-timing-function: ease-in-out; /* 指定动画变化速度 */
+    animation-iteration-count: infinite; /* 让动画无限循环 */
+  }
+  
+  @keyframes down-fade {
+    0% {
+      opacity: 1; /* 开始时完全不透明 */
+      transform: translateY(0); /* 初始位置 */
+    }
+    100% {
+      opacity: 0.8;  /* 最后完全消失 */
+      transform: translateY(30px);/* 继续向下移动一段距离 */
+    }
+  }

src/scene/ui.tsx

@@ -4,7 +4,7 @@ import { MenuScene } from "./menu";
 import { LotteryScene } from "./lottery";
 import { GenerateScene } from "./generate";
 import { Alert, Snackbar } from "@mui/material";
-
+import './ui.css'
 type SnackSetterFunction = (snack: {
   open: boolean;
   message: string;
@@ -45,6 +45,10 @@ export const Message = {
 };
 
 export const GameUI = () => {
+  const [bgList, setBgList] = useState<string[]>([
+    'https://telegraph.cwy666.com/file/3139727dc463e5f54fe58.jpg',
+    'https://telegraph.cwy666.com/file/1f2dd4066229c242eb38e.png'
+]);
   const [scene, setScene] = useState<GAME_SCENES>(GAME_SCENES.MENU);
   const [prompts, setPrompts] = useState<string[]>([]);
   const [snack, setSnack] = useState({
@@ -61,8 +65,22 @@ export const GameUI = () => {
   useEffect(() => {
     Snacker.setSnack = setSnack;
   }, []);
+  const handleScrollClick = () => {
+//   向下滚动一个屏幕的距离
+   const t = window.innerHeight 
+   debugger
+   window.scrollTo(0, t) 
+
+}
   return (
-    <div>
+    <div className=" w-full h-full overflow-x-hidden">
+      <div className="bg-no-repeat bg-cover bg-center relative flex justify-center w-full h-full p-0 m-0"  style={{backgroundImage: `url(${bgList[1]}`}}>
+        <div  className=" text-white font-bold text-4xl  absolute bottom-10 flex flex-col items-center justify-center ">
+            快来挑选你的老婆！
+            <svg onClick={handleScrollClick} className="icon arrow pt-2 cursor-pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2605" width="100" height="50"><path d="M512 777.536l348.416-319.36L960 549.504 512 960 64 549.44 163.584 458.24 512 777.536z m0-394.24L860.416 64 960 155.264 512 565.76 64 155.264 163.584 64 512 383.36z" fill="white" p-id="2606"></path></svg>
+        </div>
+      </div>
+      <div className=" flex flex-col justify-center items-center w-full h-full">
         {scene === GAME_SCENES.MENU && <MenuScene setScene={setScene} />}
         {scene === GAME_SCENES.LOTTERY && (
             <LotteryScene setScene={setScene} setPrompts={setPrompts} />
@@ -70,6 +88,7 @@ export const GameUI = () => {
         {scene === GAME_SCENES.GENERATE && (
             <GenerateScene setScene={setScene} prompts={prompts} />
         )}
+      </div>
       <Snackbar
         anchorOrigin={{ vertical: "top", horizontal: "center" }}
         open={snack.open}

tailwind.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}