comclib
c02029a5f3
- Spring Boot 后端服务 (hss-home-service) - delivery-miniapp 配送小程序 - website 官网 (Nuxt) - docs 架构设计文档 - Docker 容器化部署配置 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
21 lines
1.2 KiB
Vue
21 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
const ends = [
|
|
{ title: '服务对象/家属端', desc: '申请服务、查看方案、签署确认、验收评价、支付结算', color: 'border-primary', bg: 'bg-primary-50', img: 'people' },
|
|
{ title: '服务人员 Delivery 端', desc: '接单确认、GPS签到、项目级执行、异常上报、证据上传', color: 'border-accent', bg: 'bg-accent-50', img: 'technology' },
|
|
{ title: '机构管理/监管端', desc: '受理派单、调度台、数据看板、质量监管、结算审核、合规审计', color: 'border-cta', bg: 'bg-orange-50', img: 'office' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div v-for="(e, i) in ends" :key="i"
|
|
class="rounded-2xl border-2 p-8 text-center transition-all duration-300 hover:shadow-lg"
|
|
:class="[e.color, e.bg]">
|
|
<img :src="`https://loremflickr.com/240/160/${e.img}`"
|
|
:alt="e.title + '（示意素材，待替换）'" class="w-full h-40 object-cover rounded-xl mb-6" width="240" height="160" loading="lazy" />
|
|
<h3 class="font-bold text-xl mb-3">{{ e.title }}</h3>
|
|
<p class="text-sm text-text-secondary leading-relaxed">{{ e.desc }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|