school_website/ruoyi-ui/src/views/officialWebsite/Components/header.vue

<template>
  <div class="tab-box">
    <!-- 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" v-for="(item, index) in tablist " :key="index" @click="tabClick(item.jumpUrl, item.id)" >
        {{ item.label }}
      </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 { getbanner, getBaseInfo, getTab } from '@/api/gw/home'

export default {
  data() {
    return {
      baseInfo:"",
      input:'',
      show_search: true,
      categoryQuery:{},
      tablist: [
        {name: '首页'},
        {name: '中心概括'},
        {name: '教学资源'},
        {name: '教学平台'},
        {name: '教学团队'},
        {name: '专业委员会'},
        {name: '教学研讨活动'},
        {name: '虚仿专业频道'},
        {name: '大赛风采'},
        {name: '实践平台'},
        {name: '合作企业'},
        {name: '联系我们'},
      ],
    }
  },
  props: {
    msg: String
  },
  mounted() {
    // 页面加载完毕调用
    this.tabLsit();
    this.getWebBaseInfo()
  },
  methods:{
    tabClick(url,id){
      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-box {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 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;
}
</style>