huijia-website/app/pages/about/components/about.vue

<!--
 * @Author: LiZhiWei
 * @Date: 2026-01-21 08:51:46
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-21 16:20:49
 * @Description: 
-->
<template>
  <section
    ref="aboutRef"
    class="about-section transition-all duration-1000 ease-out"
    :class="[isAboutVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
  >
    <div class="inner-container">
      <!-- Top Section -->
      <div>
        <div class="top-header">
          <div class="title-wrapper pf-sc-semibold">
            <span class="brand-text">绘家科技</span>
            <span class="who-is-text">是谁</span>
            <span class="separator"></span>
          </div>
          <div>
            <span class="desc-text pf-sc-regular">
              海南绘家科技有限公司矢志成为优秀的智慧社区组整体解决方案供应商和完整居住社区整体解决方案供应商。公司以技术研发为核心，深耕物业行业，致力于借助智能硬件、互联网、物联网、云计算、大数据分析、人工智能等技术推动物业服务企业发展线上线下社区服务业，实现数字化、智能化、精细化的管理与服务提升物业服务品质，提高企业管理效率，助力智慧社区建设。
            </span>
          </div>
        </div>
        <div class="company-desc-wrapper">
          <span class="desc-text pf-sc-regular">
            目前，公司拥有绘管家物业综合管理云平台、绘服务居民在线服务平台、绘享云大数据分析平台、无人值守停车场、人脸识别门禁、智能监控、智能充电桩、远程抄表、机械环保作业设备、地勤指挥中心、物业综合配套等全方位的智慧物业和智慧社区解决方案及服务体系。截止2025年12月绘管家已在住宅小区、商业广场、写字楼、政企办公楼、医院、工业园区、菜篮子农贸市场7个业态的项目落地，绘管家平台管理面积超1800万平方米，覆盖近800多个小区、50万+套房屋。
          </span>
        </div>
      </div>
      <!-- Bottom Section -->
      <div class="bottom-section">
        <!-- Left Content -->
        <div class="left-content">
          <div class="stats-title pf-sc-semibold">
            <span class="stats-highlight">800+家</span>
            <span>小区已经选择绘家</span>
          </div>
          <div class="stats-grid">
            <div v-for="(item, index) in stats" :key="index">
              <div class="stat-label pf-sc-regular">
                {{ item.label }}
              </div>
              <div class="stat-value d-din-pro-600-semibold">
                {{ item.value }}
              </div>
            </div>
          </div>
          <button class="consult-btn">
            <span class="btn-text pf-sc-regular">立即咨询</span>
            <div class="btn-icon"></div>
          </button>
        </div>

        <!-- Right Video Card -->
        <div class="video-card play-box">
          <!-- 极致毛玻璃圆盘 -->
          <div class="play-circle" @click="playVideo">
            <i class="play-icon"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- Video Modal -->
    <Teleport to="body">
      <div
        v-if="isVideoPlaying"
        class="fixed inset-0 z-999 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in"
        @click.self="closeVideo"
      >
        <button
          class="absolute top-30 right-10% lt-sm:right-20px lt-sm:top-20px text-white/80 hover:text-white transition-colors cursor-pointer"
          @click="closeVideo"
        >
          <i class="i-ep-close wh-48px lt-sm:wh-48px"></i>
        </button>
        <div
          class="relative w-full max-w-1000px mx-20px aspect-video bg-black overflow-hidden shadow-2xl"
        >
          <video
            src="https://cloud.video.taobao.com/play/u/1057773/p/1/d/sd/e/6/t/1/550775295418.mp4?auth_key=YXBwX2tleT04MDAwMDAwMTImYXV0aF9pbmZvPXsidGltZXN0YW1wRW5jcnlwdGVkIjoiZTQ1OGVhOGExMDdkODQ5MGE2ODBkZDNlYTk5YzI0MDkifSZkdXJhdGlvbj0mdGltZXN0YW1wPTE3Njg4NzM3MTg="
            controls
            autoplay
            class="w-full h-full object-contain"
          ></video>
        </div>
      </div>
    </Teleport>
  </section>
</template>

<script setup lang="ts">
  const stats = [
    { label: '遍布城市', value: '30+' },
    { label: '服务客户', value: '300+' },
    { label: '管理小区', value: '800+' },
    { label: '城市合伙人', value: '3+' },
    { label: '房屋', value: '500000+' },
    { label: '账单资金', value: '15亿/年' },
  ]

  const isAboutVisible = ref(false)
  const isVideoPlaying = ref(false)
  const aboutRef = ref(null)

  const playVideo = () => {
    isVideoPlaying.value = true
  }

  const closeVideo = () => {
    isVideoPlaying.value = false
  }

  onMounted(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return
          isAboutVisible.value = true
          observer.unobserve(entry.target)
        })
      },
      { threshold: 0.1 }
    )

    if (aboutRef.value) {
      observer.observe(aboutRef.value)
    }
  })
</script>

<style scoped lang="scss">
  .about-section {
    @apply bg-white py-100px;
    @apply lt-sm:py-120px;
  }

  .inner-container {
    @apply lt-sm:px-32px;
    @extend %landing-container;
  }

  .top-header {
    @apply flex items-center justify-between gap-68px;
    @apply lt-sm:flex-col lt-sm:gap-36px;
  }

  .title-wrapper {
    @apply flex items-center w-264px whitespace-nowrap;
    @apply lt-sm:w-full lt-sm:justify-center;
  }

  .brand-text {
    @apply font-s-36px  text-#0F67F8;
    @apply lt-sm:font-s-48px;
  }

  .who-is-text {
    @apply font-s-36px text-#000000;
    @apply lt-sm:font-s-48px;
  }

  .separator {
    @apply inline-block w-32px h-6px bg-#1E293B align-middle ml-16px;
    @apply lt-sm:hidden;
  }

  .desc-text {
    @apply font-s-16px text-#000000 lh-26px;
    @apply lt-sm:font-s-26px lt-sm:lh-42px;
  }

  .company-desc-wrapper {
    @apply mt-32px;
  }

  .bottom-section {
    @apply mt-80px flex items-stretch justify-between gap-32px;
    @apply lt-sm:flex-col lt-sm:mt-120px lt-sm:gap-56px;
  }

  .left-content {
    @apply flex-1 flex flex-col gap-72px;
    @apply lt-sm:items-center lt-sm:gap-56px;
  }

  .stats-title {
    @apply font-s-36px lh-normal;
    @apply lt-sm:font-s-48px lt-sm:text-center;
  }

  .stats-highlight {
    @apply text-#0F67F8;
  }

  .stats-grid {
    @apply grid grid-cols-3 gap-y-48px;
    @apply lt-sm:gap-x-144px lt-sm:gap-y-36px lt-sm:grid-cols-2;
  }

  .stat-label {
    @apply font-s-14px text-#384146 mb-8px;
    @apply lt-sm:font-s-24px;
  }

  .stat-value {
    @apply font-s-38px text-#091221 d-din-pro-600-semibold lh-38px;
    @apply lt-sm:font-s-56px lt-sm:lh-56px;
  }

  .consult-btn {
    @apply bg-#1A73E8 text-white px-15px py-16px w-268px rounded-8px flex items-center justify-between hover:opacity-80 transition-colors cursor-pointer border-none;
    @apply lt-sm:hidden;
  }

  .btn-text {
    @apply font-s-16px;
  }

  .btn-icon {
    @apply i-custom-arrow-right wh-18px;
  }

  .video-card {
    @apply flex-1 flex-center rounded-16px shadow-sm relative overflow-hidden;
    @apply lt-sm:min-h-420px lt-sm:flex-shrink-0;
  }

  .play-box {
    background-image: url('~/assets/images/play-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .play-circle {
    @apply wh-84px rounded-full flex items-center justify-center cursor-pointer hover:scale-110 transition-transform duration-300;
    @apply lt-sm:wh-96px hover:lt-sm:scale-100;

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1.5px solid rgba(255, 255, 255, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  .play-icon {
    @apply i-custom-play wh-84px;
  }
</style>