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 UserStore from './userStore'
|
||||||
import NetStore from "./netStore"; |
// import NetStore from "./netStore";
|
||||||
|
import DefaultStore from "@/store/defaultStore.js"; |
||||||
|
|
||||||
export const userStore = new UserStore() |
// export const userStore = new UserStore()
|
||||||
export const netStore = new NetStore() |
// export const netStore = new NetStore()
|
||||||
|
export const defaultStore = new DefaultStore() |
||||||
|
After Width: | Height: | Size: 126 KiB |
@ -1,3 +1,172 @@ |
|||||||
export default function EditPageNew(){ |
import {useState, useEffect} from 'react' |
||||||
return <div>Edit</div> |
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() { |
||||||
|
// 大纲 |
||||||
|
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