首页分享宠物医疗账单管理APP原型图

宠物医疗账单管理APP原型图

来源：萌宠菠菠乐园时间：2026-03-11 19:09

宠物医疗医疗管理账单系统 APP设计宠物医院医疗健康企业管理

这是一个宠物医疗账单管理APP的原型图，展示了账单查询、筛选、结算等功能界面。设计包含时间筛选、账单状态分类（未结、已结、退款等）、商品/服务明细列表、合计金额计算等核心功能模块。该原型适合宠物医院管理系统开发参考，提供了清晰的用户界面布局和交互逻辑，可作为医疗类APP设计的灵感来源或开发模板。

如果您发现该原型图存在问题，请点击以下按钮进行举报：
举报该原型图

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } body { background-color: #f5f7fa; color: #333333; font-size: 14px; line-height: 1.5; min-height: 100vh; padding: 16px; } /* 布局容器 */ .container { display: flex; flex-direction: column; max-width: 1920px; margin: 0 auto; height: calc(100vh - 32px); background: #FFFFFF; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } /* 顶部区域 */ .header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #E8E8E8; } .header-title { font-size: 16px; font-weight: 600; color: #333333; } .header-center { display: flex; align-items: center; gap: 8px; } .header-right { display: flex; align-items: center; gap: 8px; } /* 主内容区 */ .main-content { display: flex; flex: 1; overflow: hidden; } /* 左侧账单列表区 */ .bill-list-section { width: 25%; min-width: 300px; display: flex; flex-direction: column; border-right: 1px solid #E8E8E8; } .filter-tags { display: flex; padding: 16px 16px 8px; gap: 8px; flex-wrap: wrap; } .tag { padding: 4px 12px; border: 1px solid #D9D9D9; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s; } .tag.active { background: #1890FF; color: white; border-color: #1890FF; } .search-box { position: relative; margin: 0 16px 16px; } .search-box input { width: 100%; height: 32px; padding: 0 32px 0 12px; border: 1px solid #D9D9D9; border-radius: 4px; font-size: 14px; } .search-icon { position: absolute; right: 10px; top: 8px; color: #999; } .bill-list { flex: 1; overflow-y: auto; padding: 0 16px; } .bill-item { padding: 12px; margin-bottom: 8px; border: 1px solid #E8E8E8; border-radius: 4px; cursor: pointer; transition: all 0.2s; } .bill-item:hover { border-color: #1890FF; background: #f0f7ff; } .bill-item.active { border-color: #1890FF; background: #e6f7ff; } .bill-info { display: flex; justify-content: space-between; margin-bottom: 4px; } .bill-id { font-weight: 500; } .bill-status { font-size: 12px; padding: 2px 4px; border-radius: 2px; } .bill-status.unpaid { background: #FF6B35; color: white; } .bill-time { font-size: 12px; color: #666666; } .bill-amount { font-weight: 500; text-align: right; } .bottom-buttons { display: flex; padding: 16px; gap: 8px; flex-wrap: wrap; border-top: 1px solid #E8E8E8; } .btn { height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: 4px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .btn-outline { background: white; border-color: #D9D9D9; color: #333333; } .btn-primary { background: #1890FF; color: white; } .btn-success { background: #52C41A; color: white; } /* 右侧账单明细区 */ .bill-detail-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .date-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid #E8E8E8; } .date-title { font-size: 16px; font-weight: 600; } .detail-content { flex: 1; overflow-y: auto; padding: 16px; } .service-card { border: 1px solid #E8E8E8; border-radius: 4px; margin-bottom: 16px; overflow: hidden; } .card-header { padding: 12px 16px; background: #fafafa; border-bottom: 1px solid #E8E8E8; font-weight: 600; } .service-table { width: 100%; border-collapse: collapse; } .service-table th { background: #fafafa; padding: 12px 8px; text-align: left; font-weight: 600; border-bottom: 1px solid #E8E8E8; } .service-table td { padding: 12px 8px; border-bottom: 1px solid #E8E8E8; } .service-table tr:last-child td { border-bottom: none; } .delete-btn { color: #1890FF; cursor: pointer; } .card-footer { padding: 12px 16px; text-align: right; background: #fafafa; border-top: 1px solid #E8E8E8; font-weight: 500; } .action-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-top: 1px solid #E8E8E8; background: white; } .total-amount { font-size: 16px; font-weight: 600; } .action-buttons { display: flex; gap: 8px; } /* 响应式设计 */ @media (max-width: 1200px) { .bill-list-section { position: absolute; left: -100%; top: 0; bottom: 0; width: 300px; z-index: 100; background: white; transition: left 0.3s ease; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); } .bill-list-section.active { left: 0; } .bill-detail-section { width: 100%; } .toggle-list-btn { display: block; position: absolute; top: 20px; left: 20px; z-index: 99; } } /* 工具类 */ .hidden { display: none; } </style> </head> <body> <div class="container">  <div class="header"> <div class="header-left"> <h1 class="header-title">宠物账单</h1> </div> <div class="header-center"> <span>时间筛选：</span> <span>2026.03.08 ~ 2026.03.08</span> <span></span> </div> <div class="header-right"> <button class="btn btn-outline">刷新</button> </div> </div>  <div class="main-content">  <div class="bill-list-section"> <div class="filter-tags"> <div class="tag active">全部</div> <div class="tag">未结</div> <div class="tag">挂账</div> <div class="tag">已结</div> <div class="tag">退款</div> </div> <div class="search-box"> <input type="text" placeholder="宠物/主人/电话/单号"> <span class="search-icon"></span> </div> <div class="bill-list"> <div class="bill-item active"> <div class="bill-info"> <span class="bill-id">222 (P000003) - 456</span> <span class="bill-status unpaid">未结</span> </div> <div class="bill-time">2026-03-08 11:57:17</div> <div class="bill-amount">¥0.00</div> </div> <div class="bill-item"> <div class="bill-info"> <span class="bill-id">222 (P000002) - 456</span> <span class="bill-status unpaid">未结</span> </div> <div class="bill-time">2026-03-08 00:14:23</div> <div class="bill-amount">¥0.00</div> </div> </div> <div class="bottom-buttons"> <button class="btn btn-outline">切换按顾客显示</button> <button class="btn btn-outline">+ 商品</button> <button class="btn btn-outline">批量设置</button> <button class="btn btn-outline">押金</button> <button class="btn btn-outline">打印</button> </div> </div>  <div class="bill-detail-section"> <div class="date-header"> <div class="date-title">2026年03月08日（星期日）</div> <button class="btn btn-outline">收起</button> </div> <div class="detail-content">  <div class="service-card"> <div class="card-header">普通门诊化验</div> <table class="service-table"> <thead> <tr> <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>23</td> <td>-</td> <td>个</td> <td>1.00</td> <td>¥0.00</td> <td>¥0.00</td> <td>¥0.00</td> <td>管理员</td> <td>管理员</td> <td class="delete-btn">删除</td> </tr> </tbody> </table> <div class="card-footer">合计：0.00元</div> </div>  <div class="service-card"> <div class="card-header">普通门诊影像</div> <div class="card-footer">合计：0.00元</div> </div> <div class="service-card"> <div class="card-header">普通门诊处方</div> <div class="card-footer">合计：0.00元</div> </div> <div class="service-card"> <div class="card-header">普通门诊手术</div> <div class="card-footer">合计：0.00元</div> </div> <div class="service-card"> <div class="card-header">普通门诊处置</div> <div class="card-footer">合计：0.00元</div> </div> </div> <div class="action-bar"> <div class="total-amount">合计：0.00元</div> <div class="action-buttons"> <button class="btn btn-success">挂账</button> <button class="btn btn-primary">次卡结算</button> <button class="btn btn-primary">收银结算</button> </div> </div> </div> </div> </div> <script> // 响应式处理：小屏幕时左侧菜单折叠 function handleResponsive() { const screenWidth = window.innerWidth; const billListSection = document.querySelector('.bill-list-section'); const toggleBtn = document.querySelector('.toggle-list-btn'); if (screenWidth < 1200) { billListSection.classList.add('hidden'); // 创建切换按钮（实际项目中需要实现） } else { billListSection.classList.remove('hidden'); if (toggleBtn) toggleBtn.remove(); } } // 初始化事件监听 function initEventListeners() { // 账单项点击事件 const billItems = document.querySelectorAll('.bill-item'); billItems.forEach(item => { item.addEventListener('click', () => { billItems.forEach(i => i.classList.remove('active')); item.classList.add('active'); }); }); // 标签点击事件 const tags = document.querySelectorAll('.tag'); tags.forEach(tag => { tag.addEventListener('click', () => { tags.forEach(t => t.classList.remove('active')); tag.classList.add('active'); }); }); // 删除按钮点击事件 const deleteBtns = document.querySelectorAll('.delete-btn'); deleteBtns.forEach(btn => { btn.addEventListener('click', (e) => { e.stopPropagation(); const row = btn.closest('tr'); row.remove(); }); }); } // 页面加载完成后执行 window.addEventListener('DOMContentLoaded', () => { handleResponsive(); initEventListeners(); }); // 窗口大小变化时重新处理响应式 window.addEventListener('resize', handleResponsive); </script> </body> </html>

宠物医疗账单管理APP原型图

推荐分享

缅因猫能长多大一种体型较大的猫

警惕狗贩的骗人损招星期狗的症状特征

宠物医疗账单管理APP原型图

推荐分享

缅因猫能长多大 一种体型较大的猫

警惕狗贩的骗人损招 星期狗的症状特征

缅因猫能长多大一种体型较大的猫

警惕狗贩的骗人损招星期狗的症状特征