111
This commit is contained in:
219
serve.html
219
serve.html
@@ -65,80 +65,6 @@
|
||||
</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="tcpopup" class="tc-popup" style="display: none;width: 80%">
|
||||
@@ -300,11 +226,148 @@
|
||||
<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>
|
||||
</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() {
|
||||
@@ -316,6 +379,12 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function closePopuptc() {
|
||||
document.getElementById("tcpopup").style.display = "none";
|
||||
}
|
||||
|
||||
|
||||
function openPopup() {
|
||||
document.getElementById("popup").style.display = "block";
|
||||
document.getElementById("mask").style.display = "block";
|
||||
|
||||
Reference in New Issue
Block a user