查看种子详细信息用户端和管理员端界面
Change-Id: I29e761d67a1eab741a91feb3f4c686055bb1b382
diff --git a/src/torrentlist.css b/src/torrentlist.css
new file mode 100644
index 0000000..b6fa9d1
--- /dev/null
+++ b/src/torrentlist.css
@@ -0,0 +1,168 @@
+/* 加载状态 */
+.loading-container {
+ height: 16rem; /* 64 x 4 */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.spinner {
+ border: 4px solid #f3f3f3;
+ border-top: 4px solid #f59e0b; /* 橙黄色 */
+ border-radius: 50%;
+ width: 48px;
+ height: 48px;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ to { transform: rotate(360deg); }
+}
+
+/* 容器和网格 */
+.torrents-container {
+ padding: 16px;
+ background-color: #f9fafb;
+ min-height: 100vh;
+}
+
+.torrents-grid {
+ display: grid;
+ /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); */
+ grid-template-columns: repeat(4, 1fr); /* 固定每行4列 */
+ gap: 24px;
+}
+
+.torrents1-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr); /* 固定每行4列 */
+ gap: 24px;
+}
+
+
+/* 卡片样式 */
+.torrent-card {
+ background-color: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ transition: box-shadow 0.3s ease;
+}
+
+.torrent-card:hover {
+ box-shadow: 0 6px 16px rgb(0 0 0 / 0.15);
+}
+
+/* 封面区域 */
+.cover {
+ height: 160px;
+ overflow: hidden;
+ background-color: #e5e7eb;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.cover-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.no-cover {
+ color: #9ca3af;
+ font-size: 14px;
+}
+
+/* 信息区域 */
+.info {
+ padding: 16px;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #d97706; /* 橙色 */
+ margin: 0 0 6px 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.description {
+ font-size: 14px;
+ color: #6b7280;
+ margin: 0 0 12px 0;
+ height: 36px; /* 限制两行高度 */
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.details {
+ font-size: 12px;
+ color: #6b7280;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-bottom: 16px;
+}
+
+.details span {
+ white-space: nowrap;
+}
+
+/* 操作按钮 */
+.actions {
+ margin-top: auto;
+ display: flex;
+ gap: 12px;
+}
+
+.btn {
+ flex: 1;
+ padding: 8px 12px;
+ border-radius: 6px;
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ user-select: none;
+ transition: background-color 0.3s ease;
+ border: none;
+}
+
+.btn-download {
+ background-color: #f97316; /* 明亮橙色 */
+ color: white;
+}
+
+.btn-download:hover {
+ background-color: #ea580c; /* 深橙 */
+}
+
+.btn-detail {
+ background-color: #e5e7eb;
+ color: #374151;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.btn-detail:hover {
+ background-color: #d1d5db;
+}
+
+/* 没有数据提示 */
+.no-data {
+ text-align: center;
+ color: #6b7280;
+ font-size: 18px;
+ margin-top: 80px;
+}
+