applet/sph_applet/pages/cyRank/index.wxss

.rank_bg{
  width: 100%;
  height: 1300rpx;
  position: fixed;
  top: 0;
  left: 0;
}
.searchPlaceholderHome {
  color: #2562FF;
}
.headerBox{
  width: 100%;
  position: fixed;
  left: 0;
  top: 0rpx;
  z-index: 999;
  background: #2562FF;
}
.header{
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.header .search{
  width: 38rpx;
  height: 38rpx;
  position: absolute;
  left: 30rpx;
  top: 50%;
  transform: translateY(-50%);
}
.header .pageName{
  color: #ffffff;
  width: 300rpx;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 44rpx;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;    
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}
.tabBox{
  color: #ffffff;
  font-size: 28rpx;
  line-height: 40rpx;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 14rpx 20rpx;
  background: #2562FF;
}
.tabBox .tab.tabActive {
  font-size: 32rpx;
  color: #fff;
}
.tabBox .tab.tabActive::after{
  content: '';
  display: block;
  width: 44rpx;
  height: 6rpx;
  background: #FFFFFF;
  border-radius: 5rpx;
  margin: auto;
  margin-top: 16rpx;
}
.tabBox .tab{
  width: 150rpx;
  text-align: center;
  color: #E3E3E3;
  font-size: 28rpx;
}
.choiceBox{
  position: relative;
  padding: 0 0 22rpx 28rpx;
}
.choiceBox .choice{
  display: inline-block;
  /* float: left; */
  color: #2562FF;
  border-radius: 32rpx;
  /* border: 1rpx solid #fff; */
  display: inline-block;
  padding: 0 20rpx;
  height: 64rpx;
  background: #ffffff;
  font-size: 28rpx;
  line-height: 64rpx;
  position: relative;
  z-index: 2;
  margin-right: 24rpx;
}
.choiceBox .choice .sj{
  display: inline-block;
  /* 
  width: 0;
  height: 0;
  border-right: 13rpx solid transparent;
  border-left: 13rpx solid transparent;
  border-top: 13rpx solid #2562FF;
  vertical-align: middle; */
}
.choiceBox .choice .sj image {
  width: 20rpx;
  height: auto;
}
.choiceBox .choiceActive{
  /* background: #2562FF !important;
  color: #fff!important; */
  /* background: #fff!important;
  color: #2562FF!important;
  border: 2rpx solid #2562FF!important; */
  z-index: 3;
}
/* .choiceBox .choiceActive .sj {
  border-top: 13rpx solid #2562FF;
} */
.choiceBox .timeChoice{
  position: absolute;
  left: 0;
  top: 68rpx;
  width: 100vw;
  min-height: 80vh;
  z-index: 2;
}
.choiceBox .timeChoice .block{
  background: #F3F7F9;
  padding: 50rpx;
}
.choiceBox .timeChoice .timeChoiceBox view{
  height: 58rpx;
  line-height: 58rpx;
  background: rgba(172, 195, 255, .4);
  border-radius: 29rpx;
  padding: 0 20rpx;
  color: #2B3D6E;
  font-size: 28rpx;
  display: inline-block;
  margin-right: 12rpx;
  margin-bottom: 38rpx;
}
.scrollMain {
  overflow-y: scroll;
  background: #F1F1F1;
  min-height: 90vh;
}
.choiceMain {
  background: #F1F1F1;
  border-top-left-radius: 54rpx;
  border-top-right-radius: 54rpx;
  z-index: 1000;
}
.timeChoiceBox .choiceActive {
  background: #2562FF!important;
  color: #fff!important;
}
.timeChoice .timeChoiceBox1 view{
  margin-right: 20rpx;
}
.all {
  background: #F1F1F1;
  position: relative;
}
.cantiner{
  position: relative;
  z-index: 1;
  border-top-left-radius: 46rpx;
  border-top-right-radius: 46rpx;
}
.listBigBox{
  margin: 0 20rpx 20rpx;
  height: 238rpx;
  background: #fff;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12rpx;
}
.listBigBox .list_videoImgBox{
  width: 246rpx;
  height: 174rpx;
  position: relative;
  border-radius: 11rpx;
  overflow: hidden;
}
.listBigBox .list_videoImg{
  width: 246rpx;
  height: 174rpx;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.listBigBox .list_Info{
  flex: 1;
  margin-left:12rpx ;
  max-width: 420rpx;
}
.listBigBox .list_Info .videoTitle{
  font-size: 28rpx;
  font-weight: bold;
  line-height: 40rpx;
  width: 420rpx;
  overflow: hidden;
  text-overflow:ellipsis; white-space: nowrap;
  color: #000;
}
.userTitleBox{
  display: flex;
  align-items: center;
  margin-top: 30rpx;
}
.userTitleBox .userBox{
  display: flex;
  align-items: center;
}
.userTitleBox .userBox .head_url{
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}
.userTitleBox .userTitle{
  max-width: 200rpx;
  color: #000;
  font-size: 28rpx;
  line-height: 30rpx;
  overflow: hidden;
  text-overflow:ellipsis; white-space: nowrap;
  /* margin-top: 10rpx; */
}
.userTitleBox .auth_div{
  flex: 1;
  overflow: hidden;
  text-overflow:ellipsis; 
  white-space: nowrap;
  margin-left: 10rpx;
  max-width: 200rpx;
}
.userTitleBox .auth_div .icon{
  width: 34rpx;
  height: 34rpx;
  vertical-align: middle;
}
.userTitleBox .auth_div text{
  color: #89899C;
  font-size: 24rpx;
  line-height: 34rpx;
  vertical-align: middle;
}
.listBigBox .list_Info .other{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10rpx;
}
.listBigBox .list_Info .other .time{
  color: #89899C;
  font-size: 26rpx;
  line-height: 36rpx;
}
.listBigBox .list_Info .other .zan image{
  width: 26rpx;
  height: 24rpx;
  margin-right: 12rpx;
}
.listBigBox .list_Info .other .zan text{
  color: #89899C;
  font-size: 28rpx;
  line-height: 40rpx;
}

.videoInCrRank{
  margin: 0 20rpx 20rpx;
  height: 322rpx;
  background: #fff;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12rpx;
}
.videoInCrRank .videoimgBox{
  width: 160rpx;
  height: 260rpx;
  background: #242236;
  border-radius: 11rpx;
  position: relative;
}
.videoInCrRank .videoimgBox image{
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.videoInCrRank .videoItemInfo{
  margin-left: 20rpx;
  width:500rpx
}
.videoInCrRank .videoItemInfo .videoTitle{
  color: #000;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 40rpx;
  width: 440rpx;
  overflow: hidden;
  text-overflow:ellipsis; white-space: nowrap;
}
.videoInCrRank .videoItemInfo .videoTime{
  color: #89899C;
  font-size: 26rpx;
  line-height: 36rpx;
  margin-top: 10rpx;
}
.videoInCrRank .videoItemInfo .userTitleBox{
  margin-top: 10rpx;
}
.userData{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
  border-top: 1px solid rgba(137, 137, 156, .2);
  padding-top: 10rpx;
}
.userData .userDataItem{
  text-align: center;
}
.userData .userDataItem .data{
  color: #000;
  font-size: 32rpx;
  line-height: 44rpx;
  font-weight: 600;
}
.userData .userDataItem view{
  color: #89899C;
  font-size: 20rpx;
  line-height: 36rpx;
  margin-top: 6rpx;
}
.searchView{
  width: 360rpx;
  height: 64rpx;
  border-radius: 32rpx;
  border: 2rpx solid #2562FF;
  display: flex;
  align-items: center;
}
.searchView input{
  flex:1;
  font-size: 26rpx;
  padding-left: 16rpx;
  color: #2562FF;
}
.searchView .searchButton{
  width: 72rpx;
  height: 60rpx;
  color: #1F53D9;
  border-radius: 30px;
  background: #ffffff;
  font-size: 26rpx;
  line-height: 60rpx;
  text-align: center;
}
.flexBox {
  display: block;
  width: 100vw;
  padding: 0 0 0 28rpx;
}
/* 标签 */
.topicList {
  margin: 0 20rpx 20rpx;
  background: #fff;
  border-radius: 14rpx;
}
.topicInfo {
  display: flex;
  padding: 30rpx;
}
.topicInfo .topicImg {
  width: 72rpx;
  height: 72rpx;
}
.topicInfo .topicText {
  flex: 1;
  padding-left: 18rpx;
}
.topicInfo .topicName {
  color: #000;
  font-size: 28rpx;
  font-weight: bold;
  width: 360rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topicFlex {
  display: flex;
  justify-content: space-between;
  color: #89899C;
  font-size: 26rpx;
}
.topicLeft {
  font-size: 26rpx;
}
.topicFlex .topicRight {
  font-size: 24rpx;
}
.starImg {
  width: 26rpx;
  height: auto;
  vertical-align: middle;
}
.topicBox {
  width: 100%;
  height: 180rpx;
  position: relative;
  background: #F3F7F9;
}
.topicBox .index {
  width: 40rpx;
  line-height: 180rpx;
  position: absolute;
  top: 0;
  left: 18rpx;
  color: #89899C;
}
.topicBox .indexImg {
  width: 40rpx;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.topicMore {
  padding: 24rpx 0 18rpx 78rpx;
}
.topicItem {
  display: inline-block;
  position: relative;
  width: 131rpx;
  height: 131rpx;
  border-radius: 8rpx;
  margin-right: 24rpx;
  overflow: hidden
}
.topicItem image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.trendBox{
  margin: 20rpx;
  height: 407rpx;
  background: #fff;
  border-radius: 14rpx;
  padding: 12rpx;
}
.trendBox .searchTab{
  color: #000;
  font-size: 28rpx;
  line-height: 40rpx;
  margin-top: 20rpx;
}
.trendBox .searchTab text{
  color: #F4864A;
}
.scrollView{
  display: flex;
  white-space: nowrap;
  margin-top: 44rpx;
}
.scrollView .scroll-item{
  position: relative;
  width: 150rpx;
  height: 150rpx;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 18rpx;
  display: inline-block;
}
.scrollView .scroll-item .videoImg{
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin:auto;
}
.scrollView .scroll-item .zan{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46rpx;
  background: rgba(16, 20, 38, 0.7);
  position: absolute;
  bottom: 0;
  left: 0;
}
.scrollView .scroll-item .zan image{
  width: 26rpx;
  height: 26rpx;
  margin-right: 6rpx;
}
.scrollView .scroll-item .zan text{
  color: #FFFFFF;
  font-size: 24rpx;
  line-height: 32rpx;
}

.curveBox{
  width: 202rpx;
  height: 48rpx;
  border-radius: 20rpx;
  border: 2px solid rgba(148, 128, 228, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #FFFFFF;
  font-size: 24rpx;
  line-height: 46rpx;
  margin: auto;
  margin-top: 28rpx;
}
.curveBox view{
  width: 50%;
  height: 100%;
  text-align: center;
}
.curveBox .active{
  background: linear-gradient(90deg, #00D7FF 0%, #3856FF 51%, #A854D3 100%);
  border-radius: 18rpx;
  width: 106rpx;
}