maintab.vue
4.85 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<template>
<div class="coutainer box">
<div class="content roll">
<router-view ></router-view>
</div>
<footer>
<ul class="tab">
<li v-for="(item,index) in routerlink"
:key="index"
@click="handclick(item)">
<div>
<img :src="routerimg[index]" alt="">
<p >{{routername[index]}}</p>
</div>
</li>
</ul>
</footer>
</div>
</template>
<script>
import list from '@/assets/json/homecenter.json';
export default {
name: 'maintab',
watch: {
'$route':'getPath'
},
components: {},
data(){
return {
routerlink:["/master/maintab/major","/master/maintab/feature","/master/maintab/curse","/master/maintab/teacher","/master/maintab/contact"],
routername:["专业介绍","专业特色","课程设置","师资介绍","我要报名"],
routerimg:[
"http://gxbfile-gs.gaoxiaobang.com/Huixuexi/%E4%B8%93%E4%B8%9A%E4%BB%8B%E7%BB%8D-%E6%9C%AA%E9%80%89%E4%B8%AD.png",
"http://gxbfile-gs.gaoxiaobang.com/Huixuexi/%E4%B8%93%E4%B8%9A%E7%89%B9%E8%89%B2-%E6%9C%AA%E9%80%89%E4%B8%AD.png",
"http://gxbfile-gs.gaoxiaobang.com/Huixuexi/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E7%BD%AE-%E6%9C%AA%E9%80%89%E4%B8%AD.png",
"http://gxbfile-gs.gaoxiaobang.com/Huixuexi/%E5%B8%88%E8%B5%84%E4%BB%8B%E7%BB%8D-%E6%9C%AA%E9%80%89%E4%B8%AD.png",
"http://gxbfile-gs.gaoxiaobang.com/Huixuexi/%E6%88%91%E8%A6%81%E6%8A%A5%E5%90%8D-%E6%9C%AA%E9%80%89%E4%B8%AD.png"],
routeractiveimg:[
"http://gxbfile-gs.gaoxiaobang.com/Huixuexi/%E4%B8%93%E4%B8%9A%E4%BB%8B%E7%BB%8D-%E9%80%89%E4%B8%AD.png",
"http://gxbfile-gs.gaoxiaobang.com/Huixuexi/%E4%B8%93%E4%B8%9A%E7%89%B9%E8%89%B2-%E9%80%89%E4%B8%AD.png",
"http://gxbfile-gs.gaoxiaobang.com/Huixuexi/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E7%BD%AE-%E9%80%89%E4%B8%AD.png",
"http://gxbfile-gs.gaoxiaobang.com/Huixuexi/%E5%B8%88%E8%B5%84%E4%BB%8B%E7%BB%8D-%E9%80%89%E4%B8%AD.png",
"http://gxbfile-gs.gaoxiaobang.com/Huixuexi/%E6%88%91%E8%A6%81%E6%8A%A5%E5%90%8D-%E9%80%89%E4%B8%AD.png"
],
homelist: [],
index:"",
title:"",
activeindex:0,
}
},
methods: {
getPath(){
this.activeindex = this.contains(this.routerlink,this.$route.path);
for (var i = 0;i<this.routerlink.length;i++) {
if(this.activeindex == i){
$(".tab").find("li").eq(this.activeindex).find("img").attr("src",this.routeractiveimg[this.activeindex]);
$(".tab").find("li").eq(this.activeindex).find("p").css("color","#02B5B2");
}else{
$(".tab").find("li").eq(i).find("img").attr("src",this.routerimg[i]);
$(".tab").find("li").eq(i).find("p").css("color","#666");
}
}
},
handback(){
this.$router.push("/master")
},
handclick(link){
this.$share.toTop();
this.$router.push({path: link,query: {index: this.index}})
this.activeindex = this.contains(this.routerlink,link);
for (var i = 0;i<this.routerlink.length;i++) {
if(this.activeindex == i){
$(".tab").find("li").eq(this.activeindex).find("img").attr("src",this.routeractiveimg[this.activeindex]);
$(".tab").find("li").eq(this.activeindex).find("p").css("color","#02B5B2");
}else{
$(".tab").find("li").eq(i).find("img").attr("src",this.routerimg[i]);
$(".tab").find("li").eq(i).find("p").css("color","#666");
}
}
},
contains(arrays, obj) {
var i = arrays.length;
while (i--) {
if (arrays[i] === obj) {
return i;
}
}
return false;
}
},
mounted(){
$(".tab").find("li").eq(this.activeindex).find("img").attr("src",this.routeractiveimg[this.activeindex]);
$(".tab").find("li").eq(this.activeindex).find("p").css("color","#02B5B2");
},
created() {
this.homelist = list.homecenter.home;
this.index = this.$route.query.index;
this.title = this.homelist[this.index].title;
this.$router.push({
path: '/master/maintab/major',
query: {
index: this.index
}
});
// this.$share.initWx('http://yjs.huikedu.com/#/master');
this.$share.initWx('/master')
}
}
</script>
<style lang="" scoped>
.back_logo{width:.22rem;}
footer {z-index: 99;background: #ffffff;position: fixed;bottom:0;-webkit-transform: translateZ(0);width:92%;padding:0 4%;}
.box .roll{ padding-bottom:1rem;}
footer{position:fixed;bottom:0;z-index:999;}
footer .tab{ display: flex; line-height: 1rem;justify-content: space-between;}
header{padding:.4rem;}
.router-link-active{background: #000000;}
img{width:.4rem;}
li{text-align:center;}
li div{line-height:.5rem;}
li div p{font-size:.2rem;letter-spacing:.01rem;}
</style>