405 lines
10 KiB
Vue
405 lines
10 KiB
Vue
<template>
|
|
<div class="mobile">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<!--首页图片-->
|
|
<div class="top">
|
|
<span v-if="bgImage != null">
|
|
<img :src="bgImage" alt="">
|
|
</span>
|
|
<span v-if="bgImage == null">
|
|
<img src="@/assets/school_profile/bj123.png" alt="">
|
|
</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<!--<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">-->
|
|
<!-- <div class="grid-content"></div>-->
|
|
<!--</el-col>-->
|
|
<el-col :span="22" :offset="1">
|
|
<el-row>
|
|
<el-col>
|
|
<div class="tab">
|
|
<router-link to="/">首页</router-link>
|
|
<span> > </span>
|
|
<router-link to="">{{ crumbs.one.title }}</router-link>
|
|
<span> > </span>
|
|
<span style="color: #1956BC;font-size: 1.4rem">{{ crumbs.two.title }}</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col>
|
|
<Introduction :introduction="contextData" v-if="type === 1"/>
|
|
<List :list="contextData" v-if="type === 2 && listDataType == 0"/>
|
|
<SimpleList :list="contextData" v-if="type === 2 && listDataType == 1"/>
|
|
<FileList :value="contextData" v-if="type === 4"/>
|
|
<DireData :value="contextData" v-if="type === 3 && dreDataType == '1'"/>
|
|
<DireDataTow :value="contextData" v-if="type === 3 && dreDataType == '2'"/>
|
|
<Details :value="detailsData" v-if="type == null"/>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
</el-col>
|
|
<!--<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">-->
|
|
<!-- <div class="grid-content"></div>-->
|
|
<!--</el-col>-->
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getNode, crumbs, article} from "@/api";
|
|
import Introduction from '@/views/content/components/Introduction.vue'
|
|
import List from '@/views/content/components/list.vue'
|
|
import SimpleList from '@/views/content/components/simple_list.vue'
|
|
import DireData from '@/views/content/components/dire_data.vue'
|
|
import DireDataTow from '@/views/content/components/dire_data_tow.vue'
|
|
import Details from '@/views/content/components/details.vue'
|
|
import FileList from '@/views/content/components/file_list.vue'
|
|
import {handleTree} from "@/utils/ebts";
|
|
import {getParentNode, setLanguage, getNodeMenu} from "@/utils/sist";
|
|
|
|
export default {
|
|
name: "index",
|
|
components: {
|
|
Introduction,
|
|
List,
|
|
DireData,
|
|
Details,
|
|
FileList,
|
|
DireDataTow,
|
|
SimpleList,
|
|
},
|
|
data() {
|
|
return {
|
|
width: document.documentElement.clientWidth,
|
|
navId: null,
|
|
dreDataType: "1",
|
|
listDataType: 0,
|
|
navList: [],
|
|
showIndex: 0,
|
|
contextData: {},
|
|
type: 0,
|
|
bgImage: null,
|
|
crumbs: {
|
|
"two": {
|
|
"title": "学院领导",
|
|
},
|
|
"one": {
|
|
"title": "学院概况",
|
|
}
|
|
},
|
|
menuData: {},
|
|
detailsData: {}
|
|
}
|
|
},
|
|
watch: {
|
|
// $route(to, from) {
|
|
// console.log(to, "路由跳转")
|
|
// this.secondId = this.$route.params && this.$route.params.secondId;
|
|
// this.navId = this.$route.params && this.$route.params.navId;
|
|
// let arcId = this.$route.query && this.$route.query.id
|
|
// this.type = this.$route.query && this.$route.query.type
|
|
// this.getCrumbs()
|
|
// if (this.type != null&&this.type!=0){
|
|
// console.log(111,this.navId)
|
|
// let info = getNodeMenu(this.navId);
|
|
// if (arcId != undefined) {
|
|
// this.getContext(arcId)
|
|
// } else {
|
|
// this.getContent(info)
|
|
// }
|
|
// return
|
|
// }
|
|
// if (arcId != undefined) {
|
|
// this.getContext(arcId)
|
|
// } else {
|
|
// this.menuData = getParentNode(this.navId)
|
|
// console.log(this.menuData, "menuData")
|
|
// this.getContent(this.menuData.three)
|
|
// }
|
|
// }
|
|
$route(to, from) {
|
|
console.log(to, "路由跳转")
|
|
this.secondId = this.$route.params && this.$route.params.secondId;
|
|
this.navId = this.$route.params && this.$route.params.navId;
|
|
let arcId = this.$route.query && this.$route.query.id
|
|
this.type = this.$route.query && this.$route.query.type
|
|
this.getCrumbs()
|
|
if (this.type != null && this.type != 0) {
|
|
//当三级菜单id没有是,使用二级
|
|
if (arcId != undefined) {
|
|
console.log("getContext")
|
|
this.getContext(arcId)
|
|
return;
|
|
}
|
|
let info = null;
|
|
if (this.navId == null) {
|
|
console.log("1")
|
|
info = getParentNode(this.secondId);
|
|
this.getContent(info.second)
|
|
|
|
} else {
|
|
console.log("2")
|
|
info = getParentNode(this.navId)
|
|
this.getContent(info.three)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
setLanguage(this)
|
|
this.secondId = this.$route.params && this.$route.params.secondId;
|
|
this.navId = this.$route.params && this.$route.params.navId;
|
|
this.type = this.$route.query && this.$route.query.type
|
|
setTimeout(() => {
|
|
this.init()
|
|
}, 200);
|
|
},
|
|
methods: {
|
|
init() {
|
|
let arcId = this.$route.params && this.$route.query.id
|
|
this.getCrumbs()
|
|
if (this.type != null && this.type != 0) {
|
|
//当三级菜单id没有是,使用二级
|
|
if (arcId != undefined) {
|
|
console.log("getContext")
|
|
this.getContext(arcId)
|
|
return;
|
|
}
|
|
let info = null;
|
|
if (this.navId == null) {
|
|
console.log("1")
|
|
info = getParentNode(this.secondId);
|
|
this.getContent(info.second)
|
|
} else {
|
|
console.log("2")
|
|
info = getParentNode(this.navId)
|
|
this.getContent(info.three)
|
|
}
|
|
//this.showSecond = false
|
|
// let info = null
|
|
// info = getParentNode(this.secondId);
|
|
// if (info == null) {
|
|
// location.reload();
|
|
// }
|
|
// let arcId = this.$route.query && this.$route.query.id
|
|
// if (arcId != undefined) {
|
|
// this.getContext(arcId)
|
|
// } else {
|
|
// this.getContent(this.menuData.three)
|
|
// }
|
|
// return
|
|
}
|
|
// let arcId = this.$route.params && this.$route.query.id
|
|
// if (arcId != undefined) {
|
|
// this.getContext(arcId)
|
|
// } else {
|
|
// console.log(this.menuData, "menuData")
|
|
// this.getContent(this.menuData.three)
|
|
// }
|
|
},
|
|
/**
|
|
* 获得面包屑导航
|
|
*/
|
|
getCrumbs() {
|
|
crumbs(this.secondId).then(res => {
|
|
this.crumbs = res.data
|
|
})
|
|
},
|
|
|
|
getContext(arcId) {
|
|
article(arcId).then(res => {
|
|
console.log(res);
|
|
this.detailsData = res.data.data
|
|
this.type = null
|
|
})
|
|
},
|
|
getContent(menu) {
|
|
console.log(menu)
|
|
// let menu = this.menuData.three
|
|
this.type = menu.type
|
|
this.contextData = null
|
|
this.bgImage = menu.link
|
|
let data = null
|
|
if (this.type === 2 || this.type === 4) {
|
|
data = {
|
|
id: menu.encodeId,
|
|
pageNum: 1,
|
|
pageSize: 5
|
|
}
|
|
this.listDataType = 0
|
|
if (this.type === 4||menu.isSimple == 1) {
|
|
data.pageSize = 20
|
|
this.listDataType = 1
|
|
}
|
|
} else {
|
|
data = {
|
|
id: menu.encodeId,
|
|
}
|
|
}
|
|
getNode(data).then(res => {
|
|
if (this.type === 2 || this.type === 4) {
|
|
this.contextData = {
|
|
data: res.rows,
|
|
total: res.total,
|
|
pageNum: data.pageNum,
|
|
pageSize: data.pageSize,
|
|
navId: this.navId,
|
|
secondId: this.secondId,
|
|
}
|
|
} else if (this.type == 1) {
|
|
this.contextData = res.data
|
|
} else if (this.type == 3) {
|
|
if (res.additional == "") {
|
|
this.dreDataType = "1"
|
|
} else {
|
|
this.dreDataType = res.additional
|
|
}
|
|
this.contextData = handleTree(res.data, "id", "pid", null, null)
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.top {
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.left_lab {
|
|
margin-left: 4rem;
|
|
width: 22rem;
|
|
height: 48rem;
|
|
background: #1956BC;
|
|
border-radius: 0rem 0rem 2rem 0rem;
|
|
position: relative;
|
|
|
|
.lab {
|
|
font-size: 1.6rem;
|
|
position: absolute;
|
|
left: 4.8rem;
|
|
top: 5rem;
|
|
width: 19rem;
|
|
margin-bottom: 3rem;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(6, 42, 102, 0.67);
|
|
border-radius: 0rem 0rem 2.5rem 2rem;
|
|
|
|
.lab_list:last-child {
|
|
border: none;
|
|
}
|
|
|
|
.lab_div {
|
|
border-bottom: 0.1rem solid #94BCFF !important;
|
|
//margin-left: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.lab_div:last-child {
|
|
border-bottom: none !important;
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
.lab_list {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
width: 18rem;
|
|
height: 8rem;
|
|
clear: left;
|
|
line-height: 8rem;
|
|
|
|
.lab_img {
|
|
margin-top: .2rem;
|
|
float: left;
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
display: none;
|
|
margin-left: 4rem;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.lab_title {
|
|
color: #1956BC;
|
|
float: left;
|
|
margin-left: 6rem;
|
|
}
|
|
}
|
|
|
|
.lab_select {
|
|
background: #94BCFF;
|
|
|
|
.lab_img {
|
|
display: block;
|
|
}
|
|
|
|
.lab_title {
|
|
color: #FFFFFF;
|
|
margin-left: .4rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
margin-left: 1.9rem;
|
|
margin-top: 1.5rem;
|
|
font-weight: 400;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
font-size: 1.4rem !important;
|
|
color: #3C3C3C;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 980px) {
|
|
.left_lab {
|
|
margin-left: 3rem;
|
|
width: 16.5rem;
|
|
height: 36rem;
|
|
|
|
border-radius: 0rem 0rem 1rem 0rem;
|
|
|
|
.lab {
|
|
left: 3.6rem;
|
|
top: 3.75rem;
|
|
width: 14.25rem;
|
|
margin-bottom: 2.25rem;
|
|
border-radius: 0rem 0rem 1.2rem 1rem;
|
|
|
|
.lab_list {
|
|
margin-left: .75rem;
|
|
width: 13.5rem;
|
|
height: 6rem;
|
|
line-height: 6rem;
|
|
|
|
.lab_img {
|
|
margin-top: .1rem;
|
|
width: 1.05rem;
|
|
height: 1.05rem;
|
|
display: none;
|
|
margin-left: 3rem;
|
|
}
|
|
|
|
.lab_title {
|
|
margin-left: 1.5rem;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|