Skip to content

B
buildbank-replica
Commit e7d0a00d authored by 饶来安's avatar 饶来安
Browse files
Options

样式微调

parent c1585d8c
Hide whitespace changes
Inline Side-by-side
Showing with 1655 additions and 1571 deletions
account_detail-long.html
View file @ e7d0a00d
<!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="calendar-plugin/calendar.css" />
<link rel="stylesheet" href="calendar-plugin/calendar.css">
<title>交易明细查询</title> <title>交易明细查询</title>
<style> <style>
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif; font-family: "Microsoft Yahei", sans-serif;
font-size: 14px; font-size: 14px;
} }
body { body {
background-color: #ffffff; background-color: #ffffff;
padding: 0; padding: 0;
} }
/* 顶部导航栏 */ /* 顶部导航栏 */
.top-nav { .top-nav {
background-color: #ffffff; background-color: #ffffff;
border-bottom: 2px solid #1890ff; border-bottom: 2px solid #1890ff;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px 20px; padding: 10px 20px;
gap: 40px; gap: 40px;
} }
.top-nav a { .top-nav a {
color: #1890ff; color: #1890ff;
text-decoration: none; text-decoration: none;
font-size: 16px; font-size: 16px;
} }
/* 面包屑 */ /* 面包屑 */
.breadcrumb { .breadcrumb {
background-color: #f5f7fa; background-color: #f5f7fa;
padding: 15px 20px; padding: 15px 20px;
color: #666; color: #666;
margin: 10px 0; margin: 10px 0;
} }
/* 查询表单 */ /* 查询表单 */
.form-container { .form-container {
padding: 20px; padding: 20px;
} }
.form-title { .form-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
margin-bottom: 20px; margin-bottom: 20px;
} }
.form-row { .form-row {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
/* gap: 10px; */ /* gap: 10px; */
} }
.form-label {
.form-label { width: 120px;
width: 120px; text-align: right;
text-align: right; color: #333;
color: #333; }
}
.form-label .required {
.form-label .required { color: red;
color: red; margin-right: 4px;
margin-right: 4px; }
}
.form-input,
.form-input, .form-select {
.form-select { padding: 5px 8px;
padding: 5px 8px; border: 1px solid #d9d9d9;
border: 1px solid #d9d9d9; width: 230px;
width: 230px; }
}
.select-down-icon {
.select-down-icon { height: 31px;
height: 31px; width: 32px;
width: 32px; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: center;
justify-content: center; background-color: #f3f3f3;
background-color: #f3f3f3; border: 1px solid #d9d9d9;
border: 1px solid #d9d9d9; border-left: none;
border-left: none; }
}
.down-arrow {
.down-arrow { width: 0;
width: 0; height: 0;
height: 0; border-left: 6px solid transparent;
border-left: 6px solid transparent; border-right: 6px solid transparent;
border-right: 6px solid transparent; border-top: 8px solid #b0b0b0;
border-top: 8px solid #b0b0b0; }
}
.form-select.hide {
.form-select.hide { appearance: none;
appearance: none; }
}
.form-input.small {
.form-input.small { width: 111px;
width: 111px; }
}
.px-2 {
.px-2 { padding-left: 2px;
padding-left: 2px; padding-right: 2px;
padding-right: 2px; }
}
.form-input.x-small {
.form-input.x-small { width: 84px;
width: 84px; }
}
.form-input.wide {
.form-input.wide { width: 234px;
width: 234px; }
}
.radio-group {
.radio-group { display: flex;
display: flex; gap: 30px;
gap: 30px; margin-left: 10px;
margin-left: 10px; }
}
.radio-group label {
.radio-group label { display: flex;
display: flex; align-items: center;
align-items: center;
input {
input { margin-right: 5px;
margin-right: 5px; }
} }
}
.form-tip {
.form-tip { color: #0066b3;
color: #0066b3; margin-left: 8px;
margin-left: 8px; }
}
.form-question {
.form-question { position: relative;
cursor: pointer; cursor: pointer;
margin-left: 8px; margin-left: 8px;
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
line-height: 16px; box-sizing: content-box;
text-align: center; line-height: 16px;
border-radius: 50%; text-align: center;
background-color: #1890ff; border-radius: 50%;
color: #fff; background-color: #1890ff;
padding-left: 4px; color: #fff;
} padding-left: 4px;
}
/* 气泡框 */
.bubble { /* 气泡框 */
position: absolute; .bubble {
bottom: calc(100% + 14px); position: absolute;
left: -25px; bottom: calc(100% + 14px);
width: 150px; left: -25px;
padding: 10px 5px; width: 150px;
color: #000000; padding: 10px 5px;
border-radius: 4px; text-align: left;
border: 1px solid #62A7E3; color: #000000;
background-color: #EAF5FE; border-radius: 4px;
visibility: hidden; border: 1px solid #62a7e3;
opacity: 0; background-color: #eaf5fe;
transition: opacity 0.2s ease, visibility 0.2s ease; visibility: hidden;
z-index: 100; opacity: 0;
pointer-events: none; transition:
} opacity 0.2s ease,
visibility 0.2s ease;
/* 显示气泡 */ z-index: 100;
.form-question:hover .bubble { pointer-events: none;
visibility: visible; }
opacity: 1;
} /* 显示气泡 */
.form-question:hover .bubble {
.bubble::before { visibility: visible;
content: ''; opacity: 1;
position: absolute; }
bottom: -12px;
left: 23px; .bubble::before {
border-width: 12px 4px 0 10px; content: "";
border-style: solid; position: absolute;
border-color: #62A7E3 transparent transparent transparent; bottom: -12px;
z-index: 1; left: 23px;
} border-width: 12px 4px 0 10px;
border-style: solid;
/* 背景三角（内层，盖住部分边框） */ border-color: #62a7e3 transparent transparent transparent;
.bubble::after { z-index: 1;
content: ''; }
position: absolute;
bottom: -9px; /* 背景三角（内层，盖住部分边框） */
left: 24px; .bubble::after {
border-width: 9px 4px 0 8px; content: "";
border-style: solid; position: absolute;
border-color: #EAF5FE transparent transparent transparent; bottom: -9px;
z-index: 2; left: 24px;
} border-width: 9px 4px 0 8px;
border-style: solid;
.question1 { border-color: #eaf5fe transparent transparent transparent;
margin-left: 30px; z-index: 2;
} }
.question2 { .question1 {
margin-left: 70px; margin-left: 30px;
} }
/* 按钮组 */ .question2 {
.btn-group { margin-left: 70px;
display: flex; }
gap: 20px;
margin: 30px 0; /* 按钮组 */
} .btn-group {
display: flex;
.buttonx, gap: 20px;
.btn-group button { margin: 30px 0;
background-color: #1f93d5; }
color: #fff;
border: none; .buttonx,
border-radius: 4px; .btn-group button {
cursor: pointer; background-color: #1f93d5;
font-size: 15px; color: #fff;
height: 35px; border: none;
width: 100px; border-radius: 4px;
display: flex; cursor: pointer;
align-items: center; font-size: 15px;
justify-content: center; height: 35px;
} width: 100px;
display: flex;
.buttonx { align-items: center;
position: absolute; justify-content: center;
} }
.xx { .buttonx {
left: 140px; position: absolute;
bottom: 64px; }
} .xx {
left: 120px;
.yy { bottom: 34px;
left: 264px; }
bottom: 64px;
} .yy {
left: 245px;
.zz { bottom: 34px;
left: 390px; }
bottom: 64px;
} .zz {
left: 370px;
/* 温馨提示 */ bottom: 34px;
.tips-section { }
background-color: #f0f7ff;
padding: 10px; /* 温馨提示 */
border: 1px solid #e8e8e8; .tips-section {
} background-color: #f0f7ff;
padding: 10px;
.tips-title { border: 1px solid #e8e8e8;
color: red; }
font-weight: bold;
margin-bottom: 10px; .tips-title {
} color: red;
font-weight: bold;
.tips-section p { margin-bottom: 10px;
line-height: 1.8; }
color: #333;
} .tips-section p {
line-height: 1.8;
.mt-24 { color: #333;
margin-top: 24px; }
}
.mt-24 {
.mt-20 { margin-top: 24px;
margin-top: 20px; }
}
.mt-20 {
.date-picker { margin-top: 20px;
width: 27px; }
height: 27px;
position: relative; .date-picker {
} width: 27px;
height: 27px;
.date-picker .date-input { position: relative;
position: absolute; }
top: 0;
left: 0; .date-picker .date-input {
width: 27px; position: absolute;
height: 27px; top: 0;
opacity: 0; left: 0;
z-index: 1; width: 27px;
} height: 27px;
opacity: 0;
.date-picker .dateimg { z-index: 1;
width: 27px; }
height: 27px;
} .date-picker .dateimg {
width: 27px;
height: 27px;
}
#myForm {
position: relative;
}
</style> </style>
</head> </head>
<body> <body>
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<!-- <div class="top-nav"> <!-- <div class="top-nav">
<a href="#">账户信息查询 ∨</a> <a href="#">账户信息查询 ∨</a>
...@@ -315,213 +320,257 @@ ...@@ -315,213 +320,257 @@
</div> --> </div> -->
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="breadcrumb"> <div class="breadcrumb">当前位置：账户查询 > 账户信息查询 > 活期账户</div>
当前位置：账户查询 > 账户信息查询 > 活期账户
</div>
<!-- 查询表单 --> <!-- 查询表单 -->
<div class="form-container"> <div class="form-container">
<div class="form-title">交易明细查询</div> <div class="form-title">交易明细查询</div>
<form id="myForm"> <form id="myForm">
<div class="form-row"> <div class="form-row">
<label class="form-label"><span class="required">*</span>查询类型：</label> <label class="form-label"
<select class="form-select"> ><span class="required">*</span>查询类型：</label
<option value="1">明细</option> >
<option value="2">明细汇总</option> <select class="form-select">
</select> <option value="1">明细</option>
</div> <option value="2">明细汇总</option>
</select>
<div class="form-row"> </div>
<label class="form-label"><span class="required">*</span>起止日期：</label>
<input type="text" id="dateFrom" class="form-input small x-small" name="dateFrom" <div class="form-row">
oninput="startDate = this.value" onblur="handleBlur('dateFrom')"> <label class="form-label"
<div class="date-picker" id="sDate"> ><span class="required">*</span>起止日期：</label
<img class="dateimg" src="./images/date.png" alt="" /> >
</div> <input
<span>-</span> type="text"
<input type="text" id="dateTo" class="form-input small x-small" name="dateTo" id="dateFrom"
oninput="endDate = this.value" onblur="handleBlur('dateTo')"> class="form-input small x-small"
<div class="date-picker" id="eDate"> name="dateFrom"
<img class="dateimg" src="./images/date.png" alt="" /> oninput="startDate = this.value"
<!-- <input class="date-input dateTo" type="date" /> --> onblur="handleBlur('dateFrom')"
</div> />
<div class="radio-group"> <div class="date-picker" id="sDate">
<label><input type="radio" name="quickDate" value="90" /> 最近90天</label> <img class="dateimg" src="./images/date.png" alt="" />
<label><input type="radio" name="quickDate" value="180" /> 最近180天</label> </div>
<label><input type="radio" name="quickDate" value="365" /> 最近365天</label> <span>-</span>
</div> <input
<span class="form-question question1">？ type="text"
<span class="bubble"> id="dateTo"
请输入或选择最近10年内的日期；每次查询时间段不超过1年；日期输入标准格式20180101，表示2018年1月1日 class="form-input small x-small"
</span> name="dateTo"
</span> oninput="endDate = this.value"
</div> onblur="handleBlur('dateTo')"
<div class="form-row"> />
<label class="form-label">交易金额：</label> <div class="date-picker" id="eDate">
<input type="text" class="form-input small" name="amtFrom"> <img class="dateimg" src="./images/date.png" alt="" />
<span class="px-2">-</span> <!-- <input class="date-input dateTo" type="date" /> -->
<input type="text" class="form-input small" name="amtTo"> </div>
</div> <div class="radio-group">
<label
<div class="form-row mt-20"> ><input type="radio" name="quickDate" value="90" />
<label class="form-label">对方户名：</label> 最近90天</label
<input type="text" class="form-input wide" name="counterName"> >
</div> <label
><input type="radio" name="quickDate" value="180" />
<div class="form-row"> 最近180天</label
<label class="form-label">对方账号：</label> >
<input type="text" class="form-input wide" name="counterAccount"> <label
</div> ><input type="radio" name="quickDate" value="365" />
最近365天</label
<div class="form-row"> >
<label class="form-label">交易摘要：</label> </div>
<!-- name="summary" --> <span class="form-question question1"
<select class="form-select hide" style="width: 200px;"> >？
<option>请选择</option> <span class="bubble">
</select> 请输入或选择最近10年内的日期；每次查询时间段不超过1年；日期输入标准格式<br />
<div class="select-down-icon"> 20180101，表示2018年1月1日
<div class="down-arrow"></div> </span>
</div> </span>
</div> </div>
<div class="form-row"> <div class="form-row">
<label class="form-label">起止明细编号：</label> <label class="form-label">交易金额：</label>
<input type="text" class="form-input small" name="detailFrom"> <input type="text" class="form-input small" name="amtFrom" />
<span class="px-2">-</span> <span class="px-2">-</span>
<input type="text" class="form-input small" name="detailTo"> <input type="text" class="form-input small" name="amtTo" />
<span class="form-question">？ </div>
<span class="bubble">
仅输入起始编号时，查询该编号（含）之后的明细；仅输入截止编号时，查询该编号（含）之前的明细；起止编号同时输入时，截止编号需大于或等于起始编号。 <div class="form-row mt-20">
</span> <label class="form-label">对方户名：</label>
</span> <input type="text" class="form-input wide" name="counterName" />
</div> </div>
<!-- 按钮组 --> <div class="form-row">
<div style="height: 90px;"></div> <label class="form-label">对方账号：</label>
<input type="text" class="form-input wide" name="counterAccount" />
<button class="buttonx xx" onclick="onAccount(1)" type="submit">确定</button> </div>
</form>
<button class="buttonx yy" onclick="onAccount(2)">返回</button> <div class="form-row">
<button onclick="onAccount(3)" type="submit" class="buttonx zz" <label class="form-label">交易摘要：</label>
style="width: auto;padding: 0 20px;">异步下载查询</button> <!-- name="summary" -->
<select class="form-select hide" style="width: 200px">
<option>请选择</option>
</select>
<div class="select-down-icon">
<div class="down-arrow"></div>
</div>
</div>
<div class="form-row">
<label class="form-label">起止明细编号：</label>
<input type="text" class="form-input small" name="detailFrom" />
<span class="px-2">-</span>
<input type="text" class="form-input small" name="detailTo" />
<span class="form-question"
>？
<span class="bubble">
仅输入起始编号时，查询该编号（含）之后的明细；仅输入截止编号时，查询该编号（含）之前的明细；起止编号同时输入时，截止编号需大于或等于起始编号。
</span>
</span>
</div>
<!-- 按钮组 -->
<div style="height: 90px">
<button class="buttonx xx" onclick="onAccount(1)" type="submit">
确定
</button>
<button class="buttonx yy" onclick="onAccount(2)">返回</button>
<button
onclick="onAccount(3)"
type="submit"
class="buttonx zz"
style="width: auto; padding: 0 20px"
>
异步下载查询
</button>
</div>
</form>
</div> </div>
<!-- 温馨提示 --> <!-- 温馨提示 -->
<div class="tips-section"> <div class="tips-section">
<div class="tips-title">温馨提示</div> <div class="tips-title">温馨提示</div>
<p>1、签约汇总记账账户仅提供历史明细查询。</p> <p>1、签约汇总记账账户仅提供历史明细查询。</p>
<p>2、当前交易明细查询页面支持查询最近十年的账户明细，如需查询十年前的账户明细请联系您的开户行。</p> <p>
2、当前交易明细查询页面支持查询最近十年的账户明细，如需查询十年前的账户明细请联系您的开户行。
</p>
</div> </div>
<script src="calendar-plugin/calendar.js"></script> <script src="calendar-plugin/calendar.js"></script>
</body> </body>
</html> </html>
<script> <script>
/** /**
* 解析 YYYYMMDD 格式为 Date 对象 * 解析 YYYYMMDD 格式为 Date 对象
* @param {string} dateStr - 8位数字字符串，如 20250101 * @param {string} dateStr - 8位数字字符串，如 20250101
* @returns {Date} * @returns {Date}
*/ */
function parseYYYYMMDD(dateStr) { function parseYYYYMMDD(dateStr) {
const year = parseInt(dateStr.substring(0, 4)); const year = parseInt(dateStr.substring(0, 4));
const month = parseInt(dateStr.substring(4, 6)) - 1; const month = parseInt(dateStr.substring(4, 6)) - 1;
const day = parseInt(dateStr.substring(6, 8)); const day = parseInt(dateStr.substring(6, 8));
return new Date(year, month, day); return new Date(year, month, day);
} }
/** /**
* 检测 YYYYMMDD 格式的日期间隔是否大于365天 * 检测 YYYYMMDD 格式的日期间隔是否大于365天
* @param {string} startStr - 开始日期，如 20250101 * @param {string} startStr - 开始日期，如 20250101
* @param {string} endStr - 结束日期，如 20260101 * @param {string} endStr - 结束日期，如 20260101
* @returns {boolean} * @returns {boolean}
*/ */
function isOver365DaysYYYYMMDD(startStr, endStr) { function isOver365DaysYYYYMMDD(startStr, endStr) {
const start = parseYYYYMMDD(startStr); const start = parseYYYYMMDD(startStr);
const end = parseYYYYMMDD(endStr); const end = parseYYYYMMDD(endStr);
const diffDays = (end - start) / (1000 * 60 * 60 * 24); const diffDays = (end - start) / (1000 * 60 * 60 * 24);
return Math.abs(diffDays) > 365; return Math.abs(diffDays) > 365;
}
let startDate = "";
let endDate = "";
const handleBlur = (dateId) => {
console.log(
"handleBlur",
startDate,
endDate,
isOver365DaysYYYYMMDD(startDate, endDate),
);
if (startDate && endDate && isOver365DaysYYYYMMDD(startDate, endDate)) {
alert("起止日期间隔不能超过365天");
if (dateId === "dateFrom") {
startDate = "";
document.getElementById(dateId).value = "未选择";
} else {
endDate = "";
document.getElementById(dateId).value = "未选择";
}
const checkedQuickDate = document.querySelector(
'input[name="quickDate"]:checked',
);
checkedQuickDate && (checkedQuickDate.checked = false);
} }
};
let startDate = '';
let endDate = ''; const pickerStart = new CalendarPlugin({
trigger: "#sDate",
const handleBlur = (dateId) => { onSelect: function (date) {
console.log('handleBlur', startDate, endDate, isOver365DaysYYYYMMDD(startDate, endDate)); startDate = date.replaceAll("-", "");
if (startDate && endDate && isOver365DaysYYYYMMDD(startDate, endDate)) { handleBlur("dateFrom");
alert('起止日期间隔不能超过365天'); },
if (dateId === 'dateFrom') { });
startDate = '';
document.getElementById(dateId).value = '未选择'; const pickerEnd = new CalendarPlugin({
} else { trigger: "#eDate",
endDate = ''; onSelect: function (date) {
document.getElementById(dateId).value = '未选择'; endDate = date.replaceAll("-", "");
} handleBlur("dateTo");
const checkedQuickDate = document.querySelector('input[name="quickDate"]:checked'); },
checkedQuickDate && (checkedQuickDate.checked = false); });
}
}; // 快速日期
document.querySelectorAll("input[name=quickDate]").forEach((el) => {
const pickerStart = new CalendarPlugin({ el.addEventListener("change", () => {
trigger: '#sDate', const days = parseInt(el.value, 10);
onSelect: function (date) {
startDate = date.replaceAll('-', ''); const now = new Date();
handleBlur('dateFrom'); const year = now.getFullYear();
} const month = String(now.getMonth() + 1).padStart(2, "0"); // 补零
}); const day = String(now.getDate()).padStart(2, "0");
const formattedDate = `${year}-${month}-${day}`;
const pickerEnd = new CalendarPlugin({
trigger: '#eDate', const today = new Date(formattedDate);
onSelect: function (date) { const from = new Date(today.getTime() - days * 86400000);
endDate = date.replaceAll('-', ''); const fmt = (d) =>
handleBlur('dateTo'); d.getFullYear() +
} String(d.getMonth() + 1).padStart(2, "0") +
String(d.getDate()).padStart(2, "0");
startDate = fmt(from);
endDate = fmt(today);
document.getElementById("dateFrom").value = startDate;
document.getElementById("dateTo").value = endDate;
}); });
});
// 快速日期 const form = document.getElementById("myForm");
document.querySelectorAll('input[name=quickDate]').forEach(el => {
el.addEventListener('change', () => { function onAccount(number) {
const days = parseInt(el.value, 10); if (number == 1) {
form.addEventListener("submit", async (e) => {
const now = new Date(); e.preventDefault(); // 阻止页面刷新
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 补零 // 方式1：使用 FormData 自动搜集
const day = String(now.getDate()).padStart(2, '0'); const formData = new FormData(form);
const formattedDate = `${year}-${month}-${day}`; localStorage.setItem(
"accountQueryParams",
const today = new Date(formattedDate); JSON.stringify(Object.fromEntries(formData.entries())),
const from = new Date(today.getTime() - days * 86400000); );
const fmt = d => d.getFullYear() + String(d.getMonth() + 1).padStart(2, '0') + String(d.getDate()).padStart(2, '0'); setTimeout(() => {
startDate = fmt(from); window.location.href = "./account_list.html";
endDate = fmt(today); }, 500);
document.getElementById('dateFrom').value = startDate; });
document.getElementById('dateTo').value = endDate;
});
});
const form = document.getElementById('myForm');
function onAccount(number) {
if (number == 1) {
form.addEventListener('submit', async (e) => {
e.preventDefault(); // 阻止页面刷新
// 方式1：使用 FormData 自动搜集
const formData = new FormData(form);
localStorage.setItem('accountQueryParams', JSON.stringify(Object.fromEntries(formData.entries())));
setTimeout(() => {
window.location.href = './account_list.html'
}, 500);
});
}
if (number == 2) {
window.history.back();
}
if (number == 3) {
window.location.href = './async_detail_list.html'
}
} }
if (number == 2) {
</script> window.history.back();
\ No newline at end of file }
if (number == 3) {
window.location.href = "./async_detail_list.html";
}
}
</script>
account_detail.html
View file @ e7d0a00d
<!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="calendar-plugin/calendar.css" />
<link rel="stylesheet" href="calendar-plugin/calendar.css">
<title>交易明细查询</title> <title>交易明细查询</title>
<style> <style>
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif; font-family: "Microsoft Yahei", sans-serif;
font-size: 14px; font-size: 14px;
} }
body { body {
background-color: #ffffff; background-color: #ffffff;
padding: 0; padding: 0;
} }
/* 顶部导航栏 */ /* 顶部导航栏 */
.top-nav { .top-nav {
background-color: #ffffff; background-color: #ffffff;
border-bottom: 2px solid #1890ff; border-bottom: 2px solid #1890ff;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px 20px; padding: 10px 20px;
gap: 40px; gap: 40px;
} }
.top-nav a { .top-nav a {
color: #1890ff; color: #1890ff;
text-decoration: none; text-decoration: none;
font-size: 16px; font-size: 16px;
} }
/* 面包屑 */ /* 面包屑 */
.breadcrumb { .breadcrumb {
background-color: #f5f7fa; background-color: #f5f7fa;
padding: 15px 20px; padding: 15px 20px;
color: #666; color: #666;
margin: 10px 0; margin: 10px 0;
} }
/* 查询表单 */ /* 查询表单 */
.form-container { .form-container {
padding: 20px; padding: 20px;
} }
.form-title { .form-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
margin-bottom: 20px; margin-bottom: 20px;
} }
.form-row { .form-row {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
/* gap: 10px; */ /* gap: 10px; */
} }
.form-label {
.form-label { width: 120px;
width: 120px; text-align: right;
text-align: right; color: #333;
color: #333; }
}
.form-label .required {
.form-label .required { color: red;
color: red; margin-right: 4px;
margin-right: 4px; }
}
.form-input,
.form-input, .form-select {
.form-select { padding: 5px 8px;
padding: 5px 8px; border: 1px solid #d9d9d9;
border: 1px solid #d9d9d9; width: 230px;
width: 230px; }
}
.select-down-icon {
.select-down-icon { height: 31px;
height: 31px; width: 32px;
width: 32px; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: center;
justify-content: center; background-color: #f3f3f3;
background-color: #f3f3f3; border: 1px solid #d9d9d9;
border: 1px solid #d9d9d9; border-left: none;
border-left: none; }
}
.down-arrow {
.down-arrow { width: 0;
width: 0; height: 0;
height: 0; border-left: 6px solid transparent;
border-left: 6px solid transparent; border-right: 6px solid transparent;
border-right: 6px solid transparent; border-top: 8px solid #b0b0b0;
border-top: 8px solid #b0b0b0; }
}
.form-select.hide {
.form-select.hide { appearance: none;
appearance: none; }
}
.form-input.small {
.form-input.small { width: 111px;
width: 111px; }
}
.px-2 {
.px-2 { padding-left: 2px;
padding-left: 2px; padding-right: 2px;
padding-right: 2px; }
}
.form-input.x-small {
.form-input.x-small { width: 84px;
width: 84px; }
}
.form-input.wide {
.form-input.wide { width: 234px;
width: 234px; }
}
.radio-group {
.radio-group { display: flex;
display: flex; gap: 30px;
gap: 30px; margin-left: 10px;
margin-left: 10px; }
}
.radio-group label {
.radio-group label { display: flex;
display: flex; align-items: center;
align-items: center;
input {
input { margin-right: 5px;
margin-right: 5px; }
} }
}
.form-tip {
.form-tip { color: #0066b3;
color: #0066b3; margin-left: 8px;
margin-left: 8px; }
}
.form-question {
.form-question { position: relative;
position: relative; cursor: pointer;
cursor: pointer; margin-left: 8px;
margin-left: 8px; display: inline-block;
display: inline-block; width: 16px;
width: 16px; height: 16px;
height: 16px; box-sizing: content-box;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50%;
background-color: #1890ff; background-color: #1890ff;
color: #fff; color: #fff;
padding-left: 4px; padding-left: 4px;
transition: all 0.2s; transition: all 0.2s;
} }
/* 气泡框 */ /* 气泡框 */
.bubble { .bubble {
position: absolute; position: absolute;
bottom: calc(100% + 14px); bottom: calc(100% + 14px);
left: -25px; left: -25px;
width: 150px; width: 150px;
padding: 10px 5px; padding: 10px 5px;
text-align: left; text-align: left;
color: #000000; color: #000000;
border-radius: 4px; border-radius: 4px;
border: 1px solid #62A7E3; border: 1px solid #62a7e3;
background-color: #EAF5FE; background-color: #eaf5fe;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity 0.2s ease, visibility 0.2s ease; transition:
z-index: 100; opacity 0.2s ease,
pointer-events: none; visibility 0.2s ease;
} z-index: 100;
pointer-events: none;
/* 显示气泡 */ }
.form-question:hover .bubble {
visibility: visible; /* 显示气泡 */
opacity: 1; .form-question:hover .bubble {
} visibility: visible;
opacity: 1;
.bubble::before { }
content: '';
position: absolute; .bubble::before {
bottom: -12px; content: "";
left: 23px; position: absolute;
border-width: 12px 4px 0 10px; bottom: -12px;
border-style: solid; left: 23px;
border-color: #62A7E3 transparent transparent transparent; border-width: 12px 4px 0 10px;
z-index: 1; border-style: solid;
} border-color: #62a7e3 transparent transparent transparent;
z-index: 1;
/* 背景三角（内层，盖住部分边框） */ }
.bubble::after {
content: ''; /* 背景三角（内层，盖住部分边框） */
position: absolute; .bubble::after {
bottom: -9px; content: "";
left: 24px; position: absolute;
border-width: 9px 4px 0 8px; bottom: -9px;
border-style: solid; left: 24px;
border-color: #EAF5FE transparent transparent transparent; border-width: 9px 4px 0 8px;
z-index: 2; border-style: solid;
} border-color: #eaf5fe transparent transparent transparent;
z-index: 2;
.question1 { }
margin-left: 30px;
} .question1 {
margin-left: 30px;
.question2 { }
margin-left: 70px;
} .question2 {
margin-left: 70px;
/* 按钮组 */ }
.btn-group {
display: flex; /* 按钮组 */
gap: 20px; .btn-group {
margin: 30px 0; display: flex;
padding-left: 120px; gap: 20px;
} margin: 30px 0;
padding-left: 120px;
.buttonx, }
.btn-group button {
background-color: #1f93d5; .buttonx,
color: #fff; .btn-group button {
border: none; background-color: #1f93d5;
border-radius: 4px; color: #fff;
cursor: pointer; border: none;
font-size: 15px; border-radius: 4px;
height: 35px; cursor: pointer;
width: 100px; font-size: 15px;
display: flex; height: 35px;
align-items: center; width: 100px;
justify-content: center; display: flex;
} align-items: center;
justify-content: center;
.buttonx { }
position: absolute;
} .buttonx {
position: absolute;
.xx { }
left: 120px;
bottom: 34px; .xx {
left: 120px;
} bottom: 34px;
}
.yy {
left: 264px; .yy {
bottom: -57px; left: 245px;
} bottom: 34px;
}
.zz {
left: 390px; .zz {
bottom: -57px; left: 370px;
} bottom: 34px;
}
/* 温馨提示 */
.tips-section { /* 温馨提示 */
background-color: #f0f7ff; .tips-section {
padding: 10px; background-color: #f0f7ff;
border: 1px solid #e8e8e8; padding: 10px;
} border: 1px solid #e8e8e8;
}
.tips-title {
color: red; .tips-title {
font-weight: bold; color: red;
margin-bottom: 10px; font-weight: bold;
} margin-bottom: 10px;
}
.tips-section p {
line-height: 1.8; .tips-section p {
color: #333; line-height: 1.8;
} color: #333;
}
.mt-24 {
margin-top: 24px; .mt-24 {
} margin-top: 24px;
}
.mt-20 {
margin-top: 20px; .mt-20 {
} margin-top: 20px;
}
.date-picker {
width: 27px; .date-picker {
height: 27px; width: 27px;
position: relative; height: 27px;
} position: relative;
}
.date-picker .date-input {
position: absolute; .date-picker .date-input {
top: 0; position: absolute;
left: 0; top: 0;
width: 27px; left: 0;
height: 27px; width: 27px;
opacity: 0; height: 27px;
z-index: 1; opacity: 0;
} z-index: 1;
}
.date-picker .dateimg {
width: 27px; .date-picker .dateimg {
height: 27px; width: 27px;
} height: 27px;
}
#myForm {
position: relative; #myForm {
} position: relative;
}
</style> </style>
</head> </head>
<body> <body>
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<!-- <div class="top-nav"> <!-- <div class="top-nav">
<a href="#">账户信息查询 ∨</a> <a href="#">账户信息查询 ∨</a>
...@@ -323,131 +323,159 @@ ...@@ -323,131 +323,159 @@
</div> --> </div> -->
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="breadcrumb"> <div class="breadcrumb">当前位置：账户查询 > 账户信息查询 > 活期账户</div>
当前位置：账户查询 > 账户信息查询 > 活期账户
</div>
<!-- 查询表单 --> <!-- 查询表单 -->
<div class="form-container"> <div class="form-container">
<div class="form-title">交易明细查询</div> <div class="form-title">交易明细查询</div>
<form id="myForm"> <form id="myForm">
<div class="form-row"> <div class="form-row">
<label class="form-label"><span class="required">*</span>查询类型：</label> <label class="form-label"
<select class="form-select"> ><span class="required">*</span>查询类型：</label
<option value="1">明细</option> >
<option value="2">明细汇总</option> <select class="form-select">
</select> <option value="1">明细</option>
</div> <option value="2">明细汇总</option>
</select>
<div class="form-row"> </div>
<label class="form-label"><span class="required">*</span>起止日期：</label>
<input type="text" id="dateFrom" class="form-input small x-small" name="dateFrom" <div class="form-row">
oninput="startDate = this.value" onblur="handleBlur('dateFrom')"> <label class="form-label"
<div class="date-picker" id="sDate"> ><span class="required">*</span>起止日期：</label
<img class="dateimg" src="./images/date.png" alt="" /> >
</div> <input
<span>-</span> type="text"
<input type="text" id="dateTo" class="form-input small x-small" name="dateTo" id="dateFrom"
oninput="endDate = this.value" onblur="handleBlur('dateTo')"> class="form-input small x-small"
<div class="date-picker" id="eDate"> name="dateFrom"
<img class="dateimg" src="./images/date.png" alt="" /> oninput="startDate = this.value"
<!-- <input class="date-input dateTo" type="date" /> --> onblur="handleBlur('dateFrom')"
</div> />
<div class="radio-group"> <div class="date-picker" id="sDate">
<label><input type="radio" name="quickDate" value="7" /> 最近7天</label> <img class="dateimg" src="./images/date.png" alt="" />
<label><input type="radio" name="quickDate" value="14" /> 最近14天</label> </div>
<label><input type="radio" name="quickDate" value="30" /> 最近30天</label> <span>-</span>
</div> <input
<span class="form-question question1">？ type="text"
<span class="bubble"> id="dateTo"
请输入或选择最近一年半内日期；每次查询时间段不超过3个月；日期标准输入格式20180101，表示2018年1月1日 class="form-input small x-small"
</span> name="dateTo"
</span> oninput="endDate = this.value"
</div> onblur="handleBlur('dateTo')"
/>
<div class="date-picker" id="eDate">
<img class="dateimg" src="./images/date.png" alt="" />
<!-- <input class="date-input dateTo" type="date" /> -->
<div class="form-row"> </div>
<label class="form-label">交易金额：</label> <div class="radio-group">
<input type="text" class="form-input small" name="amtFrom"> <label
<span class="px-2">-</span> ><input type="radio" name="quickDate" value="7" /> 最近7天</label
<input type="text" class="form-input small" name="amtTo"> >
</div> <label
><input type="radio" name="quickDate" value="14" />
<div class="form-row"> 最近14天</label
<label class="form-label">交易方向：</label> >
<div class="radio-group"> <label
<label><input type="radio" name="direction" checked value="all"> 全部</label> ><input type="radio" name="quickDate" value="30" />
<label><input type="radio" name="direction" value="in"> 转入</label> 最近30天</label
<label><input type="radio" name="direction" value="out"> 转出</label> >
</div> </div>
</div> <span class="form-question question1"
>？
<div class="form-row mt-24"> <span class="bubble">
<label class="form-label">冲正交易：</label> 请输入或选择最近一年半内日期；每次查询时间段不超过3个月；日期标准输入格式<br />20180101，表示2018年1月1日
<div class="radio-group"> </span>
<label><input type="radio" name="reverse" checked> 显示</label> </span>
<label><input type="radio" name="reverse"> 不显示</label> </div>
</div>
<span class="form-question question2"> <div class="form-row">
？ <label class="form-label">交易金额：</label>
<span class="bubble"> <input type="text" class="form-input small" name="amtFrom" />
冲正交易流水查询仅供查询使用，不提供电子回执 <span class="px-2">-</span>
</span> <input type="text" class="form-input small" name="amtTo" />
</span> </div>
</div>
<div class="form-row">
<div class="form-row mt-20"> <label class="form-label">交易方向：</label>
<label class="form-label">对方户名：</label> <div class="radio-group">
<input type="text" class="form-input wide" name="counterName"> <label
<!-- <span class="form-tip">录入生僻字</span> --> ><input type="radio" name="direction" checked value="all" />
</div> 全部</label
>
<div class="form-row"> <label
<label class="form-label">对方账号：</label> ><input type="radio" name="direction" value="in" /> 转入</label
<input type="text" class="form-input wide" name="counterAccount"> >
</div> <label
><input type="radio" name="direction" value="out" /> 转出</label
<div class="form-row"> >
<label class="form-label">交易备注：</label> </div>
<input type="text" class="form-input wide" name="remark"> </div>
<!-- <span class="form-tip">录入生僻字</span> -->
</div> <div class="form-row mt-24">
<div class="form-row"> <label class="form-label">冲正交易：</label>
<label class="form-label">交易摘要：</label> <div class="radio-group">
<!-- name="summary" --> <label><input type="radio" name="reverse" checked /> 显示</label>
<select class="form-select hide" style="width: 200px;"> <label><input type="radio" name="reverse" /> 不显示</label>
<option>请选择</option> </div>
</select> <span class="form-question question2">
<div class="select-down-icon"> ？
<div class="down-arrow"></div> <span class="bubble">
</div> 冲正交易流水查询仅供查询使用，不提供电子回执
</div> </span>
<div class="form-row"> </span>
<label class="form-label">起止明细编号：</label> </div>
<input type="text" class="form-input small" name="detailFrom">
<span class="px-2">-</span> <div class="form-row mt-20">
<input type="text" class="form-input small" name="detailTo"> <label class="form-label">对方户名：</label>
<span class="form-question"> <input type="text" class="form-input wide" name="counterName" />
？ <!-- <span class="form-tip">录入生僻字</span> -->
<span class="bubble"> </div>
仅输入起始编号时，查询该编号（含）之后的明细；仅输入截止编号时，查询该编号（含）之前的明细；起止编号同时输入时，截止编号需大于或等于起始编号。
</span> <div class="form-row">
</span> <label class="form-label">对方账号：</label>
</div> <input type="text" class="form-input wide" name="counterAccount" />
</div>
<div style="height: 90px;"></div>
<div class="form-row">
<!-- 按钮组 --> <label class="form-label">交易备注：</label>
<button class="buttonx xx" onclick="onAccount(1)" type="submit">确定</button> <input type="text" class="form-input wide" name="remark" />
</form> <!-- <span class="form-tip">录入生僻字</span> -->
</div>
<div class="form-row">
<label class="form-label">交易摘要：</label>
<!-- name="summary" -->
<select class="form-select hide" style="width: 200px">
<option>请选择</option>
</select>
<div class="select-down-icon">
<div class="down-arrow"></div>
</div>
</div>
<div class="form-row">
<label class="form-label">起止明细编号：</label>
<input type="text" class="form-input small" name="detailFrom" />
<span class="px-2">-</span>
<input type="text" class="form-input small" name="detailTo" />
<span class="form-question">
？
<span class="bubble">
仅输入起始编号时，查询该编号（含）之后的明细；仅输入截止编号时，查询该编号（含）之前的明细；起止编号同时输入时，截止编号需大于或等于起始编号。
</span>
</span>
</div>
<div style="height: 90px"></div>
<!-- 按钮组 -->
<button class="buttonx xx" onclick="onAccount(1)" type="submit">
确定
</button>
<button class="buttonx yy" onclick="onAccount(2)">返回</button> <button class="buttonx yy" onclick="onAccount(2)">返回</button>
<button class="buttonx zz" onclick="onAccount(3)">查询长期</button> <button class="buttonx zz" onclick="onAccount(3)">查询长期</button>
</form>
<!-- <div class="btn-group" style="margin-top: -65px;"> <!-- <div class="btn-group" style="margin-top: -65px;">
<button onclick="onAccount(1)" type="submit">确定</button> <button onclick="onAccount(1)" type="submit">确定</button>
</div> --> </div> -->
...@@ -455,120 +483,132 @@ ...@@ -455,120 +483,132 @@
<!-- 温馨提示 --> <!-- 温馨提示 -->
<div class="tips-section"> <div class="tips-section">
<div class="tips-title">温馨提示</div> <div class="tips-title">温馨提示</div>
<p>1、签约汇总记账账户仅提供历史明细查询。</p> <p>1、签约汇总记账账户仅提供历史明细查询。</p>
<p>2、当前交易明细查询页面仅支持查询最近一年半的账户明细，“查询长期”支持查询最近十年的账户明细，如需查询十年前的账户明细请联系您的开户行。</p> <p>
2、当前交易明细查询页面仅支持查询最近一年半的账户明细，“查询长期”支持查询最近十年的账户明细，如需查询十年前的账户明细请联系您的开户行。
</p>
</div> </div>
<script src="calendar-plugin/calendar.js"></script> <script src="calendar-plugin/calendar.js"></script>
</body> </body>
</html> </html>
<script> <script>
/** /**
* 解析 YYYYMMDD 格式为 Date 对象 * 解析 YYYYMMDD 格式为 Date 对象
* @param {string} dateStr - 8位数字字符串，如 20250101 * @param {string} dateStr - 8位数字字符串，如 20250101
* @returns {Date} * @returns {Date}
*/ */
function parseYYYYMMDD(dateStr) { function parseYYYYMMDD(dateStr) {
const year = parseInt(dateStr.substring(0, 4)); const year = parseInt(dateStr.substring(0, 4));
const month = parseInt(dateStr.substring(4, 6)) - 1; const month = parseInt(dateStr.substring(4, 6)) - 1;
const day = parseInt(dateStr.substring(6, 8)); const day = parseInt(dateStr.substring(6, 8));
return new Date(year, month, day); return new Date(year, month, day);
} }
/** /**
* 检测 YYYYMMDD 格式的日期间隔是否大于365天 * 检测 YYYYMMDD 格式的日期间隔是否大于365天
* @param {string} startStr - 开始日期，如 20250101 * @param {string} startStr - 开始日期，如 20250101
* @param {string} endStr - 结束日期，如 20260101 * @param {string} endStr - 结束日期，如 20260101
* @returns {boolean} * @returns {boolean}
*/ */
function isOver365DaysYYYYMMDD(startStr, endStr) { function isOver365DaysYYYYMMDD(startStr, endStr) {
const start = parseYYYYMMDD(startStr); const start = parseYYYYMMDD(startStr);
const end = parseYYYYMMDD(endStr); const end = parseYYYYMMDD(endStr);
const diffDays = (end - start) / (1000 * 60 * 60 * 24); const diffDays = (end - start) / (1000 * 60 * 60 * 24);
return Math.abs(diffDays) > 365; return Math.abs(diffDays) > 365;
}
let startDate = "";
let endDate = "";
const handleBlur = (dateId) => {
console.log(
"handleBlur",
startDate,
endDate,
isOver365DaysYYYYMMDD(startDate, endDate),
);
if (startDate && endDate && isOver365DaysYYYYMMDD(startDate, endDate)) {
alert("起止日期间隔不能超过365天");
if (dateId === "dateFrom") {
startDate = "";
document.getElementById(dateId).value = "";
} else {
endDate = "";
document.getElementById(dateId).value = "";
}
const checkedQuickDate = document.querySelector(
'input[name="quickDate"]:checked',
);
checkedQuickDate && (checkedQuickDate.checked = false);
} }
};
let startDate = '';
let endDate = ''; const pickerStart = new CalendarPlugin({
trigger: "#sDate",
const handleBlur = (dateId) => { onSelect: function (date) {
console.log('handleBlur', startDate, endDate, isOver365DaysYYYYMMDD(startDate, endDate)); startDate = date.replaceAll("-", "");
if (startDate && endDate && isOver365DaysYYYYMMDD(startDate, endDate)) { handleBlur("dateFrom");
alert('起止日期间隔不能超过365天'); },
if (dateId === 'dateFrom') { });
startDate = '';
document.getElementById(dateId).value = ''; const pickerEnd = new CalendarPlugin({
} else { trigger: "#eDate",
endDate = ''; onSelect: function (date) {
document.getElementById(dateId).value = ''; endDate = date.replaceAll("-", "");
} handleBlur("dateTo");
const checkedQuickDate = document.querySelector('input[name="quickDate"]:checked'); },
checkedQuickDate && (checkedQuickDate.checked = false); });
}
}; // 快速日期
document.querySelectorAll("input[name=quickDate]").forEach((el) => {
const pickerStart = new CalendarPlugin({ el.addEventListener("change", () => {
trigger: '#sDate', const days = parseInt(el.value, 10);
onSelect: function (date) {
startDate = date.replaceAll('-', ''); const now = new Date();
handleBlur('dateFrom'); const year = now.getFullYear();
} const month = String(now.getMonth() + 1).padStart(2, "0"); // 补零
const day = String(now.getDate()).padStart(2, "0");
const formattedDate = `${year}-${month}-${day}`;
const today = new Date(formattedDate);
const from = new Date(today.getTime() - days * 86400000);
const fmt = (d) =>
d.getFullYear() +
String(d.getMonth() + 1).padStart(2, "0") +
String(d.getDate()).padStart(2, "0");
startDate = fmt(from);
endDate = fmt(today);
document.getElementById("dateFrom").value = startDate;
document.getElementById("dateTo").value = endDate;
}); });
});
const pickerEnd = new CalendarPlugin({
trigger: '#eDate', const form = document.getElementById("myForm");
onSelect: function (date) {
endDate = date.replaceAll('-', ''); function onAccount(number) {
handleBlur('dateTo'); if (number == 1) {
} form.addEventListener("submit", async (e) => {
}); e.preventDefault(); // 阻止页面刷新
// 方式1：使用 FormData 自动搜集
// 快速日期 const formData = new FormData(form);
document.querySelectorAll('input[name=quickDate]').forEach(el => { localStorage.setItem(
el.addEventListener('change', () => { "accountQueryParams",
const days = parseInt(el.value, 10); JSON.stringify(Object.fromEntries(formData.entries())),
);
const now = new Date(); setTimeout(() => {
const year = now.getFullYear(); window.localStorage.setItem("dateFrom", startDate);
const month = String(now.getMonth() + 1).padStart(2, '0'); // 补零 window.location.href = "./account_list.html";
const day = String(now.getDate()).padStart(2, '0'); }, 500);
const formattedDate = `${year}-${month}-${day}`; });
const today = new Date(formattedDate);
const from = new Date(today.getTime() - days * 86400000);
const fmt = d => d.getFullYear() + String(d.getMonth() + 1).padStart(2, '0') + String(d.getDate()).padStart(2, '0');
startDate = fmt(from);
endDate = fmt(today);
document.getElementById('dateFrom').value = startDate;
document.getElementById('dateTo').value = endDate;
});
});
const form = document.getElementById('myForm');
function onAccount(number) {
if (number == 1) {
form.addEventListener('submit', async (e) => {
e.preventDefault(); // 阻止页面刷新
// 方式1：使用 FormData 自动搜集
const formData = new FormData(form);
localStorage.setItem('accountQueryParams', JSON.stringify(Object.fromEntries(formData.entries())));
setTimeout(() => {
window.localStorage.setItem('dateFrom', startDate);
window.location.href = './account_list.html';
}, 500);
});
}
if (number == 2) {
window.history.back();
}
if (number == 3) {
console.log(33333)
window.location.href = './account_detail-long.html'
}
} }
if (number == 2) {
</script> window.history.back();
\ No newline at end of file }
if (number == 3) {
console.log(33333);
window.location.href = "./account_detail-long.html";
}
}
</script>
async_detail_list.html
View file @ e7d0a00d
<!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">
<title>账户交易明细</title> <title>账户交易明细</title>
<style> <style>
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif; font-family: "Microsoft Yahei", sans-serif;
font-size: 14px; font-size: 14px;
} }
body { body {
background-color: #ffffff; background-color: #ffffff;
padding: 0; padding: 0;
} }
/* 顶部导航栏 */ /* 顶部导航栏 */
.top-nav { .top-nav {
background-color: #ffffff; background-color: #ffffff;
border-bottom: 2px solid #1890ff; border-bottom: 2px solid #1890ff;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px 20px; padding: 10px 20px;
gap: 40px; gap: 40px;
} }
.top-nav a { .top-nav a {
color: #1890ff; color: #1890ff;
text-decoration: none; text-decoration: none;
font-size: 16px; font-size: 16px;
} }
/* 面包屑 */ /* 面包屑 */
.breadcrumb { .breadcrumb {
background-color: #f5f7fa; background-color: #f5f7fa;
padding: 15px 20px; padding: 15px 20px;
color: #666; color: #666;
margin: 10px 0; margin: 10px 0;
} }
/* 筛选与工具栏 */ /* 筛选与工具栏 */
.filter { .filter {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 42px; height: 42px;
margin-top: 15px; margin-top: 15px;
line-height: 42px; line-height: 42px;
padding-left: 10px; padding-left: 10px;
padding-right: 11px; padding-right: 11px;
} }
.filter .left { .filter .left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
margin-left: 15px; margin-left: 15px;
} }
/* 账户信息卡片 */ /* 账户信息卡片 */
.account-card { .account-card {
margin: 10px 0; margin: 10px 0;
border-radius: 4px; border-radius: 4px;
} }
.account-card .account-number { .account-card .account-number {
background: #fff; background: #fff;
position: relative; position: relative;
} }
.account-card .account-number::before { .account-card .account-number::before {
content: ''; content: "";
height: 2px; height: 2px;
background-color: #1f93d5; background-color: #1f93d5;
position: absolute; position: absolute;
bottom: -2px; bottom: -2px;
left: 0; left: 0;
width: 42px; width: 42px;
} }
.account-card .account-number::after { .account-card .account-number::after {
content: ''; content: "";
height: 2px; height: 2px;
background-color: #1f93d5; background-color: #1f93d5;
position: absolute; position: absolute;
bottom: -2px; bottom: -2px;
left: 158px; left: 158px;
right: 0 right: 0;
} }
.account-number div { .account-number div {
display: inline-block; display: inline-block;
border: 2px solid #1f93d5; border: 2px solid #1f93d5;
border-bottom: none; border-bottom: none;
color: #1f93d5; color: #1f93d5;
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
margin-left: 40px; margin-left: 40px;
height: 40px; height: 40px;
width: 120px; width: 120px;
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
font-weight: bold; font-weight: bold;
} }
.info-table { .info-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-top: 6px; margin-top: 6px;
border: 1px solid #62a7e3; border: 1px solid #62a7e3;
} }
.info-table td { .info-table td {
padding: 8px 15px; padding: 8px 15px;
border: none border: none;
} }
.info-table tr { .info-table tr {
border-top: 1px solid #c5d7e8; border-top: 1px solid #c5d7e8;
} }
.info-table tr:first-child { .info-table tr:first-child {
border-top: 1px solid #1f93d5; border-top: 1px solid #1f93d5;
} }
.info-table tr td:nth-child(2n+1) { .info-table tr td:nth-child(2n + 1) {
background-color: #f7fbfe; background-color: #f7fbfe;
text-align: right; text-align: right;
} }
.info-table td:first-child { .info-table td:first-child {
width: 230px; width: 230px;
background: #fafafa; background: #fafafa;
} }
/* 工具栏 */ /* 工具栏 */
.toolbar-btn { .toolbar-btn {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
padding: 10px 20px; padding: 10px 20px;
margin-top: 20px; margin-top: 20px;
} }
.toolbar-btn a { .toolbar-btn a {
color: #1890ff; color: #1890ff;
text-decoration: none; text-decoration: none;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
} }
/* 交易明细表格 */ /* 交易明细表格 */
.tablebox { .tablebox {
width: 1145px; width: 1145px;
overflow-x: auto; overflow-x: auto;
margin: auto; margin: auto;
} }
.detail-table { .detail-table {
width: calc(100% - 40px); width: calc(100% - 40px);
border-collapse: collapse; border-collapse: collapse;
border: 1px solid #62a7e3; border: 1px solid #62a7e3;
overflow: hidden; overflow: hidden;
} }
.lashen { .lashen {
transform: scaleY(1.6); transform: scaleY(1.6);
color: #1890ff; color: #1890ff;
} }
.detail-table th { .detail-table th {
background-color: #c8e0f5; background-color: #c8e0f5;
padding: 10px 5px; padding: 10px 5px;
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
} }
.detail-table tr:nth-child(2n + 1) {
background-color: #ebf4fb;
.detail-table tr:nth-child(2n+1) { }
background-color: #ebf4fb;
} .detail-table tr:nth-child(2n) {
background-color: #fff;
.detail-table tr:nth-child(2n) { }
background-color: #fff;
} .detail-table tr:hover {
background-color: #ebf4fb;
.detail-table tr:hover { }
background-color: #ebf4fb;
} .detail-table td {
padding: 0 5px;
.detail-table td { border: none;
padding: 0 5px; overflow-wrap: break-word;
border: none; }
overflow-wrap: break-word;
} .toolbar-box {
border: 1px solid #e8e8e8;
.toolbar-box { padding-bottom: 4px;
border: 1px solid #e8e8e8; }
padding-bottom: 4px;
} /* 工具栏/统计栏 */
.toolbar {
/* 工具栏/统计栏 */ display: flex;
.toolbar { justify-content: space-between;
display: flex; align-items: center;
justify-content: space-between; padding: 10px 10px 0 10px;
align-items: center; background: #f8faf5;
padding: 10px 10px 0 10px; }
background: #f8faf5;
} .toolbar-left {
display: flex;
.toolbar-left { align-items: center;
display: flex; gap: 30px;
align-items: center; }
gap: 30px;
} .toolbar-right {
display: flex;
.toolbar-right { align-items: center;
display: flex; gap: 20px;
align-items: center; }
gap: 20px;
} .toolbar a {
color: #1f93d5;
.toolbar a { text-decoration: none;
color: #1f93d5; display: flex;
text-decoration: none; align-items: center;
display: flex; gap: 4px;
align-items: center; }
gap: 4px;
} .pagination {
display: flex;
.pagination { align-items: center;
display: flex; gap: 10px;
align-items: center; }
gap: 10px;
} .pagination input {
width: 40px;
.pagination input { text-align: center;
width: 40px; border: 1px solid #d9d9d9;
text-align: center; padding: 2px;
border: 1px solid #d9d9d9; }
padding: 2px;
} /* 底部按钮组 */
.btn-group {
/* 底部按钮组 */ display: flex;
.btn-group { justify-content: center;
display: flex; gap: 20px;
justify-content: center; margin-top: 50px;
gap: 20px; margin-bottom: 100px;
margin-top: 50px; padding-left: 120px;
margin-bottom: 100px; }
padding-left: 120px;
} .btn-group button {
background-color: #1f93d5;
.btn-group button { color: #fff;
background-color: #1f93d5; border: none;
color: #fff; border-radius: 4px;
border: none; cursor: pointer;
border-radius: 4px; font-size: 15px;
cursor: pointer; height: 35px;
font-size: 15px; min-width: 100px;
height: 35px; padding: 0 20px;
min-width: 100px; display: flex;
padding: 0 20px; align-items: center;
display: flex; justify-content: center;
align-items: center; }
justify-content: center;
} .thbox {
display: flex;
.thbox { justify-content: center;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
flex-direction: column; }
align-items: center;
.flex {
} display: flex;
justify-content: space-between;
.flex { margin-top: 10px;
display: flex; width: 100%;
justify-content: space-between; }
margin-top: 10px;
width: 100%; .empty {
} padding: 30px;
text-align: center;
.empty { color: #999;
padding: 30px; border: 1px solid #dfe7ee;
text-align: center; border-top: none;
color: #999; }
border: 1px solid #dfe7ee;
border-top: none; /* 温馨提示 */
} .tips-section {
background-color: #f0f7ff;
padding: 10px;
border: 1px solid #e8e8e8;
}
/* 温馨提示 */
.tips-section { .tips-title {
background-color: #f0f7ff; color: red;
padding: 10px; font-weight: bold;
border: 1px solid #e8e8e8; margin-bottom: 10px;
} }
.tips-title { .tips-section p {
color: red; line-height: 1.8;
font-weight: bold; color: #333;
margin-bottom: 10px; }
}
/* 箭头 */
.tips-section p { .detail-table .xflex {
line-height: 1.8; display: flex;
color: #333; text-align: center;
} align-items: flex-end;
justify-content: center;
/* 箭头 */ }
.detail-table .xflex {
display: flex; .top {
text-align: center; width: 0;
align-items: flex-end; height: 0;
justify-content: center; border-left: 3px solid transparent;
} border-right: 3px solid transparent;
border-bottom: 6px solid #1f93d5;
.top { }
width: 0;
height: 0; .down {
border-left: 3px solid transparent; width: 0;
border-right: 3px solid transparent; height: 0;
border-bottom: 6px solid #1f93d5; border-left: 3px solid transparent;
} border-right: 3px solid transparent;
border-top: 6px solid #1f93d5;
.down { }
width: 0;
height: 0; .jiantou {
border-left: 3px solid transparent; display: flex;
border-right: 3px solid transparent; flex-direction: column;
border-top: 6px solid #1f93d5; justify-content: center;
} align-items: center;
gap: 2px;
.jiantou { margin-left: 2px;
display: flex; margin-bottom: 2px;
flex-direction: column; }
justify-content: center;
align-items: center; table.grid td.center {
gap: 2px; text-align: center;
margin-left: 2px; }
margin-bottom: 2px;
} table.grid td.num {
text-align: right;
table.grid td.center { font-family: Consolas, monospace;
text-align: center; }
}
/* table.grid td.col-select,
table.grid td.num {
text-align: right;
font-family: Consolas, monospace;
}
/* table.grid td.col-select,
table.grid th.col-select { table.grid th.col-select {
display: none; display: none;
} */ } */
.form-question { .form-question {
cursor: pointer; position: relative;
margin-left: 8px; cursor: pointer;
display: inline-block; margin-left: 8px;
width: 16px; display: inline-block;
height: 16px; width: 16px;
line-height: 16px; height: 16px;
text-align: center; box-sizing: content-box;
border-radius: 50%; line-height: 16px;
background-color: #1890ff; text-align: center;
color: #fff; border-radius: 50%;
padding-left: 4px; background-color: #1890ff;
} color: #fff;
padding-left: 4px;
/* 气泡框 */ }
.bubble {
position: absolute; /* 气泡框 */
bottom: calc(100% + 14px); .bubble {
left: -25px; position: absolute;
width: 150px; bottom: calc(100% + 14px);
padding: 10px 5px; left: -25px;
color: #000000; width: 150px;
border-radius: 4px; padding: 10px 5px;
border: 1px solid #62A7E3; color: #000000;
background-color: #EAF5FE; text-align: left;
visibility: hidden; border-radius: 4px;
opacity: 0; border: 1px solid #62a7e3;
transition: opacity 0.2s ease, visibility 0.2s ease; background-color: #eaf5fe;
z-index: 100; visibility: hidden;
pointer-events: none; opacity: 0;
} transition:
opacity 0.2s ease,
/* 显示气泡 */ visibility 0.2s ease;
.form-question:hover .bubble { z-index: 100;
visibility: visible; pointer-events: none;
opacity: 1; }
}
/* 显示气泡 */
.bubble::before { .form-question:hover .bubble {
content: ''; visibility: visible;
position: absolute; opacity: 1;
bottom: -12px; }
left: 23px;
border-width: 12px 4px 0 10px; .bubble::before {
border-style: solid; content: "";
border-color: #62A7E3 transparent transparent transparent; position: absolute;
z-index: 1; bottom: -12px;
} left: 23px;
border-width: 12px 4px 0 10px;
/* 背景三角（内层，盖住部分边框） */ border-style: solid;
.bubble::after { border-color: #62a7e3 transparent transparent transparent;
content: ''; z-index: 1;
position: absolute; }
bottom: -9px;
left: 24px; /* 背景三角（内层，盖住部分边框） */
border-width: 9px 4px 0 8px; .bubble::after {
border-style: solid; content: "";
border-color: #EAF5FE transparent transparent transparent; position: absolute;
z-index: 2; bottom: -9px;
} left: 24px;
border-width: 9px 4px 0 8px;
border-style: solid;
border-color: #eaf5fe transparent transparent transparent;
z-index: 2;
}
</style> </style>
</head> </head>
<body> <body>
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<!-- <div class="top-nav"> <!-- <div class="top-nav">
<a href="#">账户信息查询 ∨</a> <a href="#">账户信息查询 ∨</a>
...@@ -443,136 +441,136 @@ ...@@ -443,136 +441,136 @@
</div> --> </div> -->
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="breadcrumb"> <div class="breadcrumb">当前位置：账户查询 > 账户信息查询 > 活期账户</div>
当前位置：账户查询 > 账户信息查询 > 活期账户
</div>
<div class="filter"> <div class="filter">
<div class="left"> <div class="left">
<input type="checkbox" id="filterCheckbox" onclick="openFilter(this)"> <input type="checkbox" id="filterCheckbox" onclick="openFilter(this)" />
<span>筛选</span> <span>筛选</span>
<span class="form-question">？ <span class="form-question"
<span class="bubble"> >？
支持通过任务设定日期等要素筛选异步查询任务，设定日期仅支持按单日筛选 <span class="bubble">
</span> 支持通过任务设定日期等要素筛选异步查询任务，设定日期仅支持按单日筛选
</span> </span>
</div> </span>
</div>
</div> </div>
<!-- 交易明细表格 --> <!-- 交易明细表格 -->
<div class="tablebox"> <div class="tablebox">
<table class="detail-table grid" id="resultTable"> <table class="detail-table grid" id="resultTable">
<thead> <thead>
<tr> <tr>
<th style="width: 107px;"> <th style="width: 107px">
<div class="xflex"> <div class="xflex">
<span>任务名称 </span> <span>任务名称 </span>
<div class="jiantou"> <div class="jiantou">
<div class="top"></div> <div class="top"></div>
<div class="down"></div> <div class="down"></div>
</div> </div>
</div> </div>
</th> </th>
<th style="width: 110px;"> <th style="width: 110px">
<div class="xflex"> <div class="xflex">
<span>任务设定日期 </span> <span>任务设定日期 </span>
<div class="jiantou"> <div class="jiantou">
<div class="top"></div> <div class="top"></div>
<div class="down"></div> <div class="down"></div>
</div> </div>
</div> </div>
</th> </th>
<th style="width: 151px;"> <th style="width: 151px">
<div class="xflex"> <div class="xflex">
<span>起止日期 </span> <span>起止日期 </span>
<div class="jiantou"> <div class="jiantou">
<div class="top"></div> <div class="top"></div>
<div class="down"></div> <div class="down"></div>
</div> </div>
</div> </div>
</th> </th>
<th style="width: 150px;"> <th style="width: 150px">
<div class="xflex"> <div class="xflex">
<span>账号 </span> <span>账号 </span>
<div class="jiantou"> <div class="jiantou">
<div class="top"></div> <div class="top"></div>
<div class="down"></div> <div class="down"></div>
</div> </div>
</div> </div>
</th> </th>
<th style="width: 101px;"> <th style="width: 101px">
<div class="xflex"> <div class="xflex">
<span>批次号 </span> <span>批次号 </span>
<div class="jiantou"> <div class="jiantou">
<div class="top"></div> <div class="top"></div>
<div class="down"></div> <div class="down"></div>
</div> </div>
</div> </div>
</th> </th>
<th style="width: 86px;"> <th style="width: 86px">
<div class="xflex"> <div class="xflex">
<span>文件状态 </span> <span>文件状态 </span>
<div class="jiantou"> <div class="jiantou">
<div class="top"></div> <div class="top"></div>
<div class="down"></div> <div class="down"></div>
</div> </div>
</div> </div>
</th> </th>
<th style="width: 76px;"> <th style="width: 76px">
<div class="xflex"> <div class="xflex">
<span>下载 </span> <span>下载 </span>
<div class="jiantou"> <div class="jiantou">
<div class="top"></div> <div class="top"></div>
<div class="down"></div> <div class="down"></div>
</div> </div>
</div> </div>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody"></tbody> <tbody id="tbody"></tbody>
</table> </table>
</div> </div>
<!-- 底部按钮组 --> <!-- 底部按钮组 -->
<div class="btn-group"> <div class="btn-group">
<button onclick="onBack()">返 回</button> <button onclick="onBack()">返 回</button>
</div> </div>
<!-- 温馨提示 --> <!-- 温馨提示 -->
<div class="tips-section"> <div class="tips-section">
<div class="tips-title">温馨提示</div> <div class="tips-title">温馨提示</div>
<p>1.异步下载任务设定日期是您预约下载操作的日期，并非明细起止时间，您可以通过任务设定日期筛选已设定的异步下载任务。</p> <p>
<p>2.因文件容量较大，每次查询的明细文件分批返回，下载相邻两批次的时间间隔请勿超过4小时，否则系统缓存失效需重新查询下载。</p> 1.异步下载任务设定日期是您预约下载操作的日期，并非明细起止时间，您可以通过任务设定日期筛选已设定的异步下载任务。
</p>
<p>
2.因文件容量较大，每次查询的明细文件分批返回，下载相邻两批次的时间间隔请勿超过4小时，否则系统缓存失效需重新查询下载。
</p>
</div> </div>
</body> </body>
</html> </html>
<script> <script>
let table = document.getElementById("resultTable"); let table = document.getElementById("resultTable");
table.style.width = "1145px"; table.style.width = "1145px";
table.style.tableLayout = "fixed"; // 关键！ table.style.tableLayout = "fixed"; // 关键！
function openFilter(element) {
function openFilter(element) { var isChecked = element.checked;
var isChecked = element.checked; var rightType = document.getElementById("rightType");
var rightType = document.getElementById("rightType"); var rightTypes = document.getElementById("rightTypes");
var rightTypes = document.getElementById("rightTypes"); var conditionTB = document.getElementById("conditionTB");
var conditionTB = document.getElementById("conditionTB"); console.log("复选框当前状态:", isChecked);
console.log("复选框当前状态:", isChecked); if (isChecked) {
if (isChecked) { rightType.style.display = "none";
rightType.style.display = 'none'; rightTypes.style.display = "inline-block";
rightTypes.style.display = 'inline-block'; conditionTB.style.display = "inline-block";
conditionTB.style.display = 'inline-block'; } else {
} else { rightType.style.display = "inline-block";
rightType.style.display = 'inline-block'; rightTypes.style.display = "none";
rightTypes.style.display = 'none'; conditionTB.style.display = "none";
conditionTB.style.display = 'none';
}
} }
}
function onBack() { function onBack() {
window.history.back(); window.history.back();
} }
</script> </script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment