Compare commits
2 Commits
2e27efcaf8
...
154e7cb042
Author | SHA1 | Date |
---|---|---|
expressgy | 154e7cb042 | 2 years ago |
expressgy | 592db5125f | 2 years ago |
@ -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{ |
||||
|
||||
} |
@ -1,8 +1,8 @@ |
||||
import icon from '../assets/react.svg' |
||||
import icon from '../assets/logo.png' |
||||
|
||||
|
||||
|
||||
export const config = { |
||||
projectName:'西安升帮联创技术服务有限公司', |
||||
icon, |
||||
} |
||||
} |
||||
|
@ -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