wip: poster

cdsctf · Nov 3, 2024 · 4905f5f · 4905f5f
1 parent 263b871
commit 4905f5f
Show file tree

Hide file tree

Showing 7 changed files with 178 additions and 2 deletions.
diff --git a/src/components/core/Button/Button.module.scss b/src/components/core/Button/Button.module.scss
@@ -8,6 +8,7 @@ $text-color: var(--text-color);
 
 .root {
     width: $width;
+    height: $height;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -21,6 +22,7 @@ $text-color: var(--text-color);
     white-space: nowrap;
     font-size: 1.125rem;
     line-height: 1.75rem;
+    overflow: hidden;
 
     cursor: pointer;
 
@@ -29,8 +31,12 @@ $text-color: var(--text-color);
     }
 
     &[data-variant="outlined"] {
-        background-color: transparent;
+        background-color: var(--color-light);
         border-color: $bg-color;
+
+        @include mixins.dark {
+            background-color: var(--color-dark);
+        }
     }
 
     &[data-variant="ghost"] {

diff --git a/src/components/core/Image/Image.module.scss b/src/components/core/Image/Image.module.scss
@@ -0,0 +1,40 @@
+@use "@/styles/mixins";
+
+$width: var(--width);
+$height: var(--height);
+
+.root {
+    position: relative;
+    width: $width;
+    height: $height;
+    border-radius: 12px;
+    overflow: hidden;
+    background-color: #0000001d;
+    transition: all 200ms ease-in-out;
+
+    @include mixins.dark {
+        background-color: #ffffff0d;
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .loading {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        backdrop-filter: blur(5px);
+
+        .loading-icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+}
diff --git a/src/components/core/Image/Image.tsx b/src/components/core/Image/Image.tsx
@@ -0,0 +1,47 @@
+import React, { ComponentProps, useState } from "react";
+import styles from "./Image.module.scss";
+import Loading from "@/components/icons/Loading";
+
+export interface ImageProps extends ComponentProps<"img"> {
+    src?: string;
+    width?: string;
+    height?: string;
+    fallback?: React.ReactNode;
+}
+
+export function Image(props: ImageProps) {
+    const { src, width = "fit-content", height = "100%", style } = props;
+
+    const [err, setErr] = useState<boolean>(false);
+    const [loading, setLoading] = useState<boolean>(true);
+
+    const variables = {
+        "--width": width,
+        "--height": height,
+    } as React.CSSProperties;
+
+    return (
+        <div
+            className={styles["root"]}
+            style={{
+                ...variables,
+                ...style,
+            }}
+        >
+            <img
+                src={src}
+                alt={""}
+                onLoad={() => setLoading(false)}
+                onError={() => setErr(true)}
+                draggable={false}
+            />
+            {loading && (
+                <div className={styles["loading"]}>
+                    <div className={styles["loading-icon"]}>
+                        <Loading />
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/src/components/core/Image/index.ts b/src/components/core/Image/index.ts
@@ -0,0 +1 @@
+export { Image } from "./Image";
diff --git a/src/components/modals/ChallengeModal/ChallengeModal.module.scss b/src/components/modals/ChallengeModal/ChallengeModal.module.scss
@@ -23,6 +23,7 @@ $icon-color: var(--icon-color);
         width: 100%;
         display: flex;
         flex-direction: column;
+        align-items: center;
         filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.3));
 
         padding: 16px;
@@ -157,6 +158,7 @@ $icon-color: var(--icon-color);
 
         .submit {
             display: flex;
+            width: 99%;
             align-items: center;
             gap: 15px;
             margin: 12px 0;

diff --git a/src/pages/_games/page.module.scss b/src/pages/_games/page.module.scss
@@ -0,0 +1,46 @@
+@use "@/styles/mixins";
+
+.main {
+    position: fixed;
+    top: 55%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.poster {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    .info {
+        position: absolute;
+        width: 20%;
+        height: 10vh;
+        top: 0;
+        left: 30%;
+        transform: translate(-50%, -50%);
+        border-radius: 12px;
+        border: 2.75px solid var(--color-primary);
+        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+        background-color: var(--color-light);
+
+        @include mixins.dark {
+            background-color: var(--color-dark);
+        }
+    }
+
+    .enter {
+        position: absolute;
+        width: 10%;
+        height: 7vh;
+        bottom: 0;
+        right: 25%;
+        transform: translate(50%, 50%);
+    }
+}
diff --git a/src/pages/_games/page.tsx b/src/pages/_games/page.tsx
@@ -1,3 +1,37 @@
+import { Image } from "@/components/core/Image";
+import styles from "./page.module.scss";
+import { Button } from "@/components/core";
+import PlayCircleBold from "~icons/solar/play-circle-bold";
+
 export function Page() {
-    return <div>games</div>;
+    return (
+        <>
+            <h1>近期赛事</h1>
+            <div className={styles["main"]}>
+                <div className={styles["poster"]}>
+                    <Image
+                        src="https://picsum.photos/1920/1080"
+                        width="50%"
+                        height="60vh"
+                        style={{
+                            boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+                        }}
+                    />
+                    <div className={styles["info"]}>
+                        <span>CdsCTF 2024</span>
+                    </div>
+                    <div className={styles["enter"]}>
+                        <Button
+                            icon={<PlayCircleBold />}
+                            variant={"outlined"}
+                            width="100%"
+                            height="100%"
+                        >
+                            进入
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
 }