|
@@ -1,7 +1,26 @@
|
|
|
<template>
|
|
|
<ul :class="{'double': isHaveChild(dataArray)}">
|
|
|
- <li v-for="(item, index) in dataArray" :key="index" v-if="!item.level">
|
|
|
- <div class="branch-box" @click.prevent="clickHandle(item)">
|
|
|
+ <li v-for="(item, index) in dataArray" :key="index" v-if="!item.level" :class="[{
|
|
|
+ 'liequal': item.post.trim()==='EHS督导'},{
|
|
|
+ 'litop': item.post.trim()==='装置经理'
|
|
|
+ }]">
|
|
|
+ <div class="branch-box" @click.prevent="clickHandle(item)" v-if="item.post.trim() !== 'EHS督导'">
|
|
|
+ <div class="branch-title">{{item.post}}</div>
|
|
|
+ <img class="branch-pic" :src=item.img>
|
|
|
+ <div class="branch-name">{{item.label}}</div>
|
|
|
+ <div class="bz-box">
|
|
|
+ <i v-if="item.bz1" class="iconfont icon-star"></i>
|
|
|
+ <i v-if="item.bz2" class="iconfont icon-love"></i>
|
|
|
+ <i v-if="item.bz3" class="iconfont icon-triangle"></i>
|
|
|
+ <i v-if="item.bz4" class="iconfont icon-square"></i>
|
|
|
+ <i v-if="item.bz5" class="iconfont icon-plus"></i>
|
|
|
+ <i v-if="item.bz6" class="iconfont icon-round"></i>
|
|
|
+ <i v-if="item.bz7" class="iconfont icon-yuanjiaoliujiaoxing"></i>
|
|
|
+ <i v-if="item.bz8" class="iconfont icon-shebeitubiao_famen"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 平级 -->
|
|
|
+ <div class="branch-box" :class="item.post.trim() === 'EHS督导' ? 'equal':''" @click.prevent="clickHandle(item)" v-if="item.post.trim() === 'EHS督导'">
|
|
|
<div class="branch-title">{{item.post}}</div>
|
|
|
<img class="branch-pic" :src=item.img>
|
|
|
<div class="branch-name">{{item.label}}</div>
|
|
@@ -80,6 +99,7 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
</template>
|
|
|
+ <div></div>
|
|
|
<template v-if="item.children && item.children.length>0">
|
|
|
<branch :dataArray="item.children" :count="currentCount"></branch>
|
|
|
</template>
|
|
@@ -137,6 +157,19 @@ export default {
|
|
|
ul,li{
|
|
|
list-style: none;
|
|
|
}
|
|
|
+ li.liequal{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: 190px;
|
|
|
+ &:before{
|
|
|
+ content: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li.litop{
|
|
|
+ &:after{
|
|
|
+ content: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
.branch-box{
|
|
|
width: 172px;
|
|
|
min-height: 180px;
|
|
@@ -149,6 +182,20 @@ export default {
|
|
|
margin-right: 10px;
|
|
|
padding-bottom: 8px;
|
|
|
position: relative;
|
|
|
+ &.equal{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ //top: calc(-100% + 20px);
|
|
|
+ &:before{
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ height: 1px;
|
|
|
+ width: 112px;
|
|
|
+ top: 50%;
|
|
|
+ left: -114px;
|
|
|
+ border-top: 1px dashed #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.branch-box .branch-title{
|
|
|
background-color: #2E6491;
|
|
@@ -173,6 +220,7 @@ export default {
|
|
|
font-weight: bold;
|
|
|
padding: 4px 10px;
|
|
|
}
|
|
|
+
|
|
|
ul{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|