Skip to content

B
buildbank-replica
Commit bf964ba3 authored by 秦垚玲's avatar 秦垚玲
Browse files
Options

fix:账户相关页面

parent 3d1ea3cc
Hide whitespace changes
Inline Side-by-side
Showing with 742 additions and 0 deletions
account_balance.html 0 → 100644
View file @ bf964ba3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>活期账户列表</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
font-size: 14px;
}
body {
background-color: #ffffff;
padding: 0;
}
/* 面包屑导航 */
.breadcrumb {
background-color: #f5f7fa;
padding: 15px 20px;
color: #333;
font-size: 16px;
}
/* 账户列表表格 */
.account-table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
.account-table th {
background-color: #cce5ff;
color: #000;
padding: 15px 10px;
text-align: center;
border: 1px solid #b3d9ff;
font-weight: bold;
font-size: 20px;
}
.account-table td {
padding: 15px 10px;
border: 1px solid #b3d9ff;
text-align: center;
font-size: 20px;
}
.account-table tr:nth-child(2) td:first-child {
color: #800080;
text-align: left;
}
.account-table .total-row td:first-child {
text-align: right;
font-weight: bold;
}
/* 工具栏 */
.toolbar {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
padding: 10px 20px;
background: #f8faf5;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
}
.toolbar a {
color: #1890ff;
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
font-size: 20px;
}
/* 底部按钮 */
.bottom-btn {
display: flex;
justify-content: center;
margin: 30px 0;
}
.bottom-btn button {
background-color: #1890ff;
color: #fff;
border: none;
padding: 15px 60px;
border-radius: 4px;
cursor: pointer;
font-size: 20px;
}
</style>
</head>
<body>
<!-- 面包屑导航 -->
<div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > <span style="color: #000; font-weight: bold;">活期账户</span>
</div>
<!-- 账户列表表格 -->
<table class="account-table">
<thead>
<tr>
<th>账号 ➤</th>
<th>账户名称 ➤</th>
<th>币种 ➤</th>
<th>行别 ➤</th>
<th>账面余额 ➤</th>
<th>冻结金额 ➤</th>
<th>可用余额 ➤</th>
<th>本日存入金额 ➤</th>
<th>本日支取金额 ➤</th>
<th>账户状态 ➤</th>
<th>账户控制状态 ➤</th>
<th>>></th>
</tr>
</thead>
<tbody>
<tr>
<td>42050123704500001941</td>
<td>中科软盈（武汉）科技有限公司</td>
<td>人民币元</td>
<td>中国建设银行</td>
<td>775, 342.62</td>
<td>0.00</td>
<td>775, 342.62</td>
<td>0.00</td>
<td>0.00</td>
<td>正常</td>
<td>正常</td>
<td></td>
</tr>
<tr class="total-row">
<td>小计：</td>
<td></td>
<td>人民币元</td>
<td></td>
<td>775, 342.62</td>
<td>0.00</td>
<td>775, 342.62</td>
<td>0.00</td>
<td>0.00</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<!-- 工具栏 -->
<div class="toolbar">
<a href="#"><span>⇩</span> 下载全部</a>
<a href="#"><span>🖨️</span> 打印</a>
</div>
<!-- 底部按钮 -->
<div class="bottom-btn">
<button>返回</button>
</div>
</body>
</html>
\ No newline at end of file
account_info.html 0 → 100644
View file @ bf964ba3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>账户信息详情</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
font-size: 14px;
}
body {
background-color: #ffffff;
padding: 0;
}
/* 面包屑导航 */
.breadcrumb {
background-color: #f5f7fa;
padding: 15px 20px;
color: #333;
}
/* 账户标题栏 */
.account-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 2px solid #1890ff;
}
.account-header .account-number {
border: 1px solid #1890ff;
color: #1890ff;
padding: 10px 15px;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
}
.account-header .收支视图 {
color: #1890ff;
text-decoration: none;
font-size: 16px;
display: flex;
align-items: center;
gap: 4px;
}
/* 信息表格 */
.info-table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
.info-table td {
padding: 12px 20px;
border: 1px solid #d0e8ff;
}
.info-table td:first-child {
width: 20%;
text-align: right;
color: #333;
font-weight: 500;
}
.info-table td:nth-child(2) {
width: 30%;
}
.info-table td:nth-child(3) {
width: 20%;
text-align: right;
color: #333;
font-weight: 500;
}
.info-table td:nth-child(4) {
width: 30%;
}
/* 工具栏 */
.toolbar {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
padding: 10px 20px;
background: #f8faf5;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
}
.toolbar a {
color: #1890ff;
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
font-size: 16px;
}
/* 底部按钮组 */
.bottom-btn-group {
display: flex;
justify-content: center;
gap: 30px;
margin: 30px 0;
}
.bottom-btn-group button {
background-color: #1890ff;
color: #fff;
border: none;
padding: 15px 30px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<!-- 面包屑导航 -->
<div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > 活期账户
</div>
<!-- 账户标题栏 -->
<div class="account-header">
<div class="account-number">4205****1941</div>
<a href="#" class="收支视图">
<span>⦿</span> 收支视图
</a>
</div>
<!-- 账户信息表格 -->
<table class="info-table">
<tr>
<td>账户名称：</td>
<td>中科软盈（武汉）科技有限公司</td>
<td>账号：</td>
<td>42050123704500001941</td>
</tr>
<tr>
<td>开户机构名称：</td>
<td>中国建设银行股份有限公司武汉南湖大道支行</td>
<td>开户机构号：</td>
<td>420237045</td>
</tr>
<tr>
<td>本外币合一标识：</td>
<td>-</td>
<td>币种：</td>
<td>人民币元</td>
</tr>
<tr>
<td>钞/汇：</td>
<td>钞</td>
<td>账户性质：</td>
<td>基本户</td>
</tr>
<tr>
<td>外币资金性质：</td>
<td>-</td>
<td>账户状态：</td>
<td>正常</td>
</tr>
<tr>
<td>可用余额：</td>
<td>775, 342.62</td>
<td>开户日期：</td>
<td>20251105</td>
</tr>
<tr>
<td>开户许可证号/基本存款账户编号信息：</td>
<td>J5210095814103</td>
<td>银行联行号：</td>
<td>105521000764</td>
</tr>
</table>
<!-- 工具栏 -->
<div class="toolbar">
<a href="#"><span>↓</span> 下载全部</a>
<a href="#"><span>🖨️</span> 打印</a>
</div>
<!-- 底部按钮组 -->
<div class="bottom-btn-group">
<button>基本存款信息打印</button>
<button>存款人查询密码打印</button>
<button onclick="onBack()">返回</button>
</div>
</body>
</html>
<script>
function onBack() {
window.history.back();
}
</script>
\ No newline at end of file
history_balance.html 0 → 100644
View file @ bf964ba3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>活期账户历史余额查询结果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
font-size: 14px;
}
body {
background-color: #ffffff;
padding: 0;
}
/* 面包屑导航 */
.breadcrumb {
background-color: #f5f7fa;
padding: 15px 20px;
color: #333;
font-size: 16px;
}
.breadcrumb span {
color: #000;
font-weight: bold;
}
/* 账户标题栏 */
.account-header {
padding: 20px;
border-bottom: 2px solid #1890ff;
}
.account-header .account-number {
border: 1px solid #1890ff;
color: #1890ff;
padding: 10px 15px;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
display: inline-block;
}
/* 账户信息表格 */
.info-table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
.info-table td {
padding: 12px 20px;
border: 1px solid #d0e8ff;
}
.info-table td:first-child {
width: 20%;
text-align: right;
color: #333;
font-weight: 500;
}
.info-table td:nth-child(2) {
width: 30%;
}
.info-table td:nth-child(3) {
width: 20%;
text-align: right;
color: #333;
font-weight: 500;
}
.info-table td:nth-child(4) {
width: 30%;
}
/* 余额列表表格 */
.balance-table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
.balance-table th {
background-color: #cce5ff;
color: #000;
padding: 15px 10px;
text-align: center;
border: 1px solid #b3d9ff;
font-weight: bold;
font-size: 18px;
}
.balance-table td {
padding: 15px 10px;
border: 1px solid #b3d9ff;
text-align: center;
font-size: 18px;
}
/* 工具栏 */
.toolbar {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
padding: 10px 20px;
background: #f8faf5;
border-top: 1px solid #e8e8e8;
}
.toolbar a {
color: #1890ff;
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
font-size: 16px;
}
/* 分页栏 */
.pagination-bar {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: #f8faf5;
border-top: 1px solid #e8e8e8;
}
.pagination-bar a {
color: #1890ff;
text-decoration: none;
font-size: 16px;
}
.pagination-bar input {
width: 40px;
text-align: center;
border: 1px solid #d9d9d9;
padding: 2px;
}
/* 底部按钮 */
.bottom-btn {
display: flex;
justify-content: center;
margin: 30px 0;
}
.bottom-btn button {
background-color: #1890ff;
color: #fff;
border: none;
padding: 15px 50px;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
}
</style>
</head>
<body>
<!-- 面包屑导航 -->
<div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > <span>活期账户</span>
</div>
<!-- 账户标题栏 -->
<div class="account-header">
<div class="account-number">4205****1941</div>
</div>
<!-- 账户信息表格 -->
<table class="info-table">
<tr>
<td>账户名称：</td>
<td>中科软盈（武汉）科技有限公司</td>
<td>账　　号：</td>
<td>42050123704500001941</td>
</tr>
<tr>
<td>开户行名称：</td>
<td>中国建设银行股份有限公司武汉南湖大道支行</td>
<td>账户状态：</td>
<td>正常</td>
</tr>
</table>
<!-- 余额列表表格 -->
<table class="balance-table">
<thead>
<tr>
<th>日期 ➤</th>
<th>币种 ➤</th>
<th>钞/汇 ➤</th>
<th>账面余额 ➤</th>
<th>可用余额 ➤</th>
<th>账户控制状态 ➤</th>
<th>>></th>
</tr>
</thead>
<tbody>
<tr>
<td>20260428</td>
<td>人民币元</td>
<td>钞</td>
<td>775, 342.62</td>
<td>775, 342.62</td>
<td>正常</td>
<td></td>
</tr>
</tbody>
</table>
<!-- 工具栏 -->
<div class="toolbar">
<a href="#"><span>↓</span> 下载当前页</a>
<a href="#"><span>↓</span> 下载全部</a>
<a href="#"><span>🖨️</span> 打印</a>
</div>
<!-- 分页栏 -->
<div class="pagination-bar">
<a href="#">首页</a>
<a href="#">&lt;上一页</a>
<span style="border: 1px solid #ddd; padding: 2px 8px; background: #fff;">1</span>
<a href="#">下一页&gt;</a>
<span>共1页</span>
<span>到第 <input type="text"> 页</span>
<a href="#">转至</a>
</div>
<!-- 底部按钮 -->
<div class="bottom-btn">
<button onclick="onBack()">返回</button>
</div>
</body>
</html>
<script>
function onBack() {
window.history.back();
}
</script>
\ No newline at end of file
history_query.html 0 → 100644
View file @ bf964ba3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>活期账户历史余额查询</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
font-size: 14px;
}
body {
background-color: #ffffff;
padding: 0;
}
/* 面包屑导航 */
.breadcrumb {
background-color: #f5f7fa;
padding: 15px 20px;
color: #333;
font-size: 16px;
}
.breadcrumb span {
color: #000;
font-weight: bold;
}
/* 查询表单 */
.form-container {
padding: 30px 50px;
}
.form-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 30px;
}
.form-row {
display: flex;
align-items: center;
margin-bottom: 25px;
gap: 10px;
}
.form-label {
width: 120px;
text-align: right;
font-size: 18px;
}
.form-label .required {
color: #ff4d4f;
margin-right: 4px;
}
.form-select,
.form-input {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 2px;
font-size: 18px;
}
.form-input {
width: 120px;
}
.calendar-icon {
color: #1890ff;
font-size: 20px;
}
.help-icon {
color: #1890ff;
font-size: 20px;
cursor: pointer;
}
/* 按钮组 */
.btn-group {
display: flex;
justify-content: center;
gap: 30px;
margin: 40px 0;
}
.btn-group button {
background-color: #1890ff;
color: #fff;
border: none;
padding: 15px 50px;
border-radius: 4px;
cursor: pointer;
font-size: 20px;
}
/* 温馨提示 */
.tips-section {
background-color: #f5faff;
padding: 20px;
border: 1px solid #e8e8e8;
}
.tips-title {
color: #ff4d4f;
font-weight: bold;
margin-bottom: 10px;
font-size: 20px;
}
.tips-section p {
line-height: 1.8;
color: #333;
font-size: 18px;
}
</style>
</head>
<body>
<!-- 面包屑导航 -->
<div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > <span>活期账户</span>
</div>
<!-- 查询表单 -->
<div class="form-container">
<div class="form-title">活期账户历史余额查询</div>
<div class="form-row">
<label class="form-label"><span class="required">*</span>查询类型：</label>
<select class="form-select">
<option>按账户查询</option>
</select>
</div>
<div class="form-row">
<label class="form-label"><span class="required">*</span>起止日期：</label>
<input type="text" class="form-input" value="20260428">
<span class="calendar-icon">🗓️</span>
<span>-</span>
<input type="text" class="form-input" value="20260428">
<span class="calendar-icon">🗓️</span>
<span class="help-icon">❓</span>
</div>
<!-- 按钮组 -->
<div class="btn-group">
<button onclick="onConfirm()">确定</button>
<button onclick="onBack()">返回</button>
</div>
</div>
<!-- 温馨提示 -->
<div class="tips-section">
<div class="tips-title">温馨提示</div>
<p>查询起止日期默认为当前日期的前一天。</p>
</div>
</body>
</html>
<script>
function onBack() {
window.history.back();
}
function onConfirm() {
window.location.href = './history_balance.html'
}
</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