<template>
  <div class="section" :style="{ height: height }">
    <Title :title="title">
      <template #left-slot>
        <slot name="left-slot"></slot>
      </template>
      <template #right-slot>
        <slot name="right-slot"></slot>
      </template>
    </Title>
    <div :class="[type == 'long' ? 'container2' : 'container']">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: "Section",
  props: {
    title: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "400px",
    },
    type: {
      type: String,
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  height: calc(100% - 40px);
  background: url("@/assets/images/index/img_iyi@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.container2 {
  height: calc(100% - 40px);
  background: url("@/assets/images/index/img_yiwu@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>