From cb2bed34d2970fcc4726cb3849a3be2100008f4f Mon Sep 17 00:00:00 2001 From: guofei <1633295391@qq.com> Date: Tue, 5 Nov 2024 21:36:01 +0800 Subject: [PATCH] fix: add marquee --- package.json | 3 +- pnpm-lock.yaml | 55 +++---- src/app/components/AutoplayCarousel.tsx | 83 ----------- src/app/components/ChannelSwiper.tsx | 25 ++-- src/app/globals.css | 188 ++++++++++++------------ 5 files changed, 133 insertions(+), 221 deletions(-) delete mode 100644 src/app/components/AutoplayCarousel.tsx diff --git a/package.json b/package.json index 32bc216..3da20d7 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "next-intl": "^3.21.1", "postcss-pxtorem": "^6.1.0", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-fast-marquee": "^1.6.5" }, "devDependencies": { "@types/node": "^20", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e015e7b..95adfaa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,12 +41,9 @@ 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 + react-fast-marquee: + specifier: ^1.6.5 + version: 1.6.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@types/node': specifier: ^20 @@ -1564,18 +1561,18 @@ packages: peerDependencies: react: ^18.3.1 + react-fast-marquee@1.6.5: + resolution: {integrity: sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==} + peerDependencies: + react: '>= 16.8.0 || ^18.0.0' + react-dom: '>= 16.8.0 || ^18.0.0' + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} 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: @@ -1769,10 +1766,6 @@ 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'} @@ -2822,8 +2815,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(@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-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-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) @@ -2842,37 +2835,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(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(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)(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(@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-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) 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(@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-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) 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(@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-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): 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(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(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)(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(@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-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): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.8 @@ -2883,7 +2876,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(@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-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) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -3641,15 +3634,15 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 - react-is@16.13.1: {} - - react-is@18.3.1: {} - - react-seamless-scroll@1.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + react-fast-marquee@1.6.5(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-is@16.13.1: {} + + react-is@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 @@ -3873,8 +3866,6 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} - swiper@11.1.14: {} - tailwindcss@3.4.13: dependencies: '@alloc/quick-lru': 5.2.0 diff --git a/src/app/components/AutoplayCarousel.tsx b/src/app/components/AutoplayCarousel.tsx deleted file mode 100644 index 4d06920..0000000 --- a/src/app/components/AutoplayCarousel.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { ReactElement, useEffect, useLayoutEffect } from "react"; -import * as React from "react"; - -interface Props { - 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({ Item, showNum, speed, containerWidth, data, hoverStop = false, direction = "left" }: Props) { - 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 ( -
-
- {showData.map((item, index) => ( -
- -
- ))} -
-
- ); -} - -export default AutoplayCarousel; diff --git a/src/app/components/ChannelSwiper.tsx b/src/app/components/ChannelSwiper.tsx index 7940118..e6a2669 100644 --- a/src/app/components/ChannelSwiper.tsx +++ b/src/app/components/ChannelSwiper.tsx @@ -1,10 +1,8 @@ "use client"; -import AutoplayCarousel from "./AutoplayCarousel"; +import Marquee from "react-fast-marquee"; -interface ItemProps { - url: string; -} -const data: ItemProps[] = [ + +const data = [ { url: "logo-yandex.png" }, { url: "logo-vungle.png" }, { url: "logo-unity.png" }, @@ -23,18 +21,19 @@ const data: ItemProps[] = [ ]; export default function ChannelSwiper() { - const Item = (item: ItemProps) => { - return ( -
- -
- ); - }; return ( <>
- + + { + data.map((item, index) => { + return
+ +
+ }) + } +
); diff --git a/src/app/globals.css b/src/app/globals.css index 7bda662..d04d11b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,165 +3,169 @@ @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; + overflow: hidden; } .wrap .list { - position: relative; - top: 0px; - left: 0px; - height: 100%; - display: flex; + position: relative; + top: 0px; + left: 0px; + height: 100%; + display: flex; +} + +.wrap .list:hover { + animation-play-state: paused !important; } @media (max-width: 768px) { - .wrap .list > div { - width: 150px !important; - display: flex; - justify-content: center; - } + .wrap .list > div { + width: 150px !important; + display: flex; + justify-content: center; + } }