赵忠林
b334ad75cd
- 重新设计页面布局，增加顶部横幅及联系方式版块 - 优化在线咨询表单，增加字段并调整样式和验证规则 - 替换旧的提交逻辑为新异步模拟提交，提示更友好 - 移除旧二维码和联系卡片，增加温馨提示信息 - 添加详细样式，提升页面视觉效果和响应式布局 - 更新会员服务联系信息区，增加按钮链接和服务时间 - 会员服务列表使用模拟数据，支持按类型过滤展示 - 登录页左侧风格调整，突出广西决策咨询中心品牌形象 - 修改数值统计及底部版权声明，更新背景渐变颜色和按钮样式
329 lines
8.4 KiB
Vue
329 lines
8.4 KiB
Vue
<template>
|
||
<div class="contact-page">
|
||
<div class="contact-banner">
|
||
<div class="mx-auto max-w-screen-xl px-4 py-16 text-center">
|
||
<h1 class="banner-title">联系我们</h1>
|
||
<p class="banner-desc">广西决策咨询中心期待与您交流合作</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mx-auto max-w-screen-xl px-4 py-12">
|
||
<a-row :gutter="[48, 48]">
|
||
<!-- 左侧：联系信息 -->
|
||
<a-col :xs="24" :md="8">
|
||
<div class="contact-info">
|
||
<h2 class="info-title">联系信息</h2>
|
||
|
||
<div class="info-item">
|
||
<div class="info-icon">📍</div>
|
||
<div class="info-content">
|
||
<div class="info-label">办公地址</div>
|
||
<div class="info-value">广西·南宁·良庆区 五象大道401号 五象航洋城3号楼</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-item">
|
||
<div class="info-icon">📞</div>
|
||
<div class="info-content">
|
||
<div class="info-label">联系电话</div>
|
||
<div class="info-value">0771-5386339</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-item">
|
||
<div class="info-icon">📧</div>
|
||
<div class="info-content">
|
||
<div class="info-label">电子邮箱</div>
|
||
<div class="info-value">gxjzxzx@126.com</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-item">
|
||
<div class="info-icon">⏰</div>
|
||
<div class="info-content">
|
||
<div class="info-label">服务时间</div>
|
||
<div class="info-value">周一至周五 9:00-17:00</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-item">
|
||
<div class="info-icon">📮</div>
|
||
<div class="info-content">
|
||
<div class="info-label">邮政编码</div>
|
||
<div class="info-value">530200</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-divider"></div>
|
||
|
||
<div class="social-section">
|
||
<div class="social-title">关注我们</div>
|
||
<div class="social-items">
|
||
<a-tooltip title="微信公众号">
|
||
<div class="social-item">📱</div>
|
||
</a-tooltip>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 右侧：咨询表单 -->
|
||
<a-col :xs="24" :md="16">
|
||
<div class="contact-form-panel">
|
||
<h2 class="form-title">在线咨询</h2>
|
||
<p class="form-desc">请填写您的咨询内容，我们将尽快与您联系</p>
|
||
|
||
<a-form
|
||
layout="vertical"
|
||
:model="form"
|
||
:rules="rules"
|
||
class="contact-form"
|
||
>
|
||
<a-row :gutter="16">
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="姓名" name="name">
|
||
<a-input v-model:value="form.name" placeholder="请输入您的姓名" size="large" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="联系电话" name="phone">
|
||
<a-input v-model:value="form.phone" placeholder="请输入联系电话" size="large" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="16">
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="单位/组织" name="organization">
|
||
<a-input v-model:value="form.organization" placeholder="请输入单位或组织名称" size="large" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="咨询类型" name="type">
|
||
<a-select v-model:value="form.type" placeholder="请选择咨询类型" size="large">
|
||
<a-select-option value="consult">咨询服务</a-select-option>
|
||
<a-select-option value="expert">专家申请</a-select-option>
|
||
<a-select-option value="member">会员申请</a-select-option>
|
||
<a-select-option value="cooperation">商务合作</a-select-option>
|
||
<a-select-option value="other">其他</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-form-item label="咨询内容" name="content">
|
||
<a-textarea
|
||
v-model:value="form.content"
|
||
:rows="5"
|
||
placeholder="请详细描述您的咨询内容..."
|
||
:maxlength="1000"
|
||
show-count
|
||
size="large"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item>
|
||
<a-space>
|
||
<a-button type="primary" size="large" @click="handleSubmit" :loading="submitting">
|
||
提交咨询
|
||
</a-button>
|
||
<a-button size="large" @click="handleReset">
|
||
重置
|
||
</a-button>
|
||
</a-space>
|
||
</a-form-item>
|
||
</a-form>
|
||
|
||
<div class="form-tip">
|
||
💡 温馨提示：我们将在1-3个工作日内回复您的咨询，如有紧急事项请直接电话联系。
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { message } from 'ant-design-vue'
|
||
|
||
useHead({ title: '联系我们 - 广西决策咨询网' })
|
||
|
||
const submitting = ref(false)
|
||
|
||
const form = reactive({
|
||
name: '',
|
||
phone: '',
|
||
organization: '',
|
||
type: undefined as string | undefined,
|
||
content: '',
|
||
})
|
||
|
||
const rules = {
|
||
name: [{ required: true, message: '请输入您的姓名' }],
|
||
phone: [{ required: true, message: '请输入联系电话' }],
|
||
content: [{ required: true, message: '请输入咨询内容' }],
|
||
}
|
||
|
||
async function handleSubmit() {
|
||
if (!form.name || !form.phone || !form.content) {
|
||
message.warning('请填写必填项')
|
||
return
|
||
}
|
||
submitting.value = true
|
||
try {
|
||
// TODO: 接入实际API提交咨询
|
||
// await submitContact(form)
|
||
await new Promise(resolve => setTimeout(resolve, 500))
|
||
message.success('咨询已提交，我们会尽快与您联系！')
|
||
handleReset()
|
||
} catch (e: any) {
|
||
message.error(e?.message || '提交失败')
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
|
||
function handleReset() {
|
||
Object.assign(form, {
|
||
name: '',
|
||
phone: '',
|
||
organization: '',
|
||
type: undefined,
|
||
content: '',
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.contact-banner {
|
||
background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
|
||
color: #fff;
|
||
}
|
||
|
||
.banner-title {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
margin: 0 0 12px;
|
||
}
|
||
|
||
.banner-desc {
|
||
font-size: 18px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin: 0;
|
||
}
|
||
|
||
.contact-info {
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||
height: 100%;
|
||
}
|
||
|
||
.info-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
margin: 0 0 28px;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
gap: 14px;
|
||
margin-bottom: 24px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.info-icon {
|
||
font-size: 22px;
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.info-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 13px;
|
||
color: #9ca3af;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 15px;
|
||
color: #374151;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.info-divider {
|
||
height: 1px;
|
||
background: #f0f0f0;
|
||
margin: 24px 0;
|
||
}
|
||
|
||
.social-section {}
|
||
|
||
.social-title {
|
||
font-size: 14px;
|
||
color: #6b7280;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.social-items {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.social-item {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: #f3f4f6;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.social-item:hover {
|
||
background: #e5e7eb;
|
||
}
|
||
|
||
.contact-form-panel {
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.form-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
margin: 0 0 8px;
|
||
}
|
||
|
||
.form-desc {
|
||
font-size: 14px;
|
||
color: #9ca3af;
|
||
margin: 0 0 28px;
|
||
}
|
||
|
||
.contact-form {}
|
||
|
||
.form-tip {
|
||
margin-top: 16px;
|
||
padding: 14px 16px;
|
||
background: #eff6ff;
|
||
border-radius: 10px;
|
||
font-size: 13px;
|
||
color: #3b82f6;
|
||
line-height: 1.6;
|
||
}
|
||
</style>
|