<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    // 标题
    title: number | string;
  }>(),
  {
    title: "",
  }
);
</script>

<template>
  <div class="item_wrap">
    <div class="item_title" v-if="title !== ''">
      <img class="title-bg" src="@/assets/img/zheke/title-bg.png" alt="" />
      <img class="title-line" src="@/assets/img/zheke/title-line.png" alt="" />
      <div class="title-inner">{{ title }}</div>
    </div>
    <div
      :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
    >
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
$item-title-height: 33px;
$item_title_content-height: calc(100% - 33px - 20px);

.item_wrap {
  background: #fff;
  border-radius: 20px;
  padding: 20px 30px 0 30px;
}

.item_title {
  height: $item-title-height;
  line-height: $item-title-height;
  width: 100%;
  color: #333;
  text-align: left;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 41px;
  background: transparent;
  font-weight: bold;
  font-size: 20px;

  .title-inner {
    font-weight: 600;
    color: #393d44;
  }
}

.title-bg {
  height: 33px;
  position: absolute;
  left: 0;
  top: 0;
}

.title-line {
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 2px;
}

:deep(.dv-border-box-content) {
  box-sizing: border-box;
  padding: 6px 16px 0px;
}

.item_title_content {
  height: $item_title_content-height;
  background: #fff;
}

.item_title_content_def {
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>
