reader/pages/activity/index/index.wxss

/* pages/activity/index/index.wxss */
.activity-index {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.rule {
  position: absolute;
  top: 32rpx;
  right: 0;
  width: 191rpx;
  height: 60rpx;
}
.rule image {
  width: 100%;
  height: 100%;
  background: red;
}
.activity-works {
  width: 726rpx;
  height: 461rpx;
  margin: 390rpx auto 0 auto;
  background: skyblue;
  overflow: hidden;
}
.activity-works-title {
  width: 583rpx;
  height: 52rpx;
  text-align: center;
  line-height: 52rpx;
  background: #F8F6FF;
  box-shadow: 0px 2rpx 14rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 30rpx;
  font-size: 30rpx;
  display: block;
  margin: 88rpx auto 22rpx auto;
}
.activity-works-swiper  swiper {
  width: 100%;
  height: 237rpx;
}
.swiper-item-view {
  width: 583rpx;
  height: 237rpx;
  border-radius: 12rpx;
}
.activity-ranking {
  height: 30%;
  width: 100%;
}
.activity-ranking-tab {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 108rpx;
  margin-top: 60rpx;
}
.activity-ranking-tab text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
  font-size: 38rpx;
  background: blueviolet;
}
.activity-ranking-tab .select {
  background: aquamarine;
}
.activity-ranking-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 21rpx 32rpx;
  color: #D52822;
  font-size: 38rpx;
  background: #FCF4F6;
  box-sizing: border-box;
}
.scroll-view-item,
.activity-my-ranking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 150rpx;
  background: #FCF4F6;
  border-bottom: 2rpx solid #fff;
  padding: 0 50rpx;
  box-sizing: border-box;
}
.scroll-view-item .ranking-number,
.activity-my-ranking .ranking-number {
  width: 52rpx;
  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;
  margin-left: -90rpx;
}
.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: 0;
  left: 50%;
  width: 34rpx;
  height: 34rpx;
  transform: translateX(-50%);
}
.reanking-message-name {
  display: flex;
  flex-direction: column;
}
.reanking-message-name text{
  font-size: 34rpx;
  color: #333;
}
.operation {
  display: flex;
  color: #999;
  font-size: 22rpx;
}
.operation .like {
  margin: 0 23rpx 0 23rpx;
}
.operation image{
  width: 28rpx;
  height: 24rpx;
}
.scroll-view-item .popularity,
.activity-my-ranking  .popularity {
  color: #666;
  font-size: 38rpx;
}
.activity-my-ranking {
  position: fixed;
  left: 0;
  bottom: 0;
  background: #FEBD19;
  color: #fff;
}