myTest383
1 month ago
9 changed files with 1146 additions and 176 deletions
@ -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> |
||||
@ -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%; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue