purovps/xdl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: wider container, larger table rows and video cards in admin

Browse Source
This commit is contained in:
mini
2026-02-18 23:41:22 +08:00
parent 64cfccdcc5
commit 5bc7f8d1df
2 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/views/Admin.vue
View File

@@ -277,13 +277,14 @@ onMounted(() => { fetchVideos(); fetchStats() })
.search-bar select { padding: 0.6rem; border: 1px solid #444; border-radius: 8px; background: #1a1a2e; color: #fff; }
.video-card {
display: flex; justify-content: space-between; align-items: center;
background: #1a1a2e; border-radius: 10px; padding: 1rem; margin-bottom: 0.8rem; gap: 1rem;
background: #1a1a2e; border-radius: 10px; padding: 1.1rem 1.3rem; margin-bottom: 0.9rem; gap: 1.2rem;
border: 1px solid #2a2a3e;
}
.video-main { display: flex; gap: 1rem; flex: 1; min-width: 0; }
.thumb { width: 80px; height: 45px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.video-main { display: flex; gap: 1.2rem; flex: 1; min-width: 0; }
.thumb { width: 112px; height: 63px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.info { min-width: 0; }
.info h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.3rem; }
.meta { display: flex; gap: 0.8rem; font-size: 0.85rem; color: #888; flex-wrap: wrap; }
.info h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.4rem; font-size: 1rem; }
.meta { display: flex; gap: 1rem; font-size: 0.88rem; color: #888; flex-wrap: wrap; }
.status-done { color: #27ae60; }
.status-downloading { color: #f39c12; }
.status-error { color: #e74c3c; }
@@ -297,24 +298,29 @@ onMounted(() => { fetchVideos(); fetchStats() })
.btn-del:hover { border-color: #e74c3c !important; }
/* Logs */
.log-filter { display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: center; }
.log-filter input { flex: 1; padding: 0.6rem 1rem; border: 1px solid #444; border-radius: 8px; background: #1a1a2e; color: #fff; }
.clear-btn { padding: 0.5rem 0.9rem; border: 1px solid #f39c12; border-radius: 8px; background: transparent; color: #f39c12; cursor: pointer; white-space: nowrap; font-size: 0.85rem; }
.log-table-wrap { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.log-table th { text-align: left; padding: 0.6rem 1rem; background: #1a1a2e; color: #888; border-bottom: 1px solid #333; white-space: nowrap; }
.log-table td { padding: 0.6rem 1rem; border-bottom: 1px solid #222; vertical-align: middle; }
.log-table tr:hover td { background: rgba(255,255,255,0.03); }
.td-time { color: #888; white-space: nowrap; font-size: 0.82rem; }
.td-ip { font-family: monospace; color: #7fdbff; white-space: nowrap; }
.td-location { white-space: nowrap; }
.flag { margin-right: 0.3rem; }
.location-text { color: #ccc; font-size: 0.88rem; }
.td-browser, .td-device { color: #ddd; white-space: nowrap; }
.td-video { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-filter { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; align-items: center; }
.log-filter input { flex: 1; padding: 0.7rem 1rem; border: 1px solid #444; border-radius: 8px; background: #1a1a2e; color: #fff; font-size: 0.95rem; }
.clear-btn { padding: 0.6rem 1rem; border: 1px solid #f39c12; border-radius: 8px; background: transparent; color: #f39c12; cursor: pointer; white-space: nowrap; font-size: 0.88rem; }
.log-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid #2a2a3e; }
.log-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 900px; }
.log-table th {
text-align: left; padding: 0.9rem 1.2rem;
background: #12122a; color: #999; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase;
border-bottom: 1px solid #2a2a3e; white-space: nowrap;
}
.log-table td { padding: 0.85rem 1.2rem; border-bottom: 1px solid #1e1e30; vertical-align: middle; }
.log-table tr:last-child td { border-bottom: none; }
.log-table tr:hover td { background: rgba(255,255,255,0.04); }
.td-time { color: #888; white-space: nowrap; font-size: 0.88rem; min-width: 140px; }
.td-ip { font-family: monospace; color: #7fdbff; white-space: nowrap; font-size: 0.92rem; min-width: 120px; }
.td-location { white-space: nowrap; min-width: 160px; }
.flag { margin-right: 0.35rem; font-size: 1.1rem; }
.location-text { color: #ccc; }
.td-browser, .td-device { color: #ddd; white-space: nowrap; min-width: 100px; }
.td-video { max-width: 380px; min-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-badge {
display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.4rem;
border-radius: 4px; margin-right: 0.4rem; vertical-align: middle; font-weight: 600;
display: inline-block; font-size: 0.72rem; padding: 0.15rem 0.5rem;
border-radius: 4px; margin-right: 0.4rem; vertical-align: middle; font-weight: 700; letter-spacing: 0.03em;
}
.plat-youtube { background: #c00; color: #fff; }
.plat-twitter { background: #1da1f2; color: #fff; }