update

8 months ago · a0ace3bda9
parent 0fb6dc2407
commit a0ace3bda9
11 changed files with 102 additions and 75 deletions
--- a/src/app/agreement/complaintGuidelines/page.tsx
+++ b/src/app/agreement/complaintGuidelines/page.tsx
--- a/src/app/agreement/intellectualPropertyDescription/page.tsx
+++ b/src/app/agreement/intellectualPropertyDescription/page.tsx
--- a/src/app/agreement/privacyPolicy/page.tsx
+++ b/src/app/agreement/privacyPolicy/page.tsx
--- a/src/app/agreement/registrationAgreement/page.tsx
+++ b/src/app/agreement/registrationAgreement/page.tsx
--- a/src/app/download/page.tsx
+++ b/src/app/download/page.tsx
@ -2,6 +2,8 @@

 import Image from 'next/image';

+import AppLogo from '@/components/AppLogo';
+
 import { download } from '@/utils/download';

 import useUA from '@/hooks/useUA';
@ -36,12 +38,7 @@ export default function Download() {
        </div>
      )}

-      <div className="flex flex-col items-center mt-[151px]">
-        <Image className="w-[90px] h-[90px]" width={90} height={90} src="/img/app_icon_white_bg.svg" alt="queyue" />
-        <p className="text-[20px] leading-[24px] font-['Fontquan-XinYiJiXiangSong-Regular'] mt-[20px] tracking-[3px]">
-          独立 不独于世
-        </p>
-      </div>
+      <AppLogo className="mt-[151px]" />

      <button
        className="w-[283px] h-[48px] flex items-center justify-center bg-[#B44343] font-medium text-[17px] rounded-full mt-[44px]"
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -2,31 +2,6 @@
@tailwind components;
@tailwind utilities;

-@font-face {
-  font-family: 'PingFang SC-Regular';
-  src: url('/fonts/ping-fang-hei-ti-zhun-jian.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'PingFang SC-Medium';
-  src: url('/fonts/pingfang-sc-medium.otf') format('opentype');
-}
-
-@font-face {
-  font-family: 'PingFang SC-Semibold';
-  src: url('/fonts/pingfangsc-semibold.otf') format('opentype');
-}
-
-@font-face {
-  font-family: 'Abhaya Libre SemiBold-Regular';
-  src: url('/fonts/ping-fang-hei-ti-zhun-jian.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Fontquan-XinYiJiXiangSong-Regular';
-  src: url('/fonts/Fontquan-XinYiJiXiangSong.ttf') format('truetype');
-}
-
 :root {
  --body-bg-color: #1a1a1a;
 }
@ -39,7 +14,6 @@
 body {
  background: var(--body-bg-color);
  font-family: 'PingFang SC-Regular', Helvetica;
-
  /* padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom); */
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,37 +1,31 @@
-'use client';
+import LibFlexible from '@/components/LibFlexible';

-import { useState, useEffect } from 'react';
+import { RegularFont } from '@/utils/font';

-import './globals.css';
+import type { Metadata, Viewport } from 'next';

-export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
-  const [loaded, setLoaded] = useState(false);
+import './globals.css';

-  const setRem = async () => {
-    await import('lib-flexible');
-    setLoaded(true);
-  };
+export const metadata: Metadata = {
+  title: '雀乐',
+  description: '独立 不独于世',
+};

-  useEffect(() => {
-    setRem();
-    window.addEventListener('resize', setRem);
-    return () => {
-      window.removeEventListener('resize', setRem);
-    };
-  }, []);
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  minimumScale: 1,
+  userScalable: false,
+  viewportFit: 'cover',
+};

+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
-    <html lang="zn-ch">
-      <head>
-        <meta
-          name="viewport"
-          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
-        />
-        <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
-        <title>雀乐</title>
-        <meta name="description" content="独立 不独于世" />
-      </head>
-      <body>{loaded ? children : null}</body>
+    <html lang="zn-ch" className={RegularFont.className}>
+      <body>
+        <LibFlexible>{children}</LibFlexible>
+      </body>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -5,6 +5,8 @@ import { useRef } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';

+import AppLogo from '@/components/AppLogo';
+
 import { download } from '@/utils/download';

 import useUA from '@/hooks/useUA';
@ -36,10 +38,7 @@ export default function Home() {
        {!inWX && <h1 className="text-center text-[17px] h-[44px] leading-[44px]">雀乐</h1>}

        {/* App logo */}
-        <div className="flex flex-col items-center absolute top-[25%]">
-          <Image className="w-[90px] h-[90px]" width={90} height={90} src="/img/app_icon_white_bg.svg" alt="queyue" />
-          <p className="text-[20px] font-['Fontquan-XinYiJiXiangSong-Regular'] mt-3 tracking-[3px]">独立 不独于世</p>
-        </div>
+        <AppLogo className="absolute top-[22%]" />

        <div className="w-full flex flex-col items-center absolute bottom-0">
          <button
--- a/src/components/AppLogo/index.tsx
+++ b/src/components/AppLogo/index.tsx
@ -0,0 +1,15 @@
+import Image from 'next/image';
+
+import { XinYiJiXiangSongFont } from '@/utils/font';
+
+export default function AppLogo(props: { className?: string }) {
+  const cls = props.className || '';
+  return (
+    <div className={`flex flex-col items-center ${cls}`}>
+      <Image className="w-[90px] h-[90px]" width={90} height={90} src="/img/app_icon_white_bg.svg" alt="queyue" />
+      <p className={`${XinYiJiXiangSongFont.className} text-[20px] leading-[24px] mt-[20px] tracking-[3px]`}>
+        独立 不独于世
+      </p>
+    </div>
+  );
+}
--- a/src/components/LibFlexible/index.tsx
+++ b/src/components/LibFlexible/index.tsx
@ -0,0 +1,17 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export default function LibFlexible({ children }: Readonly<{ children: React.ReactNode }>) {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    const setRem = async () => {
+      await import('lib-flexible');
+      setLoaded(true);
+    };
+    setRem();
+  }, []);
+
+  return loaded ? children : null;
+}
--- a/src/utils/font.ts
+++ b/src/utils/font.ts
@ -0,0 +1,31 @@
+import localFont from 'next/font/local';
+
+export const RegularFont = localFont({
+  src: '../../public/fonts/ping-fang-hei-ti-zhun-jian.ttf',
+  display: 'swap',
+});
+
+export const MediumFont = localFont({
+  src: '../../public/fonts/pingfang-sc-medium.otf',
+  display: 'swap',
+});
+
+export const SemiboldFont = localFont({
+  src: '../../public/fonts/pingfangsc-semibold.otf',
+  display: 'swap',
+});
+
+export const AbhayaFont = localFont({
+  src: '../../public/fonts/AlibabaPuHuiTi-3-65-Medium.woff2',
+  display: 'swap',
+});
+
+export const AbhayaSemiboldFont = localFont({
+  src: '../../public/fonts/abhayalibre-semibold.ttf',
+  display: 'swap',
+});
+
+export const XinYiJiXiangSongFont = localFont({
+  src: '../../public/fonts/Fontquan-XinYiJiXiangSong.ttf',
+  display: 'swap',
+});