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