main
fadeaway 8 months ago
parent 0fb6dc2407
commit a0ace3bda9

@ -2,6 +2,8 @@
import Image from 'next/image'; import Image from 'next/image';
import AppLogo from '@/components/AppLogo';
import { download } from '@/utils/download'; import { download } from '@/utils/download';
import useUA from '@/hooks/useUA'; import useUA from '@/hooks/useUA';
@ -36,12 +38,7 @@ export default function Download() {
</div> </div>
)} )}
<div className="flex flex-col items-center mt-[151px]"> <AppLogo className="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>
<button <button
className="w-[283px] h-[48px] flex items-center justify-center bg-[#B44343] font-medium text-[17px] rounded-full mt-[44px]" className="w-[283px] h-[48px] flex items-center justify-center bg-[#B44343] font-medium text-[17px] rounded-full mt-[44px]"

@ -2,31 +2,6 @@
@tailwind components; @tailwind components;
@tailwind utilities; @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 { :root {
--body-bg-color: #1a1a1a; --body-bg-color: #1a1a1a;
} }
@ -39,7 +14,6 @@
body { body {
background: var(--body-bg-color); background: var(--body-bg-color);
font-family: 'PingFang SC-Regular', Helvetica; font-family: 'PingFang SC-Regular', Helvetica;
/* padding-bottom: constant(safe-area-inset-bottom); /* padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); */ padding-bottom: env(safe-area-inset-bottom); */
} }

@ -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 }>) { import './globals.css';
const [loaded, setLoaded] = useState(false);
const setRem = async () => { export const metadata: Metadata = {
await import('lib-flexible'); title: '雀乐',
setLoaded(true); description: '独立 不独于世',
}; };
useEffect(() => { export const viewport: Viewport = {
setRem(); width: 'device-width',
window.addEventListener('resize', setRem); initialScale: 1,
return () => { maximumScale: 1,
window.removeEventListener('resize', setRem); minimumScale: 1,
}; userScalable: false,
}, []); viewportFit: 'cover',
};
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
return ( return (
<html lang="zn-ch"> <html lang="zn-ch" className={RegularFont.className}>
<head> <body>
<meta <LibFlexible>{children}</LibFlexible>
name="viewport" </body>
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> </html>
); );
} }

@ -5,6 +5,8 @@ import { useRef } from 'react';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import AppLogo from '@/components/AppLogo';
import { download } from '@/utils/download'; import { download } from '@/utils/download';
import useUA from '@/hooks/useUA'; 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>} {!inWX && <h1 className="text-center text-[17px] h-[44px] leading-[44px]"></h1>}
{/* App logo */} {/* App logo */}
<div className="flex flex-col items-center absolute top-[25%]"> <AppLogo className="absolute top-[22%]" />
<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>
<div className="w-full flex flex-col items-center absolute bottom-0"> <div className="w-full flex flex-col items-center absolute bottom-0">
<button <button
@ -135,18 +134,18 @@ export default function Home() {
</p> </p>
{/* <h5 className="text-[#ffffffb2] text-center text-[15px] leading-[21px] mt-[47px] mb-[4px]"></h5> {/* <h5 className="text-[#ffffffb2] text-center text-[15px] leading-[21px] mt-[47px] mb-[4px]"></h5>
<p className="text-center text-[20px] font-medium leading-[33.6px] flex items-center justify-center"> <p className="text-center text-[20px] font-medium leading-[33.6px] flex items-center justify-center">
<span className="relative"> <span className="relative">
<Image <Image
className="w-[24px] h-[24px] absolute top-[50%] right-[-24px] translate-y-[-50%]" className="w-[24px] h-[24px] absolute top-[50%] right-[-24px] translate-y-[-50%]"
width={24} width={24}
height={24} height={24}
src="/img/icon.svg" src="/img/icon.svg"
alt="arrow-right" alt="arrow-right"
/> />
</span> </span>
</p> */} </p> */}
<Link <Link
className="block w-[fit-content] mt-[68px] ml-auto mr-auto" className="block w-[fit-content] mt-[68px] ml-auto mr-auto"

@ -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>
);
}

@ -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;
}

@ -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',
});
Loading…
Cancel
Save