add amimation swiper
parent
31a19f11fa
commit
832e286aee
|
|
@ -41,6 +41,12 @@ importers:
|
|||
react-dom:
|
||||
specifier: ^18
|
||||
version: 18.3.1(react@18.3.1)
|
||||
react-seamless-scroll:
|
||||
specifier: ^1.0.3
|
||||
version: 1.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
swiper:
|
||||
specifier: ^11.1.14
|
||||
version: 11.1.14
|
||||
devDependencies:
|
||||
'@types/node':
|
||||
specifier: ^20
|
||||
|
|
@ -1564,6 +1570,12 @@ packages:
|
|||
react-is@18.3.1:
|
||||
resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
|
||||
|
||||
react-seamless-scroll@1.0.3:
|
||||
resolution: {integrity: sha512-QSKrkhwZOphunAQd+5CZZ4StecsDILllVEOwR352TBVmzmhe03qxljMyOHXbNCNTujAJ/oDJytxE43jpxcqieQ==}
|
||||
peerDependencies:
|
||||
react: ^16.8.6
|
||||
react-dom: ^16.8.6
|
||||
|
||||
react-transition-group@4.4.5:
|
||||
resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
|
||||
peerDependencies:
|
||||
|
|
@ -1757,6 +1769,10 @@ packages:
|
|||
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
swiper@11.1.14:
|
||||
resolution: {integrity: sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==}
|
||||
engines: {node: '>= 4.7.0'}
|
||||
|
||||
tailwindcss@3.4.13:
|
||||
resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
|
|
@ -2806,8 +2822,8 @@ snapshots:
|
|||
'@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3)
|
||||
eslint: 8.57.1
|
||||
eslint-import-resolver-node: 0.3.9
|
||||
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
|
||||
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
|
||||
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1)
|
||||
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
|
||||
eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.1)
|
||||
eslint-plugin-react: 7.37.1(eslint@8.57.1)
|
||||
eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
|
||||
|
|
@ -2826,37 +2842,37 @@ snapshots:
|
|||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
|
||||
eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1):
|
||||
dependencies:
|
||||
'@nolyfill/is-core-module': 1.0.39
|
||||
debug: 4.3.7
|
||||
enhanced-resolve: 5.17.1
|
||||
eslint: 8.57.1
|
||||
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
|
||||
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
|
||||
fast-glob: 3.3.2
|
||||
get-tsconfig: 4.8.1
|
||||
is-bun-module: 1.2.1
|
||||
is-glob: 4.0.3
|
||||
optionalDependencies:
|
||||
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
|
||||
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
|
||||
transitivePeerDependencies:
|
||||
- '@typescript-eslint/parser'
|
||||
- eslint-import-resolver-node
|
||||
- eslint-import-resolver-webpack
|
||||
- supports-color
|
||||
|
||||
eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1):
|
||||
eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
|
||||
dependencies:
|
||||
debug: 3.2.7
|
||||
optionalDependencies:
|
||||
'@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3)
|
||||
eslint: 8.57.1
|
||||
eslint-import-resolver-node: 0.3.9
|
||||
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
|
||||
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
|
||||
eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
|
||||
dependencies:
|
||||
'@rtsao/scc': 1.1.0
|
||||
array-includes: 3.1.8
|
||||
|
|
@ -2867,7 +2883,7 @@ snapshots:
|
|||
doctrine: 2.1.0
|
||||
eslint: 8.57.1
|
||||
eslint-import-resolver-node: 0.3.9
|
||||
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
|
||||
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
|
||||
hasown: 2.0.2
|
||||
is-core-module: 2.15.1
|
||||
is-glob: 4.0.3
|
||||
|
|
@ -3629,6 +3645,11 @@ snapshots:
|
|||
|
||||
react-is@18.3.1: {}
|
||||
|
||||
react-seamless-scroll@1.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
|
||||
react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
'@babel/runtime': 7.25.7
|
||||
|
|
@ -3852,6 +3873,8 @@ snapshots:
|
|||
|
||||
supports-preserve-symlinks-flag@1.0.0: {}
|
||||
|
||||
swiper@11.1.14: {}
|
||||
|
||||
tailwindcss@3.4.13:
|
||||
dependencies:
|
||||
'@alloc/quick-lru': 5.2.0
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Header from "@/app/components/header";
|
|||
import Footer from "@/app/components/footer";
|
||||
|
||||
import Examples from "../components/Examples";
|
||||
import ChannelSwiper from "../components/ChannelSwiper";
|
||||
|
||||
export default async function Home(props: { params: { lang: string[] } }) {
|
||||
const lang = props.params.lang || ["zh"];
|
||||
|
|
@ -68,6 +69,22 @@ export default async function Home(props: { params: { lang: string[] } }) {
|
|||
<div className="absolute w-[691px] text-[32px] top-[100px] right-[95px] text-[#333333] text-right font-semibold">{dict.lightweightDeployment}</div>
|
||||
<div className="absolute w-[712px] text-[32px] top-[145px] right-[95px] text-[#333333] text-right font-semibold">{dict.simplifyProcess}</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[50px]">
|
||||
<div
|
||||
className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
|
||||
style={{
|
||||
background: "linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)",
|
||||
backgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
}}
|
||||
>
|
||||
渠道支持
|
||||
</div>
|
||||
</div>
|
||||
<ChannelSwiper />
|
||||
|
||||
|
||||
<div className="w-full flex flex-col justify-center items-center mt-[98px]" id="case">
|
||||
<div
|
||||
className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
|
||||
|
|
@ -81,7 +98,6 @@ export default async function Home(props: { params: { lang: string[] } }) {
|
|||
</div>
|
||||
{/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
|
||||
</div>
|
||||
|
||||
<Examples dict={dict} lang={lang} />
|
||||
|
||||
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]" id="contact">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
import { ReactElement, useEffect, useLayoutEffect } from "react";
|
||||
import * as React from "react";
|
||||
|
||||
interface Props<T> {
|
||||
Item: (item: T) => ReactElement;
|
||||
showNum: number;
|
||||
speed: number;
|
||||
containerWidth: number;
|
||||
data: T[];
|
||||
hoverStop?: boolean;
|
||||
direction?: "left" | "right";
|
||||
}
|
||||
|
||||
const fillArray = (arr: any, length: number) => {
|
||||
const result: any = [];
|
||||
while (result.length < length) {
|
||||
result.push(...arr);
|
||||
}
|
||||
return result.concat(result);
|
||||
};
|
||||
|
||||
function AutoplayCarousel<T>({ Item, showNum, speed, containerWidth, data, hoverStop = false, direction = "left" }: Props<T>) {
|
||||
const showData = fillArray(data, showNum);
|
||||
const length = showData.length;
|
||||
const itemWidth = containerWidth / showNum;
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const style = document.createElement("style");
|
||||
|
||||
let start = "0";
|
||||
let end = `-${(itemWidth * length) / 2}`;
|
||||
if (direction === "right") {
|
||||
start = end;
|
||||
end = "0";
|
||||
}
|
||||
|
||||
const keyframes = `
|
||||
@keyframes templates-partner-moving {
|
||||
0% {
|
||||
transform: translateX(${start}px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(${end}px);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const hoverStyles = hoverStop
|
||||
? `
|
||||
.list:hover {
|
||||
animation-play-state: paused !important;
|
||||
}
|
||||
`
|
||||
: ``;
|
||||
|
||||
style.innerText = keyframes + hoverStyles;
|
||||
document.head.appendChild(style);
|
||||
|
||||
return () => {
|
||||
document.head.removeChild(style);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ width: `${containerWidth}px` }} className="wrap">
|
||||
<div
|
||||
className="list"
|
||||
style={{
|
||||
width: `${itemWidth * length}px`,
|
||||
animation: `templates-partner-moving ${(length / showNum / 2) * speed}s infinite linear`,
|
||||
}}
|
||||
>
|
||||
{showData.map((item, index) => (
|
||||
<div key={index} style={{ width: `${(itemWidth * 100) / containerWidth}%` }}>
|
||||
<Item {...item} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AutoplayCarousel;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
"use client";
|
||||
import AutoplayCarousel from "./AutoplayCarousel";
|
||||
|
||||
interface ItemProps {
|
||||
url: string;
|
||||
}
|
||||
const data: ItemProps[] = [
|
||||
{ url: "logo-yandex.png" },
|
||||
{ url: "logo-vungle.png" },
|
||||
{ url: "logo-unity.png" },
|
||||
{ url: "logo-tiktok.png" },
|
||||
{ url: "logo-tapjoy.png" },
|
||||
{ url: "logo-pangle.png" },
|
||||
{ url: "logo-moloco.png" },
|
||||
{ url: "logo-mintegral.png" },
|
||||
{ url: "logo-liftoff.png" },
|
||||
{ url: "logo-kwai.png" },
|
||||
{ url: "logo-google.png" },
|
||||
{ url: "logo-facebook.png" },
|
||||
{ url: "logo-chartboost.png" },
|
||||
{ url: "logo-bigoads.png" },
|
||||
{ url: "logo-applovin.png" },
|
||||
];
|
||||
|
||||
export default function ChannelSwiper() {
|
||||
const Item = (item: ItemProps) => {
|
||||
return (
|
||||
<div className=" mx-1 lg:mx-8 w-[100px] h-[50px] lg:w-auto lg:h-[70px] flex items-center">
|
||||
<img src={`https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/channel/${item.url}`} className="" alt="" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="overflow-hidden flex items-center">
|
||||
<AutoplayCarousel Item={Item} containerWidth={1400} showNum={8} speed={20} data={data} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,147 +3,165 @@
|
|||
@tailwind utilities;
|
||||
|
||||
html::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(169, 169, 169, 0.729);
|
||||
border-radius: 10px;
|
||||
background-color: rgba(169, 169, 169, 0.729);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar-track {
|
||||
background: #fff;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
font-size: 14.4px;
|
||||
font-size: 14.4px;
|
||||
}
|
||||
.menu-item {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: 300px) and (max-width: 350px) {
|
||||
html {
|
||||
font-size: 3px;
|
||||
}
|
||||
html {
|
||||
font-size: 3px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 350px) and (max-width: 400px) {
|
||||
html {
|
||||
font-size: 3.5px;
|
||||
}
|
||||
html {
|
||||
font-size: 3.5px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 400px) and (max-width: 450px) {
|
||||
html {
|
||||
font-size: 4px;
|
||||
}
|
||||
html {
|
||||
font-size: 4px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 450px) and (max-width: 500px) {
|
||||
html {
|
||||
font-size: 4.5px;
|
||||
}
|
||||
html {
|
||||
font-size: 4.5px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 500px) and (max-width: 550px) {
|
||||
html {
|
||||
font-size: 5px;
|
||||
}
|
||||
html {
|
||||
font-size: 5px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 550px) and (max-width: 600px) {
|
||||
html {
|
||||
font-size: 5.5px;
|
||||
}
|
||||
html {
|
||||
font-size: 5.5px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 600px) and (max-width: 650px) {
|
||||
html {
|
||||
font-size: 6px;
|
||||
}
|
||||
html {
|
||||
font-size: 6px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 650px) and (max-width: 700px) {
|
||||
html {
|
||||
font-size: 6.5px;
|
||||
}
|
||||
html {
|
||||
font-size: 6.5px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 700px) and (max-width: 750px) {
|
||||
html {
|
||||
font-size: 7px;
|
||||
}
|
||||
html {
|
||||
font-size: 7px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 750px) and (max-width: 800px) {
|
||||
html {
|
||||
font-size: 7.6px;
|
||||
}
|
||||
html {
|
||||
font-size: 7.6px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 800px) and (max-width: 850px) {
|
||||
html {
|
||||
font-size: 8px;
|
||||
}
|
||||
html {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 850px) and (max-width: 900px) {
|
||||
html {
|
||||
font-size: 8.5px;
|
||||
}
|
||||
html {
|
||||
font-size: 8.5px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 900px) and (max-width: 950px) {
|
||||
html {
|
||||
font-size: 9px;
|
||||
}
|
||||
html {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1000px) and (max-width: 1050px) {
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1050px) and (max-width: 1100px) {
|
||||
html {
|
||||
font-size: 10.5px;
|
||||
}
|
||||
html {
|
||||
font-size: 10.5px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1100px) and (max-width: 1150px) {
|
||||
html {
|
||||
font-size: 11px;
|
||||
}
|
||||
html {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1150px) and (max-width: 1200px) {
|
||||
html {
|
||||
font-size: 11.5px;
|
||||
}
|
||||
html {
|
||||
font-size: 11.5px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) and (max-width: 1250px) {
|
||||
html {
|
||||
font-size: 12px;
|
||||
}
|
||||
html {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1250px) and (max-width: 1300px) {
|
||||
html {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
html {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1300px) and (max-width: 1350px) {
|
||||
html {
|
||||
font-size: 13px;
|
||||
}
|
||||
html {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1350px) and (max-width: 1400px) {
|
||||
html {
|
||||
font-size: 13.5px;
|
||||
}
|
||||
html {
|
||||
font-size: 13.5px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) and (max-width: 1450px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1440px) {
|
||||
html {
|
||||
font-size: 14.4px;
|
||||
}
|
||||
html {
|
||||
font-size: 14.4px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1440px) {
|
||||
.menu-item {
|
||||
display: none;
|
||||
}
|
||||
.menu-item {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1440px) {
|
||||
.menu-item {
|
||||
display: block;
|
||||
}
|
||||
.menu-item {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
.wrap .list {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.wrap .list > div {
|
||||
width: 150px !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
|
|
@ -11,16 +15,27 @@
|
|||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"baseUrl": "./",
|
||||
"incremental": true,
|
||||
"noImplicitAny": false,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue