.top_nav { width: 100%; height: auto; background-color: #ffffff; padding-left: .68rem; padding-right: .5rem; flex-direction: column; position: relative; } .top_nav.active { position: fixed; top: 2rem; left: 0; z-index: 20; } .top_nav .top, .top_nav .nav { width: 100%; } .top_nav .top { height: 2.25rem; } .top_nav .img { height: 1.02rem; } .top_nav .change { width: 6.95rem; } .top_nav .change a:nth-child(1) { width: 0.8rem; } .top_nav .change a:nth-child(2) { width: 0.98rem; } .top_nav .change a:nth-child(3) { width: 1.2rem; } .top_nav .change a:nth-child(4) { width: 0.98rem; } .top_nav .change a:nth-child(5) { width: 0.93rem; } .top_nav .change a img { width: 100%; } .top_nav .nav { position: relative; height: 1.5rem; } .top_nav .nav li { font-size: 0.55rem; color: #333333; margin-right: .6rem; flex-shrink: 0; } .top_nav .nav li.active{ color: #ff1e4c ; } .top_nav .scroll{ overflow-x: scroll; } /* 婊氬姩妲?*/ .top_nav ::-webkit-scrollbar { width: 6px; height: 6px; display: none; } .top_nav ::-webkit-scrollbar-track { border-radius: 3px; background: rgba(0, 0, 0, 0.06); -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08); display: none; } /* 婊氬姩鏉℃粦鍧?*/ .top_nav ::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(0, 0, 0, 0.12); -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); display: none; } .top_nav li:last-child { margin: 0; } .top_nav .nav .menu { width: 2rem; height: 1rem; flex-shrink: 0; background: linear-gradient(to right, #ffffffcf, #ffffff); position: absolute; right: -.75rem; justify-content: flex-end; } .top_nav .nav .menu img { width: 0.57rem; margin-right: .5rem; } .top_nav .nav .menu.active img { transform: rotatez(180deg); } .top_nav .nav_hide { position: absolute; top: 3.7rem; left: 0; width: 100%; height: auto; background-color: #ffffff; font-size: 0.6rem; height: 0; overflow: hidden; z-index: 10; } .top_nav .nav_hide.active { height: auto; padding: .5rem .75rem .5rem 0.75rem; } .top_nav .nav_hide>div { flex-wrap: wrap; } .top_nav .nav_hide ul { margin-bottom: .3rem; } .top_nav .nav_hide li { width: 32%; line-height: 1.15rem; height: 1.15rem; border-radius: 0.1rem; border: solid 0.05rem #ededed; font-size: .5rem; color: #666666; } .top_nav .nav_hide ul:nth-child(3) { margin-bottom: 0; } .top_nav .nav_hide .item.active { background: #ff1e4c url(/uploads/image/svimg/tab_active.png) no-repeat; background-size: auto 100%; background-position: right; border-color: transparent; color: #ffffff; } .section { margin-top: 0.9rem; } .section .title { font-family: 'pingfang bold'; margin-bottom: .5rem; font-size: 0.75rem; padding: 0 0.5rem; } .section .title .more { font-size: 14px; color: #666666; cursor: pointer; } .section .title .more:hover { color: #ff0000; } .section .title .more img { margin-left: .2rem; } .section .video_list { flex-wrap: wrap; } .section .video_list a { width: 33.33%; height: 8rem; background-color: #000000; overflow: hidden; position: relative; border: 1px solid #ffffff; } .section .video_list a:nth-child(2),.section .video_list a:nth-child(5){ border-right: none; border-left: none; } .section .video_list a:nth-child(4), .section .video_list a:nth-child(5), .section .video_list a:nth-child(6){ border-top: none; } .section .video_list a::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.2); z-index: 4; } .section .video { width: 100%; height: 100%; background-color: #000000; } .section a:nth-child(3n) { margin-right: 0; } .section .video video { height: 100%; width: 100%; background-color: #000000; } .section .video_list a p { width: 100%; height: 2rem; position: absolute; bottom: 0; left: 0; color: #ffffff; background: #000000; font-size: .5rem; } .section .video_list a p span{ width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; /* 鍑犺鍚庢樉绀轰笉寮€鐪佺暐 */ -webkit-line-clamp: 2; padding: 0 .4rem; z-index: 5; text-align: center; }