更新地图 和邮件服务

CONTACT_FORM_SETUP.md

@@ -0,0 +1,227 @@
+# 联系表单 EmailJS 配置指南
+
+## 📋 完成内容
+
+### 1. 已创建文件
+- ✅ `src/view/ContactUs/Index.vue` - 新的联系我们页面（含表单）
+- ✅ 安装 EmailJS 依赖
+
+### 2. 表单功能
+- ✅ 联系人姓名
+- ✅ 联系电话（11 位手机号验证）
+- ✅ 邮箱地址（邮箱格式验证）
+- ✅ 企业名称
+- ✅ 咨询主题（下拉选择）
+- ✅ 留言内容
+- ✅ 隐私政策同意
+- ✅ 表单验证
+- ✅ 提交状态提示
+- ✅ 成功/失败通知
+
+---
+
+## 🔧 EmailJS 配置步骤
+
+### 第一步：注册 EmailJS 账号
+
+1. 访问 [https://www.emailjs.com/](https://www.emailjs.com/)
+2. 点击 **"Sign Up Free"** 免费注册
+3. 使用邮箱注册并验证
+
+### 第二步：添加 Email Service
+
+1. 登录后进入 **Dashboard**
+2. 点击 **"Add New Service"**
+3. 选择 **Gmail**（推荐）或 Outlook
+4. 连接您的邮箱账号（用于发送邮件）
+5. 创建成功后，记录 **Service ID**（如 `service_abc123`）
+
+### 第三步：创建 Email Template
+
+1. 在 Dashboard 点击 **"Email Templates"**
+2. 点击 **"Create New Template"**
+3. 使用以下模板内容：
+
+#### 邮件模板内容
+
+```
+主题：新联系表单提交 - {{subject}}
+
+发件人：{{from_name}} <{{from_email}}>
+回复至：{{reply_to}}
+
+=====================================
+联系表单提交信息
+=====================================
+
+【联系人】{{from_name}}
+【联系电话】{{from_phone}}
+【邮箱】{{from_email}}
+【企业名称】{{from_company}}
+【咨询主题】{{subject}}
+【留言内容】
+{{message}}
+
+=====================================
+提交时间：{{date}}
+=====================================
+
+此邮件由网站联系表单自动发送
+收件邮箱：{{to_email}}
+```
+
+4. 保存模板，记录 **Template ID**（如 `template_xyz789`）
+
+### 第四步：获取 Public Key
+
+1. 点击右上角账号名称
+2. 选择 **"Account"**
+3. 在 **API Keys** 部分找到 **Public Key**
+4. 记录 Public Key（如 `user_abc123xyz`）
+
+### 第五步：配置前端代码
+
+打开 `src/view/ContactUs/Index.vue`，找到以下代码（约第 225 行）：
+
+```javascript
+emailjsConfig: {
+  serviceId: 'YOUR_SERVICE_ID',      // 替换为您的 Service ID
+  templateId: 'YOUR_TEMPLATE_ID',    // 替换为您的 Template ID
+  publicKey: 'YOUR_PUBLIC_KEY'       // 替换为您的 Public Key
+}
+```
+
+替换为您的实际配置：
+
+```javascript
+emailjsConfig: {
+  serviceId: 'service_abc123',      // 您的 Service ID
+  templateId: 'template_xyz789',    // 您的 Template ID
+  publicKey: 'user_abc123xyz'       // 您的 Public Key
+}
+```
+
+---
+
+## 📧 接收邮件配置
+
+### 默认接收邮箱
+
+在代码中已设置固定接收邮箱：
+```javascript
+to_email: 'zhanyuhangkong@163.com'  // 接收邮件的固定邮箱
+```
+
+如需修改，请编辑 `src/view/ContactUs/Index.vue` 第 268 行。
+
+### 多邮箱接收
+
+如需多人接收，可修改模板或使用多个 Service。
+
+---
+
+## 🎯 测试步骤
+
+1. **启动项目**
+   ```bash
+   npm run dev
+   ```
+
+2. **访问页面**
+   - 导航到 "联系我们"
+   - 或直接访问 `http://localhost:8888/#/contactus`
+
+3. **填写表单**
+   - 填写所有必填字段
+   - 点击 "提交留言"
+
+4. **验证结果**
+   - 看到 "提交成功" 提示
+   - 检查邮箱是否收到邮件
+
+---
+
+## 📊 EmailJS 免费额度
+
+| 项目 | 免费额度 | 说明 |
+|------|----------|------|
+| 邮件发送 | 200 封/月 | 足够小型企业使用 |
+| 存储 | 50MB | 存储邮件历史 |
+| 附件 | 不支持 | 免费版不支持附件 |
+
+### 升级方案
+
+如需要更多额度：
+- **Basic**: $15/月 - 2000 封邮件
+- **Professional**: $30/月 - 10000 封邮件
+- **Enterprise**: 定制方案
+
+---
+
+## 🔒 安全建议
+
+### 1. 隐藏 Public Key
+
+虽然 Public Key 是公开的，但建议：
+- 不要提交到 Git 仓库
+- 使用环境变量存储
+
+### 2. 添加验证码
+
+防止恶意提交，可添加：
+- Google reCAPTCHA
+- 图形验证码
+- 短信验证
+
+### 3. 频率限制
+
+在 EmailJS Dashboard 设置：
+- 每小时发送限制
+- 每日发送限制
+
+---
+
+## ⚠️ 常见问题
+
+### Q1: 邮件发送失败？
+**A**: 检查以下几点：
+1. Service ID、Template ID、Public Key 是否正确
+2. 邮箱账号是否已验证
+3. 浏览器控制台是否有错误信息
+
+### Q2: 收不到邮件？
+**A**: 检查：
+1. 垃圾邮件文件夹
+2. EmailJS Dashboard 的发送日志
+3. 邮箱是否已满
+
+### Q3: 表单验证不通过？
+**A**: 检查：
+1. 手机号是否为 11 位
+2. 邮箱格式是否正确
+3. 是否同意隐私政策
+
+---
+
+## 📞 技术支持
+
+如遇到问题：
+1. 查看 [EmailJS 官方文档](https://www.emailjs.com/docs/)
+2. 检查浏览器控制台错误
+3. 联系 EmailJS 支持团队
+
+---
+
+## ✅ 配置检查清单
+
+- [ ] 注册 EmailJS 账号
+- [ ] 添加 Email Service
+- [ ] 创建 Email Template
+- [ ] 获取 Service ID
+- [ ] 获取 Template ID
+- [ ] 获取 Public Key
+- [ ] 配置前端代码
+- [ ] 测试表单提交
+- [ ] 验证邮件接收
+
+完成以上步骤后，联系表单即可正常工作！

FORMSPREE_SETUP.md

@@ -0,0 +1,173 @@
+# Formspree 联系表单配置指南
+
+## ✅ 已完成内容
+
+- ✅ 移除 EmailJS 依赖
+- ✅ 切换到 Formspree（更简单）
+- ✅ 无需配置邮箱连接
+- ✅ 无需模板变量
+
+---
+
+## 🔧 配置步骤（5 分钟）
+
+### 第 1 步：注册 Formspree（2 分钟）
+
+1. 访问 [https://formspree.io/](https://formspree.io/)
+2. 点击 **"Get Started"** 或 **"Sign Up"**
+3. 使用邮箱免费注册
+4. 验证邮箱
+
+### 第 2 步：创建表单（2 分钟）
+
+1. 登录后进入 **Dashboard**
+2. 点击 **"+ New Form"**
+3. 填写表单名称（如：联系表单）
+4. 选择 **"Send emails to"** → 输入接收邮箱 `zhanyuhangkong@163.com`
+5. 点击 **"Create Form"**
+
+### 第 3 步：获取表单 ID（1 分钟）
+
+1. 创建成功后，会看到表单 URL
+2. 格式类似：`https://formspree.io/f/xnqkzoqw`
+3. 复制最后的 ID（如 `xnqkzoqw`）
+
+### 第 4 步：配置代码
+
+打开 `src/view/ContactUs/Index.vue`，找到第 212 行：
+
+```javascript
+formspreeUrl: 'https://formspree.io/f/YOUR_FORMSPREE_ID'
+```
+
+替换为您的实际表单 ID：
+
+```javascript
+formspreeUrl: 'https://formspree.io/f/xnqkzoqw'  // 您的实际 ID
+```
+
+---
+
+## 📊 Formspree 免费额度
+
+| 项目 | 免费额度 | 说明 |
+|------|----------|------|
+| 邮件发送 | 50 封/月 | 足够小型企业 |
+| 存储 | 100 条提交 | 可在后台查看 |
+| 功能 | 基础功能 | 包含所有必需功能 |
+
+### 升级方案
+
+如需要更多额度：
+- **Silver**: $10/月 - 1000 封邮件
+- **Gold**: $25/月 - 2500 封邮件
+- 企业定制方案
+
+---
+
+## 🎯 测试步骤
+
+1. **配置表单 ID** 后保存代码
+2. **重启开发服务器**（如需要）
+3. **访问联系我们页面**
+4. **填写表单并提交**
+5. **查看邮箱**是否收到邮件
+
+---
+
+## 📧 邮件内容
+
+提交后，您会在邮箱收到如下格式的邮件：
+
+```
+From: 联系人姓名 <联系人邮箱>
+Reply-To: 联系人邮箱
+
+姓名：张三
+电话：13800138000
+邮箱：zhangsan@example.com
+企业：某某公司
+主题：产品咨询
+留言：我对你们的产品很感兴趣...
+```
+
+---
+
+## 🔒 安全特性
+
+### Formspree 自带保护
+- ✅ 垃圾邮件过滤
+- ✅ 重复提交检测
+- ✅ HTTPS 加密传输
+
+### 建议添加（可选）
+- Google reCAPTCHA（防止机器人）
+- 邮箱域名白名单
+- 提交频率限制
+
+---
+
+## ⚙️ 高级功能
+
+### 1. 自定义重定向页面
+
+提交后跳转到指定页面：
+
+```javascript
+formData: {
+  ...
+  _next: 'https://yourwebsite.com/thanks'
+}
+```
+
+### 2. 启用 AJAX 模式（已启用）
+
+代码已使用 AJAX 提交，无需页面刷新。
+
+### 3. 添加更多字段
+
+在表单中添加新字段，Formspree 会自动接收：
+
+```html
+<input name="custom_field" v-model="formData.customField">
+```
+
+---
+
+## ⚠️ 常见问题
+
+### Q1: 收不到邮件？
+**A**: 检查：
+1. 垃圾邮件文件夹
+2. Formspree Dashboard 的提交记录
+3. 邮箱是否正确配置
+
+### Q2: 提交失败？
+**A**: 检查：
+1. 表单 ID 是否正确
+2. 网络连接
+3. 浏览器控制台错误
+
+### Q3: 如何查看提交的表单？
+**A**: 登录 Formspree Dashboard → 选择表单 → 查看 "Submissions"
+
+---
+
+## 📞 技术支持
+
+- Formspree 文档：https://help.formspree.io/
+- 状态页面：https://status.formspree.io/
+
+---
+
+## ✅ 配置检查清单
+
+- [ ] 注册 Formspree 账号
+- [ ] 创建新表单
+- [ ] 配置接收邮箱
+- [ ] 复制表单 ID
+- [ ] 替换代码中的表单 ID
+- [ ] 测试提交
+- [ ] 验证邮件接收
+
+完成以上步骤后，联系表单即可正常工作！

package-lock.json

@@ -11,6 +11,7 @@
         "@babel/runtime": "^7.28.6",
         "animate.css": "^3.7.0",
         "axios": "^0.27.2",
+        "emailjs-com": "^3.2.0",
         "vue": "^2.7.16",
         "vue-router": "^3.6.5",
         "vuex": "^3.6.2"
@@ -5621,6 +5622,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/emailjs-com": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/emailjs-com/-/emailjs-com-3.2.0.tgz",
+      "integrity": "sha512-Prbz3E1usiAwGjMNYRv6EsJ5c373cX7/AGnZQwOfrpNJrygQJ15+E9OOq4pU8yC977Z5xMetRfc3WmDX6RcjAA==",
+      "deprecated": "The SDK name changed to @emailjs/browser",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-7.0.3.tgz",

package.json

@@ -13,6 +13,7 @@
     "@babel/runtime": "^7.28.6",
     "animate.css": "^3.7.0",
     "axios": "^0.27.2",
+    "emailjs-com": "^3.2.0",
     "vue": "^2.7.16",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2"

src/components/Header.vue

@@ -31,7 +31,7 @@
         <li
           v-for="(item, index) in navList"
           :key="index"
-          :class="{ active: index === navIndex }"
+          :class="{ active: index === navIndex, 'nav-item-contact': item.name === '联系我们' }"
           @click="navClick(index, item.name)"
         >
           <router-link :to="item.path">
@@ -381,6 +381,35 @@ export default {
   position: relative;
 }
 
+/* 联系我们按钮样式 */
+.nav-menu > li.nav-item-contact {
+  margin-left: 10px;
+}
+
+.nav-menu > li.nav-item-contact > a {
+  background: linear-gradient(135deg, #1e73be 0%, #3b82f6 100%);
+  color: #fff !important;
+  padding: 10px 24px;
+  border-radius: 6px;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(30, 115, 190, 0.3);
+  transition: all 0.3s ease;
+}
+
+.nav-menu > li.nav-item-contact > a:hover {
+  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 115, 190, 0.4);
+}
+
+.nav-menu > li.nav-item-contact > a .nav-underline {
+  display: none;
+}
+
+.nav-menu > li.nav-item-contact > a i {
+  display: none;
+}
+
 .nav-menu > li > a {
   display: flex;
   align-items: center;
@@ -493,6 +522,26 @@ export default {
     display: none;
   }
 
+  /* 移动端联系我们按钮样式 */
+  #header .header-nav-m .header-nav-m-wrapper > li.nav-item-contact {
+    margin: 15px 20px;
+  }
+
+  #header .header-nav-m .header-nav-m-wrapper > li.nav-item-contact > a {
+    background: linear-gradient(135deg, #1e73be 0%, #3b82f6 100%);
+    color: #fff !important;
+    padding: 12px 30px;
+    border-radius: 8px;
+    font-weight: 600;
+    text-align: center;
+    display: block;
+    box-shadow: 0 2px 8px rgba(30, 115, 190, 0.3);
+  }
+
+  #header .header-nav-m .header-nav-m-wrapper > li.nav-item-contact > a i {
+    display: none;
+  }
+
   #header .header-nav-m .header-nav-m-logo {
     height: 80px;
     position: relative;

src/view/ContactUs/Index.vue

@@ -1,110 +1,763 @@
 <template>
   <div id="ContactUs">
-    <div class="banner container-fuild text-center">联系我们</div>
-    <div class="container">
-      <div class="container-fuild ContactUs-container">
-        <div class="row">
-          <div class="col-xs-12 col-sm-12 col-md-6">
-            <form class="form-horizontal" role="form">
-              <div class="form-group">
-                <label for="name" class="col-sm-2 control-label">姓名</label>
-                <div class="col-sm-10 col-xs-12">
-                  <input type="text" class="form-control" id="name" placeholder="请输入名字">
-                </div>
-              </div>
-              <div class="form-group">
-                <label for="email" class="col-sm-2 control-label">邮箱</label>
-                <div class="col-sm-10">
-                  <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
-                </div>
-              </div>
-              <div class="form-group">
-                <label for="tel" class="col-sm-2 control-label">电话</label>
-                <div class="col-sm-10">
-                  <input type="text" class="form-control" id="tel" placeholder="请输入电话">
-                </div>
-              </div>
+    <!-- Banner -->
+    <div class="banner container-fuild text-center">
+      <h1>联系我们</h1>
+      <p>期待与您合作，共创美好未来</p>
+    </div>
+
+    <div class="l-container l-section">
+      <div class="contact-grid">
+        <!-- 左侧联系信息 -->
+        <div class="contact-info">
+          <h2>联系方式</h2>
+          <p class="info-description">如果您有任何问题或需求，欢迎通过以下方式联系我们</p>
+
+          <div class="info-item">
+            <div class="info-icon">
+              <i class="glyphicon glyphicon-map-marker"></i>
+            </div>
+            <div class="info-content">
+              <h4>公司地址</h4>
+              <p>上海市徐汇区漕溪路 252 号银海大楼 C-406</p>
+            </div>
+          </div>
+
+          <div class="info-item">
+            <div class="info-icon">
+              <i class="glyphicon glyphicon-earphone"></i>
+            </div>
+            <div class="info-content">
+              <h4>联系电话</h4>
+              <p>15086621233</p>
+            </div>
+          </div>
+
+          <div class="info-item">
+            <div class="info-icon">
+              <i class="glyphicon glyphicon-envelope"></i>
+            </div>
+            <div class="info-content">
+              <h4>电子邮箱</h4>
+              <p>zhanyuhangkong@163.com</p>
+            </div>
+          </div>
+
+          <div class="info-item">
+            <div class="info-icon">
+              <i class="glyphicon glyphicon-time"></i>
+            </div>
+            <div class="info-content">
+              <h4>工作时间</h4>
+              <p>周一至周五 9:00-18:00</p>
+            </div>
+          </div>
+
+          <!-- 社交媒体 -->
+          <div class="social-links">
+            <h4>关注我们</h4>
+            <div class="social-icons">
+              <a href="#" class="social-icon wechat">
+                <i class="glyphicon glyphicon-wechat"></i>
+              </a>
+              <a href="#" class="social-icon weibo">
+                <i class="glyphicon glyphicon-globe"></i>
+              </a>
+              <a href="#" class="social-icon qq">
+                <i class="glyphicon glyphicon-user"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧表单 -->
+        <div class="contact-form-wrapper">
+          <h2>在线留言</h2>
+          <p class="form-description">填写以下表单，我们将尽快与您联系</p>
+
+          <form @submit.prevent="submitForm" class="contact-form">
+            <div class="form-group">
+              <label for="name">
+                <i class="glyphicon glyphicon-user"></i>
+                联系人 <span class="required">*</span>
+              </label>
+              <input
+                type="text"
+                id="name"
+                v-model="formData.name"
+                placeholder="请输入您的姓名"
+                required
+              >
+            </div>
+
+            <div class="form-row">
               <div class="form-group">
-                <label for="content" class="col-sm-2 control-label">内容</label>
-                <div class="col-sm-10">
-                  <textarea class="form-control" id="content" rows="8" placeholder="请输入内容"></textarea>
-                </div>
+                <label for="phone">
+                  <i class="glyphicon glyphicon-earphone"></i>
+                  联系电话 <span class="required">*</span>
+                </label>
+                <input
+                  type="tel"
+                  id="phone"
+                  v-model="formData.phone"
+                  placeholder="请输入您的手机号"
+                  pattern="[0-9]{11}"
+                  required
+                >
               </div>
+
               <div class="form-group">
-                <div class="col-sm-offset-2 col-sm-10">
-                  <button type="submit" class="btn btn-default btn-block">提交</button>
-                </div>
+                <label for="email">
+                  <i class="glyphicon glyphicon-envelope"></i>
+                  邮箱 <span class="required">*</span>
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  v-model="formData.email"
+                  placeholder="请输入您的邮箱"
+                  required
+                >
               </div>
-            </form>
-          </div>
-          <div class="col-xs-12 col-sm-12 col-md-6">
-            <div id="map" class="wow zoomIn"></div>
-          </div>
+            </div>
+
+            <div class="form-group">
+              <label for="company">
+                <i class="glyphicon glyphicon-home"></i>
+                企业名称
+              </label>
+              <input 
+                type="text" 
+                id="company" 
+                v-model="formData.company" 
+                placeholder="请输入您的企业名称（选填）"
+              >
+            </div>
+
+            <div class="form-group">
+              <label for="message">
+                <i class="glyphicon glyphicon-comment"></i>
+                留言内容
+              </label>
+              <textarea 
+                id="message" 
+                v-model="formData.message" 
+                placeholder="请详细描述您的需求...（选填）"
+                rows="5"
+              ></textarea>
+            </div>
+
+            <div class="form-agreement">
+              <label>
+                <input type="checkbox" v-model="formData.agreement" required>
+                <span>我已阅读并同意 <a href="#">隐私政策</a> 和 <a href="#">服务条款</a></span>
+              </label>
+            </div>
+
+            <button type="submit" class="btn-submit" :disabled="isSubmitting">
+              <span v-if="!isSubmitting">
+                <i class="glyphicon glyphicon-send"></i>
+                提交留言
+              </span>
+              <span v-else>
+                <i class="glyphicon glyphicon-hourglass"></i>
+                提交中...
+              </span>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <!-- 地图区域 -->
+    <div class="map-section">
+      <div class="container">
+        <h2>公司位置</h2>
+        <div class="map-container">
+          <!-- 百度地图 -->
+          <iframe 
+            width="100%" 
+            height="450" 
+            frameborder="0" 
+            scrolling="no" 
+            marginheight="0" 
+            src="https://j.map.baidu.com/68/irhJ"
+            style="border:0;"
+            allowfullscreen=""
+          ></iframe>
+          <p class="map-note">银海大楼 C 座（漕溪路辅路与漕东三路交叉口西 97 米）</p>
         </div>
       </div>
     </div>
   </div>
 </template>
+
 <script>
-import { WOW } from 'wowjs'
-import BMap from "BMap"
+import {WOW} from 'wowjs';
 
 export default {
-  name: "ContactUs",
+  name: 'ContactUs',
   data() {
-    return {};
+    return {
+      formData: {
+        name: '',
+        phone: '',
+        email: '',
+        company: '',
+        message: '',
+        agreement: false
+      },
+      isSubmitting: false,
+      // Formspree 配置
+      // 1. 访问 https://formspree.io/ 免费注册
+      // 2. 创建新表单，获取表单 ID
+      // 3. 将 YOUR_FORMSPREE_ID 替换为您的实际表单 ID
+      formspreeUrl: 'https://formspree.io/f/xqedwjbk'
+    };
   },
   mounted() {
-    var map = new BMap.Map("map"); // 创建地图实例
-    var point = new BMap.Point(121.440678,31.176694); // 创建点坐标
-    map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
-    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
-    var marker = new BMap.Marker(point); // 创建标注
-    map.addOverlay(marker); // 将标注添加到地图中
-    var opts = {
-      width: 50, // 信息窗口宽度
-      height: 10, // 信息窗口高度
-      title: "银海大楼-C座" // 信息窗口标题
-    };
-    var infoWindow = new BMap.InfoWindow(
-      "上海展域航空技术有限公司",
-      opts
-    ); // 创建信息窗口对象
-    map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
     var wow = new WOW();
     wow.init();
+  },
+  methods: {
+    async submitForm() {
+      console.log('开始提交表单...');
+
+      // 验证表单
+      if (!this.validateForm()) {
+        console.log('表单验证失败');
+        return;
+      }
+
+      console.log('表单验证通过，准备提交...');
+      this.isSubmitting = true;
+
+      try {
+        // 准备表单数据
+        const submitData = {
+          name: this.formData.name,
+          phone: this.formData.phone,
+          email: this.formData.email,
+          company: this.formData.company,
+          message: this.formData.message,
+          replyto: this.formData.email  // Formspree 专用，用于回复
+        };
+
+        console.log('提交数据:', submitData);
+
+        // 提交到 Formspree
+        const response = await fetch(this.formspreeUrl, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json'
+          },
+          body: JSON.stringify(submitData)
+        });
+
+        console.log('Formspree 响应:', response.status);
+
+        if (response.ok) {
+          const result = await response.json();
+          console.log('提交成功!', result);
+
+          // 显示成功提示
+          this.showNotification('success', '提交成功！我们会尽快与您联系。');
+
+          // 重置表单
+          this.resetForm();
+        } else {
+          const error = await response.json();
+          console.error('提交失败:', error);
+          this.showNotification('error', error.errors ?
+            error.errors.map(e => e.message).join(', ') :
+            '提交失败，请稍后重试或直接拨打电话联系我们');
+        }
+
+      } catch (error) {
+        console.error('网络错误:', error);
+        this.showNotification('error', '网络错误，请检查网络连接后重试');
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+
+    validateForm() {
+      console.log('开始验证表单...');
+      console.log('表单数据:', {
+        name: this.formData.name,
+        phone: this.formData.phone,
+        email: this.formData.email,
+        company: this.formData.company,
+        message: this.formData.message,
+        agreement: this.formData.agreement
+      });
+
+      // 姓名验证
+      if (!this.formData.name || this.formData.name.trim().length < 2) {
+        console.log('姓名验证失败');
+        this.showNotification('error', '请输入有效的姓名（至少 2 个字符）');
+        return false;
+      }
+
+      // 手机号验证
+      const phoneRegex = /^1[3-9]\d{9}$/;
+      if (!phoneRegex.test(this.formData.phone)) {
+        console.log('手机号验证失败:', this.formData.phone);
+        this.showNotification('error', '请输入有效的 11 位手机号码');
+        return false;
+      }
+
+      // 邮箱验证
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(this.formData.email)) {
+        console.log('邮箱验证失败:', this.formData.email);
+        this.showNotification('error', '请输入有效的邮箱地址');
+        return false;
+      }
+
+      // 企业验证（选填，如果填写则至少 2 个字符）
+      if (this.formData.company && this.formData.company.trim().length < 2) {
+        console.log('企业验证失败');
+        this.showNotification('error', '企业名称至少 2 个字符（或留空）');
+        return false;
+      }
+
+      // 留言内容验证（选填，如果填写则至少 5 个字符）
+      if (this.formData.message && this.formData.message.trim().length < 5) {
+        console.log('留言内容验证失败:', this.formData.message);
+        this.showNotification('error', '留言内容至少 5 个字符（或留空）');
+        return false;
+      }
+
+      // 协议验证
+      if (!this.formData.agreement) {
+        console.log('协议验证失败');
+        this.showNotification('error', '请同意隐私政策和服务条款');
+        return false;
+      }
+
+      console.log('表单验证通过');
+      return true;
+    },
+
+    showNotification(type, message) {
+      // 创建提示元素
+      const notification = document.createElement('div');
+      notification.className = `notification notification-${type}`;
+      notification.innerHTML = `
+        <i class="glyphicon glyphicon-${type === 'success' ? 'ok' : 'remove'}"></i>
+        <span>${message}</span>
+      `;
+
+      // 添加到页面
+      document.body.appendChild(notification);
+
+      // 动画显示
+      setTimeout(() => {
+        notification.classList.add('show');
+      }, 10);
+
+      // 3 秒后移除
+      setTimeout(() => {
+        notification.classList.remove('show');
+        setTimeout(() => {
+          document.body.removeChild(notification);
+        }, 300);
+      }, 3000);
+    },
+
+    resetForm() {
+      this.formData = {
+        name: '',
+        phone: '',
+        email: '',
+        company: '',
+        subject: '',
+        message: '',
+        agreement: false
+      };
+    }
   }
 };
 </script>
+
 <style scoped>
+/* Banner */
 .banner {
   color: #fff;
-  font-size: 30px;
-  height: 150px;
-  line-height: 150px;
-  background-image: url("~@/assets/img/banner_5.jpg");
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-image: url("../../assets/img/banner_4.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: scroll;
   background-position: center center;
 }
-.ContactUs-container {
-  padding: 80px 0;
-  transition: all ease 0.5s;
+
+.banner h1 {
+  font-size: 36px;
+  font-weight: var(--font-weight-bold);
+  margin: 0 0 10px;
+  letter-spacing: 2px;
+}
+
+.banner p {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0;
+  letter-spacing: 1px;
+}
+
+/* 联系网格 */
+.contact-grid {
+  display: grid;
+  grid-template-columns: 400px 1fr;
+  gap: 60px;
+  margin-top: 40px;
+}
+
+/* 左侧联系信息 */
+.contact-info {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  padding: 40px;
+  border-radius: 12px;
+  color: #fff;
+}
+
+.contact-info h2 {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 15px;
+}
+
+.info-description {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
+  margin-bottom: 30px;
+  line-height: 1.6;
+}
+
+.info-item {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 25px;
+}
+
+.info-icon {
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.info-icon i {
+  font-size: 18px;
+  color: #fff;
+}
+
+.info-content h4 {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.info-content p {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* 社交媒体 */
+.social-links {
+  margin-top: 40px;
+  padding-top: 30px;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.social-links h4 {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 15px;
+}
+
+.social-icons {
+  display: flex;
+  gap: 10px;
+}
+
+.social-icon {
+  width: 36px;
+  height: 36px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.social-icon:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+}
+
+.social-icon.wechat { background: #07C160; }
+.social-icon.weibo { background: #E6162D; }
+.social-icon.qq { background: #12B7F5; }
+
+/* 右侧表单 */
+.contact-form-wrapper {
+  background: #fff;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.contact-form-wrapper h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.form-description {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 30px;
+}
+
+.contact-form {
+  max-width: 100%;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.form-group label i {
+  color: #1e73be;
+  font-size: 14px;
+}
+
+.form-group .required {
+  color: #f44336;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 12px 15px;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #333;
+  transition: all 0.3s ease;
   box-sizing: border-box;
 }
-#map {
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  border-color: #1e73be;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(30, 115, 190, 0.1);
+}
+
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+  color: #999;
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 120px;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.form-agreement {
+  margin: 20px 0;
+}
+
+.form-agreement label {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  font-size: 13px;
+  color: #666;
+  cursor: pointer;
+}
+
+.form-agreement input[type="checkbox"] {
+  width: auto;
+  margin-top: 2px;
+}
+
+.form-agreement a {
+  color: #1e73be;
+  text-decoration: none;
+}
+
+.form-agreement a:hover {
+  text-decoration: underline;
+}
+
+.btn-submit {
   width: 100%;
-  height: 365px;
+  padding: 15px;
+  background: linear-gradient(135deg, #1e73be 0%, #3b82f6 100%);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.btn-submit:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(30, 115, 190, 0.3);
+}
+
+.btn-submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 地图区域 */
+.map-section {
+  background: #f8f9fa;
+  padding: 60px 0;
+  margin-top: 60px;
+}
+
+.map-section h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  margin-bottom: 30px;
 }
-.row {
-  margin-right: 0;
-  margin-left: 0;
+
+.map-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.map-note {
+  text-align: center;
+  padding: 15px;
+  background: #f8f9fa;
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+}
+
+/* 通知提示 */
+.notification {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  padding: 15px 25px;
+  border-radius: 6px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  z-index: 999999;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  transform: translateX(400px);
+  transition: transform 0.3s ease;
+}
+
+.notification.show {
+  transform: translateX(0);
 }
-@media screen and (max-width: 997px) {
-  .ContactUs-container {
-    padding: 20px 0;
+
+.notification-success {
+  background: #4CAF50;
+}
+
+.notification-error {
+  background: #f44336;
+}
+
+/* 响应式 */
+@media screen and (max-width: 991px) {
+  .contact-grid {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+
+  .contact-info {
+    padding: 30px;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
   }
 }
-</style>
 
+@media screen and (max-width: 767px) {
+  .banner {
+    height: 150px;
+  }
+
+  .banner h1 {
+    font-size: 28px;
+  }
+
+  .contact-info,
+  .contact-form-wrapper {
+    padding: 25px;
+  }
+
+  .form-group input,
+  .form-group select,
+  .form-group textarea {
+    font-size: 13px;
+    padding: 10px 12px;
+  }
+
+  .btn-submit {
+    font-size: 15px;
+    padding: 12px;
+  }
+}
+</style>