<!-- -->
<template>
  <div class="units-content">
    <div class="units-content-item" v-for="(unit, index) in units" :key="index">
      <div class="unit-title">{{ unit.title }}</div>
      <div class="unit-intro">{{ unit.intro }}</div>
      <div class="unit-imgs" v-if="unit.imagesVo && unit.imagesVo.length > 0">
        <div class="img-item" v-for="(i, idx) in unit.imagesVo" :key="idx">
          <img :src="$getFullUrl(i.url)" />
        </div>
      </div>
      <ChStyleUnit
        :units="unit.children"
        v-if="unit.children && unit.children.length > 0"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "ChStyleUnit",
  props: {
    units: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.units-content-item {
  margin-bottom: 20px;
  .unit-title {
    font-size: 36px;
    font-family: KaiTi;
    font-weight: 400;
    color: #4e392c;
    line-height: 83px;
    display: flex;
    justify-content: center;
  }
  .unit-intro {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #444444;
    text-indent: 36px;
    margin-bottom: 10px;
    line-height: 32px;
  }
  .unit-imgs {
    width: 100%;
    .img-item {
      width: 100%;
      img {
        width: 100%;
      }
    }
  }
}
</style>
