school_website/ruoyi-ui/src/views/officialWebsite/Components/header.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 v-if="item.iconUrl" :src=" imgurl +item.iconUrl " alt="" style="width: 25px;height: 25px">
        </div>
        <div class="bsize">{{ 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: 600;
  font-size: 22px;
  color: #FFFFFF;
  margin-left: 20px;

}
.x-x {
  width: 110px;

  cursor: pointer;
  height: 90px;
  text-align: center;
  box-sizing: border-box;
  padding-top: 25px;
}
.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;
}
.bsize{
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
}
</style>