631 lines
29 KiB
HTML
631 lines
29 KiB
HTML
<div class="flex items-center space-x-4">
|
|
<div class="relative hidden md:block">
|
|
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
<input
|
|
type="text"
|
|
placeholder="搜索公司或行业..."
|
|
class="pl-10 pr-4 py-2 w-64 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
>
|
|
</div>
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium flex items-center">
|
|
<i class="fas fa-plus mr-2"></i>
|
|
添加公司
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 主内容区域 -->
|
|
<main class="container mx-auto px-4 py-8">
|
|
<!-- 页面标题和操作 -->
|
|
<div class="mb-8">
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
|
|
<div>
|
|
<h2 class="text-2xl md:text-3xl font-bold text-gray-900">合作企业列表</h2>
|
|
<p class="text-gray-600 mt-2">浏览与我们合作的优秀企业，可直接发起商务对话</p>
|
|
</div>
|
|
|
|
<div class="mt-4 md:mt-0 flex items-center space-x-4">
|
|
<div class="bg-white rounded-lg border border-gray-200 px-4 py-2">
|
|
<select class="outline-none text-gray-700">
|
|
<option>按名称排序</option>
|
|
<option>按行业排序</option>
|
|
<option>按最近活跃排序</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 公司列表 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- 公司卡片 1 -->
|
|
<div class="company-card bg-white rounded-xl border border-gray-200 p-6">
|
|
<div class="flex items-start mb-4">
|
|
<div class="mr-4 flex-shrink-0">
|
|
<div class="w-16 h-16 rounded-xl bg-blue-100 overflow-hidden">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1560179707-f14e90ef3623?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
|
|
alt="TechCorp Logo"
|
|
class="w-full h-full object-cover"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div class="min-w-0">
|
|
<h3 class="text-xl font-bold text-gray-900 truncate">科技前沿集团</h3>
|
|
<div class="flex items-center text-gray-500 text-sm mt-1">
|
|
<i class="fas fa-map-marker-alt mr-1 text-xs"></i>
|
|
<span>北京 · 上海 · 深圳</span>
|
|
</div>
|
|
</div>
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-3 py-1 rounded-full whitespace-nowrap">科技</span>
|
|
</div>
|
|
|
|
<!-- 多行业标签 -->
|
|
<div class="mb-4">
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-blue-50 text-blue-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-blue-100">人工智能</span>
|
|
<span class="bg-purple-50 text-purple-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-purple-100">云计算</span>
|
|
<span class="bg-green-50 text-green-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-green-100">物联网</span>
|
|
<span class="bg-indigo-50 text-indigo-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-indigo-100">网络安全</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 text-sm mb-5 line-clamp-2">
|
|
国内领先的人工智能解决方案提供商，专注于计算机视觉、自然语言处理和机器学习平台的研发与应用。
|
|
</p>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-5">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fas fa-users text-blue-600 text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500 text-xs">团队规模</p>
|
|
<p class="text-gray-900 font-medium">850+ 人</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fas fa-calendar-alt text-gray-600 text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500 text-xs">创立时间</p>
|
|
<p class="text-gray-900 font-medium">2015年</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-5 border-t border-gray-100 flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="flex -space-x-2 mr-3">
|
|
<div class="w-8 h-8 rounded-full bg-blue-200 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-green-200 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-purple-200 border-2 border-white"></div>
|
|
</div>
|
|
<span class="text-gray-500 text-sm">3位联系人</span>
|
|
</div>
|
|
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg font-medium text-sm flex items-center chat-button" data-company="科技前沿集团">
|
|
<i class="fas fa-comment-dots mr-2"></i>
|
|
发起聊天
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 公司卡片 2 -->
|
|
<div class="company-card bg-white rounded-xl border border-gray-200 p-6">
|
|
<div class="flex items-start mb-4">
|
|
<div class="mr-4 flex-shrink-0">
|
|
<div class="w-16 h-16 rounded-xl bg-green-100 overflow-hidden">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1551836026-d5c2c5af78e4?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
|
|
alt="绿色金融集团 Logo"
|
|
class="w-full h-full object-cover"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div class="min-w-0">
|
|
<h3 class="text-xl font-bold text-gray-900 truncate">绿色金融集团</h3>
|
|
<div class="flex items-center text-gray-500 text-sm mt-1">
|
|
<i class="fas fa-map-marker-alt mr-1 text-xs"></i>
|
|
<span>上海 · 香港 · 新加坡</span>
|
|
</div>
|
|
</div>
|
|
<span class="bg-green-100 text-green-800 text-xs font-medium px-3 py-1 rounded-full whitespace-nowrap">金融</span>
|
|
</div>
|
|
|
|
<!-- 多行业标签 -->
|
|
<div class="mb-4">
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-green-50 text-green-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-green-100">绿色金融</span>
|
|
<span class="bg-teal-50 text-teal-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-teal-100">财富管理</span>
|
|
<span class="bg-blue-50 text-blue-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-blue-100">资产管理</span>
|
|
<span class="bg-amber-50 text-amber-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-amber-100">保险科技</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 text-sm mb-5 line-clamp-2">
|
|
专注于可持续发展投资的金融服务集团，为企业和个人提供ESG投资解决方案、碳金融产品和绿色债券承销服务。
|
|
</p>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-5">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fas fa-users text-green-600 text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500 text-xs">团队规模</p>
|
|
<p class="text-gray-900 font-medium">520+ 人</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fas fa-calendar-alt text-gray-600 text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500 text-xs">创立时间</p>
|
|
<p class="text-gray-900 font-medium">2008年</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-5 border-t border-gray-100 flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="flex -space-x-2 mr-3">
|
|
<div class="w-8 h-8 rounded-full bg-blue-200 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-red-200 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-indigo-200 border-2 border-white"></div>
|
|
</div>
|
|
<span class="text-gray-500 text-sm">4位联系人</span>
|
|
</div>
|
|
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg font-medium text-sm flex items-center chat-button" data-company="绿色金融集团">
|
|
<i class="fas fa-comment-dots mr-2"></i>
|
|
发起聊天
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 公司卡片 3 -->
|
|
<div class="company-card bg-white rounded-xl border border-gray-200 p-6">
|
|
<div class="flex items-start mb-4">
|
|
<div class="mr-4 flex-shrink-0">
|
|
<div class="w-16 h-16 rounded-xl bg-purple-100 overflow-hidden">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1533750349088-cd871a92f312?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
|
|
alt="未来教育科技 Logo"
|
|
class="w-full h-full object-cover"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div class="min-w-0">
|
|
<h3 class="text-xl font-bold text-gray-900 truncate">未来教育科技</h3>
|
|
<div class="flex items-center text-gray-500 text-sm mt-1">
|
|
<i class="fas fa-map-marker-alt mr-1 text-xs"></i>
|
|
<span>深圳 · 杭州 · 成都</span>
|
|
</div>
|
|
</div>
|
|
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-3 py-1 rounded-full whitespace-nowrap">教育</span>
|
|
</div>
|
|
|
|
<!-- 多行业标签 -->
|
|
<div class="mb-4">
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-purple-50 text-purple-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-purple-100">在线教育</span>
|
|
<span class="bg-pink-50 text-pink-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-pink-100">EdTech</span>
|
|
<span class="bg-blue-50 text-blue-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-blue-100">企业培训</span>
|
|
<span class="bg-indigo-50 text-indigo-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-indigo-100">SaaS</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 text-sm mb-5 line-clamp-2">
|
|
未来教育科技致力于通过技术创新改善教育体验，为学校和机构提供智能化教学解决方案，已服务超过1000所学校。
|
|
</p>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-5">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fas fa-users text-purple-600 text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500 text-xs">团队规模</p>
|
|
<p class="text-gray-900 font-medium">300+ 人</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fas fa-calendar-alt text-gray-600 text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500 text-xs">创立时间</p>
|
|
<p class="text-gray-900 font-medium">2015年</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-5 border-t border-gray-100 flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="flex -space-x-2 mr-3">
|
|
<div class="w-8 h-8 rounded-full bg-green-200 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-purple-200 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-pink-200 border-2 border-white"></div>
|
|
</div>
|
|
<span class="text-gray-500 text-sm">5位联系人</span>
|
|
</div>
|
|
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg font-medium text-sm flex items-center chat-button" data-company="未来教育科技">
|
|
<i class="fas fa-comment-dots mr-2"></i>
|
|
发起聊天
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 公司卡片 4 -->
|
|
<div class="company-card bg-white rounded-xl border border-gray-200 p-6">
|
|
<div class="flex items-start mb-4">
|
|
<div class="mr-4 flex-shrink-0">
|
|
<div class="w-16 h-16 rounded-xl bg-red-100 overflow-hidden">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
|
|
alt="康健医疗科技 Logo"
|
|
class="w-full h-full object-cover"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div class="min-w-0">
|
|
<h3 class="text-xl font-bold text-gray-900 truncate">康健医疗科技</h3>
|
|
<div class="flex items-center text-gray-500 text-sm mt-1">
|
|
<i class="fas fa-map-marker-alt mr-1 text-xs"></i>
|
|
<span>广州 · 南京 · 天津</span>
|
|
</div>
|
|
</div>
|
|
<span class="bg-red-100 text-red-800 text-xs font-medium px-3 py-1 rounded-full whitespace-nowrap">医疗</span>
|
|
</div>
|
|
|
|
<!-- 多行业标签 -->
|
|
<div class="mb-4">
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-red-50 text-red-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-red-100">数字健康</span>
|
|
<span class="bg-blue-50 text-blue-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-blue-100">远程医疗</span>
|
|
<span class="bg-indigo-50 text-indigo-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-indigo-100">医疗AI</span>
|
|
<span class="bg-emerald-50 text-emerald-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-emerald-100">生物技术</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 text-sm mb-5 line-clamp-2">
|
|
康健医疗科技专注于数字医疗解决方案，提供远程医疗、医疗数据分析和智能诊断工具，与全国200多家医院合作。
|
|
</p>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-5">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fas fa-users text-red-600 text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500 text-xs">团队规模</p>
|
|
<p class="text-gray-900 font-medium">800+ 人</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fas fa-calendar-alt text-gray-600 text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500 text-xs">创立时间</p>
|
|
<p class="text-gray-900 font-medium">2012年</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-5 border-t border-gray-100 flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="flex -space-x-2 mr-3">
|
|
<div class="w-8 h-8 rounded-full bg-red-200 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-blue-200 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"></div>
|
|
</div>
|
|
<span class="text-gray-500 text-sm">6位联系人</span>
|
|
</div>
|
|
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg font-medium text-sm flex items-center chat-button" data-company="康健医疗科技">
|
|
<i class="fas fa-comment-dots mr-2"></i>
|
|
发起聊天
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 公司卡片 5 -->
|
|
<div class="company-card bg-white rounded-xl border border-gray-200 p-6">
|
|
<div class="flex items-start mb-4">
|
|
<div class="mr-4 flex-shrink-0">
|
|
<div class="w-16 h-16 rounded-xl bg-amber-100 overflow-hidden">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
|
|
alt="建筑大师集团 Logo"
|
|
class="w-full h-full object-cover"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div class="min-w-0">
|
|
<h3 class="text-xl font-bold text-gray-900 truncate">建筑大师集团</h3>
|
|
<div class="flex items-center text-gray-500 text-sm mt-1">
|
|
<i class="fas fa-map-marker-alt mr-1 text-xs"></i>
|
|
<span>重庆 · 西安 · 沈阳</span>
|
|
</div>
|
|
</div>
|
|
<span class="bg-amber-100 text-amber-800 text-xs font-medium px-3 py-1 rounded-full whitespace-nowrap">建筑业</span>
|
|
</div>
|
|
|
|
<!-- 多行业标签 -->
|
|
<div class="mb-4">
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-amber-50 text-amber-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-amber-100">建筑工程</span>
|
|
<span class="bg-green-50 text-green-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-green-100">绿色建材</span>
|
|
<span class="bg-blue-50 text-blue-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-blue-100">智能建造</span>
|
|
<span class="bg-stone-50 text-stone-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-stone-100">房地产</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 text-sm mb-5 line-clamp-2">
|
|
国内领先的建筑材料和施工解决方案提供商，专注于绿色建筑和智能建造技术，产品应用于多个大型基础设施项目。
|
|
</p>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-5">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fas fa-users text-amber-600 text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500 text-xs">团队规模</p>
|
|
<p class="text-gray-900 font-medium">2000+ 人</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fas fa-calendar-alt text-gray-600 text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500 text-xs">创立时间</p>
|
|
<p class="text-gray-900 font-medium">1998年</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-5 border-t border-gray-100 flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="flex -space-x-2 mr-3">
|
|
<div class="w-8 h-8 rounded-full bg-amber-200 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-green-200 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-blue-200 border-2 border-white"></div>
|
|
</div>
|
|
<span class="text-gray-500 text-sm">8位联系人</span>
|
|
</div>
|
|
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg font-medium text-sm flex items-center chat-button" data-company="建筑大师集团">
|
|
<i class="fas fa-comment-dots mr-2"></i>
|
|
发起聊天
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 公司卡片 6 -->
|
|
<div class="company-card bg-white rounded-xl border border-gray-200 p-6">
|
|
<div class="flex items-start mb-4">
|
|
<div class="mr-4 flex-shrink-0">
|
|
<div class="w-16 h-16 rounded-xl bg-cyan-100 overflow-hidden">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
|
|
alt="易购零售 Logo"
|
|
class="w-full h-full object-cover"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div class="min-w-0">
|
|
<h3 class="text-xl font-bold text-gray-900 truncate">易购零售</h3>
|
|
<div class="flex items-center text-gray-500 text-sm mt-1">
|
|
<i class="fas fa-map-marker-alt mr-1 text-xs"></i>
|
|
<span>杭州 · 厦门 · 长沙</span>
|
|
</div>
|
|
</div>
|
|
<span class="bg-cyan-100 text-cyan-800 text-xs font-medium px-3 py-1 rounded-full whitespace-nowrap">零售业</span>
|
|
</div>
|
|
|
|
<!-- 多行业标签 -->
|
|
<div class="mb-4">
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-cyan-50 text-cyan-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-cyan-100">电子商务</span>
|
|
<span class="bg-pink-50 text-pink-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-pink-100">新零售</span>
|
|
<span class="bg-blue-50 text-blue-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-blue-100">物流配送</span>
|
|
<span class="bg-purple-50 text-purple-700 text-xs font-medium px-3 py-1.5 rounded-lg border border-purple-100">数据分析</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 text-sm mb-5 line-clamp-2">
|
|
国内领先的新零售平台，整合线上线下购物体验，通过大数据分析为消费者提供个性化推荐，在全国拥有超过500家门店。
|
|
</p>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-5">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-cyan-100 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fas fa-users text-cyan-600 text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500 text-xs">团队规模</p>
|
|
<p class="text-gray-900 font-medium">1500+ 人</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fas fa-calendar-alt text-gray-600 text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500 text-xs">创立时间</p>
|
|
<p class="text-gray-900 font-medium">2008年</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-5 border-t border-gray-100 flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="flex -space-x-2 mr-3">
|
|
<div class="w-8 h-8 rounded-full bg-cyan-200 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-pink-200 border-2 border-white"></div>
|
|
<div class="w-8 h-8 rounded-full bg-indigo-200 border-2 border-white"></div>
|
|
</div>
|
|
<span class="text-gray-500 text-sm">7位联系人</span>
|
|
</div>
|
|
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg font-medium text-sm flex items-center chat-button" data-company="易购零售">
|
|
<i class="fas fa-comment-dots mr-2"></i>
|
|
发起聊天
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="mt-10 flex justify-center">
|
|
<nav class="inline-flex rounded-md shadow">
|
|
<button class="px-4 py-2 border border-gray-300 rounded-l-lg bg-white text-gray-700 hover:bg-gray-50">
|
|
<i class="fas fa-chevron-left"></i>
|
|
</button>
|
|
<button class="px-4 py-2 border-t border-b border-gray-300 bg-blue-600 text-white">1</button>
|
|
<button class="px-4 py-2 border border-gray-300 bg-white text-gray-700 hover:bg-gray-50">2</button>
|
|
<button class="px-4 py-2 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50">3</button>
|
|
<button class="px-4 py-2 border border-gray-300 rounded-r-lg bg-white text-gray-700 hover:bg-gray-50">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 聊天模态框 -->
|
|
<div id="chatModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
|
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-xl bg-white">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-800">发起聊天</h3>
|
|
<button id="closeModal" class="text-gray-400 hover:text-gray-600">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<p class="text-gray-600 mb-4">您将与 <span id="companyName" class="font-medium text-blue-600">公司名称</span> 建立联系。</p>
|
|
<div class="bg-blue-50 p-4 rounded-lg mb-6">
|
|
<p class="text-blue-800 text-sm"><i class="fas fa-info-circle mr-2"></i> 聊天功能允许您与企业代表直接沟通，讨论合作机会或业务事宜。</p>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button id="cancelChat" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 mr-3 hover:bg-gray-50">取消</button>
|
|
<button id="confirmChat" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">确认发起</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 聊天按钮交互
|
|
document.querySelectorAll('.chat-button').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const companyName = this.getAttribute('data-company');
|
|
|
|
// 更新模态框内容
|
|
document.getElementById('companyName').textContent = companyName;
|
|
|
|
// 显示模态框
|
|
document.getElementById('chatModal').classList.remove('hidden');
|
|
});
|
|
});
|
|
|
|
// 关闭模态框
|
|
document.getElementById('closeModal').addEventListener('click', closeModal);
|
|
document.getElementById('cancelChat').addEventListener('click', closeModal);
|
|
|
|
// 确认发起聊天
|
|
document.getElementById('confirmChat').addEventListener('click', function() {
|
|
const companyName = document.getElementById('companyName').textContent;
|
|
alert(`已向 ${companyName} 发起聊天请求！`);
|
|
closeModal();
|
|
});
|
|
|
|
function closeModal() {
|
|
document.getElementById('chatModal').classList.add('hidden');
|
|
}
|
|
|
|
// 点击模态框外部关闭
|
|
document.getElementById('chatModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
// 行业标签点击效果
|
|
document.querySelectorAll('.industry-tag').forEach(tag => {
|
|
tag.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
const industry = this.textContent.trim();
|
|
alert(`筛选行业: ${industry}`);
|
|
});
|
|
});
|
|
|
|
// 分页按钮交互
|
|
document.querySelectorAll('nav button').forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
if(this.querySelector('i')) return;
|
|
|
|
e.preventDefault();
|
|
|
|
// 移除所有按钮的激活状态
|
|
document.querySelectorAll('nav button').forEach(btn => {
|
|
btn.classList.remove('bg-blue-600', 'text-white');
|
|
btn.classList.add('bg-white', 'text-gray-700');
|
|
});
|
|
|
|
// 设置当前按钮为激活状态
|
|
this.classList.remove('bg-white', 'text-gray-700');
|
|
this.classList.add('bg-blue-600', 'text-white');
|
|
});
|
|
});
|
|
|
|
// 搜索功能
|
|
const searchInput = document.querySelector('input[type="text"]');
|
|
if(searchInput) {
|
|
searchInput.addEventListener('keyup', function(e) {
|
|
if (e.key === 'Enter') {
|
|
const searchTerm = this.value;
|
|
if (searchTerm.trim()) {
|
|
alert(`搜索: ${searchTerm}`);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|