diff --git a/src/assets/index.css b/src/assets/index.css index 21b756d..92bbaab 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -109,3 +109,28 @@ button:focus-visible { } fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; } + + + +::-webkit-scrollbar-track-piece { + -webkit-border-radius: 0 +} +::-webkit-scrollbar { + width: 5px; + height: 10px +} +::-webkit-scrollbar-thumb { + height: 50px; + background-color: #b8b8b8; + -webkit-border-radius: 6px; + outline-offset: -2px; + filter: alpha(opacity = 50); + -moz-opacity: 0.5; + -khtml-opacity: 0.5; + opacity: 0.5 +} +::-webkit-scrollbar-thumb:hover { + height: 50px; + background-color: #878987; + -webkit-border-radius: 6px +} diff --git a/src/components/StyleControl/index.jsx b/src/components/StyleControl/index.jsx new file mode 100644 index 0000000..48f2a39 --- /dev/null +++ b/src/components/StyleControl/index.jsx @@ -0,0 +1,540 @@ +import css from './index.module.scss' +import {useState} from "react"; + +export default function StyleControl(props) { + + if (!props.node) return undefined; + const styleArr = props.node.config.style; + + const [styleReal, setStyleReal] = useState({ + 'background-img': undefined, + 'background-color': undefined, + 'background-other': undefined, + 'position': 'absolute', + 'width': undefined, + 'width-mx':'px', + 'height': undefined, + 'height-mx': 'px', + 'backdrop-filter': undefined, + 'top': undefined, + 'right': undefined, + 'bottom': undefined, + 'left': undefined, + 'top-mx': 'px', + 'right-mx': 'px', + 'bottom-mx': 'px', + 'left-mx': 'px', + 'margin': undefined, + 'padding': undefined, + 'border-radius': undefined, + 'border-radius-mx': 'px', + 'border': undefined, + 'href': undefined, + 'overflow': 'auto', + 'color': undefined, + 'font-size': undefined, + 'font-size-mx': 'em', + 'font-weight': undefined, + 'line-height': undefined, + 'line-height-mx': 'px', + 'text-align': 'left', + 'white-space': undefined, + 'text-indent': undefined, + 'text-indent-mx': 'px', + }) + + function handleStyleCHange(e, caseText) { + if(caseText == "background-img"){ + + }else{ + styleReal[caseText] = e.target.value; + } + setStyleReal({...styleReal}) + } + + + return Object.keys(styleArr).map((item, index) => { + return