/* 全局 */ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; background: #fff; color: #111; } a { color: inherit; text-decoration: none; } /* 容器形态:H5 100% + PC 居中 */ .main, .section { width: 94%; max-width: 1200px; margin: auto; } /* 顶部导航 */ .nav { background: #fff; border-bottom: 1px solid #eee; } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 12px; } .logo { font-size: 20px; font-weight: bold; color: var(--primary-color); } .search input { height: 32px; width: 120px; border-radius: 6px; border: 1px solid #ddd; padding: 0 10px; } /* 菜单 */ .menu-pc { display: none; } .menu-h5 { display: none; flex-direction: column; padding: 10px; } .menu-h5 a { padding: 10px 0; border-bottom: 1px solid #eee; } .menu-h5.show { display: flex; } .menu-btn { font-size: 22px; cursor: pointer; } /* PC 时显示 pc 菜单 */ @media(min-width: 768px){ .menu-pc { display: flex; } .menu-pc a { margin-left: 20px; } .menu-btn { display: none; } .menu-h5 { display: none !important; } } /* banner */ .banner { background: linear-gradient(135deg,var(--primary-color),var(--secondary-color)); padding: 60px 20px; color: #fff; border-radius: 12px; margin: 20px auto; text-align: center; } /* 网格布局 */ .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } @media(min-width: 600px){ .grid { grid-template-columns: repeat(5,1fr); } } @media(min-width: 992px){ .grid { grid-template-columns: repeat(6,1fr); } } .card-img img { width: 100%; border-radius: 10px; } .card-title { margin-top: 8px; font-size: 14px; } /* 详情页 */ .detail-head { display: flex; flex-direction: column; gap: 20px; margin: 20px auto; } @media(min-width: 768px){ .detail-head { flex-direction: row; } } .detail-cover img { width: 180px; border-radius: 12px; } .detail-info { flex: 1; } .btn { display: inline-block; padding: 10px 16px; background: var(--primary-color); color: #fff; border-radius: 6px; } /* 选集 */ .episode-list { display: flex; flex-wrap: wrap; gap: 10px; } .episode-list a { padding: 6px 12px; border: 1px solid #ddd; border-radius: 6px; } .episode-list a.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); } /* 播放器 */ .player-box iframe, .player-box video { width: 100%; height: 220px; } @media(min-width: 768px){ .player-box iframe, .player-box video { height: 500px; } } /* footer */ .footer { margin-top: 40px; padding: 20px 0; text-align: center; font-size: 13px; color: #777; border-top: 1px solid #eee; }