/**** 视频列表 ****/ .contentbox { width: 100%; margin: 1.35rem auto 0.6rem; padding: 0 .38rem; box-sizing: border-box; } .contentbox .container{ width: 100%; } .selectlabels { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 0 0.32rem; } .selectlabellink { margin: 0 0.25rem 0.2rem 0; padding: 0 0.2rem; font-size: 0.28rem; line-height: 0.6rem; border: 1px solid #e8e8e8; border-radius: 4px; color: #666666; } .selectlabellink.active { border: 1px solid var(--themebordercolor); background: var(--themelinearcolor); color: #ffffff; } .viewpointsbar { width: 100%; height: 1.6rem; margin-bottom: .36rem; } .viewpointsbarimg { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; } /* 筛选条件弹出 */ .closedialog { top: .32rem; right: .4rem; background: url(/uploads/image/civideo/closeicon_2.svg) center center no-repeat; } .filterwindialogbox{ width: 6rem; padding: .6rem .28rem; box-sizing: border-box; border-radius: 4px; } .filterbox{ height: 7rem; margin-bottom: .48rem; overflow-y: auto; } .filtertype { margin-bottom: 0.48rem; } .filtertype:last-child{ margin-bottom: 0; } .filterlabel{ margin-bottom: .28rem; font-size: .28rem; color: #aaaaaa; } .filtertag{ display: flex; display: -webkit-flex; justify-content: flex-start; flex-wrap: wrap; } .filteritem{ height: .6rem; margin: 0 .2rem .2rem 0; padding: 0px 0.2rem; font-size: .28rem; color: #666666; line-height: .6rem; text-align: center; background: #f1f1f1; border-radius: 2px; } .filteritem.active{ color: #fff; background: var(--themelinearcolor); } .filtercontrolbox{ display: flex; display: -webkit-flex; justify-content: space-between; } .controlbtn{ width: 2.54rem; height: .78rem; line-height: .78rem; text-align: center; font-size: .32rem; border-radius: 8px; } .controlbtn.reset{ color: var(--themecolor); border: 1px solid var(--themecolor); } .controlbtn.confirm{ color: #fff; background:var(--themelinearcolor); } /* 视频专栏 */ .videotype { margin-bottom: 0.36rem; } .typecontrol{ font-size: 0; } .splitline,.videoitem{ display: inline-block; vertical-align: middle; } .videoitem { font-size: .24rem; margin: 0 0.16rem; color: #999999; } .videoitem:first-child{ margin-left: 0; } .splitline { width: 1px; height: .2rem; background-color: #e5e5e5; } .videoitem.active{ color: #0060df; } .filtericon{ padding-left: .4rem; box-sizing: border-box; font-size: .24rem; color: #666666; background: url(/uploads/image/civideo/filtericon.png) left center no-repeat; background-size: .28rem; } /* 视频内容 */ .publiccontentitem { width: 3.25rem; border-radius: 4px; margin-right: 0.24rem; margin-bottom: 0.4rem; } .publiccontentitem:nth-child(2n){ margin-right: 0; } .videocoverbox { position: relative; width: 100%; overflow: hidden; border-radius: 4px; } .videomask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(/uploads/image/civideo/video_1.png) center center no-repeat; background-size: .6rem; cursor: pointer; } .duration { position: absolute; display: block; bottom: 0.08rem; right: 0.08rem; width: 0.76rem; font-size: .24rem; color: #fff; height: 0.28rem; line-height: .28rem; text-align: center; border-radius: 2px; background: rgba(0,0,0,.3); } .newicon { position: absolute; display: block; top: 0; left: 0; font-size: .24rem; color: #fff; width: 0.68rem; text-align: center; line-height: .32rem; background-color: #ff3767; border-radius: 4px 0 8px 0px; } .videoimg { width: 100%; height: 1.84rem; object-fit: cover; border-radius: 4px; } .textflow { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .videotitle { height: 0.76rem; margin: 0.24rem auto; font-size: .28rem; color: #252525; line-height: .38rem; } .videodesc { height: 0.24rem; font-size: .24rem; color: #666666; line-height: .24rem; } .videodesc.textflow{ -webkit-line-clamp: 1; } .videotypebox { margin-top: 0.36rem; } .videotopic, .videotime { font-size: .24rem; color: #aaaaaa; line-height: .24rem; } .videotopic{ max-width: 1.48rem; } .videotopic.textflow{ -webkit-line-clamp: 1; } .videotime { padding-left: 0.36rem; box-sizing: border-box; background: url(/uploads/image/civideo/time_icon.png) left center no-repeat; background-size: 0.28rem; } .loadmorebtn{ display: block; margin: 0 auto; }