odjbin/sist_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
clay
2022-01-16 21:14:30 +08:00
parent 8e9cf7b833
commit b7897ba20e
18 changed files with 799 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
src/views/mobile/index.vue Normal file
View File

@@ -0,0 +1,294 @@
<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 :value="contextData" v-if="type == 1"/>
<List :value="contextData" v-if="type == 2"/>
<DireData :value="contextData" v-if="type == 3"/>
<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 DireData from '@/views/content/components/dire_data.vue'
import Details from '@/views/content/components/details.vue'
import {handleTree} from "@/utils/ebts";
import {getParentNode} from "@/utils/sist";
export default {
name: "index",
components: {
Introduction,
List,
DireData,
Details,
},
data() {
return {
width: document.documentElement.clientWidth,
navId: null,
navList: [],
showIndex: 0,
contextData: {},
type: 0,
bgImage: null,
crumbs: {
"two": {
"title": "学院领导",
},
"one": {
"title": "学院概况",
}
},
menuData: {},
detailsData: {}
}
},
watch: {
$route(to, from) {
let arcId = this.$route.params && this.$route.query.id
console.log(arcId)
if (arcId != undefined) {
this.getContext(arcId)
} else {
this.secondId = this.$route.params && this.$route.params.secondId;
this.navId = this.$route.params && this.$route.params.navId;
this.menuData = getParentNode(this.navId)
this.getContent()
}
}
},
created() {
this.secondId = this.$route.params && this.$route.params.secondId;
this.navId = this.$route.params && this.$route.params.navId;
this.menuData = getParentNode(this.navId)
crumbs(this.secondId).then(res => {
this.crumbs = res.data
})
let arcId = this.$route.params && this.$route.query.id
if (arcId != undefined) {
this.getContext(arcId)
} else {
this.getContent()
}
},
methods: {
getContext(arcId) {
article(arcId).then(res => {
console.log(res);
this.detailsData = res.data.data
this.type = null
})
},
getContent() {
let menu = this.menuData.three
this.type = menu.type
this.contextData = null
this.bgImage = menu.link
let data = null
if (this.type == 2) {
data = {
id: menu.encodeId,
pageNum: 1,
pageSize: 4
}
} else {
data = {
id: menu.encodeId,
}
}
getNode(data).then(res => {
if (this.type == 2) {
this.contextData = {
data: res.rows,
total: res.total,
pageNum: data.pageNum,
navId: this.navId,
secondId: this.secondId,
}
} else if (this.type == 1) {
this.contextData = res.data
} else if (this.type == 3) {
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;
}
.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>