You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

147 lines
5.7 KiB

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/network.css">
<title>政务外网安全</title>
</head>
<!-- 嵌入头部 -->
<script type="text/javascript" src = "./js/jquery.js"></script>
<script>
$(function(){
$("#header").load("./header.html");
});
$(function(){
$("#footer").load("./footer.html");
});
</script>
<body>
<div class="network">
<!-- 头部占位 -->
<div id="header"></div>
<!-- 页面内容 -->
<div class="network--content-wrap">
<div class="network--content">
<div class="network--content__left">
<img class="network--content__left--image" src="./images/img5.png">
<img class="network--content__left--image--mobile" src="./images/img5-mobile.png">
</div>
<div class="network--content__right">
<div class="network--content__right--title">政务外网服务器安全</div>
<div class="network--content__right--model">
<div class="network--content__right--model__title">安全运维模式转变</div>
<div class="network--content__right--model__desc">因安全运维团队不能入场,政务外网安全</div>
<div class="network--content__right--model__desc">运维转为线上</div>
</div>
<div class="network--content__right--model">
<div class="network--content__right--model__title">安全微服务套餐模式</div>
<div class="network--content__right--model__desc">模式转变,向政务外网服务器提供安</div>
<div class="network--content__right--model__desc">全微服务套餐</div>
</div>
</div>
</div>
<div class="network--content__right--operate">
<div class="network--content__right--operate__made">定制我的套餐</div>
<div class="network--content__right--operate__connect" onclick="openPopup()">联系我们</div>
</div>
</div>
<!-- 弹窗 -->
<div id="mask" class="mask"></div>
<div id="popup" class="secure-popup" style="display:none;">
<div class="secure-popup__close" onclick="closePopup()">
<img src="./images/close.png">
</div>
<div class="popup-content">
<div class="popup-content__item">请留下您的联系方式,我们会尽快与您联系</div>
<div class="popup-content__item"><input class="input" type="text" placeholder="姓名" id="inputName" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="电话" id="inputPhone" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称" id="inputCompany" /></div>
<div class="popup-content__item popup-content__item2">
<input class="inputCode" type="text" placeholder="验证码" id="inputCode" />
<div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img" style="height: 56px"></div>
</div>
<div class="popup-content__btn" onclick="submitName()">提交</div>
</div>
</div>
<!-- 底部占位 -->
<div id="footer"></div>
</div>
</body>
<script>
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("mask").style.display = "block";
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
}
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "none";
}
// 提交名字函数
function submitName() {
let name = $('#inputName').val();
let telephone = $('#inputPhone').val();
let companyName = $('#inputCompany').val();
let captcha = $('#inputCode').val();
$("#inputName").blur(function(){
if(!name){
$(this).removeClass("warning");
}
});
$("#inputPhone").blur(function(){
if(!telephone){
$(this).removeClass("warning");
}
});
$("#inputCompany").blur(function(){
if(!companyName){
$(this).removeClass("warning");
}
});
$("#inputCode").blur(function(){
if(!captcha){
$(this).removeClass("warning");
}
});
if(!name){
document.getElementById("inputName").classList.add("warning");
document.getElementById("inputName").setAttribute("placeholder","请输入您的姓名");
}
if(!telephone){
document.getElementById("inputPhone").classList.add("warning");
document.getElementById("inputPhone").setAttribute("placeholder","请输入您的电话");
}
if(!companyName){
document.getElementById("inputCompany").classList.add("warning");
document.getElementById("inputCompany").setAttribute("placeholder","请输入公司名称");
}
if(!captcha){
document.getElementById("inputCode").classList.add("warning");
document.getElementById("inputCode").setAttribute("placeholder","请输入验证码");
return;
}
$.post('/loulan/business/buy/9', {'name':name,'telephone':telephone,'companyName':companyName,'captcha':captcha}, function (resp){
if (!!resp && !!resp.result) {
alert('您的意向信息已提交,我们将尽快与您取得联系!');
} else {
alert(resp.message);
}
});
}
function changeCodeImg() {
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
}
</script>
</html>