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.
459 lines
20 KiB
459 lines
20 KiB
<!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 id="tcpopup" class="tc-popup" style="display: none;width: 80%">
|
|
<div class="secure-popup__close" onclick="closePopuptc()">
|
|
<img src="./images/close.png">
|
|
</div>
|
|
<div style="display: flex;flex-direction: column;justify-content: space-between;align-content: center">
|
|
<div style="width: 100%">
|
|
<div
|
|
style="background-color: #262A2F;border-radius: 5px 0px 5px 0px;height: 40px;display: flex;flex-direction: column;justify-content: center">
|
|
<span style="color: #FFFFFF;text-align: center">标准套餐</span>
|
|
</div>
|
|
<table style="width: 100%">
|
|
<tr style="height: 50px">
|
|
<td rowspan="3" style="font-size: 16px; font-weight: 700">基础防护</td>
|
|
<td class="biaozhun-taocan" data="300" fuwu="1"><img class="thumbnail_1"
|
|
referrerpolicy="no-referrer" src="./images/unchoice.png">
|
|
操作系统防护
|
|
</td>
|
|
<td>巡检+加固</td>
|
|
<td>300</td>
|
|
</tr>
|
|
<tr style="height: 50px">
|
|
<td class="biaozhun-taocan" data="300" fuwu="2"><img class="thumbnail_1"
|
|
referrerpolicy="no-referrer" src="./images/unchoice.png">
|
|
中间件防护
|
|
</td>
|
|
<td>巡检+加固</td>
|
|
<td>300</td>
|
|
</tr>
|
|
<tr style="height: 50px">
|
|
<td class="biaozhun-taocan" data="300" fuwu="3"><img class="thumbnail_1"
|
|
referrerpolicy="no-referrer" src="./images/unchoice.png">
|
|
服务应用防护
|
|
</td>
|
|
<td>巡检+加固</td>
|
|
<td>300</td>
|
|
</tr>
|
|
<tr style="height: 50px">
|
|
<td rowspan="3" style="font-size: 16px; font-weight: 700">专业防护</td>
|
|
<td class="biaozhun-taocan" data="700" fuwu="4"><img class="thumbnail_1"
|
|
referrerpolicy="no-referrer" src="./images/unchoice.png">
|
|
漏洞防护
|
|
</td>
|
|
<td>巡检+加固</td>
|
|
<td>700</td>
|
|
</tr>
|
|
<tr style="height: 50px">
|
|
<td class="biaozhun-taocan" data="500" fuwu="5"><img class="thumbnail_1"
|
|
referrerpolicy="no-referrer" src="./images/unchoice.png">
|
|
木马防护
|
|
</td>
|
|
<td>实时巡检+加固</td>
|
|
<td>500</td>
|
|
</tr>
|
|
<tr style="height: 50px">
|
|
<td class="biaozhun-taocan" data="600" fuwu="6"><img class="thumbnail_1"
|
|
referrerpolicy="no-referrer" src="./images/unchoice.png">
|
|
业务逻辑防护
|
|
</td>
|
|
<td>实时巡检+加固+合规</td>
|
|
<td>600</td>
|
|
</tr>
|
|
<tr style="height: 50px">
|
|
<td rowspan="2" style="font-size: 16px; font-weight: 700">数据防护</td>
|
|
<td class="biaozhun-taocan" data="400" fuwu="7"><img class="thumbnail_1"
|
|
referrerpolicy="no-referrer" src="./images/unchoice.png">
|
|
数据库防护
|
|
</td>
|
|
<td>巡检+加固</td>
|
|
<td>400</td>
|
|
</tr>
|
|
<tr style="height: 50px">
|
|
<td class="biaozhun-taocan" data="800" fuwu="8"><img class="thumbnail_1"
|
|
referrerpolicy="no-referrer" src="./images/unchoice.png">
|
|
数据安全防护
|
|
</td>
|
|
<td>数据安全审计/跨境数据合规检查/整改</td>
|
|
<td>800</td>
|
|
</tr>
|
|
<tr style="height: 50px">
|
|
<td rowspan="1" style="font-size: 16px; font-weight: 700">应急处理</td>
|
|
<td class="biaozhun-taocan2" data="3000" fuwu="9"><img class="thumbnail_1"
|
|
referrerpolicy="no-referrer" src="./images/unchoice.png"> 应急处理
|
|
</td>
|
|
<td>次</td>
|
|
<td>3000</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div
|
|
style="display: flex;flex-direction: row;justify-content: center;align-content: center; margin-top: 20px;">
|
|
<button type="submit"
|
|
style="background-color: rgba(21, 170, 125, 1);width: 50%;display: block;font-size: 18px;border-radius: 6px;padding: 10px 16px">
|
|
<span style="color: white">提交您的信息</span>
|
|
</button>
|
|
</div>
|
|
<!-- <div
|
|
style="display: flex;flex-direction: column;justify-content: center;align-content: center;margin-left: 10px;width: 39%">
|
|
<div class="modal-body" style="text-align: center">
|
|
<div
|
|
style="display: flex;flex-direction: column;justify-content: center;align-content: flex-end;">
|
|
<span class="control-label" style="width: 100%;">您选择了标准套餐，<span
|
|
class="gongji">0</span>元/月</span>
|
|
<span class="control-label" style="width: 100%;">请留下您的联系方式，我们会尽快与您联系</span>
|
|
</div>
|
|
<form id="myModal2_form" class="form-horizontal" role="form"
|
|
onsubmit="return submit_myModal2_btn();">
|
|
<div style="margin-top: 10px;width: 100%">
|
|
<input type="text" class="form-control" name="name" placeholder="姓名"
|
|
style="height: 45px;width: 80%" />
|
|
</div>
|
|
<div style="margin-top: 10px;width: 100%">
|
|
<input type="text" class="form-control big" name="telephone" placeholder="电话"
|
|
style="height: 45px;width: 80%">
|
|
</div>
|
|
<div style="margin-top: 10px; margin-bottom: 10px;width: 100%">
|
|
<input type="text" class="form-control big" name="companyName" placeholder="公司名称"
|
|
style="height: 45px;width: 80%">
|
|
</div>
|
|
<div
|
|
style="display: flex;flex-direction: row;justify-content: center;align-content: center">
|
|
<button type="submit"
|
|
style="background-color: rgba(21, 170, 125, 1);margin-left: 15px; width: 50%;display: block;font-size: 18px;border-radius: 6px;padding: 10px 16px">
|
|
<span style="color: white">提交您的信息</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</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>
|
|
<!-- 低部和第二部分放一起是为了第二张背景图可以连低部一起 -->
|
|
<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" onclick="customized()" >定制我的套餐</div>
|
|
<!-- <div class="serve-box--operate__connect" onclick="openPopup()">联系我们</div>-->
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 底部占位 -->
|
|
<div id="footer"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<style>
|
|
table,
|
|
td,
|
|
th {
|
|
text-align: center;
|
|
border: 1px solid #ddd;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table td {
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
}
|
|
</style>
|
|
<script>
|
|
var taocan = 0;
|
|
$('td.biaozhun-taocan').on('click', function() {
|
|
if (taocan == 0 || taocan == 2) {
|
|
$('td.biaozhun-taocan').find('img').attr('src', './images/unchoice.png');
|
|
taocan = 1;
|
|
}
|
|
$('td.biaozhun-taocan2').removeClass('on').addClass('off').find('img').attr('src',
|
|
'./images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
|
|
if ($(this).hasClass('on')) {
|
|
$(this).removeClass('on').addClass('off');
|
|
$(this).find('img').attr('src', './images/unchoice.png');
|
|
} else {
|
|
$(this).removeClass('off').addClass('on');
|
|
$(this).find('img').attr('src',
|
|
'./images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
|
|
}
|
|
var gongji = 0;
|
|
$('td.on').each(function(k, v) {
|
|
gongji += parseInt($(v).attr('data'));
|
|
});
|
|
$('span.gongji').text(gongji);
|
|
});
|
|
|
|
$('td.biaozhun-taocan2').on('click', function() {
|
|
if (taocan == 0 || taocan == 1) {
|
|
$('td.biaozhun-taocan2').find('img').attr('src', './images/unchoice.png');
|
|
taocan = 2;
|
|
}
|
|
$('td.biaozhun-taocan').removeClass('on').addClass('off').find('img').attr('src',
|
|
'./images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
|
|
if ($(this).hasClass('on')) {
|
|
$(this).removeClass('on').addClass('off');
|
|
$(this).find('img').attr('src', './images/unchoice.png');
|
|
} else {
|
|
$(this).removeClass('off').addClass('on');
|
|
$(this).find('img').attr('src',
|
|
'./images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
|
|
}
|
|
var gongji = 0;
|
|
$('td.on').each(function(k, v) {
|
|
gongji += parseInt($(v).attr('data'));
|
|
});
|
|
$('span.gongji').text(gongji);
|
|
});
|
|
</script>
|
|
<script>
|
|
var isLogin = localStorage.getItem('isLogin')
|
|
function customized() {
|
|
// 判断是否登录
|
|
if(!isLogin){
|
|
window.location.href = 'login.html';
|
|
}else {
|
|
document.getElementById("tcpopup").style.display = "block";
|
|
}
|
|
|
|
}
|
|
|
|
function closePopuptc() {
|
|
document.getElementById("tcpopup").style.display = "none";
|
|
}
|
|
|
|
|
|
function openPopup() {
|
|
document.getElementById("popup").style.display = "block";
|
|
document.getElementById("mask").style.display = "block";
|
|
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/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>
|
|
|