1731 lines
88 KiB
HTML
1731 lines
88 KiB
HTML
<!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) { |