/* 已购剧集 H5:以 Figma 375px 画板为基准。 */ @media (max-width: 768px) { .purchased-main { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: none; min-width: 0; margin: 0; padding: 12px var(--profile-gutter, 16px) 20px; } .purchased-note { margin: 0; color: #7c7c86; font-size: 12px; font-weight: 400; line-height: 18px; } .purchased-list { display: flex; flex-direction: column; width: 100%; min-width: 0; margin: 0; padding: 0; list-style: none; } .purchased-item { display: flex; align-items: center; gap: clamp(8px, 3.2vw, 14px); width: 100%; min-width: 0; min-height: 89px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); } .purchased-item__cover { display: block; flex: 0 0 clamp(41px, 12.8vw, 56px); width: clamp(41px, 12.8vw, 56px); height: clamp(55px, 17.066667vw, 75px); overflow: hidden; border-radius: 6px; background: #141417; } .purchased-item__cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .purchased-item__body { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; } .purchased-item__title { display: block; max-width: 100%; overflow: hidden; margin: 0; color: #f2f2f4; font-size: clamp(13px, 4vw, 15px); font-weight: 600; line-height: 21px; text-overflow: ellipsis; white-space: nowrap; } .purchased-item__info { display: block; max-width: 100%; color: #7c7c86; font-size: clamp(10px, 2.933333vw, 11px); font-weight: 400; line-height: 16px; white-space: normal; } .purchased-item__mobile-date { display: inline; white-space: nowrap; } .purchased-item__date { display: none; } .purchased-item__progress { display: block; width: min(140px, 100%); height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .12); } .purchased-item__progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff4a7b 0%, #ec237f 52%, #93226f 100%); } .purchased-item__resume { display: inline-flex; flex: 0 0 clamp(67px, 20.8vw, 88px); align-items: center; justify-content: center; gap: 6px; width: clamp(67px, 20.8vw, 88px); height: 32px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; background: transparent; color: #f2f2f4; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; } .purchased-item__resume svg, .purchased-item__resume img { display: block; flex: 0 0 16px; width: 16px; height: 16px; } .purchased-item__resume-desktop { display: none; } .purchased-item__resume-mobile { display: inline; } } @media (max-width: 359px) { .purchased-page .profile-tabs__inner { gap: 16px; } }