修改一下样式

3 years ago · 04467d8b1e
parent f292f7e0cf
commit 04467d8b1e
9 changed files with 10033 additions and 59 deletions
--- a/craco.config.js
+++ b/craco.config.js
@ -0,0 +1,10 @@
+module.exports = {
+    style: {
+      postcss: {
+        plugins: [
+          require('tailwindcss'),
+          require('autoprefixer'),
+        ],
+      },
+    },
+  }
--- a/package.json
+++ b/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",
--- a/src/App.js
+++ b/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>
  );
--- a/src/index.css
+++ b/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;
--- a/src/scene/lottery.tsx
+++ b/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={() => {
--- a/src/scene/ui.css
+++ b/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);/* 继续向下移动一段距离 */
+    }
+  }
--- a/src/scene/ui.tsx
+++ b/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}
--- a/tailwind.config.js
+++ b/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: [],
+}
--- a/yarn.lock
+++ b/yarn.lock