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

<script setup>
const { t } = useI18n()
</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;
}
</style>

<template>
  <section class="work-process-section fix section-padding fix">
    <div class="container">
      <div class="process-work-wrapper">
        <div class="row g-4">
          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".3s">
            <div class="work-process-items text-center">
              <div class="line-shape"><img src="/picture/line.png" alt="shape-img" /></div>
              <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png')">
                <img src="/picture/01.svg" alt="img" />
              </div>
              <div class="content">
                <h4>{{ t('expertTeachers') }}</h4>
                <p class="multi-line clamp-2">
                  {{ t('excellentTeam') }}
                </p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".5s">
            <div class="work-process-items text-center style-2">
              <div class="line-shape-2"><img src="/picture/line-2.png" alt="shape-img" /></div>
              <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png')">
                <img src="/picture/02.svg" alt="img" />
              </div>
              <div class="content">
                <h4>{{ t('eLearningMedia') }}</h4>
                <p class="multi-line clamp-2">
                  {{ t('exploreKnowledge') }}
                </p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".7s">
            <div class="work-process-items text-center">
              <div class="line-shape"><img src="/picture/line.png" alt="shape-img" /></div>
              <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png')">
                <img src="/picture/03.svg" alt="img" />
              </div>
              <div class="content">
                <h4>{{ t('professionalService') }}</h4>
                <p class="multi-line clamp-2">
                  {{ t('tailorMadePlans') }}
                </p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
            <div class="work-process-items text-center">
              <div class="content style-two">
                <h4>{{ t('teachingAssistantTracking') }}</h4>
                <p style="cursor: pointer" :title="t('remedialSystem')" class="multi-line clamp-2">
                  {{ t('remedialSystem') }}
                </p>
              </div>
              <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png')">
                <img src="/picture/04.svg" alt="img" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>