mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add a Slider

Browse Source
This commit is contained in:
lb 2023-07-13 16:06:22 +08:00
parent cb2bb8663f
commit eddf31332f
4 changed files with 83 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/CenterTopData/CenterMenu/index.jsx
View File

@ -11,7 +11,9 @@ export default function CenterMenu() {
return (
<div className={`${cls.centerMenu} flex`}>
{menuList.map((menu) => (
<div className={cls.menuItem}>{menu[0]}</div>
<div key={menu[0]} className={cls.menuItem}>
{menu[0]}
</div>
))}
</div>
);

17
src/components/Slider/index.jsx Normal file
View File

@ -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 (
<div id="slider" className="slider">
<input type="range" value={v} onInput={handleInput} />
</div>
);
};
export default Slider;

28
src/components/Slider/slider.css Normal file
View File

@ -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;
}

36
src/pages/index.jsx
View File

@ -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 (
// <FullScreenContainer>
<SocketContextProvider>
<div id="FullScreen">
<div id="FullScreen" style={styles}>
<Head />
<div className="Main">
<LeftBar />
@ -38,6 +71,7 @@ export default function index() {
<RightBar />
</div>
</div>
<Slider handleSlide={setValue} />
</SocketContextProvider>
// </FullScreenContainer>
);