.activityDet { width: 100vw; min-height: 100vh; background-color: #f2f6fc; } .activityDet .header { width: 100%; height: 600rpx; overflow: hidden; } .activityDet .header .templateImg { position: relative; width: 100%; height: 100%; z-index: 2; } .activityDet .header .toBox { position: absolute; display: flex; align-items: center; z-index: 3; } .activityDet .header .toBox .text { min-width: 80rpx; color: white; padding: 0rpx 4rpx; z-index: 0rpx; border: 2rpx dashed white; } .activityDet .header .toBox image { width: 22rpx; height: 26rpx; margin-left: 8rpx; z-index: 1; } .activityDet .header .avatar { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; z-index: 3; } .activityDet .header .avatar .tips { width: 150rpx; font-size: 24rpx; padding: 4rpx 20rpx; border-radius: 50rpx; color: white; background-color: rgba(0, 0, 0, 0.4); } .activityDet .header .avatarImg { position: absolute; display: block; } .activityDet .btnsBox { margin-top: 40rpx; position: relative; text-align: center; font-size: 0rpx; } .activityDet .btnsBox .recordingBox { position: relative; display: inline-block; margin: 0 auto; } .activityDet .btnsBox .recordingBox .readingNow { position: absolute; left: 66rpx; top: 26rpx; width: 40rpx; height: 30rpx; } .activityDet .btnsBox .send { width: 313rpx; height: 88rpx; } .activityDet .btnsBox .countDown { position: absolute; right: 20rpx; top: 0px; bottom: 0px; margin: auto; display: flex; align-items: center; color: #FD3545; font-size: 22rpx; font-weight: bold; } .activityDet .btnsBox .countDown .countBox { padding: 10rpx; border-radius: 10rpx; margin: 0rpx 4rpx; color: white; background-image: linear-gradient(180deg, #FF7079 0%, #FE3D44 100%); } .activityDet .music { display: flex; align-items: center; justify-content: space-between; margin-top: 40rpx; padding: 0rpx 20rpx; font-size: 0rpx; box-sizing: border-box; } .activityDet .music .playAuido { width: 214rpx; height: 87rpx; } .activityDet .music .share { width: 500rpx; height: 87rpx; line-height: 87rpx; color: white; font-size: 30rpx; background: url('http://reader-wx.ai160.com/images/reader/card/share.png') no-repeat; background-size: 100% 100%; } .activityDet .blessing { margin-top: 30rpx; font-size: 36rpx; } .activityDet .blessing .content { height: 38rpx; width: 600rpx; text-align: center; margin: 20rpx auto 0rpx; } .activityDet .maskBox { position: fixed; top: 0rpx; right: 0rpx; bottom: 0rpx; left: 0rpx; margin: auto; padding: 71rpx 30rpx 30rpx; box-sizing: border-box; width: 290rpx; height: 290rpx; border-radius: 30rpx; color: white; background-color: rgba(0, 0, 0, 0.8); text-align: center; font-size: 30rpx; z-index: 10; } .activityDet .maskBox .speedProgress { margin: 20rpx 0rpx 60rpx; border-radius: 50rpx; overflow: hidden; }