feat: 初始化居家上门服务系统完整项目代码
- Spring Boot 后端服务 (hss-home-service) - delivery-miniapp 配送小程序 - website 官网 (Nuxt) - docs 架构设计文档 - Docker 容器化部署配置 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
42
hss-home-service/website/components/ServiceLoopFlow.vue
Normal file
42
hss-home-service/website/components/ServiceLoopFlow.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { useScrollAnim } from '~/composables/useScrollAnim'
|
||||
|
||||
const steps = [
|
||||
{ num: '01', title: '需求受理', desc: '多渠道统一接入\n自动校验与审核' },
|
||||
{ num: '02', title: '能力评估', desc: '上门评估定级\nGPS签到+拍照' },
|
||||
{ num: '03', title: '方案制定', desc: '个性化服务方案\n费用透明计算' },
|
||||
{ num: '04', title: '智能派单', desc: '算法匹配推荐\n人工确认兜底' },
|
||||
{ num: '05', title: '上门执行', desc: 'GPS签到校验\n项目级执行记录' },
|
||||
{ num: '06', title: '过程监管', desc: '抽查违规整改\n审计日志追溯' },
|
||||
{ num: '07', title: '验收评价', desc: '星级+标签评价\n评分影响后续派单' },
|
||||
{ num: '08', title: '结算归档', desc: '自动汇总结算\n电子台账归档' },
|
||||
]
|
||||
|
||||
const { observe } = useScrollAnim()
|
||||
onMounted(() => {
|
||||
document.querySelectorAll('.flow-step').forEach((el, i) => {
|
||||
observe(el, { delay: i * 100, class: 'flow-visible' })
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<div class="hidden lg:block absolute top-1/2 left-[5%] right-[5%] h-0.5 bg-gray-200 -translate-y-1/2 z-0" />
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 relative z-10">
|
||||
<div v-for="(s, i) in steps" :key="i"
|
||||
class="flow-step bg-white rounded-2xl p-5 md:p-6 text-center shadow-sm opacity-0 translate-y-8 transition-all duration-500 hover:shadow-lg group">
|
||||
<span class="w-12 h-12 mx-auto mb-4 rounded-full bg-gradient-to-br from-primary-50 to-accent-50 text-primary font-bold text-sm flex items-center justify-center group-hover:from-primary group-hover:to-accent group-hover:text-white transition-all">
|
||||
{{ s.num }}
|
||||
</span>
|
||||
<h4 class="font-bold text-sm mb-1">{{ s.title }}</h4>
|
||||
<p class="text-xs text-text-secondary whitespace-pre-line leading-relaxed">{{ s.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.flow-visible { opacity: 1; transform: translateY(0); }
|
||||
</style>
|
||||
Reference in New Issue
Block a user