happychin-web/components/HomeIndex/Activities-wrapper/index.vue

<script setup>
const { t, locale, setLocale } = useI18n()
const dataList = ref([
  {
    bg: 'box-color-1',
    id: 'wrapper0',
    wowDelay: '0.3s',
    img: '/picture/icon-1.svg',
    title: 'Handicraft courses',
    subTitle: "Cultivate students' practical abilities"
  },
  {
    bg: 'box-color-3',
    id: 'wrapper1',
    wowDelay: '0.5s',
    img: '/picture/icon-3.svg',
    title: 'Classroom games',

    subTitle: 'Add fun to the classroom'
  },
  {
    bg: 'box-color-2',
    id: 'wrapper2',
    wowDelay: '0.6s',
    img: '/picture/icon-2.svg',
    title: 'Musical rhythm',

    subTitle: "Help memory through children's songs"
  },
  {
    bg: 'box-color-4',
    id: 'wrapper3',
    wowDelay: '0.8s',
    img: '/picture/icon-4.svg',
    title: 'Chinese culture',
    subTitle: 'Understand traditional Chinese cultural customs'
  }
])
</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;
}
.shrink-0 {
  flex-shrink: 0;
}
</style>

<template>
  <section class="about-activities-section section-padding pt-0">
    <div class="pencil-shape"><img src="/picture/pencil2.png" alt="shape-img" /></div>
    <div class="zebra-shape float-bob-y"><img src="/picture/zebra.png" alt="shape-img" /></div>
    <div class="container">
      <div class="about-activities-wrapper">
        <div class="row g-3">
          <div class="col-lg-6 wow fadeInUp" data-wow-delay=".4s">
            <!-- style="background-image: url('/picture/bg03.svg')" -->
            <div class="activities-image bg-cover">
              <img src="/picture/03.png" alt="img" />
            </div>
          </div>
          <div class="col-lg-6">
            <div class="activities-content">
              <div class="section-title">
                <span class="wow fadeInUp">Our Original Courses</span>
                <h2 class="wow fadeInUp fs-1" data-wow-delay=".3s">Curriculum Characteristics</h2>
              </div>
              <p class="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".5s">
                Multi-dimensional teaching model to promote the all-round development of students.
              </p>
              <div class="row g-4 mt-4">
                <div
                  v-for="(item, index) in dataList"
                  :key="item?.id"
                  class="col-xl-6 col-lg-8 col-md-6 wow fadeInUp"
                  :data-wow-delay="item?.wowDelay"
                >
                  <div class="icon-items">
                    <div class="icon shrink-0" :class="item?.bg">
                      <img :src="item?.img" alt="img" />
                    </div>
                    <div class="content">
                      <h5>{{ item?.title }}</h5>
                      <p class="multi-line clamp-2">
                        {{ item?.subTitle }}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>