<template>
  <div class="Si-card Strict">
    <service-title title="购买须知" />

    <ol class="Strict-list">
      <li v-for="(insItem, insIndex) in instructions" :key="insIndex" class="Strict-list-li">
        <div class="Strict-list-li__title">
          <cr-image width="16px" height="16px" :src="insItem.leftIcon" />
          <span class="Strict-list-li__title__text">{{ insItem.title }}</span>
        </div>
        <div
          v-for="(ctItem, ctIndex) in insItem.contents"
          :key="ctIndex"
          class="Strict-list-li__content"
        >
          <div v-if="insItem.contents.length > 1" class="cirli">
            {{ ctItem }}
          </div>
          <template v-else>
            {{ ctItem }}
          </template>
        </div>
      </li>
    </ol>
  </div>
</template>

<script>
import ServiceTitle from '../../components/serviceTitle.vue';
export default {
  components: {
    ServiceTitle
  },
  props: {
    instructions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  }
};
</script>
<style lang="less" scoped>
.Strict {
  &-list-li {
    .text-size(13);
    margin-top: @padding-md + 2px;
    &__title {
      display: flex;
      align-items: center;
      &__text {
        font-weight: bold;
        margin-left: @padding-unit;
      }
    }
    &__content {
      margin-top: @padding-xs;
      padding-left: @padding-lg;
    }
  }
}
</style>
