From fd9a68e586908ee1c1100fada64b4030c2dee6f2 Mon Sep 17 00:00:00 2001 From: expressgy Date: Sat, 11 Feb 2023 20:18:35 +0800 Subject: [PATCH] =?UTF-8?q?css=E6=A0=B7=E5=BC=8F=E6=B7=BB=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/index.css | 25 + src/components/StyleControl/index.jsx | 540 ++++++++++++++++++ src/components/StyleControl/index.module.scss | 117 ++++ src/tools/index.js | 30 +- src/view/EditPageNew/index.jsx | 22 +- src/view/EditPageNew/index.module.scss | 32 +- 6 files changed, 733 insertions(+), 33 deletions(-) create mode 100644 src/components/StyleControl/index.jsx create mode 100644 src/components/StyleControl/index.module.scss 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
+
+
{item}
+
console.log(styleReal)}>{item == 'containerStyle' ? '容器样式' : '文本样式'}
+
+
+
+ { + styleArr[item].map(name => { + return
+
{name}
+
+ { + name == 'position' &&
+
+
定位
+
+
+
+
+
+
+ +
+
+
+
+
+ } + { + name == 'box-shadow' &&
+
+
边框阴影
+
+
+
+
handleStyleCHange(e, 'box-shadow')}/> +
+
+
+
+
+
+
+ } + { + name == 'width' &&
+
+
向右距离
+
+
+
+
handleStyleCHange(e, 'width')}/>
+
+ + +
+
+
+
+
+ } + { + name == 'height' &&
+
+
向右距离
+
+
+
+
handleStyleCHange(e, 'height')}/>
+
+ + +
+
+
+
+
+ } + { + name == 'background' &&
+
+
背景图片
+
+
handleStyleCHange(e, 'background-img')}/> +
+ + + +
+
+
+
背景颜色
+
+
+
#
+
handleStyleCHange(e, 'background-color')}/> +
+
+
+
+
+
+ } + { + name == 'backdrop-filter' &&
+
+
滤镜
+
+
+
+
handleStyleCHange(e, 'backdrop-filter')}/> +
+
+
+
+
+
+
+ } + { + name == 'top' &&
+
+
向上距离
+
+
+
+
handleStyleCHange(e, 'top')}/>
+
+ + +
+
+
+
+
+ } + { + name == 'right' &&
+
+
向右距离
+
+
+
+
handleStyleCHange(e, 'right')}/>
+
+ + +
+
+
+
+
+ } + { + name == 'bottom' &&
+
+
向下距离
+
+
+
+
handleStyleCHange(e, 'bottom')}/>
+
+ + +
+
+
+
+
+ } + { + name == 'left' &&
+
+
向左距离
+
+
+
+
handleStyleCHange(e, 'left')}/>
+
+ + +
+
+
+
+
+ } + { + name == 'margin' &&
+
+
外边距
+
+
+
+
handleStyleCHange(e, 'margin')}/>
+
+
+
+
+
+
+ } + { + name == 'padding' &&
+
+
内边距
+
+
+
+
handleStyleCHange(e, 'padding')}/>
+
+
+
+
+
+
+ } + { + name == 'border' &&
+
+
边框
+
+
+
+
handleStyleCHange(e, 'border')}/>
+
+
+
+
+
+
+ } + { + name == 'border-radius' &&
+
+
圆角边框
+
+
+
+
handleStyleCHange(e, 'border-radius')}/> +
+
+ + +
+
+
+
+
+ } + { + name == 'href' &&
+
+
点击链接
+
+
+
+
handleStyleCHange(e, 'href')}/>
+
+
+
+
+
+
+ } + { + name == 'overflow' &&
+
+
超出隐藏
+
+
+
+
+
+
+ + +
+
+
+
+
+ } + { + name == 'color' &&
+
+
文字颜色
+
+
+
#
+
handleStyleCHange(e, 'color')}/>
+
+
+
+
+
+
+ } + { + name == 'font-size' &&
+
+
文字大小
+
+
+
+
handleStyleCHange(e, 'font-size')}/> +
+
+ + + +
+
+
+
+
+ } + { + name == 'font-weight' &&
+
+
文字粗细
+
+
+
+
handleStyleCHange(e, 'font-weight')}/> +
+
+
+
+
+
+
+ } + { + name == 'white-space' &&
xx
+ } + { + name == 'text-indent' &&
+
+
首行缩进
+
+
+
+
handleStyleCHange(e, 'text-indent')}/> +
+
+ + + +
+
+
+
+
+ } + { + name == 'line-height' &&
+
+
行高
+
+
+
+
handleStyleCHange(e, 'line-height')}/> +
+
+ + + +
+
+
+
+
+ } + { + name == 'text-align' &&
+
+
对齐
+
+
+
+
handleStyleCHange(e, 'text-align')}/> +
+
+ + + +
+
+
+
+
+ } +
+
+ }) + } +
+
+
+ }) +} \ No newline at end of file diff --git a/src/components/StyleControl/index.module.scss b/src/components/StyleControl/index.module.scss new file mode 100644 index 0000000..602b30d --- /dev/null +++ b/src/components/StyleControl/index.module.scss @@ -0,0 +1,117 @@ +@import '@/assets/default.scss'; +.styleBox{ + position: relative; + padding: 0.5rem 0; + + & > div.title{ + position: relative; + border-left: 3px solid #666; + padding: 0.8rem; + & > div:first-child{ + font-size: 1.2rem; + font-weight: 600; + line-height: 1.5em; + } + & > div:last-child{ + font-size: 0.9rem; + color: #888; + //@include font-serif; + } + } + & > div.styleControlBox{ + position: relative; + overflow: overlay; + .container{ + position: relative; + overflow: auto; + .styleControl{ + position: relative; + & > .styleName{ + position: relative; + @include font-mono; + padding: 1.2rem; + &:before{ + content: "--"; + position: absolute; + @include font-mono; + left: 0px; + background: #1a1a1a; + border-radius: 100%; + overflow: hidden; + height: 0.6rem; + line-height: 100%; + width: 0.6rem; + margin: 0.4rem 0 0.4rem 0.3rem; + } + } + & > div.control{ + position: relative; + & > div{ + position: relative; + & > div.one{ + position: relative; + padding-left: 1rem; + &>div.title{ + position: relative; + border-left: 2px solid #888; + line-height: 1.5em; + padding-left: 0.3rem; + color: #333; + font-size: 0.9rem; + } + & > div.two{ + position: relative; + padding: 0.5rem 0; + & > div.title{ + + } + & > div.three{ + + } + } + } + } + } + } + } + } +} + +.inputTextSmall{ + position: relative; + display: flex; + font-size: 1rem; + overflow: hidden; + width: 100%; + & > div:nth-child(1){ + position: relative; + flex-shrink: 0; + margin-right: 0.5rem; + width: 1rem; + } + & > div:nth-child(2){ + position: relative; + flex: 1 1; + input{ + position: relative; + width: auto; + max-width: 100px; + display: inline-block; + font-size: 1rem; + padding: 0.1rem 0.5rem; + border-radius: 3px; + } + } + & > div:nth-child(3){ + position: relative; + flex-shrink: 0; + margin-left: 0.5rem; + & > *{ + margin: 0 0.3rem; + } + } +} + +input[type='file']{ + width: 150px; +} \ No newline at end of file diff --git a/src/tools/index.js b/src/tools/index.js index 81bfcaa..a701c51 100644 --- a/src/tools/index.js +++ b/src/tools/index.js @@ -87,13 +87,17 @@ const style1 = [ 'border-radius', 'href',// 跳转 'overflow', - '全剧中', + 'box-shadow' + // '全剧中', ] // 文字属性 const style2 = [ - 'color', 'font-size', 'font-weight', '是否换行', '下划线', '首行缩进', 'line-height', 'text-align' + 'color', 'font-size', 'font-weight', 'white-space', 'text-indent', 'line-height', 'text-align' ] +const containerStyle = style1; +const textStyle = style2; + // 元素原型 export class NE { @@ -116,7 +120,7 @@ export class NE { childrenLength: 1, childrenType: 'element', middle: '中间件', - style: [...style1], + style: {containerStyle, textStyle}, styleLimit: {}, event: {} }, @@ -131,7 +135,7 @@ export class NE { childrenLength: 'n', childrenType: 'element', middle: '中间件', - style: [...style1, 'flex'], + style: {containerStyle, textStyle}, styleLimit: {}, event: {} }, @@ -146,7 +150,7 @@ export class NE { childrenLength: 'n', childrenType: 'element', middle: '中间件', - style: [...style1, 'flex'], + style: {containerStyle, textStyle}, styleLimit: {}, event: {} }, @@ -171,7 +175,7 @@ export class NE { config: { childrenType: 'text', middle: '中间件', - style: [...style2], + style: {containerStyle, textStyle}, styleLimit: {}, event: {} }, @@ -184,7 +188,7 @@ export class NE { config: { childrenType: 'text', middle: '中间件', - style: [...style2, 'flex'], + style: {containerStyle, textStyle}, styleLimit: {}, event: {} }, @@ -197,7 +201,7 @@ export class NE { config: { childrenType: 'images', middle: '中间件', - style: [...style1, 'flex'], + style: {containerStyle, textStyle}, styleLimit: {}, event: {} }, @@ -210,7 +214,7 @@ export class NE { config: { childrenType: 'video', middle: '中间件', - style: [...style2, 'flex'], + style: {containerStyle, textStyle}, styleLimit: {}, event: {} }, @@ -234,7 +238,7 @@ export class NE { config: { childrenType: 'text', middle: '中间件', - style: [...style2], + style: {containerStyle, textStyle}, styleLimit: {}, event: {} }, @@ -247,7 +251,7 @@ export class NE { config: { childrenType: 'text', middle: '中间件', - style: [...style2, 'flex'], + style: {containerStyle, textStyle}, styleLimit: {}, event: {} }, @@ -260,7 +264,7 @@ export class NE { config: { childrenType: 'text', middle: '中间件', - style: [...style1, 'flex'], + style: {containerStyle, textStyle}, styleLimit: {}, event: {} }, @@ -273,7 +277,7 @@ export class NE { config: { childrenType: 'text', middle: '中间件', - style: [...style2, 'flex'], + style: {containerStyle, textStyle}, styleLimit: {}, event: {} }, diff --git a/src/view/EditPageNew/index.jsx b/src/view/EditPageNew/index.jsx index d08d4c2..f3132e2 100644 --- a/src/view/EditPageNew/index.jsx +++ b/src/view/EditPageNew/index.jsx @@ -6,6 +6,7 @@ import Modal from '@/components/Modal'; import Button from "@/components/Button/index.jsx"; import Atom from "@/components/Atom/index.jsx"; import ElementStructureTree from "@/components/ElementStructureTree/index.jsx"; +import StyleControl from "@/components/StyleControl/index.jsx"; import css from './index.module.scss' import svgLolipop from '@/assets/lolipop.svg' @@ -242,7 +243,6 @@ export default function EditPageNew() {
@@ -274,26 +274,20 @@ export default function EditPageNew() { {/*元素属性*/}
-
样式属性
-
-
-
父元素相关属性
-
-
-
-
元素属性
-
-
+
样式属性
+
+
-
事件
-
+
事件
+
点击事件
-
数据关系
+
数据关系
+
diff --git a/src/view/EditPageNew/index.module.scss b/src/view/EditPageNew/index.module.scss index c82b121..ced0b5c 100644 --- a/src/view/EditPageNew/index.module.scss +++ b/src/view/EditPageNew/index.module.scss @@ -40,7 +40,6 @@ position: relative; display: flex; flex-direction: column; - overflow: hidden; } // 左侧目录结构树 @@ -160,15 +159,17 @@ flex: 1; display: flex; flex-direction: column; - overflow: hidden; padding: 1rem 1rem 1rem 2rem; box-sizing: border-box; + height: 100%; + overflow: hidden; & > div.container { position: relative; flex: 1; display: flex; flex-direction: column; + height: 100%; // 头部页面描述 & > header { position: relative; @@ -191,11 +192,10 @@ & > div.main { position: relative; flex: 1; - //overflow: hidden; display: flex; - flex-direction: column; padding: 1rem 0 0 0; box-sizing: border-box; + overflow: hidden; & > div.container { position: relative; @@ -324,9 +324,11 @@ & > div.middle { flex: 1; min-width: 600px; - box-shadow: 2px 2px 10px 1px #33333333; + //box-shadow: 2px 2px 10px 1px #33333333; border-radius: 1rem; margin-left: 1rem; + box-shadow: 0px 0px 10px 1px #66666611 inset; + background: #66666611; } // 右部属性区 @@ -337,6 +339,7 @@ margin-left: 1rem; //box-shadow: 2px 2px 10px 1px #33333333; border-radius: 1rem; + height: 100%; transition: width ease-in-out 500ms, box-shadow ease-in-out 500ms, margin-left ease-in-out 500ms; //padding: 1rem; // 属性展示开关 @@ -391,10 +394,11 @@ & > div.container { position: relative; flex: 1; + height: 100%; overflow: hidden; display: flex; flex-direction: column; - margin: 1rem; + //margin: 1rem; // 属性切换开关 & > header { position: relative; @@ -445,10 +449,12 @@ width: 298%; height: 100%; left: 0; + overflow: hidden; display: flex; transition: left ease-in-out 300ms; & > div{ position: relative; + width: 100%; } & > div.linner { @@ -469,6 +475,20 @@ & > div.elementAttribute { flex: 1; + height: 100%; + overflow: auto; + & > div{ + position: relative; + overflow: auto; + & > .title{ + position: relative; + @include font-serif; + } + & > .box{ + position: relative; + margin-left: 0.2rem; + } + } } } }