<template>
  <div id="menuInfo">
    <el-row>
      <el-col :span="24" class="menu">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color="#fff">
          <el-menu-item index="1">网站首页</el-menu-item>
          <el-menu-item index="2">科技政务</el-menu-item>
          <el-menu-item index="3">科技政策</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>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'menuInfo',
  props: {},
  components: {},
  data: () => ({
    activeIndex: '1',
  }),
  created() {},
  computed: {},
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="less" scoped>
.menu {
  height: 70px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
}
/deep/.el-menu {
  background-color: rgba(0, 0, 0, 0.4);
}
/deep/.el-menu--horizontal > .el-menu-item {
  height: 70px;
  line-height: 70px;
  border-right: 1px solid #ccc;
  padding: 0 30px;
  font-size: 22px;
}
/deep/.el-menu--horizontal > .el-menu-item:last-child {
  padding: 0 34px;
}
/deep/.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none;
  color: #fff;
  background-color: #215299;
}
/deep/.el-menu--horizontal > .el-menu-item:hover {
  background-color: #215299;
}
</style>
