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

<!--
 * @Author: LiZhiWei
 * @Date: 2026-01-21 08:51:46
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-21 12:01:59
 * @Description: 
-->
<template>
  <section class="bg-#F6F8FD py-100px lt-sm:py-120px">
    <div class="landing-container lt-sm:px-32px">
      <!-- Top Section -->
      <div>
        <div class="flex items-center justify-between gap-68px lt-sm:flex-col lt-sm:gap-36px">
          <div
            class="flex items-center w-264px whitespace-nowrap lt-sm:w-full lt-sm:justify-center"
          >
            <span class="font-s-36px pf-sc-semibold text-#0F67F8 lt-sm:font-s-48px">绘家科技</span>
            <span class="font-s-36px pf-sc-semibold text-#000000 lt-sm:font-s-48px">是谁</span>
            <span
              class="inline-block w-32px h-6px bg-#1E293B align-middle ml-16px lt-sm:hidden"
            ></span>
          </div>
          <div>
            <span
              class="font-s-16px text-#000000 lh-26px pf-sc-regular lt-sm:font-s-26px lt-sm:lh-42px"
            >
              海南绘家科技有限公司矢志成为优秀的智慧社区组整体解决方案供应商和完整居住社区整体解决方案供应商。公司以技术研发为核心，深耕物业行业，致力于借助智能硬件、互联网、物联网、云计算、大数据分析、人工智能等技术推动物业服务企业发展线上线下社区服务业，实现数字化、智能化、精细化的管理与服务提升物业服务品质，提高企业管理效率，助力智慧社区建设。
            </span>
          </div>
        </div>
        <div class="mt-32px">
          <span
            class="font-s-16px text-#000000 lh-26px pf-sc-regular lt-sm:font-s-26px lt-sm:lh-42px"
          >
            目前，公司拥有绘管家物业综合管理云平台、绘服务居民在线服务平台、绘享云大数据分析平台、无人值守停车场、人脸识别门禁、智能监控、智能充电桩、远程抄表、机械环保作业设备、地勤指挥中心、物业综合配套等全方位的智慧物业和智慧社区解决方案及服务体系。截止2025年12月绘管家已在住宅小区、商业广场、写字楼、政企办公楼、医院、工业园区、菜篮子农贸市场7个业态的项目落地，绘管家平台管理面积超1800万平方米，覆盖近800多个小区、50万+套房屋。
          </span>
        </div>
      </div>
      <!-- Bottom Section -->
      <div
        class="mt-80px flex items-stretch justify-between gap-32px lt-sm:flex-col lt-sm:mt-120px lt-sm:gap-56px"
      >
        <!-- Left Content -->
        <div class="flex-1 flex flex-col gap-72px lt-sm:items-center lt-sm:gap-56px">
          <div class="font-s-36px pf-sc-semibold lh-normal lt-sm:font-s-48px lt-sm:text-center">
            <span class="text-#0F67F8">800+家</span>
            <span>小区已经选择绘家</span>
          </div>
          <div class="grid grid-cols-3 gap-y-48px lt-sm:gap-x-36px lt-sm:gap-y-36px">
            <div v-for="(item, index) in stats" :key="index">
              <div class="font-s-14px text-#384146 mb-8px pf-sc-regular lt-sm:font-s-24px">
                {{ item.label }}
              </div>
              <div
                class="font-s-38px text-#091221 d-din-pro-600-semibold lh-38px lt-sm:font-s-48px lt-sm:lh-48px"
              >
                {{ item.value }}
              </div>
            </div>
          </div>
          <button
            class="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 lt-sm:hidden"
          >
            <span class="font-s-16px pf-sc-regular">立即咨询</span>
            <div class="i-custom-arrow-right wh-18px"></div>
          </button>
        </div>

        <!-- Right Video Card -->
        <div
          class="flex-1 lt-sm:min-h-420px lt-sm:flex-shrink-0 play-box flex-center rounded-16px shadow-sm"
        >
          <!-- 极致毛玻璃圆盘 -->
          <div
            class="wh-84px lt-sm:wh-96px rounded-full flex items-center justify-center cursor-pointer hover:scale-110 hover:lt-sm:scale-100 transition-transform duration-300"
            style="
              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);
            "
          >
            <i class="i-custom-play wh-84px"></i>
          </div>
        </div>
      </div>
    </div>
  </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亿/年' },
  ]
</script>

<style scoped lang="scss">
  .play-box {
    background-image: url('~/assets/images/play-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: fill;
  }
</style>