other_project/safe
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

订制套餐

Browse Source
This commit is contained in:
yunuo970428
2025-04-23 08:43:17 +08:00
parent 7077bc789f
commit 1e59490208
5 changed files with 341 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
css/secure.css
View File

@@ -133,6 +133,23 @@ body {
margin-top: -17.5rem; margin-top: -17.5rem;
box-sizing: border-box; box-sizing: border-box;
} }
.tc-popup {
background: #FFFFFF;
box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51);
border-radius: 4px;
padding: 4.375rem 3.75rem;
position: fixed;
/* top: 26%;
left: 36%; */
z-index: 90;
width: 32.5rem;
left: 25%;
margin-left: -16.25rem;
height: 40rem;
top: 50%;
margin-top: -17.5rem;
box-sizing: border-box;
}
.popup-content__item { .popup-content__item {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }

BIN
images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 504 B

BIN
images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 556 B

BIN
images/unchoice.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 594 B

450
secure.html
View File

@@ -1,169 +1,361 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/secure.css"> <link rel="stylesheet" href="./css/secure.css">
<title>独立站安全</title> <title>独立站安全</title>
</head> </head>
<!-- 嵌入头部 --> <!-- 嵌入头部 -->
<script type="text/javascript" src = "./js/jquery.js"></script> <script type="text/javascript" src="./js/jquery.js"></script>
<script> <script>
$(function(){ $(function () {
$("#header").load("./header.html"); $("#header").load("./header.html");
}); });
$(function(){ $(function () {
$("#footer").load("./footer.html"); $("#footer").load("./footer.html");
}); });
</script> </script>
<body> <body>
<div class="secure"> <div class="secure">
<div class="secure-box"> <div class="secure-box">
<!-- 头部占位 --> <!-- 头部占位 -->
<div id="header"></div> <div id="header"></div>
<!-- 页面内容 --> <!-- 页面内容 -->
<div class="secure-content-wrap"> <div class="secure-content-wrap">
<div class="secure-content"> <div class="secure-content">
<div class="secure-content__left"> <div class="secure-content__left">
<div class="secure-content--title">三种模式总有一款适合您</div> <div class="secure-content--title">三种模式总有一款适合您</div>
<div class="secure-content--model"> <div class="secure-content--model">
<div class="secure-content--model__item"> <div class="secure-content--model__item">
<div class="secure-content--model__round"></div> <div class="secure-content--model__round"></div>
<div>您可以只购买我们的独立站</div> <div>如果您有独立站，可以直接购买安全微服务套餐</div>
</div>
<div class="secure-content--model__item">
<div class="secure-content--model__round"></div>
<div>您购买安全微服务套餐，我们送您独立站</div>
</div>
<div class="secure-content--model__item">
<div class="secure-content--model__round"></div>
<div>您可以只购买我们的独立站</div>
</div>
</div>
</div> </div>
<div class="secure-content--model__item"> <div class="secure-content__right">
<div class="secure-content--model__round"></div> <img class="secure--content__right--image" src="./images/img2.png">
<div>如果您已有独立站，可以直接购买安全微服务套餐</div>
</div> </div>
<div class="secure-content--model__item">
<div class="secure-content--model__round"></div>
<div>若您购买安全微服务套餐，我们还将赠送您独立站</div>
</div>
</div>
</div> </div>
<div class="secure-content--operate">
<div class="secure-content__right"> <div class="secure-content--operate__made" onclick="openPopuptc()">定制我的套餐</div>
<img class="secure--content__right--image" src="./images/img2.png"> <div class="secure-content--operate__connect" onclick="openPopup()">联系我们</div>
</div> </div>
</div>
<div class="secure-content--operate">
<div class="secure-content--operate__made">定制我的套餐</div>
<div class="secure-content--operate__connect" onclick="openPopup()">联系我们</div>
</div>
</div> </div>
</div>
<!-- 底部占位 -->
<div id="footer"></div>
</div> <!-- 弹窗: 定制我的套餐 -->
<div id="tcpopup" class="tc-popup" style="display: none;width: 80%">
<div class="secure-popup__close" onclick="closePopuptc()">
<!-- 底部占位 -->
<div id="footer"></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"> <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>
<div style="display: flex;justify-content: space-around;align-content: center">
<div id="subpopup" class="secure-popup" style="display:none;"> <div>
<div class="secure-popup__close" onclick="closePopupsub()"> <div style="background-color: #262A2F;border-radius: 5px 0px 5px 0px;height: 40px;display: flex;flex-direction: column;justify-content: center">
<img src="./images/close.png"> <span style="color: #FFFFFF;text-align: center">标准套餐</span>
</div>
<table>
<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: column;justify-content: center;align-content: center">
<div class="modal-body">
<span class="control-label" style="text-align: center;width: 100%;float: left">您选择了标准套餐，<span class="gongji">0</span>元/月</span>
<span class="control-label" style="text-align: center;width: 100%;float: left">请留下您的联系方式，我们会尽快与您联系</span>
<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: 100%"/>
</div>
<div style="margin-top: 10px;width: 100%">
<input type="text" class="form-control big" name="telephone" placeholder="电话" style="height: 45px;width: 100%">
</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: 100%">
</div>
<button type="submit" style="background-color: rgba(21, 170, 125, 1);margin-left: 15px; width: 95%;display: block;font-size: 18px;border-radius: 6px;padding: 10px 16px">
<span style="color: white">提交您的信息</span>
</button>
</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>
<div class="popup-content"> <div class="popup-content">
<div id="subpopupmessage" class="popup-content__item"></div> <div class="popup-content__item">请留下您的联系方式，我们会尽快与您联系</div>
<div class="popup-content__btn" id="subpopupmessageclose">关闭</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>
</div>
</div> </div>
</body>
<script> <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>
</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>
function submit_myModal2_btn() {
var data = $('#myModal2_form').serialize();
var fuwu = '';
$('td.on').each(function(k,v){
if (fuwu) {
fuwu += ',';
}
fuwu += $(v).attr('fuwu');
});
data += '&fuwu=' + fuwu;
$.ajax({
url: 'http://aos.yyundong.com/ycsafe/business/buy/1',
type: "POST",
data: data,
success: function (result) {
if (result.result){
alert("您的意向信息已提交，我们将尽快与您取得联系！");
$('#myModal2').modal('hide');
$('#myModal2_form').trigger('reset');
} else {
alert(result.message);
}
}
});
return false;
}
</script>
<script>
function openPopuptc() {
document.getElementById("tcpopup").style.display = "block";
}
function closePopuptc() {
document.getElementById("tcpopup").style.display = "none";
}
function openPopup() { function openPopup() {
document.getElementById("popup").style.display = "block"; document.getElementById("popup").style.display = "block";
document.getElementById("mask").style.display = "block"; document.getElementById("mask").style.display = "block";
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now()); $('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date.now());
} }
function closePopup() { function closePopup() {
document.getElementById("popup").style.display = "none"; document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "none"; document.getElementById("mask").style.display = "none";
} }
// 提交名字函数 // 提交名字函数
function submitName() { function submitName() {
let name = $('#inputName').val(); let name = $('#inputName').val();
let telephone = $('#inputPhone').val(); let telephone = $('#inputPhone').val();
let companyName = $('#inputCompany').val(); let companyName = $('#inputCompany').val();
let captcha = $('#inputCode').val(); let captcha = $('#inputCode').val();
$("#inputName").blur(function(){ $("#inputName").blur(function () {
if(!name){ if (!name) {
$(this).removeClass("warning"); $(this).removeClass("warning");
} }
}); });
$("#inputPhone").blur(function(){ $("#inputPhone").blur(function () {
if(!telephone){ if (!telephone) {
$(this).removeClass("warning"); $(this).removeClass("warning");
} }
}); });
$("#inputCompany").blur(function(){ $("#inputCompany").blur(function () {
if(!companyName){ if (!companyName) {
$(this).removeClass("warning"); $(this).removeClass("warning");
} }
}); });
$("#inputCode").blur(function(){ $("#inputCode").blur(function () {
if(!captcha){ if (!captcha) {
$(this).removeClass("warning"); $(this).removeClass("warning");
} }
}); });
if(!name){ if (!name) {
document.getElementById("inputName").classList.add("warning"); document.getElementById("inputName").classList.add("warning");
document.getElementById("inputName").setAttribute("placeholder","请输入您的姓名"); 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);
} }
}); 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('http://aos.yyundong.com/ycsafe//business/buy/9', {
'name': name,
'telephone': telephone,
'companyName': companyName,
'captcha': captcha
}, function (resp) {
if (!!resp && !!resp.result) {
alert('您的意向信息已提交，我们将尽快与您取得联系！');
} else {
alert(resp.message);
}
});
} }
function changeCodeImg() { function changeCodeImg() {
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now()); $('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date.now());
} }
</script> </script>
</html> </html>