reader/pages/invite/index.wxss

.invite {
  width: 100%;
  min-height: 100vh;
  background: url('http://reader-wx.ai160.com/images/reader/bg1.jpg') no-repeat;
  background-size: contain;
  overflow: hidden;
}
.invite .ranking {
  position: absolute;
  top: 164rpx;
  right: 20rpx;
  width: 100rpx;
  height: 104rpx;
  z-index: 2;
}
.invite .strategy {
  position: absolute;
  top: 290rpx;
  right: 10rpx;
  width: 120rpx;
  height: 100rpx;
  z-index: 2;
}
.invite .body {
  position: relative;
  width: 100%;
  height: 10000rpx;
  margin-top: 700rpx;
  background: url('http://reader-wx.ai160.com/images/reader/bg2.jpg') no-repeat;
  background-size: cover;
}
.invite .body .pennant {
  position: absolute;
  width: 189rpx;
  height: 259rpx;
}
.invite .body .pennant .icon {
  width: 100%;
  height: 100%;
}
.invite .body .pennant .num {
  position: absolute;
  width: 100%;
  bottom: 40rpx;
  font-weight: bold;
  text-align: center;
  font-size: 26rpx;
  color: #FFFFFF;
}
.invite .body .treasure {
  position: absolute;
  width: 250rpx;
  height: 262rpx;
}
.invite .body .always {
  position: absolute;
  width: 300rpx;
  height: 300rpx;
  top: 9650rpx;
  left: 180rpx;
}
.mediaBox {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}
.mediaBox .media {
  position: relative;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 550rpx;
  height: 550rpx;
}
.mediaBox .media .body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0rpx 50rpx;
  text-align: center;
  box-sizing: border-box;
  background-color: white;
  border-radius: 20rpx;
}
.mediaBox .media .body .inviteH {
  width: 210rpx;
  height: 187rpx;
  margin-top: -120rpx;
}
.mediaBox .media .body .title {
  margin: 36rpx 0rpx 32rpx;
  color: #8616B9;
  font-size: 40rpx;
  font-weight: bold;
}
.mediaBox .media .body .tips {
  margin: 20rpx 0;
  font-size: 30rpx;
  font-weight: 400;
}
.mediaBox .media .body .shareBtn {
  position: absolute;
  bottom: 40rpx;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 380rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx 0rpx;
  background: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(50, 197, 255, 0.46);
  border-radius: 34rpx;
  color: white;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 30rpx;
}
.mediaBox .media .body .shareBtn .shareImg {
  width: 36rpx;
  height: 32rpx;
  margin-right: 10rpx;
}
.mediaBox .media .close {
  margin: 50rpx 0;
  width: 60rpx;
  height: 60rpx;
}
.shake {
  animation: shakebox 3s linear infinite;
}
@keyframes shakebox {
  0% {
    transform: translateZ(0);
  }
  5% {
    transform: translate3d(5rpx, 5rpx, 0);
  }
  15% {
    transform: translate3d(-5rpx, -5rpx, 0);
  }
  25% {
    transform: translate3d(5rpx, 5rpx, 0);
  }
  45% {
    transform: translate3d(-5rpx, -5rpx, 0);
  }
  55% {
    transform: translate3d(5rpx, -5rpx, 0);
  }
  65% {
    transform: translate3d(-5rpx, -5rpx, 0);
  }
  80% {
    transform: translate3d(5rpx, 5rpx, 0);
  }
  100% {
    transform: translate3d(-5rpx, -5rpx, 0);
  }
}