lywsvip/LibreTV
1
0
Fork 0
mirror of https://github.com/LibreSpark/LibreTV.git synced 2026-05-07 06:06:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

Test: 优化卡片布局和标题显示，提升用户体验

Browse Source
This commit is contained in:
developer
2025-04-22 22:00:12 +08:00
parent e1c90930b4
commit 08e4dea7a8
3 changed files with 29 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/styles.css
View File

@@ -54,11 +54,11 @@ button, .card-hover {
/* 针对不同长度的标题优化显示 */
.card-hover h3 {
min-height: 3rem; /* 至少能显示2行标题 */
min-height: 3rem;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2; /* 最多显示2行 */
-webkit-line-clamp: 2;
}
.card-hover::before {

14
index.html
View File

@@ -252,13 +252,15 @@
<!-- 搜索结果：初始隐藏 -->
<div id="resultsArea" class="w-full hidden">
<!-- 修改这里：移除旧的返回首页按钮 -->
<div class="flex justify-end items-center mb-4">
<div class="text-sm text-gray-400">
<span id="searchResultsCount">0</span> 个结果
<div class="mx-auto max-w-7xl px-2"> <!-- 添加最大宽度限制并居中 -->
<div class="flex justify-end items-center mb-4">
<div class="text-sm text-gray-400">
<span id="searchResultsCount">0</span> 个结果
</div>
</div>
<div id="results" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
<!-- 结果将在这里动态生成 -->
</div>
</div>
<div id="results" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
</div>
</div>
</div>

41
js/app.js
View File

@@ -716,59 +716,56 @@ async function search() {
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
const sourceInfo = item.source_name ?
`<span class="bg-[#222] text-xs px-2 py-1 rounded-full">${item.source_name}</span>` : '';
`<span class="bg-[#222] text-xs px-1.5 py-0.5 rounded-full">${item.source_name}</span>` : '';
const sourceCode = item.source_code || '';
// 添加API URL属性，用于详情获取
const apiUrlAttr = item.api_url ?
`data-api-url="${item.api_url.replace(/"/g, '&quot;')}"` : '';
// 重新设计的卡片布局 - 支持更好的封面图显示
// 更紧凑的卡片布局
const hasCover = item.vod_pic && item.vod_pic.startsWith('http');
return `
<div class="card-hover bg-[#111] rounded-lg overflow-hidden cursor-pointer transition-all hover:scale-[1.02] h-full"
<div class="card-hover bg-[#111] rounded-lg overflow-hidden cursor-pointer transition-all hover:scale-[1.02] h-full shadow-sm hover:shadow-md"
onclick="showDetails('${safeId}','${safeName}','${sourceCode}')" ${apiUrlAttr}>
<div class="md:flex">
<div class="flex flex-col h-full">
${hasCover ? `
<div class="md:w-1/4 relative overflow-hidden">
<div class="w-full h-40 md:h-full">
<img src="${item.vod_pic}" alt="${safeName}"
class="w-full h-full object-cover transition-transform hover:scale-110"
onerror="this.onerror=null; this.src='https://via.placeholder.com/300x450?text=无封面'; this.classList.add('object-contain');"
loading="lazy">
<div class="absolute inset-0 bg-gradient-to-t from-[#111] to-transparent opacity-60"></div>
</div>
<div class="relative overflow-hidden" style="height: 160px;">
<img src="${item.vod_pic}" alt="${safeName}"
class="w-full h-full object-cover transition-transform hover:scale-110"
onerror="this.onerror=null; this.src='https://via.placeholder.com/300x450?text=无封面'; this.classList.add('object-contain');"
loading="lazy">
<div class="absolute inset-0 bg-gradient-to-t from-[#111] to-transparent opacity-60"></div>
</div>` : ''}
<div class="p-3 flex flex-col flex-grow ${hasCover ? 'md:w-3/4' : 'w-full'}">
<div class="p-2 flex flex-col flex-grow">
<div class="flex-grow">
<h3 class="text-lg font-semibold mb-2 break-words">${safeName}</h3>
<h3 class="text-sm font-semibold mb-1 break-words line-clamp-2">${safeName}</h3>
<div class="flex flex-wrap gap-1 mb-2">
<div class="flex flex-wrap gap-1 mb-1">
${(item.type_name || '').toString().replace(/</g, '&lt;') ?
`<span class="text-xs py-0.5 px-1.5 rounded bg-opacity-20 bg-blue-500 text-blue-300">
`<span class="text-xs py-0 px-1 rounded bg-opacity-20 bg-blue-500 text-blue-300">
${(item.type_name || '').toString().replace(/</g, '&lt;')}
</span>` : ''}
${(item.vod_year || '') ?
`<span class="text-xs py-0.5 px-1.5 rounded bg-opacity-20 bg-purple-500 text-purple-300">
`<span class="text-xs py-0 px-1 rounded bg-opacity-20 bg-purple-500 text-purple-300">
${item.vod_year}
</span>` : ''}
</div>
<p class="text-gray-400 text-xs h-9 overflow-hidden">
<p class="text-gray-400 text-xs line-clamp-1 overflow-hidden">
${(item.vod_remarks || '暂无介绍').toString().replace(/</g, '&lt;')}
</p>
</div>
<div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-800">
<div class="flex justify-between items-center mt-1 pt-1 border-t border-gray-800 text-xs">
${sourceInfo ? `<div>${sourceInfo}</div>` : '<div></div>'}
<div>
<span class="text-xs text-gray-500 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
点击播放
播放
</span>
</div>
</div>