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

111

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

385
business.html Normal file
View File

@@ -0,0 +1,385 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="./css/business.css" rel="stylesheet">
<title>个人中心</title>
</head>
<!-- 嵌入头部 -->
<script src="./js/jquery.js" type="text/javascript"></script>
<script>
$(function () {
$("#header").load("./header.html");
});
$(function () {
$("#footer").load("./footer.html");
});
</script>
<body>
<div class="secure">
<div class="secure-box">
<!-- 头部占位 -->
<div id="header"></div>
<!-- 页面内容 -->
<div class="secure-content-wrap">
<div class="secure-content" style="display: flex;flex-direction: column;width: 100%;min-height: 200px">
<h1 style="margin-top: -30px">带分页的网络数据表格</h1>
<div class="controls">
<div>
<button id="fetchData">获取数据</button>
<!-- <button id="clearData">清空表格</button>-->
</div>
<div>
每页显示:
<select id="pageSize" class="page-size-selector">
<option value="2">2</option>
<option value="5">5</option>
<option selected value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
</div>
</div>
<div id="loading" class="loading" style="display: none;">正在加载数据...</div>
<div id="error" class="error" style="display: none;"></div>
<div id="tableContainer">
<table id="dataTable">
<thead>
<tr>
<th style="background-color: #334863;text-align: center;color: #ffffff">序号</th>
<th style="background-color: #4CC3A5;text-align: center;color: #ffffff">客户名称</th>
<th style="background-color: #334863;text-align: center;color: #ffffff">录入人名称</th>
<th style="background-color: #4CC3A5;text-align: center;color: #ffffff">我方签订人</th>
<th style="background-color: #334863;text-align: center;color: #ffffff">甲方签订人</th>
<th style="background-color: #4CC3A5;text-align: center;color: #ffffff">签定时间</th>
<th style="background-color: #334863;text-align: center;color: #ffffff">终止时间</th>
<th style="background-color: #4CC3A5;text-align: center;color: #ffffff">合同金额</th>
<th style="background-color: #334863;text-align: center;color: #ffffff">发票情况</th>
<th style="background-color: #4CC3A5;text-align: center;color: #ffffff">回款情况</th>
<th style="background-color: #334863;text-align: center;color: #ffffff">备注</th>
</tr>
</thead>
<tbody id="tableBody" style="background-color: #ffffff">
<!-- 数据将通过JavaScript动态插入 -->
</tbody>
</table>
</div>
<div class="pagination">
<button id="firstPage">首页</button>
<button id="prevPage">上一页</button>
<span id="pageInfo" class="page-info">第 0 页 / 共 0 页</span>
<button id="nextPage">下一页</button>
<button id="lastPage">末页</button>
</div>
</div>
</div>
</div>
<!-- 底部占位 -->
<div id="footer"></div>
</div>
</body>
<script>
const fetchBtn = document.getElementById('fetchData');
const clearBtn = document.getElementById('clearData');
const tableBody = document.getElementById('tableBody');
const loadingDiv = document.getElementById('loading');
const errorDiv = document.getElementById('error');
const pageSizeSelect = document.getElementById('pageSize');
// 分页按钮
const firstPageBtn = document.getElementById('firstPage');
const prevPageBtn = document.getElementById('prevPage');
const nextPageBtn = document.getElementById('nextPage');
const lastPageBtn = document.getElementById('lastPage');
const pageInfoSpan = document.getElementById('pageInfo');
// 分页状态
let currentPage = 1;
let totalPages = 0;
let pageSize = 10;
let allData = [];
// 初始化按钮状态
updatePaginationButtons();
// 获取数据按钮点击事件
fetchBtn.addEventListener('click', fetchData);
// 清空表格按钮点击事件
// clearBtn.addEventListener('click', function () {
// tableBody.innerHTML = '';
// errorDiv.style.display = 'none';
// allData = [];
// currentPage = 1;
// totalPages = 0;
// updatePageInfo();
// updatePaginationButtons();
// });
// 分页按钮事件
firstPageBtn.addEventListener('click', () => goToPage(1));
prevPageBtn.addEventListener('click', () => goToPage(currentPage - 1));
nextPageBtn.addEventListener('click', () => goToPage(currentPage + 1));
lastPageBtn.addEventListener('click', () => goToPage(totalPages));
// 每页显示数量变化事件
pageSizeSelect.addEventListener('change', function () {
pageSize = parseInt(this.value);
if (allData.length > 0) {
totalPages = Math.ceil(allData.length / pageSize);
currentPage = Math.min(currentPage, totalPages);
renderTable();
updatePageInfo();
updatePaginationButtons();
}
});
// 获取数据函数
function fetchData() {
// 显示加载中
loadingDiv.style.display = 'block';
errorDiv.style.display = 'none';
// 设置Cookie
document.cookie = localStorage.getItem('token');
$.post('http://aos.yyundong.com/ycsafe/website/contract/list', {
'pageIndex': pageSize,
'limit': currentPage,
}, function(resp) {
console.log(">>>>>>>>>>>>>>",resp);
});
// 使用JSONPlaceholder API作为示例数据源
// fetch('https://jsonplaceholder.typicode.com/users')
// .then(response => {
// if (!response.ok) {
// throw new Error('网络响应不正常');
// }
// return response.json();
// })
// .then(data => {
// allData = data;
// pageSize = parseInt(pageSizeSelect.value);
// totalPages = Math.ceil(allData.length / pageSize);
// currentPage = 1;
//
// renderTable();
// updatePageInfo();
// updatePaginationButtons();
//
// loadingDiv.style.display = 'none';
// })
// .catch(error => {
// console.error('获取数据出错:', error);
// loadingDiv.style.display = 'none';
// errorDiv.textContent = '获取数据失败: ' + error.message;
// errorDiv.style.display = 'block';
// });
}
// 渲染表格函数
function renderTable() {
// 清空表格
tableBody.innerHTML = '';
// 计算当前页的数据范围
const startIndex = (currentPage - 1) * pageSize;
const endIndex = Math.min(startIndex + pageSize, allData.length);
// 填充当前页的数据到表格
for (let i = startIndex; i < endIndex; i++) {
const user = allData[i];
const row = document.createElement('tr');
const idCell = document.createElement('td');
idCell.textContent = i+1;
row.appendChild(idCell);
const customerName_ = document.createElement('td');
customerName_.textContent = user.customerName_;
row.appendChild(customerName_);
const accountName_ = document.createElement('td');
accountName_.textContent = user.accountName_;
row.appendChild(accountName_);
const staffName_ = document.createElement('td');
staffName_.textContent = user.staffName_;
row.appendChild(staffName_);
const customerSignatory_ = document.createElement('td');
customerSignatory_.textContent = user.address.customerSignatory_;
row.appendChild(customerSignatory_);
const signTime = document.createElement('td');
signTime.textContent = user.address.signTime;
row.appendChild(signTime);
const endTime = document.createElement('td');
endTime.textContent = user.address.endTime;
row.appendChild(endTime);
const amount = document.createElement('td');
amount.textContent = user.address.amount;
row.appendChild(amount);
const fapiao = document.createElement('td');
fapiao.textContent = user.address.fapiao;
row.appendChild(fapiao);
const dso = document.createElement('td');
dso.textContent = user.address.dso;
row.appendChild(dso);
const content = document.createElement('td');
content.textContent = user.address.content;
row.appendChild(content);
tableBody.appendChild(row);
}
}
// 跳转到指定页
function goToPage(page) {
console.log("goToPage>>>>>>>",page);
console.log("goToPage>>>>>>>",totalPages);
console.log("goToPage>>>>>>>",currentPage);
if (page < 1 || page > totalPages || page === currentPage) return;
currentPage = page;
renderTable();
updatePageInfo();
updatePaginationButtons();
}
// 更新分页信息
function updatePageInfo() {
pageInfoSpan.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
}
// 更新分页按钮状态
function updatePaginationButtons() {
firstPageBtn.disabled = currentPage === 1 || totalPages === 0;
prevPageBtn.disabled = currentPage === 1 || totalPages === 0;
nextPageBtn.disabled = currentPage === totalPages || totalPages === 0;
lastPageBtn.disabled = currentPage === totalPages || totalPages === 0;
}
</script>
<script>
function openPopuptc() {
// 判断是否登录
// if(!isLogin){
// window.location.href = 'login.html';
// }else {
// document.getElementById("tcpopup").style.display = "block";
// }
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";
time = Date.now()
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/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('http://aos.yyundong.com/ycsafe//business/buy/9', {
'name': name,
'telephone': telephone,
'companyName': companyName,
'captcha': captcha,
'timestamp': time,
}, function (resp) {
if (!!resp && !!resp.result) {
alert('您的意向信息已提交，我们将尽快与您取得联系！');
document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "none";
document.getElementById("inputName").value = ''
document.getElementById("inputPhone").value = ''
document.getElementById("inputCompany").value = ''
document.getElementById("inputCode").value = ''
} else {
document.getElementById("inputName").value = ''
alert(resp.message);
}
});
}
function changeCodeImg() {
time = Date.now()
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date
.now());
}
</script>
</html>

447
css/business.css Normal file
View File

@@ -0,0 +1,447 @@
/* 公共样式 */
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* 整个背景图 */
.secure {
width: 100%;
height: 100%;
min-height: 100vh;
font-family: 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif;
background: url("../images/bg4.jpg");
background-repeat: no-repeat;
background-size: cover;
}
/* 右侧图 */
/* .secure-box {
width: 100%;
min-height: 100vh;
background: url("../images/img2.png");
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
} */
.secure-content-wrap{
/* padding: 8rem 0; */
padding: 5% 0;
}
.secure-content {
max-width: 90%;
display: flex;
margin: 0 auto;
/* padding: 2rem 0; */
}
.secure-content__left{
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 1rem;
}
.secure-content__right{
width: 50%;
padding: 0 1rem;
}
.secure--content__right--image{
width:100%;
}
.secure-content--title {
font-size: 2.25rem;
font-weight: bold;
color: #333333;
line-height: 3.875rem;
}
.secure-content--model {
font-size: 1.375rem;
font-weight: 400;
color: #333333;
line-height: 3.25rem;
margin-top: 2rem;
margin-bottom: 5.0625rem;
}
.secure-content--model__item {
display: flex;
align-items: center;
}
.secure-content--model__round {
width: .4375rem;
height: .4375rem;
background: #333333;
border-radius: 50%;
margin-right: 1rem;
}
.secure-content--operate {
display: flex;
justify-content: center;
/* margin-top: 5rem; */
margin-top: 8%;
}
.secure-content--operate__made {
width: 17.5rem;
height: 3.125rem;
line-height: 3.125rem;
background: rgba(38, 42, 47, .8);
border-radius: .25rem;
font-size: 1.125rem;
font-weight: 400;
text-align: center;
color: #FFFFFF;
cursor: pointer;
}
.secure-content--operate__connect {
width: 17.5rem;
height: 3.125rem;
line-height: 3.125rem;
background: #FFFFFF;
border-radius: .25rem;
border: 3px solid rgba(38, 42, 47, 1);
font-size: 1.125rem;
font-weight: 400;
text-align: center;
color: rgba(38, 42, 47, 1);
margin-left: 2.4375rem;
cursor: pointer;
box-sizing: border-box;
}
.mask{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.3);
z-index: 1;
display: none;
}
.secure-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: 50%;
margin-left: -16.25rem;
height: 35rem;
top: 50%;
margin-top: -17.5rem;
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 {
margin-bottom: 1.25rem;
}
.popup-content__item2 {
display: flex;
justify-content: space-between;
}
.popup-content__btn {
width: 25rem;
height: 3.375rem;
background: rgba(38, 42, 47, .8);
border-radius: .25rem;
font-size: 1.25rem;
font-weight: 400;
color: #FFFFFF;
line-height: 3.375rem;
text-align: center;
cursor: pointer;
}
.secure-popup__close {
position: fixed;
position: absolute;
right: 1.375rem;
top: 1.375rem;
cursor: pointer;
}
.input {
width: 22.4rem;
height: 3.375rem;
border: 1px solid #999999;
border-radius: .25rem;
font-size: 1.25rem;
font-weight: 400;
color: #333333;
padding: 0 1.25rem;
}
.input.warning{
border-color: red;
}
.input.warning::placeholder{
color:red;
}
.inputCode {
width: 10rem;
height: 3.375rem;
border: 1px solid #999999;
border-radius: .25rem;
font-size: 1.25rem;
font-weight: 400;
color: #333333;
padding: 0 1.25rem;
}
.inputCode.warning{
border-color: red;
}
.inputCode.warning::placeholder{
color:red;
}
#footer{
/* margin-top: 12.5rem; */
margin-top: 3%;
}
h1 {
color: #333;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
position: sticky;
top: 0;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f1f1f1;
}
.loading {
text-align: center;
padding: 20px;
font-style: italic;
color: #666;
}
.error {
color: red;
padding: 20px;
}
button {
padding: 8px 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
button:hover {
background-color: #45a049;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination button {
margin: 0 5px;
}
.page-info {
margin: 0 15px;
line-height: 36px;
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.page-size-selector {
padding: 8px;
border-radius: 4px;
border: 1px solid #ddd;
}
/* 适配1360*768的电脑屏幕： */
/* 适配1366*768的电脑屏幕： */
/* 适配1440*900的电脑屏幕： */
/* 适配1400*1050的电脑屏幕： */
@media screen and (min-width: 1360px) and (max-width: 1440px){
/* CSS 样式 */
/* .secure-popup {
top: 6rem!important;
} */
/* .secure-content-wrap{
padding: 2% 0;
} */
.secure-content--operate{
margin-top: 3%;
}
/* .secure-content{
max-width: 80%;
} */
}
/* 适配1024*768的电脑屏幕 */
@media only screen and (max-width: 1024px) and (max-height: 768px) {
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
.secure-content--title {
font-size: 1.7rem;
line-height: 0rem;
}
.secure-content--model {
font-size: 1.125rem;
}
.secure-content {
max-width: 60rem;
margin: 0 auto;
}
.secure-content--model {
margin-top: 3rem;
margin-bottom: 2rem;
}
.secure-content--operate {
display: flex;
justify-content: center;
}
.secure-content--operate__made,
.secure-content--operate__connect {
width: 12rem!important;
}
/* .secure-popup {
top: 3rem!important;
} */
#footer {
margin-top: 0rem;
}
}
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
/* 移动端样式 */
.secure-content-wrap{
padding: 1rem 0 4rem 0;
}
.secure-box {
background: none!important;
}
.secure-content {
flex-wrap: wrap;
width: auto!important;
/* margin-top: 2rem!important; */
margin-left: 0!important;
/* margin-bottom: 6rem!important; */
padding-top: 0;
}
.secure-content__right{
width: 90% !important;
margin: 0 auto;
}
.secure-content--title {
font-size: 1.5rem!important;
/* text-align: center; */
padding: 0 1rem;
}
.secure-content--model {
margin-top: 0.5rem!important;
}
.secure-content--model__item {
display: flex;
align-items: baseline!important;
padding: 0 1rem;
font-size: 1rem;
line-height: 1.5;
margin-top: 1rem;
}
.secure-content--operate {
padding: 0 1rem;
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
.popup-content__item {
margin-bottom: 1.25rem;
}
.popup-content__item2 {
width: 18.8rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.popup-content__btn {
width: 18.8rem!important;
height: 3rem!important;
line-height: 3rem!important;
}
/* .secure-popup{
padding: 2.5rem 1.5rem!important;
top: 15%!important;
left: 4%!important;
width: auto;
height: auto;
margin-left: 0;
margin-top: 0;
} */
.secure-popup {
width: 22rem;
height: 30rem;
FONT-WEIGHT: 200;
margin-left: -11rem;
margin-top: -15rem;
padding: 3rem 1.5rem 0 1.5rem;
}
.secure-popup__close {
top: 1.075rem!important;
}
.input {
width: 16.3rem!important;
height: 3rem!important;
line-height: 3rem!important;
font-size: 1rem;
}
.inputCode {
width: 6.3rem;
height: 3rem;
height: 3rem!important;
border: 1px solid #999999;
border-radius: .25rem;
font-size: 1rem;
font-weight: 400;
color: #333333;
padding: 0 1.25rem;
}
.codeImage {
width: 8rem;
height: 3rem;
}
.img {
width: 100%;
height: 100%;
}
}

19
css/network.css
View File

@@ -142,7 +142,23 @@ body {
margin-top: -17.5rem;
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 {
margin-bottom: 1.25rem;
}
@@ -406,7 +422,6 @@ body {
margin-top: -15rem;
padding: 3rem 1.5rem 0 1.5rem;
}
.secure-popup__close {
top: 1.075rem!important;
}

17
css/serve.css
View File

@@ -228,6 +228,23 @@ body {
margin-top: -17.5rem;
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 {
margin-bottom: 1.25rem;
}

4
header.html
View File

@@ -43,7 +43,7 @@
<script>
if (localStorage.getItem('userName')==null){
if (localStorage.getItem('userName')){
var name = localStorage.getItem('userName')
// 获取元素引用
@@ -58,7 +58,7 @@
// // 方法3: 使用textContent
// link.textContent = name;
link.href = "serve.html";
link.href = "business.html";
}
</script>

3
login.html
View File

@@ -230,9 +230,8 @@
// const sessionValue = sessionStorage.getItem('token');
// const userName = sessionStorage.getItem('userName');
var cook = document.cookie;
// 存储数据
localStorage.setItem('token', cook.substring(6, document.cookie.length));
localStorage.setItem('token', document.cookie);
localStorage.setItem('userName', resp.enterpriseName+"");
localStorage.setItem('isLogin', resp.result);
} else {

149
network.html
View File

@@ -49,27 +49,27 @@
</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="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%">
@@ -168,47 +168,76 @@
<span style="color: white">提交您的信息</span>
</button>
</div>
<!-- <div
style="display: flex;flex-direction: column;justify-content: center;align-content: center;margin-left: 10px;width: 39%">
<div class="modal-body" style="text-align: center">
<div
style="display: flex;flex-direction: column;justify-content: center;align-content: flex-end;">
<span class="control-label" style="width: 100%;">您选择了标准套餐，<span
class="gongji">0</span>元/月</span>
<span class="control-label" style="width: 100%;">请留下您的联系方式，我们会尽快与您联系</span>
</div>
<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: 80%" />
</div>
<div style="margin-top: 10px;width: 100%">
<input type="text" class="form-control big" name="telephone" placeholder="电话"
style="height: 45px;width: 80%">
</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: 80%">
</div>
<div
style="display: flex;flex-direction: row;justify-content: center;align-content: center">
<button type="submit"
style="background-color: rgba(21, 170, 125, 1);margin-left: 15px; width: 50%;display: block;font-size: 18px;border-radius: 6px;padding: 10px 16px">
<span style="color: white">提交您的信息</span>
</button>
</div>
</form>
</div>
</div> -->
</div>
</div>
<!-- 底部占位 -->
<div id="footer"></div>
</div>
</body>
</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() {
@@ -216,12 +245,16 @@
if(!isLogin){
window.location.href = 'login.html';
}else {
document.getElementById("popup").style.display = "block";
document.getElementById("mask").style.display = "block";
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
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";

47
secure.html
View File

@@ -145,7 +145,7 @@
<div
style="display: flex;flex-direction: row;justify-content: center;align-content: center; margin-top: 20px;">
<button type="submit"
<button onclick="submit_myModal2_btn()"
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>
@@ -219,9 +219,10 @@
<div class="popup-content__btn" id="subpopupmessageclose">关闭</div>
</div>
</div>
</div>
<!-- 底部占位 -->
<div id="footer"></div>
</div>
</body>
<style>
table,
@@ -298,31 +299,35 @@
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_form').trigger('reset');
document.getElementById("tcpopup").style.display = "none";
} else {
alert(result.message);
}
}
});
return false;
console.log("提交>>>>>",data);
// $.ajax({
// url: 'http://aos.yyundong.com/ycsafe/business/buy/1',
// type: "POST",
// data: data,
// success: function(result) {
// if (result.result) {
// alert("您的意向信息已提交，我们将尽快与您取得联系！");
// $('#myModal2_form').trigger('reset');
// document.getElementById("tcpopup").style.display = "none";
// } else {
// alert(result.message);
// }
// }
// });
// return false;
}
</script>
<script>
function openPopuptc() {
// 判断是否登录
if(!isLogin){
window.location.href = 'login.html';
}else {
// if(!isLogin){
// window.location.href = 'login.html';
// }else {
// document.getElementById("tcpopup").style.display = "block";
// }
document.getElementById("tcpopup").style.display = "block";
}
}

217
serve.html
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>
</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";