This commit is contained in:
myTest383
2025-04-30 17:49:53 +08:00
parent 49d281dcc3
commit 1d353f4af3
9 changed files with 1147 additions and 177 deletions

View File

@@ -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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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&#45;&#45;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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&#45;&#45;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";