Files
workspace/code/link56/link56-frontend-new/test.html
T
2025-12-17 17:28:57 +08:00

1731 lines
88 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业信息平台 | 连接商业未来</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- 自定义CSS -->
<style>
:root {
--primary-color: #1a73e8;
--secondary-color: #34a853;
--accent-color: #fbbc05;
--dark-color: #202124;
--light-color: #f8f9fa;
--gray-color: #5f6368;
--border-radius: 12px;
--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
background-color: #f5f7fa;
color: var(--dark-color);
line-height: 1.6;
}
/* 导航栏 */
.navbar-brand {
font-weight: 700;
font-size: 1.5rem;
color: var(--primary-color);
}
.navbar-brand i {
margin-right: 8px;
}
.nav-link {
font-weight: 500;
padding: 8px 16px;
border-radius: 8px;
transition: var(--transition);
}
.nav-link:hover, .nav-link.active {
background-color: rgba(26, 115, 232, 0.1);
color: var(--primary-color);
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
/* 主内容区 */
.main-container {
padding-top: 20px;
}
.page-title {
font-weight: 700;
margin-bottom: 24px;
color: var(--dark-color);
}
/* 卡片样式 */
.card {
border: none;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
transition: var(--transition);
overflow: hidden;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.card-header {
background-color: white;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
font-weight: 600;
padding: 16px 20px;
}
.card-body {
padding: 20px;
}
/* 企业卡片 */
.company-card {
height: 100%;
cursor: pointer;
}
.company-logo {
width: 80px;
height: 80px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 700;
color: white;
margin: 0 auto 16px;
}
.company-name {
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 8px;
color: var(--dark-color);
}
.company-industry {
font-size: 0.85rem;
color: var(--gray-color);
margin-bottom: 12px;
}
.company-tag {
display: inline-block;
background-color: rgba(26, 115, 232, 0.1);
color: var(--primary-color);
padding: 4px 10px;
border-radius: 20px;
font-size: 0.8rem;
margin-right: 6px;
margin-bottom: 6px;
}
.company-rating {
color: var(--accent-color);
}
/* 按钮样式 */
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
padding: 8px 20px;
border-radius: 8px;
font-weight: 500;
}
.btn-primary:hover {
background-color: #0d62d9;
border-color: #0d62d9;
}
.btn-outline-primary {
color: var(--primary-color);
border-color: var(--primary-color);
border-radius: 8px;
font-weight: 500;
}
.btn-outline-primary:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
/* 标签样式 */
.badge-verified {
background-color: #e6f4ea;
color: var(--secondary-color);
font-weight: 500;
padding: 4px 10px;
border-radius: 20px;
}
/* 搜索框 */
.search-container {
background-color: white;
border-radius: var(--border-radius);
padding: 20px;
box-shadow: var(--box-shadow);
margin-bottom: 30px;
}
.search-input {
border-radius: 8px;
border: 2px solid #e0e0e0;
padding: 12px 20px;
font-size: 1rem;
transition: var(--transition);
}
.search-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}
/* 页脚 */
.footer {
background-color: var(--dark-color);
color: white;
margin-top: 60px;
padding: 40px 0 20px;
}
.footer h5 {
font-weight: 600;
margin-bottom: 20px;
}
.footer-links a {
color: #bdc1c6;
text-decoration: none;
display: block;
margin-bottom: 10px;
transition: var(--transition);
}
.footer-links a:hover {
color: white;
padding-left: 5px;
}
.copyright {
border-top: 1px solid #3c4043;
padding-top: 20px;
margin-top: 30px;
text-align: center;
color: #9aa0a6;
font-size: 0.9rem;
}
/* 页面切换 */
.page {
display: none;
}
.page.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 企业详情页 */
.company-header {
background: linear-gradient(135deg, #1a73e8, #4285f4);
color: white;
border-radius: var(--border-radius);
padding: 30px;
margin-bottom: 30px;
}
.company-avatar {
width: 120px;
height: 120px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
font-weight: 700;
color: white;
background-color: rgba(255, 255, 255, 0.2);
border: 4px solid white;
}
.company-detail-title {
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
/* 聊天界面 */
.chat-container {
height: 500px;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
}
.chat-sidebar {
background-color: #f8f9fa;
border-right: 1px solid #e0e0e0;
height: 100%;
overflow-y: auto;
}
.chat-contact {
padding: 15px;
border-bottom: 1px solid #e0e0e0;
cursor: pointer;
transition: var(--transition);
}
.chat-contact:hover, .chat-contact.active {
background-color: white;
}
.chat-messages {
height: calc(100% - 60px);
overflow-y: auto;
padding: 20px;
background-color: #f0f2f5;
}
.message {
margin-bottom: 20px;
max-width: 70%;
}
.message.received {
align-self: flex-start;
}
.message.sent {
align-self: flex-end;
margin-left: auto;
}
.message-content {
padding: 12px 16px;
border-radius: 18px;
display: inline-block;
}
.message.received .message-content {
background-color: white;
border-top-left-radius: 4px;
}
.message.sent .message-content {
background-color: var(--primary-color);
color: white;
border-top-right-radius: 4px;
}
/* 响应式调整 */
@media (max-width: 768px) {
.company-header {
padding: 20px;
}
.company-avatar {
width: 80px;
height: 80px;
font-size: 32px;
margin-bottom: 15px;
}
.chat-container {
height: 400px;
}
}
/* 表单样式 */
.form-card {
max-width: 800px;
margin: 0 auto;
}
.form-section {
margin-bottom: 30px;
}
.step-indicator {
display: flex;
margin-bottom: 30px;
}
.step {
flex: 1;
text-align: center;
position: relative;
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #e0e0e0;
color: #757575;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin: 0 auto 10px;
z-index: 2;
position: relative;
}
.step.active .step-number {
background-color: var(--primary-color);
color: white;
}
.step.completed .step-number {
background-color: var(--secondary-color);
color: white;
}
.step-line {
position: absolute;
top: 20px;
left: 50%;
right: -50%;
height: 2px;
background-color: #e0e0e0;
z-index: 1;
}
.step:last-child .step-line {
display: none;
}
.step.active .step-line, .step.completed .step-line {
background-color: var(--primary-color);
}
/* 工具类 */
.text-primary {
color: var(--primary-color) !important;
}
.bg-light {
background-color: var(--light-color) !important;
}
.shadow {
box-shadow: var(--box-shadow) !important;
}
.rounded-lg {
border-radius: var(--border-radius) !important;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-handshake"></i> 企联汇
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="#" data-page="home">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-page="discover">发现企业</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-page="messages">消息中心</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-page="register">企业入驻</a>
</li>
</ul>
<div class="d-flex align-items-center">
<div class="input-group me-3" style="width: 300px;">
<input type="text" class="form-control search-input" placeholder="搜索企业、产品或服务">
<button class="btn btn-outline-primary" type="button">
<i class="fas fa-search"></i>
</button>
</div>
<div class="dropdown me-3">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
<i class="fas fa-user me-1"></i> 我的账户
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-building me-2"></i> 我的企业</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-heart me-2"></i> 我的收藏</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i> 账户设置</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i> 退出登录</a></li>
</ul>
</div>
<div class="user-avatar" data-bs-toggle="tooltip" title="张三">
张
</div>
</div>
</div>
</div>
</nav>
<!-- 主容器 -->
<div class="container main-container">
<!-- 首页 -->
<div id="home-page" class="page active">
<div class="row mb-5">
<div class="col-12">
<h1 class="page-title">发现优秀企业,建立商业连接</h1>
</div>
</div>
<!-- 搜索区域 -->
<div class="search-container">
<div class="row g-3">
<div class="col-md-8">
<input type="text" class="form-control form-control-lg search-input" placeholder="搜索企业名称、产品或服务">
</div>
<div class="col-md-2">
<select class="form-select form-select-lg">
<option selected>选择行业</option>
<option value="tech">科技/互联网</option>
<option value="manufacturing">制造业</option>
<option value="finance">金融/投资</option>
<option value="service">服务业</option>
</select>
</div>
<div class="col-md-2">
<button class="btn btn-primary w-100 btn-lg">
<i class="fas fa-search me-2"></i> 搜索
</button>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<div class="d-flex flex-wrap">
<span class="badge bg-light text-dark me-2 mb-2 p-2">热门搜索:</span>
<a href="#" class="badge bg-light text-dark me-2 mb-2 p-2">软件开发</a>
<a href="#" class="badge bg-light text-dark me-2 mb-2 p-2">智能制造</a>
<a href="#" class="badge bg-light text-dark me-2 mb-2 p-2">供应链</a>
<a href="#" class="badge bg-light text-dark me-2 mb-2 p-2">人工智能</a>
<a href="#" class="badge bg-light text-dark me-2 mb-2 p-2">生物科技</a>
<a href="#" class="badge bg-light text-dark me-2 mb-2 p-2">新能源</a>
</div>
</div>
</div>
</div>
<!-- 推荐企业 -->
<div class="row mb-5">
<div class="col-12">
<h2 class="mb-4">推荐企业</h2>
</div>
<!-- 企业卡片 -->
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
<div class="card company-card" data-company-id="1">
<div class="card-body text-center">
<div class="company-logo bg-primary mb-3">创</div>
<div class="d-flex justify-content-center mb-2">
<span class="badge-verified me-2"><i class="fas fa-check-circle me-1"></i> 已认证</span>
<span class="company-rating">
<i class="fas fa-star"></i> 4.8
</span>
</div>
<h5 class="company-name">创新科技有限公司</h5>
<p class="company-industry">科技 · 北京 · 201-1000人</p>
<p class="text-muted small mb-3">专注于企业级SaaS解决方案提供商,为中小企业提供数字化转型服务</p>
<div class="mb-3">
<span class="company-tag">高新技术企业</span>
<span class="company-tag">ISO9001认证</span>
<span class="company-tag">专精特新</span>
</div>
<button class="btn btn-outline-primary btn-sm w-100">查看详情</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
<div class="card company-card" data-company-id="2">
<div class="card-body text-center">
<div class="company-logo bg-success mb-3">智</div>
<div class="d-flex justify-content-center mb-2">
<span class="badge-verified me-2"><i class="fas fa-check-circle me-1"></i> 已认证</span>
<span class="company-rating">
<i class="fas fa-star"></i> 4.6
</span>
</div>
<h5 class="company-name">智能制造集团</h5>
<p class="company-industry">制造业 · 上海 · 1000+人</p>
<p class="text-muted small mb-3">领先的智能制造解决方案提供商,工业自动化与机器人技术专家</p>
<div class="mb-3">
<span class="company-tag">智能制造</span>
<span class="company-tag">工业4.0</span>
<span class="company-tag">机器人</span>
</div>
<button class="btn btn-outline-primary btn-sm w-100">查看详情</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
<div class="card company-card" data-company-id="3">
<div class="card-body text-center">
<div class="company-logo bg-warning mb-3">绿</div>
<div class="d-flex justify-content-center mb-2">
<span class="badge-verified me-2"><i class="fas fa-check-circle me-1"></i> 已认证</span>
<span class="company-rating">
<i class="fas fa-star"></i> 4.9
</span>
</div>
<h5 class="company-name">绿色能源科技</h5>
<p class="company-industry">新能源 · 深圳 · 51-200人</p>
<p class="text-muted small mb-3">专注于太阳能和储能技术的研发与应用,提供清洁能源解决方案</p>
<div class="mb-3">
<span class="company-tag">新能源</span>
<span class="company-tag">环保</span>
<span class="company-tag">光伏</span>
</div>
<button class="btn btn-outline-primary btn-sm w-100">查看详情</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
<div class="card company-card" data-company-id="4">
<div class="card-body text-center">
<div class="company-logo bg-info mb-3">数</div>
<div class="d-flex justify-content-center mb-2">
<span class="badge-verified me-2"><i class="fas fa-check-circle me-1"></i> 已认证</span>
<span class="company-rating">
<i class="fas fa-star"></i> 4.7
</span>
</div>
<h5 class="company-name">数字营销有限公司</h5>
<p class="company-industry">服务 · 杭州 · 1-50人</p>
<p class="text-muted small mb-3">专业的数字营销服务提供商,帮助企业实现线上业务增长</p>
<div class="mb-3">
<span class="company-tag">数字营销</span>
<span class="company-tag">SEO优化</span>
<span class="company-tag">社交媒体</span>
</div>
<button class="btn btn-outline-primary btn-sm w-100">查看详情</button>
</div>
</div>
</div>
</div>
<!-- 功能区域 -->
<div class="row mb-5">
<div class="col-md-4 mb-4">
<div class="card h-100 text-center">
<div class="card-body">
<div class="display-1 text-primary mb-3">
<i class="fas fa-building"></i>
</div>
<h4 class="card-title">企业入驻</h4>
<p class="card-text">免费创建企业主页,展示您的产品与服务,获取更多商业机会</p>
<button class="btn btn-primary mt-3" data-page="register">立即入驻</button>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 text-center">
<div class="card-body">
<div class="display-1 text-primary mb-3">
<i class="fas fa-search"></i>
</div>
<h4 class="card-title">精准搜索</h4>
<p class="card-text">通过行业、地区、规模等多维度筛选,快速找到合作伙伴</p>
<button class="btn btn-primary mt-3" data-page="discover">发现企业</button>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 text-center">
<div class="card-body">
<div class="display-1 text-primary mb-3">
<i class="fas fa-comments"></i>
</div>
<h4 class="card-title">即时沟通</h4>
<p class="card-text">与潜在合作伙伴在线沟通,快速建立联系,洽谈合作事宜</p>
<button class="btn btn-primary mt-3" data-page="messages">消息中心</button>
</div>
</div>
</div>
</div>
</div>
<!-- 企业详情页 -->
<div id="company-detail-page" class="page">
<button class="btn btn-outline-primary mb-4" id="back-to-home">
<i class="fas fa-arrow-left me-2"></i> 返回
</button>
<div class="company-header">
<div class="row align-items-center">
<div class="col-md-3 text-center text-md-start mb-3 mb-md-0">
<div class="company-avatar mx-auto mx-md-0">创</div>
</div>
<div class="col-md-9">
<div class="d-flex flex-wrap align-items-center mb-3">
<h1 class="text-white me-3 mb-2">创新科技有限公司</h1>
<span class="badge-verified me-3 mb-2"><i class="fas fa-check-circle me-1"></i> 已认证</span>
<span class="company-rating mb-2">
<i class="fas fa-star"></i> 4.8 (128 评价)
</span>
</div>
<div class="row text-white">
<div class="col-md-6 mb-2">
<i class="fas fa-industry me-2"></i> 科技/软件/人工智能
</div>
<div class="col-md-6 mb-2">
<i class="fas fa-users me-2"></i> 201-1000人
</div>
<div class="col-md-6 mb-2">
<i class="fas fa-map-marker-alt me-2"></i> 北京市海淀区
</div>
<div class="col-md-6 mb-2">
<i class="fas fa-calendar-alt me-2"></i> 成立于 2015年
</div>
</div>
<div class="mt-4">
<button class="btn btn-light me-3">
<i class="fas fa-star me-2"></i> 关注
</button>
<button class="btn btn-light me-3" id="send-message-btn">
<i class="fas fa-comment me-2"></i> 发送消息
</button>
<button class="btn btn-light">
<i class="fas fa-phone me-2"></i> 拨打电话
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<!-- 公司信息标签页 -->
<div class="card mb-4">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#overview">公司概况</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#products">产品与服务</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#cases">成功案例</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#contact">联系方式</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<!-- 公司概况 -->
<div class="tab-pane fade show active" id="overview">
<h4 class="company-detail-title">公司简介</h4>
<p class="mb-4">创新科技有限公司成立于2015年,是一家专注于企业级SaaS解决方案的高新技术企业。公司致力于为中小企业提供数字化转型服务,通过云计算、大数据和人工智能技术,帮助企业提升运营效率、降低成本和实现业务增长。</p>
<p class="mb-4">公司核心团队来自国内外知名科技企业,拥有丰富的行业经验和深厚的技术积累。我们始终坚持以客户需求为导向,以技术创新为驱动,为超过5000家企业提供了优质的服务。</p>
<h4 class="company-detail-title mt-5">核心业务</h4>
<div class="row">
<div class="col-md-6 mb-3">
<div class="card h-100">
<div class="card-body">
<h5><i class="fas fa-cloud text-primary me-2"></i> 企业云服务</h5>
<p class="mb-0">提供安全可靠的云基础设施和SaaS应用,支持企业快速上云和业务扩展。</p>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card h-100">
<div class="card-body">
<h5><i class="fas fa-robot text-primary me-2"></i> 智能解决方案</h5>
<p class="mb-0">基于AI技术的智能客服、数据分析、自动化流程等解决方案,提升企业智能化水平。</p>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card h-100">
<div class="card-body">
<h5><i class="fas fa-chart-line text-primary me-2"></i> 数字化转型咨询</h5>
<p class="mb-0">为企业提供数字化转型战略规划、技术选型和实施指导服务。</p>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card h-100">
<div class="card-body">
<h5><i class="fas fa-shield-alt text-primary me-2"></i> 安全与合规</h5>
<p class="mb-0">提供全方位的数据安全和合规解决方案,确保企业信息安全符合监管要求。</p>
</div>
</div>
</div>
</div>
<h4 class="company-detail-title mt-5">企业资质</h4>
<div class="row">
<div class="col-md-3 col-6 mb-3 text-center">
<div class="p-3 border rounded-lg">
<div class="display-5 text-primary mb-2">
<i class="fas fa-award"></i>
</div>
<div>高新技术企业</div>
</div>
</div>
<div class="col-md-3 col-6 mb-3 text-center">
<div class="p-3 border rounded-lg">
<div class="display-5 text-primary mb-2">
<i class="fas fa-certificate"></i>
</div>
<div>ISO9001认证</div>
</div>
</div>
<div class="col-md-3 col-6 mb-3 text-center">
<div class="p-3 border rounded-lg">
<div class="display-5 text-primary mb-2">
<i class="fas fa-medal"></i>
</div>
<div>专精特新企业</div>
</div>
</div>
<div class="col-md-3 col-6 mb-3 text-center">
<div class="p-3 border rounded-lg">
<div class="display-5 text-primary mb-2">
<i class="fas fa-shield-alt"></i>
</div>
<div>CMMI 3级</div>
</div>
</div>
</div>
</div>
<!-- 产品与服务 -->
<div class="tab-pane fade" id="products">
<h4 class="company-detail-title">核心产品</h4>
<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-md-3 text-center">
<div class="display-3 text-primary mb-3">
<i class="fas fa-cloud"></i>
</div>
</div>
<div class="col-md-9">
<h5>创新云平台</h5>
<p class="text-muted">一体化企业云服务平台,提供计算、存储、网络、安全等全套云服务。</p>
<div class="mb-3">
<span class="badge bg-primary me-2">云计算</span>
<span class="badge bg-primary me-2">IaaS/PaaS/SaaS</span>
<span class="badge bg-primary me-2">弹性伸缩</span>
</div>
<p>支持企业快速部署应用,按需付费,降低IT成本,提高运营效率。</p>
<button class="btn btn-outline-primary btn-sm">了解更多</button>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-md-3 text-center">
<div class="display-3 text-primary mb-3">
<i class="fas fa-robot"></i>
</div>
</div>
<div class="col-md-9">
<h5>智能客服系统</h5>
<p class="text-muted">基于自然语言处理技术的智能客服解决方案,7x24小时在线服务。</p>
<div class="mb-3">
<span class="badge bg-primary me-2">人工智能</span>
<span class="badge bg-primary me-2">NLP</span>
<span class="badge bg-primary me-2">机器学习</span>
</div>
<p>自动解答客户问题,支持多轮对话,客户满意度提升40%,客服成本降低60%。</p>
<button class="btn btn-outline-primary btn-sm">了解更多</button>
</div>
</div>
</div>
</div>
</div>
<!-- 成功案例 -->
<div class="tab-pane fade" id="cases">
<h4 class="company-detail-title">成功案例</h4>
<div class="card mb-4">
<div class="card-body">
<div class="d-flex align-items-start mb-3">
<div class="company-logo bg-success me-3" style="width: 60px; height: 60px;">A</div>
<div>
<h5 class="mb-1">ABC集团数字化转型项目</h5>
<p class="text-muted mb-0">制造业 · 2022年合作</p>
</div>
</div>
<p>为ABC集团提供全面的数字化转型解决方案,包括ERP系统升级、生产管理系统智能化改造、供应链优化等。项目实施后,ABC集团生产效率提升25%,库存周转率提高30%,运营成本降低18%。</p>
<div class="mb-3">
<span class="badge bg-light text-dark me-2">ERP系统</span>
<span class="badge bg-light text-dark me-2">智能制造</span>
<span class="badge bg-light text-dark me-2">供应链管理</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="text-muted me-3"><i class="fas fa-clock me-1"></i> 实施周期:6个月</span>
<span class="text-muted"><i class="fas fa-chart-line me-1"></i> ROI:280%</span>
</div>
<button class="btn btn-outline-primary btn-sm">查看案例详情</button>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<div class="d-flex align-items-start mb-3">
<div class="company-logo bg-warning me-3" style="width: 60px; height: 60px;">B</div>
<div>
<h5 class="mb-1">XYZ电商平台智能客服系统</h5>
<p class="text-muted mb-0">电商 · 2023年合作</p>
</div>
</div>
<p>为XYZ电商平台部署智能客服系统,实现7x24小时自动应答,支持商品咨询、订单查询、售后处理等场景。系统上线后,客服响应时间从平均3分钟缩短到10秒内,人工客服工作量减少65%,客户满意度从85%提升到96%。</p>
<div class="mb-3">
<span class="badge bg-light text-dark me-2">智能客服</span>
<span class="badge bg-light text-dark me-2">电商</span>
<span class="badge bg-light text-dark me-2">自动化</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="text-muted me-3"><i class="fas fa-clock me-1"></i> 实施周期:3个月</span>
<span class="text-muted"><i class="fas fa-chart-line me-1"></i> ROI:320%</span>
</div>
<button class="btn btn-outline-primary btn-sm">查看案例详情</button>
</div>
</div>
</div>
</div>
<!-- 联系方式 -->
<div class="tab-pane fade" id="contact">
<h4 class="company-detail-title">联系信息</h4>
<div class="row">
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title mb-4">联系方式</h5>
<div class="mb-4">
<h6><i class="fas fa-phone text-primary me-2"></i> 联系电话</h6>
<p class="ms-4">010-12345678</p>
</div>
<div class="mb-4">
<h6><i class="fas fa-envelope text-primary me-2"></i> 电子邮箱</h6>
<p class="ms-4">contact@innovatech.com</p>
</div>
<div class="mb-4">
<h6><i class="fas fa-globe text-primary me-2"></i> 官方网站</h6>
<p class="ms-4">www.innovatech.com</p>
</div>
<div class="mb-4">
<h6><i class="fas fa-map-marker-alt text-primary me-2"></i> 公司地址</h6>
<p class="ms-4">北京市海淀区中关村大街1号<br>创新科技大厦A座12层</p>
</div>
<button class="btn btn-primary w-100" id="contact-btn">
<i class="fas fa-comment me-2"></i> 立即联系
</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title mb-4">位置地图</h5>
<div class="border rounded-lg p-4 text-center bg-light" style="height: 300px;">
<div class="d-flex flex-column justify-content-center align-items-center h-100">
<div class="display-1 text-muted mb-3">
<i class="fas fa-map-marked-alt"></i>
</div>
<p class="text-muted">地图展示(实际项目中可集成百度/高德地图)</p>
<p class="text-muted">北京市海淀区中关村大街1号</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- 侧边栏:联系信息 -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0">快速联系</h5>
</div>
<div class="card-body">
<div class="d-grid gap-2">
<button class="btn btn-primary">
<i class="fas fa-comment me-2"></i> 发送消息
</button>
<button class="btn btn-outline-primary">
<i class="fas fa-phone me-2"></i> 拨打电话
</button>
<button class="btn btn-outline-primary">
<i class="fas fa-envelope me-2"></i> 发送邮件
</button>
<button class="btn btn-outline-primary">
<i class="fas fa-calendar-alt me-2"></i> 预约会议
</button>
</div>
<hr class="my-4">
<h6 class="mb-3">联系人</h6>
<div class="d-flex align-items-center mb-3">
<div class="user-avatar me-3">李</div>
<div>
<div class="fw-semibold">李经理</div>
<div class="small text-muted">商务总监</div>
</div>
</div>
<div class="d-flex align-items-center">
<div class="user-avatar me-3">王</div>
<div>
<div class="fw-semibold">王总监</div>
<div class="small text-muted">技术负责人</div>
</div>
</div>
</div>
</div>
<!-- 侧边栏:相似企业 -->
<div class="card">
<div class="card-header">
<h5 class="mb-0">相似企业</h5>
</div>
<div class="card-body">
<div class="mb-3">
<div class="d-flex align-items-center mb-2">
<div class="company-logo bg-info me-3" style="width: 40px; height: 40px; font-size: 16px;">数</div>
<div>
<div class="fw-semibold">数字科技</div>
<div class="small text-muted">科技 · 北京</div>
</div>
</div>
<button class="btn btn-outline-primary btn-sm w-100">查看</button>
</div>
<div class="mb-3">
<div class="d-flex align-items-center mb-2">
<div class="company-logo bg-secondary me-3" style="width: 40px; height: 40px; font-size: 16px;">智</div>
<div>
<div class="fw-semibold">智能科技</div>
<div class="small text-muted">人工智能 · 上海</div>
</div>
</div>
<button class="btn btn-outline-primary btn-sm w-100">查看</button>
</div>
<div>
<div class="d-flex align-items-center mb-2">
<div class="company-logo bg-success me-3" style="width: 40px; height: 40px; font-size: 16px;">云</div>
<div>
<div class="fw-semibold">云计算科技</div>
<div class="small text-muted">云计算 · 深圳</div>
</div>
</div>
<button class="btn btn-outline-primary btn-sm w-100">查看</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 消息中心 -->
<div id="messages-page" class="page">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title mb-0">消息中心</h1>
<button class="btn btn-primary">
<i class="fas fa-plus me-2"></i> 新建对话
</button>
</div>
<div class="row">
<div class="col-md-4">
<div class="card h-100">
<div class="card-header">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索对话...">
<button class="btn btn-outline-secondary" type="button">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="card-body p-0">
<div class="list-group list-group-flush" id="chat-contacts">
<!-- 对话联系人列表 -->
<a href="#" class="list-group-item list-group-item-action chat-contact active">
<div class="d-flex w-100 justify-content-between">
<div class="d-flex">
<div class="user-avatar me-3">创</div>
<div>
<h6 class="mb-1">创新科技有限公司</h6>
<p class="mb-1 small text-muted">我们很期待与您的合作机会...</p>
</div>
</div>
<small class="text-muted">10:30</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action chat-contact">
<div class="d-flex w-100 justify-content-between">
<div class="d-flex">
<div class="user-avatar me-3 bg-success">智</div>
<div>
<h6 class="mb-1">智能制造集团</h6>
<p class="mb-1 small text-muted">好的,我们明天详细讨论</p>
</div>
</div>
<small class="text-muted">昨天</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action chat-contact">
<div class="d-flex w-100 justify-content-between">
<div class="d-flex">
<div class="user-avatar me-3 bg-warning">绿</div>
<div>
<h6 class="mb-1">绿色能源科技</h6>
<p class="mb-1 small text-muted">感谢您的询价,这是我们的报价单...</p>
</div>
</div>
<small class="text-muted">周三</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action chat-contact">
<div class="d-flex w-100 justify-content-between">
<div class="d-flex">
<div class="user-avatar me-3 bg-info">数</div>
<div>
<h6 class="mb-1">数字营销有限公司</h6>
<p class="mb-1 small text-muted">请问您什么时候方便电话沟通?</p>
</div>
</div>
<small class="text-muted">周一</small>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="user-avatar me-3">创</div>
<div>
<h5 class="mb-0">创新科技有限公司</h5>
<small class="text-muted">商务总监 · 在线</small>
</div>
</div>
<div>
<button class="btn btn-outline-secondary btn-sm me-2">
<i class="fas fa-phone"></i>
</button>
<button class="btn btn-outline-secondary btn-sm">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<!-- 聊天消息区域 -->
<div class="card-body p-0">
<div class="chat-messages" id="chat-messages">
<!-- 接收的消息 -->
<div class="message received">
<div class="d-flex align-items-end mb-1">
<div class="user-avatar me-2">创</div>
<div>
<div class="message-content bg-white">
您好,我是创新科技有限公司的商务总监。我们对贵公司的产品很感兴趣,想了解更多信息。
</div>
<small class="text-muted ms-2">10:15 AM</small>
</div>
</div>
</div>
<!-- 发送的消息 -->
<div class="message sent">
<div class="d-flex flex-column align-items-end">
<div class="message-content bg-primary text-white mb-1">
您好!很高兴收到您的消息。请问您想了解我们产品的哪些方面?
</div>
<small class="text-muted me-2">10:20 AM</small>
</div>
</div>
<!-- 接收的消息 -->
<div class="message received">
<div class="d-flex align-items-end mb-1">
<div class="user-avatar me-2">创</div>
<div>
<div class="message-content bg-white">
我们主要对贵公司的智能客服系统感兴趣。能否提供更详细的技术参数和报价?
</div>
<small class="text-muted ms-2">10:25 AM</small>
</div>
</div>
</div>
<!-- 发送的消息 -->
<div class="message sent">
<div class="d-flex flex-column align-items-end">
<div class="message-content bg-primary text-white mb-1">
当然可以。我已经将详细的产品手册和报价单发送到您的邮箱,请注意查收。另外,如果您方便的话,我们可以安排一次线上演示,让您更直观地了解系统功能。
</div>
<small class="text-muted me-2">10:30 AM</small>
</div>
</div>
</div>
<!-- 消息输入区域 -->
<div class="border-top p-3">
<div class="input-group">
<button class="btn btn-outline-secondary" type="button">
<i class="fas fa-paperclip"></i>
</button>
<input type="text" class="form-control" placeholder="输入消息..." id="message-input">
<button class="btn btn-primary" type="button" id="send-message">
<i class="fas fa-paper-plane"></i>
</button>
</div>
<div class="mt-2">
<small class="text-muted">按Enter发送,Shift+Enter换行</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 企业入驻页面 -->
<div id="register-page" class="page">
<h1 class="page-title mb-4">企业入驻</h1>
<!-- 步骤指示器 -->
<div class="step-indicator mb-5">
<div class="step active">
<div class="step-number">1</div>
<div class="step-label">基本信息</div>
<div class="step-line"></div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-label">详细资料</div>
<div class="step-line"></div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-label">产品服务</div>
<div class="step-line"></div>
</div>
<div class="step">
<div class="step-number">4</div>
<div class="step-label">完成</div>
</div>
</div>
<div class="card form-card">
<div class="card-body">
<!-- 第1步:基本信息 -->
<div id="step-1" class="form-step">
<h4 class="company-detail-title mb-4">基本信息</h4>
<div class="row">
<div class="col-md-6 mb-3">
<label for="company-name" class="form-label">企业名称 <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="company-name" placeholder="请输入营业执照上的公司全称" required>
</div>
<div class="col-md-6 mb-3">
<label for="credit-code" class="form-label">统一社会信用代码 <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="credit-code" placeholder="18位统一社会信用代码" required>
</div>
</div>
<div class="mb-3">
<label for="company-logo" class="form-label">公司Logo</label>
<div class="border rounded p-4 text-center" id="logo-upload-area" style="cursor: pointer;">
<div id="logo-preview" class="d-none">
<img id="logo-preview-img" src="#" alt="Logo预览" class="img-thumbnail mb-2" style="max-width: 200px; max-height: 200px;">
<p class="mb-0">点击重新选择</p>
</div>
<div id="logo-upload-placeholder">
<div class="display-1 text-muted mb-3">
<i class="fas fa-cloud-upload-alt"></i>
</div>
<p class="mb-1">点击上传公司Logo</p>
<p class="text-muted small">建议尺寸:300x300px,支持JPG、PNG格式,不超过2MB</p>
</div>
<input type="file" class="d-none" id="logo-input" accept="image/*">
</div>
</div>
<div class="mb-3">
<label class="form-label">所属行业 <span class="text-danger">*</span></label>
<div class="row">
<div class="col-md-3 col-6 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="tech" id="industry-tech">
<label class="form-check-label" for="industry-tech">
科技/互联网
</label>
</div>
</div>
<div class="col-md-3 col-6 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="manufacturing" id="industry-manufacturing">
<label class="form-check-label" for="industry-manufacturing">
制造业
</label>
</div>
</div>
<div class="col-md-3 col-6 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="finance" id="industry-finance">
<label class="form-check-label" for="industry-finance">
金融/投资
</label>
</div>
</div>
<div class="col-md-3 col-6 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="service" id="industry-service">
<label class="form-check-label" for="industry-service">
服务业
</label>
</div>
</div>
<div class="col-md-3 col-6 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="education" id="industry-education">
<label class="form-check-label" for="industry-education">
教育/培训
</label>
</div>
</div>
<div class="col-md-3 col-6 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="medical" id="industry-medical">
<label class="form-check-label" for="industry-medical">
医疗/健康
</label>
</div>
</div>
<div class="col-md-3 col-6 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="retail" id="industry-retail">
<label class="form-check-label" for="industry-retail">
零售/贸易
</label>
</div>
</div>
<div class="col-md-3 col-6 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="other" id="industry-other">
<label class="form-check-label" for="industry-other">
其他
</label>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-between mt-5">
<div></div> <!-- 占位 -->
<button class="btn btn-primary" id="next-step-1">
下一步 <i class="fas fa-arrow-right ms-2"></i>
</button>
</div>
</div>
<!-- 第2步:详细资料 -->
<div id="step-2" class="form-step d-none">
<h4 class="company-detail-title mb-4">详细资料</h4>
<div class="mb-3">
<label for="company-description" class="form-label">公司简介 <span class="text-danger">*</span></label>
<textarea class="form-control" id="company-description" rows="4" placeholder="请简要描述公司主营业务、核心优势、发展历程等" maxlength="500"></textarea>
<div class="form-text text-end"><span id="char-count">0</span>/500</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="employee-count" class="form-label">企业规模 <span class="text-danger">*</span></label>
<select class="form-select" id="employee-count">
<option value="" selected disabled>请选择</option>
<option value="1-50">1-50人</option>
<option value="51-200">51-200人</option>
<option value="201-1000">201-1000人</option>
<option value="1000+">1000人以上</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label for="founded-year" class="form-label">成立时间 <span class="text-danger">*</span></label>
<select class="form-select" id="founded-year">
<option value="" selected disabled>请选择</option>
<!-- 年份选项由JavaScript生成 -->
</select>
</div>
</div>
<div class="mb-3">
<label for="company-address" class="form-label">公司地址 <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="company-address" placeholder="请输入详细地址">
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="company-phone" class="form-label">联系电话</label>
<input type="tel" class="form-control" id="company-phone" placeholder="请输入公司联系电话">
</div>
<div class="col-md-6 mb-3">
<label for="company-email" class="form-label">联系邮箱</label>
<input type="email" class="form-control" id="company-email" placeholder="请输入公司联系邮箱">
</div>
</div>
<div class="mb-3">
<label for="company-website" class="form-label">官方网站</label>
<div class="input-group">
<span class="input-group-text">https://</span>
<input type="text" class="form-control" id="company-website" placeholder="www.example.com">
</div>
</div>
<div class="d-flex justify-content-between mt-5">
<button class="btn btn-outline-primary" id="prev-step-2">
<i class="fas fa-arrow-left me-2"></i> 上一步
</button>
<button class="btn btn-primary" id="next-step-2">
下一步 <i class="fas fa-arrow-right ms-2"></i>
</button>
</div>
</div>
<!-- 第3步:产品服务 -->
<div id="step-3" class="form-step d-none">
<h4 class="company-detail-title mb-4">产品与服务</h4>
<p class="text-muted mb-4">添加您的主营产品或服务,让客户更了解您的业务(至少添加一项)</p>
<div id="products-container">
<!-- 产品表单会通过JavaScript动态生成 -->
</div>
<div class="text-center my-4">
<button class="btn btn-outline-primary" id="add-product">
<i class="fas fa-plus me-2"></i> 添加产品/服务
</button>
</div>
<div class="d-flex justify-content-between mt-5">
<button class="btn btn-outline-primary" id="prev-step-3">
<i class="fas fa-arrow-left me-2"></i> 上一步
</button>
<button class="btn btn-primary" id="next-step-3">
提交审核 <i class="fas fa-check ms-2"></i>
</button>
</div>
</div>
<!-- 第4步:完成 -->
<div id="step-4" class="form-step d-none text-center py-5">
<div class="display-1 text-success mb-4">
<i class="fas fa-check-circle"></i>
</div>
<h3 class="mb-3">提交成功!</h3>
<p class="text-muted mb-4">您的企业信息已提交,我们将在1-3个工作日内完成审核</p>
<p class="text-muted mb-5">审核通过后,您的企业将正式在平台展示,可以开始与其他企业建立联系</p>
<div class="d-flex justify-content-center">
<button class="btn btn-primary me-3" id="go-to-home">
返回首页
</button>
<button class="btn btn-outline-primary" id="add-more-info">
继续完善信息
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="footer mt-5">
<div class="container">
<div class="row">
<div class="col-md-3 mb-4">
<h5><i class="fas fa-handshake me-2"></i> 企联汇</h5>
<p class="mt-3">连接企业,创造价值,赋能商业未来</p>
</div>
<div class="col-md-3 mb-4">
<h5>产品服务</h5>
<div class="footer-links">
<a href="#">企业入驻</a>
<a href="#">企业搜索</a>
<a href="#">商业对接</a>
<a href="#">行业资讯</a>
</div>
</div>
<div class="col-md-3 mb-4">
<h5>关于我们</h5>
<div class="footer-links">
<a href="#">公司介绍</a>
<a href="#">加入我们</a>
<a href="#">联系我们</a>
<a href="#">帮助中心</a>
</div>
</div>
<div class="col-md-3 mb-4">
<h5>关注我们</h5>
<div class="footer-links">
<a href="#"><i class="fab fa-weixin me-2"></i> 微信公众号</a>
<a href="#"><i class="fab fa-weibo me-2"></i> 新浪微博</a>
<a href="#"><i class="fab fa-linkedin me-2"></i> LinkedIn</a>
<a href="#"><i class="fas fa-envelope me-2"></i> 商务合作</a>
</div>
</div>
</div>
<div class="copyright">
<p>© 2023 企联汇企业信息平台. 保留所有权利.</p>
<p class="small">京ICP备12345678号 | 京公网安备11010102001234号</p>
</div>
</div>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 自定义JavaScript -->
<script>
// 页面切换功能
document.addEventListener('DOMContentLoaded', function() {
// 获取所有页面和导航链接
const pages = document.querySelectorAll('.page');
const navLinks = document.querySelectorAll('[data-page]');
// 导航切换功能
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetPage = this.getAttribute('data-page');
// 移除所有活跃状态
navLinks.forEach(navLink => {
navLink.classList.remove('active');
});
// 添加当前活跃状态
this.classList.add('active');
// 隐藏所有页面
pages.forEach(page => {
page.classList.remove('active');
});
// 显示目标页面
if (targetPage === 'home' || targetPage === 'discover') {
document.getElementById('home-page').classList.add('active');
} else if (targetPage === 'messages') {
document.getElementById('messages-page').classList.add('active');
} else if (targetPage === 'register') {
document.getElementById('register-page').classList.add('active');
}
});
});
// 企业卡片点击事件
const companyCards = document.querySelectorAll('.company-card');
const backButton = document.getElementById('back-to-home');
companyCards.forEach(card => {
card.addEventListener('click', function() {
// 隐藏所有页面
pages.forEach(page => {
page.classList.remove('active');
});
// 显示企业详情页
document.getElementById('company-detail-page').classList.add('active');
// 更新导航状态
navLinks.forEach(navLink => {
navLink.classList.remove('active');
});
});
});
// 返回按钮点击事件
if (backButton) {
backButton.addEventListener('click', function() {
// 隐藏所有页面
pages.forEach(page => {
page.classList.remove('active');
});
// 显示首页
document.getElementById('home-page').classList.add('active');
// 更新导航状态
navLinks.forEach(navLink => {
navLink.classList.remove('active');
});
document.querySelector('[data-page="home"]').classList.add('active');
});
}
// 联系按钮点击事件
const contactBtn = document.getElementById('contact-btn');
const sendMessageBtn = document.getElementById('send-message-btn');
if (contactBtn || sendMessageBtn) {
const handleContactClick = function() {
// 隐藏所有页面
pages.forEach(page => {
page.classList.remove('active');
});
// 显示消息中心
document.getElementById('messages-page').classList.add('active');
// 更新导航状态
navLinks.forEach(navLink => {
navLink.classList.remove('active');
});
document.querySelector('[data-page="messages"]').classList.add('active');
};
if (contactBtn) contactBtn.addEventListener('click', handleContactClick);
if (sendMessageBtn) sendMessageBtn.addEventListener('click', handleContactClick);
}
// 消息发送功能
const messageInput = document.getElementById('message-input');
const sendMessageBtnChat = document.getElementById('send-message');
const chatMessages = document.getElementById('chat-messages');
if (messageInput && sendMessageBtnChat) {
const sendMessage = function() {
const message = messageInput.value.trim();
if (message === '') return;
// 创建新消息元素
const messageElement = document.createElement('div');
messageElement.className = 'message sent';
messageElement.innerHTML = `
<div class="d-flex flex-column align-items-end">
<div class="message-content bg-primary text-white mb-1">
${message}
</div>
<small class="text-muted me-2">刚刚</small>
</div>
`;
// 添加到消息列表
chatMessages.appendChild(messageElement);
// 清空输入框
messageInput.value = '';
// 滚动到底部
chatMessages.scrollTop = chatMessages.scrollHeight;
// 模拟对方回复(2秒后)
setTimeout(() => {
const replyElement = document.createElement('div');
replyElement.className = 'message received';
replyElement.innerHTML = `
<div class="d-flex align-items-end mb-1">
<div class="user-avatar me-2">创</div>
<div>
<div class="message-content bg-white">
收到,我们会尽快回复您!
</div>
<small class="text-muted ms-2">刚刚</small>
</div>
</div>
`;
chatMessages.appendChild(replyElement);
chatMessages.scrollTop = chatMessages.scrollHeight;
}, 2000);
};
sendMessageBtnChat.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
}
// 聊天联系人切换
const chatContacts = document.querySelectorAll('.chat-contact');
chatContacts.forEach(contact => {
contact.addEventListener('click', function(e) {