refactor: 90%

src/ui/Duel/PlayMat/Mat/index.scss → src/ui/Duel/PlayMat/Mat/index.module.scss

-section#mat {
-  // margin-top: 200px;
-  // padding-top: 50px; // 先不管 后面调整
+section.mat {
   position: relative;
-  #camera {
+  .camera {
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -10,7 +8,7 @@ section#mat {
     align-items: center;
     // perspective: var(--perspective);
   }
-  #plane {
+  .plane {
     transform: translateX(0) translateY(0) translateZ(0)
       rotateX(var(--plane-rotate-x));
     width: fit-content;
@@ -19,7 +17,7 @@ section#mat {
   }
 }
 
-.mat-card-container {
+.container {
   position: absolute;
   top: 50%;
   left: 50%;

src/ui/Duel/PlayMat/Mat/index.tsx

-import "./index.scss";
+import styles from "./index.module.scss";
 
 import { useSnapshot } from "valtio";
 
@@ -12,7 +12,7 @@ export const Mat: React.FC = () => {
   const snap = useSnapshot(cardStore.inner);
   return (
     <section
-      id="mat"
+      className="mat"
       style={{
         width: "100%",
       }}
@@ -30,11 +30,11 @@ export const Mat: React.FC = () => {
 };
 
 const Plane: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <div id="camera">
-    <div id="plane">{children}</div>
+  <div className={styles.camera}>
+    <div className={styles.plane}>{children}</div>
   </div>
 );
 
 const CardContainer: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <div className="mat-card-container">{children}</div>
+  <div className={styles.container}>{children}</div>
 );