110 lines
2.2 KiB
Vue
110 lines
2.2 KiB
Vue
<template>
|
|
<div class="dire_data" style="background-color:#fff; margin-top: 3rem;">
|
|
<el-row v-for="(dire,index) in value" :key="index">
|
|
<!--正文内容-->
|
|
<el-col class="context" :span="23">
|
|
<el-row class="context_el-row">
|
|
<el-col :span="1" :offset="1">
|
|
<img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt="">
|
|
</el-col>
|
|
<el-col :span="4" class="context_name">{{ dire.name }}</el-col>
|
|
<el-col :span="16">
|
|
<hr class="context_hr">
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :offset="1" :span="22">
|
|
<div class="name" v-for="(chile,index) in dire.children" :key="index" @click="linkClick(chile)">
|
|
{{ chile.name }}
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "dire_data_tow",
|
|
data() {
|
|
return {
|
|
width: document.documentElement.clientWidth
|
|
}
|
|
},
|
|
props:{
|
|
value: {
|
|
type: Array,
|
|
default: [{
|
|
name: "学院",
|
|
children: [
|
|
{
|
|
name: "办公室",
|
|
children: [
|
|
{
|
|
children: [],
|
|
name: "人员1"
|
|
},
|
|
],
|
|
}
|
|
],
|
|
}],
|
|
},
|
|
},
|
|
methods:{
|
|
linkClick(chile){
|
|
if (chile.link){
|
|
window.open(chile.link)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.context {
|
|
margin: 3rem 2rem;
|
|
padding-bottom: 3rem;
|
|
//width: 84.3rem;
|
|
//background: #FFFFFF;
|
|
|
|
.context_el-row {
|
|
margin-top: 2rem;
|
|
|
|
.context_img {
|
|
width: 2.2rem;
|
|
}
|
|
|
|
.context_name {
|
|
font-size: 1.8rem;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #1956BC;
|
|
line-height: 2.2rem;
|
|
}
|
|
|
|
.context_hr {
|
|
line-height: 2.2rem;
|
|
margin-top: 1.1rem;
|
|
border: #1956BC solid 0.1rem;
|
|
background-color: #1956BC;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
margin-top: 2rem;
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
margin-right: 1.5rem;
|
|
cursor: pointer;
|
|
color: #000000;
|
|
}
|
|
.name:hover {
|
|
color: #1956BC;
|
|
}
|
|
}
|
|
|
|
</style>
|