Skip to content

B
buildbank-replica
Commit ff880e61 authored by 黄同智's avatar 黄同智
Browse files
Options

明细样式布局

Co-authored-by: 's avatarCopilot <copilot@github.com>
parent faac6d8e
Show whitespace changes
Inline Side-by-side
Showing with 142 additions and 34 deletions
account_detail.html
View file @ ff880e61
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
......@@ -12,10 +13,12 @@
font-family: "Microsoft Yahei", sans-serif;
font-size: 14px;
}
body {
background-color: #ffffff;
padding: 0;
}
/* 顶部导航栏 */
.top-nav {
background-color: #ffffff;
......@@ -25,11 +28,13 @@
padding: 10px 20px;
gap: 40px;
}
.top-nav a {
color: #1890ff;
text-decoration: none;
font-size: 16px;
}
/* 面包屑 */
.breadcrumb {
background-color: #f5f7fa;
......@@ -37,89 +42,185 @@
color: #666;
margin: 10px 0;
}
/* 查询表单 */
.form-container {
padding: 20px;
}
.form-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
.form-row {
display: flex;
align-items: center;
margin-bottom: 15px;
gap: 10px;
/* gap: 10px; */
}
.form-row .dateimg {
width: 27px;
height: 27px;
}
.form-label {
width: 120px;
text-align: right;
color: #333;
}
.form-label .required {
color: #ff4d4f;
color: red;
margin-right: 4px;
}
.form-input,
.form-select {
padding: 5px 8px;
border: 1px solid #d9d9d9;
border-radius: 2px;
width: 230px;
}
.select-down-icon {
height: 31px;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f3f3;
border: 1px solid #d9d9d9;
border-left: none;
}
.down-arrow {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #b0b0b0;
}
.form-select option:first-child {
color: #eee;
}
.form-select.hide {
appearance: none;
}
.form-input.small {
width: 120px;
width: 111px;
}
.px-2 {
padding-left: 2px;
padding-right: 2px;
}
.form-input.x-small {
width: 84px;
}
.form-input.wide {
width: 240px;
width: 234px;
}
.radio-group {
display: flex;
gap: 30px;
margin-left: 10px;
}
.radio-group label {
display: flex;
align-items: center;
input {
margin-right: 5px;
}
}
.form-tip {
color: #1890ff;
color: #0066b3;
margin-left: 8px;
}
.form-question {
color: #1890ff;
cursor: pointer;
margin-left: 8px;
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
border-radius: 50%;
background-color: #1890ff;
color: #fff;
padding-left: 4px;
}
.question1 {
margin-left: 30px;
}
.question2 {
margin-left: 70px;
}
/* 按钮组 */
.btn-group {
display: flex;
justify-content: center;
gap: 20px;
margin: 30px 0;
padding-left: 120px;
}
.btn-group button {
background-color: #1890ff;
background-color: #1f93d5;
color: #fff;
border: none;
padding: 10px 30px;
border-radius: 4px;
cursor: pointer;
font-size: 15px;
height: 35px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
}
/* 温馨提示 */
.tips-section {
background-color: #f0f7ff;
padding: 20px;
padding: 10px;
border: 1px solid #e8e8e8;
}
.tips-title {
color: #ff4d4f;
color: red;
font-weight: bold;
margin-bottom: 10px;
font-size: 16px;
}
.tips-section p {
line-height: 1.8;
color: #333;
}
.mt-24 {
margin-top: 24px;
}
.mt-20 {
margin-top: 20px;
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<!-- <div class="top-nav">
......@@ -151,23 +252,23 @@
<div class="form-row">
<label class="form-label"><span class="required">*</span>起止日期：</label>
<input type="text" class="form-input small" value="20260428">
<span>🗓️</span>
<input type="text" class="form-input small x-small" value="20260428">
<img class="dateimg" src="/imagse/date.png" alt="" />
<span>-</span>
<input type="text" class="form-input small" value="20260428">
<span>🗓️</span>
<input type="text" class="form-input small x-small" value="20260428">
<img class="dateimg" src="/imagse/date.png" alt="" />
<div class="radio-group">
<label><input type="radio" name="dateRange"> 最近7天</label>
<label><input type="radio" name="dateRange"> 最近14天</label>
<label><input type="radio" name="dateRange"> 最近30天</label>
<label><input type="radio" name="dateRange" /> 最近7天</label>
<label><input type="radio" name="dateRange" /> 最近14天</label>
<label><input type="radio" name="dateRange" /> 最近30天</label>
</div>
<span class="form-question">❓</span>
<span class="form-question question1">？</span>
</div>
<div class="form-row">
<label class="form-label">交易金额：</label>
<input type="text" class="form-input small">
<span>-</span>
<span class="px-2">-</span>
<input type="text" class="form-input small">
</div>
......@@ -180,16 +281,16 @@
</div>
</div>
<div class="form-row">
<div class="form-row mt-24">
<label class="form-label">冲正交易：</label>
<div class="radio-group">
<label><input type="radio" name="reversal" checked> 显示</label>
<label><input type="radio" name="reversal"> 不显示</label>
</div>
<span class="form-question">❓</span>
<span class="form-question question2">？</span>
</div>
<div class="form-row">
<div class="form-row mt-20">
<label class="form-label">对方户名：</label>
<input type="text" class="form-input wide">
<span class="form-tip">录入生僻字</span>
......@@ -205,20 +306,24 @@
<input type="text" class="form-input wide">
<span class="form-tip">录入生僻字</span>
</div>
<input type="date" id="dateInput" />
<div class="form-row">
<label class="form-label">交易摘要：</label>
<select class="form-select" style="width: 200px;">
<select class="form-select hide" style="width: 200px;">
<option>请选择</option>
<option>请选择</option>
<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">
<span>-</span>
<span class="px-2">-</span>
<input type="text" class="form-input small">
<span class="form-question">❓</span>
<span class="form-question">？</span>
</div>
<!-- 按钮组 -->
......@@ -228,6 +333,7 @@
<button onclick="onAccount(3)">查询长期</button>
</div>
</div>
<input type="date" />
<!-- 温馨提示 -->
<div class="tips-section">
......@@ -235,17 +341,18 @@
<p>1、签约汇总记账账户仅提供历史明细查询。</p>
<p>2、当前交易明细查询页面仅支持查询最近一年半的账户明细，“查询长期”支持查询最近十年的账户明细，如需查询十年前的账户明细请联系您的开户行。</p>
</div>
</body>
</html>
<script>
function onAccount(number){
if(number == 2){
function onAccount(number) {
if (number == 2) {
window.history.back();
}
if(number == 3){
if (number == 3) {
window.location.href = './account_list.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