happychin-web/components/HomeIndex/Kindergarten-class/index.vue

<script setup>
const { t } = useI18n()
const { $$t } = useStoreI18n()
const dataList = ref([
  {
    bg: '',
    abg: 'abg1',
    id: 'Beginning',
    wowDelay: '0.3s',
    img: '/picture/012.png',
    title: $$t('beginning'),
    ageBracket: $$t('ageBracket', ['6-9']),
    subTitle: $$t('beginningSubTitle')
  },
  {
    bg: 'bg-2',
    abg: '',
    id: 'Growing',
    wowDelay: '0.5s',
    img: '/picture/021.png',
    title: $$t('growing'),
    ageBracket: $$t('ageBracket', ['6-12']),
    subTitle: $$t('growingSubTitle')
  },
  {
    bg: 'bg-5',
    abg: 'abg3',
    id: 'DrawingClass',
    wowDelay: '0.7s',
    img: '/picture/082.png',
    title: $$t('breaking'),
    ageBracket: $$t('ageBracket', ['9-15']),
    subTitle: $$t('drawingClassSubTitle')
  },
  {
    bg: 'bg-6',
    abg: 'abg4',
    id: 'Expanding',
    wowDelay: '0.9s',
    img: '/picture/083.png',
    title: $$t('expanding'),
    ageBracket: $$t('ageBracket', ['12-18']),
    subTitle: $$t('expandingSubTitle')
  }
])
</script>
<style lang="css" scoped>
.multi-line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.h-color {
  color: white;
}
.clamp-1 {
  -webkit-line-clamp: 1;
}
.clamp-2 {
  -webkit-line-clamp: 2;
}
::v-deep .abg1 {
  background-color: #70a6b1 !important;
}
::v-deep .abg3 {
  background: #5866eb !important;
}
::v-deep .abg4 {
  background: #f25334 !important;
}
::v-deep .abg1:hover {
  background-color: #385469 !important;
}
::v-deep .abg3:hover {
  background-color: #385469 !important;
}
::v-deep .abg4:hover {
  background-color: #385469 !important;
}
</style>

<template>
  <div class="row">
    <template v-for="(item, index) in dataList" :key="item?.id">
      <div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp" :data-wow-delay="item?.wowDelay">
        <div class="program-box-items">
          <div :class="`program-bg ${item?.bg}`"></div>
          <div class="program-image">
            <img :src="item?.img" alt="img" />
          </div>
          <div class="program-content text-center">
            <h4 class="multi-line clamp-1 h-color">
              {{ item?.title }}
            </h4>
            <span>({{ item?.ageBracket }})</span>
            <p :title="item?.subTitle" class="multi-line clamp-2">
              {{ item?.subTitle }}
            </p>
            <!-- program-details.html -->
            <a href="javascript:(0)" :class="`arrow-icon  ${item?.abg}`">
              <i class="fa-solid fa-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>