163 lines
3.9 KiB
Vue
163 lines
3.9 KiB
Vue
<template>
|
|
<div class="tab-boxs">
|
|
<!-- left -->
|
|
<div class="d-s" @click="toHome">
|
|
<div class="logo-box">
|
|
<img :src="baseInfo.webImg" />
|
|
</div>
|
|
<div class="logo-size">
|
|
{{ this.baseInfo.webName }}
|
|
</div>
|
|
</div>
|
|
<!-- tab -->
|
|
<div class="d-s">
|
|
<div class="x-x" :class="{'active' :tabindex == index }" v-for="(item, index) in tablist " :key="index" @click="tabClick(item.jumpUrl, item.id,index)" >
|
|
<div>
|
|
<img :src=" imgurl +item.iconUrl " alt="" style="width: 35px;height: 35px">
|
|
</div>
|
|
<div>{{ item.label }}</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- right -->
|
|
<div class="d-s" style="font-size: 20px; color: #fff;cursor: pointer;width: 170px;justify-content: flex-end">
|
|
<!-- <i class="el-icon-search" v-if="show_search"></i>-->
|
|
<!-- <div style="font-size: 18px; margin-left: 15px; " v-if="show_search" @click="show_search = !show_search">搜索-->
|
|
<!-- </div>-->
|
|
<!-- <el-input placeholder="输入关键词" v-model="input" style="width: 150px;height: 35px" v-if="!show_search">-->
|
|
<!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
|
|
<!-- </el-input>-->
|
|
<!-- <i class="el-icon-circle-close" v-if="!show_search" style="margin-left: 10px;"-->
|
|
<!-- @click="show_search = true"></i>-->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getBaseInfo, getTab } from '@/api/gw/home'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
baseInfo:"",
|
|
imgurl: process.env.VUE_APP_BASE_API,
|
|
input:'',
|
|
show_search: true,
|
|
categoryQuery:{},
|
|
tabindex:0,
|
|
tablist: [
|
|
{name: '首页'},
|
|
{name: '中心概括'},
|
|
{name: '教学资源'},
|
|
{name: '教学平台'},
|
|
{name: '教学团队'},
|
|
{name: '专业委员会'},
|
|
{name: '教学研讨活动'},
|
|
{name: '虚仿专业频道'},
|
|
{name: '大赛风采'},
|
|
{name: '实践平台'},
|
|
{name: '合作企业'},
|
|
{name: '联系我们'},
|
|
],
|
|
}
|
|
},
|
|
props: {
|
|
msg: String
|
|
},
|
|
created() {
|
|
this.tabindex = this.msg
|
|
},
|
|
mounted() {
|
|
this.tabindex = this.msg
|
|
console.log(this.msg)
|
|
// 页面加载完毕调用
|
|
this.tabLsit();
|
|
this.getWebBaseInfo()
|
|
},
|
|
methods:{
|
|
tabClick(url,id,index){
|
|
this.tabindex = index
|
|
if (url === 'home') url = "gw";
|
|
this.$router.push({
|
|
name: url,
|
|
query:{ id: id }
|
|
});
|
|
|
|
},
|
|
tabLsit() {
|
|
getTab().then(response => {
|
|
if (response.code == 200) {
|
|
this.tablist = response.data;
|
|
this.categoryQuery.categoryId = this.tablist[0].id
|
|
|
|
}
|
|
})
|
|
},
|
|
getWebBaseInfo() {
|
|
getBaseInfo().then(res => {
|
|
this.baseInfo = res.data
|
|
this.baseInfo.webImg = process.env.VUE_APP_BASE_API + this.baseInfo.webImg
|
|
})
|
|
},
|
|
toHome(){
|
|
this.$router.push("/virtually")
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.tab-boxs {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0px 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
position: absolute;
|
|
z-index: 3;
|
|
|
|
}
|
|
|
|
.d-s {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
.logo-box {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: #fff;
|
|
}
|
|
.logo-box img{
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.logo-size {
|
|
font-weight: 800;
|
|
font-size: 24px;
|
|
color: #FFFFFF;
|
|
margin-left: 20px;
|
|
|
|
}
|
|
.x-x {
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
height: 90px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
padding-top: 15px;
|
|
}
|
|
.x-x:hover{
|
|
background: linear-gradient( 360deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
|
|
//border-bottom: 2px solid #fff;
|
|
}
|
|
.active{
|
|
background: linear-gradient( 360deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
|
|
border-bottom: 2px solid #fff !important;
|
|
}
|
|
</style>
|