crowd-test-service-frontend/src/components/commons/SearchBar.vue

<template>
  <div class="nav" stype="height:500px">
    <!--搜索框-->
    <el-row class="search-nav" style="padding: 30px 0 20px 0">
      <el-col :span="6">
        <div class="pull-left">
          <img class="logo-img" src="../../assets/img/logo-blue.png"/>
          <span class="logo-title">群智众测平台</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="search-nav">
          <div id="search-block " class="">
            <el-tabs v-model="searchType" type="card" @tab-click="handleTypeClick" v-if="tabArr">
              <el-tab-pane v-for="item in tabArr" :label="item.label" :name="item.name" :key="item.label"></el-tab-pane>
            </el-tabs>
            <div class="search-input">
              <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select">
                <el-button class="search-button" slot="append"  type="primary" @click="handleSearchData()">搜索</el-button>
              </el-input>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <el-button type="primary pull-right" class="releaseBtn">免费发布众测需求</el-button>
      </el-col>
    </el-row>
    <!--TabNav-->
    <el-tabs :value="currTab" @tab-click="handleTabClick" class="square-tab" v-if="menuArr">
      <el-tab-pane v-if="!menuArr.menuArr1" v-for="item in menuArr" :name="item.name" :key="item.name" class="tab-menu1">
        <span slot="label" style="font-size: 18px">{{item.label}}</span>
      </el-tab-pane>
      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr1" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
<!--      <el-tab-pane v-if="menuArr.menuArr1" name="name"  class="tab-menu1" label="|">|</el-tab-pane>-->
      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr2" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr3" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
    </el-tabs>
    <div>
    </div>
  </div>
</template>


<script>
  import { mapGetters , mapActions} from 'vuex'
  import  commonData  from '../../constants/tabMenu'
  import Http from '@/js/http.js'
  export default {
    name: 'SearchBar',
    // components:{},
    props: ['tabArr', 'menuArr'],
    data() {
      return {
        searchType: 'project',
        searchVal: '',
        // currTab:''
      }
    },

    methods: {}
  }

</script>


<style>

</style>