u

code/link56/link56-frontend-new/src/views/auth/forget.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { reactive, ref } from 'vue'
 
 import { useRouter } from 'vue-router'
 
@@ -37,17 +38,29 @@ const carouselList = [
   },
 ]
 
-// do not use same name with ref
-const form = reactive({
-  name: '',
-  region: '',
-  date1: '',
-  date2: '',
-  delivery: false,
-  type: [],
-  resource: '',
-  desc: '',
+const form = reactive<{
+  email: string
+}>({
+  email: '',
 })
+const formRef = ref<FormInstance>()
+const formRules = {
+  email: [
+    { required: true, message: '邮箱不能为空', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] },
+  ],
+}
+const submitLoading = ref(false)
+
+async function submitForm(formEl: FormInstance | undefined) {
+  if (!formEl)
+    return
+  await formEl.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true
+    }
+  })
+}
 
 function onSubmit() {
   console.log('submit!')
@@ -89,16 +102,19 @@ function onSubmit() {
           请输入您的电子邮箱地址，我们将向您发送一封包含密码重置说明的邮件。
         </p>
         <el-form
+          ref="formRef"
           :model="form"
+          :rules="formRules"
           label-width="auto"
           label-position="top"
+          hide-required-asterisk
         >
-          <el-form-item label="邮箱">
-            <el-input v-model="form.name" placeholder="请输入邮箱" size="large" />
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="form.email" placeholder="请输入邮箱" size="large" />
           </el-form-item>
 
           <el-form-item>
-            <el-button type="primary" class="form-btn">
+            <el-button type="primary" class="form-btn" :loading="submitLoading" @click="submitForm(formRef)">
               找回密码
             </el-button>
           </el-form-item>

code/link56/link56-frontend-new/src/views/auth/login.vue

@@ -56,14 +56,14 @@ const formRules = {
   ],
 }
 
-const saveLoading = ref(false)
+const submitLoading = ref(false)
 
 async function submitForm(formEl: FormInstance | undefined) {
   if (!formEl)
     return
   await formEl.validate((valid) => {
     if (valid) {
-      saveLoading.value = true
+      submitLoading.value = true
       loginApi({
         loginCredential: form.loginCredential,
         password: form.password,
@@ -87,7 +87,7 @@ async function submitForm(formEl: FormInstance | undefined) {
       }).catch((err) => {
         console.log(err)
       }).finally(() => {
-        saveLoading.value = false
+        submitLoading.value = false
       })
     }
   })
@@ -164,7 +164,7 @@ function navigateTo(path: string) {
           </el-form-item>
 
           <el-form-item>
-            <el-button type="primary" class="form-btn" :loading="saveLoading" @click="submitForm(formRef)">
+            <el-button type="primary" class="form-btn" :loading="submitLoading" @click="submitForm(formRef)">
               登录
             </el-button>
           </el-form-item>

code/link56/link56-frontend-new/src/views/auth/register.vue

@@ -81,6 +81,7 @@ const formRules = {
     },
   ],
 }
+const submitLoading = ref(false)
 
 // --- 邮箱校验（简单正则） ---
 const emailRegex = /^\w+(?:[-.]\w+)*@\w+(?:[-.]\w+)*\.\w+(?:[-.]\w+)*$/
@@ -117,10 +118,15 @@ function handleSendEmailCode() {
   startCountdown()
 }
 
-async function submitForm() {
-
+async function submitForm(formEl: FormInstance | undefined) {
+  if (!formEl)
+    return
+  await formEl.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true
+    }
+  })
 }
-
 function navigateTo(path: string) {
   router.push(path)
 }
@@ -163,6 +169,7 @@ function navigateTo(path: string) {
           ref="formRef"
           :model="form"
           :rules="formRules"
+          hide-required-asterisk
           label-width="auto"
           label-position="top"
         >
@@ -215,7 +222,7 @@ function navigateTo(path: string) {
           </el-form-item>
 
           <el-form-item>
-            <el-button type="primary" class="form-btn" @click="submitForm()">
+            <el-button type="primary" class="form-btn" @click="submitForm(formRef)">
               注册
             </el-button>
           </el-form-item>

code/link56/link56-frontend-new/test.html

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