fix: 解决方案动画

app/components/consultation-modal.vue

@@ -189,6 +189,8 @@
   })
 
   const close = () => {
+    formRef.value?.resetFields()
+    formRef.value?.clearValidate()
     emit('update:modelValue', false)
   }
 
@@ -197,14 +199,7 @@
 
     await formRef.value.validate((valid) => {
       if (valid) {
-        loading.value = true
-        // TODO: Implement submission logic
-        setTimeout(() => {
-          console.log('Form submitted:', form)
-          ElMessage.success('需求已提交，我们会尽快联系您！')
-          loading.value = false
-          close()
-        }, 1000)
+        close()
       }
     })
   }

app/pages/solutions/[id].vue

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-22 14:08:24
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-23 08:44:26
+ * @LastEditTime: 2026-01-23 11:26:02
  * @Description: 解决方案详情页
 -->
 <template>
@@ -22,7 +22,11 @@
     </section>
 
     <!-- Core Pain Points -->
-    <section class="section-container bg-white">
+    <section
+      ref="painPointsRef"
+      class="section-container bg-white transition-all duration-1000 ease-out"
+      :class="[isPainPointsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-50px']"
+    >
       <div class="landing-container lt-sm:px-32px">
         <h2 class="section-title pf-sc-semibold">{{ solution.corePoints.title }}</h2>
         <div class="grid grid-cols-3 gap-25px lt-sm:grid-cols-1">
@@ -40,7 +44,11 @@
     </section>
 
     <!-- Core Functions -->
-    <section class="section-container bg-#F6F8FD">
+    <section
+      ref="functionsRef"
+      class="section-container bg-#F6F8FD transition-all duration-1000 ease-out"
+      :class="[isFunctionsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-50px']"
+    >
       <div class="landing-container lt-sm:px-32px">
         <h2 class="section-title pf-sc-semibold">{{ solution.coreFunctions.title }}</h2>
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-24px mt-60px">
@@ -70,7 +78,11 @@
     </section>
 
     <!-- Core Effects -->
-    <section class="section-container bg-white">
+    <section
+      ref="effectsRef"
+      class="section-container bg-white transition-all duration-1000 ease-out"
+      :class="[isEffectsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-50px']"
+    >
       <div class="landing-container">
         <h2 class="section-title pf-sc-semibold">{{ solution.coreEffects.title }}</h2>
         <div
@@ -89,7 +101,12 @@
     </section>
 
     <!-- Typical Cases -->
-    <section v-if="currentCase" class="section-container solution-case">
+    <section
+      v-if="currentCase"
+      ref="casesRef"
+      class="section-container solution-case transition-all duration-1000 ease-out"
+      :class="[isCasesVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-50px']"
+    >
       <div class="landing-container lt-sm:px-32px">
         <h2 class="section-title pf-sc-semibold">{{ solution.typicalCases.title }}</h2>
         <div class="mt-60px lt-sm:mt-48px">
@@ -178,18 +195,17 @@
 
   const solution = computed(() => solutionPoints.find((item) => item.id === route.params.id))
 
-  useSeoMeta({
-    title: () => `${solution.value?.title || '解决方案'} - 绘家科技`,
-    description: () =>
-      solution.value?.description ||
-      '绘家科技致力于为物业管理公司提供数字化转型解决方案，提升服务品质与业主满意度。',
-    keywords: () =>
-      `${solution.value?.title},智慧物业,解决方案,绘家科技,${solution.value?.corePoints.points.map((p) => p.point).join(',')}`,
-    ogTitle: () => `${solution.value?.title || '解决方案'} - 绘家科技`,
-    ogDescription: () =>
-      solution.value?.description ||
-      '绘家科技致力于为物业管理公司提供数字化转型解决方案，提升服务品质与业主满意度。',
-  })
+  const painPointsRef = ref<HTMLElement | null>(null)
+  const { isVisible: isPainPointsVisible } = useScrollReveal(painPointsRef)
+
+  const functionsRef = ref<HTMLElement | null>(null)
+  const { isVisible: isFunctionsVisible } = useScrollReveal(functionsRef)
+
+  const effectsRef = ref<HTMLElement | null>(null)
+  const { isVisible: isEffectsVisible } = useScrollReveal(effectsRef)
+
+  const casesRef = ref<HTMLElement | null>(null)
+  const { isVisible: isCasesVisible } = useScrollReveal(casesRef)
 
   const activeCaseIndex = ref(0)
   const currentCase = computed(() => {
@@ -209,6 +225,19 @@
       activeCaseIndex.value--
     }
   }
+
+  useSeoMeta({
+    title: () => `${solution.value?.title || '解决方案'} - 绘家科技`,
+    description: () =>
+      solution.value?.description ||
+      '绘家科技致力于为物业管理公司提供数字化转型解决方案，提升服务品质与业主满意度。',
+    keywords: () =>
+      `${solution.value?.title},智慧物业,解决方案,绘家科技,${solution.value?.corePoints.points.map((p) => p.point).join(',')}`,
+    ogTitle: () => `${solution.value?.title || '解决方案'} - 绘家科技`,
+    ogDescription: () =>
+      solution.value?.description ||
+      '绘家科技致力于为物业管理公司提供数字化转型解决方案，提升服务品质与业主满意度。',
+  })
 </script>
 
 <style scoped lang="scss">