tiefen_space_web/app/page.jsx

138 lines
7.5 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use client";
import Link from "next/link";
import React, { useState, useEffect } from "react";
import InOtherApp from "@/components/InOtherApp";
import Image from "next/image";
import download_lefttop from "@/public/images/download_lefttop.png";
import download_righttop from "@/public/images/download_righttop.png";
import download_rightmedium from "@/public/images/download_rightmedium.png";
import download_leftbottom from "@/public/images/download_leftbottom.png";
import download_rightbottom from "@/public/images/download_rightbottom.png";
import slogan from "@/public/images/slogan.png";
import qrcode from "@/public/images/qrcode.png";
import Footer from "@/components/Footer";
export default function Home() {
const [deviceType, setDeviceType] = useState("");
useEffect(() => {
const userAgent = navigator.userAgent;
//区分设备类型
if (/Android/i.test(userAgent)) {
setDeviceType("Android");
} else if (/iPhone|iPad|iPod/i.test(userAgent)) {
setDeviceType("ios");
} else {
setDeviceType("pc");
}
}, []);
return (
<section className="flex flex-col container">
<InOtherApp />
<div className="absolute top-0 left-0 w-full h-full z-0">
<Image
className="absolute top-0 left-0 w-36"
src={download_lefttop}
alt=""
/>
<Image
className="absolute top-10 right-0 w-28"
src={download_righttop}
alt=""
/>
<Image
className="absolute top-64 right-0 w-24"
src={download_rightmedium}
alt=""
/>
<Image
className="absolute bottom-[17rem] left-0 w-32"
src={download_leftbottom}
alt=""
/>
<Image
className="absolute bottom-0 right-0 w-[21rem]"
src={download_rightbottom}
alt=""
/>
</div>
<div className="flex flex-col flex-1 py-16 items-center justify-around z-10">
<Image className="w-96" src={slogan} priority alt="" />
{deviceType === "pc" && (
<div className="flex flex-row gap-20">
<a
href="https://filecdn01.tiefen.fun/appdownload/ironfans1.2.7.apk"
className="group relative cursor-pointer w-20 h-20 rounded-full bg-[#FFFFFF1A]"
>
<p className="group-hover:opacity-100 opacity-0 transition-all duration-300 absolute flex w-full h-full items-center justify-center text-white text-xs">
立即下载
</p>
<div className="group-hover:opacity-0 opacity-100 transition-all duration-300 flex flex-col w-full h-full items-center justify-center">
<svg viewBox="0 0 1024 1024" width="32" height="32">
<path
d="M192.128 240.298667a42.666667 42.666667 0 0 1 58.24 15.872l71.552 125.226666A467.712 467.712 0 0 1 511.957333 341.333333c61.056 0 119.381333 11.648 172.885334 32.853334l67.413333-118.016a42.666667 42.666667 0 0 1 74.112 42.325333l-65.322667 114.304a469.333333 469.333333 0 0 1 217.941334 350.976A42.666667 42.666667 0 0 1 936.533333 810.666667H87.466667a42.666667 42.666667 0 0 1-42.453334-46.890667 469.12 469.12 0 0 1 202.410667-340.821333L176.256 298.496a42.666667 42.666667 0 0 1 15.872-58.197333zM320 661.333333a42.666667 42.666667 0 1 0 0-85.333333 42.666667 42.666667 0 0 0 0 85.333333z m426.666667-42.666666a42.666667 42.666667 0 1 0-85.333334 0 42.666667 42.666667 0 0 0 85.333334 0z"
fill="#ffffff"
></path>
</svg>
<p className="text-white text-xs ">Android</p>
</div>
</a>
<div className="group relative cursor-pointer w-20 h-20 rounded-full bg-[#FFFFFF1A]">
<p className="group-hover:opacity-100 opacity-0 transition-all duration-300 text-center p-3 absolute flex w-full h-full items-center justify-center text-white text-xs">
扫描下方二维码
</p>
<div className="group-hover:opacity-0 opacity-100 transition-all duration-300 flex flex-col w-full h-full items-center justify-center">
<svg viewBox="0 0 1024 1024" width="32" height="32">
<path
d="M549.973333 117.077333c-24.704 34.944-38.101333 76.757333-39.850666 124.373334 8.021333-0.896 16-1.962667 23.893333-3.2 8.96-1.408 16.341333-2.986667 21.76-4.608 16.341333-5.632 34.816-18.048 54.784-36.778667 21.333333-21.290667 37.461333-44.842667 47.744-69.888 9.813333-25.898667 14.762667-49.408 14.762667-69.930667v-9.045333l-1.152-5.162667c-56.149333 14.122667-97.152 39.082667-121.941334 74.24z"
fill="#ffffff"
></path>
<path
d="M200.533333 279.04C248.490667 232.064 307.114667 213.333333 349.482667 213.333333c41.813333 0 76.629333 18.261333 101.546666 31.402667l2.944 1.536c28.16 14.762667 45.909333 23.125333 65.493334 23.125333 20.224 0 39.509333-8.789333 71.082666-23.850666l0.597334-0.298667C619.733333 231.594667 657.92 213.333333 704 213.333333c63.701333 0 116.693333 32.256 158.421333 86.528a42.666667 42.666667 0 0 1-5.205333 57.642667c-45.482667 41.173333-67.84 91.690667-67.84 154.496 0 87.04 61.312 125.44 90.837333 143.018667a42.666667 42.666667 0 0 1 18.432 50.816c-10.666667 30.250667-30.208 68.181333-49.92 101.333333-19.370667 32.682667-41.728 65.493333-59.306666 83.626667l-0.896 0.981333c-12.885333 13.269333-27.648 28.501333-45.568 39.424-20.437333 12.373333-42.794667 18.133333-69.888 18.133333-15.957333 0-31.872-3.456-45.610667-7.253333-12.458667-3.413333-25.557333-7.850667-37.461333-11.861333l-4.053334-1.365334c-28.458667-9.6-49.792-16-66.474666-16-15.957333 0-33.706667 5.973333-59.605334 15.573334l-3.84 1.408c-22.016 8.234667-52.053333 19.498667-82.474666 19.498666-64.426667 0-105.6-50.005333-118.357334-65.450666a221.952 221.952 0 0 0-2.304-2.773334l-1.152-1.322666c-18.346667-21.333333-136.362667-157.952-136.362666-367.786667 0-109.184 35.797333-184.704 85.077333-232.96z"
fill="#ffffff"
></path>
</svg>
<p className="text-white text-xs ">ios</p>
</div>
</div>
</div>
)}
<div className="flex flex-col justify-center items-center">
<Image className="w-28 rounded-2xl" src={qrcode} priority alt="" />
{deviceType === "pc" && (
<p className="mt-3 text-white text-sm font-normal">手机扫码下载</p>
)}
</div>
<div className="flex flex-col items-center">
{deviceType !== "pc" && (
<>
<a
className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-64 h-14"
href={
deviceType === "ios"
? "itms-services://?action=download-manifest&url=https%3A%2F%2Fsapi.dbqapp.com%2Fshow%2Fplist%2F991989474491629568%3F1711165532"
: "https://filecdn01.tiefen.fun/appdownload/ironfans1.2.7.apk"
}
>
安装
</a>
</>
)}
{deviceType !== "Android" && (
<p className="mt-3 text-white text-sm font-normal">
安装前请卸载旧版本详情请
<Link
className="link text-primary cursor-pointer"
href="/doc/ioshowtoinstall"
>
查看帮助
</Link>
</p>
)}
</div>
</div>
<Footer />
</section>
);
}