#main { height: unset; overflow-y: auto; /* 允许垂直滚动 */ } #list-panel { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; /* 调整子项内容间距 */ padding: 20px; width: 100%; overflow-y: scroll; } .list-item { width: calc(25% - 7.5px); background-color: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; } .list-item-image { width: 100%; height: 225px; /* 16:9 aspect ratio for 400px width */ object-fit: cover; border-top-left-radius: 8px; border-top-right-radius: 8px; } .list-item-content { padding: 10px 15px; /* 调整子项内容间距 */ display: flex; justify-content: space-between; align-items: center; } .list-item-name { font-size: 18px; font-weight: 600; } .list-item-actions { position: relative; } .action-btn { background: none; border: none; cursor: pointer; font-size: 20px; } .action-menu { display: none; position: absolute; right: 0; top: 30px; background-color: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 1; min-width: 80px; padding: 5px 0; } .action-menu button { display: block; width: 100%; padding: 8px 12px; border: none; background: none; text-align: center; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease; color: #333; } .action-menu button:hover { background-color: #f0f0f0; } .list-item-date { padding: 0 15px 10px; /* 调整子项内容间距 */ font-size: 12px; color: #999; }