<template>
  <div class="section" :style="{ height: height }">
    <Title2 :title="title" v-if="titleType"> </Title2>
    <Title3 @sectionChangeTab="changeTab" :tabList="tabList" v-else> </Title3>
    <div class="container-short">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: "Section",
  props: {
    titleType: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "400px",
    },
    tabList:{
      type: Array,
      default: ()=>{
        return []
      }
    }
  },
  methods:{
    changeTab(e){
      this.$emit("listChangeTab", e);
    }
  }
};
</script>
<style lang="less" scoped>
.container-short {
  height: calc(100% - 50px);
  background: url("@/assets/images/index/img_kirs@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
}
</style>