parent
9bea6e0e53
commit
71ea3834da
After Width: | Height: | Size: 559 B |
@ -0,0 +1,50 @@ |
||||
@font-face { |
||||
font-family: Emoji; |
||||
src: local("Apple Color Emojiji"), local("Segoe UI Emoji"), local("Segoe UI Symbol"), local("Noto Color Emoji"); |
||||
unicode-range: U+1F000-1F644, U+203C-3299; |
||||
} |
||||
//无线字体: |
||||
body { |
||||
font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica, Arial, sans-serif; |
||||
} |
||||
//衬线字体: |
||||
@mixin font-serif { |
||||
font-family: Georgia, Cambria, "Times New Roman", Times, serif; |
||||
} |
||||
//等宽字体 |
||||
@mixin font-mono { |
||||
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
||||
} |
||||
|
||||
//以上字体总结 来源于B站Up:zhangxinxu https://www.bilibili.com/video/BV1b54y1Z7pu/?spm_id_from=333.337.search-card.all.click&vd_source=2f8cd1eff8d87be6af7bdcbccbd60ade |
||||
|
||||
@mixin widthAuto{ |
||||
/*div宽度适应文字*/ |
||||
width:fit-content; |
||||
width:-webkit-fit-content; |
||||
width:-moz-fit-content; |
||||
} |
||||
@mixin noSelect{ |
||||
/*无法选中*/ |
||||
-webkit-touch-callout:none; |
||||
-webkit-user-select:none; |
||||
-khtml-user-select:none; |
||||
-moz-user-select:none; |
||||
-ms-user-select:none; |
||||
user-select:none; |
||||
} |
||||
//浸水模糊效果 |
||||
@mixin beautifulBlurWhite{ |
||||
background-color: rgba(255, 255, 255, 0.8); |
||||
backdrop-filter: blur(20px) saturate(5); |
||||
} |
||||
//浸水模糊效果 |
||||
@mixin beautifulBlur{ |
||||
backdrop-filter: blur(20px) saturate(1); |
||||
} |
||||
//壁纸适应效果 |
||||
@mixin autoBackgroundImg{ |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
background-size: cover; |
||||
} |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,13 @@ |
||||
import css from './index.module.scss' |
||||
export default function DirectoryStructureTree(props){ |
||||
return props.tree.map((item, index) => { |
||||
if(item.children && Array.isArray(item.children)){ |
||||
return <div key={index} className={css.directoryStructureTree}> |
||||
<div>{item.name}</div> |
||||
<div>{DirectoryStructureTree({tree: item.children})}</div> |
||||
</div> |
||||
}else{ |
||||
return <div key={index} className={css.directoryStructureTree}>{item.name}</div> |
||||
} |
||||
}) |
||||
} |
@ -0,0 +1,7 @@ |
||||
.directoryStructureTree{ |
||||
position: relative; |
||||
line-height: 1.5em; |
||||
border-radius: 10px; |
||||
margin: 1em; |
||||
cursor: pointer; |
||||
} |
@ -0,0 +1,45 @@ |
||||
import { observable, action, computed, makeObservable} from "mobx"; |
||||
import {config} from "@/config/sys22"; |
||||
|
||||
|
||||
class DefaultStore { |
||||
// 系统配置
|
||||
config = config; |
||||
|
||||
// 目录结构树
|
||||
directoryStructureTree = [ |
||||
{ |
||||
name:'菜单1', |
||||
icon:'', |
||||
children:[ |
||||
{ |
||||
name:'子菜单' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
name:'菜单2', |
||||
icon:'', |
||||
}, |
||||
]; |
||||
constructor() { |
||||
// mobx6 和以前版本这是最大的区别
|
||||
makeObservable(this, { |
||||
config: observable, |
||||
directoryStructureTree: observable, |
||||
setName: action, |
||||
titleName: computed |
||||
}); |
||||
|
||||
} |
||||
setName(v) { |
||||
console.log('触发action'); |
||||
this.name = v; |
||||
} |
||||
|
||||
get titleName(){ |
||||
return this.name+'___111'; |
||||
} |
||||
} |
||||
|
||||
export default DefaultStore |
@ -1,5 +1,7 @@ |
||||
import UserStore from './userStore' |
||||
import NetStore from "./netStore"; |
||||
// import UserStore from './userStore'
|
||||
// import NetStore from "./netStore";
|
||||
import DefaultStore from "@/store/defaultStore.js"; |
||||
|
||||
export const userStore = new UserStore() |
||||
export const netStore = new NetStore() |
||||
// export const userStore = new UserStore()
|
||||
// export const netStore = new NetStore()
|
||||
export const defaultStore = new DefaultStore() |
After Width: | Height: | Size: 126 KiB |
@ -1,3 +1,172 @@ |
||||
import {useState, useEffect} from 'react' |
||||
import {defaultStore} from '@/store/index' |
||||
import DirectoryStructureTree from "@/components/DirectoryStructureTree/index.jsx"; |
||||
import Modal from '@/components/Modal'; |
||||
import Button from "@/components/Button/index.jsx"; |
||||
import css from './index.module.scss' |
||||
import svgLolipop from '@/assets/lolipop.svg' |
||||
import svgHelp from '@/assets/help.svg' |
||||
import svgArrow from '@/assets/arrow.svg' |
||||
|
||||
export default function EditPageNew() { |
||||
return <div>Edit</div> |
||||
// 大纲 |
||||
const [thumbnailList, setThumbnailList] = useState([{name: '大纲', choose: false}]); |
||||
// 添加大纲页面状态 |
||||
const [addThumbnailState, setAddThumbnailState] = useState(false); |
||||
// 大纲名称 |
||||
const [newThumbnailName, setNewThumbnailName] = useState(''); |
||||
// 选择大纲的box样式 |
||||
const moleculeBoxChoose = [css.moleculeBoxChoose, css.moleculeBox].join(' '); |
||||
|
||||
// 关闭大纲添加页面 |
||||
function closeThumbnailModal() { |
||||
setNewThumbnailName('') |
||||
setAddThumbnailState(false) |
||||
} |
||||
|
||||
// 确认添加大纲 |
||||
function addThumbnail() { |
||||
thumbnailList.push({ |
||||
name: newThumbnailName |
||||
}) |
||||
setThumbnailList(thumbnailList) |
||||
closeThumbnailModal() |
||||
} |
||||
|
||||
// 选择大纲 |
||||
function chooseThumbnail(index) { |
||||
thumbnailList.forEach(item => { |
||||
item.choose = false; |
||||
}) |
||||
thumbnailList[index].choose = true |
||||
setThumbnailList([...thumbnailList]) |
||||
setNowContent(thumbnailList[index]) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
console.log(thumbnailList) |
||||
}, [thumbnailList]) |
||||
|
||||
// 当下的页面内容 |
||||
const [nowContent, setNowContent] = useState({}) |
||||
// 属性页开关 |
||||
const [attributeSwitch, setAttributeSwitch] = useState(false); |
||||
// 属性页标签位置 |
||||
const [attrLabelPosition, setAttrLabelPosition] = useState(0); |
||||
// 切换属性标签 |
||||
function handleChangeAttrLabelPosition(index){ |
||||
setAttrLabelPosition(index) |
||||
} |
||||
|
||||
|
||||
return <div className={css.editPageNew}> |
||||
<div className={css.container}> |
||||
<div className={css.main}> |
||||
<div className={css.directoryStructureTree}> |
||||
<div className={css.container}> |
||||
<header> |
||||
<div> |
||||
<div className={css.svg}><img src={svgLolipop} alt=""/></div> |
||||
<div className={css.title}>目录结构树</div> |
||||
</div> |
||||
</header> |
||||
<div className={css.main}> |
||||
<div className={css.container}> |
||||
<DirectoryStructureTree |
||||
tree={defaultStore.directoryStructureTree}></DirectoryStructureTree> |
||||
</div> |
||||
</div> |
||||
<footer> |
||||
<div> |
||||
<div className={css.svg}><img src={svgHelp} alt=""/></div> |
||||
<div className={css.title}>{defaultStore.config.projectName}</div> |
||||
</div> |
||||
</footer> |
||||
</div> |
||||
</div> |
||||
<div className={css.graphicEditor}> |
||||
<div className={css.container}> |
||||
<header>页面名称</header> |
||||
<div className={css.linner}></div> |
||||
<div className={css.main}> |
||||
<div className={css.container}> |
||||
<div className={css.left}> |
||||
<div className={css.title}>大纲</div> |
||||
<div className={css.thumbnail}> |
||||
<div className={css.container}> |
||||
<div className={css.moleculeList}> |
||||
{ |
||||
thumbnailList.map((item, index) => { |
||||
return <div |
||||
className={item.choose ? moleculeBoxChoose : css.moleculeBox} |
||||
key={index} onClick={() => chooseThumbnail(index)}> |
||||
<div> |
||||
<div className={css.molecule}>{item.name}</div> |
||||
<div className={css.moleculeCmd}>{item.choose}</div> |
||||
</div> |
||||
</div> |
||||
}) |
||||
} |
||||
</div> |
||||
<div className={css.moleculeAdd} onClick={() => { |
||||
setAddThumbnailState(true) |
||||
}}> |
||||
<div>+</div> |
||||
</div> |
||||
<Modal state={addThumbnailState} close={closeThumbnailModal} width={"300"}> |
||||
<div className={css.addThumbnailState}> |
||||
<div className={css.title}>添加大纲</div> |
||||
<div className={css.main}> |
||||
<div>大纲名称</div> |
||||
<div><input type="text" value={newThumbnailName} |
||||
onChange={event => { |
||||
setNewThumbnailName(event.target.value) |
||||
}}/></div> |
||||
</div> |
||||
<div className={css.ok}><Button onClick={addThumbnail}>确认</Button> |
||||
</div> |
||||
</div> |
||||
</Modal> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={css.middle}> |
||||
|
||||
</div> |
||||
<div className={css.right} style={{ |
||||
width: attributeSwitch ? '0' : '300px', |
||||
boxShadow: attributeSwitch ? '' : '2px 2px 10px 1px #33333333', |
||||
marginLeft: attributeSwitch ? '0' : '1rem', |
||||
// padding:attributeSwitch ? '0' : '1rem', |
||||
}}> |
||||
<div className={attributeSwitch ? css.switch : css.switchClose} onClick={() => { |
||||
setAttributeSwitch(!attributeSwitch) |
||||
}}> |
||||
<img src={svgLolipop} alt=""/> |
||||
</div> |
||||
<div className={css.container}> |
||||
<header> |
||||
<div style={{left:attrLabelPosition * 33.33 + '%'}}></div> |
||||
<div onClick={() => handleChangeAttrLabelPosition(0)}>元素结构树</div> |
||||
<div onClick={() => handleChangeAttrLabelPosition(1)}>添加元素</div> |
||||
<div onClick={() => handleChangeAttrLabelPosition(2)}>元素属性</div> |
||||
</header> |
||||
<div className={css.main}> |
||||
<div className={css.container} style={{left:attrLabelPosition * -99 + '%'}}> |
||||
<div className={css.elementStructureTree}></div> |
||||
<div className={css.linner}></div> |
||||
<div className={css.addElement}></div> |
||||
<div className={css.linner}></div> |
||||
<div className={css.elementAttribute}></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
@ -0,0 +1,500 @@ |
||||
@import '@/assets/default.scss'; |
||||
|
||||
.editPageNew { |
||||
@include noSelect; |
||||
position: relative; |
||||
height: 100%; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
//background: #00ADB5; |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 1rem; |
||||
box-sizing: border-box; |
||||
|
||||
& > div.container { |
||||
position: relative; |
||||
flex: 1; |
||||
// |
||||
//background: #556270; /* fallback for old browsers */ |
||||
//background: -webkit-linear-gradient(to right, #556270, #ff6b6b); /* Chrome 10-25, Safari 5.1-6 */ |
||||
//background: linear-gradient(to right, #556270, #ff6b6b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ |
||||
|
||||
background: #780206; /* fallback for old browsers */ |
||||
background: -webkit-linear-gradient(to right, #061161, #780206); /* Chrome 10-25, Safari 5.1-6 */ |
||||
background: linear-gradient(to right, #061161, #780206); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ |
||||
|
||||
background: #B993D6; /* fallback for old browsers */ |
||||
background: -webkit-linear-gradient(to right, #8CA6DB, #B993D6); /* Chrome 10-25, Safari 5.1-6 */ |
||||
background: linear-gradient(to right, #8CA6DB33, #B993D633); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ |
||||
border-radius: 16px; |
||||
overflow: hidden; |
||||
box-shadow: 2px 2px 10px 2px #33333333; |
||||
|
||||
& > div.main { |
||||
position: relative; |
||||
height: 100%; |
||||
display: flex; |
||||
|
||||
& > div { |
||||
position: relative; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
// 左侧目录结构树 |
||||
& > div.directoryStructureTree { |
||||
position: relative; |
||||
flex-shrink: 0; |
||||
width: 260px; |
||||
border-right: 1px solid #fff; |
||||
box-sizing: border-box; |
||||
padding: 1rem; |
||||
|
||||
& > div.container { |
||||
position: relative; |
||||
flex: 1; |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-direction: column; |
||||
border-radius: 10px; |
||||
overflow: hidden; |
||||
|
||||
& > * { |
||||
position: relative; |
||||
} |
||||
|
||||
// 头部标题和logo |
||||
& > header { |
||||
flex-shrink: 0; |
||||
height: 100px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
&:before { |
||||
content: ""; |
||||
position: absolute; |
||||
background-color: #f9949e; |
||||
width: 50px; |
||||
height: 30px; |
||||
} |
||||
|
||||
& > div { |
||||
position: relative; |
||||
padding: 1rem; |
||||
@include beautifulBlur; |
||||
|
||||
& > div.svg { |
||||
text-align: center; |
||||
|
||||
& > img { |
||||
width: 30px; |
||||
} |
||||
} |
||||
|
||||
& > div.title { |
||||
line-height: 2rem; |
||||
color: #333; |
||||
@include font-serif; |
||||
font-weight: 600; |
||||
font-size: 1.1rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 主体目录 |
||||
& > div.main { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
|
||||
&:before, &:after { |
||||
content: ''; |
||||
position: relative; |
||||
width: 80%; |
||||
height: 3px; |
||||
border-radius: 10px; |
||||
background-color: #fff; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
div.container { |
||||
position: relative; |
||||
flex: 1; |
||||
} |
||||
} |
||||
|
||||
// 说明和备注 |
||||
& > footer { |
||||
flex-shrink: 0; |
||||
min-height: 50px; |
||||
display: flex; |
||||
flex-direction: column-reverse; |
||||
align-items: center; |
||||
|
||||
& > div { |
||||
position: relative; |
||||
display: flex; |
||||
|
||||
& > div.svg { |
||||
& > img { |
||||
width: 1.5rem; |
||||
} |
||||
} |
||||
|
||||
& > div.title { |
||||
@include font-serif; |
||||
color: #333; |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 右侧图形编辑器 |
||||
& > div.graphicEditor { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
padding: 1rem 1rem 1rem 2rem; |
||||
box-sizing: border-box; |
||||
|
||||
& > div.container { |
||||
position: relative; |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
// 头部页面描述 |
||||
& > header { |
||||
position: relative; |
||||
flex-shrink: 0; |
||||
height: 100px; |
||||
} |
||||
|
||||
// 分割线 |
||||
& > div.linner { |
||||
position: relative; |
||||
flex-shrink: 0; |
||||
height: 3px; |
||||
background-color: #fefefe; |
||||
width: 100%; |
||||
border-radius: 10px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
// 图形编辑器主体 |
||||
& > div.main { |
||||
position: relative; |
||||
flex: 1; |
||||
//overflow: hidden; |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 1rem 0 0 0; |
||||
box-sizing: border-box; |
||||
|
||||
& > div.container { |
||||
position: relative; |
||||
flex: 1; |
||||
display: flex; |
||||
|
||||
& > div { |
||||
position: relative; |
||||
} |
||||
|
||||
// 左部缩略图 |
||||
& > div.left { |
||||
width: 200px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
& > div.title { |
||||
position: relative; |
||||
@include font-serif; |
||||
font-weight: 600; |
||||
flex-shrink: 0; |
||||
line-height: 2rem; |
||||
} |
||||
|
||||
// 缩略图容器 |
||||
& > div.thumbnail { |
||||
position: relative; |
||||
flex: 1; |
||||
overflow: hidden; |
||||
padding: 1rem 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
& > div.container { |
||||
flex: 1; |
||||
|
||||
// 缩略图列表 |
||||
& > div.moleculeList { |
||||
// 缩略图 |
||||
& > div.moleculeBox { |
||||
position: relative; |
||||
margin: 1rem; |
||||
box-sizing: border-box; |
||||
box-shadow: 1px 1px 8px 0px #33333333; |
||||
height: 100px; |
||||
border-radius: 0.5rem; |
||||
cursor: pointer; |
||||
//border: 1px solid #17B97800; |
||||
transition: box-shadow ease-in-out 300ms, border ease-in-out 300ms; |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
&:hover { |
||||
box-shadow: 1px 1px 8px 1px #33333344; |
||||
} |
||||
|
||||
& > div { |
||||
position: relative; |
||||
flex: 1; |
||||
margin: 0.5rem; |
||||
} |
||||
} |
||||
|
||||
& > div.moleculeBoxChoose { |
||||
background: #FC354C33; /* fallback for old browsers */ |
||||
background: -webkit-linear-gradient(to right, #0ABFBC33, #FC354C33); /* Chrome 10-25, Safari 5.1-6 */ |
||||
background: linear-gradient(to right, #0ABFBC33, #FC354C33); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ |
||||
@include beautifulBlur; |
||||
} |
||||
|
||||
} |
||||
|
||||
// 添加缩略图 |
||||
& > div.moleculeAdd { |
||||
position: relative; |
||||
margin: 1rem; |
||||
box-shadow: 1px 1px 8px 0px #33333333; |
||||
height: 100px; |
||||
border-radius: 0.5rem; |
||||
cursor: pointer; |
||||
//border: 1px solid #cdcdcd00; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
transition: box-shadow ease-in-out 300ms; |
||||
|
||||
&:hover { |
||||
box-shadow: 1px 1px 8px 1px #33333344; |
||||
} |
||||
|
||||
& > div { |
||||
font-size: 6rem; |
||||
line-height: 6rem; |
||||
padding-bottom: 0.5rem; |
||||
} |
||||
} |
||||
|
||||
// 缩略图对象 |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
// 中部编辑器 |
||||
& > div.middle { |
||||
flex: 1; |
||||
min-width: 600px; |
||||
box-shadow: 2px 2px 10px 1px #33333333; |
||||
border-radius: 1rem; |
||||
margin-left: 1rem; |
||||
} |
||||
|
||||
// 右部属性区 |
||||
& > div.right { |
||||
position: relative; |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin-left: 1rem; |
||||
//box-shadow: 2px 2px 10px 1px #33333333; |
||||
border-radius: 1rem; |
||||
transition: width ease-in-out 500ms, box-shadow ease-in-out 500ms, margin-left ease-in-out 500ms; |
||||
//padding: 1rem; |
||||
// 属性展示开关 |
||||
& > div.switch { |
||||
position: absolute; |
||||
left: -40px; |
||||
background: #FFC93C; |
||||
height: 60px; |
||||
width: 40px; |
||||
top: 0; |
||||
bottom: 0; |
||||
margin: auto 0; |
||||
border-radius: 50px 0 0 50px; |
||||
cursor: pointer; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
& > img { |
||||
width: 25px; |
||||
line-height: 50px; |
||||
transition: transform ease-in-out 500ms; |
||||
} |
||||
} |
||||
|
||||
& > div.switchClose { |
||||
position: absolute; |
||||
left: -40px; |
||||
background: #FFC93C; |
||||
height: 60px; |
||||
width: 40px; |
||||
top: 0; |
||||
bottom: 0; |
||||
margin: auto 0; |
||||
border-radius: 50px 0 0 50px; |
||||
cursor: pointer; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
& > img { |
||||
width: 25px; |
||||
line-height: 50px; |
||||
transform: rotate(180deg); |
||||
transition: transform ease-in-out 500ms; |
||||
} |
||||
} |
||||
|
||||
// 属性主体 |
||||
& > div.container { |
||||
position: relative; |
||||
flex: 1; |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin: 1rem; |
||||
// 属性切换开关 |
||||
& > header { |
||||
position: relative; |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
overflow: hidden; |
||||
//border-radius: 1rem; |
||||
line-height: 2rem; |
||||
//background: #fefefe99; |
||||
width: 100%; |
||||
margin-bottom: 1rem; |
||||
//box-shadow: 1px 1px 8px 0px #33333333; |
||||
& > div { |
||||
@include font-serif; |
||||
font-weight: 600; |
||||
position: relative; |
||||
flex: 1; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
& > div:first-child { |
||||
position: absolute; |
||||
background: #3EC1D3; |
||||
width: 33.33%; |
||||
border-radius: 1rem; |
||||
height: 3px; |
||||
bottom: 0; |
||||
transition: left ease-in-out 300ms; |
||||
} |
||||
} |
||||
|
||||
// 属性切换内容 |
||||
& > div.main { |
||||
position: relative; |
||||
overflow: hidden; |
||||
flex: 1; |
||||
padding: 1rem; |
||||
box-sizing: border-box; |
||||
background: #66666611; |
||||
border-radius: 1rem; |
||||
box-shadow: 0px 0px 10px 1px #66666611 inset; |
||||
|
||||
& > div.container { |
||||
position: relative; |
||||
width: 298%; |
||||
height: 100%; |
||||
left: 0; |
||||
display: flex; |
||||
transition: left ease-in-out 300ms; |
||||
& > div{ |
||||
position: relative; |
||||
} |
||||
|
||||
& > div.linner { |
||||
flex-shrink: 1 !important; |
||||
background: #fff; |
||||
//width: 1px; |
||||
height: 100%; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
& > div.elementStructureTree { |
||||
flex: 1; |
||||
} |
||||
|
||||
& > div.addElement { |
||||
flex: 1; |
||||
} |
||||
|
||||
& > div.elementAttribute { |
||||
flex: 1; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
// 添加大纲弹窗 |
||||
.addThumbnailState { |
||||
position: relative; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.title { |
||||
position: relative; |
||||
flex-shrink: 0; |
||||
text-align: center; |
||||
@include font-serif; |
||||
font-weight: 600; |
||||
font-size: 1.2rem; |
||||
margin: 5px 0; |
||||
} |
||||
|
||||
.main { |
||||
position: relative; |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
& input { |
||||
border-bottom: 1px solid #cdcdcd; |
||||
margin-left: 1rem; |
||||
line-height: 1.2rem; |
||||
} |
||||
} |
||||
|
||||
.ok { |
||||
position: relative; |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
} |
Loading…
Reference in new issue