gs_nuxt/components/HeadBar.vue

<template>
<div>
  <el-container>
    <el-backtop></el-backtop>
   <el-main style="padding: 0">
     <el-row>
       <el-col :span="10" :offset="4">
       <nuxt-link to="/">
         <img style="max-height: 70px" src="/img/lt_logo.png" alt="">
       </nuxt-link>
       </el-col>
       <el-col :span="8">

         <el-row>
           <el-col :span="5">
             <div style="line-height: 70px;text-align: center;font-size: 1.3rem">
               <span>登录</span>
               <span>注册</span>

             </div>
           </el-col>
           <el-col :span="10">

             <div style="line-height: 70px;text-align: center;margin-right:10px">
               <el-input v-model="searchValue"  class="inline-input" placeholder="请输入内容"  >



                   <el-button @click="to_search()" slot="append" icon="el-icon-search"></el-button>



               </el-input>

             </div>


           </el-col>
           <el-col :span="3">

           <div style="margin: 10px">
             <div class="demo-basic--circle">
               <div class="block"><el-avatar :size="50" src="//cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar></div>
               <div class="block" v-for="size in sizeList" :key="size">
                 <el-avatar :size="size" :src="circleUrl"></el-avatar>
               </div>
             </div>
           </div>

           </el-col>
         </el-row>



       </el-col>

     </el-row>

   </el-main>
  <el-footer  style="background-color: #4D4D4D;">
    <el-row>
      <el-col :span="18" offset="3">



          <el-menu

                    class="el-menu-demo"
                    mode="horizontal"
                    router
                    background-color="#4D4D4D"

                    text-color="#fff"

          >

            <template v-for="(item,i) in nav_list">
              <el-submenu v-if="item.navInfos.length !=0" :index="item.navUrl" :key="item.navId">
                <template slot="title">

<!--                  <n-link style="text-decoration: none;" :to="{name:'Association',params:{id: item.navId,title:item.navTitle}}">{{item.navTitle}}-->
<!--                  </n-link>-->
                  {{ item.navTitle }}
                </template>
                <el-menu-item
                  v-for="(items, key) in item.navInfos"
                  :key="key"
                  :index="items.navUrl"
                >
                  {{ items.navTitle }}
                </el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="item.navUrl" :key="item.navId">
                {{ item.navTitle }}
              </el-menu-item>
            </template>



          </el-menu>




      </el-col>
    </el-row>
  </el-footer>
  </el-container>

</div>
</template>

<script>
import {navList} from "../static/js/index"
export default {
  name: "HeadBar",
  data(){
    return{
      nav_list:null,

      searchValue:null
    }
  },created() {
    this.nav_list=this.getNavList();
  },methods: {
    to_search(){
      this.$router.push(
      { name: 'searchInfo-id', params: { key: this.searchValue }}
      )
    },
    getNavList(){
      navList().then(response=>{
        this.nav_list=response.rows;




      })
    },
  }
}
</script>

<style scoped>
body{
  margin: 0;
}

html,body{
  padding: 0;
  margin: 0;
}

</style>
<style>
a{
  text-decoration:none;
  color: black;
}
a:visited{text-decoration:none;}

</style>