v2.4: 响应式布局 + 借款按钮优化

- 所有页面添加响应式CSS,支持手机/电脑自适应
- index.html: 导航栏active状态、表单、统计、借款列表响应式
- analysis.html: 图表、统计卡片响应式
- admin.html: 表格、搜索栏响应式
- reset-password.html: 登录卡片响应式
- 修复导航栏active类:analysis.html的分析标签高亮
- 非本人借款:隐藏修改按钮,快速还款改为快速查看
- 修复main.py重复函数
- 添加debt-manager.sh管理脚本
This commit is contained in:
OP
2026-07-01 22:50:09 +08:00
parent f18cdf5249
commit 056c4defec
7 changed files with 597 additions and 41 deletions

View File

@@ -92,6 +92,80 @@ body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC"
.profile-section .form-row input{width:100%;padding:10px 14px;border:1px solid #d2d2d7;border-radius:var(--radius-xs);font-size:14px;outline:none;transition:all .2s}
.profile-section .form-row input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,227,.12)}
.profile-section .form-row input:disabled{background:#f5f5f7;color:var(--text3)}
/* RESPONSIVE - Mobile & Tablet */
@media(max-width:768px){
.header-inner{padding:0 12px;height:48px}
.header h1{font-size:15px}
.header-center{position:static;transform:none}
.nav-tabs{gap:2px;padding:2px}
.nav-tab{padding:5px 12px;font-size:12px}
.header-right{gap:2px}
.header-right a,.hdr-btn{padding:5px 8px;font-size:11px}
.user-info{padding:5px 8px;font-size:12px}
.notif-bell{padding:4px 6px}
.notif-dropdown{width:calc(100vw - 20px);right:-10px}
.main{padding:12px;gap:12px}
.panel-title{padding:12px 14px;font-size:13px}
.panel-body{padding:12px 14px}
.form-grid{grid-template-columns:1fr;gap:10px}
.form-row input,.form-row select{padding:10px 12px;font-size:14px}
.loan-item{padding:8px 14px 8px 28px}
.loan-item .iamt{font-size:12px}
.loan-actions-popup{padding:6px 14px;flex-wrap:wrap}
.stats{grid-template-columns:repeat(2,1fr);gap:8px}
.stat-card{padding:12px}
.stat-card .val{font-size:16px}
.month-header{padding:10px 14px}
.month-header .total{font-size:13px}
.loan-row .right{width:90px}
.loan-row .pay-amt{font-size:13px}
.modal{padding:20px;width:95%;max-width:none}
.modal h3{font-size:16px;margin-bottom:14px}
.auth-card{width:100%;max-width:360px;padding:32px 24px;margin:16px}
.auth-card h2{font-size:20px;margin-bottom:24px}
.btn-row{flex-direction:column;gap:8px}
.btn{padding:12px 0}
.toast{max-width:calc(100vw - 32px);font-size:12px;padding:10px 16px}
}
@media(max-width:480px){
.header-inner{padding:0 10px;height:44px}
.header h1{font-size:14px}
.nav-tab{padding:4px 10px;font-size:11px}
.header-right a,.hdr-btn{padding:4px 6px;font-size:10px}
.main{padding:10px;gap:10px}
.panel-title{padding:10px 12px}
.panel-body{padding:10px 12px}
.stats{grid-template-columns:1fr 1fr}
.stat-card{padding:10px}
.stat-card .lbl{font-size:10px}
.stat-card .val{font-size:14px}
.form-grid{gap:8px}
.loan-group-header{padding:10px 12px}
.loan-group-header .gname{font-size:14px}
.loan-item{padding:8px 12px}
.month-header{padding:8px 12px}
.month-header .ym{font-size:13px}
.month-detail{padding:0 12px 8px}
.auth-card{padding:24px 20px}
.auth-card h2{font-size:18px;margin-bottom:20px}
}
</style>
</head>
<body>
@@ -100,8 +174,8 @@ body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC"
<h1>债务统计</h1>
<div class="header-center">
<div class="nav-tabs">
<a href="/" class="nav-tab active">首页</a>
<a href="/analysis.html" class="nav-tab">分析</a>
<a href="/" class="nav-tab">首页</a>
<a href="/analysis.html" class="nav-tab active">分析</a>
</div>
</div>
<div class="header-right">