<template functional>
  <div class="det-footer">
    <p class="det-footer-logo"><img src="../../../../assets/logo-foot.png" alt="logo" /></p>
    <p
      v-for="(item, index) in props.companyInfo"
      :key="index"
      :class="{
        'det-footer-offset': item.offset,
        'det-footer-indent': !item.offset
      }"
    >
      {{ item.content }}
    </p>
  </div>
</template>

<script>
export default {
  name: "DetailFooter",
  props: {
    companyInfo: {
      type: Array,
      default() {
        return [];
      }
    }
  }
};
</script>
<style lang="less">
@import "../../../../style/var.less";
.det-footer {
  padding: 25px 36px;
  background-color: #fff;
  margin: 10px 0;
  p {
    color: @gray-4;
    font-size: @font-size-12;
    line-height: @line-height-sm + 2;
  }
  &-offset {
    padding-left: 60px;
  }
  &-indent {
    padding-left: 60px;
    text-indent: -60px;
  }
  &-logo {
    text-align: center;
    margin-bottom: 10px;
    img {
      width: 121px;
      height: 66px;
    }
  }
}
</style>
