diff --git a/src/components/CenterTopData/CenterMenu/index.jsx b/src/components/CenterTopData/CenterMenu/index.jsx index 199e102..1325e99 100644 --- a/src/components/CenterTopData/CenterMenu/index.jsx +++ b/src/components/CenterTopData/CenterMenu/index.jsx @@ -11,7 +11,9 @@ export default function CenterMenu() { return (
{menuList.map((menu) => ( -
{menu[0]}
+
+ {menu[0]} +
))}
); diff --git a/src/components/Slider/index.jsx b/src/components/Slider/index.jsx new file mode 100644 index 0000000..ae0c778 --- /dev/null +++ b/src/components/Slider/index.jsx @@ -0,0 +1,17 @@ +import './slider.css'; +import { useState } from 'react'; + +const Slider = (props) => { + const [v, setV] = useState(100); + const handleInput = (e) => { + setV(e.target.value); + props.handleSlide(e.target.value); + }; + return ( +
+ +
+ ); +}; + +export default Slider; diff --git a/src/components/Slider/slider.css b/src/components/Slider/slider.css new file mode 100644 index 0000000..3c515a6 --- /dev/null +++ b/src/components/Slider/slider.css @@ -0,0 +1,28 @@ +.slider { + height: 5vh; + width: 20vw; + border-radius: 88px; + box-shadow: 0 0 68px 8px rgba(0, 0, 0, .3); + padding: 32px; + display: grid; + place-items: center; + background: #fff; + position: fixed; + bottom: 0; + opacity: 0; + left: 50%; + transform: translateX(-50%); + transition: opacity 0.3s ease-out, bottom 0.3s ease-out; +} + +.slider input { + width: 100%; + transform: translateY(-7px); + color: #0b58ff; + background: #fcc; +} + +.slider.show { + opacity: 1; + bottom: 64px; +} \ No newline at end of file diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 3b64d4c..ba8184a 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -8,6 +8,7 @@ import LeftBar from '../components/LeftBar'; import BottomBar from '../components/BottomBar'; import RightBar from '../components/RightBar'; import CenterTopData from '../components/CenterTopData'; +import Slider from '../components/Slider'; import V3DBG from '../assets/V3DBG.png'; @@ -17,11 +18,43 @@ import { SocketContextProvider } from '../store/socket-data-provider'; export default function index() { const [width, setWidth] = useState(window.innerWidth); + const [value, setValue] = useState(100); + + const v = (value / 100).toFixed(2); + const styles = { + transform: `scale(${v})`, + // transform: `scale(${v * 24 / 33}, ${v})`, + transformOrigin: 'top left', + }; + + useEffect(() => { + let fn = (e) => { + console.log('add fn'); + if (e.shiftKey && e.key === 'L') { + document.getElementById('slider').classList.toggle('show'); + } + }; + let fn2 = () => { + console.log('add fn2'); + setTimeout(() => { + document.getElementById('slider').classList.remove('show'); + }, 200); + }; + + document.addEventListener('keydown', fn); + document.getElementById('slider').addEventListener('mouseleave', fn2); + + return () => { + console.log('remove fn, fn2'); + document.removeEventListener('keydown', fn); + document.getElementById('slider').removeEventListener('mouseleave', fn2); + }; + }, [value]); return ( // -
+
@@ -38,6 +71,7 @@ export default function index() {
+ // );