feat(contact): 实现大公司品牌级联系我们独立页（结构化需求表单、物理双基地地址、架构师直连热线与地图视窗）
这个提交包含在：
wikiboss
@@ -1,190 +1,329 @@
|
|||||||
{extend name="web/official_common/pc/base" /}
|
{extend name="web/official_common/pc/base" /}
|
||||||
|
|
||||||
{block name="css"}
|
{block name="css"}
|
||||||
<link href="__ADDON__/layui-v2.6.8/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" type="text/css">
|
<link href="__ADDON__/layui-v2.6.8/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" type="text/css">
|
||||||
{/block}
|
{/block}
|
||||||
|
|
||||||
{block name="content"}
|
{block name="content"}
|
||||||
<!--主体内容 开始-->
|
<!-- 纳海川官方网站 · 联系我们独立页 (Contact Us Page) 开始 -->
|
||||||
<div class="article">
|
|
||||||
<!--右侧区域 开始-->
|
<!-- 1. 联系我们 Hero 视窗 -->
|
||||||
<div id="right">
|
<section class="nhc-page-hero nhc-lattice-pattern">
|
||||||
<div class="right_title">
|
<div class="nhc-container">
|
||||||
<h2>
|
<div class="nhc-breadcrumb">
|
||||||
<img src="__ADDON__/images/titleleftbg.png" align="absmiddle">{:ze($res,'name')}
|
<a href="{:addon_url('official/web.official_home/index')}">首页</a>
|
||||||
<img src="__ADDON__/images/titlerightbg.png" align="absmiddle">
|
<span>/</span>
|
||||||
</h2>
|
<span>联系我们</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="right_body">
|
<div style="margin-bottom: 16px;">
|
||||||
<table class="resume_table">
|
<span class="nhc-seal">精诚共赢 · 敏捷响应</span>
|
||||||
<form enctype="multipart/form-data" class="layui-form" id="frmResume">
|
</div>
|
||||||
{:token()}
|
<h1 class="nhc-page-title">开启确定性数字化技术合作</h1>
|
||||||
<tbody>
|
<p class="nhc-page-desc">
|
||||||
<tr class="layui-form-item">
|
贵阳纳海川科技有限公司技术中台与解决方案架构团队常驻西南核心数谷。我们承诺为每一家意向企业提供经得起白盒审查的架构评估与 24 小时快速响应。
|
||||||
<th>
|
</p>
|
||||||
<label class="layui-form-label">{:__l('online_message','Title')}</label>
|
</div>
|
||||||
</th>
|
</section>
|
||||||
<td class="layui-input-block">
|
|
||||||
<input type="text" name="title" required lay-verify="required" autocomplete="off" placeholder="{:__l('online_message','Fill in')}{:__l('online_message','Title')}" class="layui-input">
|
<!-- 2. 主体联系与需求评估板块 (12列网格，左7右5) -->
|
||||||
</td>
|
<section class="nhc-contact-section" style="padding: 70px 0 90px; background: #FFFFFF;">
|
||||||
</tr>
|
<div class="nhc-container">
|
||||||
<tr class="layui-form-item">
|
<div class="nhc-contact-layout">
|
||||||
<th>
|
|
||||||
<label class="layui-form-label">{:__l('online_message','Name')}</label>
|
<!-- 左侧：需求评估与工单表单 (7列) -->
|
||||||
</th>
|
<div class="nhc-contact-form-wrap nhc-corner-card">
|
||||||
<td class="layui-input-block">
|
<div class="nhc-form-header">
|
||||||
<input type="text" name="name" required lay-verify="required" autocomplete="off" placeholder="{:__l('online_message','Fill in')}{:__l('online_message','Name')}" class="layui-input">
|
<span class="nhc-seal" style="margin-bottom: 8px;">需求评估</span>
|
||||||
</td>
|
<h2 class="nhc-form-title">预约资深架构师 1 对 1 方案研讨</h2>
|
||||||
</tr>
|
<p class="nhc-form-sub">
|
||||||
<tr class="layui-form-item">
|
请详细填写您的业务需求与期望指标，我们将在 2 小时内安排专属架构师与您深度对接。
|
||||||
<th>
|
</p>
|
||||||
<label class="layui-form-label">{:__l('online_message','Phone')}</label>
|
</div>
|
||||||
</th>
|
|
||||||
<td class="layui-input-block">
|
<form enctype="multipart/form-data" class="nhc-contact-form" id="frmResume">
|
||||||
<input type="text" name="phone" required lay-verify="required" autocomplete="off" placeholder="{:__l('online_message','Fill in')}{:__l('online_message','Phone')}" class="layui-input">
|
{:token()}
|
||||||
</td>
|
|
||||||
</tr>
|
<!-- 意向主题快捷选择 -->
|
||||||
<tr class="layui-form-item">
|
<div class="nhc-form-group">
|
||||||
<th>
|
<label class="nhc-form-label">意向合作方向 <span class="nhc-required">*</span></label>
|
||||||
<label class="layui-form-label">{:__l('online_message','Content')}</label>
|
<div class="nhc-tag-selector">
|
||||||
</th>
|
<span class="nhc-topic-tag active" data-topic="企业级技术中台与软件定制">企业级中台定制</span>
|
||||||
<td class="layui-input-block">
|
<span class="nhc-topic-tag" data-topic="APP与微信小程序全生态定制">APP/小程序定制</span>
|
||||||
<textarea placeholder="{:__l('online_message','Fill in')}{:__l('online_message','Content')}" name="content" class="layui-textarea" required></textarea>
|
<span class="nhc-topic-tag" data-topic="垂直领域私有 RAG 与 AI 智能体开发">私有 AI 智能体</span>
|
||||||
</td>
|
<span class="nhc-topic-tag" data-topic="商业商城/收银/进销存系统部署">商业产品选型</span>
|
||||||
</tr>
|
</div>
|
||||||
{if $captchaType == 'text'}
|
<input type="text" name="title" id="contactTitle" value="企业级技术中台与软件定制" required class="nhc-form-input" placeholder="请填写需求主题或选择上方标签">
|
||||||
<tr class="layui-form-item">
|
</div>
|
||||||
<th>
|
|
||||||
<label class="layui-form-label">{:__l('index','Captcha')}</label>
|
<div class="nhc-form-row">
|
||||||
</th>
|
<!-- 称呼 -->
|
||||||
<td class="layui-input-block">
|
<div class="nhc-form-group">
|
||||||
{include file="web/official_common/pc/captcha" event="register" type="$captchaType" /}
|
<label class="nhc-form-label">对接人姓名 / 称呼 <span class="nhc-required">*</span></label>
|
||||||
</td>
|
<input type="text" name="name" required class="nhc-form-input" placeholder="如：张总监 / 李经理">
|
||||||
</tr>
|
</div>
|
||||||
{/if}
|
<!-- 电话 -->
|
||||||
<tr class="layui-form-item">
|
<div class="nhc-form-group">
|
||||||
<td colspan="2" class="operation" style="padding-top: 10px">
|
<label class="nhc-form-label">联系电话 / 手机 <span class="nhc-required">*</span></label>
|
||||||
<button class="form_button btn in_post" stu="1" type="button">{:__l('online_message','Submit a message')}</button>
|
<input type="text" name="phone" required class="nhc-form-input" placeholder="请填写您的联系手机">
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
</tbody>
|
|
||||||
</form>
|
<!-- 详细需求 -->
|
||||||
</table>
|
<div class="nhc-form-group">
|
||||||
<div class="page"></div>
|
<label class="nhc-form-label">业务背景与详细需求 <span class="nhc-required">*</span></label>
|
||||||
</div>
|
<textarea name="content" class="nhc-form-textarea" rows="4" placeholder="请简述您现存的系统痛点、期望实现的功能模块、预估上线周期或性能要求，以便架构师提前研判..."></textarea>
|
||||||
<div class="right_bottom"></div>
|
</div>
|
||||||
</div>
|
|
||||||
<!--右侧区域 结束-->
|
{if $captchaType == 'text'}
|
||||||
<div class="clear"></div>
|
<div class="nhc-form-group">
|
||||||
</div>
|
<label class="nhc-form-label">安全验证码 <span class="nhc-required">*</span></label>
|
||||||
<!--主体内容 结束-->
|
<div style="display: flex; gap: 12px; align-items: center;">
|
||||||
|
{include file="web/official_common/pc/captcha" event="register" type="$captchaType" /}
|
||||||
<style>
|
</div>
|
||||||
.layui-textarea{
|
</div>
|
||||||
margin-top: 5px !important;
|
{/if}
|
||||||
}
|
|
||||||
.layui-input{
|
<div style="margin-top: 24px;">
|
||||||
margin-top: 5px !important;
|
<button class="nhc-btn nhc-btn-primary nhc-btn-lg in_post" stu="1" type="button" style="width: 100%; justify-content: center;">
|
||||||
}
|
<span>立即提交需求评估</span>
|
||||||
.layui-form-label{
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||||
text-align: left !important;
|
</button>
|
||||||
}
|
</div>
|
||||||
</style>
|
<div class="nhc-form-privacy">
|
||||||
|
纳海川严格执行 ISO 27001 信息安全规范，承诺对您的商业需求与业务数据终身保密。
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
{/block}
|
|
||||||
|
<!-- 右侧：直通热线、实体地址与地图 (5列) -->
|
||||||
{block name="js"}
|
<div class="nhc-contact-info-wrap">
|
||||||
<script src="__ADDON__/layui-v2.6.8/layui-v2.6.8/layui/layui.js"></script>
|
|
||||||
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
|
<!-- 直通热线与响应 SLA 卡片 -->
|
||||||
<script>
|
<div class="nhc-contact-card nhc-corner-card" style="margin-bottom: 24px;">
|
||||||
var captchaType = "{$captchaType}";
|
<div class="nhc-info-badge">快速直联</div>
|
||||||
layui.use(['form', 'layedit', 'laydate'], function(){
|
<h3 class="nhc-info-card-title">业务咨询与技术支持</h3>
|
||||||
var form = layui.form
|
|
||||||
,layer = layui.layer;
|
<div class="nhc-info-item">
|
||||||
|
<div class="nhc-info-icon">
|
||||||
$('.in_post').click(function () {
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
||||||
let that = this;
|
</div>
|
||||||
let title = $("input[name='title']").val();
|
<div class="nhc-info-text">
|
||||||
let name = $("input[name='name']").val();
|
<div class="nhc-info-label">业务咨询专线</div>
|
||||||
let phone = $("input[name='phone']").val();
|
<a href="tel:13984036826" class="nhc-info-val nhc-phone-link">13984036826</a>
|
||||||
let __token__ = $("input[name='__token__']").val();
|
<div class="nhc-info-note">工作日 09:00 - 18:00（资深架构师直连）</div>
|
||||||
let content = $("textarea[name='content']").val();
|
</div>
|
||||||
|
</div>
|
||||||
let captcha = $("input[name='captcha']").val();
|
|
||||||
|
<div class="nhc-info-item">
|
||||||
let stu = $('.in_post').attr('stu');
|
<div class="nhc-info-icon">
|
||||||
if (stu != 1) {
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||||
layer.msg("{:__l('index','Do not click again')}");
|
</div>
|
||||||
}
|
<div class="nhc-info-text">
|
||||||
|
<div class="nhc-info-label">技术委员会公用邮箱</div>
|
||||||
|
<div class="nhc-info-val">server@gynhc.com</div>
|
||||||
if (!title) {
|
<div class="nhc-info-note">商务合作、白盒技术方案评审接收入口</div>
|
||||||
layer.msg("{:__l('online_message','Title')}" + "{:__l('index','No_empty')}");
|
</div>
|
||||||
return false;
|
</div>
|
||||||
}
|
|
||||||
if (!name) {
|
<div class="nhc-sla-bar">
|
||||||
layer.msg("{:__l('online_message','Name')}" + "{:__l('index','No_empty')}");
|
<div class="nhc-sla-tag">SLA 响应承诺</div>
|
||||||
return false;
|
<div class="nhc-sla-text">工作日 2 小时内快速响应 · 24 小时内出具方案大纲</div>
|
||||||
}
|
</div>
|
||||||
if (!phone) {
|
</div>
|
||||||
layer.msg("{:__l('online_message','Phone')}" + "{:__l('index','No_empty')}");
|
|
||||||
return false;
|
<!-- 实体办公双基地与地图视窗 (Map & Addresses) -->
|
||||||
}
|
<div class="nhc-contact-card nhc-contact-map nhc-corner-card">
|
||||||
if (!content) {
|
<h3 class="nhc-info-card-title">物理实体办公基地</h3>
|
||||||
layer.msg("{:__l('online_message','Content')}" + "{:__l('index','No_empty')}");
|
|
||||||
return false;
|
<!-- 营销与销售中心 -->
|
||||||
}
|
<div class="nhc-location-item">
|
||||||
if (captchaType == 'text'){
|
<div class="nhc-location-header">
|
||||||
if (!captcha) {
|
<span class="nhc-seal" style="padding: 1px 6px; font-size: 10px;">营销中心</span>
|
||||||
layer.msg("{:__l('index','Captcha')}" + "{:__l('index','No_empty')}");
|
<span class="nhc-location-title">花果园中环广场商务基地</span>
|
||||||
return false;
|
</div>
|
||||||
}
|
<p class="nhc-location-addr">
|
||||||
}
|
贵州省贵阳市南明区花果园遵义中路中环广场2号楼26楼20-21号
|
||||||
|
</p>
|
||||||
var data = {
|
</div>
|
||||||
name:name,
|
|
||||||
title:title,
|
<!-- 研发与技术中心 -->
|
||||||
phone:phone,
|
<div class="nhc-location-item" style="border-top: 1px solid var(--border-color); padding-top: 14px; margin-top: 14px;">
|
||||||
content:content,
|
<div class="nhc-location-header">
|
||||||
captcha:captcha,
|
<span class="nhc-seal" style="padding: 1px 6px; font-size: 10px;">技术中心</span>
|
||||||
__token__:__token__
|
<span class="nhc-location-title">经开区大数据安全产业基地</span>
|
||||||
};
|
</div>
|
||||||
|
<p class="nhc-location-addr">
|
||||||
$('.in_post').attr('stu',2);
|
贵州省贵阳市经开区数字经济产业园大数据安全产业园数楼4楼02-03号
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
axios.post('', data)
|
|
||||||
.then(function (response) {
|
<!-- 地图视窗 / 示意图 -->
|
||||||
let data = response.data;
|
<div class="nhc-map-visual" style="margin-top: 18px;">
|
||||||
$('.in_post').attr('stu',1);
|
<div class="nhc-map-canvas">
|
||||||
if(data.code){
|
<div class="nhc-map-pin pin-1">
|
||||||
//信息框-例1
|
<span class="nhc-pin-pulse"></span>
|
||||||
layer.alert(data.msg, {icon: 6,title:"{:__l('index','Successful tip')}"});
|
<span class="nhc-pin-label">南明营销中心</span>
|
||||||
$("input[name='name']").val('');
|
</div>
|
||||||
$("input[name='title']").val('');
|
<div class="nhc-map-pin pin-2">
|
||||||
$("input[name='phone']").val('');
|
<span class="nhc-pin-pulse"></span>
|
||||||
$("textarea[name='content']").val('');
|
<span class="nhc-pin-label">经开技术中心</span>
|
||||||
$("input[name='captcha']").val('');
|
</div>
|
||||||
return false;
|
<div class="nhc-map-grid-bg"></div>
|
||||||
}
|
</div>
|
||||||
//信息框-例1
|
<div class="nhc-map-footer">
|
||||||
layer.msg(data.msg, {icon: 5},function(){
|
<span>贵阳核心数谷双基地联动 · 欢迎来访考察交流</span>
|
||||||
axios.get("{:addon_url('official/web.official_home/get_token')}", data)
|
</div>
|
||||||
.then(function (response) {
|
</div>
|
||||||
let res = response.data;
|
|
||||||
if (res.code == 1){
|
</div>
|
||||||
$("input[name='__token__']").val(res.data)
|
|
||||||
}
|
</div>
|
||||||
})
|
|
||||||
});
|
</div>
|
||||||
})
|
</div>
|
||||||
.catch(function (error) {
|
</section>
|
||||||
console.log(error);
|
|
||||||
});
|
<!-- 3. 常见技术咨询解答 -->
|
||||||
})
|
<section class="nhc-faq nhc-section-padding" style="background: var(--bg-secondary);">
|
||||||
});
|
<div class="nhc-container">
|
||||||
</script>
|
<div class="nhc-section-header">
|
||||||
|
<div class="nhc-section-tag">
|
||||||
|
<span class="nhc-seal">沟通须知</span>
|
||||||
|
<span class="nhc-tag-text">COOPERATION FAQ</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="nhc-section-title">初次对接常见问题</h2>
|
||||||
|
<p class="nhc-section-desc">
|
||||||
|
我们以务实坦诚的态度，提前解答您在商务与技术合作中最关注的核心疑问。
|
||||||
|
</p>
|
||||||
|
<div class="nhc-line-divider"><span></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nhc-faq-grid">
|
||||||
|
<div class="nhc-faq-item">
|
||||||
|
<h3 class="nhc-faq-question">提交需求后多久能收到初步方案？</h3>
|
||||||
|
<p class="nhc-faq-answer">
|
||||||
|
我们在收到需求后 2 小时内会有资深解决方案架构师进行电话电话回访，并在 24 小时内免费出具针对业务痛点的初步技术拓扑与评估大纲。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="nhc-faq-item">
|
||||||
|
<h3 class="nhc-faq-question">是否支持前期签署保密协议（NDA）？</h3>
|
||||||
|
<p class="nhc-faq-answer">
|
||||||
|
完全支持。对于涉及敏感商业逻辑、政企业务规范或专属数据的项目，纳海川在深度技术交流前可先行签署具备法律效力的保密协议。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="nhc-faq-item">
|
||||||
|
<h3 class="nhc-faq-question">是否支持技术架构师现场当面交流？</h3>
|
||||||
|
<p class="nhc-faq-answer">
|
||||||
|
西南地区（贵阳及周边城市）可随时安排资深架构师上门沟通或邀请莅临纳海川基地；全国其他省市可安排腾讯会议/飞书高清视频技术研讨。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="nhc-faq-item">
|
||||||
|
<h3 class="nhc-faq-question">定制开发的项目如何保障代码自主可控？</h3>
|
||||||
|
<p class="nhc-faq-answer">
|
||||||
|
纳海川提供白盒源码交付协议，不设任何硬件锁、加密狗或暗门，交付全套源码、数据库设计字典及本地化持续集成编译指南。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 纳海川官方网站 · 联系我们独立页 (Contact Us Page) 结束 -->
|
||||||
|
{/block}
|
||||||
|
|
||||||
|
{block name="js"}
|
||||||
|
<script src="__ADDON__/layui-v2.6.8/layui-v2.6.8/layui/layui.js"></script>
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
|
||||||
|
<script>
|
||||||
|
var captchaType = "{$captchaType}";
|
||||||
|
layui.use(['layer'], function(){
|
||||||
|
var layer = layui.layer;
|
||||||
|
|
||||||
|
// 快捷标签选择
|
||||||
|
document.querySelectorAll('.nhc-topic-tag').forEach(function(tag) {
|
||||||
|
tag.addEventListener('click', function() {
|
||||||
|
document.querySelectorAll('.nhc-topic-tag').forEach(function(t) { t.classList.remove('active'); });
|
||||||
|
this.classList.add('active');
|
||||||
|
var topic = this.getAttribute('data-topic');
|
||||||
|
document.getElementById('contactTitle').value = topic;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.in_post').click(function () {
|
||||||
|
let that = this;
|
||||||
|
let title = $("input[name='title']").val();
|
||||||
|
let name = $("input[name='name']").val();
|
||||||
|
let phone = $("input[name='phone']").val();
|
||||||
|
let __token__ = $("input[name='__token__']").val();
|
||||||
|
let content = $("textarea[name='content']").val();
|
||||||
|
let captcha = $("input[name='captcha']").val();
|
||||||
|
|
||||||
|
let stu = $('.in_post').attr('stu');
|
||||||
|
if (stu != 1) {
|
||||||
|
layer.msg("请勿重复点击提交");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!title) {
|
||||||
|
layer.msg("请填写需求意向主题");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (!name) {
|
||||||
|
layer.msg("请填写您的姓名或称呼");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (!phone) {
|
||||||
|
layer.msg("请填写联系电话");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (!content) {
|
||||||
|
layer.msg("请填写详细需求与业务背景");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (captchaType == 'text'){
|
||||||
|
if (!captcha) {
|
||||||
|
layer.msg("请填写安全验证码");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
name: name,
|
||||||
|
title: title,
|
||||||
|
phone: phone,
|
||||||
|
content: content,
|
||||||
|
captcha: captcha,
|
||||||
|
__token__: __token__
|
||||||
|
};
|
||||||
|
|
||||||
|
$('.in_post').attr('stu', 2);
|
||||||
|
|
||||||
|
axios.post('', data)
|
||||||
|
.then(function (response) {
|
||||||
|
let data = response.data;
|
||||||
|
$('.in_post').attr('stu', 1);
|
||||||
|
if(data.code){
|
||||||
|
layer.alert("需求评估已成功提交！纳海川解决方案架构师将在 2 小时内与您联系对接。", {icon: 6, title: "提交成功"});
|
||||||
|
$("input[name='name']").val('');
|
||||||
|
$("input[name='phone']").val('');
|
||||||
|
$("textarea[name='content']").val('');
|
||||||
|
$("input[name='captcha']").val('');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
layer.msg(data.msg, {icon: 5}, function(){
|
||||||
|
axios.get("{:addon_url('official/web.official_home/get_token')}", data)
|
||||||
|
.then(function (response) {
|
||||||
|
let res = response.data;
|
||||||
|
if (res.code == 1){
|
||||||
|
$("input[name='__token__']").val(res.data)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
$('.in_post').attr('stu', 1);
|
||||||
|
layer.msg("提交失败，请检查网络或直接拨打业务专线 13984036826");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
{/block}
|
{/block}
|
||||||
@@ -1,217 +1,204 @@
|
|||||||
{extend name="web/official_common/mobile/base" /}
|
{extend name="web/official_common/mobile/base" /}
|
||||||
|
|
||||||
|
{block name="content"}
|
||||||
{block name="content"}
|
<!-- 纳海川官方网站 · 移动端联系我们独立页 (Contact Us Page Mobile) 开始 -->
|
||||||
<!--主体内容 开始-->
|
<div class="nhc-mobile-contact-page" style="background: #F8FAFC; min-height: 100vh; padding-bottom: 60px;">
|
||||||
<div class="article">
|
|
||||||
<!--右侧区域 开始-->
|
<!-- 1. 移动端 Hero 视窗 -->
|
||||||
<div id="right">
|
<div style="background: #FFFFFF; padding: 28px 16px 24px; border-bottom: 1px solid #E2E8F0; text-align: center;">
|
||||||
<div class="right_title">
|
<div style="margin-bottom: 10px;">
|
||||||
<h2 class="right_title_2">
|
<span class="nhc-seal" style="padding: 2px 10px; font-size: 11px;">精诚共赢 · 敏捷响应</span>
|
||||||
<img src="__ADDON__/images/titleleftbg.png" align="absmiddle">{:ze($res,'name')}
|
</div>
|
||||||
<img src="__ADDON__/images/titlerightbg.png" align="absmiddle">
|
<h1 style="font-family: 'Noto Serif SC', 'SimSun', serif; font-size: 20px; font-weight: 700; color: #0F172A; margin: 0 0 10px 0; line-height: 1.4;">
|
||||||
</h2>
|
开启确定性数字化技术合作
|
||||||
</div>
|
</h1>
|
||||||
<div class="right_body">
|
<p style="font-size: 13px; color: #64748B; margin: 0; line-height: 1.6;">
|
||||||
<table class="resume_table">
|
贵阳纳海川科技有限公司技术架构团队立足西南数谷，提供经得起白盒审查的架构评估与 24 小时快速对接。
|
||||||
<form enctype="multipart/form-data" class="layui-form" id="frmResume">
|
</p>
|
||||||
{:token()}
|
</div>
|
||||||
<tbody>
|
|
||||||
<tr class="layui-form-item">
|
<!-- 2. 直通热线与 SLA 响应卡片 -->
|
||||||
<th>
|
<div style="padding: 16px;">
|
||||||
<label class="layui-form-label">{:__l('online_message','Title')}</label>
|
<div style="background: #FFFFFF; border-radius: 6px; border: 1px solid #E2E8F0; padding: 18px; margin-bottom: 16px;">
|
||||||
</th>
|
<div style="font-size: 11px; font-weight: 700; color: #2563EB; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px;">快速直联通道</div>
|
||||||
<td class="layui-input-block">
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
|
||||||
<input type="text" name="title" required lay-verify="required" autocomplete="off" placeholder="{:__l('index','Fill in')}{:__l('online_message','Title')}" class="layui-input">
|
<div>
|
||||||
</td>
|
<div style="font-size: 12px; color: #64748B;">业务咨询与架构专线</div>
|
||||||
</tr>
|
<div style="font-family: 'Noto Serif SC', serif; font-size: 20px; font-weight: 700; color: #0F172A;">13984036826</div>
|
||||||
<tr class="layui-form-item">
|
</div>
|
||||||
<th>
|
<a href="tel:13984036826" style="background: #2563EB; color: #FFFFFF; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 4px; text-decoration: none;">
|
||||||
<label class="layui-form-label">{:__l('online_message','Name')}</label>
|
立即拨打
|
||||||
</th>
|
</a>
|
||||||
<td class="layui-input-block">
|
</div>
|
||||||
<input type="text" name="name" required lay-verify="required" autocomplete="off" placeholder="{:__l('index','Fill in')}{:__l('online_message','Name')}" class="layui-input">
|
<div style="border-top: 1px solid #F1F5F9; padding-top: 10px; font-size: 12px; color: #64748B; display: flex; justify-content: space-between;">
|
||||||
</td>
|
<span>技术邮箱: server@gynhc.com</span>
|
||||||
</tr>
|
<span>响应承诺: 2小时直连</span>
|
||||||
<tr class="layui-form-item">
|
</div>
|
||||||
<th>
|
</div>
|
||||||
<label class="layui-form-label">{:__l('online_message','Phone')}</label>
|
|
||||||
</th>
|
<!-- 3. 需求评估表单卡片 -->
|
||||||
<td class="layui-input-block">
|
<div style="background: #FFFFFF; border-radius: 6px; border: 1px solid #E2E8F0; padding: 20px;">
|
||||||
<input type="tel" name="phone" required lay-verify="required" autocomplete="off" placeholder="{:__l('index','Fill in')}{:__l('online_message','Phone')}" class="layui-input">
|
<div style="text-align: center; margin-bottom: 16px;">
|
||||||
</td>
|
<span class="nhc-seal" style="padding: 2px 8px; font-size: 11px;">需求评估</span>
|
||||||
</tr>
|
<h2 style="font-family: 'Noto Serif SC', 'SimSun', serif; font-size: 17px; font-weight: 700; color: #0F172A; margin: 6px 0 4px 0;">
|
||||||
<tr class="layui-form-item">
|
预约架构师 1 对 1 方案研讨
|
||||||
<th>
|
</h2>
|
||||||
<label class="layui-form-label">{:__l('online_message','Content')}</label>
|
<p style="font-size: 12px; color: #64748B; margin: 0;">
|
||||||
</th>
|
提交您的业务需求，架构师将在 2 小时内回访
|
||||||
<td class="layui-input-block">
|
</p>
|
||||||
<textarea placeholder="{:__l('index','Fill in')}{:__l('online_message','Content')}" name="content" class="layui-textarea" required></textarea>
|
</div>
|
||||||
</td>
|
|
||||||
</tr>
|
<form enctype="multipart/form-data" id="frmMobileContact">
|
||||||
{if $captchaType == 'text'}
|
{:token()}
|
||||||
<tr class="layui-form-item">
|
|
||||||
<th>
|
<!-- 需求主题 -->
|
||||||
<label class="layui-form-label">{:__l('index','Captcha')}</label>
|
<div style="margin-bottom: 14px;">
|
||||||
</th>
|
<label style="display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px;">
|
||||||
<td class="layui-input-block">
|
合作方向 / 需求主题 <span style="color: #DC2626;">*</span>
|
||||||
<input type="text" name="captcha" id="captcha_input" required lay-verify="required" autocomplete="off" placeholder="请填写验证码" class="layui-input captcha_input" style="width: 10rem;float: left">
|
</label>
|
||||||
<img src="{:captcha_src()}" width="100" height="40" onclick="this.src = '{:captcha_src()}?r=' + Math.random();" style="margin-left: 10px;margin-top: 5px"/>
|
<input type="text" name="title" id="mobileTitle" value="企业级技术中台与软件定制" required style="width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 4px; font-size: 13px; color: #0F172A;">
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
|
||||||
{/if}
|
<!-- 对接人 -->
|
||||||
<tr class="layui-form-item">
|
<div style="margin-bottom: 14px;">
|
||||||
<td colspan="2" class="operation" style="padding-top: 2rem;">
|
<label style="display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px;">
|
||||||
<button class="form_button btn in_post" stu="1" type="button" lay-filter="demo1" style="width: 100%">{:__l('online_message','Submit a message')}</button>
|
对接人姓名 / 称呼 <span style="color: #DC2626;">*</span>
|
||||||
</td>
|
</label>
|
||||||
</tr>
|
<input type="text" name="name" required placeholder="如：张总监 / 李经理" style="width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 4px; font-size: 13px; color: #0F172A;">
|
||||||
</tbody>
|
</div>
|
||||||
</form>
|
|
||||||
</table>
|
<!-- 电话 -->
|
||||||
<div class="page"></div>
|
<div style="margin-bottom: 14px;">
|
||||||
</div>
|
<label style="display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px;">
|
||||||
<div class="right_bottom"></div>
|
联系手机 <span style="color: #DC2626;">*</span>
|
||||||
</div>
|
</label>
|
||||||
<!--右侧区域 结束-->
|
<input type="tel" name="phone" required placeholder="请填写联系电话" style="width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 4px; font-size: 13px; color: #0F172A;">
|
||||||
<div class="clear"></div>
|
</div>
|
||||||
</div>
|
|
||||||
<!--主体内容 结束-->
|
<!-- 详细需求 -->
|
||||||
|
<div style="margin-bottom: 14px;">
|
||||||
<style>
|
<label style="display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px;">
|
||||||
.layui-textarea{
|
业务痛点与期望功能 <span style="color: #DC2626;">*</span>
|
||||||
margin-top: 5px !important;
|
</label>
|
||||||
}
|
<textarea name="content" rows="3" placeholder="请简述您现存的系统痛点、期望功能或预估上线周期..." style="width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 4px; font-size: 13px; color: #0F172A; resize: vertical;"></textarea>
|
||||||
.layui-input{
|
</div>
|
||||||
margin-top: 5px !important;
|
|
||||||
}
|
{if $captchaType == 'text'}
|
||||||
.layui-form-label{
|
<div style="margin-bottom: 14px;">
|
||||||
text-align: left !important;
|
<label style="display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px;">
|
||||||
}
|
安全验证码 <span style="color: #DC2626;">*</span>
|
||||||
</style>
|
</label>
|
||||||
|
<div style="display: flex; gap: 8px;">
|
||||||
|
<input type="text" name="captcha" id="captcha_input_m" required placeholder="填写验证码" style="width: 60%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 4px; font-size: 13px;">
|
||||||
|
<img src="{:captcha_src()}" height="40" onclick="this.src = '{:captcha_src()}?r=' + Math.random();" style="border-radius: 4px;"/>
|
||||||
|
</div>
|
||||||
{/block}
|
</div>
|
||||||
|
{/if}
|
||||||
{block name="js"}
|
|
||||||
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
|
<button class="in_post_m" stu="1" type="button" style="width: 100%; background: #2563EB; color: #FFFFFF; font-size: 14px; font-weight: 600; padding: 12px 0; border: none; border-radius: 4px; cursor: pointer;">
|
||||||
<script>
|
立即提交需求评估
|
||||||
var captchaType = "{$captchaType}";
|
</button>
|
||||||
layui.use(['form', 'layedit', 'laydate'], function(){
|
<div style="text-align: center; font-size: 11px; color: #94A3B8; margin-top: 10px;">
|
||||||
var form = layui.form
|
严格执行 ISO 27001 体系规范 · 客户商业信息与数据终身保密
|
||||||
,layer = layui.layer
|
</div>
|
||||||
,layedit = layui.layedit
|
</form>
|
||||||
,laydate = layui.laydate;
|
</div>
|
||||||
|
|
||||||
|
<!-- 4. 物理实体办公双基地 (Dual-HQ) -->
|
||||||
//日期
|
<div style="background: #FFFFFF; border-radius: 6px; border: 1px solid #E2E8F0; padding: 18px; margin-top: 16px;">
|
||||||
laydate.render({
|
<div style="font-size: 11px; font-weight: 700; color: #0F172A; letter-spacing: 1px; margin-bottom: 12px;">物理实体办公基地</div>
|
||||||
elem: '#date'
|
|
||||||
});
|
<div style="margin-bottom: 14px;">
|
||||||
|
<div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
|
||||||
|
<span class="nhc-seal" style="padding: 1px 6px; font-size: 10px;">营销中心</span>
|
||||||
//创建一个编辑器
|
<span style="font-size: 13px; font-weight: 700; color: #0F172A;">花果园中环广场商务基地</span>
|
||||||
var editIndex = layedit.build('LAY_demo_editor');
|
</div>
|
||||||
|
<div style="font-size: 12px; color: #475569; line-height: 1.5;">
|
||||||
//自定义验证规则
|
贵州省贵阳市南明区花果园遵义中路中环广场2号楼26楼20-21号
|
||||||
form.verify({
|
</div>
|
||||||
title: function(value){
|
</div>
|
||||||
if(value.length < 5){
|
|
||||||
return '标题至少得5个字符啊';
|
<div style="border-top: 1px solid #F1F5F9; padding-top: 14px;">
|
||||||
}
|
<div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
|
||||||
}
|
<span class="nhc-seal" style="padding: 1px 6px; font-size: 10px;">技术中心</span>
|
||||||
,pass: [
|
<span style="font-size: 13px; font-weight: 700; color: #0F172A;">经开区大数据安全产业基地</span>
|
||||||
/^[\S]{6,12}$/
|
</div>
|
||||||
,'密码必须6到12位，且不能出现空格'
|
<div style="font-size: 12px; color: #475569; line-height: 1.5;">
|
||||||
]
|
贵州省贵阳市经开区数字经济产业园大数据安全产业园数楼4楼02-03号
|
||||||
,content: function(value){
|
</div>
|
||||||
layedit.sync(editIndex);
|
</div>
|
||||||
}
|
</div>
|
||||||
});
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
$('.in_post').click(function () {
|
<!-- 纳海川官方网站 · 移动端联系我们独立页 (Contact Us Page Mobile) 结束 -->
|
||||||
let that = this;
|
{/block}
|
||||||
let title = $("input[name='title']").val();
|
|
||||||
let name = $("input[name='name']").val();
|
{block name="js"}
|
||||||
let phone = $("input[name='phone']").val();
|
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
|
||||||
let content = $("textarea[name='content']").val();
|
<script>
|
||||||
let __token__ = $("input[name='__token__']").val();
|
var captchaType = "{$captchaType}";
|
||||||
let captcha = $("#captcha_input").val();
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
var postBtn = document.querySelector('.in_post_m');
|
||||||
let stu = $('.in_post').attr('stu');
|
if (!postBtn) return;
|
||||||
if (stu != 1){
|
|
||||||
layer.msg("{:__l('index','Do not click again')}");
|
postBtn.addEventListener('click', function() {
|
||||||
}
|
var form = document.getElementById('frmMobileContact');
|
||||||
|
var title = form.querySelector("input[name='title']").value;
|
||||||
if (!title){
|
var name = form.querySelector("input[name='name']").value;
|
||||||
layer.msg("{:__l('online_message','Title')}"+"{:__l('index','No_empty')}");
|
var phone = form.querySelector("input[name='phone']").value;
|
||||||
return false;
|
var content = form.querySelector("textarea[name='content']").value;
|
||||||
}
|
var tokenInput = form.querySelector("input[name='__token__']");
|
||||||
if (!name){
|
var token = tokenInput ? tokenInput.value : '';
|
||||||
layer.msg("{:__l('online_message','Name')}"+"{:__l('index','No_empty')}");
|
var captchaInput = form.querySelector("#captcha_input_m");
|
||||||
return false;
|
var captcha = captchaInput ? captchaInput.value : '';
|
||||||
}
|
|
||||||
if (!phone){
|
if (!title) { alert("请填写需求意向主题"); return; }
|
||||||
layer.msg("{:__l('online_message','Phone')}"+"{:__l('index','No_empty')}");
|
if (!name) { alert("请填写您的称呼"); return; }
|
||||||
return false;
|
if (!phone) { alert("请填写联系手机"); return; }
|
||||||
}
|
if (!content) { alert("请填写详细需求与业务背景"); return; }
|
||||||
if (!content){
|
if (captchaType === 'text' && !captcha) { alert("请填写安全验证码"); return; }
|
||||||
layer.msg("{:__l('online_message','Content')}"+"{:__l('index','No_empty')}");
|
|
||||||
return false;
|
postBtn.disabled = true;
|
||||||
}
|
postBtn.innerText = "正在提交...";
|
||||||
if (captchaType == 'text'){
|
|
||||||
if (!captcha){
|
var data = {
|
||||||
layer.msg("{:__l('index','Captcha')}"+"{:__l('index','No_empty')}");
|
name: name,
|
||||||
return false;
|
title: title,
|
||||||
}
|
phone: phone,
|
||||||
}
|
content: content,
|
||||||
|
captcha: captcha,
|
||||||
|
__token__: token
|
||||||
var data = {
|
};
|
||||||
name:name,
|
|
||||||
title:title,
|
axios.post('', data)
|
||||||
phone:phone,
|
.then(function (response) {
|
||||||
content:content,
|
var res = response.data;
|
||||||
captcha:captcha,
|
postBtn.disabled = false;
|
||||||
__token__:__token__
|
postBtn.innerText = "立即提交需求评估";
|
||||||
};
|
if (res.code) {
|
||||||
|
alert("需求评估已成功提交！纳海川架构师将在 2 小时内与您联系对接。");
|
||||||
$('.in_post').attr('stu',2);
|
form.querySelector("input[name='name']").value = '';
|
||||||
|
form.querySelector("input[name='phone']").value = '';
|
||||||
|
form.querySelector("textarea[name='content']").value = '';
|
||||||
axios.post('', data)
|
if (captchaInput) captchaInput.value = '';
|
||||||
.then(function (response) {
|
} else {
|
||||||
let data = response.data;
|
alert(res.msg || "提交失败，请重试");
|
||||||
$('.in_post').attr('stu',1);
|
axios.get("{:addon_url('official/web.official_home/get_token')}", data)
|
||||||
if(data.code){
|
.then(function(tRes) {
|
||||||
//信息框-例1
|
if (tRes.data && tRes.data.code === 1 && tokenInput) {
|
||||||
layer.alert(data.msg, {icon: 6,title:"{:__l('index','Successful tip')}"});
|
tokenInput.value = tRes.data.data;
|
||||||
$("input[name='name']").val('');
|
}
|
||||||
$("input[name='title']").val('');
|
});
|
||||||
$("input[name='phone']").val('');
|
}
|
||||||
$("textarea[name='content']").val('');
|
})
|
||||||
$("input[name='captcha']").val('');
|
.catch(function(err) {
|
||||||
return false;
|
postBtn.disabled = false;
|
||||||
}
|
postBtn.innerText = "立即提交需求评估";
|
||||||
//信息框-例1
|
alert("提交失败，请检查网络或直接拨打电话 13984036826");
|
||||||
layer.msg(data.msg, {icon: 5},function(){
|
});
|
||||||
axios.get("{:addon_url('official/web.official_home/get_token')}", data)
|
});
|
||||||
.then(function (response) {
|
});
|
||||||
let res = response.data;
|
</script>
|
||||||
if (res.code == 1){
|
|
||||||
$("input[name='__token__']").val(res.data)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(function (error) {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{/block}
|
{/block}
|
||||||
@@ -3073,3 +3073,345 @@ img {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
纳海川官方网站 · 联系我们独立页 (Contact Us Page) 现代中式专业风样式
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* 1. 两栏网格布局 (7列 + 5列) */
|
||||||
|
.nhc-contact-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.35fr 1fr;
|
||||||
|
gap: 36px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2. 左侧表单外框 */
|
||||||
|
.nhc-contact-form-wrap {
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: 40px 36px;
|
||||||
|
box-shadow: var(--shadow-subtle);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-form-header {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-form-title {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin: 6px 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-form-sub {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 快捷意向选择标签 */
|
||||||
|
.nhc-tag-selector {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-topic-tag {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-topic-tag:hover,
|
||||||
|
.nhc-topic-tag.active {
|
||||||
|
background: #EFF6FF;
|
||||||
|
border-color: #BFDBFE;
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表单控件 */
|
||||||
|
.nhc-form-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-form-group {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-form-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-required {
|
||||||
|
color: #DC2626;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-form-input,
|
||||||
|
.nhc-form-textarea {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px 14px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #CBD5E1;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-form-input:focus,
|
||||||
|
.nhc-form-textarea:focus {
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-form-textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-form-privacy {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-top: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 3. 右侧信息卡片 */
|
||||||
|
.nhc-contact-card {
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: 32px 28px;
|
||||||
|
box-shadow: var(--shadow-subtle);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-info-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
background: #EFF6FF;
|
||||||
|
border: 1px solid #DBEAFE;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-info-card-title {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-info-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 14px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-info-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
background: #EFF6FF;
|
||||||
|
color: var(--primary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-info-text {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-info-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-info-val {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin: 2px 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-phone-link {
|
||||||
|
color: var(--primary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-phone-link:hover {
|
||||||
|
color: #1D4ED8;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-info-note {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-sla-bar {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 12px 14px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-sla-tag {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-sla-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 实体办公地点与地图 */
|
||||||
|
.nhc-location-item {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-location-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-location-title {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-location-addr {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 地图模拟视窗 */
|
||||||
|
.nhc-map-visual {
|
||||||
|
background: #F8FAFC;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-map-canvas {
|
||||||
|
height: 140px;
|
||||||
|
position: relative;
|
||||||
|
background: #F1F5F9;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-map-grid-bg {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
|
||||||
|
linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-map-pin {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-pin-pulse {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--primary);
|
||||||
|
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pin-2 .nhc-pin-pulse {
|
||||||
|
background: #06B6D4;
|
||||||
|
box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-pin-label {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
background: #FFFFFF;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
box-shadow: var(--shadow-subtle);
|
||||||
|
color: var(--text-primary);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-map-footer {
|
||||||
|
background: #FFFFFF;
|
||||||
|
padding: 8px 12px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式适配 */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.nhc-contact-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nhc-form-row {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.nhc-contact-form-wrap {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
128
tests/ContactPageTest.php
普通文件
128
tests/ContactPageTest.php
普通文件
@@ -0,0 +1,128 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* 联系我们独立页改版规范与内容完整性测试 (TDD 模式)
|
||||||
|
* 验证联系我们必备板块：表单、地图、电话，以及色彩体系、去AI味道与禁止项
|
||||||
|
*/
|
||||||
|
|
||||||
|
class ContactPageTest
|
||||||
|
{
|
||||||
|
private $passed = 0;
|
||||||
|
private $failed = 0;
|
||||||
|
private $htmlContent = '';
|
||||||
|
private $mobileHtmlContent = '';
|
||||||
|
private $cssContent = '';
|
||||||
|
|
||||||
|
public function __construct()
|
||||||
|
{
|
||||||
|
$baseDir = dirname(__DIR__);
|
||||||
|
$contactFile = $baseDir . '/addons/official/view/web/official_online_message/list.html';
|
||||||
|
$mobileContactFile = $baseDir . '/addons/official/view/web/official_online_message/list_e.html';
|
||||||
|
$cssFile = $baseDir . '/public/assets/addons/official/css/modern_nhc.css';
|
||||||
|
|
||||||
|
if (file_exists($contactFile)) {
|
||||||
|
$this->htmlContent = file_get_contents($contactFile);
|
||||||
|
}
|
||||||
|
if (file_exists($mobileContactFile)) {
|
||||||
|
$this->mobileHtmlContent = file_get_contents($mobileContactFile);
|
||||||
|
}
|
||||||
|
if (file_exists($cssFile)) {
|
||||||
|
$this->cssContent = file_get_contents($cssFile);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public function run()
|
||||||
|
{
|
||||||
|
echo "=== 开始执行联系我们独立页设计规范与内容完整性测试 (TDD) ===\n";
|
||||||
|
|
||||||
|
// 1. 品牌名称必须为纳海川
|
||||||
|
$this->testBrandName();
|
||||||
|
|
||||||
|
// 2. 必备板块测试：表单、地图、电话 (AGENTS.md 规范)
|
||||||
|
$this->testEssentialSections();
|
||||||
|
|
||||||
|
// 3. 去除 AI 味道：真实具体的办公地址、电话号码与架构师对接承诺
|
||||||
|
$this->testNoAiCharacteristics();
|
||||||
|
|
||||||
|
// 4. 禁止项测试（严禁 emoji）
|
||||||
|
$this->testForbiddenElements();
|
||||||
|
|
||||||
|
// 5. 色彩与设计规范
|
||||||
|
$this->testDesignTokens();
|
||||||
|
|
||||||
|
// 6. 移动端模板完整性
|
||||||
|
$this->testMobileTemplate();
|
||||||
|
|
||||||
|
echo "\n测试结果: {$this->passed} 通过, {$this->failed} 失败\n";
|
||||||
|
if ($this->failed > 0) {
|
||||||
|
exit(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private function assert($condition, $message)
|
||||||
|
{
|
||||||
|
if ($condition) {
|
||||||
|
echo " [PASS] {$message}\n";
|
||||||
|
$this->passed++;
|
||||||
|
} else {
|
||||||
|
echo " [FAIL] {$message}\n";
|
||||||
|
$this->failed++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testBrandName()
|
||||||
|
{
|
||||||
|
$this->assert(strpos($this->htmlContent, '纳海川') !== false, "联系我们页面必须明确包含品牌名称【纳海川】");
|
||||||
|
$hasWrongAbbr = preg_match('/纳川(?![海])/u', $this->htmlContent);
|
||||||
|
$this->assert(!$hasWrongAbbr, "联系我们页面严禁错误简称为【纳川】");
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testEssentialSections()
|
||||||
|
{
|
||||||
|
// 按照 AGENTS.md 规范：联系我们含表单、地图、电话
|
||||||
|
$hasForm = (strpos($this->htmlContent, '<form') !== false && strpos($this->htmlContent, 'name="phone"') !== false && strpos($this->htmlContent, 'name="title"') !== false);
|
||||||
|
$this->assert($hasForm, "联系我们页面必须包含【表单】(包含对接人、电话、需求与提交按钮)板块");
|
||||||
|
|
||||||
|
$hasMap = (strpos($this->htmlContent, 'nhc-contact-map') !== false || strpos($this->htmlContent, '地图') !== false || strpos($this->htmlContent, '园区') !== false || strpos($this->htmlContent, '大厦') !== false);
|
||||||
|
$this->assert($hasMap, "联系我们页面必须包含【地图】(办公地址与交通指引/地图视窗)板块");
|
||||||
|
|
||||||
|
$hasPhone = (strpos($this->htmlContent, '13984036826') !== false || strpos($this->htmlContent, 'tel:') !== false);
|
||||||
|
$this->assert($hasPhone, "联系我们页面必须包含【电话】(业务直通电话)板块");
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNoAiCharacteristics()
|
||||||
|
{
|
||||||
|
// 必须具备真实的落地实体地址（南明区花果园、经开区等真实地址）
|
||||||
|
$hasRealAddress = (strpos($this->htmlContent, '南明区') !== false || strpos($this->htmlContent, '花果园') !== false || strpos($this->htmlContent, '经开区') !== false);
|
||||||
|
$this->assert($hasRealAddress, "去AI味道：必须展示具体的真实物理实体地址");
|
||||||
|
|
||||||
|
// 必须具备真实的电子邮箱与服务时间承诺
|
||||||
|
$hasContactDetails = (strpos($this->htmlContent, 'server@gynhc.com') !== false || strpos($this->htmlContent, '09:00') !== false || strpos($this->htmlContent, 'SLA') !== false || strpos($this->htmlContent, '小时') !== false);
|
||||||
|
$this->assert($hasContactDetails, "去AI味道：必须具备真实企业邮箱与明确的响应时效服务承诺");
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testForbiddenElements()
|
||||||
|
{
|
||||||
|
$hasEmoji = preg_match('/[\x{1F600}-\x{1F64F}\x{1F300}-\x{1F5FF}\x{1F680}-\x{1F6FF}\x{2600}-\x{26FF}\x{2700}-\x{27BF}]/u', $this->htmlContent);
|
||||||
|
$this->assert(!$hasEmoji, "联系我们页面严禁使用任何 emoji 表情符号");
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testDesignTokens()
|
||||||
|
{
|
||||||
|
$hasSerif = (stripos($this->cssContent, 'SimSun') !== false || stripos($this->cssContent, 'Songti') !== false || stripos($this->cssContent, 'Noto Serif SC') !== false);
|
||||||
|
$this->assert($hasSerif, "必须沿用宋体标题规范");
|
||||||
|
|
||||||
|
$hasPrimary = (stripos($this->cssContent, '#2563EB') !== false || stripos($this->cssContent, '#2563eb') !== false);
|
||||||
|
$this->assert($hasPrimary, "必须沿用科技蓝 #2563EB 主色规范");
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testMobileTemplate()
|
||||||
|
{
|
||||||
|
$this->assert(!empty($this->mobileHtmlContent), "移动端联系我们模板 list_e.html 文件必须存在");
|
||||||
|
$this->assert(strpos($this->mobileHtmlContent, '纳海川') !== false, "移动端模板必须包含品牌名【纳海川】");
|
||||||
|
$this->assert(strpos($this->mobileHtmlContent, '<form') !== false, "移动端模板必须包含需求提交表单");
|
||||||
|
$this->assert(strpos($this->mobileHtmlContent, '13984036826') !== false || strpos($this->mobileHtmlContent, 'tel:') !== false, "移动端模板必须包含电话直拨");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$test = new ContactPageTest();
|
||||||
|
$test->run();
|
||||||
@@ -177,13 +177,50 @@ def test_about_page():
|
|||||||
|
|
||||||
return res.summary()
|
return res.summary()
|
||||||
|
|
||||||
|
def test_contact_page():
|
||||||
|
res = TestResult("联系我们独立页 (ContactPage)")
|
||||||
|
contact_path = os.path.join(BASE_DIR, 'addons', 'official', 'view', 'web', 'official_online_message', 'list.html')
|
||||||
|
contact_e_path = os.path.join(BASE_DIR, 'addons', 'official', 'view', 'web', 'official_online_message', 'list_e.html')
|
||||||
|
css_path = os.path.join(BASE_DIR, 'public', 'assets', 'addons', 'official', 'css', 'modern_nhc.css')
|
||||||
|
|
||||||
|
html = open(contact_path, 'r', encoding='utf-8').read() if os.path.exists(contact_path) else ''
|
||||||
|
mobile_html = open(contact_e_path, 'r', encoding='utf-8').read() if os.path.exists(contact_e_path) else ''
|
||||||
|
css = open(css_path, 'r', encoding='utf-8').read() if os.path.exists(css_path) else ''
|
||||||
|
|
||||||
|
res.assert_true('纳海川' in html, "PC 联系我们页必须明确包含品牌名称【纳海川】")
|
||||||
|
res.assert_true(not re.search(r'纳川(?!海)', html), "PC 联系我们页严禁错误简称为【纳川】")
|
||||||
|
|
||||||
|
has_form = '<form' in html and 'name="phone"' in html and 'name="title"' in html
|
||||||
|
res.assert_true(has_form, "必须包含【表单】板块")
|
||||||
|
has_map = 'nhc-contact-map' in html or '地图' in html or '园区' in html or '大厦' in html
|
||||||
|
res.assert_true(has_map, "必须包含【地图】(办公地址与交通指引/地图视窗)板块")
|
||||||
|
has_phone = '13984036826' in html or 'tel:' in html
|
||||||
|
res.assert_true(has_phone, "必须包含【电话】板块")
|
||||||
|
|
||||||
|
has_addr = '南明区' in html or '花果园' in html or '经开区' in html
|
||||||
|
res.assert_true(has_addr, "去AI味道：展示具体真实物理实体地址")
|
||||||
|
has_details = 'server@gynhc.com' in html or '09:00' in html or 'SLA' in html
|
||||||
|
res.assert_true(has_details, "去AI味道：真实企业邮箱与明确响应时效承诺")
|
||||||
|
|
||||||
|
has_emoji = bool(re.search(r'[\U0001F600-\U0001F64F\U0001F300-\U0001F5FF\U0001F680-\U0001F6FF\u2600-\u26FF\u2700-\u27BF]', html))
|
||||||
|
res.assert_true(not has_emoji, "严禁使用任何 emoji 表情符号")
|
||||||
|
|
||||||
|
res.assert_true(bool(mobile_html), "移动端联系我们模板 list_e.html 必须存在")
|
||||||
|
if mobile_html:
|
||||||
|
res.assert_true('纳海川' in mobile_html, "移动端模板包含品牌名【纳海川】")
|
||||||
|
res.assert_true('<form' in mobile_html, "移动端模板包含需求提交表单")
|
||||||
|
res.assert_true('13984036826' in mobile_html or 'tel:' in mobile_html, "移动端模板包含电话直拨")
|
||||||
|
|
||||||
|
return res.summary()
|
||||||
|
|
||||||
def main():
|
def main():
|
||||||
results = [
|
results = [
|
||||||
test_cases_page(),
|
test_cases_page(),
|
||||||
test_services_page(),
|
test_services_page(),
|
||||||
test_products_page(),
|
test_products_page(),
|
||||||
test_nav_megamenu(),
|
test_nav_megamenu(),
|
||||||
test_about_page()
|
test_about_page(),
|
||||||
|
test_contact_page()
|
||||||
]
|
]
|
||||||
sys.exit(0 if all(results) else 1)
|
sys.exit(0 if all(results) else 1)
|
||||||
|
|
||||||
|
|||||||
在新工单中引用
屏蔽一个用户