|
@@ -1,206 +1,210 @@
|
|
|
.activityDet {
|
|
|
- width: 100vw;
|
|
|
- min-height: 100vh;
|
|
|
- background-color: #f2f6fc;
|
|
|
-
|
|
|
- .header {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 600rpx;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .templateImg {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
-
|
|
|
- .toBox {
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- z-index: 3;
|
|
|
-
|
|
|
- .text {
|
|
|
- min-width: 80rpx;
|
|
|
- color: white;
|
|
|
- padding: 0rpx 4rpx;
|
|
|
- z-index: 0rpx;
|
|
|
- border: 2rpx dashed white;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 22rpx;
|
|
|
- height: 26rpx;
|
|
|
- margin-left: 8rpx;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .avatar {
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- z-index: 3;
|
|
|
-
|
|
|
- .tips {
|
|
|
- width: 150rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- padding: 4rpx 20rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
- color: white;
|
|
|
- background-color: rgba(0, 0, 0, 0.4);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .avatarImg {
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- }
|
|
|
+ width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #f2f6fc;
|
|
|
|
|
|
- .progressBox {
|
|
|
- position: absolute;
|
|
|
- bottom: 0px;
|
|
|
- left: 0px;
|
|
|
- padding: 20rpx 40rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- z-index: 2;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: white;
|
|
|
- font-size: 24rpx;
|
|
|
-
|
|
|
- .progress {
|
|
|
- flex: 1;
|
|
|
- margin: 0px 30rpx;
|
|
|
- border-radius: 25rpx;
|
|
|
+ .header {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 600rpx;
|
|
|
overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btnsBox {
|
|
|
- margin-top: 40rpx;
|
|
|
- position: relative;
|
|
|
- text-align: center;
|
|
|
- font-size: 0rpx;
|
|
|
-
|
|
|
- .recordingBox {
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
- margin: 0 auto;
|
|
|
-
|
|
|
- .readingNow {
|
|
|
- position: absolute;
|
|
|
- left: 66rpx;
|
|
|
- top: 26rpx;
|
|
|
- width: 40rpx;
|
|
|
- height: 30rpx;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .send {
|
|
|
- width: 313rpx;
|
|
|
- height: 88rpx;
|
|
|
+ .templateImg {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toBox {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 3;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ min-width: 80rpx;
|
|
|
+ color: white;
|
|
|
+ padding: 0rpx 4rpx;
|
|
|
+ z-index: 0rpx;
|
|
|
+ border: 2rpx dashed white;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 22rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ z-index: 3;
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ width: 150rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 4rpx 20rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ color: white;
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatarImg {
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progressBox {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0px;
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: white;
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0px 30rpx;
|
|
|
+ border-radius: 25rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .countDown {
|
|
|
- position: absolute;
|
|
|
- right: 20rpx;
|
|
|
- top: 0px;
|
|
|
- bottom: 0px;
|
|
|
- margin: auto;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: #FD3545;
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- .countBox {
|
|
|
- padding: 10rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin: 0rpx 4rpx;
|
|
|
- color: white;
|
|
|
- background-image: linear-gradient(180deg, #FF7079 0%, #FE3D44 100%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .music {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 40rpx;
|
|
|
- padding: 0rpx 20rpx;
|
|
|
- font-size: 0rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .playAuido {
|
|
|
- width: 214rpx;
|
|
|
- height: 87rpx;
|
|
|
+ .btnsBox {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 0rpx;
|
|
|
+
|
|
|
+ .recordingBox {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .readingNow {
|
|
|
+ position: absolute;
|
|
|
+ left: 66rpx;
|
|
|
+ top: 26rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .send {
|
|
|
+ width: 313rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .countDown {
|
|
|
+ position: absolute;
|
|
|
+ right: 20rpx;
|
|
|
+ top: 0px;
|
|
|
+ bottom: 0px;
|
|
|
+ margin: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #FD3545;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .countBox {
|
|
|
+ padding: 10rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin: 0rpx 4rpx;
|
|
|
+ color: white;
|
|
|
+ background-image: linear-gradient(180deg, #FF7079 0%, #FE3D44 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .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%;
|
|
|
+ .music {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ padding: 0rpx 20rpx;
|
|
|
+ font-size: 0rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .playAuido {
|
|
|
+ width: 214rpx;
|
|
|
+ height: 87rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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%;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .blessing {
|
|
|
- margin-top: 30rpx;
|
|
|
- font-size: 36rpx;
|
|
|
+ .blessing {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: 38rpx;
|
|
|
+ width: 600rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin: 20rpx auto 0rpx;
|
|
|
+ }
|
|
|
|
|
|
- .content {
|
|
|
- height: 38rpx;
|
|
|
- width: 600rpx;
|
|
|
- text-align: center;
|
|
|
- margin: 20rpx auto 0rpx;
|
|
|
+ .content:first-child {
|
|
|
+ opacity: .7;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .mask {
|
|
|
- position: fixed;
|
|
|
- left: 0px;
|
|
|
- top: 0px;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- background-color: rgba(0, 0, 0, 0.2);
|
|
|
- z-index: 999;
|
|
|
-
|
|
|
- .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;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 110rpx;
|
|
|
- height: 110rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- animation: identifier 2.6s infinite linear;
|
|
|
- }
|
|
|
+ .mask {
|
|
|
+ position: fixed;
|
|
|
+ left: 0px;
|
|
|
+ top: 0px;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: rgba(0, 0, 0, 0.2);
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ .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;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 110rpx;
|
|
|
+ height: 110rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ animation: identifier 2.6s infinite linear;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|