diff --git a/app/public/explore/1.png b/app/public/explore/1.png new file mode 100644 index 0000000000000000000000000000000000000000..484c826b4805832ce422a2701aac5d4642fb19c4 Binary files /dev/null and b/app/public/explore/1.png differ diff --git a/app/public/explore/2.png b/app/public/explore/2.png new file mode 100644 index 0000000000000000000000000000000000000000..7fbd346463210c8b2bf1be8785d4e38efd69f0bb Binary files /dev/null and b/app/public/explore/2.png differ diff --git a/app/public/explore/3.png b/app/public/explore/3.png new file mode 100644 index 0000000000000000000000000000000000000000..0a137af14a9aad57fc250a858f7576f6f977ad9f Binary files /dev/null and b/app/public/explore/3.png differ diff --git a/app/public/explore/4.png b/app/public/explore/4.png new file mode 100644 index 0000000000000000000000000000000000000000..ba8f070d103b9204bcb8d263b208f8678d9c775f Binary files /dev/null and b/app/public/explore/4.png differ diff --git a/app/src/components/Explore/Box.jsx b/app/src/components/Explore/Box.jsx new file mode 100644 index 0000000000000000000000000000000000000000..4b66836bc242ec93011144a251e84c2202bc6610 --- /dev/null +++ b/app/src/components/Explore/Box.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import { Outlet } from 'react-router-dom' + +export default function Box() { + return ( +
+ +
+ ) +} diff --git a/app/src/components/Explore/Explore.css b/app/src/components/Explore/Explore.css new file mode 100644 index 0000000000000000000000000000000000000000..59738212d8b79023bd12504078f28df9880cc9f2 --- /dev/null +++ b/app/src/components/Explore/Explore.css @@ -0,0 +1,6 @@ +.box{ + width: 100%; + height: 500px; + text-align: left; + padding: 1rem; +} diff --git a/app/src/components/Explore/Explore.jsx b/app/src/components/Explore/Explore.jsx new file mode 100644 index 0000000000000000000000000000000000000000..3dfedc4dfd4cc6fbb5357dc3480a3fb4b887efa6 --- /dev/null +++ b/app/src/components/Explore/Explore.jsx @@ -0,0 +1,95 @@ +import React, { useState, useEffect } from 'react' +import './Explore.css' +import { useNavigate } from 'react-router-dom' +import { Carousel } from 'antd'; +import { SoundOutlined,HarmonyOSOutlined, MoonOutlined, CrownOutlined } from '@ant-design/icons'; + + + +export default function Explore() { + const navigate = useNavigate() + useEffect(() => { + + }, []) + const [list, setList] = useState([ + { id: 1, name: '', img: '', plus: false }, + ]) + const imgs = [ + { path: "/explore/1.png" }, + { path: "/explore/2.png" }, + { path: "/explore/3.png" }, + { path: "/explore/4.png" } + ] + const tits = [ + { name: '声音', path: '/box/sound', img: }, + { name: '冥想', path: '/box/meditate', img: }, + { name: '睡眠', path: '/box/sleep', img: }, + { name: 'PLUS', path: '/box/plus', img: } + ] + + + return ( +
+

探索

+

和潮汐一起平静身心

+ + {imgs.map((i, ind) => { + return
+

+

+
+ })} + +
+ {tits.map((i, ind) => { + return
+
{ + navigate(i.path) + }}> + {i.img} +
+
{i.name}
+
+ })} +
+ + + + + + + + + + + + +
+ ) +} diff --git a/app/src/components/Explore/Meditate.jsx b/app/src/components/Explore/Meditate.jsx new file mode 100644 index 0000000000000000000000000000000000000000..1e20032ba982a9e186b508368c8ca43d2f32e12e --- /dev/null +++ b/app/src/components/Explore/Meditate.jsx @@ -0,0 +1,17 @@ +import React, { useState, useEffect } from 'react' + + + +export default function Meditate() { + return ( +
+

冥想

+

觉知帮助你活在当下

+ + +
+ ) + +} \ No newline at end of file diff --git a/app/src/components/zmc/Explore.jsx b/app/src/components/Explore/Plus.jsx similarity index 42% rename from app/src/components/zmc/Explore.jsx rename to app/src/components/Explore/Plus.jsx index 053dd52307548adab3b48e1497c9b4549650baac..dc680e82106904149a55a06dc108f450955a3dc6 100644 --- a/app/src/components/zmc/Explore.jsx +++ b/app/src/components/Explore/Plus.jsx @@ -1,7 +1,7 @@ import React from 'react' -export default function Explore() { +export default function Plus() { return ( -
Explore
+
Plus
) } diff --git a/app/src/components/Explore/Sleep.jsx b/app/src/components/Explore/Sleep.jsx new file mode 100644 index 0000000000000000000000000000000000000000..c9e57484394cad143d2c4d1627ec09c0749998c0 --- /dev/null +++ b/app/src/components/Explore/Sleep.jsx @@ -0,0 +1,17 @@ +import React from 'react' + +export default function Sleep() { + return ( +
+

睡眠

+

自然自在，睡个好觉

+ + + + + +
+ ) +} diff --git a/app/src/components/Explore/Sound.jsx b/app/src/components/Explore/Sound.jsx new file mode 100644 index 0000000000000000000000000000000000000000..2d71edfb72414e35d2898763690aec0a22ef9658 --- /dev/null +++ b/app/src/components/Explore/Sound.jsx @@ -0,0 +1,22 @@ +import React from 'react' + +export default function Sound() { + return ( +
+ + + + + + + + + + + + + + +
+ ) +} \ No newline at end of file diff --git a/app/src/router/index.jsx b/app/src/router/index.jsx index 45a3118b262ca7d5b8d4074ec732a1f8b27ea0c2..34fc51c318ef4d41b9679eb2c21a3b3379a7bef9 100644 --- a/app/src/router/index.jsx +++ b/app/src/router/index.jsx @@ -1,7 +1,14 @@ import { createBrowserRouter, Navigate } from 'react-router-dom' import App from '../App' import My from '../components/xxy/My' -import Explore from '../components/zmc/Explore' +import Explore from '../components/Explore/Explore' +import Box from '../components/Explore/Box' +import Sound from '../components/Explore/Sound' +import Sleep from '../components/Explore/Sleep' +import Meditate from '../components/Explore/Meditate' +import Plus from '../components/Explore/Plus' + + import Home from '../components/zyw/Home' const router = createBrowserRouter([ { @@ -13,6 +20,16 @@ const router = createBrowserRouter([ { path: '/app/my', element: }, ] }, + { + path: '/box', + element: , + children: [ + { path: '/box/sound', element: }, + { path: '/box/sleep', element: }, + { path: '/box/meditate', element: }, + { path: '/box/plus', element: } + ] + }, { path: '/', element: