gxwebsoft/template-nuxt4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版官网模板

Browse Source
This commit is contained in:
赵忠林
2026-04-29 01:33:33 +08:00
commit 0d82386f8f
341 changed files with 64526 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

328
app/pages/contact.vue Normal file
View File

@@ -0,0 +1,328 @@
<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 :md="8" :xs="24">
<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 :md="16" :xs="24">
<div class="contact-form-panel">
<h2 class="form-title">在线咨询</h2>
<p class="form-desc">请填写您的咨询内容，我们将尽快与您联系</p>
<a-form
:model="form"
:rules="rules"
class="contact-form"
layout="vertical"
>
<a-row :gutter="16">
<a-col :md="12" :xs="24">
<a-form-item label="姓名" name="name">
<a-input v-model:value="form.name" placeholder="请输入您的姓名" size="large" />
</a-form-item>
</a-col>
<a-col :md="12" :xs="24">
<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 :md="12" :xs="24">
<a-form-item label="单位/组织" name="organization">
<a-input v-model:value="form.organization" placeholder="请输入单位或组织名称" size="large" />
</a-form-item>
</a-col>
<a-col :md="12" :xs="24">
<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"
:maxlength="1000"
:rows="5"
placeholder="请详细描述您的咨询内容..."
show-count
size="large"
/>
</a-form-item>
<a-form-item>
<a-space>
<a-button :loading="submitting" size="large" type="primary" @click="handleSubmit">
提交咨询
</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 lang="ts" setup>
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>