ホーム エクスプローラ ヘルプ
登録 サインイン
lion
/
site_8g
1
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

feat: update Header

Before 1 年間 前
親
4616d6a1b4
コミット
a3a14fd621
7 ファイル変更、143 行追加、20 行削除
分割表示 差分情報を表示
  1. 5 0
      messages/br.json
  2. 10 1
      next.config.mjs
  3. 5 5
      src/app/[locale]/layout.tsx
  4. 1 1
      src/app/[locale]/providers.tsx
  5. 18 0
      src/components/Header/HerderTitle.tsx
  6. 17 12
      src/components/Header/index.tsx
  7. 87 1
      src/components/Header/style.module.scss

+ 5 - 0
messages/br.json
ファイルの表示 

@@ -4,5 +4,10 @@
 
   },
 
   "HomePage": {
 
 
+  },
 
+
 
+  "Header": {
 
+    "login": "Login",
 
+    "register": "Cadastre-se"
 
   }
 
 }

+ 10 - 1
next.config.mjs
ファイルの表示 

@@ -8,7 +8,16 @@ const nextConfig = {
 
     reactStrictMode: true,
 
     sassOptions: {
 
       prependData: `@import "./src/styles/variables.scss";`
 
-    }
 
+    },
 
+  images: {
 
+    remotePatterns: [
 
+      {
 
+        protocol: 'https',
 
+        hostname: '9f.com',
 
+        pathname: '/img/**',
 
+      },
 
+    ],
 
+  },
 
 };
 
 
 export default withNextIntl(nextConfig);

+ 5 - 5
src/app/[locale]/layout.tsx
ファイルの表示 

@@ -30,12 +30,12 @@ export default async function LocaleLayout({
 
     const messages = await getMessages();
 
     return (
 
         <html lang={locale} suppressHydrationWarning>
 
-            <body className={clsx("font-sans", fontSans.variable)}>
 
-                <NextIntlClientProvider messages={messages}>
 
-                    <Providers themeProps={{ defaultTheme: "dark", attribute: "class" }}>
 
+            <body className={clsx("bg-amber-50 font-sans", fontSans.variable)}>
 
+                <Providers themeProps={{ defaultTheme: "dark", attribute: "class" }}>
 
+                    <NextIntlClientProvider messages={messages}>
 
                         <PageTransitionEffect>{children}</PageTransitionEffect>
 
-                    </Providers>
 
-                </NextIntlClientProvider>
 
+                    </NextIntlClientProvider>
 
+                </Providers>
 
             </body>
 
         </html>
 
     );

+ 1 - 1
src/app/[locale]/providers.tsx
ファイルの表示 

@@ -18,7 +18,7 @@ export const Providers = ({ children, themeProps }: ProvidersProps) => {
 
         setHtmlFontSize();
 
     }, []);
 
     return (
 
-        <div id="app">
 
+        <div id="app" className="bg-black">
 
             <NextUIProvider navigate={router.push}>
 
                 <ThemeProvider {...themeProps}>{children}</ThemeProvider>
 
             </NextUIProvider>

ファイルの差分が大きいため隠しています
+ 18 - 0
src/components/Header/HerderTitle.tsx


+ 17 - 12
src/components/Header/index.tsx
ファイルの表示 

@@ -1,6 +1,9 @@
 
-"use client";
 
+import { Link } from "@/i18n";
 
+import clsx from "clsx";
 
+import { useTranslations } from "next-intl";
 
 import { FC, PropsWithChildren, ReactNode } from "react";
 
-
 
+import HeaderTitle from "./HerderTitle";
 
+import styles from "./style.module.scss";
 
 /**
 
  * @description HeaderProps
 
  * @param {boolean} headerPlaceholder 是否展示展位元素
 
@@ -11,21 +14,23 @@ export interface HeaderProps {
 
     headerRender?: () => ReactNode;
 
 }
 
 
-import { useRouter } from "@/i18n";
 
-import clsx from "clsx";
 
-import styles from "./style.module.scss";
 
+const cs = clsx(["iconfont icon-gengduo", styles.menu]);
 
 const DefaultHeader: FC = () => {
 
-    const router = useRouter();
 
+    const t = useTranslations("Header");
 
     return (
 
         <div className={styles.headerMain}>
 
             <div className={styles.headerLeft}>
 
-                <div
 
-                    className="iconfont icon-gengduo"
 
-                    onClick={() => router.push("/project")}
 
-                ></div>
 
+                <div className={cs}></div>
 
+            </div>
 
+            <HeaderTitle />
 
+            <div className={styles.headerRight}>
 
+                <div className={styles.right}>
 
+                    <Link href={"/login"}>{t("login")}</Link>
 
+                    <Link href={"/login"} className={styles.rightActive}>
 
+                        {t("register")}
 
+                    </Link>
 
+                </div>
 
             </div>
 
-            <div className={styles.headerTitle}></div>
 
-            <div className={styles.headerRight}></div>
 
         </div>
 
     );
 
 };

+ 87 - 1
src/components/Header/style.module.scss
ファイルの表示 

@@ -11,11 +11,97 @@
 
     max-width: 4.02rem;
 
     transform: translateZ(0);
 
     background: $-theme-color ;
 
-    border: 1px solid blue;
 
 
   .headerMain{
 
     position: relative;
 
     padding: 3px 0;
 
     box-sizing: border-box;
 
+    display: flex;
 
+    .headerLeft{
 
+      position: absolute;
 
+      display: block;
 
+      line-height: 21px;
 
+      color: #ccc;
 
+      top: .13rem;
 
+      left: .1rem;
 
+      .menu{
 
+        font-size: .16rem;
 
+        color: #606060;
 
+      }
 
+    }
 
+    .headerTitle{
 
+      margin: 0 .5rem;
 
+      height: .4rem;
 
+      display: flex;
 
+      width: auto;
 
+      overflow: hidden;
 
+      text-overflow: ellipsis;
 
+      white-space: nowrap;
 
+      line-height: 0.4rem;
 
+      text-align: center;
 
+      font-size: 18px;
 
+      font-weight: 400;
 
+      color: #fff;
 
+      align-items: center;
 
+      img{
 
+        height: .18rem;
 
+      }
 
+      .title{
 
+        font-size: .24rem;
 
+        font-weight: 900;
 
+        line-height: 40px;
 
+        font-style: italic;
 
+        color: #333;
 
+        display: -webkit-box;
 
+        display: -ms-flexbox;
 
+        display: flex;
 
+        -webkit-box-align: center;
 
+        -ms-flex-align: center;
 
+        align-items: center;
 
+      }
 
+      .selectCountry{
 
+        display: flex;
 
+        align-items: center;
 
+        margin-left: .12rem;
 
+        img{
 
+          width: .22rem;
 
+          height: auto;
 
+        }
 
+      }
 
+      .menuDown{
 
+        margin-left: .06rem;
 
+        border: .04rem solid #4b3d0e;
 
+        border-color: #4b3d0e transparent transparent transparent;
 
+        border-width: .05rem;
 
+        border-radius: .015rem;
 
+        border-bottom: 0;
 
+        width: 0;
 
+        height: 0;
 
+      }
 
+    }
 
+
 
+    .headerRight{
 
+      position: absolute;
 
+      display: block;
 
+      font-size: 14px;
 
+      line-height: 21px;
 
+      color: #ccc;
 
+      top: .10rem;
 
+      right: .12rem;
 
+      .right{
 
+        color: #fff;
 
+        font-size: .15rem;
 
+        display: flex;
 
+        align-items: center;
 
+        .rightActive{
 
+          background: linear-gradient(180deg, #ff9323, #ff6a01);
 
+          padding: .04rem .05rem;
 
+          border-radius: .05rem;
 
+          color: #fff;
 
+          margin-left: .11rem;
 
+          //margin-top: -.023rem;
 
+        }
 
+      }
 
+    }
 
   }
 
 }

この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません