reader/pages/activity/index/index.wxss

/* pages/activity/index/index.wxss */
.activity-index {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: scroll;
  background: #FE7F79;
}
.activity-bg {
  width: 100%;
  height: 400rpx;
  margin-bottom:18rpx;
}
.rule {
  position: absolute;
  top: 32rpx;
  right: 0;
  width: 193rpx;
  height: 50rpx;
}
.rule image {
  width: 100%;
  height: 100%;
}
.strategy {
  position: fixed;
  top: 384rpx;
  right: 0;
  width: 205rpx;
  height: 155rpx;
  z-index: 99;
}
.strategy image {
  width: 100%;
  height: 100%;
}
.activity-works {
  position: relative;
  width: 100%;
  height: 484rpx;
  overflow: hidden;
  margin-top: -31rpx;
}
.gradeText {
  position: absolute;
    left: 50%;
    top: 125rpx;
    transform: translateX(-50%);
    font-size: 36rpx;
    color: #663c00;
    font-weight: 600;
}
.swiper-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.activity-works-swiper {
  width: 720rpx;
  margin: 200rpx auto 0 auto;
}
.activity-works-swiper  swiper {
  width: 100%;
  height: 237rpx;
}
.swiper-item-view {
  width: 583rpx;
  height: 237rpx;
  border-radius: 12rpx;
  overflow: hidden;
}
.swiper-item-view image {
  width: 100%;
  height: 100%;
}
.activity-ranking {
  position: relative;
  width: 100%;
  margin-top: 36rpx;
}
.activity-ranking-tab {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 88rpx;
  background: #D44A44;
border-radius: 0 20rpx 0 20rpx;
}
.tab-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.activity-ranking-tab text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
  color: #fff;
  font-size: 38rpx;
  z-index: 2;
  font-weight: bold;
}
.activity-ranking-tab .left {
  left: 0;
}
.activity-ranking-tab .right {
  right: 0;
}
.select-bg {
  position: absolute;
  top: -23%;
  width: 50%;
  height: 110rpx;
  z-index: 1;
}
.activity-ranking-tab .select {
  color: #FF5600;
}
.activity-ranking-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 21rpx 42rpx;
  color: #FF5600;
  font-size: 38rpx;
  background: #fff;
  box-sizing: border-box;
  font-weight: 600;
}
.activity-ranking-title .midTitle{
  margin-left: -80rpx;
}
.scroll-view-item,
.activity-my-ranking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 150rpx;
  background: #fff;
  border-bottom: 2rpx solid #fff;
  padding: 0 40rpx;
  box-sizing: border-box;
}
.scroll-view-item .ranking-number-img {
  width: 44rpx;
  height: 52rpx;
}
.scroll-view-item .ranking-number,
.activity-my-ranking .ranking-number {
  width: 44rpx;
  height: 52rpx;
  text-align: center;
  line-height: 52rpx;
  font-size: 38rpx;
  color: #666;
}
.scroll-view-item  .ranking-message,
.activity-my-ranking  .ranking-message{
  display: flex;
  width: 332rpx;
}
.scroll-view-item  .ranking-message .reanking-message-head,
.activity-my-ranking  .ranking-message .reanking-message-head {
  position: relative;
  width: 80rpx;
  height: 80rpx;
  margin-right: 30rpx;
}
.reanking-message-head .haed-url{
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}
.reanking-message-head .follow-url {
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  width: 34rpx;
  height: 34rpx;
  transform: translateX(-50%);
}
.reanking-message-name {
  display: flex;
  flex-direction: column;
}
.reanking-message-name text{
  width: 306rpx;
  height: 50rpx;
  font-size: 34rpx;
  color: #333;
  overflow: hidden;
}
.operation {
  display: flex;
  color: #999;
  font-size: 22rpx;
}
.operation .like {
  margin: 0 23rpx 0 23rpx;
}
.operation image{
  width: 28rpx;
  height: 24rpx;
  vertical-align: middle;
}

.scroll-view{
  min-height: 200rpx;
}
.scroll-view-item .popularity,
.activity-my-ranking  .popularity {
  color: #F76346;
  font-size: 38rpx;
  vertical-align: middle;
  width: 120rpx;
}
.popularity image {
  width: 27rpx;
  height: 29rpx;
  vertical-align: middle;
}
.activity-my-ranking {
  position: fixed;
  left: 0;
  bottom: 0;
  background: #FE9E19;
  z-index: 9;
}
.my-activity-read {
  background: #fff;
  overflow: hidden;
}
.no_works {
  width: 401rpx;
  height: 259rpx;
  margin: 50rpx auto;
  display: block;

}
.comment_section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, .3);
  overflow: hidden;
}