yxt_group
/
safe
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

订制套餐

master
yunuo970428 2 months ago
parent
7077bc789f
commit
1e59490208
5 changed files with 330 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      css/secure.css
  2. BIN
      images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png
  3. BIN
      images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png
  4. BIN
      images/unchoice.png
  5. 428
      secure.html

23
css/secure.css
View File

@ -19,9 +19,9 @@ body {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
background: url("../images/img2.png"); background: url("../images/img2.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right top; background-position: right top;
background-size: contain; background-size: contain;
} */ } */
.secure-content-wrap{ .secure-content-wrap{
/* padding: 8rem 0; */ /* padding: 8rem 0; */
@ -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;
} }
@ -353,4 +370,4 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }

BIN
images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 504 B

BIN
images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 556 B

BIN
images/unchoice.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 594 B

428
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>
<div class="secure-content--model__round"></div> <div class="secure-content--operate">
<div>若您购买安全微服务套餐，我们还将赠送您独立站</div> <div class="secure-content--operate__made" onclick="openPopuptc()">定制我的套餐</div>
<div class="secure-content--operate__connect" onclick="openPopup()">联系我们</div>
</div>
</div>
</div>
<!-- 底部占位 -->
<div id="footer"></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;justify-content: space-around;align-content: center">
<div>
<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> </div>
</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>
<div style="display: flex;flex-direction: column;justify-content: center;align-content: center">
<div class="secure-content__right"> <div class="modal-body">
<img class="secure--content__right--image" src="./images/img2.png"> <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 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="mask" class="mask"></div>
</div> <div id="popup" class="secure-popup" style="display:none;">
<div class="secure-popup__close" onclick="closePopup()">
<!-- 底部占位 -->
<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>
<div class="popup-content"> <div class="popup-content">
<div class="popup-content__item">请留下您的联系方式，我们会尽快与您联系</div> <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="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="inputPhone"/></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称" id="inputCompany" /></div> <div class="popup-content__item"><input class="input" type="text" placeholder="公司名称" id="inputCompany"/>
</div>
<div class="popup-content__item popup-content__item2"> <div class="popup-content__item popup-content__item2">
<input class="inputCode" type="text" placeholder="验证码" id="inputCode" /> <input class="inputCode" type="text" placeholder="验证码" id="inputCode"/>
<div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img" style="height: 56px"></div> <div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img" style="height: 56px">
</div>
</div> </div>
<div class="popup-content__btn" onclick="submitName()">提交</div> <div class="popup-content__btn" onclick="submitName()">提交</div>
</div>
</div> </div>
</div>
<div id="subpopup" class="secure-popup" style="display:none;"> <div id="subpopup" class="secure-popup" style="display:none;">
<div class="secure-popup__close" onclick="closePopupsub()"> <div class="secure-popup__close" onclick="closePopupsub()">
<img src="./images/close.png"> <img src="./images/close.png">
</div> </div>
<div class="popup-content"> <div class="popup-content">
<div id="subpopupmessage" class="popup-content__item"></div> <div id="subpopupmessage" class="popup-content__item"></div>
<div class="popup-content__btn" id="subpopupmessageclose">关闭</div> <div class="popup-content__btn" id="subpopupmessageclose">关闭</div>
</div> </div>
</div>
</div>
</div> </div>
</body> </div>
<script> </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 () {
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");
}
});
$("#inputName").blur(function(){ if (!name) {
if(!name){ document.getElementById("inputName").classList.add("warning");
$(this).removeClass("warning"); document.getElementById("inputName").setAttribute("placeholder", "请输入您的姓名");
} }
}); if (!telephone) {
$("#inputPhone").blur(function(){ document.getElementById("inputPhone").classList.add("warning");
if(!telephone){ document.getElementById("inputPhone").setAttribute("placeholder", "请输入您的电话");
$(this).removeClass("warning");
} }
}); if (!companyName) {
$("#inputCompany").blur(function(){ document.getElementById("inputCompany").classList.add("warning");
if(!companyName){ document.getElementById("inputCompany").setAttribute("placeholder", "请输入公司名称");
$(this).removeClass("warning");
} }
}); if (!captcha) {
$("#inputCode").blur(function(){ document.getElementById("inputCode").classList.add("warning");
if(!captcha){ document.getElementById("inputCode").setAttribute("placeholder", "请输入验证码");
$(this).removeClass("warning"); return;
} }
});
if(!name){ $.post('http://aos.yyundong.com/ycsafe//business/buy/9', {
document.getElementById("inputName").classList.add("warning"); 'name': name,
document.getElementById("inputName").setAttribute("placeholder","请输入您的姓名"); 'telephone': telephone,
} 'companyName': companyName,
if(!telephone){ 'captcha': captcha
document.getElementById("inputPhone").classList.add("warning"); }, function (resp) {
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('您的意向信息已提交，我们将尽快与您取得联系！');
if (!!resp && !!resp.result) { } else {
alert('您的意向信息已提交，我们将尽快与您取得联系！'); alert(resp.message);
} 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>

Write Preview
Loading…
Cancel
Save