/* 头部吸顶 */ .header { /* padding: 0 16px; */ padding-top: 0; background-color: #000; } .accountRight { display: flex; align-items: center; } .addressImg { width: 22px; height: 22px; } .navShow { width: 100%; padding: 0 .32rem; margin-top: 15px; box-sizing: border-box; overflow-x: scroll; /* 设置溢出滚动 */ white-space: nowrap; overflow-y: hidden; /* 隐藏滚动条 */ scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ } .navShow::-webkit-scrollbar { display: none; /* Chrome Safari */ } .headBanner { display: flex; flex-direction: column; align-items: center; margin-top: .4rem; } /* 导航分类 */ .nav { display: flex; justify-content: space-between; align-items: center; } .nav li{ display: flex; flex-direction: column; justify-content: center; align-items: center; /* flex: 1; */ /* width: 1.8rem; */ } .nav li img { width: 20px; height: 20px; } .nav li .asiaimg { width: 25px; height: 20px; } .navText { margin-top: 10px; text-align: center; } .searchInputContent { display: flex; justify-content: space-between; align-items: center; width: 100%; } .clearTextImg { width: 20px; height: 20px; } /* 搜索 */ .searchImg, .userImg { width: 30px; height: 30px; margin-right: .4rem; } /* 主要展示区 */ .main { /* padding: 0 0 1rem 0; */ padding-bottom: .1rem; min-height: 60vh; } /* 视频 */ .videopage { } .title { margin-left: 13px; min-height: 27px; line-height: 27px; font-size: .38rem; color: #fff; } .titleHead { } .tail { } h2 { margin-left: 13px; margin-top: 20px; min-height: 27px; line-height: 27px; } .video { padding: .3rem 0; display: flex; flex-direction: column; /* justify-content: center; */ align-items: center; } /* 单条视频 */ .videoContent { background-color: #1C1A1B; width: 100%; min-height: 4rem; border-radius: 5px; margin-bottom: .4rem; } .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; } .loadingImg { width: 1.6rem; height: 1.52rem; } .loadingText { text-align: center; margin-top: 4px; color: #8E8D8D; font-size: 12px; } .videoPhoto, .bannerImg { position: relative; width: 100%; height: 3.6rem; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; border-top-left-radius:4px; border-top-right-radius:4px; } .bannerImg { height: 4rem; border-radius: .04rem; } .videoTitle { margin: .1rem .3rem; font-size: .28rem; /* 两行展示 */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } .videoTime { position: absolute; bottom: .1rem; right: .1rem; width: 1.6rem; background-color: rgba(0, 0, 0, 0.6); border-radius: .1rem; height: .4rem; line-height: .4rem; text-align: center; } /* 热门标签 */ .labelpage{ display: none; padding-top: .3rem; } .hotLabel { /* text-align: center; */ /* display: grid; */ /* // 设置网格布局 */ /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */ /* // 列的比例分布,分成三例,每列占比总宽度的1/3 */ /* grid-gap: .08rem; */ /* // 各网格间距为10px */ /* padding-bottom: .12rem; */ display: flex; flex-wrap: wrap; padding:0 .26rem; } .label { margin-right: .12rem; margin-bottom: .12rem; /* width: 1.32rem; */ padding: .2rem .2rem; border-radius: .2rem; /* height: 1rem; */ background-color: #262626; font-size: .28rem; text-align: center; } .backToTop { position: fixed; bottom: 3.3rem; right: .3rem; width: .68rem; height: .68rem; display: none; } .backToTopImg { width: 100%; height: 100%; opacity: .5; } button { display: inline-block; padding: 6px 12px; font-weight: 400; line-height: 1.42857143; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; border-color: #28a4c9; color: #fff; background-color: #5bc0de; margin: 20px 20px 0 0; } .box { width: 100%; /* padding-bottom: 1.5rem; */ height: 80px; display: none; } .page { width: 100%; } .info { width: 200px; height: 34px; line-height: 34px; } .fl { float: left; } .textwrap { display: flex; justify-content: center; align-items: center; } .tiptext { background-color: #000; border-radius: .1rem; text-align: center; padding: .1rem .2rem; } .bottomLoadContent { display: none; } .quanWrap { display: flex; justify-content: center; align-items: center; } .quanText { font-size: .3rem; color: #fff; } .quanquan { margin-left: 20px; width: 20px; height: 20px; } .ageTipPage, .addressBox { z-index: 999; display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.6); } .ageTipPageContent { background-color: #25252A; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7rem; height: 380px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; text-align: center; } .ageTipPageTitle { color: #DFDFDF; font-size: 27px; margin-top: 50px; } .ageTipPageText { margin-top: 30px; margin-bottom: 30px; font-size: 25px; color: #878789; } .ageTipPageTip { font-size: 13px; color: #959597; padding: 0 32px; } .confirmBtn { border-radius: 25px; height: 50px; line-height: 50px; width: 4.6rem; text-align: center; color: #fff; background-color: #CF5731; margin-top: 30px; } /* 筛选区 */ .filterArea { } .screenHeader { height: .6rem; overflow-y: scroll; -webkit-overflow-scrolling: touch; margin: .3rem .26rem .2rem .26rem; } .screenHeader::-webkit-scrollbar { display: none; height: .6rem; } .screenHeaderContent { display: flex; width: 10rem; height: .6rem; } .screenHeaderContentLi { width: 2rem; text-align: center; margin-right: .2rem; height: .6rem; line-height: .6rem; /* padding: 0 .28rem; */ background-color: #1C1A1B; border-radius: .04rem; color: #FFE0D2; font-size: .22rem; text-align: center; display: flex; justify-content: center; align-items: center; } .openImg { width: .3rem; height: .3rem; } .isscreenHeaderContentLi { background-color: #CE5C2A; color: #fff; } .FilteringModules { background-color: #2F2F2F; padding: .3rem .26rem; display: none; } .filterClear { display: flex; justify-content: space-between; align-items: center; height: .64rem; background-color: #1C1A1B; border-radius: .08rem; } .filterClearText { color: #CE5C2A; font-size: .26rem; margin-left: .2rem; } .filterClearImg { width: .48rem; height: .48rem; margin-right: .2rem; } .filterTime { display: flex; justify-content: space-between; align-items: center; background-color: #1C1A1B; border-radius: .08rem; margin-top: .3rem; overflow: hidden; padding: .2rem 0; } .filterLabelText { } #filterLabelTextTime { width: 1rem; } .filterTimeInteractive { margin-right: .2rem; } #box1{ width: 5rem; height: .8rem; display: none; } .range{ position: relative; width: 5rem; height: .8rem; display: flex; justify-content: center; align-items: center; } .chunk-one,.chunk-two{ position: absolute; left: 0; width: .3rem; height: .3rem; border-radius: 50%; background-color: #fff; z-index: 10; cursor: pointer; transition: all .05s linear; box-sizing: border-box; } .range .chunk-two{ left: 100%; background-color: #fff; } .strip-one,.strip-two{ position: absolute; left: 0; height: 2px; width: 100%; } .strip-one{ background-color: #666; } .strip-two{ width: 100%; background-color: #CE5C2A; } strong{ opacity: 0; } .filterTimeTextWrap { display: flex; justify-content: space-between; align-items: center; } .filterTimeText { /* text-align: center; */ width: .6rem; } .filterLabelGroup { padding: .3rem 0 ; background-color: #1C1A1B; border-radius: .08rem; margin-top: .3rem; } .FilterLabelGroupContentWrap { display: flex; justify-content: space-between; } .FilterLabelGroupContent { display: flex; flex-wrap: wrap; margin-top: .36rem; margin-left: .2rem; } .filterLabelGroupText { margin-right: .2rem; margin-bottom: .2rem; padding: .04rem .1rem; border-radius: .08rem; background-color: #CE5C2A; color: #fff; font-size: .22rem; } .filterAddLabel { width: 1.8rem; display: flex; margin-right: .2rem; justify-content: space-between; } .filterAddLabelText { color: #E4E4E4; font-size: .22rem; } .filterAddLabelImg { width: .48rem; height: .48rem; } .filterLabelListContent { display: none; } .filterLabelList { margin-top: .2rem; background-color: #1C1A1B; border-radius: .16rem; display: flex; justify-content: space-between; align-items: center; width: 7rem; height: 1rem; } .filterLabelText { margin-left: .2rem; font-size: .3rem; color: #E4E4E4; } .filterLabelAdd { margin-right: .2rem; width: .48rem; height: .48rem; } .filterSwitch { background-color: rgba(0, 0, 0, 1); position: fixed; bottom: 0rem; left: 0; padding: .26rem; display: none; } .filterSwitchContent { display: flex; } .cancelFilter { width: 2.4rem; height: .88rem; line-height: .88rem; background-color: #262626; text-align: center; border-radius: .16rem; } .starFilter { width: 4.48rem; height: .88rem; line-height: .88rem; background-color: #CE5C2A; color: #fff; text-align: center; border-radius: .16rem; margin-left: .1rem; } .tip { width: 6rem; height: 1rem; color: #fff; position: absolute; top: 53%; left: 50%; transform: translate(-50%,-53%); display: none; z-index: -1; } .banner { background-color: #1C1A1B; width: 100%; border-radius: .1rem; margin-bottom: .4rem; } .media { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 3.6rem; display: none; } /* 亚洲筛选 */ .asiaScreenContent { margin-top: .3rem; margin-left: .3rem; width: 90%; overflow-x: scroll; /* 设置溢出滚动 */ white-space: nowrap; overflow-y: hidden; /* 隐藏滚动条 */ scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ display: none; } .asiaScreenContent::-webkit-scrollbar { display: none; /* Chrome Safari */ } .asiaScreenContentUl { /* margin-left: .3rem; */ width: 150%; display: flex; align-items: center; } .asiaScreenContentUlLi { margin-right: .2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: .1rem; border: 1px solid #2F2F2F; padding: 0 .26rem; height: 1rem; } .asiaScreenContentUlLiIsSelect { background-color: #2F2F2F; } .addressBoxContent { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7rem; display: flex; flex-direction: column; align-items: center; text-align: center; } .lingDang { position: absolute; top: 0; width: 2.4rem; height: 1.6rem; } .addressBoxTxtContent { background-color: #25252A; border-radius: 6px; padding: 1.4rem .4rem .4rem; margin-top: .54rem; } .addressBoxTxtContent p{ text-align: left; } .addressTxt, .address { margin-bottom: .2rem; } .address { color: #CF5831; text-align: left; } .iSee { margin-top: .6rem; width: 6.2rem; height: 1.1rem; line-height: 1.1rem; text-align: center; border-radius: .3rem; font-size: 20px; background: linear-gradient(to bottom, #F85840, #F74149); } .addressBoxClose { margin-top: .4rem; width: .5rem; height: .5rem; } .filterTimeContent { margin-right: .2rem; }