Selaa lähdekoodia

feat: 新增google 下载页

ansoni 3 kuukautta sitten
vanhempi
commit
d63f917c3b

+ 21 - 10
.env.local

@@ -1,13 +1,24 @@
+# 环境
 #baseurl
-NEXT_PUBLIC_BASE_URL=https://hk-api.tiktokjakjkl.icu
+# NEXT_PUBLIC_BASE_URL=http://192.168.0.71:8800
+NEXT_PUBLIC_BASE_URL=http://192.168.0.84:8800
+# NEXT_PUBLIC_BASE_URL=https://3rd-api.tiktokjakjkl.icu
 #share link
-NEXT_PUBLIC_SHARE_URL=https://hk-site.tiktokjakjkl.icu
+NEXT_PUBLIC_SHARE_URL=http://192.168.0.84:3000
+
 #firebase
-NEXT_PUBLIC_FIREBASE_APIKEY=AIzaSyCIE8xtySsYztsSgmQJx_aqPrrpHEuvgvw
-NEXT_PUBLIC_FIREBASE_AUTHDOMAIN=bcwin777-1bdda.firebaseapp.com
-NEXT_PUBLIC_FIREBASE_PROJECTID=bcwin777-1bdda
-NEXT_PUBLIC_FIREBASE_STORAGEBUCKET=bcwin777-1bdda.firebasestorage.app
-NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID=542456379513
-NEXT_PUBLIC_FIREBASE_APPID=1:542456379513:web:851a46fc639085170bfca8
-NEXT_PUBLIC_FIREBASE_MEASUREMENTID=G-GV6Y8DXHHD
-NEXT_PUBLIC_FIREBASE_KEYS=BOCfpA08vK6uxhMdRblnx9gPVBLx9WpTn9AutVNhHQQpVtXzDIKW0X6cmsNRaFDhyFDJfMqWjqC7mq6uDFIKU_M
+NEXT_PUBLIC_FIREBASE_APIKEY=AIzaSyDAWORGKhdyzb5KeqTi535VmD5gN2Cdle8
+NEXT_PUBLIC_FIREBASE_AUTHDOMAIN=bcwin-a99b1.firebaseapp.com
+
+
+
+
+NEXT_PUBLIC_FIREBASE_PROJECTID=bcwin-a99b1
+NEXT_PUBLIC_FIREBASE_STORAGEBUCKET=bcwin-a99b1.appspot.com
+NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID=1055413612814
+NEXT_PUBLIC_FIREBASE_APPID=1:1055413612814:web:7a563237de8e43849d275f
+
+
+
+NEXT_PUBLIC_FIREBASE_MEASUREMENTID=G-467M2BYJMS
+NEXT_PUBLIC_FIREBASE_KEYS=BAOsT7kii-ctLzGrgXe_wYhfuxlme1v4njnD0uPSKp3DpSnrUa2e709b9dRaeYVU7jF_qIx1y9tEv0CvilDCdnM

+ 1 - 0
.idea/prettier.xml

@@ -2,5 +2,6 @@
 <project version="4">
   <component name="PrettierConfiguration">
     <option name="myConfigurationMode" value="AUTOMATIC" />
+    <option name="myRunOnSave" value="true" />
   </component>
 </project>

+ 32 - 17
.idea/workspace.xml

@@ -5,8 +5,17 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="cefcab87-0337-4425-a7d4-cfe46845b330" name="Changes" comment="">
-      <change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/.gitignore" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/public/svg/google.svg" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/app/[locale]/store/layout.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/app/[locale]/store/page.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.env.local" beforeDir="false" afterPath="$PROJECT_DIR$/.env.local" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/bookmarks.json" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/bookmarks.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/prettier.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/prettier.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/iconfont/iconfont.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/iconfont/iconfont.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/iconfont/iconfont.ttf" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/iconfont/iconfont.ttf" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/iconfont/iconfont.woff" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/iconfont/iconfont.woff" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/iconfont/iconfont.woff2" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/iconfont/iconfont.woff2" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -30,24 +39,29 @@
     <option name="openDirectoriesWithSingleClick" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "JavaScript Debug.localhost:3000.executor": "Debug",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "RunOnceActivity.git.unshallow": "true",
-    "git-widget-placeholder": "dev",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "pnpm",
-    "npm.dev.executor": "Run",
-    "prettierjs.PrettierConfiguration.Package": "F:\\project\\site_front\\node_modules\\prettier",
-    "ts.external.directory.path": "F:\\project\\site_front\\node_modules\\typescript\\lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;JavaScript Debug.localhost:3000.executor&quot;: &quot;Debug&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;feature-Before&quot;,
+    &quot;last_opened_file_path&quot;: &quot;F:/project/site_front/src/styles/iconfont&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;pnpm&quot;,
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;F:\\project\\site_front\\node_modules\\prettier&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;F:\\project\\site_front\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="F:\project\site_front\src\styles\iconfont" />
+    </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="F:\project\site_front\public" />
     </key>
@@ -92,6 +106,7 @@
       <option name="presentableId" value="Default" />
       <updated>1742893039198</updated>
       <workItem from="1742893040377" duration="8579000" />
+      <workItem from="1744679148617" duration="3598000" />
     </task>
     <servers />
   </component>

BIN
public/store/avatar1.jpg


BIN
public/store/avatar2.jpg


BIN
public/store/avatar3.png


BIN
public/store/deletewebp.webp


BIN
public/store/other1.webp


+ 1 - 0
public/svg/google.svg

@@ -0,0 +1 @@
+<svg class="kOqhQd" aria-hidden="true" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0,0h40v40H0V0z"></path><g><path d="M19.7,19.2L4.3,35.3c0,0,0,0,0,0c0.5,1.7,2.1,3,4,3c0.8,0,1.5-0.2,2.1-0.6l0,0l17.4-9.9L19.7,19.2z" fill="#EA4335"></path><path d="M35.3,16.4L35.3,16.4l-7.5-4.3l-8.4,7.4l8.5,8.3l7.5-4.2c1.3-0.7,2.2-2.1,2.2-3.6C37.5,18.5,36.6,17.1,35.3,16.4z" fill="#FBBC04"></path><path d="M4.3,4.7C4.2,5,4.2,5.4,4.2,5.8v28.5c0,0.4,0,0.7,0.1,1.1l16-15.7L4.3,4.7z" fill="#4285F4"></path><path d="M19.8,20l8-7.9L10.5,2.3C9.9,1.9,9.1,1.7,8.3,1.7c-1.9,0-3.6,1.3-4,3c0,0,0,0,0,0L19.8,20z" fill="#34A853"></path></g></svg>

+ 7 - 0
src/app/[locale]/store/layout.tsx

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+
+const Layout = ({children}: {children: ReactNode}) => {
+  return <main className={"h-[100%] bg-[#fff]  overflow-y-auto"}>{children}</main>
+}
+
+export default Layout

+ 517 - 0
src/app/[locale]/store/page.tsx

@@ -0,0 +1,517 @@
+"use client";
+import { server } from "@/utils/client";
+import { Divider, ProgressBar, Rate } from "antd-mobile";
+import clsx from "clsx";
+import Image from "next/image";
+import { useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { Autoplay } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+const Header = () => {
+    return (
+        <div className={"sticky left-0 top-0 z-20 h-[0.4444rem] bg-[#fff] text-[#000] shadow"}>
+            header
+        </div>
+    );
+};
+
+const Footer = () => {
+    return (
+        <div className={"sticky bottom-0 left-0 h-[0.4444rem] bg-[#fff] text-[#000]"}>Footer</div>
+    );
+};
+
+const CardView = () => {
+    const images = Array.from({ length: 6 });
+
+    const textcls = clsx("text-[14px] font-medium text-[#5f6368]");
+    return (
+        <div className={"p-[0.1389rem]"}>
+            <div className={"flex"}>
+                <div className={"flex-shrink-0"}>
+                    <img
+                        src="/doings/activity.png"
+                        alt=""
+                        className={"h-[0.5rem] w-[0.5rem] object-contain"}
+                    />
+                </div>
+
+                <div>
+                    <p className={"text-[#202124]"}>name</p>
+                    <p className={"cursor-pointer text-[#01875f]"}>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, quasi.
+                    </p>
+                </div>
+            </div>
+
+            <div
+                className={
+                    "my-[0.1111rem] flex items-center py-[0.0833rem] text-center text-[0.1111rem]"
+                }
+            >
+                <div className={"px-[0.1667rem]"}>
+                    <p className={"font-semibold"}>
+                        4,9<i className={"iconfont icon-star_full"}></i>
+                    </p>
+                    <p>46K avaliações</p>
+                </div>
+                <div
+                    className={
+                        "relative px-[0.1667rem] before:absolute before:top-1/4" +
+                        ' before:content-[""]' +
+                        " before:left-0 before:h-[0.1667rem] before:w-[1px] before:bg-[#e8eaed]"
+                    }
+                >
+                    <p className={"font-semibold"}>50 mil+</p>
+                    <p>Downloads</p>
+                </div>
+                <div
+                    className={
+                        "relative px-[0.1667rem] before:absolute before:top-1/4" +
+                        ' before:content-[""]' +
+                        " before:left-0 before:h-[0.1667rem] before:w-[1px] before:bg-[#e8eaed]"
+                    }
+                >
+                    <p className={"inline-block border font-semibold"}>18+</p>
+                    <p>Rated for 18+</p>
+                </div>
+            </div>
+
+            <div className={"rounded-[10px] bg-[#01875f] py-[8px] text-center text-[#fff]"}>
+                Rapid Instalar
+            </div>
+
+            <div
+                className={"my-[0.1389rem] flex justify-center space-x-[0.2083rem] text-[#01875f]"}
+            >
+                <div className={"flex items-center"}>
+                    <i className={"iconfont icon-fenxiang1 mr-[8px] text-[0.1389rem]"} />
+                    <span>Compartilhar</span>
+                </div>
+                <div className={"flex items-center"}>
+                    <i className={"iconfont icon-shoucang" + " mr-[8px] text-[0.1389rem]"} />{" "}
+                    <span>Adicionar à lista de desejos</span>
+                </div>
+            </div>
+
+            <div>
+                <Swiper
+                    slidesPerView={3.2}
+                    spaceBetween={30}
+                    pagination={{
+                        clickable: true,
+                    }}
+                    loop
+                    autoplay={{
+                        delay: 3000,
+                    }}
+                    modules={[Autoplay]}
+                    className="mySwiper"
+                >
+                    {images.map((prize, index: number) => (
+                        <SwiperSlide key={index}>
+                            <div className={"w-[1.1rem]"} style={{ borderRadius: ".1rem" }}>
+                                {index}
+                            </div>
+                        </SwiperSlide>
+                    ))}
+                </Swiper>
+            </div>
+
+            <div>
+                <div className={"flex justify-between py-[20px]"}>
+                    <p>Sobre este jogo</p>
+                    <i className={"iconfont icon-xiangyou2 text-[14px]"}></i>
+                </div>
+                <p className={textcls}>
+                    {/*Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet deleniti eveniet*/}
+                    {/*natus voluptates? A aperiam laborum libero officiis quos veritatis?*/}
+                </p>
+
+                <div className={"my-[20px]"}>
+                    <p>Atualizado em</p>
+                    <p className={textcls}>6 de nov. de 2024</p>
+                </div>
+
+                <div className={"my-[20px] flex justify-between"}>
+                    <p>Segurança dos dados</p>
+                    <i className={"iconfont icon-xiangyou2 text-[14px]"}></i>
+                </div>
+                <p className={textcls}>
+                    Sua segurança começa com o entendimento de como os desenvolvedores coletam e
+                    compartilham seus dados. As práticas de segurança e privacidade de dados podem
+                    variar de acordo com o uso, a região e a idade. O desenvolvedor forneceu as
+                    informações a seguir, que podem ser atualizadas ao longo do tempo.
+                </p>
+                <div className="my-[20px] rounded-[8px] border border-[#dadce0] p-[20px] shadow">
+                    <div className={"flex space-x-[20px]"}>
+                        <img
+                            src={
+                                "https://play-lh.googleusercontent.com/iFstqoxDElUVv4T3KxkxP3OTcuFvWF5ZQQjT7aIxy4n2uaVigCCykxeG6EZV9FQ10X1itPj1oORm=s20-rw"
+                            }
+                            className={"h-[20px] w-[20px]"}
+                        />
+                        <div className={textcls}>
+                            <p>Os dados não são compartilhados com terceiros</p>
+                            <span className={"cursor-pointer underline"}>
+                                Entendimento detalhado
+                            </span>
+                            Como os desenvolvedores declaram questões de compartilhamento de dados
+                        </div>
+                    </div>
+
+                    <div className={"mt-[20px] flex items-center space-x-[20px]"}>
+                        <img
+                            src={
+                                "https://play-lh.googleusercontent.com/12USW7aflgz466ifDehKTnMoAep_VHxDmKJ6jEBoDZWCSefOC-ThRX14Mqe0r8KF9XCzrpMqJts=s20-rw"
+                            }
+                            className={"h-[20px] w-[20px]"}
+                        />
+                        <div className={textcls}>
+                            <p>Este app pode coletar estes tipos de dados Local,</p>
+                            <p> Atividade no app e Identificadores do dispositivo e outros</p>
+                        </div>
+                    </div>
+
+                    <div className={"mt-[20px] flex items-center space-x-[20px]"}>
+                        <img
+                            src={
+                                "https://play-lh.googleusercontent.com/W5DPtvB8Fhmkn5LbFZki_OHL3ZI1Rdc-AFul19UK4f7np2NMjLE5QquD6H0HAeEJ977u3WH4yaQ=s20-rw"
+                            }
+                            className={"h-[20px] w-[20px]"}
+                        />
+                        <div className={textcls}>
+                            <p>Os dados são criptografados em trânsito</p>
+                        </div>
+                    </div>
+
+                    <div className={"mt-[20px] flex items-center space-x-[20px]"}>
+                        <img
+                            src={
+                                "https://play-lh.googleusercontent.com/ohRyQRA9rNfhp7xLW0MtW1soD8SEX45Oec7MyH3FaxtukWUG_6GKVpvh3JiugzryLi7Bia02HPw=s20-rw"
+                            }
+                            className={"h-[20px] w-[20px]"}
+                        />
+                        <div className={textcls}>
+                            <p>Você pode solicitar a exclusão dos dados</p>
+                        </div>
+                    </div>
+
+                    <p className={"ml-[10px] mt-[20px] cursor-pointer text-[14px] text-[#01875f]"}>
+                        Mais detalhes
+                    </p>
+                </div>
+            </div>
+            <div>
+                <div className={"flex justify-between py-[20px]"}>
+                    <p>Classificações e resenhas</p>
+                    <i className={"iconfont icon-xiangyou2 text-[14px]"}></i>
+                </div>
+
+                <div className={"flex space-x-[30px]"}>
+                    <div>
+                        <p className={"text-[50px]"}>4,9</p>
+                        <RateStar star={4.9} />
+                        <p className={"text-[12px] text-[#5f6368]"}>1,91 mil avaliações</p>
+                    </div>
+                    <div className={"flex-1"}>
+                        <Process num={5} precent={90} />
+                        <Process num={4} precent={20} />
+                        <Process num={3} precent={5} />
+                        <Process num={2} precent={2} />
+                        <Process num={1} precent={7} />
+                    </div>
+                </div>
+
+                <Comment />
+
+                <p className={"mt-[10px] cursor-pointer text-[14px] font-semibold text-[#01875f]"}>
+                    Ver todas as avaliações
+                </p>
+
+                <Change />
+
+                <Other />
+
+                <Divider
+                    style={{
+                        borderColor: "#e8eaed",
+                    }}
+                />
+                <CardFooter />
+            </div>
+        </div>
+    );
+};
+
+const RateStar = ({ star, small = false }: { star: number; small?: boolean }) => {
+    const size = small ? "7px" : "10px";
+    return (
+        <>
+            <Rate
+                allowHalf
+                defaultValue={star}
+                style={{
+                    "--active-color": "#01875f",
+                    "--star-size": size,
+                }}
+            />
+        </>
+    );
+};
+// 评分
+const Process = ({ num, precent }: { num: number; precent: number }) => {
+    return (
+        <div className={"grid grid-cols-12 items-center"}>
+            <span className={"text-center text-[12px] text-[#5f6368]"}>{num}</span>
+            <ProgressBar
+                className={"col-span-11"}
+                percent={precent}
+                style={{
+                    "--fill-color": "#01875f",
+                    "--track-width": "10px",
+                }}
+            />
+        </div>
+    );
+};
+// 评论
+const Comment = () => {
+    const users = [
+        {
+            avatar: "/store/avatar1.jpg",
+            name: "Lara Liras",
+            precent: 5,
+            time: "5 de setembro de 2024",
+            desc:
+                "O jogo é bom , mais precisa de um incentivo, no geral eu gostei bastante Dá" +
+                " pra pessoa distrair e jogar é muito saudável ! Amei os porquinhos kkk",
+            sure: 103,
+        },
+        {
+            avatar: "/store/avatar2.jpg",
+            name: "Angelita Da Silva",
+            precent: 4,
+            time: "19 de agosto de 2024",
+            desc: "Gosto muito, o jogo é super divertido e o jackpot explode todos os dias",
+            sure: 22,
+        },
+        {
+            avatar: "/store/avatar3.png",
+            name: "Hkawng Nor",
+            precent: 5,
+            time: "9 de junho de 2024",
+            desc: "muito divertido e não fica trancando e cheio de anúncios muito bom mesmo",
+            sure: 32,
+        },
+    ];
+    return (
+        <>
+            {users.map((item, index) => (
+                <div key={index} className={"py-[16px]"}>
+                    <div className={"flex justify-between"}>
+                        <div className={"flex space-x-[20px]"}>
+                            <Image
+                                src={item.avatar}
+                                alt={item.name}
+                                width={30}
+                                height={30}
+                                className={"rounded-full"}
+                            />
+                            <span className={"text-[14px]"}>{item.name}</span>
+                        </div>
+                        <i className={"iconfont icon-fenxiang2"}></i>
+                    </div>
+
+                    <div className={"mt-[16px] flex items-center space-x-[10px]"}>
+                        <RateStar star={item.precent} small />
+                        <p className={"text-[12px] text-[#5f6368]"}>{item.time}</p>
+                    </div>
+                    <div className={"mt-[8px] text-[14px] text-[#5f6368]"}>{item.desc}</div>
+                    <p className={"mt-[16px] text-[12px] text-[#5f6368]"}>
+                        Essa avaliação foi marcada como útil por {item.sure} pessoas
+                    </p>
+                    <div className={"mt-[12px] flex space-x-[20px] text-[12px] text-[#5f6368]"}>
+                        <p>Você achou isso útil?</p>
+                        <div></div>
+                        <div
+                            className={
+                                "h-[20px] w-[50px] rounded-[12px] border border-[#dadce0]" +
+                                " text-center" +
+                                " leading-[20px]" +
+                                " text-[#5f6368]"
+                            }
+                        >
+                            Sim
+                        </div>
+                        <div
+                            className={
+                                "h-[20px] w-[50px] rounded-[12px] border border-[#dadce0]" +
+                                " text-center" +
+                                " leading-[20px]" +
+                                " text-[#5f6368]"
+                            }
+                        >
+                            Não
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </>
+    );
+};
+// 新变化
+const Change = () => {
+    return (
+        <>
+            <div className={"flex justify-between py-[20px]"}>
+                <p>O que há de novo</p>
+                {/*<i className={"iconfont icon-xiangyou2 text-[14px]"}></i>*/}
+            </div>
+            <div className={"text-[14px] text-[#5f6368]"}>
+                <p>Olá, fãs de Fortune Tiger Slot!</p>
+                <p>Aqui está uma nova atualização:</p>
+                <p className={"my-[10px]"}>-Melhorias de desempenho</p>
+                <p>Aproveite e divirta-se!</p>
+            </div>
+        </>
+    );
+};
+
+const Other = () => {
+    const array = [
+        {
+            url: "https://play-lh.googleusercontent.com/yZ_nzWpg_cj6GYJv15YdsfWBKS6JzXGt69R8fCCj3AsapCSs5MGdr6haxPCk-Ae91g=s64-rw",
+            name: "Cash Craze: Casino Slots Games",
+            desc: "Casual Joy Games",
+            star: "4,5",
+        },
+        {
+            url: "https://play-lh.googleusercontent.com/vHA867MF5a-0zJfHgxgKUKs4GJb8mWMLNjGpTpufUpw1IN_EuqWGY9d-qrY4keq4hw8=s64-rw",
+            name: "Charge Buffalo Slot-TaDa Jogos",
+            desc: "FUFAFA TECHNOLOGY LTD CO.",
+            star: "4,5",
+        },
+        {
+            url: "https://play-lh.googleusercontent.com/Bi-dBVeyh-XZZ8ypCuklaHct8ClSitAAEOy3rCS3KOE50GBVsZ4ucseDKrLZExrAkfY=s64-rw",
+            name: "Jackpot Magic Slots",
+            desc: "Big Fish Games",
+            star: "2,6",
+        },
+        {
+            url: "https://play-lh.googleusercontent.com/3C9ipO88Z92NJuohq_u6Ce6sTKHAADCfrpyVaEWz3vDO4XBscTJwAiRM9WhzS__WOybZ=s64-rw",
+            name: "Diamond Slot - Slot Game",
+            desc: "International Games System Co., Ltd.",
+            star: "3,9",
+        },
+        {
+            url: "https://play-lh.googleusercontent.com/Kwa0EUhA_Z31MqQSr15DZyBrVZoAUlwlwGxE8tJoNFUPKbcrgcjSiDAAXFw9VMogJJc=s64-rw",
+            name: "Bônus Bingo Cassino-TaDa Jogo",
+            desc: "FUFAFA TECHNOLOGY LTD CO.",
+            star: "4,4",
+        },
+        {
+            url: "https://play-lh.googleusercontent.com/CSkRZuIZLOJZ8q0krA3qvnciiRTXZBU5Nx6nmTXM31ZUEilUf6Plz_va-IV_-pjWDgE=s64-rw",
+            name: "Infinity Slots - Casino Games",
+            desc: "Murka Games Limited",
+            star: "4,5",
+        },
+    ];
+    return (
+        <>
+            <div className={"flex justify-between py-[20px]"}>
+                <p>Jogos semelhantes</p>
+                <i className={"iconfont icon-xiangyou2 text-[14px]"}></i>
+            </div>
+            <div className={"grid grid-cols-2 gap-[20px]"}>
+                {array.map((item, i) => {
+                    return (
+                        <div key={i} className={"flex cursor-pointer gap-[10px] overflow-hidden"}>
+                            <img src={item.url} className={"h-[56px] w-[56px] rounded-[10px]"} />
+                            <div>
+                                <p className={"whitespace-nowrap text-[14px]"}>{item.name}</p>
+                                <p className={"whitespace-nowrap text-[12px]"}>{item.desc}</p>
+                                <p className={"text-[12px] text-[#5f6368]"}>
+                                    {item.star}
+                                    <i className={"iconfont icon-star_full text-[14px]"}></i>
+                                </p>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+
+            <div className={"mt-[10px]"}>
+                <i className={"iconfont icon-star_full mr-[10px]"}></i>Sinalizar como impróprio
+            </div>
+        </>
+    );
+};
+
+const CardFooter = () => {
+    return (
+        <>
+            <div
+                className={"mt-[36px] text-[0.0972rem] text-[#5f6368] [&>section>p]:cursor-pointer"}
+            >
+                <section>
+                    <p>Vales-presente</p>
+                    <p>Resgatar</p>
+                    <p>Política de reembolso</p>
+                </section>
+                <section className={"mt-[24px]"}>
+                    <p>Crianças e família</p>
+                    <p>Guia para a família</p>
+                    <p>Compartilhamento em família</p>
+                </section>
+                <section className={"flex flex-wrap"}>
+                    <p className={"mr-[24px] leading-[48px]"}>Termos de Serviço</p>
+                    <p className={"mr-[24px] leading-[48px]"}>Privacidade</p>
+                    <p className={"mr-[24px] leading-[48px]"}>Desenvolvedores</p>
+                    <p className={"mr-[24px] leading-[48px]"}>Todos os preços incluem Tributo.</p>
+                </section>
+
+                <div className={"flex items-center"}>
+                    <Image src={"/svg/br.svg"} alt={""} width={24} height={20} />
+                    <span className={"ml-[0.0694rem]"}>Brasil (Português)</span>
+                </div>
+            </div>
+        </>
+    );
+};
+const getStoreApi = (data: { ch: string }) => {
+    return server.post({
+        url: "/v1/api/front/app/store/details",
+        data,
+    });
+};
+const Page = () => {
+    const searchparams = useSearchParams();
+    useEffect(() => {
+        getStoreApi({ ch: searchparams.get("ch")! }).then((res) => {
+            return {
+                type: 82,
+                name: "关癸霖",
+                title: "击踢脚线全单幸亏油门搂",
+                icon_url: "https://avatars.githubusercontent.com/u/67110323",
+                description: "亲回来点来五月。强量级整该矿列写再具。受办照此。",
+                preview_images: [
+                    "https://loremflickr.com/400/400?lock=4729061696354976",
+                    "https://loremflickr.com/400/400?lock=2057580202751112",
+                ],
+                installer_type: 89,
+                installer_args: "sit ea quis incididunt",
+            };
+        });
+    });
+    return (
+        <div className={"text-[#000]"}>
+            <Header />
+            <CardView />
+            <Footer />
+        </div>
+    );
+};
+
+export default Page;

+ 23 - 3
src/styles/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4617618 */
-  src: url('iconfont.woff2?t=1742452032385') format('woff2'),
-       url('iconfont.woff?t=1742452032385') format('woff'),
-       url('iconfont.ttf?t=1742452032385') format('truetype');
+  src: url('iconfont.woff2?t=1744351901335') format('woff2'),
+       url('iconfont.woff?t=1744351901335') format('woff'),
+       url('iconfont.ttf?t=1744351901335') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-suoding_o:before {
+  content: "\eb50";
+}
+
+.icon-fenxiang2:before {
+  content: "\e65b";
+}
+
+.icon-shangchuan:before {
+  content: "\e65c";
+}
+
+.icon-delete-bin-6-line:before {
+  content: "\e6d9";
+}
+
+.icon-tongzhixiaoxi:before {
+  content: "\e65a";
+}
+
 .icon-app1:before {
   content: "\e657";
 }

BIN
src/styles/iconfont/iconfont.ttf


BIN
src/styles/iconfont/iconfont.woff


BIN
src/styles/iconfont/iconfont.woff2