|
|
@@ -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>
|
