Skip to content

B
buildbank-replica
Commit c62e7314 authored by 付琳's avatar 付琳
Browse files
Options

账户信息及实时余额页面功能样式全部完成,缺两个存款的文字版pdf打印

parent 00b2260a
Hide whitespace changes
Inline Side-by-side
Showing with 287 additions and 139 deletions
account_info.html
View file @ c62e7314
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: '\5b8b\4f53, arial, georgia, verdana, helvetica, sans-serif'; font-family: \5b8b\4f53, arial, georgia, verdana, helvetica, sans-serif !important;
font-size: 14px; font-size: 14px;
color: #2C2C2C; color: #2C2C2C;
} }
...@@ -291,162 +291,300 @@ ...@@ -291,162 +291,300 @@
background-color: #fff; background-color: #fff;
font-weight: normal; font-weight: normal;
} }
/* 遮罩 */
.modal-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
display: none;
align-items: center;
justify-content: center;
z-index: 999;
}
/* 弹窗 */
.modal {
width: 480px;
background: #fff;
overflow: hidden;
font-size: 1em !important;
}
/* 头部 */
.modal-header {
background: transparent;
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/TG/panel_title_bj.png) repeat-x;
height: 36px;
line-height: 36px;
border-bottom: 1px solid #ffffff !important;
border-color: #95B8E7;
width: 100%;
border-style: solid;
border-width: 0 0 1px 0;
text-align: left;
font-size: 1em;
position: relative;
}
.panel-title {
font-weight: bold;
color: #0e2d5f;
height: 36px;
text-indent: 10px;
line-height: 36px;
}
.panel-tool {
position: absolute;
top: 50%;
right: 10px;
margin-top: -8px;
height: 18px;
overflow: hidden;
}
.panel-tool a {
display: inline-block;
width: 18px;
height: 18px;
margin: 0 0 0 2px;
vertical-align: top;
text-decoration: none;
outline: none;
}
.panel-tool-close {
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/TG/panel_close_icon.png) no-repeat;
}
/* 内容 */
.alter_logo3 {
background-image: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/TG/CCB_logo3.png);
background-repeat: no-repeat;
background-position: 10px 10px;
height: 50px;
}
.alert-feedback {
background: #F7FAFD;
overflow: hidden;
vertical-align: middle !important;
text-align: center;
margin-top: 15px;
margin-bottom: 25px;
padding: 0 30px;
}
.fail-icon {
width: 48px;
height: 48px;
display: inline-block;
margin-right: 12px;
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/TG/feedback_icon.png) no-repeat;
background-position: 0 0;
vertical-align: middle;
background-position: -9px -88px;
}
.pad{
color: #000000;
}
/* 按钮 */
.modal-footer {
text-align: center;
padding-bottom: 24px;
}
.btn {
width: 100px;
height: 35px;
line-height: 35px;
background: #1889d0;
background: #1889d0 url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/TG/btn_standard.png) no-repeat;
text-align: center;
color: #fff;
border: 0;
font-size: 1em;
font-weight: bold;
cursor: pointer;
display: inline-block;
border-radius: 5px;
}
.btn:hover {
background: #1a73e8;
}
</style> </style>
<script src="./js/pako.min.js"></script> <script src="./js/pako.min.js"></script>
</head> </head>
<body> <body>
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="breadcrumb"> <div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > <span class="breadcrumb_item">活期账户</span> 当前位置：账户查询 > 账户信息查询 > <span class="breadcrumb_item">活期账户</span>
</div>
<!-- 账户信息卡片 -->
<div class="account-card">
<div class="account-number">
<div>4205***1941</div>
</div> </div>
<!-- 账户信息卡片 --> <table class="info-table" border="none">
<div class="account-card"> <tr>
<div class="account-number"> <td>账户名称:</td>
<div>4205***1941</div> <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>773,541.62 </td>
<td>开户日期:</td>
<td>20251105 </td>
</tr>
<tr>
<td>开户许可证号/基本存款账户编号信息:</td>
<td>J5210095814103 </td>
<td>银行联行号:</td>
<td>105521000764 </td>
</tr>
</table>
</div>
<div class="toolbar">
<div class="tableLBtn_box">
<div class="tableLBtn_active">
<a href="#" class="tableRBtn download">下载全部</a>
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li class="firstLi">Txt下载</li>
<li>Excel下载</li>
<li>Csv下载</li>
<li>PDF下载</li>
</ul>
</div> </div>
<table class="info-table" border="none">
<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>773,541.62 </td>
<td>开户日期:</td>
<td>20251105 </td>
</tr>
<tr>
<td>开户许可证号/基本存款账户编号信息:</td>
<td>J5210095814103 </td>
<td>银行联行号:</td>
<td>105521000764 </td>
</tr>
</table>
</div> </div>
<div class="toolbar"> <div class="tableLBtn_box">
<div class="tableLBtn_box"> <div class="tableLBtn_active">
<div class="tableLBtn_active"> <a href="#" class="tableRBtn print">打印</a>
<a href="#" class="tableRBtn download">下载全部</a>
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li class="firstLi">Txt下载</li>
<li>Excel下载</li>
<li>Csv下载</li>
<li>PDF下载</li>
</ul>
</div>
</div> </div>
<div class="tableLBtn_box"> <div class="downloadBox" style="right: 0; ">
<div class="tableLBtn_active"> <ul>
<a href="#" class="tableRBtn print">打印</a> <li onclick="printPage('1')" class="firstLi">网页打印</li>
</div> <li onclick="printPage('2')">PDF打印</li>
<div class="downloadBox" style="right: 0; "> </ul>
<ul>
<li onclick="printPage('1')" class="firstLi">网页打印</li>
<li onclick="printPage('2')">PDF打印</li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="bottom-btn-group"> </div>
<button>基本存款信息打印</button> <div class="bottom-btn-group">
<button>存款人查询密码打印</button> <button onclick="handlePrint('1')">基本存款信息打印</button>
<button onclick="onBack()">返回</button> <button onclick="handlePrint('2')">存款人查询密码打印</button>
</div> <button onclick="onBack()">返回</button>
<div id="pdfArea"> </div>
<div id="pdfArea">
<div class="title"></div> <div class="title"></div>
<div class="table-header"> <div class="table-header">
<div class="print-date" id="printDate"></div> <div class="print-date" id="printDate"></div>
<table class="table_none"> <table class="table_none">
<tr> <tr>
<td class="tds">账户名称</td> <td class="tds">账户名称</td>
<td class="tds">中科软赢（武汉）科技有限公司</td> <td class="tds">中科软赢（武汉）科技有限公司</td>
<td class="tds">账号</td> <td class="tds">账号</td>
<td class="tds">42050123704500001941</td> <td class="tds">42050123704500001941</td>
<td class="tds">开户机构号</td> <td class="tds">开户机构号</td>
<td class="tds">420237045</td> <td class="tds">420237045</td>
</tr> </tr>
<tr> <tr>
<td class="tds">开户机构名称</td> <td class="tds">开户机构名称</td>
<td class="tds">中国建设银行股份有限公司武汉汉阳大道支行</td> <td class="tds">中国建设银行股份有限公司武汉汉阳大道支行</td>
<td class="tds">本外币合一标识</td> <td class="tds">本外币合一标识</td>
<td class="tds"></td> <td class="tds"></td>
<td class="tds">币种</td> <td class="tds">币种</td>
<td class="tds">人民币元</td> <td class="tds">人民币元</td>
</tr> </tr>
<tr> <tr>
<td class="tds">钞/汇</td> <td class="tds">钞/汇</td>
<td class="tds"></td> <td class="tds"></td>
<td class="tds">账户性质</td> <td class="tds">账户性质</td>
<td class="tds">基本户</td> <td class="tds">基本户</td>
<td class="tds">外币资金性质</td> <td class="tds">外币资金性质</td>
<td class="tds"></td> <td class="tds"></td>
</tr> </tr>
<tr> <tr>
<td class="tds">账户状态</td> <td class="tds">账户状态</td>
<td class="tds">正常</td> <td class="tds">正常</td>
<td class="tds">开户日期</td> <td class="tds">开户日期</td>
<td class="tds">20251105</td> <td class="tds">20251105</td>
<td class="tds">可用余额</td> <td class="tds">可用余额</td>
<td class="tds">773,541.62</td> <td class="tds">773,541.62</td>
</tr> </tr>
<tr> <tr>
<td class="tds">透支金额</td> <td class="tds">透支金额</td>
<td class="tds">0.00</td> <td class="tds">0.00</td>
<td class="tds">普通业务冻结金额</td> <td class="tds">普通业务冻结金额</td>
<td class="tds">0.00</td> <td class="tds">0.00</td>
<td class="tds">存款司法冻结金额</td> <td class="tds">存款司法冻结金额</td>
<td class="tds">0.00</td> <td class="tds">0.00</td>
</tr> </tr>
<tr> <tr>
<td class="tds">在途业务冻结金额</td> <td class="tds">在途业务冻结金额</td>
<td class="tds">0.00</td> <td class="tds">0.00</td>
<td class="tds"></td> <td class="tds"></td>
<td class="tds"></td> <td class="tds"></td>
<td class="tds"></td> <td class="tds"></td>
<td class="tds"></td> <td class="tds"></td>
</tr> </tr>
<tr> <tr>
<td class="tds">开户许可证号/基本存款账户编号信息</td> <td class="tds">开户许可证号/基本存款账户编号信息</td>
<td class="tds">J5210095814103</td> <td class="tds">J5210095814103</td>
<td class="tds"></td> <td class="tds"></td>
<td class="tds"></td> <td class="tds"></td>
<td class="tds"></td> <td class="tds"></td>
<td class="tds"></td> <td class="tds"></td>
</tr> </tr>
</table> </table>
</div> </div>
</div> </div>
<div class="modal-mask" id="modal">
<div class="modal">
<div class="modal-header">
<div class="panel-title">系统提示</div>
<div class="panel-tool">
<a class="panel-tool-close" href="javascript:void(0)" onclick="hideModal()"></a>
</div>
</div>
<div class="modal-body">
<div class="alter_logo3"></div>
<div class="alert-feedback">
<span class="fail-icon"></span>
<span class="pad">基本存款账户信息仅支持打印当日补打，请妥善保管纸质文件。打印次日及之后如需补打请联系开户行客户经理。</span>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="hideModal()">确定</button>
</div>
</div>
</div>
</body> </body>
<script> <script>
document.querySelectorAll('.downloadBox li').forEach((el, index) => { document.querySelectorAll('.downloadBox li').forEach((el, index) => {
...@@ -722,6 +860,15 @@ function printPage(type) { ...@@ -722,6 +860,15 @@ function printPage(type) {
win.close(); win.close();
}; };
} }
function onBack() {
window.history.back();
}
function handlePrint() {
document.getElementById('modal').style.display = 'flex';
}
function hideModal() {
document.getElementById('modal').style.display = 'none';
}
</script> </script>
</html> </html>
\ 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