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

<script setup>
const { t, locale, setLocale } = useI18n()
// const dataList = ref([
//   {
//     bg: '',
//     abg: 'abg1',
//     id: 'Beginning',
//     wowDelay: '0.3s',
//     img: '/picture/012.png',
//     title: 'Beginning',
//     ageBracket: '6-9 years old',
//     subTitle: 'Enlightenment in listening and speaking stimulates interest in Chinese learning.'
//   },
//   {
//     bg: 'bg-2',
//     abg: '',
//     id: 'Growing',
//     wowDelay: '0.5s',
//     img: '/picture/021.png',
//     title: 'Growing',
//     ageBracket: '6-12 years old',
//     subTitle:
//       'The primary school Chinese textbooks compiled by the deep matching department have reached the domestic primary school Chinese level and improved Chinese literacy.'
//   },
//   {
//     bg: 'bg-5',
//     abg: 'abg3',
//     id: 'DrawingClass',
//     wowDelay: '0.7s',
//     img: '/picture/012.png',
//     title: 'Drawing Class',
//     ageBracket: '9-15 years old',
//     subTitle:
//       'Comprehensive improvement of listening speaking, reading and writing skills, high-level direct HSK/AP/IB Chinese tests.'
//   },
//   {
//     bg: 'bg-6',
//     abg: 'abg4',
//     id: 'Expanding',
//     wowDelay: '0.9s',
//     img: '/picture/021.png',
//     title: 'Beginning',
//     ageBracket: '12-18years old',
//     subTitle:
//       'Benchmark HSK and YCT syllabuses to comprehensively improve Chinese listening, speaking, reading and writing skills for overseas students with zero foundation.'
//   }
// ])
</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>Expert Teachers</h4>
                <p>The excellent team of teachers escorts students' learning</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>E-learning Media</h4>
                <p>Learners can freely explore knowledge via E-learning media</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>Professional Service</h4>
                <p>Tailor-made learning plans for students to achieve personalized development</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>Teaching Assistant Tracking</h4>
                <p>
                  Remedial system of professional teaching assistant to track during the whole
                  process.
                </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>