happychin-web/pages/about/index.vue

<template>
  <Preloader></Preloader>
  <FixArea></FixArea>
  <Header-top-section sectionClass="header-top-section-4" />
  <TopHeader headerClass="header-4" />
  <div class="search-wrap">
    <div class="search-inner">
      <i class="fas fa-times search-close" id="search-close"></i>
      <div class="search-cell">
        <form method="get">
          <div class="search-field-holder">
            <input type="search" class="main-search-input" placeholder="Search..." />
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.svg')">
    <div class="line-shape">
      <img src="/picture/line1.png" alt="shape-img" />
    </div>
    <div class="plane-shape float-bob-y">
      <img src="/picture/plane2.png" alt="shape-img" />
    </div>
    <div class="doll-shape float-bob-x">
      <img src="/picture/doll.png" alt="shape-img" />
    </div>
    <div class="parasuit-shape float-bob-y">
      <img src="/picture/parasuit1.png" alt="shape-img" />
    </div>
    <div class="frame-shape">
      <img src="/picture/frame3.png" alt="shape-img" />
    </div>
    <div class="bee-shape float-bob-x">
      <img src="/picture/bee1.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="page-heading">
        <h1 class="wow fadeInUp" data-wow-delay=".3s">{{ t('aboutPage.aboutUs') }}</h1>
        <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
          <li>
            <a href="p9wfc14694.html">{{ t('aboutPage.home') }}</a>
          </li>
          <li>
            <i class="fas fa-chevron-right"></i>
          </li>
          <li>{{ t('aboutPage.aboutUs') }}</li>
        </ul>
      </div>
    </div>
  </div>
  <section class="about-activities-section-2 style-2 section-padding">
    <div class="zebra-shape float-bob-y">
      <img src="/picture/zebra.png" alt="shape-img" />
    </div>
    <div class="bottom-shape">
      <img src="/picture/section-top-shape-2.png" alt="shape-img" />
    </div>
    <div class="sun-shape">
      <img src="/picture/shape-2.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="about-activities-wrapper style-2">
        <div class="row g-4">
          <div class="col-lg-6 wow fadeInUp" data-wow-delay=".3s">
            <div class="activities-image-items">
              <img src="/aboutImg/Container2.svg" alt="img" />
              <div class="radius-shape">
                <img src="/picture/radius-shape.png" alt="shape-img" />
              </div>
              <div class="circle-shape">
                <img src="/picture/circle1.png" alt="shape-img" />
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="activities-content">
              <div class="section-title">
                <span class="wow fadeInUp">{{ t('aboutPage.aboutUs') }}</span>
                <h2 class="wow fadeInUp" data-wow-delay=".3s">
                  {{ t('aboutPage.companyIntroduction') }}
                  <br />
                </h2>
              </div>
              <p class="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".5s">
                {{ t('aboutPage.companyDescription') }}
              </p>
              <div class="row g-4 mt-4">
                <div class="col-xl-4 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                  <div class="icon-items">
                    <div class="content text-center">
                      <h3 style="color:#F39F5F">80%</h3>
                      <p>
                        {{ t('aboutPage.teachersWithOverseasExperience') }}
                        <br />
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-xl-4 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                  <div class="icon-items" style="justify-content: center; text-align: center;">
                    <div class="content" >
                      <h3 style="color:#F39F5F">98%</h3>
                      <p>
                        {{ t('aboutPage.hskPassRate') }}
                        <br />
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-xl-4 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".5s">
                  <div class="icon-items">
                    <div class="content text-center">
                      <h3 style="color:#F39F5F">10000+</h3>
                      <p>
                        {{ t('aboutPage.membersStartedLearning') }}
                        <br />
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="feature-value-section fix section-padding section-bg-2" style="position: relative;">
    <div class="shape-1">
      <img src="/picture/shape-1.png" alt="shape-img" />
    </div>
    <div class="shape-2 float-bob-x">
      <img src="/picture/shape-21.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="section-title text-center">
        <span class="wow fadeInUp">{{ t('aboutPage.ourStory') }}</span>
        <h2 class="wow fadeInUp" data-wow-delay=".3s">
          {{ t('aboutPage.brandStory') }}
          <br />
        </h2>
      </div>
      <div class="row">
        <div class="col-xl-4 col-lg-6">
          <div class="feature-value-items">
            <div class="value-icon-items wow fadeInUp" data-wow-delay=".3s">
              <div class="">
                <img src="/aboutImg/Overlay1.svg" alt="img" />
              </div>
              <div class="content">
                <h5>{{t('aboutPage.2024')}}</h5>
                <p>
                  {{ t('aboutPage.brandBirth') }}
                </p>
              </div>
            </div>
            <div class="value-icon-items wow fadeInUp" data-wow-delay=".5s">
              <div class=" color-2">
                <img src="/aboutImg/Overlay3.svg" alt="img" />
              </div>
              <div class="content">
                <h5>{{ t('aboutPage.2025') }}</h5>
                <p>
                  {{ t('aboutPage.rndTeamFormation') }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-lg-6 wow fadeInUp" data-wow-delay=".4s">
          <div class="feature-value-items">
            <div class="feature-value-image" style="top:20px;z-index: 20; scale: 1.1;">
              <img src="/aboutImg/Container1.svg" alt="img" />
            </div>
          </div>
        </div>
        <div class="col-xl-4 col-lg-6">
          <div class="feature-value-items">
            <div class="value-icon-items  style-2 wow fadeInUp" style="justify-content:end" data-wow-delay=".3s">
              <div class="content">
                <h5>{{ t('aboutPage.20253') }}</h5>
                <p>
                  {{ t('aboutPage.educationTeamFormation') }}
                </p>
              </div>
              <div class=" color-3">
                <img src="/aboutImg/Overlay2.svg" alt="img" />
              </div>
            </div>
            <div class="value-icon-items style-2 wow fadeInUp" data-wow-delay=".5s">
              <div class="content">
                <h5>{{ t('about') }}</h5>
                <p>
                  {{ t('aboutPage.currentAchievement') }}
                </p>
              </div>
              <div class=" color-2 color-4">
                <img src="/aboutImg/Overlay4.svg" alt="img" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="position: absolute;z-index: 200;bottom: 0;width: 100%;height:100px; background-image: url('/aboutImg/section-bottom-shape.svg');background-size: auto 100%;"></div>
  </section>
  <section>
    <div class="main-container">
      <div class="title-section wow fadeInUp" data-wow-delay=".3s">
        <h3 style="color:#F39F5F">{{ t('aboutPage.brandCulture') }}</h3>
        <h2 style="color:#385469;font-size: 50px;width: 700px;display: inline-block; text-align: center;">{{ t('aboutPage.brandCultureDesc') }}</h2>
      </div>
      <div class="card-container fadeInUp" data-wow-delay=".5s">
        <div class="cloud-card orange-gradient " style="background: url('/aboutImg/Group 121.svg') center / cover no-repeat;">
          <h3>{{ t('aboutPage.mission') }}</h3>
          <p>{{ t('aboutPage.missionDesc') }}</p>
        </div>
        <div class="cloud-card teal-gradient" style="background: url('/aboutImg/Group 131.svg') center / cover no-repeat;">
          <h3>{{ t('aboutPage.vision') }}</h3>
          <p>{{ t('aboutPage.visionDesc') }}</p>
        </div>
        <div class="cloud-card slate-gradient" style="background: url('/aboutImg/Group 141.svg') center / cover no-repeat;">
          <h3>{{ t('aboutPage.values') }}</h3>
          <p>{{ t('aboutPage.valuesDesc') }}</p>
        </div>
      </div>
    </div>
  </section>
  <section style="background:url('/aboutImg/section.svg') no-repeat ;background-size: 100% auto;background-color: #eff5f6;">
    <div class="min-h-screen ">
      <div class="container wow fadeInUp" data-wow-delay=".3s">
        <!-- 标题区域 -->
        <div class="title-area" style="padding-top: 65px;">
          <h3 style="color:#F39F5F">{{ t('aboutPage.educationConcept') }}</h3>
          <h2 style="color:#385469; font-size: 50px;width: 700px;display: inline-block; text-align: center;">{{ t('aboutPage.educationConceptDesc') }}</h2>
        </div>

        <!-- 内容区域 -->
        <div class="content-area wow fadeInUp" data-wow-delay=".5s">
          <!-- 第一块内容 -->
          <div class="content-item">
            <div class="text-content">
              <h3>{{ t('aboutPage.professionalTeachers') }}</h3>
              <div class="text-box">
                <p>
                  {{ t('aboutPage.professionalTeachersDesc') }}
                </p>
              </div>
            </div>
            <div class="image-content">
              <img src="/aboutImg/Frame 121.svg" style="right:0" alt="" />
            </div>
          </div>

          <!-- 第二块内容 -->
          <div class="content-item reverse">
            <div class="text-content">
              <h3>{{ t('aboutPage.uniqueTeachingMethod') }}</h3>
              <div class="text-box">
                <p>
                  {{ t('aboutPage.uniqueTeachingMethodDesc') }}
                </p>
              </div>
            </div>
            <div class="image-content">
              <img src="/aboutImg/software-hero-img.svg" style="left:0;padding: 10px;object-position: left top;object-fit: cover;" alt="特色教学方式" />
            </div>
          </div>

          <!-- 第三块内容 -->
          <div class="content-item">
            <div class="text-content">
              <h3>{{ t('aboutPage.personalizedService') }}</h3>
              <div class="text-box">
                <p>
                  {{ t('aboutPage.personalizedServiceDesc') }}
                </p>
              </div>
            </div>
            <div class="image-content">
              <img src="/aboutImg/bg.svg" style="right:0" alt="个性化服务" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <FooterSection></FooterSection>
</template>
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
<style>
/* 整体容器样式 */
.main-container {
    margin: 0 auto;
    background-color: white;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* 标题部分样式 */
.title-section {
    text-align: center;
    margin-bottom: 4rem;
}

.title-section h3 {
    color: #6b7280;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.title-section h2 {
    font-size: 1.875rem;
    font-weight: bold;
    color: #1f2937;
}

/* 卡片容器样式 */
.card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* 云卡片通用样式 */
.cloud-card {
    position: relative;
    width: 360px;
    min-height: 255px;
    padding: 3rem;
    color: white;
    border-radius: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); */
}


.cloud-card h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color:white;
}

.cloud-card p {
    font-size: 1rem;
    line-height: 1.625;
}

/* 不同颜色渐变样式 */
.orange-gradient {
    background: linear-gradient(to bottom right, #fdba74, #fb923c);
}

.teal-gradient {
    background: linear-gradient(to bottom right, #2dd4bf, #14b8a6);
}

.slate-gradient {
    background: linear-gradient(to bottom right, #475569, #334155);
}    


.min-h-screen {
  /* min-height: 100vh; */
}

.bg-gray-50 {
  background-color: #f9fafb;
}

.container {

  margin: 0 auto;
  padding: 0 1rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.title-area {
  text-align: center;
  margin-bottom: 5rem;
}

.title-area h2 {
  font-size: 1.875rem;
  font-weight: bold;
  /* color: #1f2937; */
  margin-bottom: 1rem;
}

.title-area p {
  color: #4b5563;
}

.content-area {
  display: flex;
  flex-direction: column;
  /* gap: 6rem; */
}

.content-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-item.reverse {
  flex-direction: row-reverse;
}

.text-content {
  width: 50%;
}

.content-item .text-content {
  padding-right: 3rem;
}

.content-item.reverse .text-content {
  padding-left: 3rem;
  padding-right: 0;
}

.text-content h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 1.5rem;
}

.text-box {
  border-radius: 0.5rem;
    padding: 20px;
    height: 190px;
    display: flex;
    align-items: center;
    background: url('/aboutImg/div.svg') center/cover no-repeat;
    /* background-size: 600px 150px; */
}


.text-box p {
  color: #4b5563;
  padding-bottom: 30px;

  line-height: 1.625;
}

.image-content {
  position: relative;
  display: flex;
  justify-content: end;
  border-radius: 0.5rem;
  overflow: hidden;
}

.image-content img {

  height: 50%;
  object-fit: cover;
}
</style>