Compare commits
11 Commits
9aa27ccadd
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
1d353f4af3 | ||
|
|
49d281dcc3 | ||
|
|
56914bea40 | ||
|
|
8ede22e863 | ||
|
|
4742b2ab34 | ||
|
|
afc88d3426 | ||
| a63a5dbff2 | |||
| 6f1da285f0 | |||
| 4517365a85 | |||
| 63de6c2ec0 | |||
| 1e59490208 |
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
179
css/header.css
179
css/header.css
@@ -1,115 +1,134 @@
|
|||||||
.home--nav {
|
.home--nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 1em 0;
|
padding: 1em 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
/* position: fixed;
|
/* position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0; */
|
top: 0; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.home--nav__logo {
|
.home--nav__logo {
|
||||||
width: 11.125rem;
|
width: 11.125rem;
|
||||||
height: 3.5625rem;
|
height: 3.5625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home--nav__tab {
|
.home--nav__tab {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home--nav__tab--item {
|
.home--nav__tab--item {
|
||||||
margin: 0 1rem;
|
margin: 0 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
a:active, a:hover {
|
|
||||||
color: #1A6CE6;
|
a:active,
|
||||||
|
a:hover {
|
||||||
|
color: #1A6CE6;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home--nav__phone {
|
.home--nav__phone {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home--nav__phone--icon {
|
.home--nav__phone--icon {
|
||||||
width: 1.625rem;
|
width: 1.625rem;
|
||||||
height: 1.625rem;
|
height: 1.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home--nav__phone--text {
|
.home--nav__phone--text {
|
||||||
font-size: 1.5rem;
|
font-size: 1.0rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #333333;
|
color: #666;
|
||||||
padding-left: .8rem;
|
padding-left: .8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
border-bottom: 3px solid #1A6CE6;
|
border-bottom: 3px solid #1A6CE6;
|
||||||
padding-bottom: .5rem;
|
padding-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 适配1024*768的电脑屏幕 */
|
/* 适配1024*768的电脑屏幕 */
|
||||||
@media only screen and (max-width: 1024px) and (max-height: 768px) {
|
@media only screen and (max-width: 1024px) and (max-height: 768px) {
|
||||||
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
|
|
||||||
.home--nav__phone--text {
|
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
|
||||||
font-size: 1rem;
|
.home--nav__phone--text {
|
||||||
padding-left: 0.5rem;
|
font-size: 1rem;
|
||||||
}
|
padding-left: 0.5rem;
|
||||||
.home--nav__phone--icon {
|
}
|
||||||
width: 1.25rem;
|
|
||||||
height: 1.25rem;
|
.home--nav__phone--icon {
|
||||||
}
|
width: 1.25rem;
|
||||||
a {
|
height: 1.25rem;
|
||||||
font-size: 1rem;
|
}
|
||||||
}
|
|
||||||
|
a {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
|
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
/* 移动端样式 */
|
/* 移动端样式 */
|
||||||
|
|
||||||
.home--nav__tab--item{
|
.home--nav__tab--item {
|
||||||
margin: 0 .5rem;
|
margin: 0 .5rem;
|
||||||
}
|
}
|
||||||
/* .home--nav__tab{
|
|
||||||
|
/* .home--nav__tab{
|
||||||
display: none;
|
display: none;
|
||||||
} */
|
} */
|
||||||
/* .home--nav__phone--text{
|
/* .home--nav__phone--text{
|
||||||
display: none;
|
display: none;
|
||||||
} */
|
} */
|
||||||
.home--nav__logo{
|
.home--nav__logo {
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
.home--nav__tab {
|
|
||||||
padding: .5rem 0;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #333333;
|
|
||||||
display: inline-block;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.home--nav__tab {
|
||||||
|
padding: .5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
display: inline-block;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
654
css/network.css
654
css/network.css
@@ -1,150 +1,186 @@
|
|||||||
/* 公共样式 */
|
/* 公共样式 */
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network {
|
.network {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
font-family: 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif;
|
font-family: 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', Sathu, EucrosiaUPC, Arial, Helvetica, sans-serif;
|
||||||
background: url("../images/bg3.jpg");
|
background: url("../images/bg3.jpg");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
.network--content-wrap{
|
|
||||||
/* margin: 5rem auto; */
|
.network--content-wrap {
|
||||||
max-width: 80%;
|
/* margin: 5rem auto; */
|
||||||
margin: 3% auto;
|
max-width: 80%;
|
||||||
|
margin: 3% auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network--content {
|
.network--content {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
max-width: 90rem;
|
max-width: 90rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network--content__left {
|
.network--content__left {
|
||||||
width: 54%;
|
width: 54%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network--content__left--image {
|
.network--content__left--image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.network--content__left--image--mobile{
|
|
||||||
display: none;
|
.network--content__left--image--mobile {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network--content__right {
|
.network--content__right {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network--content__right--title {
|
.network--content__right--title {
|
||||||
font-size: 2.25rem;
|
font-size: 2.25rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
margin-bottom: 3.125rem;
|
margin-bottom: 3.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network--content__right--model {
|
.network--content__right--model {
|
||||||
margin-bottom: 2.2815rem;
|
margin-bottom: 2.2815rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network--content__right--model__title {
|
.network--content__right--model__title {
|
||||||
font-size: 1.375rem;
|
font-size: 1.375rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
line-height: 2.9375rem;
|
line-height: 2.9375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network--content__right--model__desc {
|
.network--content__right--model__desc {
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
line-height: 2.25rem;
|
line-height: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network--content__right--operate {
|
.network--content__right--operate {
|
||||||
margin-top: 4rem;
|
margin-top: 4rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network--content__right--operate__made {
|
.network--content__right--operate__made {
|
||||||
width: 17.5rem;
|
width: 17.5rem;
|
||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
line-height: 3.125rem;
|
line-height: 3.125rem;
|
||||||
background: rgba(38, 42, 47, .8);
|
background: rgba(38, 42, 47, .8);
|
||||||
border-radius: .25rem;
|
border-radius: .25rem;
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network--content__right--operate__connect {
|
.network--content__right--operate__connect {
|
||||||
width: 17.5rem;
|
width: 17.5rem;
|
||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
line-height: 3.125rem;
|
line-height: 3.125rem;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: .25rem;
|
border-radius: .25rem;
|
||||||
border: 3px solid rgba(38, 42, 47, 1);
|
border: 3px solid rgba(38, 42, 47, 1);
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: rgba(38, 42, 47, 1);
|
color: rgba(38, 42, 47, 1);
|
||||||
margin-left: 2.4375rem;
|
margin-left: 2.4375rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.mask{
|
|
||||||
position: fixed;
|
.mask {
|
||||||
left: 0;
|
position: fixed;
|
||||||
right: 0;
|
left: 0;
|
||||||
top: 0;
|
right: 0;
|
||||||
bottom: 0;
|
top: 0;
|
||||||
background-color: rgba(0,0,0,.3);
|
bottom: 0;
|
||||||
z-index: 1;
|
background-color: rgba(0, 0, 0, .3);
|
||||||
display: none;
|
z-index: 1;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.secure-popup {
|
.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;
|
||||||
|
}
|
||||||
|
.tc-popup {
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51);
|
box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 4.375rem 3.75rem;
|
padding: 4.375rem 3.75rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
/* top: 26%;
|
/* top: 26%;
|
||||||
left: 36%;
|
left: 36%; */
|
||||||
z-index: 90; */
|
|
||||||
/* width: 32.5rem;
|
|
||||||
height: 34.375rem; */
|
|
||||||
z-index: 90;
|
z-index: 90;
|
||||||
width: 32.5rem;
|
width: 32.5rem;
|
||||||
left: 50%;
|
left: 25%;
|
||||||
margin-left: -16.25rem;
|
margin-left: -16.25rem;
|
||||||
height: 35rem;
|
height: 40rem;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
margin-top: -17.5rem;
|
margin-top: -17.5rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.popup-content__item {
|
.popup-content__item {
|
||||||
margin-bottom: 1.25rem;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-content__item2 {
|
.popup-content__item2 {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-content__btn {
|
.popup-content__btn {
|
||||||
width: 25rem;
|
width: 25rem;
|
||||||
height: 3.375rem;
|
height: 3.375rem;
|
||||||
background: rgba(38, 42, 47, .8);
|
background: rgba(38, 42, 47, .8);
|
||||||
border-radius: .25rem;
|
border-radius: .25rem;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
line-height: 3.375rem;
|
line-height: 3.375rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.secure-popup__close {
|
.secure-popup__close {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -152,187 +188,224 @@ body {
|
|||||||
top: 1.375rem;
|
top: 1.375rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input {
|
.input {
|
||||||
width: 22.4rem;
|
width: 22.4rem;
|
||||||
height: 3.375rem;
|
height: 3.375rem;
|
||||||
border: 1px solid #999999;
|
border: 1px solid #999999;
|
||||||
border-radius: .25rem;
|
border-radius: .25rem;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
padding: 0 1.25rem;
|
padding: 0 1.25rem;
|
||||||
}
|
}
|
||||||
.input.warning{
|
|
||||||
border-color: red;
|
.input.warning {
|
||||||
|
border-color: red;
|
||||||
}
|
}
|
||||||
.input.warning::placeholder{
|
|
||||||
color:red;
|
.input.warning::placeholder {
|
||||||
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inputCode {
|
.inputCode {
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
height: 3.375rem;
|
height: 3.375rem;
|
||||||
border: 1px solid #999999;
|
border: 1px solid #999999;
|
||||||
border-radius: .25rem;
|
border-radius: .25rem;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
padding: 0 1.25rem;
|
padding: 0 1.25rem;
|
||||||
}
|
}
|
||||||
.inputCode.warning{
|
|
||||||
border-color: red;
|
.inputCode.warning {
|
||||||
|
border-color: red;
|
||||||
}
|
}
|
||||||
.inputCode.warning::placeholder{
|
|
||||||
color:red;
|
.inputCode.warning::placeholder {
|
||||||
|
color: red;
|
||||||
}
|
}
|
||||||
#footer{
|
|
||||||
/* margin-top: 9rem; */
|
#footer {
|
||||||
margin-top: 6%;
|
/* margin-top: 9rem; */
|
||||||
|
margin-top: 6%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 适配1360*768的电脑屏幕： */
|
/* 适配1360*768的电脑屏幕： */
|
||||||
/* 适配1366*768的电脑屏幕： */
|
/* 适配1366*768的电脑屏幕： */
|
||||||
/* 适配1440*900的电脑屏幕： */
|
/* 适配1440*900的电脑屏幕： */
|
||||||
/* 适配1400*1050的电脑屏幕： */
|
/* 适配1400*1050的电脑屏幕： */
|
||||||
@media screen and (min-width: 1360px) and (max-width: 1440px){
|
@media screen and (min-width: 1360px) and (max-width: 1440px) {
|
||||||
/* CSS 样式 */
|
|
||||||
.network--content {
|
/* CSS 样式 */
|
||||||
max-width: 70rem;
|
.network--content {
|
||||||
margin: 0 auto;
|
max-width: 70rem;
|
||||||
}
|
margin: 0 auto;
|
||||||
.network--content__right--title {
|
}
|
||||||
font-size: 2.45rem!important;
|
|
||||||
margin-bottom: 2.5rem!important;
|
.network--content__right--title {
|
||||||
}
|
font-size: 2.45rem !important;
|
||||||
.network--content__right--operate__connect,
|
margin-bottom: 2.5rem !important;
|
||||||
.network--content__right--operate__made {
|
}
|
||||||
width: 13rem;
|
|
||||||
}
|
.network--content__right--operate__connect,
|
||||||
.network--content__right--model {
|
.network--content__right--operate__made {
|
||||||
margin-bottom: 1.5rem!important;
|
width: 13rem;
|
||||||
}
|
}
|
||||||
/* .secure-popup {
|
|
||||||
|
.network--content__right--model {
|
||||||
|
margin-bottom: 1.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .secure-popup {
|
||||||
top: 6rem!important;
|
top: 6rem!important;
|
||||||
} */
|
} */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 适配1024*768的电脑屏幕 */
|
/* 适配1024*768的电脑屏幕 */
|
||||||
@media only screen and (max-width: 1024px) and (max-height: 768px) {
|
@media only screen and (max-width: 1024px) and (max-height: 768px) {
|
||||||
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
|
|
||||||
.network--content {
|
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
|
||||||
margin: 3rem 6.75rem 2rem!important;
|
.network--content {
|
||||||
}
|
margin: 3rem 6.75rem 2rem !important;
|
||||||
.network--content__right--title {
|
}
|
||||||
font-size: 1.7rem!important;
|
|
||||||
margin-bottom: 1rem!important;
|
.network--content__right--title {
|
||||||
}
|
font-size: 1.7rem !important;
|
||||||
.network--content__right--model__title {
|
margin-bottom: 1rem !important;
|
||||||
font-size: 1.25rem!important;
|
}
|
||||||
}
|
|
||||||
.network--content__right--model__desc {
|
.network--content__right--model__title {
|
||||||
font-size: 1rem!important;
|
font-size: 1.25rem !important;
|
||||||
}
|
}
|
||||||
.network--content__right--model{
|
|
||||||
margin-bottom: 1rem!important;
|
.network--content__right--model__desc {
|
||||||
}
|
font-size: 1rem !important;
|
||||||
.network--content__right--operate {
|
}
|
||||||
display: flex!important;
|
|
||||||
flex-wrap: nowrap!important;
|
.network--content__right--model {
|
||||||
margin-top: 0!important;
|
margin-bottom: 1rem !important;
|
||||||
}
|
}
|
||||||
.network--content__right--operate__connect,
|
|
||||||
.network--content__right--operate__made {
|
.network--content__right--operate {
|
||||||
width: 12rem!important;
|
display: flex !important;
|
||||||
height: 3rem!important;
|
flex-wrap: nowrap !important;
|
||||||
line-height: 3rem!important;
|
margin-top: 0 !important;
|
||||||
font-size: 1rem!important;
|
}
|
||||||
}
|
|
||||||
.network--content__right--model {
|
.network--content__right--operate__connect,
|
||||||
margin-bottom: 1.5rem!important;
|
.network--content__right--operate__made {
|
||||||
}
|
width: 12rem !important;
|
||||||
/* .secure-popup {
|
height: 3rem !important;
|
||||||
|
line-height: 3rem !important;
|
||||||
|
font-size: 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network--content__right--model {
|
||||||
|
margin-bottom: 1.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .secure-popup {
|
||||||
top: 3rem!important;
|
top: 3rem!important;
|
||||||
} */
|
} */
|
||||||
.network--content__left {
|
.network--content__left {
|
||||||
width: 50%!important;
|
width: 50% !important;
|
||||||
}
|
}
|
||||||
#footer{
|
|
||||||
margin-top: 4.5rem;
|
#footer {
|
||||||
}
|
margin-top: 4.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
|
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
/* 移动端样式 */
|
|
||||||
.network--content-wrap{
|
/* 移动端样式 */
|
||||||
margin: 1rem 0;
|
.network--content-wrap {
|
||||||
}
|
margin: 1rem 0;
|
||||||
.network--content {
|
}
|
||||||
margin: 0!important;
|
|
||||||
flex-wrap: wrap;
|
.network--content {
|
||||||
}
|
margin: 0 !important;
|
||||||
.network--content__left {
|
flex-wrap: wrap;
|
||||||
width: 100%!important;
|
}
|
||||||
height: auto!important;
|
|
||||||
margin: 2rem 0 3rem;
|
.network--content__left {
|
||||||
}
|
width: 100% !important;
|
||||||
.network--content__left--image {
|
height: auto !important;
|
||||||
display: none;
|
margin: 2rem 0 3rem;
|
||||||
width: 100%;
|
}
|
||||||
}
|
|
||||||
.network--content__left--image--mobile{
|
.network--content__left--image {
|
||||||
display: block;
|
display: none;
|
||||||
width: 90%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
}
|
||||||
}
|
|
||||||
|
.network--content__left--image--mobile {
|
||||||
.network--content__right--title {
|
display: block;
|
||||||
/* text-align: center; */
|
width: 90%;
|
||||||
padding: 0 1rem;
|
margin: 0 auto;
|
||||||
font-size: 1.5rem!important;
|
}
|
||||||
margin-bottom: 1.2rem!important;
|
|
||||||
}
|
.network--content__right--title {
|
||||||
.network--content__right--model {
|
/* text-align: center; */
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
font-size: 1.25rem;
|
font-size: 1.5rem !important;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.2rem !important;
|
||||||
}
|
}
|
||||||
.network--content__right--model__title{
|
|
||||||
font-size: 1.25rem;
|
.network--content__right--model {
|
||||||
line-height: 2.4;
|
padding: 0 1rem;
|
||||||
}
|
font-size: 1.25rem;
|
||||||
.network--content__right--model__desc {
|
margin-bottom: 1.5rem;
|
||||||
font-size: 1rem!important;
|
}
|
||||||
line-height: 1.6;
|
|
||||||
}
|
.network--content__right--model__title {
|
||||||
.network--content__right--operate {
|
font-size: 1.25rem;
|
||||||
padding: 0 1rem;
|
line-height: 2.4;
|
||||||
margin-bottom: 6rem;
|
}
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
.network--content__right--model__desc {
|
||||||
margin-top: 1rem;
|
font-size: 1rem !important;
|
||||||
}
|
line-height: 1.6;
|
||||||
.network--content__right--operate__made,
|
}
|
||||||
.network--content__right--operate__connect {
|
|
||||||
width: 10rem!important;
|
.network--content__right--operate {
|
||||||
}
|
padding: 0 1rem;
|
||||||
.network--content__right--operate__connect {
|
margin-bottom: 6rem;
|
||||||
margin-left: 0!important;
|
display: flex;
|
||||||
}
|
justify-content: space-between;
|
||||||
.popup-content__item {
|
margin-top: 1rem;
|
||||||
margin-bottom: 1.25rem;
|
}
|
||||||
}
|
|
||||||
.popup-content__item2 {
|
.network--content__right--operate__made,
|
||||||
width: 18.8rem;
|
.network--content__right--operate__connect {
|
||||||
display: flex;
|
width: 10rem !important;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: space-between;
|
|
||||||
}
|
.network--content__right--operate__connect {
|
||||||
.popup-content__btn {
|
margin-left: 0 !important;
|
||||||
width: 18.8rem!important;
|
}
|
||||||
height: 3rem!important;
|
|
||||||
line-height: 3rem!important;
|
.popup-content__item {
|
||||||
}
|
margin-bottom: 1.25rem;
|
||||||
/* .secure-popup{
|
}
|
||||||
|
|
||||||
|
.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;
|
padding: 2.5rem 1.5rem!important;
|
||||||
top: 15%!important;
|
top: 15%!important;
|
||||||
left: 4%!important;
|
left: 4%!important;
|
||||||
@@ -341,43 +414,48 @@ body {
|
|||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
} */
|
} */
|
||||||
.secure-popup {
|
.secure-popup {
|
||||||
width: 22rem;
|
width: 22rem;
|
||||||
height: 30rem;
|
height: 30rem;
|
||||||
FONT-WEIGHT: 200;
|
FONT-WEIGHT: 200;
|
||||||
margin-left: -11rem;
|
margin-left: -11rem;
|
||||||
margin-top: -15rem;
|
margin-top: -15rem;
|
||||||
padding: 3rem 1.5rem 0 1.5rem;
|
padding: 3rem 1.5rem 0 1.5rem;
|
||||||
}
|
}
|
||||||
.secure-popup__close {
|
.secure-popup__close {
|
||||||
top: 1.075rem!important;
|
top: 1.075rem!important;
|
||||||
}
|
}
|
||||||
.input {
|
|
||||||
width: 16.3rem!important;
|
.input {
|
||||||
height: 3rem!important;
|
width: 16.3rem !important;
|
||||||
line-height: 3rem!important;
|
height: 3rem !important;
|
||||||
font-size: 1rem;
|
line-height: 3rem !important;
|
||||||
}
|
font-size: 1rem;
|
||||||
.inputCode {
|
}
|
||||||
width: 6.3rem;
|
|
||||||
height: 3rem;
|
.inputCode {
|
||||||
height: 3rem!important;
|
width: 6.3rem;
|
||||||
border: 1px solid #999999;
|
height: 3rem;
|
||||||
border-radius: .25rem;
|
height: 3rem !important;
|
||||||
font-size: 1rem;
|
border: 1px solid #999999;
|
||||||
font-weight: 400;
|
border-radius: .25rem;
|
||||||
color: #333333;
|
font-size: 1rem;
|
||||||
padding: 0 1.25rem;
|
font-weight: 400;
|
||||||
}
|
color: #333333;
|
||||||
.codeImage {
|
padding: 0 1.25rem;
|
||||||
width: 8rem;
|
}
|
||||||
height: 3rem;
|
|
||||||
}
|
.codeImage {
|
||||||
.img {
|
width: 8rem;
|
||||||
width: 100%;
|
height: 3rem;
|
||||||
height: 100%;
|
}
|
||||||
}
|
|
||||||
#footer{
|
.img {
|
||||||
margin-top: 1rem;
|
width: 100%;
|
||||||
}
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -19,9 +19,9 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: url("../images/img2.png");
|
background: url("../images/img2.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: right top;
|
background-position: right top;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
} */
|
} */
|
||||||
.secure-content-wrap{
|
.secure-content-wrap{
|
||||||
/* padding: 8rem 0; */
|
/* padding: 8rem 0; */
|
||||||
@@ -133,6 +133,23 @@ body {
|
|||||||
margin-top: -17.5rem;
|
margin-top: -17.5rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
.tc-popup {
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 4.375rem 3.75rem;
|
||||||
|
position: fixed;
|
||||||
|
/* top: 26%;
|
||||||
|
left: 36%; */
|
||||||
|
z-index: 90;
|
||||||
|
width: 32.5rem;
|
||||||
|
left: 25%;
|
||||||
|
margin-left: -16.25rem;
|
||||||
|
height: 40rem;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -17.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
.popup-content__item {
|
.popup-content__item {
|
||||||
margin-bottom: 1.25rem;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
@@ -353,4 +370,4 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -228,6 +228,23 @@ body {
|
|||||||
margin-top: -17.5rem;
|
margin-top: -17.5rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
.tc-popup {
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 4.375rem 3.75rem;
|
||||||
|
position: fixed;
|
||||||
|
/* top: 26%;
|
||||||
|
left: 36%; */
|
||||||
|
z-index: 90;
|
||||||
|
width: 32.5rem;
|
||||||
|
left: 25%;
|
||||||
|
margin-left: -16.25rem;
|
||||||
|
height: 40rem;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -17.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
.popup-content__item {
|
.popup-content__item {
|
||||||
margin-bottom: 1.25rem;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
@@ -429,7 +446,7 @@ body {
|
|||||||
line-height: 1.5 !important;
|
line-height: 1.5 !important;
|
||||||
padding: 1rem 0 !important;
|
padding: 1rem 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.serve--secure{
|
.serve--secure{
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
}
|
}
|
||||||
@@ -491,7 +508,7 @@ body {
|
|||||||
.serve-package-wrap{
|
.serve-package-wrap{
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
.serve-package__left,
|
.serve-package__left,
|
||||||
.serve-package__left--desc__price{
|
.serve-package__left--desc__price{
|
||||||
width: auto!important;
|
width: auto!important;
|
||||||
margin: 1.625rem 0!important;
|
margin: 1.625rem 0!important;
|
||||||
@@ -500,7 +517,7 @@ body {
|
|||||||
}
|
}
|
||||||
.serve-package__left--desc {
|
.serve-package__left--desc {
|
||||||
padding-top: 1.5rem;
|
padding-top: 1.5rem;
|
||||||
}
|
}
|
||||||
.serve-package__left {
|
.serve-package__left {
|
||||||
padding: 0 1.5rem!important;
|
padding: 0 1.5rem!important;
|
||||||
}
|
}
|
||||||
@@ -601,4 +618,4 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
115
header.html
115
header.html
@@ -1,46 +1,77 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title></title>
|
<title></title>
|
||||||
<link rel="stylesheet" type="text/css" href="./css/header.css">
|
<link rel="stylesheet" type="text/css" href="./css/header.css">
|
||||||
</head>
|
</head>
|
||||||
<script type="text/javascript" src = "./js/jquery.js"></script>
|
<script type="text/javascript" src="./js/jquery.js"></script>
|
||||||
<body>
|
<body>
|
||||||
<div class="home--nav">
|
<div class="home--nav">
|
||||||
<img class="home--nav__logo" src="images/logo-2.png" />
|
<img class="home--nav__logo" src="images/logo-2.png" />
|
||||||
<div class="home--nav__tab">
|
<div class="home--nav__tab">
|
||||||
<div class="home--nav__tab--item">
|
<div class="home--nav__tab--item">
|
||||||
<a href="./serve.html">安全微服务</a>
|
<a href="./serve.html">安全微服务</a>
|
||||||
<div id="line2"></div>
|
<div id="line2"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="home--nav__tab--item">
|
<div class="home--nav__tab--item">
|
||||||
<a href="./secure.html">独立站安全</a>
|
<a href="./secure.html">独立站安全</a>
|
||||||
<div id="line3"></div>
|
<div id="line3"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="home--nav__tab--item">
|
<div class="home--nav__tab--item">
|
||||||
<a href="./network.html">政务外网安全</a>
|
<a href="./network.html">政务外网安全</a>
|
||||||
<div id="line4"></div>
|
<div id="line4"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="home--nav__tab--item">
|
<div class="home--nav__tab--item">
|
||||||
<a href="./about.html">关于我们</a>
|
<a href="./about.html">关于我们</a>
|
||||||
<div id="line5"></div>
|
<div id="line5"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- <div class="home--nav__tab--item">
|
||||||
<div class="home--nav__phone">
|
<a href="./login.html">登录</a>
|
||||||
<!--<img class="home--nav__phone--icon" src="./images/phone-2.png">
|
<div id="line5"></div>
|
||||||
<div class="home--nav__phone--text">400-0000-000</div>-->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="home--nav__phone">
|
||||||
|
<!-- <div class="home--nav__phone--text" onclick="toLogin()">登录</div> -->
|
||||||
|
|
||||||
</body>
|
<a href="login.html" class="home--nav__phone--text" id="login">登录</a>
|
||||||
<script>
|
|
||||||
$(document).ready(function () {
|
</div>
|
||||||
$(".home--nav__tab--item >a").each(function () {
|
</div>
|
||||||
if ($($(this))[0].href == String(window.location))
|
|
||||||
$(this).parent().addClass('active');
|
</body>
|
||||||
console.log($(this).parent())
|
<script>
|
||||||
});
|
|
||||||
});
|
|
||||||
</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))
|
||||||
|
$(this).parent().addClass('active');
|
||||||
|
console.log($(this).parent())
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
BIN
images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png
Normal file
BIN
images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 504 B |
BIN
images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png
Normal file
BIN
images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 556 B |
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 |
BIN
images/unchoice.png
Normal file
BIN
images/unchoice.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 594 B |
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>
|
||||||
451
network.html
451
network.html
@@ -1,147 +1,334 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="./css/network.css">
|
<link rel="stylesheet" href="./css/network.css">
|
||||||
<title>政务外网安全</title>
|
<title>政务外网安全</title>
|
||||||
</head>
|
</head>
|
||||||
<!-- 嵌入头部 -->
|
<!-- 嵌入头部 -->
|
||||||
<script type="text/javascript" src = "./js/jquery.js"></script>
|
<script type="text/javascript" src="./js/jquery.js"></script>
|
||||||
<script>
|
<script>
|
||||||
$(function(){
|
$(function(){
|
||||||
$("#header").load("./header.html");
|
$("#header").load("./header.html");
|
||||||
});
|
});
|
||||||
$(function(){
|
$(function(){
|
||||||
$("#footer").load("./footer.html");
|
$("#footer").load("./footer.html");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<div class="network">
|
<div class="network">
|
||||||
<!-- 头部占位 -->
|
<!-- 头部占位 -->
|
||||||
<div id="header"></div>
|
<div id="header"></div>
|
||||||
|
|
||||||
<!-- 页面内容 -->
|
<!-- 页面内容 -->
|
||||||
<div class="network--content-wrap">
|
<div class="network--content-wrap">
|
||||||
<div class="network--content">
|
<div class="network--content">
|
||||||
<div class="network--content__left">
|
<div class="network--content__left">
|
||||||
<img class="network--content__left--image" src="./images/img5.png">
|
<img class="network--content__left--image" src="./images/img5.png">
|
||||||
<img class="network--content__left--image--mobile" src="./images/img5-mobile.png">
|
<img class="network--content__left--image--mobile" src="./images/img5-mobile.png">
|
||||||
</div>
|
</div>
|
||||||
<div class="network--content__right">
|
<div class="network--content__right">
|
||||||
<div class="network--content__right--title">政务外网服务器安全</div>
|
<div class="network--content__right--title">政务外网服务器安全</div>
|
||||||
<div class="network--content__right--model">
|
<div class="network--content__right--model">
|
||||||
<div class="network--content__right--model__title">安全运维模式转变</div>
|
<div class="network--content__right--model__title">安全运维模式转变</div>
|
||||||
<div class="network--content__right--model__desc">因安全运维团队不能入场，政务外网安全</div>
|
<div class="network--content__right--model__desc">因安全运维团队不能入场，政务外网安全</div>
|
||||||
<div class="network--content__right--model__desc">运维转为线上</div>
|
<div class="network--content__right--model__desc">运维转为线上</div>
|
||||||
|
</div>
|
||||||
|
<div class="network--content__right--model">
|
||||||
|
<div class="network--content__right--model__title">安全微服务套餐模式</div>
|
||||||
|
<div class="network--content__right--model__desc">模式转变，向政务外网服务器提供安</div>
|
||||||
|
<div class="network--content__right--model__desc">全微服务套餐</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="network--content__right--operate">
|
||||||
|
<div class="network--content__right--operate__made" onclick="customized()">定制我的套餐</div>
|
||||||
|
<!-- <div class="network--content__right--operate__connect" onclick="openPopup()">联系我们</div>-->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="network--content__right--model">
|
|
||||||
<div class="network--content__right--model__title">安全微服务套餐模式</div>
|
<!-- 弹窗 -->
|
||||||
<div class="network--content__right--model__desc">模式转变，向政务外网服务器提供安</div>
|
<!-- <div id="mask" class="mask"></div>-->
|
||||||
<div class="network--content__right--model__desc">全微服务套餐</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 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>
|
</div>
|
||||||
</div>
|
</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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 弹窗 -->
|
<!-- 底部占位 -->
|
||||||
<div id="mask" class="mask"></div>
|
<div id="footer"></div>
|
||||||
<div id="popup" class="secure-popup" style="display:none;">
|
</div>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- 底部占位 -->
|
</body>
|
||||||
<div id="footer"></div>
|
<style>
|
||||||
</div>
|
table,
|
||||||
</body>
|
td,
|
||||||
|
th {
|
||||||
<script>
|
text-align: center;
|
||||||
function openPopup() {
|
border: 1px solid #ddd;
|
||||||
document.getElementById("popup").style.display = "block";
|
border-collapse: collapse;
|
||||||
document.getElementById("mask").style.display = "block";
|
|
||||||
$('#codeImg').attr('src', './loulan/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('/loulan/business/buy/9', {'name':name,'telephone':telephone,'companyName':companyName,'captcha':captcha}, function (resp){
|
|
||||||
|
|
||||||
if (!!resp && !!resp.result) {
|
table td {
|
||||||
alert('您的意向信息已提交，我们将尽快与您取得联系！');
|
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 {
|
} else {
|
||||||
alert(resp.message);
|
$(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);
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
function changeCodeImg() {
|
$('td.biaozhun-taocan2').on('click', function() {
|
||||||
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math×tamp=' + Date.now());
|
if (taocan == 0 || taocan == 1) {
|
||||||
}
|
$('td.biaozhun-taocan2').find('img').attr('src', './images/unchoice.png');
|
||||||
</script>
|
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";
|
||||||
|
$('#codeImg').attr('src', './loulan/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('/loulan/business/buy/9', {
|
||||||
|
'name': name,
|
||||||
|
'telephone': telephone,
|
||||||
|
'companyName': companyName,
|
||||||
|
'captcha': captcha
|
||||||
|
}, function(resp) {
|
||||||
|
|
||||||
|
if (!!resp && !!resp.result) {
|
||||||
|
alert('您的意向信息已提交，我们将尽快与您取得联系！');
|
||||||
|
} else {
|
||||||
|
alert(resp.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeCodeImg() {
|
||||||
|
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math×tamp=' + Date.now());
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
559
secure.html
559
secure.html
@@ -1,169 +1,426 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="./css/secure.css">
|
<link rel="stylesheet" href="./css/secure.css">
|
||||||
<title>独立站安全</title>
|
<title>独立站安全</title>
|
||||||
</head>
|
</head>
|
||||||
<!-- 嵌入头部 -->
|
<!-- 嵌入头部 -->
|
||||||
<script type="text/javascript" src = "./js/jquery.js"></script>
|
<script type="text/javascript" src="./js/jquery.js"></script>
|
||||||
<script>
|
<script>
|
||||||
$(function(){
|
$(function () {
|
||||||
$("#header").load("./header.html");
|
$("#header").load("./header.html");
|
||||||
});
|
});
|
||||||
$(function(){
|
$(function () {
|
||||||
$("#footer").load("./footer.html");
|
$("#footer").load("./footer.html");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<div class="secure">
|
<div class="secure">
|
||||||
<div class="secure-box">
|
<div class="secure-box">
|
||||||
<!-- 头部占位 -->
|
<!-- 头部占位 -->
|
||||||
<div id="header"></div>
|
<div id="header"></div>
|
||||||
|
<!-- 页面内容 -->
|
||||||
|
<div class="secure-content-wrap">
|
||||||
|
<div class="secure-content">
|
||||||
|
|
||||||
<!-- 页面内容 -->
|
<div class="secure-content__left">
|
||||||
<div class="secure-content-wrap">
|
<div class="secure-content--title">三种模式总有一款适合您</div>
|
||||||
<div class="secure-content">
|
<div class="secure-content--model">
|
||||||
|
<div class="secure-content--model__item">
|
||||||
<div class="secure-content__left">
|
<div class="secure-content--model__round"></div>
|
||||||
<div class="secure-content--title">三种模式总有一款适合您</div>
|
<div>如果您有独立站，可以直接购买安全微服务套餐</div>
|
||||||
<div class="secure-content--model">
|
</div>
|
||||||
<div class="secure-content--model__item">
|
<div class="secure-content--model__item">
|
||||||
<div class="secure-content--model__round"></div>
|
<div class="secure-content--model__round"></div>
|
||||||
<div>您可以只购买我们的独立站</div>
|
<div>您购买安全微服务套餐，我们送您独立站</div>
|
||||||
|
</div>
|
||||||
|
<div class="secure-content--model__item">
|
||||||
|
<div class="secure-content--model__round"></div>
|
||||||
|
<div>您可以只购买我们的独立站</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="secure-content__right">
|
||||||
|
<img class="secure--content__right--image" src="./images/img2.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="secure-content--operate">
|
||||||
|
<div class="secure-content--operate__made" onclick="openPopuptc()">定制我的套餐</div>
|
||||||
|
<!-- <div v-if="!isLogin" class="secure-content--operate__connect" onclick="openPopup()">联系我们</div>-->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="secure-content--model__item">
|
|
||||||
<div class="secure-content--model__round"></div>
|
|
||||||
<div>如果您已有独立站，可以直接购买安全微服务套餐</div>
|
|
||||||
</div>
|
|
||||||
<div class="secure-content--model__item">
|
|
||||||
<div class="secure-content--model__round"></div>
|
|
||||||
<div>若您购买安全微服务套餐，我们还将赠送您独立站</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="secure-content__right">
|
<!-- 弹窗: 定制我的套餐 -->
|
||||||
<img class="secure--content__right--image" src="./images/img2.png">
|
<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 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>
|
||||||
</div>
|
<!-- 弹窗: 联系我们 -->
|
||||||
|
<div id="mask" class="mask"></div>
|
||||||
<div class="secure-content--operate">
|
<div id="popup" class="secure-popup" style="display:none;">
|
||||||
<div class="secure-content--operate__made">定制我的套餐</div>
|
<div class="secure-popup__close" onclick="closePopup()">
|
||||||
<div class="secure-content--operate__connect" onclick="openPopup()">联系我们</div>
|
<img src="./images/close.png">
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<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 id="footer"></div>
|
</div>
|
||||||
|
<div class="popup-content__item popup-content__item2">
|
||||||
<!-- 弹窗 -->
|
<input class="inputCode" type="text" placeholder="验证码" id="inputCode" />
|
||||||
<div id="mask" class="mask"></div>
|
<div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img"
|
||||||
<div id="popup" class="secure-popup" style="display:none;">
|
style="height: 56px">
|
||||||
<div class="secure-popup__close" onclick="closePopup()">
|
</div>
|
||||||
<img src="./images/close.png">
|
</div>
|
||||||
</div>
|
<div class="popup-content__btn" onclick="submitName()">提交</div>
|
||||||
<div class="popup-content">
|
</div>
|
||||||
<div class="popup-content__item">请留下您的联系方式，我们会尽快与您联系</div>
|
|
||||||
<div class="popup-content__item"><input class="input" type="text" placeholder="姓名" id="inputName" /></div>
|
|
||||||
<div class="popup-content__item"><input class="input" type="text" placeholder="电话" id="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>
|
||||||
<div class="popup-content__btn" onclick="submitName()">提交</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>
|
||||||
|
|
||||||
<div id="subpopup" class="secure-popup" style="display:none;">
|
</body>
|
||||||
<div class="secure-popup__close" onclick="closePopupsub()">
|
<style>
|
||||||
<img src="./images/close.png">
|
table,
|
||||||
</div>
|
td,
|
||||||
<div class="popup-content">
|
th {
|
||||||
<div id="subpopupmessage" class="popup-content__item"></div>
|
text-align: center;
|
||||||
<div class="popup-content__btn" id="subpopupmessageclose">关闭</div>
|
border: 1px solid #ddd;
|
||||||
</div>
|
border-collapse: collapse;
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
function openPopup() {
|
|
||||||
document.getElementById("popup").style.display = "block";
|
|
||||||
document.getElementById("mask").style.display = "block";
|
|
||||||
$('#codeImg').attr('src', './loulan/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){
|
table td {
|
||||||
document.getElementById("inputName").classList.add("warning");
|
text-align: left;
|
||||||
document.getElementById("inputName").setAttribute("placeholder","请输入您的姓名");
|
padding-left: 5px;
|
||||||
}
|
|
||||||
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('/loulan/business/buy/9', {'name':name,'telephone':telephone,'companyName':companyName,'captcha':captcha}, function (resp){
|
|
||||||
|
|
||||||
if (!!resp && !!resp.result) {
|
|
||||||
alert('您的意向信息已提交，我们将尽快与您取得联系！');
|
|
||||||
} else {
|
|
||||||
alert(resp.message);
|
|
||||||
}
|
}
|
||||||
});
|
</style>
|
||||||
}
|
<script>
|
||||||
|
var time = ''
|
||||||
|
var isLogin = localStorage.getItem('isLogin')
|
||||||
|
</script>
|
||||||
|
<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);
|
||||||
|
});
|
||||||
|
|
||||||
function changeCodeImg() {
|
$('td.biaozhun-taocan2').on('click', function() {
|
||||||
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math×tamp=' + Date.now());
|
if (taocan == 0 || taocan == 1) {
|
||||||
}
|
$('td.biaozhun-taocan2').find('img').attr('src', './images/unchoice.png');
|
||||||
</script>
|
taocan = 2;
|
||||||
|
}
|
||||||
|
$('td.biaozhun-taocan').removeClass('on').addClass('off').find('img').attr('src',
|
||||||
|
'./images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
|
||||||
|
if ($(this).hasClass('on')) {
|
||||||
|
$(this).removeClass('on').addClass('off');
|
||||||
|
$(this).find('img').attr('src', './images/unchoice.png');
|
||||||
|
} else {
|
||||||
|
$(this).removeClass('off').addClass('on');
|
||||||
|
$(this).find('img').attr('src',
|
||||||
|
'./images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
|
||||||
|
}
|
||||||
|
var gongji = 0;
|
||||||
|
$('td.on').each(function(k, v) {
|
||||||
|
gongji += parseInt($(v).attr('data'));
|
||||||
|
});
|
||||||
|
$('span.gongji').text(gongji);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
function submit_myModal2_btn() {
|
||||||
|
var data = $('#myModal2_form').serialize();
|
||||||
|
var fuwu = '';
|
||||||
|
$('td.on').each(function(k, v) {
|
||||||
|
if (fuwu) {
|
||||||
|
fuwu += ',';
|
||||||
|
}
|
||||||
|
fuwu += $(v).attr('fuwu');
|
||||||
|
});
|
||||||
|
data += '&fuwu=' + fuwu;
|
||||||
|
|
||||||
|
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() {
|
||||||
|
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>
|
</html>
|
||||||
|
|||||||
277
serve.html
277
serve.html
@@ -65,6 +65,169 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
<!-- 低部和第二部分放一起是为了第二张背景图可以连低部一起 -->
|
<!-- 低部和第二部分放一起是为了第二张背景图可以连低部一起 -->
|
||||||
<div class="serve-box">
|
<div class="serve-box">
|
||||||
@@ -134,48 +297,94 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="serve-box--operate">
|
<div class="serve-box--operate">
|
||||||
<div class="serve-box--operate__made">定制我的套餐</div>
|
<div class="serve-box--operate__made" onclick="customized()" >定制我的套餐</div>
|
||||||
<div class="serve-box--operate__connect" onclick="openPopup()">联系我们</div>
|
<!-- <div class="serve-box--operate__connect" onclick="openPopup()">联系我们</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="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 id="footer"></div>
|
||||||
</div>
|
|
||||||
|
</div>
|
||||||
</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>
|
<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() {
|
function openPopup() {
|
||||||
document.getElementById("popup").style.display = "block";
|
document.getElementById("popup").style.display = "block";
|
||||||
document.getElementById("mask").style.display = "block";
|
document.getElementById("mask").style.display = "block";
|
||||||
|
|||||||
Reference in New Issue
Block a user