Leecheng/CommunityAPP_UI
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

調整後台樣式

Browse Source
This commit is contained in:
larry2701 2025-05-15 17:26:46 +08:00
parent 6194430f3c
commit 7e16cabda4
2 changed files with 71 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
Backstage/resident_activation.html
View File

@ -9,14 +9,13 @@
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; /* 確保 body 至少和視窗一樣高 */ min-height: 100vh;
margin: 0; /* 移除預設 margin */ margin: 0;
} }
.container.mt-4 { .container.mt-4 {
flex-grow: 1; /* 讓主要內容區域填滿剩餘空間 */ flex-grow: 1;
padding-bottom: 70px; /* 重要：為固定的分頁條預留空間，避免遮擋內容 */ padding-bottom: 70px;
/* 這個值可以根據分頁條的實際高度進行調整 */
} }
#qrcodeModal .modal-body { #qrcodeModal .modal-body {
@ -25,23 +24,32 @@
align-items: center; align-items: center;
} }
/* 固定分頁條的樣式 */
nav.pagination-fixed { nav.pagination-fixed {
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background-color: #f8f9fa; /* 給分頁條一個背景色，避免透明 */ background-color: #f8f9fa;
padding: 10px 0; /* 給分頁條一些上下內邊距 */ padding: 10px 0;
border-top: 1px solid #dee2e6; /* 可選：給分頁條頂部加個邊框 */ border-top: 1px solid #dee2e6;
z-index: 1000; /* 確保分頁條在其他內容之上 */ z-index: 1000;
} }
/* 確保分頁本身在固定容器內正確對齊 */
nav.pagination-fixed .pagination { nav.pagination-fixed .pagination {
margin-bottom: 0; /* 移除 Bootstrap 分頁的預設下邊距 */ margin-bottom: 0;
} }
button.btn {
font-weight: 500;
font-size: 1rem;
padding: 0.5rem 0.75rem;
transition: all 0.2s ease-in-out;
}
button.btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
</style> </style>
</head> </head>
<body> <body>
@ -56,13 +64,13 @@
<input type="text" id="searchEmail" class="form-control" placeholder="搜尋 Email"> <input type="text" id="searchEmail" class="form-control" placeholder="搜尋 Email">
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<button class="btn btn-primary w-100" onclick="search()">搜尋</button> <button class="btn btn-outline-primary w-100 rounded-pill" onclick="search()">搜尋</button>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<button class="btn btn-danger w-100" onclick="deleteSelected()">刪除勾選</button> <button class="btn btn-outline-danger w-100 rounded-pill" onclick="deleteSelected()">刪除勾選</button>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<button class="btn btn-secondary w-100" onclick="scanResident()">掃描住戶</button> <button class="btn btn-outline-secondary w-100 rounded-pill" onclick="scanResident()">掃描住戶</button>
</div> </div>
</div> </div>
@ -77,10 +85,8 @@
<th>操作</th> <th>操作</th>
</tr> </tr>
</thead> </thead>
<tbody id="residentTable"> <tbody id="residentTable"></tbody>
</tbody>
</table> </table>
</div> </div>
<nav class="pagination-fixed"> <nav class="pagination-fixed">
@ -116,7 +122,6 @@
{ id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777"}, { id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777"},
{ id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666" }, { id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666" },
{ id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555" }, { id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555" },
// 為了測試滾動效果，可以增加更多數據
{ id: 9, name: "陳小春", email: "chen@example.com", phone: "0911-111-111" }, { id: 9, name: "陳小春", email: "chen@example.com", phone: "0911-111-111" },
{ id: 10, name: "五月天", email: "mayday@example.com", phone: "0922-222-222" }, { id: 10, name: "五月天", email: "mayday@example.com", phone: "0922-222-222" },
{ id: 11, name: "田馥甄", email: "hebe@example.com", phone: "0933-333-333" }, { id: 11, name: "田馥甄", email: "hebe@example.com", phone: "0933-333-333" },
@ -138,7 +143,7 @@
<td>${r.name}</td> <td>${r.name}</td>
<td>${r.email}</td> <td>${r.email}</td>
<td>${r.phone}</td> <td>${r.phone}</td>
<td><button class="btn btn-success btn-sm" onclick="showQRCode('https://yourdomain.com/activate?id=${r.id}')">開通</button></td> <td><button class="btn btn-outline-success btn-sm rounded-pill" onclick="showQRCode('https://yourdomain.com/activate?id=${r.id}')">開通</button></td>
`; `;
tbody.appendChild(row); tbody.appendChild(row);
}); });
@ -161,8 +166,8 @@
function goToPage(page) { function goToPage(page) {
currentPage = page; currentPage = page;
search(); // 重新篩選並渲染 search();
window.scrollTo(0, 0); // 換頁時滾動到頁面頂部 (可選) window.scrollTo(0, 0);
} }
function search() { function search() {
@ -211,8 +216,7 @@
alert("這裡可以接掃描裝置或開啟相機功能"); alert("這裡可以接掃描裝置或開啟相機功能");
} }
// 初次載入 search(); // 初次載入
search();
</script> </script>
</body> </body>
</html> </html>

44
Backstage/resident_list.html
View File

@ -38,14 +38,34 @@
nav.pagination-fixed .pagination { nav.pagination-fixed .pagination {
margin-bottom: 0; margin-bottom: 0;
} }
/* Custom button styles applied to all .btn elements */
/* This will make .btn-sm elements larger than default Bootstrap .btn-sm */
.btn {
font-weight: 500;
font-size: 1rem; /* Overrides .btn-sm font-size if more specific or loaded later */
padding: 0.5rem 0.75rem; /* Overrides .btn-sm padding if more specific or loaded later */
transition: all 0.2s ease-in-out;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
</style> </style>
</head> </head>
<body> <body>
<div class="container mt-4"> <div class="container mt-4">
<h2 class="mb-4">居民列表</h2> <h2 class="mb-4">居民列表</h2>
<div class="row g-2 mb-3"> <div class="row g-2 mb-3">
<div class="col-4 col-md-2 col-lg-1"> <div class="col-4 col-md-2 col-lg-1">
<a href="resident_add.html" class="btn btn-success w-100">新增</a> <a href="resident_add.html" class="btn btn-outline-success w-100 rounded-pill">新增</a>
</div>
<div class="col-4 col-md-2 col-lg-1">
<a href="resident_import.html" class="btn btn-outline-info w-100 rounded-pill">匯入</a>
</div>
<div class="col-4 col-md-2 col-lg-1">
<button class="btn btn-outline-secondary w-100 rounded-pill" onclick="exportResidents()">匯出</button>
</div> </div>
</div> </div>
@ -57,16 +77,10 @@
<input type="text" id="searchEmail" class="form-control" placeholder="搜尋 Email"> <input type="text" id="searchEmail" class="form-control" placeholder="搜尋 Email">
</div> </div>
<div class="col-6 col-md-2 col-lg-2"> <div class="col-6 col-md-2 col-lg-2">
<button class="btn btn-primary w-100" onclick="search()">搜尋</button> <button class="btn btn-outline-primary w-100 rounded-pill" onclick="search()">搜尋</button>
</div> </div>
<div class="col-6 col-md-3 col-lg-2"> <div class="col-6 col-md-2 col-lg-1">
<button class="btn btn-danger w-100" onclick="deleteSelected()">刪除勾選</button> <button class="btn btn-outline-danger w-100 rounded-pill" onclick="deleteSelected()">刪除勾選</button>
</div>
<div class="col-4 col-md-2 col-lg-1">
<a href="resident_import.html" class="btn btn-info w-100">匯入</a>
</div>
<div class="col-4 col-md-2 col-lg-1">
<button class="btn btn-secondary w-100" onclick="exportResidents()">匯出</button>
</div> </div>
</div> </div>
@ -87,7 +101,7 @@
<nav class="pagination-fixed"> <nav class="pagination-fixed">
<ul class="pagination justify-content-center" id="pagination"></ul> <ul class="pagination justify-content-center" id="pagination"></ul>
</nav> </nav
<div class="modal fade" id="qrcodeModal" tabindex="-1" aria-labelledby="qrcodeModalLabel" aria-hidden="true"> <div class="modal fade" id="qrcodeModal" tabindex="-1" aria-labelledby="qrcodeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered"> <div class="modal-dialog modal-sm modal-dialog-centered">
@ -114,7 +128,7 @@
{ id: 3, name: "張大雄", email: "daxiong@example.com", phone: "0912-333-444" }, { id: 3, name: "張大雄", email: "daxiong@example.com", phone: "0912-333-444" },
{ id: 4, name: "李小龍", email: "dragon@example.com", phone: "0900-111-222" }, { id: 4, name: "李小龍", email: "dragon@example.com", phone: "0900-111-222" },
{ id: 5, name: "周杰倫", email: "jay@example.com", phone: "0988-888-888" }, { id: 5, name: "周杰倫", email: "jay@example.com", phone: "0988-888-888" },
{ id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777" }, { id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777"},
{ id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666" }, { id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666" },
{ id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555" }, { id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555" },
{ id: 9, name: "陳小春", email: "chen@example.com", phone: "0911-111-111" }, { id: 9, name: "陳小春", email: "chen@example.com", phone: "0911-111-111" },
@ -139,8 +153,8 @@
<td>${r.email}</td> <td>${r.email}</td>
<td>${r.phone}</td> <td>${r.phone}</td>
<td> <td>
<a href="resident_edit.html?id=${r.id}" class="btn btn-warning btn-sm me-1">編輯</a> <a href="resident_edit.html?id=${r.id}" class="btn btn-warning btn-sm me-1 rounded-pill">編輯</a>
<button class="btn btn-danger btn-sm" onclick="deleteResident(${r.id})">刪除</button> <button class="btn btn-outline-danger btn-sm rounded-pill" onclick="deleteResident(${r.id})">刪除</button>
</td> </td>
`; `;
tbody.appendChild(row); tbody.appendChild(row);