测试提交
parent
533dadf229
commit
2171bbee09
|
|
@ -0,0 +1,5 @@
|
|||
<component name="ProjectCodeStyleConfiguration">
|
||||
<state>
|
||||
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
|
||||
</state>
|
||||
</component>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
||||
</profile>
|
||||
</component>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
66
src/App.css
66
src/App.css
|
|
@ -1,38 +1,38 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
/*.App {*/
|
||||
/* !*text-align: center;*!*/
|
||||
/*}*/
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
/*.App-logo {*/
|
||||
/* height: 40vmin;*/
|
||||
/* pointer-events: none;*/
|
||||
/*}*/
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
/*@media (prefers-reduced-motion: no-preference) {*/
|
||||
/* .App-logo {*/
|
||||
/* animation: App-logo-spin infinite 20s linear;*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
/*.App-header {*/
|
||||
/* background-color: #282c34;*/
|
||||
/* min-height: 100vh;*/
|
||||
/* display: flex;*/
|
||||
/* flex-direction: column;*/
|
||||
/* align-items: center;*/
|
||||
/* justify-content: center;*/
|
||||
/* font-size: calc(10px + 2vmin);*/
|
||||
/* color: white;*/
|
||||
/*}*/
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
/*.App-link {*/
|
||||
/* color: #61dafb;*/
|
||||
/*}*/
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
/*@keyframes App-logo-spin {*/
|
||||
/* from {*/
|
||||
/* transform: rotate(0deg);*/
|
||||
/* }*/
|
||||
/* to {*/
|
||||
/* transform: rotate(360deg);*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
|
|
|
|||
541
src/App.js
541
src/App.js
|
|
@ -1,25 +1,528 @@
|
|||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import {OrgChart} from "./components/OrgChart";
|
||||
import {Component, Fragment} from "react";
|
||||
import {OrgChartNode} from "./components/OrgChartNode";
|
||||
import "./iconfont/iconfont.css"
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
const orgTree = [{
|
||||
'id': 1,
|
||||
'isRoot':true,
|
||||
'name': 'Lao Lao parent parent',
|
||||
'title': 'general manager',
|
||||
'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'type': 1,
|
||||
'show': 0,
|
||||
'showChildren': 1,
|
||||
"children": [{
|
||||
'id': 2,
|
||||
'name': 'Lao Lao parent',
|
||||
'title': 'general manager',
|
||||
'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'type': 1,
|
||||
'show': 0,
|
||||
'showChildren': 1,
|
||||
"children": [{
|
||||
'id': 39,
|
||||
'name': 'Lao Lao61',
|
||||
'title': 'general manager',
|
||||
'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'type': 1,
|
||||
'show': 1,
|
||||
'showChildren': 0,
|
||||
},{
|
||||
'id': 38,
|
||||
'name': 'Lao Lao72',
|
||||
'title': 'general manager',
|
||||
'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'type': 1,
|
||||
'show': 1,
|
||||
'showChildren': 0,
|
||||
},{
|
||||
'id': 3,
|
||||
'name': 'Lao Lao4',
|
||||
'title': 'general manager',
|
||||
'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'type': 1,
|
||||
'show': 1,
|
||||
'showChildren': 1,
|
||||
'children': [
|
||||
{
|
||||
'id': 4,
|
||||
'name': 'Bo Miao', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 1
|
||||
},
|
||||
{
|
||||
'id': 5,
|
||||
'name': 'Su Miao', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 2,
|
||||
'children': [
|
||||
{
|
||||
'id': 6,
|
||||
'name': 'Tie Hua', 'title': 'senior engineer', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 1,
|
||||
},
|
||||
{
|
||||
'id': 7,
|
||||
'name': 'Hei Hei', 'title': 'senior engineer', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 8,
|
||||
'name': 'Yu Jie', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 2,
|
||||
},
|
||||
{
|
||||
'id': 9,
|
||||
'name': 'Yu Li', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 2,
|
||||
'children': [
|
||||
{
|
||||
'id': 9,
|
||||
'name': 'Bo Miao', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 1
|
||||
},
|
||||
{
|
||||
'id': 10,
|
||||
'name': 'Su Miao', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'type': 2,
|
||||
'show': 1,
|
||||
'children': [
|
||||
{
|
||||
'id': 11,
|
||||
'name': 'Tie Hua', 'title': 'senior engineer', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 1,
|
||||
},
|
||||
{
|
||||
'id': 12,
|
||||
'name': 'Hei Hei', 'title': 'senior engineer', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 13,
|
||||
'name': 'Yu Jie', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 2,
|
||||
},
|
||||
{
|
||||
'id': 14,
|
||||
'name': 'Yu Li', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 2,
|
||||
},
|
||||
{
|
||||
'id': 14,
|
||||
'name': 'Hong Miao', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'showChildren': 0,
|
||||
'downLevel': '29',
|
||||
'show': 1,
|
||||
'type': 2,
|
||||
},
|
||||
{
|
||||
'id': 15,
|
||||
'name': 'Yu Wei', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'showChildren': 0,
|
||||
'downLevel': '29',
|
||||
'show': 1,
|
||||
'type': 1,
|
||||
},
|
||||
{
|
||||
'id': 16,
|
||||
'name': 'Chun Miao', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'showChildren': 0,
|
||||
'downLevel': '29',
|
||||
'show': 1,
|
||||
'type': 2,
|
||||
},
|
||||
{
|
||||
'id': 17,
|
||||
'name': 'Yu Tie', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'showChildren': 0,
|
||||
'downLevel': '29',
|
||||
'show': 1,
|
||||
'type': 1,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': 18,
|
||||
'name': 'Hong Miao', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'showChildren': 0,
|
||||
'downLevel': '29',
|
||||
'show': 1,
|
||||
'type': 2,
|
||||
},
|
||||
{
|
||||
'id': 19,
|
||||
'name': 'Yu Wei', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'showChildren': 0,
|
||||
'downLevel': '29',
|
||||
'show': 1,
|
||||
'type': 1,
|
||||
},
|
||||
{
|
||||
'id': 20,
|
||||
'name': 'Chun Miao', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'showChildren': 0,
|
||||
'downLevel': '29',
|
||||
'show': 1,
|
||||
'type': 2,
|
||||
},
|
||||
{
|
||||
'id': 21,
|
||||
'name': 'Yu Tie', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'showChildren': 0,
|
||||
'downLevel': '29',
|
||||
'show': 1,
|
||||
'type': 1,
|
||||
}
|
||||
]
|
||||
},{
|
||||
'id': 31,
|
||||
'name': 'Lao Lao5',
|
||||
'title': 'general manager',
|
||||
'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'type': 1,
|
||||
'show': 1,
|
||||
'showChildren': 0,
|
||||
},{
|
||||
'id': 32,
|
||||
'name': 'Lao Lao6',
|
||||
'title': 'general manager',
|
||||
'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'type': 1,
|
||||
'show': 1,
|
||||
'showChildren': 0,
|
||||
},{
|
||||
'id': 33,
|
||||
'name': 'Lao Lao7',
|
||||
'title': 'general manager',
|
||||
'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'type': 1,
|
||||
'show': 1,
|
||||
'showChildren': 0,
|
||||
}]
|
||||
}, {
|
||||
'id': 25,
|
||||
'name': 'Lao Lao parent 1',
|
||||
'title': 'general manager',
|
||||
'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'type': 1,
|
||||
'show': 0,
|
||||
'showChildren': 0,
|
||||
}, {
|
||||
'id': 24,
|
||||
'name': 'Lao Lao parent2',
|
||||
'title': 'general manager',
|
||||
'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'type': 1,
|
||||
'show': 0,
|
||||
'showChildren': 0,
|
||||
"children": [{
|
||||
'id': 23,
|
||||
'name': 'Lao Lao 1',
|
||||
'title': 'general manager',
|
||||
'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'type': 1,
|
||||
'show': 1,
|
||||
'showChildren': 0,
|
||||
'children': [
|
||||
{
|
||||
'id': 26,
|
||||
'name': 'Bo Miao 1', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 1
|
||||
},
|
||||
{
|
||||
'id': 27,
|
||||
'name': 'Su Miao 1', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 2,
|
||||
},
|
||||
{
|
||||
'id': 28,
|
||||
'name': 'Yu Jie 1', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'showChildren': 0,
|
||||
'show': 1,
|
||||
'type': 2,
|
||||
},
|
||||
{
|
||||
'id': 29,
|
||||
'name': 'Yu Wei 1', 'title': 'department manager', 'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'showChildren': 0,
|
||||
'downLevel': '29',
|
||||
'show': 1,
|
||||
'type': 1,
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
'id': 30,
|
||||
'name': 'Lao Lao parent 3',
|
||||
'title': 'general manager',
|
||||
'avatar': 'avatar.jpg',
|
||||
'department': 'Senior Manager After Sales Marketing Communication & e-Commerce',
|
||||
'job': 'Senior Manager Technology China Advanced Driver Assistance Systems',
|
||||
'downLevel': '29',
|
||||
'type': 1,
|
||||
'show': 0,
|
||||
'showChildren': 0,
|
||||
}]
|
||||
}]
|
||||
|
||||
|
||||
class App extends Component {
|
||||
|
||||
state = {
|
||||
left: 0,
|
||||
top: 0,
|
||||
scale: 1,
|
||||
cursor: 'auto',
|
||||
orgTree: orgTree
|
||||
}
|
||||
|
||||
getChartNoe = (node) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<OrgChartNode node={node}></OrgChartNode>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.onmousedown = this.mouseDown
|
||||
}
|
||||
|
||||
mouseDown = (e) => {
|
||||
let pageX = e.pageX - this.state.left
|
||||
let pageY = e.pageY - this.state.top
|
||||
this.setState({
|
||||
cursor: 'move'
|
||||
})
|
||||
document.body.style.cursor = "move"
|
||||
// 记录起始位置
|
||||
document.onmousemove = (event) => {
|
||||
|
||||
// 计算移动位置，移动目标元素
|
||||
this.setState({
|
||||
left: event.pageX - pageX,
|
||||
top: event.pageY - pageY
|
||||
})
|
||||
}
|
||||
document.onmouseup = (event) => {
|
||||
// 松开鼠标，结束移动
|
||||
document.onmousemove = () => {
|
||||
}
|
||||
document.body.style.cursor = "auto"
|
||||
this.setState({
|
||||
cursor: 'auto'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// document.documentElement.scrollLeft = (document.documentElement.scrollWidth - document.documentElement.clientWidth) / 2
|
||||
|
||||
showParent = (node) => {
|
||||
if(!node){
|
||||
return
|
||||
}
|
||||
this.state.orgTree.forEach(item=>{
|
||||
this.findChildrenShow(item,node)
|
||||
})
|
||||
this.setState({
|
||||
orgTree:[...this.state.orgTree]
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
findChildrenShow = (node,children)=>{
|
||||
let childrenIndex = node.children.findIndex(item=>item.id === children.id)
|
||||
if(childrenIndex === -1){
|
||||
// 没有找到
|
||||
node.children.forEach(item=>{
|
||||
item.show = 0
|
||||
this.findChildrenShow(item,node)
|
||||
})
|
||||
}else {
|
||||
node.children.forEach((item,index)=>{
|
||||
if(index !== childrenIndex){
|
||||
item.show = 0
|
||||
}else {
|
||||
item.show = 1
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
hiddenParent = (node) => {
|
||||
console.log("hidden", node)
|
||||
}
|
||||
amplification = () => {
|
||||
let scale = parseFloat(this.state.scale) + 0.05
|
||||
this.setState({scale})
|
||||
}
|
||||
|
||||
narrow = () => {
|
||||
let scale = parseFloat(this.state.scale) - 0.05
|
||||
if (scale <= 0) {
|
||||
scale = 0.05
|
||||
}
|
||||
this.setState({scale})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="functional-container">
|
||||
<i title="Reduce" className="cus_iconfont icon-suoxiao"
|
||||
onClick={this.narrow}></i>
|
||||
<span>{parseInt(this.state.scale * 100)}%</span>
|
||||
<i title="Enlarge" className="cus_iconfont icon-fangda1"
|
||||
onClick={this.amplification}></i>
|
||||
<i title="Reset" className="cus_iconfont icon-zhongzhi"
|
||||
onClick={() => this.setState({scale: 1, left: 0, top: 0})}></i>
|
||||
</div>
|
||||
<div className="App" id="org-chart-container"
|
||||
onMouseDown={this.mouseDown}
|
||||
style={{
|
||||
left: this.state.left + "px", top: this.state.top + "px",
|
||||
transform: 'scale(' + this.state.scale + ')', cursor: this.state.cursor
|
||||
}}
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
{
|
||||
this.state.orgTree.map(item => {
|
||||
return <OrgChart key={item.name} data={item}
|
||||
showParent={this.showParent}
|
||||
hiddenParent={this.hiddenParent}
|
||||
getChartNode={this.getChartNoe}></OrgChart>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,182 @@
|
|||
import {Component, Fragment} from 'react'
|
||||
// import {OrgChartNode} from "./OrgChartNode";
|
||||
import "../css/index.css"
|
||||
|
||||
export class OrgChart extends Component {
|
||||
|
||||
state = {
|
||||
marginTop: 0,
|
||||
orgChildren: ""
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {...this.state, ...props}
|
||||
}
|
||||
|
||||
showOrHidden = (node) => {
|
||||
if (node.showChildren === 0) {
|
||||
this.showChildren(node)
|
||||
} else {
|
||||
this.hiddenChildren((node))
|
||||
}
|
||||
}
|
||||
|
||||
showChildren = (node) => {
|
||||
node.showChildren = 1
|
||||
this.setState({
|
||||
data: {...this.state.data}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
hiddenChildren = (node) => {
|
||||
this.setState({
|
||||
orgChildren: "hidden-org-children"
|
||||
})
|
||||
setTimeout(() => {
|
||||
node.showChildren = 0
|
||||
this.hiddenChildrenStack(node)
|
||||
this.setState({
|
||||
data: {...this.state.data},
|
||||
orgChildren: "",
|
||||
})
|
||||
}, 300)
|
||||
}
|
||||
|
||||
hiddenChildrenStack = (node)=>{
|
||||
if(!node.children || node.children.length === 0){
|
||||
return
|
||||
}
|
||||
node.children.forEach(item=>{
|
||||
item.showChildren = 0
|
||||
this.hiddenChildrenStack(item)
|
||||
})
|
||||
}
|
||||
|
||||
getOrgChartNode = (node) => {
|
||||
return <Fragment>
|
||||
<div className="org-chart-item">
|
||||
{
|
||||
node.isRoot ? "" : (this.props.parent && this.props.parent.show && this.props.parent.show === 1 ?
|
||||
<i className="hidden-parent-icon cus_iconfont icon-zhankai_mian"
|
||||
onClick={()=>this.props.hiddenParent(this.props.parent)}></i>
|
||||
:
|
||||
<i className="show-parent-icon cus_iconfont icon-zhankai_mian"
|
||||
onClick={()=>this.props.showParent(this.props.parent)}></i>)
|
||||
}
|
||||
{this.state.getChartNode(node)}
|
||||
{/*{*/}
|
||||
{/* node.children && node.children.length > 0 ? (node.showChildren === 0 ?*/}
|
||||
{/* <i className="expansion-icon show-icon cus_iconfont icon-zhankai_mian"*/}
|
||||
{/* onClick={()=>this.showChildren(node)}>*/}
|
||||
{/* </i>*/}
|
||||
{/* :*/}
|
||||
{/* <i className="expansion-icon hidden-icon cus_iconfont icon-zhankai_mian"*/}
|
||||
{/* onClick={()=>this.hiddenChildren(node)}>*/}
|
||||
{/* </i>) : ""*/}
|
||||
{/*}*/}
|
||||
{
|
||||
node.children && node.children.length > 0 ? <i
|
||||
className="show-or-hidden cus_iconfont icon-zhankai"
|
||||
onClick={() => {
|
||||
this.showOrHidden(node)
|
||||
}}
|
||||
></i> : ""
|
||||
}
|
||||
</div>
|
||||
</Fragment>
|
||||
// return this.props.getChartNode(node)
|
||||
}
|
||||
|
||||
getOrgItem = (parent) => {
|
||||
let getChartNode = this.state.getChartNode
|
||||
let node = this.state.data
|
||||
if (node.children && node.children.length > 0) {
|
||||
return (
|
||||
<div className="org-root">
|
||||
<div className="org-chart-node "
|
||||
onMouseOver={() => this.setState({marginTop: 2})}
|
||||
onMouseOut={() => this.setState({marginTop: 0})}
|
||||
>
|
||||
{
|
||||
this.getOrgChartNode(node)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
node.showChildren === 1 ? <Fragment>
|
||||
<div className="line bottom-down-line" style={{
|
||||
marginTop: this.state.marginTop + "px"
|
||||
}}></div>
|
||||
<div className={'org-children-chart ' + this.state.orgChildren} ref="orgChildren">
|
||||
|
||||
{
|
||||
node.children.length === 1 ?
|
||||
<OrgChart key={node.children[0].name} data={node.children[0]}
|
||||
getChartNode={getChartNode}
|
||||
parent={node}
|
||||
showParent={this.props.showParent}
|
||||
hiddenParent={this.props.hiddenParent}
|
||||
lineClass="line"
|
||||
></OrgChart>
|
||||
|
||||
: node.children.map((item, index) => {
|
||||
if (index === 0) {
|
||||
return <OrgChart key={item.name} data={item}
|
||||
getChartNode={getChartNode}
|
||||
parent={node}
|
||||
showParent={this.props.showParent}
|
||||
hiddenParent={this.props.hiddenParent}
|
||||
lineClass="line right-row-line"
|
||||
></OrgChart>
|
||||
}
|
||||
if (index === node.children.length - 1) {
|
||||
return <OrgChart key={item.name}
|
||||
getChartNode={getChartNode}
|
||||
parent={node}
|
||||
showParent={this.props.showParent}
|
||||
hiddenParent={this.props.hiddenParent}
|
||||
data={item} lineClass="line left-row-line"
|
||||
></OrgChart>
|
||||
}
|
||||
return <OrgChart key={item.name}
|
||||
getChartNode={getChartNode}
|
||||
parent={node}
|
||||
showParent={this.props.showParent}
|
||||
hiddenParent={this.props.hiddenParent}
|
||||
data={item} lineClass="line row-line"
|
||||
></OrgChart>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</Fragment> : ""
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return this.getOrgChartNode(node)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
{
|
||||
this.state.lineClass ?
|
||||
<div className="org-chart-node">
|
||||
<div className={this.state.lineClass}
|
||||
></div>
|
||||
<div className="line top-down-line"
|
||||
></div>
|
||||
{
|
||||
this.getOrgItem(this.props.parent)
|
||||
}
|
||||
</div>
|
||||
: <div className="org-chart-root">{this.getOrgItem(this.props.parent)}</div>
|
||||
}
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import {Component, Fragment} from 'react'
|
||||
import {OrgChart} from "./OrgChart";
|
||||
|
||||
export class OrgChartItem extends Component {
|
||||
|
||||
getHasChildrenItem = (node) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="children-container">
|
||||
{
|
||||
node.children.map(item=>{
|
||||
return <OrgChart data={item}></OrgChart>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
getRenderItem = (node) => {
|
||||
if (node.children || node.children.length > 0) {
|
||||
// 存在下一等级
|
||||
return this.getHasChildrenItem(node)
|
||||
}else {
|
||||
return (
|
||||
<Fragment>
|
||||
{
|
||||
this.props.getOrgChartNode(node)
|
||||
}
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.props)
|
||||
return (
|
||||
<Fragment>
|
||||
{
|
||||
this.getRenderItem(this.props.node)
|
||||
}
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
import {Component, Fragment} from 'react'
|
||||
import '../css/node.css'
|
||||
|
||||
export class OrgChartNode extends Component {
|
||||
|
||||
|
||||
render() {
|
||||
let node = this.props.node
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="org-chart-node-item">
|
||||
<div className="node-container">
|
||||
<div className="avatar-container"
|
||||
style={{
|
||||
background: `url('${node.avatar}') 0 0 no-repeat`,
|
||||
backgroundSize: '100px'
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
<img className="logo" alt="logo" src="/logo.png"/>
|
||||
<div className="down-level-type">
|
||||
<div className="people-type">
|
||||
{
|
||||
node.type === 1 ? <svg t="1668760028325" className="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="2400" width="8" height="8">
|
||||
<path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
|
||||
fill="#666666" p-id="2401"></path>
|
||||
</svg> :
|
||||
<svg t="1668760028325" className="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="2400" width="8" height="8">
|
||||
<path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
|
||||
fill="#C32929" p-id="2401"></path>
|
||||
</svg>
|
||||
}
|
||||
</div>
|
||||
<div className="down-level">
|
||||
<svg t="1668760400394" className="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="927" width="15" height="15">
|
||||
<path
|
||||
d="M384.085333 384m-170.666666 0a170.666667 170.666667 0 1 0 341.333333 0 170.666667 170.666667 0 1 0-341.333333 0Z"
|
||||
fill="#666666" p-id="928"></path>
|
||||
<path d="M341.333333 597.333333h85.333334a256 256 0 0 1 256 256H85.333333a256 256 0 0 1 256-256z"
|
||||
fill="#666666" p-id="929"></path>
|
||||
<path
|
||||
d="M682.752 597.333333a256 256 0 0 1 255.786667 246.4l0.213333 9.6H725.333333a298.410667 298.410667 0 0 0-144-255.530666c5.290667-0.298667 10.666667-0.469333 16.085334-0.469334h85.333333z m-85.333333-384A170.666667 170.666667 0 1 1 529.066667 540.458667 212.650667 212.650667 0 0 0 597.418667 384a212.736 212.736 0 0 0-68.266667-156.416A169.216 169.216 0 0 1 597.418667 213.333333z"
|
||||
fill="#666666" p-id="930"></path>
|
||||
</svg>
|
||||
<span>{node.downLevel}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content-container">
|
||||
<div className="name">
|
||||
{node.name}
|
||||
</div>
|
||||
<div className="department-job-container">
|
||||
<div className="title">
|
||||
DEPARTMENT
|
||||
</div>
|
||||
<div className="content">
|
||||
{node.department}
|
||||
</div>
|
||||
</div>
|
||||
<div className="department-job-container">
|
||||
<div className="title">
|
||||
JOB
|
||||
</div>
|
||||
<div className="content">
|
||||
{node.department}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
|
||||
body{
|
||||
-moz-user-select:none; /*火狐*/
|
||||
-webkit-user-select:none; /*webkit浏览器*/
|
||||
-ms-user-select:none; /*IE10*/
|
||||
-khtml-user-select:none; /*早期浏览器*/
|
||||
user-select:none;
|
||||
/*cursor: move;*/
|
||||
}
|
||||
|
||||
#org-chart-container{
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
transform-origin: left center;
|
||||
}
|
||||
#org-chart-container .org-root{
|
||||
transition: height 0.3s;
|
||||
}
|
||||
.functional-container{
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 99;
|
||||
background-color:rgba(255,255,255,0.8);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 5px 1px #f1f1f1;
|
||||
}
|
||||
.functional-container .cus_iconfont{
|
||||
font-size: 25px;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
line-height: 0 !important;
|
||||
}
|
||||
|
||||
.functional-container>span{
|
||||
margin: 0 5px;
|
||||
color: #666;
|
||||
}
|
||||
.functional-container .cus_iconfont:hover{
|
||||
color: #C32929;
|
||||
}
|
||||
|
||||
|
||||
#org-chart-container .org-children-chart{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
animation: 0.3s children-show;
|
||||
opacity: 1;
|
||||
transition: 0.3s all;
|
||||
/*margin-top: -20px;*/
|
||||
}
|
||||
|
||||
#org-chart-container .org-children-chart.hidden-org-children{
|
||||
animation: 0.4s children-hidden;
|
||||
}
|
||||
|
||||
|
||||
@keyframes children-hidden {
|
||||
0%{
|
||||
overflow: hidden;
|
||||
}
|
||||
70%{
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
to{
|
||||
margin-top: -50px;
|
||||
z-index: -1;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes children-show {
|
||||
from{
|
||||
opacity: 0;
|
||||
margin-top: -50px;
|
||||
}
|
||||
to{
|
||||
margin-top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#org-chart-container .line{
|
||||
line-height: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
#org-chart-container .org-chart-node {
|
||||
display: inline-block;
|
||||
/*line-height: 0;*/
|
||||
/*position: relative;*/
|
||||
/*left: 50%;*/
|
||||
/*transform: translateX(-50%);*/
|
||||
}
|
||||
#org-chart-container .org-chart-root{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#org-chart-container .bottom-down-line{
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: #C32929;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
#org-chart-container .right-row-line{
|
||||
height: 2px;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
background-color: #C32929;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
#org-chart-container .left-row-line{
|
||||
height: 2px;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
background-color: #C32929;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
#org-chart-container .row-line{
|
||||
height: 2px;
|
||||
position: relative;
|
||||
left: 0;
|
||||
background-color: #C32929;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
#org-chart-container .top-down-line{
|
||||
height: 20px;
|
||||
width: 2px;
|
||||
background-color: #C32929;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
|
||||
#org-chart-container .org-chart-item{
|
||||
position: relative;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
#org-chart-container .org-chart-item:hover{
|
||||
transition: all 0.3s;
|
||||
/*transform: scale(0.975);*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#org-chart-container .org-chart-item .hidden-icon{
|
||||
transform: translateX(-50%) rotateZ(180deg) !important;
|
||||
display: inline-block;
|
||||
}
|
||||
#org-chart-container .org-chart-item .show-parent-icon{
|
||||
transform: rotateZ(180deg);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#org-chart-container .org-chart-item .expansion-icon{
|
||||
position: absolute;
|
||||
bottom: -16px;
|
||||
font-size: 25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
color: #C32929;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
#org-chart-container .org-chart-item:hover .expansion-icon{
|
||||
display: inline-block;
|
||||
}
|
||||
#org-chart-container .org-chart-item .expansion-icon:hover{
|
||||
color: #C32929;
|
||||
transform: translateX(-50%);
|
||||
font-size: 30px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
#org-chart-container .org-chart-item .show-or-hidden{
|
||||
color: #C32929;
|
||||
font-size: 31px;
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
transform: translateX(-50%);
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
#org-chart-container .org-chart-item:hover .show-or-hidden{
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
bottom: -17px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
#org-chart-container .org-chart-item .show-or-hidden:hover{
|
||||
transform: translateX(-50%) scale(1.125);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
|
||||
.node-container{
|
||||
width: 160px;
|
||||
border: 1px #C32929 solid;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
margin: 50px 15px 0px 15px;
|
||||
font-size: 10px;
|
||||
padding: 10px 10px 20px 10px;
|
||||
height: 100%;
|
||||
animation: 0.6s show;
|
||||
}
|
||||
|
||||
.org-chart-node-item{
|
||||
overflow: hidden;
|
||||
margin: 0 0 -3px 0;
|
||||
}
|
||||
.node-container .content-container{
|
||||
animation: 0.5s show-content;
|
||||
}
|
||||
|
||||
@keyframes show-content {
|
||||
from{
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
90%{
|
||||
overflow: hidden;
|
||||
}
|
||||
to{
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-org-children .node-container{
|
||||
animation: 0.6s hidden;
|
||||
}
|
||||
|
||||
.hidden-org-children .node-container .content-container{
|
||||
animation: 0.6s hidden-content;
|
||||
}
|
||||
|
||||
@keyframes hidden-content {
|
||||
0%{
|
||||
overflow: hidden;
|
||||
}
|
||||
to{
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
@keyframes hidden {
|
||||
to{
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
from{
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
}
|
||||
to{
|
||||
width: 160px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.node-container .avatar-container{
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -50px;
|
||||
transform: translateX(-50%);
|
||||
border: 1px #C32929 solid;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.node-container .logo{
|
||||
position: absolute;
|
||||
left: calc(50% + 2px);
|
||||
transform: translateX(-50%);
|
||||
z-index: 10;
|
||||
top: 42px;
|
||||
}
|
||||
|
||||
.node-container .down-level-type{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.node-container .down-level-type .down-level{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.node-container .name{
|
||||
margin-top: 35px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.node-container .department-job-container{
|
||||
margin-top: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.node-container .department-job-container .title{
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.node-container .department-job-container .title::before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 13px;
|
||||
background-color: #C32929;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.node-container .department-job-container .content{
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
color: #666;
|
||||
transform: scale(0.8);
|
||||
width: 125%;
|
||||
transform-origin:center left;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
@font-face {
|
||||
font-family: "cus_iconfont"; /* Project id 3778032 */
|
||||
src: url('iconfont.woff2?t=1669465666296') format('woff2'),
|
||||
url('iconfont.woff?t=1669465666296') format('woff'),
|
||||
url('iconfont.ttf?t=1669465666296') format('truetype');
|
||||
}
|
||||
|
||||
.cus_iconfont {
|
||||
font-family: "cus_iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-fangda1:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
.icon-zhongzhi:before {
|
||||
content: "\e613";
|
||||
}
|
||||
|
||||
.icon-fangda:before {
|
||||
content: "\e60f";
|
||||
}
|
||||
|
||||
.icon-24gf-shrinkVertical2:before {
|
||||
content: "\eb78";
|
||||
}
|
||||
|
||||
.icon-24gf-shrinkHorizontal2:before {
|
||||
content: "\eb79";
|
||||
}
|
||||
|
||||
.icon-suoxiao:before {
|
||||
content: "\e612";
|
||||
}
|
||||
|
||||
.icon-zhankai_mian:before {
|
||||
content: "\e639";
|
||||
}
|
||||
|
||||
.icon-zhankai-mian:before {
|
||||
content: "\e60e";
|
||||
}
|
||||
|
||||
.icon-yuandian:before {
|
||||
content: "\e683";
|
||||
}
|
||||
|
||||
.icon-zhankai:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
|
||||
.icon-bjxxjr:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-qunzu:before {
|
||||
content: "\e6da";
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue