update

src/component/homeButton/index.tsx

@@ -0,0 +1,83 @@
+import style from "./style.module.css";
+import { useEffect, useState } from "react";
+import { Close } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+
+enum Status {
+  normal,
+  addFile,
+  receive,
+}
+
+export function HomeButton() {
+  let [status, setStatus] = useState(Status.normal);
+  let [boxStyle, setBoxStyle] = useState([style.box]);
+  let [isReceive, setIsReceive] = useState(false);
+  let onNormal = () => {
+    setStatus(Status.normal);
+  };
+  let onAddFile = () => {
+    setStatus(Status.addFile);
+  };
+  let onReceive = () => {
+    setStatus(Status.receive);
+  };
+
+  useEffect(() => {
+    switch (status) {
+      case Status.normal:
+        setBoxStyle([style.box]);
+        break;
+      case Status.addFile:
+        setBoxStyle([style.box, style.boxActivePlus]);
+        break;
+      case Status.receive:
+        setBoxStyle([style.box, style.boxActiveReceive]);
+        break;
+    }
+  }, [status]);
+
+  return (
+    <div className={boxStyle.join(" ")}>
+      {!isReceive ? (
+        <>
+          <div className={style.plus}>➕</div>
+          <div
+            className={style.addFile}
+            onMouseEnter={onAddFile}
+            onMouseLeave={onNormal}
+          >
+            添加文件
+          </div>
+          <button
+            className={style.receive}
+            onMouseEnter={onReceive}
+            onMouseLeave={onNormal}
+            onClick={() => {
+              setIsReceive(true);
+            }}
+          >
+            接收文件
+          </button>
+        </>
+      ) : (
+        <>
+          <input
+            placeholder={"输入6位传输口令获取文件"}
+            style={{}}
+            className={isReceive ? style.receiveInput : style.receiveInputNone}
+          />
+          <IconButton
+            className={style.receiveInputClose}
+            aria-label="delete"
+            onClick={() => {
+              setIsReceive(false);
+            }}
+          >
+            <Close />
+          </IconButton>
+        </>
+      )}
+    </div>
+  );
+}

src/component/homeButton/style.module.css

@@ -0,0 +1,99 @@
+body {
+  /*background-color: yellow;*/
+}
+
+.box {
+  width: 400px;
+  height: 80px;
+  border-radius: 50px;
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  box-shadow: 0 0 15px #a7a7a7;
+  transition: 0.5s;
+  color: #252525;
+}
+
+.boxActivePlus {
+  transform: translateX(-20px);
+}
+
+.boxActiveReceive {
+  transform: translateX(20px);
+}
+
+.plus {
+  font-size: 40px;
+  margin-left: 30px;
+  height: 100px;
+  text-align: center;
+  line-height: 100px;
+  cursor: pointer;
+}
+
+.addFile {
+  font-size: 24px;
+  padding-left: 30px;
+  margin-right: 140px;
+  font-weight: bold;
+  flex-grow: 1;
+  cursor: pointer;
+}
+
+.receive {
+  position: absolute;
+  height: 60px;
+  width: 120px;
+  right: 10px;
+  font-size: 18px;
+  color: black;
+  border-radius: 35px;
+  border: 0;
+  background-color: #f2f2f2;
+}
+
+.receive:hover {
+  background-color: #fdda65;
+  cursor: pointer;
+}
+
+.receiveInput {
+  position: absolute;
+  width: 348px;
+  height: 48px;
+  background-color: white;
+  font-size: 18px;
+  color: #252525;
+  border-radius: 35px;
+  margin: 0 0 0 10px;
+  padding: 0 0 0 20px;
+  line-height: 60px;
+  outline: none;
+  border: #f1f1f1 solid 6px;
+  transition: 0.3s;
+  -webkit-user-drag: none;
+  right: 10px;
+}
+
+.receiveInputNone {
+  width: 120px;
+  transition: 0.3s;
+}
+
+.receiveInput:hover {
+  border: #fdda65 solid 6px;
+}
+
+.receiveInput:active {
+  border: 0;
+}
+
+.receiveInput::selection {
+  background-color: #ffd95a;
+}
+
+.receiveInputClose {
+  position: absolute;
+  right: 20px;
+}