Compare commits
9 Commits
63de6c2ec0
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
1d353f4af3 | ||
|
|
49d281dcc3 | ||
|
|
56914bea40 | ||
|
|
8ede22e863 | ||
|
|
4742b2ab34 | ||
|
|
afc88d3426 | ||
| a63a5dbff2 | |||
| 6f1da285f0 | |||
| 4517365a85 |
385
business.html
Normal file
385
business.html
Normal 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×tamp=' + 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×tamp=' + Date
|
||||
.now());
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
447
css/business.css
Normal file
447
css/business.css
Normal 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%;
|
||||
}
|
||||
}
|
||||
@@ -9,13 +9,16 @@
|
||||
left: 0;
|
||||
top: 0; */
|
||||
}
|
||||
|
||||
.home--nav__logo {
|
||||
width: 11.125rem;
|
||||
height: 3.5625rem;
|
||||
}
|
||||
|
||||
.home--nav__tab {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.home--nav__tab--item {
|
||||
margin: 0 1rem;
|
||||
cursor: pointer;
|
||||
@@ -23,32 +26,40 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
a:active, a:hover {
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
color: #1A6CE6;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.home--nav__phone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: right;
|
||||
}
|
||||
|
||||
.home--nav__phone--icon {
|
||||
width: 1.625rem;
|
||||
height: 1.625rem;
|
||||
}
|
||||
|
||||
.home--nav__phone--text {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.0rem;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
color: #666;
|
||||
padding-left: .8rem;
|
||||
}
|
||||
|
||||
.active {
|
||||
border-bottom: 3px solid #1A6CE6;
|
||||
padding-bottom: .5rem;
|
||||
@@ -56,15 +67,18 @@ a:visited {
|
||||
|
||||
/* 适配1024*768的电脑屏幕 */
|
||||
@media only screen and (max-width: 1024px) and (max-height: 768px) {
|
||||
|
||||
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
|
||||
.home--nav__phone--text {
|
||||
font-size: 1rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.home--nav__phone--icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@@ -77,6 +91,7 @@ a:visited {
|
||||
.home--nav__tab--item {
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
/* .home--nav__tab{
|
||||
display: none;
|
||||
} */
|
||||
@@ -87,9 +102,11 @@ a:visited {
|
||||
width: 8rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.home--nav__tab {
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
@@ -99,17 +116,19 @@ a:visited {
|
||||
width: 2.8125rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home--local__text {
|
||||
padding: 0 !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home--nav__phone--text {
|
||||
font-size: 1rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.home--nav__phone--icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
458
css/login - 副本.css
Normal file
458
css/login - 副本.css
Normal file
@@ -0,0 +1,458 @@
|
||||
/* 公共样式 */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login {
|
||||
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/login_bg.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.login--content-wrap {
|
||||
/* margin: 5rem auto; */
|
||||
max-width: 80%;
|
||||
margin: 3% auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.login--content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 90rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login--content__left {
|
||||
width: 54%;
|
||||
}
|
||||
|
||||
.login--content__left--image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login--content__left--image--mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login--content__right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.login--content__right--title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 3.125rem;
|
||||
}
|
||||
|
||||
.login--content__right--model {
|
||||
margin-bottom: 2.2815rem;
|
||||
}
|
||||
|
||||
.login--content__right--model__title {
|
||||
font-size: 1.375rem;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
line-height: 2.9375rem;
|
||||
}
|
||||
|
||||
.login--content__right--model__desc {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.login--content__right--operate {
|
||||
margin-top: 4rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login--content__right--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;
|
||||
}
|
||||
|
||||
.login--content__right--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;
|
||||
height: 34.375rem; */
|
||||
z-index: 90;
|
||||
width: 32.5rem;
|
||||
left: 50%;
|
||||
margin-left: -16.25rem;
|
||||
height: 35rem;
|
||||
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__item3 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.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: 9rem; */
|
||||
margin-top: 6%;
|
||||
}
|
||||
|
||||
/* 适配1360*768的电脑屏幕： */
|
||||
/* 适配1366*768的电脑屏幕： */
|
||||
/* 适配1440*900的电脑屏幕： */
|
||||
/* 适配1400*1050的电脑屏幕： */
|
||||
@media screen and (min-width: 1360px) and (max-width: 1440px) {
|
||||
|
||||
/* CSS 样式 */
|
||||
.login--content {
|
||||
max-width: 70rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login--content__right--title {
|
||||
font-size: 2.45rem !important;
|
||||
margin-bottom: 2.5rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--operate__connect,
|
||||
.login--content__right--operate__made {
|
||||
width: 13rem;
|
||||
}
|
||||
|
||||
.login--content__right--model {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
/* .secure-popup {
|
||||
top: 6rem!important;
|
||||
} */
|
||||
}
|
||||
|
||||
/* 适配1024*768的电脑屏幕 */
|
||||
@media only screen and (max-width: 1024px) and (max-height: 768px) {
|
||||
|
||||
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
|
||||
.login--content {
|
||||
margin: 3rem 6.75rem 2rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--title {
|
||||
font-size: 1.7rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--model__title {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--model__desc {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--model {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--operate {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.login--content__right--operate__connect,
|
||||
.login--content__right--operate__made {
|
||||
width: 12rem !important;
|
||||
height: 3rem !important;
|
||||
line-height: 3rem !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--model {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
/* .secure-popup {
|
||||
top: 3rem!important;
|
||||
} */
|
||||
.login--content__left {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
#footer {
|
||||
margin-top: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
/* 移动端样式 */
|
||||
.login--content-wrap {
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login--content {
|
||||
margin: 0 !important;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.login--content__left {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
margin: 2rem 0 3rem;
|
||||
}
|
||||
|
||||
.login--content__left--image {
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login--content__left--image--mobile {
|
||||
display: block;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login--content__right--title {
|
||||
/* text-align: center; */
|
||||
padding: 0 1rem;
|
||||
font-size: 1.5rem !important;
|
||||
margin-bottom: 1.2rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--model {
|
||||
padding: 0 1rem;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.login--content__right--model__title {
|
||||
font-size: 1.25rem;
|
||||
line-height: 2.4;
|
||||
}
|
||||
|
||||
.login--content__right--model__desc {
|
||||
font-size: 1rem !important;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.login--content__right--operate {
|
||||
padding: 0 1rem;
|
||||
margin-bottom: 6rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.login--content__right--operate__made,
|
||||
.login--content__right--operate__connect {
|
||||
width: 10rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--operate__connect {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.popup-content__item {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.popup-content__item2 {
|
||||
width: 18.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.popup-content__item3 {
|
||||
width: 18.8rem;
|
||||
}
|
||||
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
#footer {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
458
css/login.css
Normal file
458
css/login.css
Normal file
@@ -0,0 +1,458 @@
|
||||
/* 公共样式 */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login {
|
||||
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;
|
||||
}
|
||||
|
||||
.login--content-wrap {
|
||||
/* margin: 5rem auto; */
|
||||
max-width: 80%;
|
||||
margin: 3% auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.login--content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 90rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login--content__left {
|
||||
width: 54%;
|
||||
}
|
||||
|
||||
.login--content__left--image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login--content__left--image--mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login--content__right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.login--content__right--title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 3.125rem;
|
||||
}
|
||||
|
||||
.login--content__right--model {
|
||||
margin-bottom: 2.2815rem;
|
||||
}
|
||||
|
||||
.login--content__right--model__title {
|
||||
font-size: 1.375rem;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
line-height: 2.9375rem;
|
||||
}
|
||||
|
||||
.login--content__right--model__desc {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.login--content__right--operate {
|
||||
margin-top: 4rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login--content__right--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;
|
||||
}
|
||||
|
||||
.login--content__right--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;
|
||||
height: 34.375rem; */
|
||||
z-index: 90;
|
||||
width: 32.5rem;
|
||||
left: 50%;
|
||||
margin-left: -16.25rem;
|
||||
height: 35rem;
|
||||
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__item3 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.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: 9rem; */
|
||||
margin-top: 6%;
|
||||
}
|
||||
|
||||
/* 适配1360*768的电脑屏幕： */
|
||||
/* 适配1366*768的电脑屏幕： */
|
||||
/* 适配1440*900的电脑屏幕： */
|
||||
/* 适配1400*1050的电脑屏幕： */
|
||||
@media screen and (min-width: 1360px) and (max-width: 1440px) {
|
||||
|
||||
/* CSS 样式 */
|
||||
.login--content {
|
||||
max-width: 70rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login--content__right--title {
|
||||
font-size: 2.45rem !important;
|
||||
margin-bottom: 2.5rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--operate__connect,
|
||||
.login--content__right--operate__made {
|
||||
width: 13rem;
|
||||
}
|
||||
|
||||
.login--content__right--model {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
/* .secure-popup {
|
||||
top: 6rem!important;
|
||||
} */
|
||||
}
|
||||
|
||||
/* 适配1024*768的电脑屏幕 */
|
||||
@media only screen and (max-width: 1024px) and (max-height: 768px) {
|
||||
|
||||
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
|
||||
.login--content {
|
||||
margin: 3rem 6.75rem 2rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--title {
|
||||
font-size: 1.7rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--model__title {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--model__desc {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--model {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--operate {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.login--content__right--operate__connect,
|
||||
.login--content__right--operate__made {
|
||||
width: 12rem !important;
|
||||
height: 3rem !important;
|
||||
line-height: 3rem !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--model {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
/* .secure-popup {
|
||||
top: 3rem!important;
|
||||
} */
|
||||
.login--content__left {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
#footer {
|
||||
margin-top: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
/* 移动端样式 */
|
||||
.login--content-wrap {
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login--content {
|
||||
margin: 0 !important;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.login--content__left {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
margin: 2rem 0 3rem;
|
||||
}
|
||||
|
||||
.login--content__left--image {
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login--content__left--image--mobile {
|
||||
display: block;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login--content__right--title {
|
||||
/* text-align: center; */
|
||||
padding: 0 1rem;
|
||||
font-size: 1.5rem !important;
|
||||
margin-bottom: 1.2rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--model {
|
||||
padding: 0 1rem;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.login--content__right--model__title {
|
||||
font-size: 1.25rem;
|
||||
line-height: 2.4;
|
||||
}
|
||||
|
||||
.login--content__right--model__desc {
|
||||
font-size: 1rem !important;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.login--content__right--operate {
|
||||
padding: 0 1rem;
|
||||
margin-bottom: 6rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.login--content__right--operate__made,
|
||||
.login--content__right--operate__connect {
|
||||
width: 10rem !important;
|
||||
}
|
||||
|
||||
.login--content__right--operate__connect {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.popup-content__item {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.popup-content__item2 {
|
||||
width: 18.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.popup-content__item3 {
|
||||
width: 18.8rem;
|
||||
}
|
||||
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
#footer {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,7 @@ body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.network {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -16,11 +17,13 @@ body {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.network--content-wrap {
|
||||
/* margin: 5rem auto; */
|
||||
max-width: 80%;
|
||||
margin: 3% auto;
|
||||
}
|
||||
|
||||
.network--content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -28,47 +31,57 @@ body {
|
||||
max-width: 90rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.network--content__left {
|
||||
width: 54%;
|
||||
}
|
||||
|
||||
.network--content__left--image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.network--content__left--image--mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.network--content__right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.network--content__right--title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 3.125rem;
|
||||
}
|
||||
|
||||
.network--content__right--model {
|
||||
margin-bottom: 2.2815rem;
|
||||
}
|
||||
|
||||
.network--content__right--model__title {
|
||||
font-size: 1.375rem;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
line-height: 2.9375rem;
|
||||
}
|
||||
|
||||
.network--content__right--model__desc {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.network--content__right--operate {
|
||||
margin-top: 4rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.network--content__right--operate__made {
|
||||
width: 17.5rem;
|
||||
height: 3.125rem;
|
||||
@@ -81,6 +94,7 @@ body {
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.network--content__right--operate__connect {
|
||||
width: 17.5rem;
|
||||
height: 3.125rem;
|
||||
@@ -96,6 +110,7 @@ body {
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@@ -106,6 +121,7 @@ body {
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.secure-popup {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 3px 0px rgba(15, 80, 178, 0.51);
|
||||
@@ -126,13 +142,32 @@ 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;
|
||||
}
|
||||
|
||||
.popup-content__item2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.popup-content__btn {
|
||||
width: 25rem;
|
||||
height: 3.375rem;
|
||||
@@ -145,6 +180,7 @@ body {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.secure-popup__close {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
@@ -152,6 +188,7 @@ body {
|
||||
top: 1.375rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 22.4rem;
|
||||
height: 3.375rem;
|
||||
@@ -162,12 +199,15 @@ body {
|
||||
color: #333333;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
.input.warning {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.input.warning::placeholder {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.inputCode {
|
||||
width: 10rem;
|
||||
height: 3.375rem;
|
||||
@@ -178,12 +218,15 @@ body {
|
||||
color: #333333;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
.inputCode.warning {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.inputCode.warning::placeholder {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#footer {
|
||||
/* margin-top: 9rem; */
|
||||
margin-top: 6%;
|
||||
@@ -194,22 +237,27 @@ body {
|
||||
/* 适配1440*900的电脑屏幕： */
|
||||
/* 适配1400*1050的电脑屏幕： */
|
||||
@media screen and (min-width: 1360px) and (max-width: 1440px) {
|
||||
|
||||
/* CSS 样式 */
|
||||
.network--content {
|
||||
max-width: 70rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.network--content__right--title {
|
||||
font-size: 2.45rem !important;
|
||||
margin-bottom: 2.5rem !important;
|
||||
}
|
||||
|
||||
.network--content__right--operate__connect,
|
||||
.network--content__right--operate__made {
|
||||
width: 13rem;
|
||||
}
|
||||
|
||||
.network--content__right--model {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
/* .secure-popup {
|
||||
top: 6rem!important;
|
||||
} */
|
||||
@@ -217,28 +265,35 @@ body {
|
||||
|
||||
/* 适配1024*768的电脑屏幕 */
|
||||
@media only screen and (max-width: 1024px) and (max-height: 768px) {
|
||||
|
||||
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
|
||||
.network--content {
|
||||
margin: 3rem 6.75rem 2rem !important;
|
||||
}
|
||||
|
||||
.network--content__right--title {
|
||||
font-size: 1.7rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.network--content__right--model__title {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.network--content__right--model__desc {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.network--content__right--model {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.network--content__right--operate {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.network--content__right--operate__connect,
|
||||
.network--content__right--operate__made {
|
||||
width: 12rem !important;
|
||||
@@ -246,15 +301,18 @@ body {
|
||||
line-height: 3rem !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.network--content__right--model {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
/* .secure-popup {
|
||||
top: 3rem!important;
|
||||
} */
|
||||
.network--content__left {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
#footer {
|
||||
margin-top: 4.5rem;
|
||||
}
|
||||
@@ -262,23 +320,28 @@ body {
|
||||
|
||||
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
/* 移动端样式 */
|
||||
.network--content-wrap {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.network--content {
|
||||
margin: 0 !important;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.network--content__left {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
margin: 2rem 0 3rem;
|
||||
}
|
||||
|
||||
.network--content__left--image {
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.network--content__left--image--mobile {
|
||||
display: block;
|
||||
width: 90%;
|
||||
@@ -291,19 +354,23 @@ body {
|
||||
font-size: 1.5rem !important;
|
||||
margin-bottom: 1.2rem !important;
|
||||
}
|
||||
|
||||
.network--content__right--model {
|
||||
padding: 0 1rem;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.network--content__right--model__title {
|
||||
font-size: 1.25rem;
|
||||
line-height: 2.4;
|
||||
}
|
||||
|
||||
.network--content__right--model__desc {
|
||||
font-size: 1rem !important;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.network--content__right--operate {
|
||||
padding: 0 1rem;
|
||||
margin-bottom: 6rem;
|
||||
@@ -311,27 +378,33 @@ body {
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.network--content__right--operate__made,
|
||||
.network--content__right--operate__connect {
|
||||
width: 10rem !important;
|
||||
}
|
||||
|
||||
.network--content__right--operate__connect {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -352,12 +425,14 @@ body {
|
||||
.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;
|
||||
@@ -369,14 +444,17 @@ body {
|
||||
color: #333333;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
.codeImage {
|
||||
width: 8rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#footer {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
35
header.html
35
header.html
@@ -26,15 +26,46 @@
|
||||
<a href="./about.html">关于我们</a>
|
||||
<div id="line5"></div>
|
||||
</div>
|
||||
<!-- <div class="home--nav__tab--item">
|
||||
<a href="./login.html">登录</a>
|
||||
<div id="line5"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="home--nav__phone">
|
||||
<!--<img class="home--nav__phone--icon" src="./images/phone-2.png">
|
||||
<div class="home--nav__phone--text">400-0000-000</div>-->
|
||||
<!-- <div class="home--nav__phone--text" onclick="toLogin()">登录</div> -->
|
||||
|
||||
<a href="login.html" class="home--nav__phone--text" id="login">登录</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
|
||||
|
||||
if (localStorage.getItem('userName')){
|
||||
|
||||
var name = localStorage.getItem('userName')
|
||||
// 获取元素引用
|
||||
const link = document.getElementById('login');
|
||||
|
||||
// 方法1: 使用innerHTML
|
||||
link.innerHTML = name;
|
||||
|
||||
// // 方法2: 使用innerText (更安全，防止XSS攻击)
|
||||
// link.innerText = name;
|
||||
//
|
||||
// // 方法3: 使用textContent
|
||||
// link.textContent = name;
|
||||
|
||||
link.href = "business.html";
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$(".home--nav__tab--item >a").each(function() {
|
||||
if ($($(this))[0].href == String(window.location))
|
||||
|
||||
BIN
images/login_bg.jpg
Normal file
BIN
images/login_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
images/login_content_left.jpg
Normal file
BIN
images/login_content_left.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
BIN
images/network_bg.jpg
Normal file
BIN
images/network_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 932 KiB |
303
login - 副本.html
Normal file
303
login - 副本.html
Normal file
@@ -0,0 +1,303 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./css/login.css">
|
||||
<title>注册</title>
|
||||
</head>
|
||||
<!-- 嵌入头部 -->
|
||||
<script type="text/javascript" src="./js/jquery.js"></script>
|
||||
<script>
|
||||
// $(function(){
|
||||
// $("#header").load("./header.html");
|
||||
// });
|
||||
// $(function(){
|
||||
// $("#footer").load("./footer.html");
|
||||
// });
|
||||
</script>
|
||||
<body>
|
||||
<div class="login">
|
||||
<!-- 头部占位 -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="login--content-wrap" style="background-color: #fff; margin-top: 5%;">
|
||||
|
||||
<img src="images/login_content_left.jpg" style="margin-right: 20px; flex: 1; " />
|
||||
|
||||
<div style="display: flex;flex-direction: column; margin: 20px 10px;width: 100%; flex: 0.6;">
|
||||
|
||||
<div style="display: flex;flex-direction: row;align-items: center;">
|
||||
|
||||
<div style="width: 6px; height:40px;background-color: #238BF0;"></div>
|
||||
<div style="color: #238BF0;font-size: 28px;margin-left: 15px;">账号登录</div>
|
||||
</div>
|
||||
|
||||
<div class="popup-content__item" style="margin-top: 40px; margin-left: 20px;">
|
||||
<input class="input" type="text" placeholder="手机号" id="loginPhone" />
|
||||
</div>
|
||||
<div class="popup-content__item" style="margin-left: 20px;">
|
||||
<input class="input" type="password" placeholder="登录密码" id="loginPsw" />
|
||||
</div>
|
||||
<div class="popup-content__item popup-content__item3" style="margin-left: 20px;">
|
||||
<input class="inputCode" type="text" placeholder="验证码" id="loginCode" />
|
||||
<div class="codeImage" style="background-color: #238BF0;margin-left: 30px;"><img id="codeImg1"
|
||||
onclick="changeCodeImg1()" class="img" style="height: 56px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;flex-direction: column; align-items: center;justify-content: center;width: 100%;
|
||||
margin-top: 20px;">
|
||||
<div class="popup-content__btn" style="background-color: #238BF0; width: 32rem; "
|
||||
onclick="login()">
|
||||
登录
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row; justify-content: space-between; width: 30.8rem !important;
|
||||
margin-top: 5px;">
|
||||
<div style="color: #238BF0;text-decoration: underline; font-size: 18px;"
|
||||
onclick="openPopup()">注册账号>>
|
||||
</div>
|
||||
<div style="color: #238BF0;font-size: 18px;" onclick="forgetPsw()">忘记密码?</div>
|
||||
|
||||
</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 class="popup-content">
|
||||
<div class="popup-content__item">注册</div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="姓名"
|
||||
id="registerName" />
|
||||
</div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="电话"
|
||||
id="registerPhone" /></div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称"
|
||||
id="registerCompany" /></div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="密码"
|
||||
id="registerPsw" />
|
||||
</div>
|
||||
<div class="popup-content__item popup-content__item2">
|
||||
<input class="inputCode" type="text" placeholder="验证码" id="registerCode" />
|
||||
<div class="codeImage"><img id="codeImg2" onclick="changeCodeImg2()" class="img"
|
||||
style="height: 56px"></div>
|
||||
</div>
|
||||
<div class="popup-content__btn" onclick="submitName()">注册</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 注册弹窗
|
||||
<div id="mask1" class="mask"></div>
|
||||
<div id="popup1" class="secure-popup" style="display:none;">
|
||||
<div class="secure-popup__close" onclick="closePopup1()">
|
||||
<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="registerName" />
|
||||
</div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="电话"
|
||||
id="registerPhone" /></div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称"
|
||||
id="registerCompany" /></div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="密码"
|
||||
id="registerPsw" />
|
||||
</div>
|
||||
<div class="popup-content__item popup-content__item2">
|
||||
<input class="inputCode" type="text" placeholder="验证码" id="registerCode" />
|
||||
<div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img"
|
||||
style="height: 56px;background-color: #f0f;"></div>
|
||||
</div>
|
||||
<div class="popup-content__btn" onclick="submitName()">注册</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<!-- 底部占位 -->
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
$('#codeImg1').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImagetype=math×tamp=' + Date
|
||||
.now());
|
||||
</script>
|
||||
<script>
|
||||
function openPopup() {
|
||||
document.getElementById("popup").style.display = "block";
|
||||
document.getElementById("mask").style.display = "block";
|
||||
$('#codeImg2').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImagetype=math×tamp=' + Date
|
||||
.now());
|
||||
}
|
||||
|
||||
function closePopup() {
|
||||
document.getElementById("popup").style.display = "none";
|
||||
document.getElementById("mask").style.display = "none";
|
||||
}
|
||||
// 忘记密码
|
||||
function forgetPsw() {
|
||||
// document.getElementById("popup1").style.display = "block";
|
||||
// document.getElementById("mask1").style.display = "block";
|
||||
// $('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math×tamp=' + Date.now());
|
||||
|
||||
alert('功能正在完善,请联系官方客服:123456789');
|
||||
}
|
||||
|
||||
function closePopup1() {
|
||||
document.getElementById("popup1").style.display = "none";
|
||||
document.getElementById("mask1").style.display = "none";
|
||||
}
|
||||
|
||||
// 登录
|
||||
function login() {
|
||||
let telephone = $('#loginPhone').val();
|
||||
let password = $('#loginPsw').val();
|
||||
let captcha = $('#registerCode').val();
|
||||
|
||||
$("#loginPhone").blur(function() {
|
||||
if (!telephone) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
$("#loginPsw").blur(function() {
|
||||
if (!password) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
$("#loginCode").blur(function() {
|
||||
if (!captcha) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
|
||||
if (!telephone) {
|
||||
document.getElementById("loginPhone").classList.add("warning");
|
||||
document.getElementById("loginPhone").setAttribute("placeholder", "请输入您的手机号");
|
||||
}
|
||||
if (!password) {
|
||||
document.getElementById("loginPsw").classList.add("warning");
|
||||
document.getElementById("loginPsw").setAttribute("placeholder", "请输入密码");
|
||||
}
|
||||
if (!captcha) {
|
||||
document.getElementById("loginCode").classList.add("warning");
|
||||
document.getElementById("loginCode").setAttribute("placeholder", "请输入验证码");
|
||||
return;
|
||||
}
|
||||
|
||||
$.post('/loulan/business/buy/9', {
|
||||
'telephone': telephone,
|
||||
'password': password,
|
||||
'captcha': captcha
|
||||
}, function(resp) {
|
||||
|
||||
if (!!resp && !!resp.result) {
|
||||
alert('正在登录...');
|
||||
|
||||
console.log("登录>>>", resp.result);
|
||||
|
||||
// window.location.href = 'login.html';
|
||||
} else {
|
||||
alert(resp.message);
|
||||
|
||||
console.log("登录>>>", resp.message);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 注册函数
|
||||
function submitName() {
|
||||
let name = $('#registerName').val();
|
||||
let telephone = $('#registerPhone').val();
|
||||
let companyName = $('#registerCompany').val();
|
||||
let password = $('#registerPsw').val();
|
||||
let captcha = $('#registerCode').val();
|
||||
|
||||
$("#registerName").blur(function() {
|
||||
if (!name) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
$("#registerPhone").blur(function() {
|
||||
if (!telephone) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
$("#inputCompany").blur(function() {
|
||||
if (!companyName) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
$("#registerPsw").blur(function() {
|
||||
if (!password) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
$("#registerCode").blur(function() {
|
||||
if (!captcha) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
|
||||
if (!name) {
|
||||
document.getElementById("registerName").classList.add("warning");
|
||||
document.getElementById("registerName").setAttribute("placeholder", "请输入您的姓名");
|
||||
}
|
||||
if (!telephone) {
|
||||
document.getElementById("registerPhone").classList.add("warning");
|
||||
document.getElementById("registerPhone").setAttribute("placeholder", "请输入您的电话");
|
||||
}
|
||||
if (!companyName) {
|
||||
document.getElementById("registerCompany").classList.add("warning");
|
||||
document.getElementById("registerCompany").setAttribute("placeholder", "请输入公司名称");
|
||||
}
|
||||
if (!companyName) {
|
||||
document.getElementById("registerPsw").classList.add("warning");
|
||||
document.getElementById("registerPsw").setAttribute("placeholder", "请输入密码");
|
||||
}
|
||||
if (!captcha) {
|
||||
document.getElementById("registerCode").classList.add("warning");
|
||||
document.getElementById("registerCode").setAttribute("placeholder", "请输入验证码");
|
||||
return;
|
||||
}
|
||||
|
||||
$.post('/loulan/business/buy/9', {
|
||||
'name': name,
|
||||
'telephone': telephone,
|
||||
'companyName': companyName,
|
||||
'password': password,
|
||||
'captcha': captcha
|
||||
}, function(resp) {
|
||||
|
||||
if (!!resp && !!resp.result) {
|
||||
alert('注册成功,正在登录...');
|
||||
console.log("注册>>>", resp.result);
|
||||
} else {
|
||||
alert(resp.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function changeCodeImg1() {
|
||||
console.log("changeCodeImg1", Date.now());
|
||||
$('#codeImg1').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' + Date
|
||||
.now());
|
||||
}
|
||||
|
||||
function changeCodeImg2() {
|
||||
|
||||
$('#codeImg2').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' + Date
|
||||
.now());
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
333
login.html
Normal file
333
login.html
Normal file
@@ -0,0 +1,333 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./css/login.css">
|
||||
<title>登录</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.19.0/js/md5.min.js"></script>
|
||||
</head>
|
||||
<!-- 嵌入头部 -->
|
||||
<script type="text/javascript" src="./js/jquery.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$("#header").load("./header.html");
|
||||
});
|
||||
$(function() {
|
||||
$("#footer").load("./footer.html");
|
||||
});
|
||||
</script>
|
||||
<body>
|
||||
<div class="login">
|
||||
<!-- 头部占位 -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="login--content-wrap" style="background-color: #fff; margin-top: 5%;">
|
||||
|
||||
<img src="images/login_content_left.jpg" style="margin-right: 20px; flex: 1; " />
|
||||
|
||||
<div style="display: flex;flex-direction: column; margin: 20px 10px;width: 100%; flex: 0.6;">
|
||||
|
||||
<div style="display: flex;flex-direction: row;align-items: center;">
|
||||
|
||||
<div style="width: 6px; height:40px;background-color: #238BF0;"></div>
|
||||
<div style="color: #238BF0;font-size: 28px;margin-left: 15px;">账号登录</div>
|
||||
</div>
|
||||
|
||||
<div class="popup-content__item" style="margin-top: 40px; margin-left: 20px;">
|
||||
<input class="input" type="text" placeholder="手机号" id="loginPhone" />
|
||||
</div>
|
||||
<div class="popup-content__item" style="margin-left: 20px;">
|
||||
<input class="input" type="password" placeholder="登录密码" id="loginPsw" />
|
||||
</div>
|
||||
<div class="popup-content__item popup-content__item3" style="margin-left: 20px;">
|
||||
<input class="inputCode" type="text" placeholder="验证码" id="loginCode" />
|
||||
<div class="codeImage" style="margin-left: 30px;"><img id="codeImg1"
|
||||
onclick="changeCodeImg1()" class="img" style="height: 56px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;flex-direction: column; align-items: center;justify-content: center;width: 100%;
|
||||
margin-top: 20px;">
|
||||
<div class="popup-content__btn" style="background-color: #238BF0; width: 32rem; "
|
||||
onclick="login()">
|
||||
登录
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row; justify-content: right; width: 30.8rem !important;
|
||||
margin-top: 5px;">
|
||||
<div style="color: #238BF0; font-size: 18px;cursor: pointer"
|
||||
onclick="openPopup()">注册</div>
|
||||
<!-- <div style="color: #238BF0;font-size: 18px;" onclick="forgetPsw()">忘记密码?</div>-->
|
||||
|
||||
</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 class="popup-content">
|
||||
<div class="popup-content__item">注册</div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="姓名"
|
||||
id="registerName" />
|
||||
</div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="电话"
|
||||
id="registerPhone" /></div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称"
|
||||
id="registerCompany" /></div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="密码"
|
||||
id="registerPsw" />
|
||||
</div>
|
||||
<div class="popup-content__item popup-content__item2">
|
||||
<input class="inputCode" type="text" placeholder="验证码" id="registerCode" />
|
||||
<div class="codeImage"><img id="codeImg2" onclick="changeCodeImg2()" class="img"
|
||||
style="height: 56px"></div>
|
||||
</div>
|
||||
<div class="popup-content__btn" onclick="submitName()">注册</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 注册弹窗
|
||||
<div id="mask1" class="mask"></div>
|
||||
<div id="popup1" class="secure-popup" style="display:none;">
|
||||
<div class="secure-popup__close" onclick="closePopup1()">
|
||||
<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="registerName" />
|
||||
</div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="电话"
|
||||
id="registerPhone" /></div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称"
|
||||
id="registerCompany" /></div>
|
||||
<div class="popup-content__item"><input class="input" type="text" placeholder="密码"
|
||||
id="registerPsw" />
|
||||
</div>
|
||||
<div class="popup-content__item popup-content__item2">
|
||||
<input class="inputCode" type="text" placeholder="验证码" id="registerCode" />
|
||||
<div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img"
|
||||
style="height: 56px;background-color: #f0f;"></div>
|
||||
</div>
|
||||
<div class="popup-content__btn" onclick="submitName()">注册</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<!-- 底部占位 -->
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
function hash(s) {
|
||||
try {
|
||||
// 1. 计算MD5哈希
|
||||
const md5Hash = md5(s);
|
||||
// 2. 返回结果（md5函数已经返回16进制字符串）
|
||||
return md5Hash;
|
||||
} catch (e) {
|
||||
console.error("加密失败:", e);
|
||||
return s;
|
||||
}
|
||||
}
|
||||
|
||||
var time1 = Date.now()
|
||||
|
||||
var time2 = ''
|
||||
|
||||
$('#codeImg1').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' + time1);
|
||||
|
||||
function openPopup() {
|
||||
document.getElementById("popup").style.display = "block";
|
||||
document.getElementById("mask").style.display = "block";
|
||||
|
||||
time2 = Date.now()
|
||||
|
||||
$('#codeImg2').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' +
|
||||
time2);
|
||||
}
|
||||
|
||||
function closePopup() {
|
||||
document.getElementById("popup").style.display = "none";
|
||||
document.getElementById("mask").style.display = "none";
|
||||
}
|
||||
// 忘记密码
|
||||
function forgetPsw() {
|
||||
// document.getElementById("popup1").style.display = "block";
|
||||
// document.getElementById("mask1").style.display = "block";
|
||||
// $('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math×tamp=' + Date.now());
|
||||
|
||||
alert('功能正在完善,请联系官方客服:123456789');
|
||||
}
|
||||
|
||||
function closePopup1() {
|
||||
document.getElementById("popup1").style.display = "none";
|
||||
document.getElementById("mask1").style.display = "none";
|
||||
}
|
||||
|
||||
// 登录
|
||||
function login() {
|
||||
let telephone = $('#loginPhone').val();
|
||||
let password = $('#loginPsw').val();
|
||||
let captcha = $('#loginCode').val();
|
||||
|
||||
$("#loginPhone").blur(function() {
|
||||
if (!telephone) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
$("#loginPsw").blur(function() {
|
||||
if (!password) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
$("#loginCode").blur(function() {
|
||||
if (!captcha) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
|
||||
if (!telephone) {
|
||||
document.getElementById("loginPhone").classList.add("warning");
|
||||
document.getElementById("loginPhone").setAttribute("placeholder", "请输入您的手机号");
|
||||
}
|
||||
if (!password) {
|
||||
document.getElementById("loginPsw").classList.add("warning");
|
||||
document.getElementById("loginPsw").setAttribute("placeholder", "请输入密码");
|
||||
}
|
||||
if (!captcha) {
|
||||
document.getElementById("loginCode").classList.add("warning");
|
||||
document.getElementById("loginCode").setAttribute("placeholder", "请输入验证码");
|
||||
return;
|
||||
}
|
||||
|
||||
$.post('http://aos.yyundong.com/ycsafe/website/login', {
|
||||
'telephone': telephone,
|
||||
'password': hash(password),
|
||||
'captcha': captcha,
|
||||
'timestamp': time1
|
||||
|
||||
}, function(resp) {
|
||||
|
||||
if (!!resp && !!resp.result) {
|
||||
window.location.href = 'serve.html';
|
||||
//
|
||||
// // 存储数据
|
||||
// localStorage.setItem('userName', resp.result.enterpriseName);
|
||||
//
|
||||
// // 读取数据
|
||||
// const value = localStorage.getItem('token');
|
||||
// const sessionValue = sessionStorage.getItem('token');
|
||||
// const userName = sessionStorage.getItem('userName');
|
||||
|
||||
// 存储数据
|
||||
localStorage.setItem('token', document.cookie);
|
||||
localStorage.setItem('userName', resp.enterpriseName+"");
|
||||
localStorage.setItem('isLogin', resp.result);
|
||||
} else {
|
||||
alert(resp.message);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 注册函数
|
||||
function submitName() {
|
||||
let name = $('#registerName').val();
|
||||
let telephone = $('#registerPhone').val();
|
||||
let companyName = $('#registerCompany').val();
|
||||
let password = $('#registerPsw').val();
|
||||
let captcha = $('#registerCode').val();
|
||||
|
||||
$("#registerName").blur(function() {
|
||||
if (!name) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
$("#registerPhone").blur(function() {
|
||||
if (!telephone) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
$("#inputCompany").blur(function() {
|
||||
if (!companyName) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
$("#registerPsw").blur(function() {
|
||||
if (!password) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
$("#registerCode").blur(function() {
|
||||
if (!captcha) {
|
||||
$(this).removeClass("warning");
|
||||
}
|
||||
});
|
||||
|
||||
if (!name) {
|
||||
document.getElementById("registerName").classList.add("warning");
|
||||
document.getElementById("registerName").setAttribute("placeholder", "请输入您的姓名");
|
||||
}
|
||||
if (!telephone) {
|
||||
document.getElementById("registerPhone").classList.add("warning");
|
||||
document.getElementById("registerPhone").setAttribute("placeholder", "请输入您的电话");
|
||||
}
|
||||
if (!companyName) {
|
||||
document.getElementById("registerCompany").classList.add("warning");
|
||||
document.getElementById("registerCompany").setAttribute("placeholder", "请输入公司名称");
|
||||
}
|
||||
if (!companyName) {
|
||||
document.getElementById("registerPsw").classList.add("warning");
|
||||
document.getElementById("registerPsw").setAttribute("placeholder", "请输入密码");
|
||||
}
|
||||
if (!captcha) {
|
||||
document.getElementById("registerCode").classList.add("warning");
|
||||
document.getElementById("registerCode").setAttribute("placeholder", "请输入验证码");
|
||||
return;
|
||||
}
|
||||
|
||||
$.post('http://aos.yyundong.com/ycsafe/website/register', {
|
||||
'name': name,
|
||||
'password': password,
|
||||
'telephone': telephone,
|
||||
'enterpriseName': companyName,
|
||||
'captcha': captcha,
|
||||
'timestamp': time2,
|
||||
}, function(resp) {
|
||||
|
||||
if (!!resp && !!resp.result) {
|
||||
alert('注册成功');
|
||||
closePopup()
|
||||
} else {
|
||||
alert(resp.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function changeCodeImg1() {
|
||||
console.log("changeCodeImg1", Date.now());
|
||||
|
||||
time1 = Date.now()
|
||||
|
||||
$('#codeImg1').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' +
|
||||
time1);
|
||||
}
|
||||
|
||||
function changeCodeImg2() {
|
||||
time2 = Date.now()
|
||||
$('#codeImg2').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' +
|
||||
time2);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
219
network.html
219
network.html
@@ -43,36 +43,218 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="network--content__right--operate">
|
||||
<div class="network--content__right--operate__made">定制我的套餐</div>
|
||||
<div class="network--content__right--operate__connect" onclick="openPopup()">联系我们</div>
|
||||
<div class="network--content__right--operate__made" onclick="customized()">定制我的套餐</div>
|
||||
<!-- <div class="network--content__right--operate__connect" onclick="openPopup()">联系我们</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()">
|
||||
<!-- <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%">
|
||||
<div class="secure-popup__close" onclick="closePopuptc()">
|
||||
<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 style="display: flex;flex-direction: column;justify-content: space-between;align-content: center">
|
||||
<div style="width: 100%">
|
||||
<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 class="popup-content__btn" onclick="submitName()">提交</div>
|
||||
<table style="width: 100%">
|
||||
<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: row;justify-content: center;align-content: center; margin-top: 20px;">
|
||||
<button type="submit"
|
||||
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>
|
||||
</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() {
|
||||
// 判断是否登录
|
||||
if(!isLogin){
|
||||
window.location.href = 'login.html';
|
||||
}else {
|
||||
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";
|
||||
@@ -130,7 +312,12 @@
|
||||
return;
|
||||
}
|
||||
|
||||
$.post('/loulan/business/buy/9', {'name':name,'telephone':telephone,'companyName':companyName,'captcha':captcha}, function (resp){
|
||||
$.post('/loulan/business/buy/9', {
|
||||
'name': name,
|
||||
'telephone': telephone,
|
||||
'companyName': companyName,
|
||||
'captcha': captcha
|
||||
}, function(resp) {
|
||||
|
||||
if (!!resp && !!resp.result) {
|
||||
alert('您的意向信息已提交，我们将尽快与您取得联系！');
|
||||
|
||||
185
secure.html
185
secure.html
@@ -48,40 +48,43 @@
|
||||
</div>
|
||||
<div class="secure-content--operate">
|
||||
<div class="secure-content--operate__made" onclick="openPopuptc()">定制我的套餐</div>
|
||||
<div class="secure-content--operate__connect" onclick="openPopup()">联系我们</div>
|
||||
<!-- <div v-if="!isLogin" 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">
|
||||
<div style="display: flex;flex-direction: column;justify-content: space-between;align-content: center">
|
||||
<div style="width: 100%">
|
||||
<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>
|
||||
<table>
|
||||
<table style="width: 100%">
|
||||
<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 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 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 class="biaozhun-taocan" data="300" fuwu="3"><img class="thumbnail_1"
|
||||
referrerpolicy="no-referrer" src="./images/unchoice.png">
|
||||
服务应用防护
|
||||
</td>
|
||||
<td>巡检+加固</td>
|
||||
@@ -89,21 +92,24 @@
|
||||
</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 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 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 class="biaozhun-taocan" data="600" fuwu="6"><img class="thumbnail_1"
|
||||
referrerpolicy="no-referrer" src="./images/unchoice.png">
|
||||
业务逻辑防护
|
||||
</td>
|
||||
<td>实时巡检+加固+合规</td>
|
||||
@@ -111,14 +117,16 @@
|
||||
</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 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 class="biaozhun-taocan" data="800" fuwu="8"><img class="thumbnail_1"
|
||||
referrerpolicy="no-referrer" src="./images/unchoice.png">
|
||||
数据安全防护
|
||||
</td>
|
||||
<td>数据安全审计/跨境数据合规检查/整改</td>
|
||||
@@ -126,33 +134,55 @@
|
||||
</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 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">
|
||||
|
||||
<div
|
||||
style="display: flex;flex-direction: row;justify-content: center;align-content: center; margin-top: 20px;">
|
||||
<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>
|
||||
</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>
|
||||
<!-- 弹窗: 联系我们 -->
|
||||
@@ -163,13 +193,17 @@
|
||||
</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 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 class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img"
|
||||
style="height: 56px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-content__btn" onclick="submitName()">提交</div>
|
||||
@@ -185,8 +219,10 @@
|
||||
<div class="popup-content__btn" id="subpopupmessageclose">关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部占位 -->
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<style>
|
||||
table,
|
||||
@@ -196,11 +232,16 @@
|
||||
border: 1px solid #ddd;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table td {
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var time = ''
|
||||
var isLogin = localStorage.getItem('isLogin')
|
||||
</script>
|
||||
<script>
|
||||
var taocan = 0;
|
||||
$('td.biaozhun-taocan').on('click', function() {
|
||||
@@ -208,13 +249,15 @@
|
||||
$('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');
|
||||
$('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');
|
||||
$(this).find('img').attr('src',
|
||||
'./images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
|
||||
}
|
||||
var gongji = 0;
|
||||
$('td.on').each(function(k, v) {
|
||||
@@ -228,13 +271,15 @@
|
||||
$('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');
|
||||
$('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');
|
||||
$(this).find('img').attr('src',
|
||||
'./images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
|
||||
}
|
||||
var gongji = 0;
|
||||
$('td.on').each(function(k, v) {
|
||||
@@ -254,27 +299,36 @@
|
||||
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;
|
||||
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 {
|
||||
// document.getElementById("tcpopup").style.display = "block";
|
||||
// }
|
||||
document.getElementById("tcpopup").style.display = "block";
|
||||
|
||||
}
|
||||
|
||||
function closePopuptc() {
|
||||
@@ -285,7 +339,9 @@
|
||||
function openPopup() {
|
||||
document.getElementById("popup").style.display = "block";
|
||||
document.getElementById("mask").style.display = "block";
|
||||
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' + Date.now());
|
||||
time = Date.now()
|
||||
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' + Date
|
||||
.now());
|
||||
}
|
||||
|
||||
function closePopup() {
|
||||
@@ -343,19 +399,28 @@
|
||||
'name': name,
|
||||
'telephone': telephone,
|
||||
'companyName': companyName,
|
||||
'captcha': captcha
|
||||
'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() {
|
||||
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' + Date.now());
|
||||
time = Date.now()
|
||||
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math×tamp=' + Date
|
||||
.now());
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
275
serve.html
275
serve.html
@@ -65,6 +65,169 @@
|
||||
</div>
|
||||
</div>
|
||||
</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;flex-direction: column;justify-content: space-between;align-content: center">
|
||||
<div style="width: 100%">
|
||||
<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>
|
||||
<table style="width: 100%">
|
||||
<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: row;justify-content: center;align-content: center; margin-top: 20px;">
|
||||
<button type="submit"
|
||||
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>
|
||||
</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="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="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 class="serve-box">
|
||||
@@ -134,48 +297,94 @@
|
||||
</div>
|
||||
|
||||
<div class="serve-box--operate">
|
||||
<div class="serve-box--operate__made">定制我的套餐</div>
|
||||
<div class="serve-box--operate__connect" onclick="openPopup()">联系我们</div>
|
||||
<div class="serve-box--operate__made" onclick="customized()" >定制我的套餐</div>
|
||||
<!-- <div class="serve-box--operate__connect" onclick="openPopup()">联系我们</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="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 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() {
|
||||
// 判断是否登录
|
||||
if(!isLogin){
|
||||
window.location.href = 'login.html';
|
||||
}else {
|
||||
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";
|
||||
|
||||
Reference in New Issue
Block a user