happychin-web/components/HomeIndex/Recommendation/index.vue

<script setup>
const { t } = useI18n()
const { $$t } = useStoreI18n()
const dataList = ref([
  {
    bg: '',
    abg: '',
    id: 'Jenny0',
    wowDelay: '0.3s',
    img: '/picture/quote.png',
    title: $$t('jennyWilson'),
    subTitle: $$t('culturalTheatre')
  },
  {
    bg: 'bg-2',
    abg: 'style-2',
    id: 'Jenny1',
    wowDelay: '0.5s',
    img: '/picture/quote-2.png',
    title: $$t('estherHoward'),
    subTitle: $$t('pronunciationStandard')
  },
  {
    bg: 'bg-3',
    abg: 'style-3',
    id: 'Jenny2',
    wowDelay: '0.7s',
    img: '/picture/quote-3.png',
    title: $$t('wadeWarren'),
    subTitle: $$t('lun1')
  }
])
</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;
}
.clamp-3 {
  -webkit-line-clamp: 3;
}
.clamp-4 {
  -webkit-line-clamp: 4;
}
</style>

<template>
  <section class="testimonial-section fix section-padding">
    <div class="tree-shape float-bob-y"><img src="/picture/tree-shape.png" alt="shape-img" /></div>
    <div class="right-shape"><img src="/picture/right.png" alt="shape-img" /></div>
    <div class="bee-shape float-bob-y"><img src="/picture/bee.png" alt="shape-img" /></div>
    <div class="container">
      <div class="section-title text-center">
        <span class="wow fadeInUp">{{ t('recommendation') }}</span>
        <h2 class="wow fadeInUp w-50 m-auto" data-wow-delay=".3s">
          {{ t('parentsFeedback') }}
        </h2>
      </div>

      <div class="row">
        <template v-for="(item, index) in dataList" :key="item?.id">
          <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" :data-wow-delay="item?.wowDelay">
            <div class="swiper-slide">
              <div
                style="box-sizing: border-box"
                class="testimonial-items d-flex align-items-center"
                :class="item.abg"
              >
                <div class="icon">
                  <img :src="item?.img" alt="img" />
                </div>
                <div class="testimonial-bg" :class="item.bg"></div>
                <div class="testimonial-content">
                  <p class="multi-line clamp-4">
                    {{ item?.subTitle }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </section>
</template>