parent
2e27efcaf8
commit
592db5125f
Binary file not shown.
Binary file not shown.
@ -0,0 +1,136 @@ |
|||||||
|
import css from "./index.module.scss"; |
||||||
|
import {useEffect, useState} from "react"; |
||||||
|
import svgImg from "@/assets/img.svg"; |
||||||
|
|
||||||
|
export default function Vision(props){ |
||||||
|
const [element, setElement] = useState({}) |
||||||
|
const [style, setStyle] = useState({}) |
||||||
|
const [href, setHref] = useState({url: '', state: 0,}) |
||||||
|
const [img, setImg] = useState(svgImg) |
||||||
|
const [inputValue, setInputValue] = useState('') |
||||||
|
if(!props.element) return null |
||||||
|
useEffect(() => { |
||||||
|
let nowElement = null |
||||||
|
if(!props.element) return |
||||||
|
nowElement = typeof props.element.body == 'string' ? JSON.parse(props.element.body) : props.element |
||||||
|
setElement(nowElement) |
||||||
|
if (nowElement.config && nowElement.config.styleReal) { |
||||||
|
const styleReal = nowElement.config.styleReal |
||||||
|
const styleTem = { |
||||||
|
backgroundImage: styleReal.background |
||||||
|
?`url('/ossStatic/${styleReal.background |
||||||
|
}')`:null, |
||||||
|
backgroundColor: '#'+styleReal['background-color'], |
||||||
|
position: styleReal.position, |
||||||
|
width: styleReal.width + styleReal['width-mx'], |
||||||
|
height: styleReal.height + styleReal['height-mx'], |
||||||
|
backdropFilter: styleReal['backdrop-filter'], |
||||||
|
top: styleReal.top + styleReal['top-mx'], |
||||||
|
right: styleReal.right + styleReal['right-mx'], |
||||||
|
bottom: styleReal.bottom + styleReal['bottom-mx'], |
||||||
|
left: styleReal.left + styleReal['left-mx'], |
||||||
|
margin: styleReal.margin, |
||||||
|
padding: styleReal.padding, |
||||||
|
borderRadius: styleReal['border-radius'] + styleReal['border-radius-mx'], |
||||||
|
border: styleReal.border, |
||||||
|
overflow: styleReal.overflow, |
||||||
|
color: '#'+styleReal.color, |
||||||
|
fontSize: styleReal['font-size'] + styleReal['font-size-mx'], |
||||||
|
fontWeight: styleReal['font-weight'], |
||||||
|
lineHeight: styleReal['line-height'] + styleReal['line-height-mx'], |
||||||
|
textIndent: styleReal['text-indent'] + styleReal['text-indent-mx'], |
||||||
|
textAlign: styleReal['text-align'], |
||||||
|
whiteSpace: styleReal['white-space'], |
||||||
|
} |
||||||
|
if(styleReal['all-center']){ |
||||||
|
styleTem.display = 'flex'; |
||||||
|
styleTem['alignItems'] = 'center'; |
||||||
|
styleTem['justifyContent'] = 'center'; |
||||||
|
} |
||||||
|
setStyle(styleTem) |
||||||
|
setHref({ |
||||||
|
url: styleReal.href, |
||||||
|
state: styleReal['href-mx'] |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
setStyle({}) |
||||||
|
} |
||||||
|
|
||||||
|
if(nowElement.identify == 'image' && nowElement.inputValue){ |
||||||
|
setImg('/ossStatic/' + nowElement.inputValue) |
||||||
|
} |
||||||
|
if (nowElement.inputValue) { |
||||||
|
setInputValue(nowElement.inputValue) |
||||||
|
} |
||||||
|
}, [props.element]) |
||||||
|
|
||||||
|
function hrefClick(e) { |
||||||
|
console.log('AAA') |
||||||
|
console.log(href) |
||||||
|
e.stopPropagation(); |
||||||
|
if (!href.url) return; |
||||||
|
if (href.url.length < 3) return |
||||||
|
if (href.state == '0') { |
||||||
|
window.location.href = href.url |
||||||
|
} else { |
||||||
|
window.open(href.url) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
switch (element.identify) { |
||||||
|
// 单元素结构 |
||||||
|
case 'singleFrame': |
||||||
|
return <div className={css.singleFrame} style={style} onClick={hrefClick}> |
||||||
|
{ |
||||||
|
Array.isArray(element.childElement) ? element.childElement.map(item => { |
||||||
|
{return <Vision element={item} key={item.id}></Vision>} |
||||||
|
}) : <Vision element={element.childElement}></Vision> |
||||||
|
} |
||||||
|
</div> |
||||||
|
break; |
||||||
|
// 横向多元素结构 |
||||||
|
case 'transverseFrame': |
||||||
|
return <div className={css.transverseFrame} style={style} onClick={hrefClick}> |
||||||
|
{ |
||||||
|
Array.isArray(element.childElement) ? element.childElement.map(item => { |
||||||
|
{return <Vision element={item} key={item.id}></Vision>} |
||||||
|
}) : <Vision element={element.childElement}></Vision> |
||||||
|
} |
||||||
|
</div> |
||||||
|
break; |
||||||
|
// 纵向多元素结构 |
||||||
|
case 'longitudinalFrame': |
||||||
|
return <div className={css.longitudinalFrame} style={style} onClick={hrefClick}> |
||||||
|
{ |
||||||
|
Array.isArray(element.childElement) ? element.childElement.map(item => { |
||||||
|
{return <Vision element={item} key={item.id}></Vision>} |
||||||
|
}) : <Vision element={element.childElement}></Vision> |
||||||
|
} |
||||||
|
</div> |
||||||
|
break; |
||||||
|
// 行内文本 |
||||||
|
case 'span': |
||||||
|
// <div className={css.span} style={style}}>{inputValue}</div> |
||||||
|
return <div className={css.span} style={style} onClick={hrefClick}>{inputValue}</div> |
||||||
|
break; |
||||||
|
// 块文本 |
||||||
|
case 'blockText': |
||||||
|
return <div className={css.span} style={style}><div dangerouslySetInnerHTML={ |
||||||
|
{ __html: inputValue}} onClick={hrefClick}></div></div> |
||||||
|
break; |
||||||
|
// 图像 |
||||||
|
case 'image': |
||||||
|
return <div className={css.image} style={style}> |
||||||
|
<img src={img} alt="" style={style} onClick={hrefClick}/> |
||||||
|
</div> |
||||||
|
break; |
||||||
|
// 视频 |
||||||
|
case 'video': |
||||||
|
break; |
||||||
|
|
||||||
|
default: |
||||||
|
return null |
||||||
|
break |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,81 @@ |
|||||||
|
// 框架 |
||||||
|
@mixin frame{ |
||||||
|
position: relative; |
||||||
|
//min-height: 3rem; |
||||||
|
} |
||||||
|
@mixin span{ |
||||||
|
//padding: 10px; |
||||||
|
} |
||||||
|
// 单元素结构 |
||||||
|
.singleFrame { |
||||||
|
@include frame; |
||||||
|
} |
||||||
|
// 横向多元素结构 |
||||||
|
.transverseFrame{ |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
@include frame; |
||||||
|
} |
||||||
|
// 纵向多元素结构 |
||||||
|
.longitudinalFrame { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
@include frame; |
||||||
|
} |
||||||
|
|
||||||
|
// 行内文本 |
||||||
|
.span{ |
||||||
|
@include frame; |
||||||
|
@include span; |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.spanDiv{ |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
padding: 5px; |
||||||
|
box-sizing: border-box; |
||||||
|
& > input{ |
||||||
|
position: relative; |
||||||
|
display: block; |
||||||
|
flex: 1; |
||||||
|
line-height: 1.5em; |
||||||
|
background: #ffffff99; |
||||||
|
border: 1px solid #333; |
||||||
|
font-size: inherit; |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
} |
||||||
|
.editInput{ |
||||||
|
position: relative; |
||||||
|
min-height: 2em; |
||||||
|
} |
||||||
|
// 块文本 |
||||||
|
.blockText{ |
||||||
|
|
||||||
|
} |
||||||
|
// 图像 |
||||||
|
.image{ |
||||||
|
position: relative; |
||||||
|
@include frame; |
||||||
|
padding: 0; |
||||||
|
width: 100px; |
||||||
|
& > input{ |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
min-width: 30px; |
||||||
|
min-height: 20px; |
||||||
|
opacity: 0; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
& > img{ |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
} |
||||||
|
// 视频 |
||||||
|
.video{ |
||||||
|
|
||||||
|
} |
@ -0,0 +1,72 @@ |
|||||||
|
import css from './index.module.scss' |
||||||
|
import logo from '@/assets/logo.png' |
||||||
|
import {useEffect, useState} from "react"; |
||||||
|
import {defaultStore} from "@/store/index.js"; |
||||||
|
import { Outlet, useNavigate } from "react-router-dom"; |
||||||
|
import {autorun} from "mobx"; |
||||||
|
|
||||||
|
export default function Home() { |
||||||
|
const [menuList, setMenuList] = useState([]) |
||||||
|
const navigate = useNavigate() |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
defaultStore.getMenuList() |
||||||
|
}, [0]) |
||||||
|
useEffect(() => { |
||||||
|
const a = autorun(() => { |
||||||
|
if (defaultStore.menuList == menuList) return |
||||||
|
setMenuList(defaultStore.menuList) |
||||||
|
}) |
||||||
|
return () => { |
||||||
|
a() |
||||||
|
} |
||||||
|
}) |
||||||
|
useEffect(() => { |
||||||
|
// console.log(menuList) |
||||||
|
}, [menuList]) |
||||||
|
// const history = useHistory() |
||||||
|
|
||||||
|
function goto(router){ |
||||||
|
navigate(router) |
||||||
|
} |
||||||
|
|
||||||
|
return <div className={css.home}> |
||||||
|
<header> |
||||||
|
<nav> |
||||||
|
<div className={css.menu1Box}> |
||||||
|
<div className={css.logo}> |
||||||
|
<img src={logo} alt=""/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{menuList.map(item1 => { |
||||||
|
return item1.father == 0 && <div key={item1.id} className={css.menu1Box}> |
||||||
|
<div className={css.title1} onClick={() => goto(item1.route)}>{item1.name}</div> |
||||||
|
<div className={css.border}></div> |
||||||
|
<div className={css.container}> |
||||||
|
{menuList.map(item2 => { |
||||||
|
return item1.id == item2.father && <div key={item2.id} className={css.menu2Box}> |
||||||
|
<div className={css.title2} onClick={() => goto(item2.route)}> |
||||||
|
<div className={css.background}></div> |
||||||
|
<div className={css.text}>{item2.name}</div> |
||||||
|
</div> |
||||||
|
{menuList.map(item3 => { |
||||||
|
return item2.id == item3.father && |
||||||
|
<div key={item3.id} className={css.menu3Box}> |
||||||
|
<div className={css.title3} onClick={() => goto(item3.route)}>{item3.name}</div> |
||||||
|
</div> |
||||||
|
}) |
||||||
|
} |
||||||
|
</div> |
||||||
|
}) |
||||||
|
} |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
})} |
||||||
|
</nav> |
||||||
|
</header> |
||||||
|
<div className={css.main}> |
||||||
|
<Outlet></Outlet> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
} |
@ -0,0 +1,197 @@ |
|||||||
|
@import '@/assets/default.scss'; |
||||||
|
|
||||||
|
div.home { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: auto; |
||||||
|
min-width: 1000px; |
||||||
|
|
||||||
|
& > header { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
background: #fefefe; |
||||||
|
border-bottom: 1px solid #99999933; |
||||||
|
|
||||||
|
& > nav { |
||||||
|
position: relative; |
||||||
|
max-width: 1200px; |
||||||
|
margin: 0 auto; |
||||||
|
height: 70px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
& > div.menu1Box:first-child { |
||||||
|
padding: 0 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
& > div.menu1Box:nth-child(n+2) { |
||||||
|
padding: 0 3.5rem; |
||||||
|
|
||||||
|
|
||||||
|
&:hover { |
||||||
|
& > div.container { |
||||||
|
max-height: 200px; |
||||||
|
} |
||||||
|
|
||||||
|
& > div.border { |
||||||
|
background-color: #2c5e99; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& > div.menu1Box:nth-child(n+3) { |
||||||
|
&:before { |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
display: inline-block; |
||||||
|
width: 2px; |
||||||
|
height: 30px; |
||||||
|
background: #33333366; |
||||||
|
border-radius: 10px; |
||||||
|
left: -1px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& > div.menu1Box { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
cursor: pointer; |
||||||
|
height: 100%; |
||||||
|
//font-weight: 600; |
||||||
|
& > div.logo { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 60px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& > div.border { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 3px; |
||||||
|
background-color: transparent; |
||||||
|
bottom: 0px; |
||||||
|
transition: background-color ease-in-out 300ms; |
||||||
|
} |
||||||
|
|
||||||
|
& > div.title1 { |
||||||
|
letter-spacing: 0.5rem; |
||||||
|
font-size: 1.2rem; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
& > div.container { |
||||||
|
position: absolute; |
||||||
|
max-height: 0; |
||||||
|
transition: max-height ease-in-out 300ms; |
||||||
|
overflow: hidden; |
||||||
|
top: 70px; |
||||||
|
width: 100%; |
||||||
|
margin: 0; |
||||||
|
z-index: 100; |
||||||
|
background: #99999918; |
||||||
|
|
||||||
|
& > div.menu2Box:first-child { |
||||||
|
margin-top: 0.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
& > div.menu2Box:last-child { |
||||||
|
margin-bottom: 0.5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& > div.container > div.menu2Box { |
||||||
|
position: relative; |
||||||
|
//top:80px; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
& > div.title2:last-child { |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
& > div.title2 { |
||||||
|
position: relative; |
||||||
|
line-height: 2em; |
||||||
|
font-size: 1rem; |
||||||
|
font-weight: bold; |
||||||
|
padding: 0 0.5rem; |
||||||
|
|
||||||
|
& > div.text { |
||||||
|
position: relative; |
||||||
|
color: #444; |
||||||
|
@include autoHide; |
||||||
|
padding-left: 0.5rem; |
||||||
|
transition: all ease-in-out 300ms; |
||||||
|
} |
||||||
|
|
||||||
|
& > div.background { |
||||||
|
position: absolute; |
||||||
|
height: 100%; |
||||||
|
left: 0; |
||||||
|
width: 0; |
||||||
|
transition: all ease-in-out 500ms; |
||||||
|
} |
||||||
|
|
||||||
|
&:before { |
||||||
|
position: absolute; |
||||||
|
display: inline-block; |
||||||
|
content: ""; |
||||||
|
height: 1.2rem; |
||||||
|
width: 2px; |
||||||
|
background: #33333399; |
||||||
|
border-radius: 10px; |
||||||
|
margin-right: 0.5rem; |
||||||
|
top: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
&:hover { |
||||||
|
& > div.background { |
||||||
|
width: 100%; |
||||||
|
background: #2c5e99; |
||||||
|
} |
||||||
|
|
||||||
|
& > div.text { |
||||||
|
color: #fefefe; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& > div.menu3Box { |
||||||
|
position: relative; |
||||||
|
|
||||||
|
& > div.title3 { |
||||||
|
position: relative; |
||||||
|
padding-left: 1.1rem; |
||||||
|
font-size: 1rem; |
||||||
|
@include autoHide; |
||||||
|
line-height: 1.8em; |
||||||
|
transition: background-color ease-in-out 300ms; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
color: #2c5e99; |
||||||
|
} |
||||||
|
|
||||||
|
&:before { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
content: ">"; |
||||||
|
height: 0.5rem; |
||||||
|
margin-right: 0.5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& > div.main { |
||||||
|
|
||||||
|
} |
||||||
|
} |
@ -0,0 +1,26 @@ |
|||||||
|
import { useParams } from 'react-router-dom' |
||||||
|
import {useEffect, useState} from "react"; |
||||||
|
import {defaultStore} from "@/store/index.js"; |
||||||
|
import {autorun} from "mobx"; |
||||||
|
import Vision from '@/components/Vision' |
||||||
|
|
||||||
|
export default function Show(props){ |
||||||
|
const [pageData, setPageData] = useState([]) |
||||||
|
const params = useParams() |
||||||
|
console.log(params) |
||||||
|
useEffect(() => { |
||||||
|
defaultStore.getNowPageContent({route:params.route}) |
||||||
|
},[params]) |
||||||
|
useEffect(() => { |
||||||
|
const a = autorun(() => { |
||||||
|
if(!defaultStore.nowPageContent) return; |
||||||
|
setPageData(defaultStore.nowPageContent) |
||||||
|
}) |
||||||
|
return () => { |
||||||
|
a() |
||||||
|
} |
||||||
|
},[pageData]) |
||||||
|
return pageData.map(item => { |
||||||
|
return <Vision element={item} key={item.id}></Vision> |
||||||
|
}) |
||||||
|
} |
Loading…
Reference in new issue