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.
 
 

334 lines
15 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" onclick="customized()">定制我的套餐</div>
<!-- <div class="network&#45;&#45;content__right&#45;&#45;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="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>
</div>
<!-- 底部占位 -->
<div id="footer"></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', './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>