feat(contact): 重构“联系我们”页面及表单交互体验

- 重新设计页面布局,增加顶部横幅及联系方式版块
- 优化在线咨询表单,增加字段并调整样式和验证规则
- 替换旧的提交逻辑为新异步模拟提交,提示更友好
- 移除旧二维码和联系卡片,增加温馨提示信息
- 添加详细样式,提升页面视觉效果和响应式布局
- 更新会员服务联系信息区,增加按钮链接和服务时间
- 会员服务列表使用模拟数据,支持按类型过滤展示
- 登录页左侧风格调整,突出广西决策咨询中心品牌形象
- 修改数值统计及底部版权声明,更新背景渐变颜色和按钮样式
This commit is contained in:
2026-04-26 01:46:24 +08:00
parent 72f5025979
commit b334ad75cd
3 changed files with 396 additions and 220 deletions

View File

@@ -12,36 +12,36 @@
<div class="left-content">
<!-- 品牌 logo -->
<div class="brand">
<img src="/logo.png" class="brand-logo-img" alt="Websopy" />
<div class="brand-site-name">websopy</div>
<div class="brand-logo-text">决策咨询网</div>
<div class="brand-site-name">GX Decision Consulting</div>
</div>
<!-- 中央文案 -->
<div class="hero-text">
<div class="hero-tag">{{ $t('login.aiPlatform') }}</div>
<h1 class="hero-title">{{ config?.loginTitle || $t('login.buildNextGen') }}</h1>
<p class="hero-desc">{{ $t('login.lowcodeAccess') }}<br />{{ $t('login.fromIdeaToOnline') }}</p>
<div class="hero-tag">广西决策咨询中心</div>
<h1 class="hero-title">汇聚专家智慧<br>服务政府决策</h1>
<p class="hero-desc">广西决策咨询网是自治区党委政府决策咨询服务的重要平台<br>汇聚各领域专家学者提供权威决策咨询服务</p>
<div class="hero-stats">
<div class="stat-item">
<span class="stat-num">10000+</span>
<span class="stat-label">{{ $t('login.developers') }}</span>
<span class="stat-num">200+</span>
<span class="stat-label">认证专家</span>
</div>
<div class="stat-divider" />
<div class="stat-item">
<span class="stat-num">500+</span>
<span class="stat-label">{{ $t('login.aiApps') }}</span>
<span class="stat-label">会员单位</span>
</div>
<div class="stat-divider" />
<div class="stat-item">
<span class="stat-num">99.9%</span>
<span class="stat-label">{{ $t('login.uptime') }}</span>
<span class="stat-num">1000+</span>
<span class="stat-label">建言献策</span>
</div>
</div>
</div>
<!-- 底部 -->
<div class="left-footer">
<span>{{ $t('login.copyright') }}</span>
<span>© {{ new Date().getFullYear() }} 广西决策咨询中心 保留所有权利</span>
</div>
</div>
</div>
@@ -445,7 +445,7 @@ onUnmounted(() => {
.login-left {
flex: 1;
position: relative;
background: linear-gradient(150deg, #0f0c29 0%, #1a1a4e 30%, #24243e 60%, #302b63 100%);
background: linear-gradient(150deg, #0d1b2a 0%, #1e3a5f 30%, #2563eb 60%, #1e3a5f 100%);
background-size: cover;
background-position: center;
display: flex;
@@ -457,7 +457,7 @@ onUnmounted(() => {
.left-overlay {
position: absolute;
inset: 0;
background: linear-gradient(150deg, rgba(10, 10, 40, 0.75) 0%, rgba(30, 20, 80, 0.55) 100%);
background: linear-gradient(150deg, rgba(13, 27, 42, 0.75) 0%, rgba(30, 58, 95, 0.55) 100%);
}
/* 装饰网格 */
@@ -480,7 +480,7 @@ onUnmounted(() => {
.dot-1 {
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, transparent 65%);
background: radial-gradient(circle, rgba(37, 99, 235, 0.22) 0%, transparent 65%);
top: -120px;
right: -80px;
}
@@ -547,6 +547,14 @@ onUnmounted(() => {
width: auto;
object-fit: contain;
}
/* 品牌文字 logo */
.brand-logo-text {
font-size: 22px;
font-weight: 800;
color: #fff;
letter-spacing: 0.04em;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
/* site-name 渐变文字,与导航栏保持一致 */
.brand-site-name {
color: #fff;
@@ -863,7 +871,7 @@ onUnmounted(() => {
/* 提交按钮 */
.submit-btn.ant-btn-primary {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%) !important;
border: none !important;
border-radius: 10px !important;
height: 48px !important;