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.
251 lines
11 KiB
251 lines
11 KiB
1 month ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<link rel="stylesheet" href="./css/serve.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="serve">
|
||
|
|
<!-- 头部和第一部分放一起是为了第一张背景图可以连头部一起 -->
|
||
|
|
<div class="serve--secure">
|
||
|
|
<!-- 头部占位 -->
|
||
|
|
<div id="header"></div>
|
||
|
|
<!-- 第一部分内容 -->
|
||
|
|
<div class="serve--secure__title">保证小企业马奇诺防线内的最后一公里安全</div>
|
||
|
|
<div class="serve--secure__image">
|
||
|
|
<img class="serve--secure__image--image" src="./images/img.png">
|
||
|
|
</div>
|
||
|
|
<div class="serve--secure__image__mobile">
|
||
|
|
<img class="serve--secure__image--image2" src="./images/serve-mobile.png">
|
||
|
|
</div>
|
||
|
|
<div class="serve--secure__desc">
|
||
|
|
<div class="serve--secure__desc--item">
|
||
|
|
<div class="serve--secure__desc--item__title">
|
||
|
|
网站平台安全
|
||
|
|
</div>
|
||
|
|
<div class="serve--secure__desc--item__detail">
|
||
|
|
安全漏洞造成的服务宕机、网页
|
||
|
|
</div>
|
||
|
|
<div class="serve--secure__desc--item__detail">
|
||
|
|
篡改、数据丢失等问题
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="serve--secure__desc--item">
|
||
|
|
<div class="serve--secure__desc--item__title">
|
||
|
|
云防护下的安全
|
||
|
|
</div>
|
||
|
|
<div class="serve--secure__desc--item__detail">
|
||
|
|
购买了某平台提供的云防护后
|
||
|
|
</div>
|
||
|
|
<div class="serve--secure__desc--item__detail">
|
||
|
|
问题依然存在
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="serve--secure__desc--item">
|
||
|
|
<div class="serve--secure__desc--item__title">
|
||
|
|
法规安全
|
||
|
|
</div>
|
||
|
|
<div class="serve--secure__desc--item__detail">
|
||
|
|
由网络安全、数据安全问题
|
||
|
|
</div>
|
||
|
|
<div class="serve--secure__desc--item__detail">
|
||
|
|
被相关部门通报、处罚
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 低部和第二部分放一起是为了第二张背景图可以连低部一起 -->
|
||
|
|
<div class="serve-box">
|
||
|
|
<!-- 第二部分内容 -->
|
||
|
|
<div class="serve-package-wrap">
|
||
|
|
|
||
|
|
<div class="serve-package">
|
||
|
|
<div class="serve-package__left">
|
||
|
|
<div class="serve-package__left--title">标准套餐</div>
|
||
|
|
<div class="serve-package__left--desc">
|
||
|
|
<div class="serve-package__left--desc__item">
|
||
|
|
<img src="./images/radio.png">
|
||
|
|
<div class="serve-package__left--desc__item--text">中 间 件 防 护</div>
|
||
|
|
</div>
|
||
|
|
<div class="serve-package__left--desc__item">
|
||
|
|
<img src="./images/radio.png">
|
||
|
|
<div class="serve-package__left--desc__item--text">操作系统防护</div>
|
||
|
|
</div>
|
||
|
|
<div class="serve-package__left--desc__item">
|
||
|
|
<img src="./images/radio.png">
|
||
|
|
<div class="serve-package__left--desc__item--text">业务逻辑防护</div>
|
||
|
|
</div>
|
||
|
|
<div class="serve-package__left--desc__item">
|
||
|
|
<img src="./images/radio.png">
|
||
|
|
<div class="serve-package__left--desc__item--text">应 急 处 理</div>
|
||
|
|
</div>
|
||
|
|
<div class="serve-package__left--desc__price">
|
||
|
|
<div class="serve-package__left--desc__price--text">每月只需</div>
|
||
|
|
<div class="serve-package__left--desc__price--num">2000元</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="serve-package__right">
|
||
|
|
<div class="serve-package__right--title">安全服务套餐 按需定制</div>
|
||
|
|
<div class="serve-package__right--pack">
|
||
|
|
<div class="serve-package__right--pack__item">
|
||
|
|
<div class="serve-package__right--pack__item--line"></div>
|
||
|
|
<div class="serve-package__right--pack__item--text">基础防护</div>
|
||
|
|
<div class="serve-package__right--pack__item--desc">操作系统防护</div>
|
||
|
|
<div class="serve-package__right--pack__item--desc">中间件防护</div>
|
||
|
|
<div class="serve-package__right--pack__item--desc">数据库防护</div>
|
||
|
|
<div class="serve-package__right--pack__item--desc">服务应用防护</div>
|
||
|
|
</div>
|
||
|
|
<div class="serve-package__right--pack__item">
|
||
|
|
<div class="serve-package__right--pack__item--line"></div>
|
||
|
|
<div class="serve-package__right--pack__item--text">专业防护</div>
|
||
|
|
<div class="serve-package__right--pack__item--desc">漏洞防护</div>
|
||
|
|
<div class="serve-package__right--pack__item--desc">木马防护</div>
|
||
|
|
<div class="serve-package__right--pack__item--desc">业务逻辑防护</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="serve-package__right--pack">
|
||
|
|
<div class="serve-package__right--pack__item">
|
||
|
|
<div class="serve-package__right--pack__item--line"></div>
|
||
|
|
<div class="serve-package__right--pack__item--text">数据防护</div>
|
||
|
|
<div class="serve-package__right--pack__item--desc">数据库防护</div>
|
||
|
|
<div class="serve-package__right--pack__item--desc">数据安全防护</div>
|
||
|
|
</div>
|
||
|
|
<div class="serve-package__right--pack__item">
|
||
|
|
<div class="serve-package__right--pack__item--line"></div>
|
||
|
|
<div class="serve-package__right--pack__item--text">应急处理</div>
|
||
|
|
<div class="serve-package__right--pack__item--desc">应急处理</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="serve-box--operate">
|
||
|
|
<div class="serve-box--operate__made">定制我的套餐</div>
|
||
|
|
<div class="serve-box--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="subpopup" class="secure-popup" style="display:none;">
|
||
|
|
<div class="secure-popup__close" onclick="closePopupsub()">
|
||
|
|
<img src="./images/close.png">
|
||
|
|
</div>
|
||
|
|
<div class="popup-content">
|
||
|
|
<div id="subpopupmessage" class="popup-content__item"></div>
|
||
|
|
<div class="popup-content__btn" id="subpopupmessageclose">关闭</div>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<!-- 底部占位 -->
|
||
|
|
<div id="footer"></div>
|
||
|
|
</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×tamp=' + 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×tamp=' + Date.now());
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</html>
|