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">About Us</h1>
        <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
          <li>
            <a href="p9wfc14694.html">Home</a>
          </li>
          <li>
            <i class="fas fa-chevron-right"></i>
          </li>
          <li>About Us</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">关于我们</span>
                <h2 class="wow fadeInUp" data-wow-delay=".3s">
                  公司介绍
                  <br />
                </h2>
              </div>
              <p class="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".5s">
                慧可文化传播（重庆）有限公司是一家致力于科技创新与文化服务深度融合的高新技术企业。我们专注于指导全球儿童和青少年的汉语入门。这个创新平台致力于 6-18 岁外国儿童和青少年的中文教育。
              </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">
                      <h5>80%</h5>
                      <p>
                        具有海外教学经验的教师
                        <br />
                        <!-- nullam imperdiet -->
                      </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">

                    <div class="content text-center">
                      <h5>98%</h5>
                      <p>
                        HSK通过率超过
                        <br />
                        <!-- nullam imperdiet -->
                      </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">
                      <h5>10000+</h5>
                      <p>
                        会员开始他们的中文学习之旅
                        <br />
                        <!-- maecenas ante. -->
                      </p>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="feature-value-section fix section-padding section-bg-2">
    <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">我们的故事</span>
        <h2 class="wow fadeInUp" data-wow-delay=".3s">
          品牌故事
          <br />
          <!-- for your kid -->
        </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>2024年除夕夜</h5>
                <p>
                  开心中文‌在新年的鞭炮声中诞生
                </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>2025年1月</h5>
                <p>
                  组建研发团队
                </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">
              <img src="/aboutImg/Container1.svg" alt="img" />
              <!-- <div class="value-shape">
                <img src="/picture/cta-shape-2.png" alt="shape-img" />
              </div> -->
            </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>2025年3月​</h5>
                <p>
                  组建教育团队
                </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>目前</h5>
                <p>
                  成为海外家庭首选的“一站式中文成长伙伴”
                </p>
              </div>
              <div class=" color-2 color-4">
                <img src="/aboutImg/Overlay4.svg" alt="img" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section>
    <div class="main-container">
        <div class="title-section">
            <h3>品牌文化</h3>
            <h2>我们努力践行的文化</h2>
        </div>
        <div class="card-container">
            <div class="cloud-card orange-gradient">
                <h3>使命</h3>
                <p>以创新为动力，推动教育科技发展，打造卓越的在线学习平台，让知识传播更加便捷高效</p>
            </div>
            <div class="cloud-card teal-gradient">
                <h3>愿景</h3>
                <p>打造专业优质的教育生态系统，让每个人都能享受到优质的教育资源</p>
            </div>
            <div class="cloud-card slate-gradient">
                <h3>价值观</h3>
                <p>传承创新中华文化精髓，培养具有全球视野的新时代人才</p>
            </div>
        </div>
    </div>
  </section>
  <section>
    <div class="min-h-screen bg-gray-50">
    <div class="container">
      <!-- 标题区域 -->
      <div class="title-area">
        <h2>教育理念与价值观</h2>
        <p>始终坚持以学生为中心，为每一位学子打造优质教育体验</p>
      </div>

      <!-- 内容区域 -->
      <div class="content-area">
        <!-- 第一块内容 -->
        <div class="content-item">
          <div class="text-content">
            <h3>专业教师团队</h3>
            <div class="text-box">
              <p>
                拥有丰富的教学经验和专业背景，90% 以上的教师拥有研究生学历。始终坚持高标准的教学质量，为学生提供最优质的教育资源。
              </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>特色教学方式</h3>
            <div class="text-box">
              <p>
                将传统文化与现代教育相结合，采用互动式教学模式。通过丰富多样的课程设计，激发学生学习兴趣，培养全面发展的人才。
              </p>
            </div>
          </div>
          <div class="image-content">
            <img src="/aboutImg/software-hero-img.svg" style="left:0" alt="特色教学方式" />
          </div>
        </div>

        <!-- 第三块内容 -->
        <div class="content-item">
          <div class="text-content">
            <h3>个性化服务</h3>
            <div class="text-box">
              <p>
                提供贴心的教育服务支持，全方位关注每位学生的成长。我们致力于打造温馨舒适的学习环境，让每个孩子都能快乐学习。
              </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></script>
<style>
/* 整体容器样式 */
.main-container {
    min-height: 1024px;
    width: 1440px;
    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: 240px;
    padding: 2.5rem;
    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;
}

.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 {
  min-height: 1024px;
  max-width: 1280px;
  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: 1.5rem;
}

.text-box p {
  color: #4b5563;
  line-height: 1.625;
}

.image-content {
  width: 50%;
  position: relative;
  padding-top: 75%;
  border-radius: 0.5rem;
  overflow: hidden;
}

.image-content img {
  position: absolute;
  top: 50%;

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