<template>
  <div class="bgBox">
    <div class="topBar">
      <div class="topBar_ct">
        <p class="left">欢迎来到 武汉壹玖之家网络科技有限公司 ！</p>
        <p class="right">
          <span @click="goRouter('/publish')">发布信息</span>
          <span @click="goRouter('/login')">登录</span>
          <span @click="goRouter('/register')">注册</span>
        </p>
      </div>
    </div>
    <div class="topImgBox">
       <img src="../../assets/img/bg/bg.jpg" class="topImg" alt="">
        <el-input placeholder="搜索" v-model="search" class="searchIpt" @keyup.enter.native="searchFn">
        </el-input>
    </div>
      <div class="nav">
        <el-menu :default-active="menuActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"  
                  background-color="#409EFF"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                  >
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="4">生活服务</el-menu-item>
          <el-menu-item index="5">房屋租赁</el-menu-item>
          <el-menu-item index="6">宠物市场</el-menu-item>
          <el-menu-item index="7">餐饮美食</el-menu-item>
          <el-menu-item index="8">票务卡券</el-menu-item>
          <el-menu-item index="9">教育培训</el-menu-item>
          <el-menu-item index="10">企业招聘</el-menu-item>
          <el-menu-item index="11">商务服务</el-menu-item>
        </el-menu>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      search: '',
      menuActiveIndex: '1'
    };
  },
  watch: {
      $route() {
        this.menuActiveIndex = this.$route.query.tag ? this.$route.query.tag : '1'
      }
  },
  methods: {
    handleSelect(key, keyPath) {
        if(key === '1') {
           this.$router.push('/home');
        } else {
          this.$router.push({path: "/journalism",query:{tag: key}});
        }
    },
    goRouter(url) {
      if(url) {
         this.$router.push(url);
      }
    },
    searchFn() {
      this.$router.push('/home')
      this.search = ''
    }
  }
};
</script>

<style lang="scss" scoped>

.bgBox {
  width: 100%;
 /*  background-image: url("../../assets/img/bg/2165324.png");
  //background-attachment: fixed;
  background-repeat: repeat-x;
  background-size: 100% 160px; */
  .topBar{
    line-height: 40px;
    height: 40px;
    background: #409EFF;
    color: #fff;
    .topBar_ct{
      width: 1200px;
      margin: 0 auto;
       .left{
        float: left;
      }
      .right{
        float: right;
        span{
          padding: 0 15px;
          cursor: pointer;
        }
        span:nth-of-type(2){
          border-right: 1px solid #ccc;
        }
        span:hover{
          font-weight: bold;
        }
      }
    }
   
  }
  .topImgBox{
    position: relative;
    .searchIpt{
      position: absolute;
      right: 20%;
      top: 5%;
      width: 200px;
      border: none;
    }
  }
  .topImg{
    width: 100%;
  }
  .nav {
     width: 1200px;
     margin: 20px auto;
    display: flex;
    /* height: 60px;
    line-height: 60px; */
    background: #606266;
    .el-dropdown{
      flex: 1;
      text-align: center;
      color: #fff;
      cursor: pointer;
      .title{
        width: 100%;
        display: inline-block;
      }
    }
  }
 }
.Box {
  overflow: hidden;
}
.backImg {
  height: 160px;
  width: 100%;
  .logoBox {
    width: 1200px;
    height: 160px;
    margin: 0 auto;
    // background-color: red;

    overflow: hidden;
    .logo_img {
      height: 130px;
      width: 150px;
      // background-color: antiquewhite;
      margin: 5px;
      float: left;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title_Box {
      float: left;
      margin-left: 100px;
      margin-top: 30px;
      p {
        width: 600px;
        font-size: 30px;
        margin: 20px 0;
        text-align: center;
        font-weight: bold;
        color: rgb(253, 236, 189);
      }
    }
  }
}
.navigation {
  width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
  background-color: cornflowerblue;
}
 .el-menu-demo {
   display: flex;
  .el-menu-item {
   /*  width: 10%; */
    text-align: center;
    flex: 1;
  }
}

/*.el-submenu {
  text-align: center;
  width: 14.2%;
} */
.el-menu--horizontal {
  width: 100%;
}
</style>

<style lang="scss">
    .searchIpt{
      input{
        border: none;
        width: 150px;
        height: 30px;
        border-radius: 30px;
      }
    }
</style>