<template>
  <div class="searchHelp height_100">
    <div class="title">
        <p>搜索帮助</p>
    </div>
    <div class="content">
        <el-tabs v-model="component" type="card">
            <el-tab-pane label="可搜索字段" name="searchField"></el-tab-pane>
            <el-tab-pane label="搜索语法" name="searchGrammar"></el-tab-pane>
        </el-tabs>
    </div>
    <div class="content2 height_100">
        <component :is='component'></component>
    </div>
    
  </div>
</template>

<script>
import searchField from './components/searchField.vue';
import searchGrammar from './components/searchGrammar.vue';
export default {
  components: {
    searchField,
    searchGrammar
  },
  props: {},
  data() {
    return {
        activeName:1,
        component:'searchField',
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
  },
};
</script>
<style lang="scss" scoped>
.searchHelp{
    width: 960px;
    text-align: left;
    margin: 0 auto;
    .title{
        padding: 20px 0;
        &>p{
            height: 40px;
            line-height: 40px;
            font-size: 32px;
            font-weight: 400;
            color: #616161;
            margin:0 !important;
        }
    }
    .content{
        position:sticky;
        top:0px;
        background: white;
        padding-top:10px ;
        z-index: 999;
    }
    .content2{
        position:sticky;
        top:60px;
        height:calc(100% - 200px)
    }
}
</style>