Jelajahi Sumber

feat: about

Lee 3 hari lalu
induk
melakukan
d3061aed4a

File diff ditekan karena terlalu besar
+ 6 - 0
app/assets/icons/cp-hfw.svg


File diff ditekan karena terlalu besar
+ 6 - 0
app/assets/icons/cp-hgj.svg


+ 3 - 0
app/assets/icons/play.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 98 98" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M38.083 49.0001V37.1482C38.083 34.8496 40.5621 33.4049 42.562 34.5382L53.083 40.5001L63.477 46.39C65.505 47.5392 65.505 50.461 63.477 51.6101L53.083 57.5001L42.562 63.4619C40.5621 64.5952 38.083 63.1506 38.083 60.8519V49.0001Z" fill="white"/>
+</svg>

TEMPAT SAMPAH
app/assets/images/about-mobile.png


TEMPAT SAMPAH
app/assets/images/play-bg.png


+ 4 - 4
app/components/Header.vue

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-13 15:41:49
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-20 17:02:39
+ * @LastEditTime: 2026-01-21 11:59:09
  * @Description: 
 -->
 <!--
@@ -12,7 +12,7 @@
 <template>
   <header class="landing-header" :class="{ 'is-scrolled': y > 0 }">
     <div
-      class="landing-container h-80px flex items-center justify-between gap-16px lt-sm:h-128px lt-xs:px-15px"
+      class="landing-container h-80px flex items-center justify-between gap-16px lt-sm:h-128px lt-sm:px-24px"
     >
       <i class="i-custom-logo w-160px h-32px lt-sm:w-213px lt-sm:h-64px"></i>
 
@@ -74,7 +74,7 @@
         </div>
 
         <NuxtLink to="/" class="nav-link flex items-center">客户案例</NuxtLink>
-        <NuxtLink to="/" class="nav-link flex items-center">关于绘家</NuxtLink>
+        <NuxtLink to="/about" class="nav-link flex items-center">关于绘家</NuxtLink>
         <NuxtLink to="/" class="nav-link flex items-center">联系合作</NuxtLink>
       </nav>
 
@@ -167,7 +167,7 @@
           <i class="i-ep-arrow-right text-gray-300 text-12px group-active:text-#0F67F8"></i>
         </NuxtLink>
         <NuxtLink
-          to="/"
+          to="/about"
           class="mobile-nav-item flex items-center justify-between group"
           @click="isMobileMenuOpen = false"
         >

+ 3 - 1
app/components/section/Ability.vue

@@ -17,7 +17,9 @@
           v-for="tab in abilityTabs"
           :key="tab.title"
           class="ability-tab-item"
-          :class="[activeAbilityTab.id === tab.id ? 'text-white' : 'text-#091221 hover:text-#0F67F8']"
+          :class="[
+            activeAbilityTab.id === tab.id ? 'text-white' : 'text-#091221 hover:text-#0F67F8',
+          ]"
           @click="handleAbilityTabClick(tab)"
         >
           {{ tab.title }}

+ 115 - 0
app/pages/about/components/about.vue

@@ -0,0 +1,115 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2026-01-21 08:51:46
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2026-01-21 11:56:22
+ * @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"
+      >
+        <!-- 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>

+ 31 - 0
app/pages/about/components/banner.vue

@@ -0,0 +1,31 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2026-01-21 08:50:15
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2026-01-21 10:45:48
+ * @Description: 
+-->
+<template>
+  <div class="banner">
+    <div class="flex-center pt-168px gap-48px lt-sm:flex-col lt-sm:gap-0px lt-sm:pt-84px">
+      <span class="font-s-48px pf-sc-semibold text-black lt-sm:font-s-62px">
+        以科技赋能物业企业
+      </span>
+      <span class="font-s-48px text-#0F67F8 pf-sc-semibold lt-sm:font-s-62px">
+        驱动管理效率跃升
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped lang="scss">
+  .banner {
+    @apply h-680px w-full bg-cover bg-center;
+    @apply lt-sm:h-750px;
+    background-image: url('@/assets/images/about-bg.png');
+    @screen lt-sm {
+      background-image: url('~/assets/images/about-mobile.png');
+    }
+  }
+</style>

+ 27 - 0
app/pages/about/index.vue

@@ -0,0 +1,27 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2026-01-21 08:34:10
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2026-01-21 09:09:48
+ * @Description: 
+-->
+<template>
+  <div class="landing">
+    <banner />
+    <about />
+    <section-history />
+    <section-cta />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Banner from './components/banner.vue'
+  import About from './components/about.vue'
+</script>
+<style scoped lang="scss">
+  .landing {
+    @apply lt-sm:pt-120px;
+    color: var(--hj-text);
+    background: var(--hj-bg);
+  }
+</style>

+ 2 - 2
nuxt.config.ts

@@ -3,7 +3,7 @@
  * @Author: wjc
  * @Date: 2023-10-25 19:39:32
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-20 16:41:11
+ * @LastEditTime: 2026-01-21 11:17:45
  * @Description:
  */
 import { loadEnv } from 'vite'
@@ -68,7 +68,7 @@ export default defineNuxtConfig({
   },
   app: {
     head: {
-      viewport: 'width=device-width,initial-scale=1',
+      viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no',
       link: [
         { rel: 'icon', href: '/logo.png', sizes: 'any' },
         { rel: 'icon', href: '/logo.png' },

Beberapa file tidak ditampilkan karena terlalu banyak file yang berubah dalam diff ini