489 lines
36 KiB
HTML
489 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>Fonrey 客源详情页 · 静态原型</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: {
|
||
50: '#F0FDFA',
|
||
100: '#CCFBF1',
|
||
200: '#99F6E4',
|
||
500: '#14B8A6',
|
||
600: '#0F766E',
|
||
700: '#115E59',
|
||
800: '#134E4A'
|
||
},
|
||
neutral: {
|
||
50: '#F8FAFC',
|
||
100: '#F1F5F9',
|
||
200: '#E2E8F0',
|
||
300: '#CBD5E1',
|
||
400: '#94A3B8',
|
||
500: '#64748B',
|
||
600: '#475569',
|
||
700: '#334155',
|
||
800: '#1E293B',
|
||
900: '#0F172A'
|
||
},
|
||
success: { 50: '#F0FDF4', 600: '#16A34A' },
|
||
warning: { 50: '#FFFBEB', 600: '#D97706' },
|
||
danger: { 50: '#FEF2F2', 600: '#DC2626' },
|
||
info: { 50: '#EFF6FF', 600: '#2563EB' }
|
||
},
|
||
boxShadow: {
|
||
xs: '0 1px 2px rgba(15,23,42,0.04)'
|
||
},
|
||
fontFamily: {
|
||
sans: ['Inter', 'PingFang SC', 'Microsoft YaHei', 'sans-serif'],
|
||
mono: ['JetBrains Mono', 'SFMono-Regular', 'Menlo', 'monospace']
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
html { scroll-behavior: smooth; }
|
||
.tabular-nums { font-variant-numeric: tabular-nums; }
|
||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
|
||
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-neutral-50 text-sm text-neutral-700 antialiased" x-data="clientDetailPage()">
|
||
<header class="fixed top-0 left-0 right-0 h-14 z-20 bg-primary-800 flex items-center justify-between">
|
||
<div class="flex items-center gap-2 px-4 w-60 shrink-0">
|
||
<div class="w-7 h-7 rounded-md bg-primary-500 flex items-center justify-center text-white text-sm font-semibold">F</div>
|
||
<span class="text-base font-semibold text-white">Fonrey</span>
|
||
</div>
|
||
<nav class="flex items-center gap-1 flex-1 px-2" aria-label="主导航">
|
||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">主页</a>
|
||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">房源</a>
|
||
<a class="px-3 py-1.5 text-sm rounded-md bg-primary-600 text-white font-medium">客源</a>
|
||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">营销</a>
|
||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">交易</a>
|
||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">数据</a>
|
||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">人事</a>
|
||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">系统</a>
|
||
</nav>
|
||
<div class="flex items-center gap-1 px-4 shrink-0">
|
||
<button class="p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md" aria-label="消息">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022 23.848 23.848 0 0 0 5.454 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
|
||
</button>
|
||
<div class="flex items-center gap-2 pl-3 ml-1 border-l border-primary-700">
|
||
<div class="w-8 h-8 rounded-full bg-primary-600 text-white flex items-center justify-center text-sm font-semibold">魏</div>
|
||
<span class="text-sm font-medium text-primary-100">魏深</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<aside class="fixed left-0 top-14 h-[calc(100vh-56px)] w-60 z-20 border-r border-neutral-200 bg-white">
|
||
<nav class="p-3 space-y-0.5">
|
||
<div class="px-2 pt-2 pb-1 text-xs font-medium text-neutral-500 uppercase tracking-wide">客源管理</div>
|
||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md bg-primary-50 text-primary-700 font-medium">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg>
|
||
私客列表
|
||
</a>
|
||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">公客池</a>
|
||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">成交客</a>
|
||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">已删客源</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<main class="ml-60 pt-[72px] min-h-screen bg-neutral-50 px-6 py-5">
|
||
<div class="mx-auto max-w-[1600px] space-y-4">
|
||
<div class="flex items-start justify-between">
|
||
<div>
|
||
<nav class="flex items-center gap-1 text-xs text-neutral-500 mb-1" aria-label="面包屑">
|
||
<a class="hover:text-neutral-700">客源</a>
|
||
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
|
||
<a class="hover:text-neutral-700">私客管理</a>
|
||
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
|
||
<span class="text-neutral-700">姚叔叔置换电梯两房（上门）</span>
|
||
</nav>
|
||
<h1 class="text-xl font-semibold text-neutral-800">客源详情</h1>
|
||
<p class="text-xs text-neutral-500 mt-0.5">按 Section 连续展示，点击导航锚点快速定位</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-12 gap-6 items-start">
|
||
<section class="col-span-8 min-w-0 space-y-6">
|
||
<div class="bg-white border border-neutral-200 rounded-lg px-3 py-2 sticky top-16 z-30 shadow-xs">
|
||
<nav class="flex items-center gap-1 overflow-x-auto whitespace-nowrap" aria-label="详情分区导航">
|
||
<template x-for="item in navItems" :key="item.id">
|
||
<a :href="'#' + item.id"
|
||
@click.prevent="scrollToSection(item.id)"
|
||
:aria-current="activeSection === item.id ? 'true' : 'false'"
|
||
:class="activeSection === item.id ? 'bg-primary-50 text-primary-700 font-medium' : 'text-neutral-600 hover:bg-neutral-100 hover:text-neutral-800'"
|
||
class="px-3 py-1.5 text-sm rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40"
|
||
x-text="item.label"></a>
|
||
</template>
|
||
</nav>
|
||
</div>
|
||
|
||
<section id="section-requirements" class="scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4 section-anchor">
|
||
<header class="flex items-center justify-between">
|
||
<h2 class="text-base font-semibold text-neutral-800">需求信息</h2>
|
||
<button class="text-sm text-primary-600 hover:text-primary-700 hover:underline underline-offset-2">编辑</button>
|
||
</header>
|
||
<dl class="grid grid-cols-3 gap-x-6 gap-y-4">
|
||
<div class="space-y-1"><dt class="text-xs text-neutral-500">总价</dt><dd class="text-sm text-neutral-900 tabular-nums">550-600万元</dd></div>
|
||
<div class="space-y-1"><dt class="text-xs text-neutral-500">面积</dt><dd class="text-sm text-neutral-900 tabular-nums">100-110m2</dd></div>
|
||
<div class="space-y-1"><dt class="text-xs text-neutral-500">居室</dt><dd class="text-sm text-neutral-900">2居</dd></div>
|
||
<div class="space-y-1"><dt class="text-xs text-neutral-500">装修</dt><dd class="text-sm text-neutral-900">-</dd></div>
|
||
<div class="space-y-1"><dt class="text-xs text-neutral-500">朝向</dt><dd class="text-sm text-neutral-900">-</dd></div>
|
||
<div class="space-y-1"><dt class="text-xs text-neutral-500">楼层</dt><dd class="text-sm text-neutral-900">中楼层、低楼层</dd></div>
|
||
<div class="space-y-1"><dt class="text-xs text-neutral-500">楼龄</dt><dd class="text-sm text-neutral-900">-</dd></div>
|
||
<div class="space-y-1"><dt class="text-xs text-neutral-500">意向商圈</dt><dd class="text-sm text-neutral-900">-</dd></div>
|
||
<div class="space-y-1"><dt class="text-xs text-neutral-500">意向小区</dt><dd class="text-sm text-neutral-900">-</dd></div>
|
||
<div class="space-y-1"><dt class="text-xs text-neutral-500">交通情况</dt><dd class="text-sm text-neutral-900">-</dd></div>
|
||
<div class="space-y-1 col-span-3"><dt class="text-xs text-neutral-500">备注</dt><dd class="text-sm text-neutral-900">-</dd></div>
|
||
</dl>
|
||
</section>
|
||
|
||
<section id="section-follow" class="scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4 section-anchor">
|
||
<header class="flex items-center justify-between">
|
||
<h2 class="text-base font-semibold text-neutral-800">跟进记录</h2>
|
||
<button @click="drawerOpen=true" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700 active:bg-primary-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Z"/></svg>
|
||
写跟进
|
||
</button>
|
||
</header>
|
||
|
||
<div class="flex items-center gap-2 flex-wrap">
|
||
<button class="px-3 py-1 text-xs rounded-full bg-primary-600 text-white">全部</button>
|
||
<button class="px-3 py-1 text-xs rounded-full bg-neutral-100 text-neutral-600 hover:bg-neutral-200">写入跟进</button>
|
||
<button class="px-3 py-1 text-xs rounded-full bg-neutral-100 text-neutral-600 hover:bg-neutral-200">敏感信息跟进</button>
|
||
<button class="px-3 py-1 text-xs rounded-full bg-neutral-100 text-neutral-600 hover:bg-neutral-200">修改跟进</button>
|
||
<button class="px-3 py-1 text-xs rounded-full bg-neutral-100 text-neutral-600 hover:bg-neutral-200">其他跟进</button>
|
||
</div>
|
||
|
||
<div class="border border-neutral-200 rounded-md p-3 bg-neutral-50 flex items-center gap-3 flex-wrap text-xs text-neutral-600">
|
||
<span class="text-neutral-500">筛选</span>
|
||
<input class="px-2 py-1 rounded border border-neutral-300 bg-white text-xs" placeholder="开始日期">
|
||
<span>至</span>
|
||
<input class="px-2 py-1 rounded border border-neutral-300 bg-white text-xs" placeholder="结束日期">
|
||
<label class="inline-flex items-center gap-1"><input type="checkbox" class="rounded border-neutral-300">有录音</label>
|
||
<label class="inline-flex items-center gap-1"><input type="checkbox" class="rounded border-neutral-300">有图片</label>
|
||
</div>
|
||
|
||
<ol class="relative border-l-2 border-neutral-200 ml-3 space-y-4 pl-5">
|
||
<li class="relative">
|
||
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-primary-600 ring-4 ring-white"></span>
|
||
<div class="rounded-md border border-neutral-200 p-3 bg-white space-y-1">
|
||
<div class="flex items-center gap-2 text-xs text-neutral-500">
|
||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-info-50 text-info-600 font-medium">电话</span>
|
||
<time class="tabular-nums">11:25</time>
|
||
</div>
|
||
<p class="text-sm text-neutral-700">433弄5楼65.85平想置换，丽晶苑2/3号楼，楼层不要太高，自己房子还没有挂牌。</p>
|
||
<p class="text-xs text-neutral-500">都市港湾店一组 雷威 · 2026-04-19</p>
|
||
</div>
|
||
</li>
|
||
<li class="relative">
|
||
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-warning-600 ring-4 ring-white"></span>
|
||
<div class="rounded-md border border-warning-600/20 bg-warning-50 p-3 space-y-1">
|
||
<div class="flex items-center gap-2 text-xs text-neutral-500">
|
||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-warning-50 text-warning-600 font-medium">敏感查看</span>
|
||
<time class="tabular-nums">11:23</time>
|
||
</div>
|
||
<p class="text-sm text-neutral-700">查看联系人完整号码，系统自动留痕。</p>
|
||
<p class="text-xs text-neutral-500">系统记录 · 2026-04-19</p>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
|
||
<div class="text-center pt-1">
|
||
<button class="text-sm text-primary-600 hover:text-primary-700 hover:underline underline-offset-2">查看全部跟进</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="section-viewings" class="scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4 section-anchor">
|
||
<header class="flex items-center justify-between">
|
||
<h2 class="text-base font-semibold text-neutral-800">带看记录</h2>
|
||
<div class="flex items-center gap-2">
|
||
<button class="px-3 py-1.5 text-sm font-medium bg-white border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 hover:border-neutral-400">新增预约</button>
|
||
<button class="px-3 py-1.5 text-sm font-medium bg-white border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 hover:border-neutral-400">新增带看</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="border border-neutral-200 rounded-md p-3 bg-neutral-50 flex items-center gap-3 flex-wrap text-xs text-neutral-600">
|
||
<label class="inline-flex items-center gap-1"><input type="checkbox" class="rounded border-neutral-300">归属人带看</label>
|
||
<label class="inline-flex items-center gap-1"><input type="checkbox" class="rounded border-neutral-300">其他人带看</label>
|
||
<input class="px-2 py-1 rounded border border-neutral-300 bg-white text-xs" placeholder="开始日期">
|
||
<span>至</span>
|
||
<input class="px-2 py-1 rounded border border-neutral-300 bg-white text-xs" placeholder="结束日期">
|
||
</div>
|
||
|
||
<ol class="relative border-l-2 border-neutral-200 ml-3 space-y-4 pl-5">
|
||
<li class="relative">
|
||
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-primary-600 ring-4 ring-white"></span>
|
||
<div class="rounded-md border border-neutral-200 p-3 bg-white space-y-1">
|
||
<p class="text-xs text-neutral-500 tabular-nums">2026-04-17 20:30</p>
|
||
<p class="text-sm text-neutral-700">带看情况：客户继续维护</p>
|
||
<p class="text-sm"><a class="text-primary-600 hover:underline" href="#">金沙丽晶苑一期-001-1201</a></p>
|
||
<p class="text-xs text-neutral-500"><span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 font-medium">一看</span> 带看：雷威 · <a class="text-primary-600 hover:underline" href="#">详情 ></a></p>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<section id="section-insights" class="scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4 section-anchor">
|
||
<header class="flex items-center justify-between">
|
||
<h2 class="text-base font-semibold text-neutral-800">客源解读</h2>
|
||
<span class="text-xs text-neutral-500">更新时间：2026-04-25 09:12</span>
|
||
</header>
|
||
|
||
<div class="grid grid-cols-3 gap-3">
|
||
<div class="border border-neutral-200 rounded-md p-3 bg-white">
|
||
<p class="text-xs text-neutral-500">活跃行为</p>
|
||
<p class="mt-1 text-xl font-semibold text-neutral-900 tabular-nums">7 天内</p>
|
||
</div>
|
||
<div class="border border-neutral-200 rounded-md p-3 bg-white">
|
||
<p class="text-xs text-neutral-500">工作日活跃</p>
|
||
<p class="mt-1 text-xl font-semibold text-neutral-900 tabular-nums">-</p>
|
||
</div>
|
||
<div class="border border-neutral-200 rounded-md p-3 bg-white">
|
||
<p class="text-xs text-neutral-500">周末活跃</p>
|
||
<p class="mt-1 text-xl font-semibold text-neutral-900 tabular-nums">-</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-3 gap-3">
|
||
<div class="border border-neutral-200 rounded-md p-3 text-center">
|
||
<p class="text-xs text-neutral-500">价格偏好</p>
|
||
<p class="mt-2 text-2xl font-semibold text-primary-600 tabular-nums">64%</p>
|
||
</div>
|
||
<div class="border border-neutral-200 rounded-md p-3 text-center">
|
||
<p class="text-xs text-neutral-500">户型偏好</p>
|
||
<p class="mt-2 text-2xl font-semibold text-primary-600 tabular-nums">22%</p>
|
||
</div>
|
||
<div class="border border-neutral-200 rounded-md p-3 text-center">
|
||
<p class="text-xs text-neutral-500">面积偏好</p>
|
||
<p class="mt-2 text-2xl font-semibold text-primary-600 tabular-nums">14%</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="section-matches" class="scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4 section-anchor">
|
||
<header class="flex items-center justify-between">
|
||
<h2 class="text-base font-semibold text-neutral-800">二手配房</h2>
|
||
<button class="px-3 py-1.5 text-sm font-medium bg-white border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 hover:border-neutral-400">批量分享</button>
|
||
</header>
|
||
|
||
<div class="space-y-3">
|
||
<h3 class="text-sm font-semibold text-neutral-700">优质户型</h3>
|
||
<article class="border border-neutral-200 rounded-md p-3">
|
||
<div class="flex gap-3">
|
||
<div class="w-20 h-14 rounded bg-neutral-100"></div>
|
||
<div class="min-w-0 flex-1">
|
||
<p class="text-sm font-medium text-primary-600 hover:underline cursor-pointer">都市港湾</p>
|
||
<p class="text-xs text-neutral-500">2/2/1 · 101.17m2 · 嘉定 丰庄</p>
|
||
<div class="mt-1 flex items-center gap-1">
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-[11px] rounded bg-warning-50 text-warning-600">朝南户型采光好</span>
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-[11px] rounded bg-info-50 text-info-600">私盘</span>
|
||
</div>
|
||
<p class="mt-1 text-sm font-medium text-neutral-900 tabular-nums">620万 <span class="text-xs font-normal text-neutral-500">已跌20万 · 61283元/m2</span></p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
|
||
<aside class="col-span-4 min-w-0 space-y-3 sticky top-16 max-h-[calc(100vh-80px)] overflow-y-auto">
|
||
<section class="bg-white rounded-lg border border-neutral-200 overflow-hidden">
|
||
<div class="bg-primary-600 px-4 py-3">
|
||
<div class="flex items-start gap-2">
|
||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-white/20 text-white">求购</span>
|
||
<div class="min-w-0">
|
||
<h2 class="text-sm font-semibold text-white truncate">姚叔叔置换电梯两房（上门）先生</h2>
|
||
<p class="text-xs text-white/80 mt-0.5">带看进度：一看</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 space-y-3">
|
||
<div class="flex items-center gap-1.5 flex-wrap">
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-xs rounded bg-neutral-100 text-neutral-600">私客</span>
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-xs rounded bg-primary-50 text-primary-700">一看</span>
|
||
<span class="inline-flex items-center px-1.5 py-0.5 text-xs rounded bg-warning-50 text-warning-600">C(一般)</span>
|
||
</div>
|
||
|
||
<dl class="space-y-1.5">
|
||
<div class="grid grid-cols-[72px_1fr] gap-2"><dt class="text-xs text-neutral-500">最近跟进</dt><dd class="text-xs text-right text-neutral-800 tabular-nums">2026-04-19</dd></div>
|
||
<div class="grid grid-cols-[72px_1fr] gap-2"><dt class="text-xs text-neutral-500">客户编号</dt><dd class="text-xs text-right text-neutral-800 font-mono">60419C03182A3</dd></div>
|
||
<div class="grid grid-cols-[72px_1fr] gap-2"><dt class="text-xs text-neutral-500">委托日期</dt><dd class="text-xs text-right text-neutral-800 tabular-nums">2026-04-19</dd></div>
|
||
<div class="grid grid-cols-[72px_1fr] gap-2"><dt class="text-xs text-neutral-500">需求类型</dt><dd class="text-xs text-right text-neutral-800">二手</dd></div>
|
||
<div class="grid grid-cols-[72px_1fr] gap-2"><dt class="text-xs text-neutral-500">房源用途</dt><dd class="text-xs text-right text-neutral-800">住宅</dd></div>
|
||
<div class="grid grid-cols-[72px_1fr] gap-2"><dt class="text-xs text-neutral-500">客户来源</dt><dd class="text-xs text-right text-neutral-800">线下丨门店接待</dd></div>
|
||
</dl>
|
||
|
||
<div class="grid grid-cols-3 gap-2">
|
||
<button class="flex flex-col items-center gap-1 py-2 text-xs font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700">打电话</button>
|
||
<button @click="drawerOpen=true" class="flex flex-col items-center gap-1 py-2 text-xs font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700">写跟进</button>
|
||
<button class="flex flex-col items-center gap-1 py-2 text-xs font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700">报备/常看</button>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-1">
|
||
<button class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">收藏</button>
|
||
<button class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">不置顶</button>
|
||
<button @click="modal='grade'" class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">改等级</button>
|
||
<button @click="modal='status'" class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">改状态</button>
|
||
<button class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">转公客</button>
|
||
<button @click="modal='deal'" class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">转成交</button>
|
||
<button class="px-2 py-2 text-xs text-left rounded-md text-danger-600 hover:bg-danger-50">转无效</button>
|
||
<button @click="modal='edit'" class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">编辑客源</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="bg-white rounded-lg border border-neutral-200 p-3">
|
||
<header class="flex items-center justify-between mb-2">
|
||
<h3 class="text-sm font-semibold text-neutral-800">联系人</h3>
|
||
<div class="text-xs text-primary-600 space-x-2">
|
||
<button class="hover:underline">查看号码</button>
|
||
<button class="hover:underline">新增联系人</button>
|
||
</div>
|
||
</header>
|
||
<div class="space-y-1">
|
||
<p class="text-sm font-medium text-neutral-900">姚叔叔置换电梯两房（上门）先生</p>
|
||
<p class="text-xs text-neutral-600 tabular-nums">电话1：+86 137****8888</p>
|
||
<p class="text-xs text-neutral-500">默认拨打 · 接通0次 · 拨打0次</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="bg-white rounded-lg border border-neutral-200 p-3">
|
||
<header class="flex items-center justify-between mb-2">
|
||
<h3 class="text-sm font-semibold text-neutral-800">相关员工</h3>
|
||
<button class="text-xs text-primary-600 hover:underline">编辑</button>
|
||
</header>
|
||
<div class="space-y-3">
|
||
<div>
|
||
<p class="text-xs font-medium text-neutral-700">【首录人】</p>
|
||
<p class="text-sm text-neutral-900">都市港湾店一组 雷威</p>
|
||
<p class="text-xs text-neutral-500 tabular-nums">参与时间：2026-04-17 19:21</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-xs font-medium text-neutral-700">【归属人】</p>
|
||
<p class="text-sm text-neutral-900">都市港湾店一组 雷威</p>
|
||
<p class="text-xs text-neutral-500 tabular-nums">参与时间：2026-04-17 19:21</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<div x-show="modal" x-transition.opacity class="fixed inset-0 z-50 bg-neutral-900/40" @click="modal = null"></div>
|
||
|
||
<div x-show="modal === 'grade'" x-transition class="fixed inset-0 z-60 flex items-center justify-center p-4 pointer-events-none">
|
||
<div class="w-full max-w-sm bg-white rounded-xl shadow-lg border border-neutral-200 pointer-events-auto flex flex-col">
|
||
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200"><h2 class="text-base font-semibold text-neutral-800">改等级</h2><button @click="modal = null" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">x</button></div>
|
||
<div class="px-5 py-4 space-y-3"><p class="text-sm text-neutral-500">原等级：C(一般)</p><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20"><option>请选择新等级</option><option>A_urgent</option><option>A</option><option>B</option><option>C</option><option>D</option><option>E</option></select></div>
|
||
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50"><button @click="modal = null" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md hover:bg-white">取消</button><button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">保存</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div x-show="modal === 'status'" x-transition class="fixed inset-0 z-60 flex items-center justify-center p-4 pointer-events-none">
|
||
<div class="w-full max-w-md bg-white rounded-xl shadow-lg border border-neutral-200 pointer-events-auto flex flex-col">
|
||
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200"><h2 class="text-base font-semibold text-neutral-800">改状态</h2><button @click="modal = null" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">x</button></div>
|
||
<div class="px-5 py-4 space-y-3">
|
||
<p class="text-sm text-neutral-500">原状态：求购</p>
|
||
<select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>请选择新状态</option><option>暂缓</option><option>转公</option><option>成交</option><option>无效</option></select>
|
||
<textarea rows="3" class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300" placeholder="请输入更改理由"></textarea>
|
||
</div>
|
||
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50"><button @click="modal = null" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md hover:bg-white">取消</button><button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">保存</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div x-show="modal === 'deal'" x-transition class="fixed inset-0 z-60 flex items-center justify-center p-4 pointer-events-none">
|
||
<div class="w-full max-w-lg bg-white rounded-xl shadow-lg border border-neutral-200 pointer-events-auto flex flex-col">
|
||
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200"><h2 class="text-base font-semibold text-neutral-800">转成交</h2><button @click="modal = null" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">x</button></div>
|
||
<div class="px-5 py-4 space-y-3">
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div><label class="block text-xs text-neutral-500 mb-1">状态</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>我购</option><option>我租</option></select></div>
|
||
<div><label class="block text-xs text-neutral-500 mb-1">房源类型</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>二手</option><option>新房</option></select></div>
|
||
<div class="col-span-2"><label class="block text-xs text-neutral-500 mb-1">成交房源</label><button class="w-full px-3 py-2 text-sm border border-neutral-300 rounded-md text-left text-primary-600 hover:bg-neutral-50">+ 选择成交房源</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50"><button @click="modal = null" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md hover:bg-white">取消</button><button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">确认转成交</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div x-show="modal === 'edit'" x-transition class="fixed inset-0 z-60 flex items-center justify-center p-4 pointer-events-none">
|
||
<div class="w-full max-w-2xl bg-white rounded-xl shadow-lg border border-neutral-200 pointer-events-auto flex flex-col max-h-[85vh]">
|
||
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200"><h2 class="text-base font-semibold text-neutral-800">编辑基础信息</h2><button @click="modal = null" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">x</button></div>
|
||
<div class="flex-1 overflow-y-auto px-5 py-4">
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div><label class="block text-xs text-neutral-500 mb-1">需求类型</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>二手</option><option>新房</option></select></div>
|
||
<div><label class="block text-xs text-neutral-500 mb-1">来源</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>线下丨门店接待</option></select></div>
|
||
<div><label class="block text-xs text-neutral-500 mb-1">用途</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>住宅</option></select></div>
|
||
<div><label class="block text-xs text-neutral-500 mb-1">付款方式</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>请选择</option></select></div>
|
||
<div class="col-span-2"><label class="block text-xs text-neutral-500 mb-1">证件号码</label><input class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300" placeholder="请输入证件号码"></div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50"><button @click="modal = null" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md hover:bg-white">取消</button><button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">保存</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div x-show="drawerOpen" x-transition.opacity class="fixed inset-0 z-50 bg-neutral-900/40" @click="drawerOpen = false"></div>
|
||
<aside x-show="drawerOpen" x-transition:enter="ease-out duration-200" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="ease-in duration-150" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="fixed right-0 top-0 h-full w-[480px] z-60 bg-white shadow-lg flex flex-col border-l border-neutral-200">
|
||
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200"><h2 class="text-base font-semibold text-neutral-800">写入跟进</h2><button @click="drawerOpen=false" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">x</button></div>
|
||
<div class="flex-1 overflow-y-auto px-5 py-4 space-y-3">
|
||
<div><label class="block text-xs text-neutral-500 mb-1">跟进方式</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>电话</option><option>上门</option><option>微信</option><option>短信</option><option>其他</option></select></div>
|
||
<div><label class="block text-xs text-neutral-500 mb-1">跟进内容</label><textarea rows="4" class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300" placeholder="至少6字"></textarea></div>
|
||
<div><label class="block text-xs text-neutral-500 mb-1">跟进时间</label><input class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300" value="2026-04-25 10:30"></div>
|
||
<div><label class="block text-xs text-neutral-500 mb-1">附件</label><input type="file" class="w-full text-sm"></div>
|
||
<label class="inline-flex items-center gap-2 text-sm text-neutral-700"><input type="checkbox" checked class="rounded border-neutral-300">是否开放给同事查看</label>
|
||
</div>
|
||
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50"><button @click="drawerOpen=false" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md hover:bg-white">取消</button><button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">提交</button></div>
|
||
</aside>
|
||
|
||
<script>
|
||
function clientDetailPage() {
|
||
return {
|
||
modal: null,
|
||
drawerOpen: false,
|
||
navItems: [
|
||
{ id: 'section-requirements', label: '需求信息' },
|
||
{ id: 'section-follow', label: '跟进记录' },
|
||
{ id: 'section-viewings', label: '带看记录' },
|
||
{ id: 'section-insights', label: '客源解读' },
|
||
{ id: 'section-matches', label: '二手配房' }
|
||
],
|
||
activeSection: 'section-requirements',
|
||
observer: null,
|
||
scrollToSection(id) {
|
||
const el = document.getElementById(id)
|
||
if (el) {
|
||
el.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||
}
|
||
},
|
||
init() {
|
||
const sections = Array.from(document.querySelectorAll('.section-anchor'))
|
||
this.observer = new IntersectionObserver((entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
this.activeSection = entry.target.id
|
||
}
|
||
})
|
||
}, {
|
||
root: null,
|
||
rootMargin: '-140px 0px -55% 0px',
|
||
threshold: 0.01
|
||
})
|
||
sections.forEach((section) => this.observer.observe(section))
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|