Commit 93fae549 authored by timel's avatar timel

refactor: 95%

parent 153bc5a9
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
z-index: 1; z-index: 1;
transform: translateZ(0.5px); transform: translateZ(0.5px);
} }
&.focus .cover { &.focusing .cover {
animation: focus 0.6s ease-in-out; animation: focus 0.6s ease-in-out;
} }
.back { .back {
......
...@@ -307,7 +307,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => { ...@@ -307,7 +307,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
> >
<div <div
className={classnames(styles["img-wrap"], { className={classnames(styles["img-wrap"], {
[styles.focus]: classFocus, [styles.focusing]: classFocus,
})} })}
> >
<YgoCard <YgoCard
......
section.mat { section.mat {
position: relative; position: relative;
width: "100%";
.camera { .camera {
height: 100%; height: 100%;
display: flex; display: flex;
......
...@@ -9,32 +9,27 @@ import { Card } from "../Card"; ...@@ -9,32 +9,27 @@ import { Card } from "../Card";
// 后面再改名 // 后面再改名
export const Mat: React.FC = () => { export const Mat: React.FC = () => {
const snap = useSnapshot(cardStore.inner);
return ( return (
<section <section className={styles.mat}>
className="mat" <div className={styles.camera}>
style={{ <div className={styles.plane}>
width: "100%",
}}
>
<Plane>
<Bg /> <Bg />
<CardContainer> <div className={styles.container}>
<Cards />
</div>
</div>
</div>
</section>
);
};
const Cards: React.FC = () => {
const snap = useSnapshot(cardStore.inner);
return (
<>
{snap.map((_cardSnap, i) => ( {snap.map((_cardSnap, i) => (
<Card key={i} idx={i} /> <Card key={i} idx={i} />
))} ))}
</CardContainer> </>
</Plane>
</section>
); );
}; };
const Plane: React.FC<React.PropsWithChildren> = ({ children }) => (
<div className={styles.camera}>
<div className={styles.plane}>{children}</div>
</div>
);
const CardContainer: React.FC<React.PropsWithChildren> = ({ children }) => (
<div className={styles.container}>{children}</div>
);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment