<template>
  <div class="activityRule">
    <div v-for="(item, key) in activityDescs" :key="key" class="activityRule__item">
      <h5 class="activityRule__title">
        {{ item.title }}
      </h5>
      <p class="activityRule__content">{{ item.content }}</p>
    </div>
  </div>
</template>
<script>
import { mapGetters } from '../store';

export default {
  name: 'ActivityRule',
  computed: {
    ...mapGetters(['activityDescs'])
  }
};
</script>
<style lang="less" scoped>
.activityRule {
  padding: @padding-sm;
  &__title {
    .text-size(14);
    font-weight: 600;
    color: @black;
    padding: @padding-xs 0;
  }
  &__content {
    .text-size(13);
    color: @black;
    padding-bottom: @padding-md;
    white-space: pre-line;
  }
}
</style>
