/* 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; }