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

54
Backstage/resident_activation.html
View File

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

70
Backstage/resident_list.html
View File

@ -38,18 +38,38 @@
nav.pagination-fixed .pagination {
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>
</head>
<body>
<div class="container mt-4">
<h2 class="mb-4">居民列表</h2>
<div class="row g-2 mb-3">
<div class="col-4 col-md-2 col-lg-1">
<a href="resident_add.html" class="btn btn-success w-100">新增</a>
<div class="row g-2 mb-3">
<div class="col-4 col-md-2 col-lg-1">
<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 class="row g-2 mb-3">
<div class="row g-2 mb-3">
<div class="col-sm-6 col-md-3 col-lg-2">
<input type="text" id="searchName" class="form-control" placeholder="搜尋姓名">
</div>
@ -57,17 +77,11 @@
<input type="text" id="searchEmail" class="form-control" placeholder="搜尋 Email">
</div>
<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 class="col-6 col-md-3 col-lg-2">
<button class="btn btn-danger w-100" onclick="deleteSelected()">刪除勾選</button>
<div class="col-6 col-md-2 col-lg-1">
<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>
<table class="table table-striped table-bordered">
@ -87,7 +101,7 @@
<nav class="pagination-fixed">
<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-dialog modal-sm modal-dialog-centered">
@ -110,17 +124,17 @@
let currentPage = 1;
let residents = [
{ id: 1, name: "王小明", email: "xiaoming@example.com", phone: "0912-345-678" },
{ id: 2, name: "林美麗", email: "meili@example.com", phone: "0987-654-321" },
{ id: 3, name: "張大雄", email: "daxiong@example.com", phone: "0912-333-444" },
{ id: 4, name: "李小龍", email: "dragon@example.com", phone: "0900-111-222" },
{ id: 5, name: "周杰倫", email: "jay@example.com", phone: "0988-888-888" },
{ id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777" },
{ id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666" },
{ id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555" },
{ id: 9, name: "陳小春", email: "chen@example.com", phone: "0911-111-111" },
{ id: 10, name: "五月天", email: "mayday@example.com", phone: "0922-222-222" },
{ id: 11, name: "田馥甄", email: "hebe@example.com", phone: "0933-333-333" },
{ id: 12, name: "鄧紫棋", email: "gem@example.com", phone: "0944-444-444" }
{ id: 2, name: "林美麗", email: "meili@example.com", phone: "0987-654-321" },
{ id: 3, name: "張大雄", email: "daxiong@example.com", phone: "0912-333-444" },
{ id: 4, name: "李小龍", email: "dragon@example.com", phone: "0900-111-222" },
{ id: 5, name: "周杰倫", email: "jay@example.com", phone: "0988-888-888" },
{ id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777"},
{ id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666" },
{ id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555" },
{ id: 9, name: "陳小春", email: "chen@example.com", phone: "0911-111-111" },
{ id: 10, name: "五月天", email: "mayday@example.com", phone: "0922-222-222" },
{ id: 11, name: "田馥甄", email: "hebe@example.com", phone: "0933-333-333" },
{ id: 12, name: "鄧紫棋", email: "gem@example.com", phone: "0944-444-444" }
];
function renderTable(data) {
@ -139,8 +153,8 @@
<td>${r.email}</td>
<td>${r.phone}</td>
<td>
<a href="resident_edit.html?id=${r.id}" class="btn btn-warning btn-sm me-1">編輯</a>
<button class="btn btn-danger btn-sm" onclick="deleteResident(${r.id})">刪除</button>
<a href="resident_edit.html?id=${r.id}" class="btn btn-warning btn-sm me-1 rounded-pill">編輯</a>
<button class="btn btn-outline-danger btn-sm rounded-pill" onclick="deleteResident(${r.id})">刪除</button>
</td>
`;
tbody.appendChild(row);