fix: about bg

app/components/section/History.vue

@@ -289,6 +289,9 @@
     background-size: cover;
     background-position: center;
     background-image: url('@/assets/images/history-bg.png');
+    @screen lt-sm {
+      background-image: url('@/assets/images/history-bg-mobile.png');
+    }
   }
 
   .history-container {

app/pages/about/components/about.vue

@@ -2,90 +2,65 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-21 08:51:46
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-21 12:01:59
+ * @LastEditTime: 2026-01-21 14:31:29
  * @Description: 
 -->
 <template>
-  <section class="bg-#F6F8FD py-100px lt-sm:py-120px">
-    <div class="landing-container lt-sm:px-32px">
+  <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="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 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="font-s-16px text-#000000 lh-26px pf-sc-regular lt-sm:font-s-26px lt-sm:lh-42px"
-            >
+            <span class="desc-text pf-sc-regular">
               海南绘家科技有限公司矢志成为优秀的智慧社区组整体解决方案供应商和完整居住社区整体解决方案供应商。公司以技术研发为核心，深耕物业行业，致力于借助智能硬件、互联网、物联网、云计算、大数据分析、人工智能等技术推动物业服务企业发展线上线下社区服务业，实现数字化、智能化、精细化的管理与服务提升物业服务品质，提高企业管理效率，助力智慧社区建设。
             </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"
-          >
+        <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="mt-80px flex items-stretch justify-between gap-32px lt-sm:flex-col lt-sm:mt-120px lt-sm:gap-56px"
-      >
+      <div class="bottom-section">
         <!-- 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>
+        <div class="left-content">
+          <div class="stats-title pf-sc-semibold">
+            <span class="stats-highlight">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 class="stats-grid">
             <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">
+              <div class="stat-label pf-sc-regular">
                 {{ 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"
-              >
+              <div class="stat-value d-din-pro-600-semibold">
                 {{ 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 class="consult-btn">
+            <span class="btn-text pf-sc-regular">立即咨询</span>
+            <div class="btn-icon"></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="video-card play-box">
           <!-- 极致毛玻璃圆盘 -->
-          <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 class="play-circle">
+            <i class="play-icon"></i>
           </div>
         </div>
       </div>
@@ -102,14 +77,143 @@
     { label: '房屋', value: '500000+' },
     { label: '账单资金', value: '15亿/年' },
   ]
+
+  const isAboutVisible = ref(false)
+  const aboutRef = ref(null)
+  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;
-    object-fit: fill;
+  }
+
+  .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>