rgv
/
rgv-official-react-2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css样式添加

Browse Source
main
expressgy 2 years ago
parent a6f2fddd29
commit fd9a68e586
6 changed files with 733 additions and 33 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 25
      src/assets/index.css
  2. 540
      src/components/StyleControl/index.jsx
  3. 117
      src/components/StyleControl/index.module.scss
  4. 30
      src/tools/index.js
  5. 22
      src/view/EditPageNew/index.jsx
  6. 32
      src/view/EditPageNew/index.module.scss

25
src/assets/index.css
Unescape View File

@ -109,3 +109,28 @@ button:focus-visible {
} }
fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; } 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
}

540
src/components/StyleControl/index.jsx
Unescape View File

@ -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 <div className={css.styleBox} key={item}>
<div className={css.title}>
<div>{item}</div>
<div onClick={() => console.log(styleReal)}>{item == 'containerStyle' ? '容器样式' : '文本样式'}</div>
</div>
<div className={css.styleControlBox}>
<div className={css.container}>
{
styleArr[item].map(name => {
return <div className={css.styleControl} key={name}>
<div className={css.styleName}>{name}</div>
<div className={css.control}>
{
name == 'position' && <div>
<div className={css.one}>
<div className={css.title}>定位</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div>
</div>
<div><label><input type="radio" name='position'
defaultChecked={styleReal['position'] != 'absolute'}
value='relative'
onChange={e => handleStyleCHange(e, 'position')}/>relative</label>
<label><input type="radio" name='position'
defaultChecked={styleReal['position'] == 'absolute'}
value='absolute'
onChange={e => handleStyleCHange(e, 'position')}/>absolute</label>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'box-shadow' && <div>
<div className={css.one}>
<div className={css.title}>边框阴影</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="text" style={{width: 'auto'}}
value={styleReal['box-shadow']}
onChange={e => handleStyleCHange(e, 'box-shadow')}/>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'width' && <div>
<div className={css.one}>
<div className={css.title}>向右距离</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="number" value={styleReal['width']}
onChange={e => handleStyleCHange(e, 'width')}/></div>
<div>
<label><input type="radio" name='width' defaultChecked={styleReal['width-mx'] != '%'}
value='px'
onChange={e => handleStyleCHange(e, 'width-mx')}/>px</label>
<label><input type="radio" name='width' value='%' defaultChecked={styleReal['width-mx'] == '%'}
onChange={e => handleStyleCHange(e, 'width-mx')}/>%</label>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'height' && <div>
<div className={css.one}>
<div className={css.title}>向右距离</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="number" width={100} value={styleReal['height']}
onChange={e => handleStyleCHange(e, 'height')}/></div>
<div>
<label><input type="radio" name='height' defaultChecked={styleReal['height-mx'] != '%'}
value='px'
onChange={e => handleStyleCHange(e, 'height-mx')}/>px</label>
<label><input type="radio" name='height' value='%' defaultChecked={styleReal['height-mx'] == '%'}
onChange={e => handleStyleCHange(e, 'height-mx')}/>%</label>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'background' && <div>
<div className={css.one}>
<div className={css.title}>背景图片</div>
<div className={css.two}>
<div><input type="file" value={styleReal['background-img']}
onChange={e => handleStyleCHange(e, 'background-img')}/>
</div>
<label><input type="radio" name='background-img' value='a' defaultChecked={styleReal['background-other'] != 'b' || styleReal['background-other'] != 'b'}
onChange={e => handleStyleCHange(e, 'background-other')}/>自适应</label>
<label><input type="radio" name='background-img' value='b' defaultChecked={styleReal['background-other'] == 'b'}
onChange={e => handleStyleCHange(e, 'background-other')}/>循环</label>
<label><input type="radio" name='background-img' value='c' defaultChecked={styleReal['background-other'] == 'c'}
onChange={e => handleStyleCHange(e, 'background-other')}/>平铺</label>
</div>
</div>
<div className={css.one}>
<div className={css.title}>背景颜色</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div>#</div>
<div><input type="text" value={styleReal['background-color']}
onChange={e => handleStyleCHange(e, 'background-color')}/>
</div>
<div></div>
</div>
</div>
</div>
</div>
}
{
name == 'backdrop-filter' && <div>
<div className={css.one}>
<div className={css.title}>滤镜</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="number" width={100}
value={styleReal['backdrop-filter']}
onChange={e => handleStyleCHange(e, 'backdrop-filter')}/>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'top' && <div>
<div className={css.one}>
<div className={css.title}>向上距离</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="number" value={styleReal['top']}
onChange={e => handleStyleCHange(e, 'top')}/></div>
<div>
<label><input type="radio" name='top' value='px' defaultChecked={styleReal['top-mx'] != '%'}
onChange={e => handleStyleCHange(e, 'top-mx')}/>px</label>
<label><input type="radio" name='top' value='%' defaultChecked={styleReal['top-mx'] == '%'}
onChange={e => handleStyleCHange(e, 'top-mx')}/>%</label>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'right' && <div>
<div className={css.one}>
<div className={css.title}>向右距离</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="number" value={styleReal['right']}
onChange={e => handleStyleCHange(e, 'right')}/></div>
<div>
<label><input type="radio" name='right' defaultChecked={styleReal['right-mx'] == '%'}
value='px'
onChange={e => handleStyleCHange(e, 'right-mx')}/>px</label>
<label><input type="radio" name='right' value='%' defaultChecked={styleReal['right-mx'] == '%'}
onChange={e => handleStyleCHange(e, 'right-mx')}/>%</label>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'bottom' && <div>
<div className={css.one}>
<div className={css.title}>向下距离</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="number" value={styleReal['bottom']}
onChange={e => handleStyleCHange(e, 'bottom')}/></div>
<div>
<label><input type="radio" name='bottom' defaultChecked={styleReal['bottom-mx'] != '%'}
value='px'
onChange={e => handleStyleCHange(e, 'bottom-mx')}/>px</label>
<label><input type="radio" name='bottom' value='%' defaultChecked={styleReal['bottom-mx'] == '%'}
onChange={e => handleStyleCHange(e, 'bottom-mx')}/>%</label>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'left' && <div>
<div className={css.one}>
<div className={css.title}>向左距离</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="number" value={styleReal['left']}
onChange={e => handleStyleCHange(e, 'left')}/></div>
<div>
<label><input type="radio" name='left' value='px' defaultChecked={styleReal['bottom-mx'] != '%'}
onChange={e => handleStyleCHange(e, 'left-mx')}/>px</label>
<label><input type="radio" name='left' value='%' defaultChecked={styleReal['bottom-mx'] == '%'}
onChange={e => handleStyleCHange(e, 'left-mx')}/>%</label>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'margin' && <div>
<div className={css.one}>
<div className={css.title}>外边距</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="text" style={{width: 'auto'}}
value={styleReal['margin']}
onChange={e => handleStyleCHange(e, 'margin')}/></div>
<div>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'padding' && <div>
<div className={css.one}>
<div className={css.title}>内边距</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="text" style={{width: 'auto'}}
value={styleReal['border']}
onChange={e => handleStyleCHange(e, 'padding')}/></div>
<div>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'border' && <div>
<div className={css.one}>
<div className={css.title}>边框</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="text" style={{width: 'auto'}}
value={styleReal['border']}
onChange={e => handleStyleCHange(e, 'border')}/></div>
<div>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'border-radius' && <div>
<div className={css.one}>
<div className={css.title}>圆角边框</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="number" value={styleReal['border-radius']}
onChange={e => handleStyleCHange(e, 'border-radius')}/>
</div>
<div>
<label><input type="radio" name='border-radius' defaultChecked={styleReal['border-radius-mx'] != '%'}
value='px'
onChange={e => handleStyleCHange(e, 'border-radius-mx')}/>px</label>
<label><input type="radio" name='border-radius' value='%' defaultChecked={styleReal['border-radius-mx'] == '%'}
onChange={e => handleStyleCHange(e, 'border-radius-mx')}/>%</label>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'href' && <div>
<div className={css.one}>
<div className={css.title}>点击链接</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="text" style={{width: 'auto'}}
value={styleReal['href']}
onChange={e => handleStyleCHange(e, 'href')}/></div>
<div>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'overflow' && <div>
<div className={css.one}>
<div className={css.title}>超出隐藏</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div>
</div>
<div>
<label><input type="radio" name='overflow' defaultChecked={styleReal['overflow'] != 'auto'}
value='hidden'
onChange={e => handleStyleCHange(e, 'overflow')}/>hidden</label>
<label><input type="radio" name='overflow' value='auto' defaultChecked={styleReal['overflow'] == 'auto'}
onChange={e => handleStyleCHange(e, 'overflow')}/>auto</label>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'color' && <div>
<div className={css.one}>
<div className={css.title}>文字颜色</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div>#</div>
<div><input type="text" value={styleReal['color']}
onChange={e => handleStyleCHange(e, 'color')}/></div>
<div>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'font-size' && <div>
<div className={css.one}>
<div className={css.title}>文字大小</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="number" style={{width: '40px'}}
value={styleReal['font-size']}
onChange={e => handleStyleCHange(e, 'font-size')}/>
</div>
<div>
<label><input type="radio" name='font-size' defaultChecked={styleReal['font-size-mx'] != 'em' || styleReal['font-size-mx'] != 'rem'}
value='px'
onChange={e => handleStyleCHange(e, 'font-size-mx')}/>px</label>
<label><input type="radio" name='font-size' value='em' defaultChecked={styleReal['font-size-mx'] == 'em'}
onChange={e => handleStyleCHange(e, 'font-size-mx')}/>em</label>
<label><input type="radio" name='font-size' value='rem' defaultChecked={styleReal['font-size-mx'] == 'rem'}
onChange={e => handleStyleCHange(e, 'font-size-mx')}/>rem</label>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'font-weight' && <div>
<div className={css.one}>
<div className={css.title}>文字粗细</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="number" style={{width: 'auto'}}
value={styleReal['font-weight']}
onChange={e => handleStyleCHange(e, 'font-weight')}/>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'white-space' && <div>xx</div>
}
{
name == 'text-indent' && <div>
<div className={css.one}>
<div className={css.title}>首行缩进</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="number" style={{width: '40px'}}
value={styleReal['text-indent']}
onChange={e => handleStyleCHange(e, 'text-indent')}/>
</div>
<div>
<label><input type="radio" name='text-indent' defaultChecked={styleReal['text-indent-mx'] != 'em' || styleReal['text-indent-mx'] != 'rem'}
value='px'
onChange={e => handleStyleCHange(e, 'text-indent-mx')}/>px</label>
<label><input type="radio" name='text-indent' value='em' defaultChecked={styleReal['text-indent-mx'] == 'em'}
onChange={e => handleStyleCHange(e, 'text-indent-mx')}/>em</label>
<label><input type="radio" name='text-indent' value='rem' defaultChecked={styleReal['text-indent-mx'] == 'rem'}
onChange={e => handleStyleCHange(e, 'text-indent-mx')}/>rem</label>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'line-height' && <div>
<div className={css.one}>
<div className={css.title}>行高</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="number" style={{width: '40px'}}
value={styleReal['line-height']}
onChange={e => handleStyleCHange(e, 'line-height')}/>
</div>
<div>
<label><input type="radio" name='line-height' defaultChecked={styleReal['line-height-mx'] != 'em' || styleReal['line-height-mx'] != 'rem'}
value='px'
onChange={e => handleStyleCHange(e, 'line-height-mx')}/>px</label>
<label><input type="radio" name='line-height' value='em' defaultChecked={styleReal['line-height-mx'] == 'em'}
onChange={e => handleStyleCHange(e, 'line-height-mx')}/>em</label>
<label><input type="radio" name='line-height' value='rem' defaultChecked={styleReal['line-height-mx'] == 'em'}
onChange={e => handleStyleCHange(e, 'line-height-mx')}/>rem</label>
</div>
</div>
</div>
</div>
</div>
}
{
name == 'text-align' && <div>
<div className={css.one}>
<div className={css.title}>对齐</div>
<div className={css.two}>
<div className={css.inputTextSmall}>
<div></div>
<div><input type="number" style={{width: '40px'}}
value={styleReal['text-indent']}
onChange={e => handleStyleCHange(e, 'text-align')}/>
</div>
<div>
<label><input type="radio" name='text-indent' defaultChecked={styleReal['text-align-mx'] != 'center' || styleReal['text-align-mx'] != 'right'}
value='left'
onChange={e => handleStyleCHange(e, 'text-indent-mx')}/>px</label>
<label><input type="radio" name='text-indent' defaultChecked={styleReal['text-align-mx'] == 'center'}
value='center'
onChange={e => handleStyleCHange(e, 'text-indent-mx')}/>em</label>
<label><input type="radio" name='text-indent' defaultChecked={styleReal['text-align-mx'] == 'right'}
value='right'
onChange={e => handleStyleCHange(e, 'text-indent-mx')}/>rem</label>
</div>
</div>
</div>
</div>
</div>
}
</div>
</div>
})
}
</div>
</div>
</div>
})
}

117
src/components/StyleControl/index.module.scss
Unescape View File

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

30
src/tools/index.js
Unescape View File

@ -87,13 +87,17 @@ const style1 = [
'border-radius', 'border-radius',
'href',// 跳转 'href',// 跳转
'overflow', 'overflow',
'全剧中', 'box-shadow'
// '全剧中',
] ]
// 文字属性 // 文字属性
const style2 = [ 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 { export class NE {
@ -116,7 +120,7 @@ export class NE {
childrenLength: 1, childrenLength: 1,
childrenType: 'element', childrenType: 'element',
middle: '中间件', middle: '中间件',
style: [...style1], style: {containerStyle, textStyle},
styleLimit: {}, styleLimit: {},
event: {} event: {}
}, },
@ -131,7 +135,7 @@ export class NE {
childrenLength: 'n', childrenLength: 'n',
childrenType: 'element', childrenType: 'element',
middle: '中间件', middle: '中间件',
style: [...style1, 'flex'], style: {containerStyle, textStyle},
styleLimit: {}, styleLimit: {},
event: {} event: {}
}, },
@ -146,7 +150,7 @@ export class NE {
childrenLength: 'n', childrenLength: 'n',
childrenType: 'element', childrenType: 'element',
middle: '中间件', middle: '中间件',
style: [...style1, 'flex'], style: {containerStyle, textStyle},
styleLimit: {}, styleLimit: {},
event: {} event: {}
}, },
@ -171,7 +175,7 @@ export class NE {
config: { config: {
childrenType: 'text', childrenType: 'text',
middle: '中间件', middle: '中间件',
style: [...style2], style: {containerStyle, textStyle},
styleLimit: {}, styleLimit: {},
event: {} event: {}
}, },
@ -184,7 +188,7 @@ export class NE {
config: { config: {
childrenType: 'text', childrenType: 'text',
middle: '中间件', middle: '中间件',
style: [...style2, 'flex'], style: {containerStyle, textStyle},
styleLimit: {}, styleLimit: {},
event: {} event: {}
}, },
@ -197,7 +201,7 @@ export class NE {
config: { config: {
childrenType: 'images', childrenType: 'images',
middle: '中间件', middle: '中间件',
style: [...style1, 'flex'], style: {containerStyle, textStyle},
styleLimit: {}, styleLimit: {},
event: {} event: {}
}, },
@ -210,7 +214,7 @@ export class NE {
config: { config: {
childrenType: 'video', childrenType: 'video',
middle: '中间件', middle: '中间件',
style: [...style2, 'flex'], style: {containerStyle, textStyle},
styleLimit: {}, styleLimit: {},
event: {} event: {}
}, },
@ -234,7 +238,7 @@ export class NE {
config: { config: {
childrenType: 'text', childrenType: 'text',
middle: '中间件', middle: '中间件',
style: [...style2], style: {containerStyle, textStyle},
styleLimit: {}, styleLimit: {},
event: {} event: {}
}, },
@ -247,7 +251,7 @@ export class NE {
config: { config: {
childrenType: 'text', childrenType: 'text',
middle: '中间件', middle: '中间件',
style: [...style2, 'flex'], style: {containerStyle, textStyle},
styleLimit: {}, styleLimit: {},
event: {} event: {}
}, },
@ -260,7 +264,7 @@ export class NE {
config: { config: {
childrenType: 'text', childrenType: 'text',
middle: '中间件', middle: '中间件',
style: [...style1, 'flex'], style: {containerStyle, textStyle},
styleLimit: {}, styleLimit: {},
event: {} event: {}
}, },
@ -273,7 +277,7 @@ export class NE {
config: { config: {
childrenType: 'text', childrenType: 'text',
middle: '中间件', middle: '中间件',
style: [...style2, 'flex'], style: {containerStyle, textStyle},
styleLimit: {}, styleLimit: {},
event: {} event: {}
}, },

22
src/view/EditPageNew/index.jsx
Unescape View File

@ -6,6 +6,7 @@ import Modal from '@/components/Modal';
import Button from "@/components/Button/index.jsx"; import Button from "@/components/Button/index.jsx";
import Atom from "@/components/Atom/index.jsx"; import Atom from "@/components/Atom/index.jsx";
import ElementStructureTree from "@/components/ElementStructureTree/index.jsx"; import ElementStructureTree from "@/components/ElementStructureTree/index.jsx";
import StyleControl from "@/components/StyleControl/index.jsx";
import css from './index.module.scss' import css from './index.module.scss'
import svgLolipop from '@/assets/lolipop.svg' import svgLolipop from '@/assets/lolipop.svg'
@ -242,7 +243,6 @@ export default function EditPageNew() {
</div> </div>
<div className={css.right} style={{ <div className={css.right} style={{
width: attributeSwitch ? '0' : '300px', width: attributeSwitch ? '0' : '300px',
boxShadow: attributeSwitch ? '' : '2px 2px 10px 1px #33333333',
marginLeft: attributeSwitch ? '0' : '1rem', marginLeft: attributeSwitch ? '0' : '1rem',
// padding:attributeSwitch ? '0' : '1rem', // padding:attributeSwitch ? '0' : '1rem',
}}> }}>
@ -274,26 +274,20 @@ export default function EditPageNew() {
{/*元素属性*/} {/*元素属性*/}
<div className={css.elementAttribute}> <div className={css.elementAttribute}>
<div> <div>
<div>样式属性</div> <div className={css.title}>样式属性</div>
<div> <div className={css.box}>
<div> <StyleControl node={nowElement}></StyleControl>
<div>父元素相关属性</div>
<div></div>
</div>
<div>
<div>元素属性</div>
<div></div>
</div>
</div> </div>
</div> </div>
<div> <div>
<div>事件</div> <div className={css.title}>事件</div>
<div> <div className={css.box}>
<div>点击事件</div> <div>点击事件</div>
</div> </div>
</div> </div>
<div> <div>
<div>数据关系</div> <div className={css.title}>数据关系</div>
<div className={css.box}></div>
</div> </div>
</div> </div>
</div> </div>

32
src/view/EditPageNew/index.module.scss
Unescape View File

@ -40,7 +40,6 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
} }
// 左侧目录结构树 // 左侧目录结构树
@ -160,15 +159,17 @@
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
padding: 1rem 1rem 1rem 2rem; padding: 1rem 1rem 1rem 2rem;
box-sizing: border-box; box-sizing: border-box;
height: 100%;
overflow: hidden;
& > div.container { & > div.container {
position: relative; position: relative;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
// 头部页面描述 // 头部页面描述
& > header { & > header {
position: relative; position: relative;
@ -191,11 +192,10 @@
& > div.main { & > div.main {
position: relative; position: relative;
flex: 1; flex: 1;
//overflow: hidden;
display: flex; display: flex;
flex-direction: column;
padding: 1rem 0 0 0; padding: 1rem 0 0 0;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
& > div.container { & > div.container {
position: relative; position: relative;
@ -324,9 +324,11 @@
& > div.middle { & > div.middle {
flex: 1; flex: 1;
min-width: 600px; min-width: 600px;
box-shadow: 2px 2px 10px 1px #33333333; //box-shadow: 2px 2px 10px 1px #33333333;
border-radius: 1rem; border-radius: 1rem;
margin-left: 1rem; margin-left: 1rem;
box-shadow: 0px 0px 10px 1px #66666611 inset;
background: #66666611;
} }
// 右部属性区 // 右部属性区
@ -337,6 +339,7 @@
margin-left: 1rem; margin-left: 1rem;
//box-shadow: 2px 2px 10px 1px #33333333; //box-shadow: 2px 2px 10px 1px #33333333;
border-radius: 1rem; border-radius: 1rem;
height: 100%;
transition: width ease-in-out 500ms, box-shadow ease-in-out 500ms, margin-left ease-in-out 500ms; transition: width ease-in-out 500ms, box-shadow ease-in-out 500ms, margin-left ease-in-out 500ms;
//padding: 1rem; //padding: 1rem;
// 属性展示开关 // 属性展示开关
@ -391,10 +394,11 @@
& > div.container { & > div.container {
position: relative; position: relative;
flex: 1; flex: 1;
height: 100%;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 1rem; //margin: 1rem;
// 属性切换开关 // 属性切换开关
& > header { & > header {
position: relative; position: relative;
@ -445,10 +449,12 @@
width: 298%; width: 298%;
height: 100%; height: 100%;
left: 0; left: 0;
overflow: hidden;
display: flex; display: flex;
transition: left ease-in-out 300ms; transition: left ease-in-out 300ms;
& > div{ & > div{
position: relative; position: relative;
width: 100%;
} }
& > div.linner { & > div.linner {
@ -469,6 +475,20 @@
& > div.elementAttribute { & > div.elementAttribute {
flex: 1; flex: 1;
height: 100%;
overflow: auto;
& > div{
position: relative;
overflow: auto;
& > .title{
position: relative;
@include font-serif;
}
& > .box{
position: relative;
margin-left: 0.2rem;
}
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save