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

01

Browse Source
This commit is contained in:
clay
2022-01-14 22:07:22 +08:00
parent 05e116af0d
commit 5356c8b948
11 changed files with 529 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/views/content/components/Introduction.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<div class="Introduction">
<el-row>
<el-col>
<div class="tab">
<router-link to="/">首页</router-link>
<span> > </span>
<router-link to="">学院概况</router-link>
<span> > </span>
<span style="color: #1956BC;font-size: 1.4rem">学院简介</span>
</div>
<div class="context">
<div class="title">{{value.title}}</div>
<div class="text" v-html="value.content"></div>
</div>
<!-- {{value}}-->
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "Introduction",
props: {
value: {
type: String,
default: "",
},
}
}
</script>
<style scoped lang="scss">
.Introduction{
width: 100%;
}
.tab {
margin-left: 1.9rem;
margin-top: 1.5rem;
font-weight: 400;
font-size: 1.4rem !important;
}
.context {
margin: 3rem 4rem;
.title {
font-size: 2.4rem;
font-weight: 500;
color: #1956BC;
text-align: center;
}
.text {
width: 100%;
margin-top: 2rem;
font-size: 1.2rem;
font-weight: 400;
color: #3C3C3C;word-break: break-word; /* 文本行的任意字内断开 */
word-wrap: break-word; /* IE */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
pre{
width: 100%;
}
}
}
</style>

13
src/views/content/components/new_list.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: "new_list"
}
</script>
<style scoped>
</style>

246
src/views/content/index.vue Normal file
View File

@@ -0,0 +1,246 @@
<template>
<div class="content">
<el-row>
<el-col :span="24">
<!--首页图片-->
<div class="top">
<img src="@/assets/school_profile/bj123.png" alt="">
</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 v-show="width>=992" :md="6" :lg="6" :xl="4">
<div class="left_lab" ref="lab">
<div class="lab">
<div v-for="(nav,index) in navList" class="lab_div">
<div v-if="index === showIndex" class="lab_list lab_select" @click="navClick(nav,index)">
<div class="lab_img">
<img src="@/assets/school_profile/eji_icon_xz.png" alt="">
</div>
<div class="lab_title">
{{ nav.title }}
</div>
</div>
<div v-if="index !== showIndex" class="lab_list" @click="navClick(nav,index)">
<div class="lab_img">
<img src="@/assets/school_profile/eji_icon_xz.png" alt="">
</div>
<div class="lab_title">
{{ nav.title }}
</div>
</div>
</div>
<!-- <div class="lab_list">-->
<!-- <div class="lab_img">-->
<!-- <img src="@/assets/school_profile/eji_icon_xz.png" alt="">-->
<!-- </div>-->
<!-- <div class="lab_title">-->
<!-- 学院领导-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="lab_list">-->
<!-- <div class="lab_img">-->
<!-- <img src="@/assets/school_profile/eji_icon_xz.png" alt="">-->
<!-- </div>-->
<!-- <div class="lab_title">-->
<!-- 机构设置-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="lab_list">-->
<!-- <div class="lab_img">-->
<!-- <img src="@/assets/school_profile/eji_icon_xz.png" alt="">-->
<!-- </div>-->
<!-- <div class="lab_title">-->
<!-- 院长致辞-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</el-col>
<el-col :xs="20" :sm="20" :md="15" :lg="14" :xl="12">
<Introduction :value="contextData" v-if="type == 1"/>
</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} from "@/api";
import Introduction from './components/Introduction.vue'
export default {
name: "index",
components:{
Introduction,
},
data() {
return {
width: document.documentElement.clientWidth,
navId: null,
navList: [],
showIndex: 0,
contextData:{},
type:1,
}
},
watch: {
$route(to, from) {
console.log(to.path);
}
},
created() {
this.navId = this.$route.params && this.$route.params.navId;
this.navList = []
getNode({id: this.navId}).then(res => {
console.log(res)
this.navList = res.data
this.$refs.lab.style.height = this.navList.length*8 + 8 +'rem'
this.getContent(this.navList[0])
})
},
methods: {
getContent(menu) {
getNode({id: menu.encodeId}).then(res => {
console.log(res)
this.contextData = res.data
})
},
navClick(nav,index){
console.log(index,index != this.showIndex,this.showIndex)
if (index != this.showIndex){
this.showIndex = index
console.log(nav)
this.type = nav.type
this.getContent(nav)
}
}
},
}
</script>
<style scoped lang="scss">
.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;
}
}
}
}
@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>