diff --git a/package.json b/package.json index dcd2c00e..e5d845f2 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "dexie-export-import": "^4.0.7", "dexie-react-hooks": "^1.1.3", "echarts": "^5.4.2", + "embla-carousel-react": "^8.2.1", "file-saver": "^2.0.5", "howler": "^2.2.3", "html-to-image": "^1.11.11", diff --git a/src/assets/carousel/directory.png b/src/assets/carousel/directory.png new file mode 100644 index 00000000..37be490a Binary files /dev/null and b/src/assets/carousel/directory.png differ diff --git a/src/assets/carousel/hot.png b/src/assets/carousel/hot.png new file mode 100644 index 00000000..b0049042 Binary files /dev/null and b/src/assets/carousel/hot.png differ diff --git a/src/assets/carousel/index.png b/src/assets/carousel/index.png new file mode 100644 index 00000000..ff7e5acc Binary files /dev/null and b/src/assets/carousel/index.png differ diff --git a/src/assets/carousel/interface.png b/src/assets/carousel/interface.png new file mode 100644 index 00000000..56cf7ada Binary files /dev/null and b/src/assets/carousel/interface.png differ diff --git a/src/pages/Gallery-N/DictDetail/index.tsx b/src/pages/Gallery-N/DictDetail/index.tsx index e1d25792..ccc0465b 100644 --- a/src/pages/Gallery-N/DictDetail/index.tsx +++ b/src/pages/Gallery-N/DictDetail/index.tsx @@ -78,7 +78,7 @@ export default function DictDetail({ dictionary: dict }: { dictionary: Dictionar 章节选择 @@ -88,7 +88,7 @@ export default function DictDetail({ dictionary: dict }: { dictionary: Dictionar 查看错题 @@ -96,7 +96,7 @@ export default function DictDetail({ dictionary: dict }: { dictionary: Dictionar 错题回顾 diff --git a/src/pages/Mobile/index.tsx b/src/pages/Mobile/index.tsx index 1831b605..865638f0 100644 --- a/src/pages/Mobile/index.tsx +++ b/src/pages/Mobile/index.tsx @@ -1,8 +1,42 @@ import Flow from './flow' +import directoryImg from '@/assets/carousel/directory.png' +import hotImg from '@/assets/carousel/hot.png' +import indexImg from '@/assets/carousel/index.png' import logo from '@/assets/logo.svg' import type React from 'react' +import { useEffect, useRef, useState } from 'react' const MobilePage: React.FC = () => { + const [currentSlide, setCurrentSlide] = useState(0) + const totalSlides = 3 // 轮播图的总数量 + const containerRef = useRef(null) + + useEffect(() => { + const timer = setInterval(() => { + setCurrentSlide((prevSlide) => (prevSlide + 1) % totalSlides) + }, 3000) + + return () => clearInterval(timer) + }, []) + + useEffect(() => { + if (containerRef.current) { + const container = containerRef.current + const slideWidth = container.offsetWidth + + if (currentSlide === 0) { + container.style.transition = 'none' + container.style.transform = `translateX(0)` + setTimeout(() => { + container.style.transition = 'transform 0.5s ease' + container.style.transform = `translateX(-${slideWidth}px)` + }, 50) + } else { + container.style.transform = `translateX(-${currentSlide * slideWidth}px)` + } + } + }, [currentSlide]) + return (
@@ -43,7 +77,28 @@ const MobilePage: React.FC = () => {
-
+
+
+
+ + + + +
+
+
) } diff --git a/yarn.lock b/yarn.lock index c6d49428..58c15558 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1550,6 +1550,11 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-compose-refs@1.1.0": + version "1.1.0" + resolved "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74" + integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw== + "@radix-ui/react-context@1.0.0": version "1.0.0" resolved "https://registry.npmmirror.com/@radix-ui/react-context/-/react-context-1.0.0.tgz" @@ -1803,7 +1808,7 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-compose-refs" "1.0.0" -"@radix-ui/react-slot@1.0.2", "@radix-ui/react-slot@^1.0.2": +"@radix-ui/react-slot@1.0.2": version "1.0.2" resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab" integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg== @@ -1811,6 +1816,13 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-compose-refs" "1.0.1" +"@radix-ui/react-slot@^1.0.2": + version "1.1.0" + resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84" + integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw== + dependencies: + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-tabs@^1.0.4": version "1.0.4" resolved "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz#993608eec55a5d1deddd446fa9978d2bc1053da2" @@ -3206,6 +3218,24 @@ electron-to-chromium@^1.4.284: resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.402.tgz" integrity sha512-gWYvJSkohOiBE6ecVYXkrDgNaUjo47QEKK0kQzmWyhkH+yoYiG44bwuicTGNSIQRG3WDMsWVZJLRnJnLNkbWvA== +embla-carousel-react@^8.2.1: + version "8.2.1" + resolved "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.2.1.tgz#0202bd6b04f749cf9a56ad86f4549f75b7bb43bb" + integrity sha512-YKtARk101mp00Zb6UAFkkvK+5XRo92LAtO9xLFeDnQ/XU9DqFhKnRy1CedRRj0/RSk6MTFDx3MqOQue3gJj9DA== + dependencies: + embla-carousel "8.2.1" + embla-carousel-reactive-utils "8.2.1" + +embla-carousel-reactive-utils@8.2.1: + version "8.2.1" + resolved "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.2.1.tgz#c62fdb6f77c6dcd68bcdaba62523acacb8e633fc" + integrity sha512-LXMVOOyv09ZKRxRQXYMX1FpVGcypsuxdcidNcNlBQUN2mK7hkmjVFQwwhfnnY39KMi88XYnYPBgMxfTe0vxSrA== + +embla-carousel@8.2.1: + version "8.2.1" + resolved "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.2.1.tgz#d156be420f47d9f61f444eb789c9901cce43f7f8" + integrity sha512-9mTDtyMZJhFuuW5pixhTT4iLiJB1l3dH3IpXUKCsgLlRlHCiySf/wLKy5xIAzmxIsokcQ50xea8wi7BCt0+Rxg== + emoji-regex@^8.0.0: version "8.0.0" resolved "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz"