yuminge-app/yun-min-program-plugin-master/packageH/circleCommunity/videoDetails/videoDetails.wxss

1045 lines
18 KiB
Plaintext

/* packageH/circleCommunity/videoDetails/videoDetails.wxss */
page {
box-sizing: border-box;
}
.my-video {
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 0;
height: 100%;
visibility: visible;
display: flex;
justify-content: center;
align-items: center;
background: none;
overflow: hidden;
}
.my-video video {
width: 100%;
height: 100%;
}
.my-video .video-style {
object-fit: fill;
}
.works_wrap {
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 0;
height: 100%;
visibility: visible;
display: flex;
justify-content: center;
align-items: center;
background: none;
overflow: hidden;
}
.works_wrap .play {
position: absolute;
z-index: 11;
left: calc(55% - 64rpx);
top: calc(50% - 64rpx);
width: 64rpx;
height: 64rpx;
}
.works_wrap .play image {
width: 100%;
}
.works_wrap .poster {
/* background: #000000; */
position: relative;
z-index: 10;
width: 100%;
height: 100%;
visibility: visible;
display: flex;
justify-content: center;
align-items: center;
}
.works_wrap .poster .pic {
width: 100%;
height: auto;
vertical-align: middle;
}
.works_wrap .poster .pic image {
width: 100%;
}
.works_wrap .playWorks {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 9;
background-size: auto 50px;
background: #999;
}
.good-box {
position: absolute;
display: flex;
z-index: 10;
left: 0;
bottom: 6.25rem;
width: 60%;
/* height: 160rpx; */
background: #fff;
border-radius: 0 24rpx 24rpx 0;
padding: 0.25rem;
}
.good-box .good-img {
margin-right: 0.35rem;
width: 3rem;
height: 3rem;
flex: 0 0 3rem;
}
.good-box .good-img image {
width: 100%;
height: 100%;
}
.good-box .text-wrap {
flex: 1;
display: flex;
flex-direction: column;
text-align: left;
line-height: 64rpx;
width: 60%;
font-weight: 700;
}
.good-box .desc {
line-height: 1rem;
color: #333;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.good-box .price {
font-size: 28rpx;
color: #f15353;
margin-right: 16rpx;
line-height: 32rpx;
}
.good-box .old-price {
text-decoration: line-through;
color: #999;
font-size: 24rpx;
line-height: 32rpx;
}
.good-box .cart {
flex: 0 0 1.25rem;
width: 1.25rem;
height: 1.25rem;
line-height: 3.75rem;
}
.good-box .cart image {
width: 100%;
height: 100%;
}
.side-bar {
position: absolute;
z-index: 10;
right: 20rpx;
bottom: 450rpx;
display: flex;
flex-direction: column;
height: 320rpx;
justify-content: space-between;
}
.side-bar .avatar {
position: relative;
border-radius: 50%;
background: none;
/* border: 2rpx solid #e8e8e9; */
}
.side-bar .avatar .img {
border-radius: 50%;
}
.side-bar .avatar .img image {
border-radius: 50%;
width: 100%;
height: 100%;
border: 2rpx solid #e8e8e9;
}
.like {
position: relative;
}
.like .img {
width: 40px;
height: 40px;
}
.like .img image {
width: 100%;
height: 100%;
}
.like .likenum {
font-size: 20rpx;
position: absolute;
bottom: -10rpx;
left: 50%;
transform: translateX(-50%) translateY(100%);
color: #e8e8e9;
}
.share {
position: relative;
}
.share .img {
width: 40px;
height: 40px;
}
.share .img image {
width: 100%;
height: 100%;
}
.share .sharenum {
font-size: 20rpx;
position: absolute;
bottom: -10rpx;
left: 50%;
transform: translateX(-50%) translateY(100%);
color: #e8e8e9;
}
.side-bar > .div {
width: 80rpx;
height: 80rpx;
font-size: 80rpx;
color: rgb(232, 232, 233);
transition: all 0.3s;
}
.play-video {
position: absolute;
z-index: 9;
top: 0;
width: 100%;
height: 100%;
left: 0;
}
.div_bar {
position: absolute;
z-index: 10;
right: 30rpx;
bottom: 200rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.luzhi {
width: 74rpx;
height: 114rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
color: #fff;
}
.jilu {
width: 74rpx;
height: 114rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
color: #fff;
}
.jili icon {
font-size: 44rpx;
}
.answerpage {
height: 100%;
background: url(https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/videoAnswerBg@3x.png);
background-size: cover;
}
view,
text {
box-sizing: border-box;
}
.header {
text-align: center;
margin: 0 auto;
padding-top: 58rpx;
font-size: 70rpx;
color: #e9e8e8;
}
.answerContainer {
margin: 0 auto;
margin-top: 90rpx;
width: 100%;
height: 660rpx;
border-radius: 5%;
background-color: #fff;
padding: 58rpx 70rpx 0;
position: relative;
}
.answerContainer::before {
content: "";
display: block;
width: 32rpx;
height: 32rpx;
border-radius: 50%;
position: absolute;
left: -16rpx;
top: 64rpx;
background: #cf243b;
}
.answerContainer::after {
content: "";
display: block;
width: 32rpx;
height: 32rpx;
border-radius: 50%;
position: absolute;
right: -16rpx;
top: 64rpx;
background: #cf243b;
}
.answerContainer .answerTitle {
text-align: center;
color: #333;
font-size: 30rpx;
}
.answerContainer .answerList {
padding-top: 48rpx;
height: 512rpx;
overflow: scroll;
}
.answerContainer .answerList .answerItem {
width: 100%;
height: 84rpx;
background-color: #f1f1f1;
border-radius: 42rpx;
color: #333;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 34rpx;
}
.answerContainer .answerList .answerItem:active {
background: rgb(207, 36, 59);
color: #fff;
}
.successAlert {
width: 626rpx;
height: 564rpx;
background: url(https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/videoAnswerAlert@3x.png);
background-size: contain;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
}
.successAlert .c1 {
color: #f06161;
font-size: 32rpx;
padding-top: 42rpx;
}
.successAlert .c2 {
color: #333;
font-size: 32rpx;
margin-top: 48rpx;
}
.successAlert .c3 {
color: #f06161;
font-size: 72rpx;
margin-top: 35rpx;
}
.successAlert .btn {
width: 332rpx;
height: 75rpx;
margin: 0 auto;
margin-top: 105rpx;
}
.successAlert .btn image {
width: 100%;
height: 75rpx;
}
.errorAlert {
width: 510rpx;
height: 510rpx;
background-color: #fff;
border-radius: 4rpx;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 38rpx;
}
.errorAlert .sigh {
width: 185rpx;
padding-left: 25rpx;
height: 151rpx;
}
.errorAlert .sigh image {
width: 100%;
height: 100%;
}
.errorAlert .c1 {
margin-top: 25rpx;
font-size: 32rpx;
color: #999;
}
.errorAlert .c2 {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 32rpx;
color: #333;
font-size: 28rpx;
}
.errorAlert .btn {
margin-top: 32rpx;
font-size: 30rpx;
color: #fff;
width: 358rpx;
height: 60rpx;
background-color: #f35056;
border-radius: 6rpx;
display: flex;
align-items: center;
justify-content: center;
}
.Redpack-box {
width: 488rpx;
height: 810rpx;
background-size: 100% 100%;
background-position: top left;
display: flex;
flex-direction: column;
position: relative;
}
.Redpack-box .Redpack-title {
display: flex;
}
.Redpack-box .Redpack-title .avator {
margin: 128rpx auto 32rpx;
max-width: 120rpx;
border-radius: 4rpx;
height: auto;
}
.Redpack-box .Redpack-text {
font-size: 36rpx;
text-align: center;
color: #ceac74;
padding: 32rpx;
font-weight: bold;
width: 100%;
}
.Redpack-box .Redpack_bg_box {
position: absolute;
height: 216rpx;
width: 100%;
bottom: 0;
left: 0;
}
.Redpack-box .Redpack_bg_box .Redpack-btn {
width: 152rpx;
height: 152rpx;
border-radius: 50%;
overflow: hidden;
position: absolute;
z-index: 999;
left: 50%;
margin-left: -76rpx;
margin-top: -48rpx;
background: url(https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/open_btn.png);
background-size: 100% 100%;
background-color: #e5c185;
}
.Redpack-box .Redpack_bg_box .rotate {
-webkit-animation: anim 1s infinite alternate;
-ms-animation: anim 1s infinite alternate;
animation: anim 1s infinite alternate;
}
@-webkit-keyframes anim {
from {
-webkit-transform: rotateY(180deg);
}
to {
-webkit-transform: rotateY(360deg);
}
}
@keyframes anim {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(360deg);
}
}
.Redpack-box .Redpack_bg_box .Redpack_bg {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
}
.Redpack-box .Redpack_bg_box .Redpack_bg::before {
position: absolute;
margin-top: calc(72rpx * -1);
/* margin-right: calc(96rpx * -1); */
/* margin-bottom: calc(96rpx * -1); */
/* margin-left: calc(256rpx * -1); */
padding: 56rpx 256rpx;
border-radius: 50%;
box-shadow: 0 0 0 600rpx #f04333;
content: "";
}
.Redpack-box .Redpack-close {
color: #fff;
font-size: 24rpx;
position: absolute;
bottom: 60rpx;
width: 100%;
z-index: 99;
text-align: center;
}
.Redpack-box .open-redpack-clone {
color: #000;
bottom: 28rpx;
}
.open-redpack-box {
width: 100%;
height: 100%;
}
.open-redpack-box .Redpack-logo {
margin-top: 144rpx;
z-index: 2;
position: relative;
}
.open-redpack-box .open-text {
z-index: 2;
position: relative;
font-size: 24rpx;
color: #aeaeae;
padding: 0 32rpx;
font-weight: 100;
}
.open-redpack-box .open-total {
font-size: 76rpx;
color: #ceac74;
padding: 32rpx 32rpx 0;
font-weight: bold;
z-index: 2;
position: relative;
text-align: center;
}
.open-redpack-box .color-text {
color: #ceac74;
font-size: 20rpx;
}
.open-redpack-box .open-redpack_bg_box {
height: 644rpx;
z-index: 1;
}
.open-redpack-box .open-redpack_bg_box .Redpack_bg.Redpack_bg::before {
position: absolute;
margin-top: calc(44rpx * -1);
margin-left: calc(12rpx * -1);
padding: 56rpx 256rpx;
border-radius: 50%;
box-shadow: 0 0 0 600rpx #fff;
border: 4rpx solid #efca62;
content: "";
}
.verification {
width: 17.5rem;
padding: 0 0.75rem;
}
.verification .text {
padding: 1.725rem 2rem 2.125rem;
color: #666;
text-align: center;
font-size: 0.75rem;
}
.verification .inputBox {
height: 2.625rem;
line-height: 2.625rem;
display: flex;
border-bottom: 0.0625rem solid #ebebeb;
text-align: left;
align-items: center;
margin-top: 0.625rem;
}
.verification .inputBox .name {
width: 3.875rem;
color: #000;
}
.verification .inputBox input {
border: none;
}
.verification .inputBox #phone {
flex: 1;
}
.verification .inputBox #code {
width: 40%;
}
.verification .inputBox .getcodeClass {
display: inline-block;
height: 1.25rem;
line-height: 1.25rem;
background-color: #f54242;
color: #fff;
border-radius: 0.625rem;
padding: 0 0.625rem;
font-size: 0.75rem;
}
.verification .inputBox .getcodeImg {
display: inline-block;
height: 1.25rem;
line-height: 1.25rem;
flex: 1;
}
.verification .bottomBox {
padding-top: 2.5rem;
padding-bottom: 1rem;
display: flex;
justify-content: space-around;
}
.verification .bottomBox .btn1,
.verification .bottomBox .btn2 {
width: 6rem;
height: 2rem;
line-height: 2rem;
text-align: center;
color: #fff;
font-size: 1rem;
border-radius: 1.234rem;
}
.verification .bottomBox .btn1 {
background: #bcbcbc;
}
.verification .bottomBox .btn2 {
background: #f71515;
}
.commentWrapper {
position: relative;
height: 100%;
}
.commentWrapper .title {
display: flex;
justify-content: center;
align-items: center;
height: 80rpx;
}
.commentWrapper .commentList {
flex: 1;
padding: 0 30rpx;
padding-bottom: 100rpx;
overflow: scroll;
height: calc(100% - 80rpx);
}
.commentWrapper .inputWrapper {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
display: flex;
align-items: center;
background: #fff;
}
.commentWrapper .reply {
width: 615.04rpx;
height: 60.16rpx;
margin: 0 auto;
padding-left: 18rpx;
line-height: 60.16rpx;
font-size: 28.16rpx;
color: #999;
text-align: left;
border-radius: 30.08rpx;
background-color: #f2f2f2;
}
.replyMainComment {
display: flex;
padding-top: 25.6rpx;
padding-bottom: 25.6rpx;
padding-left: 32rpx;
}
.replyMainComment .left {
width: 580.16rpx;
height: 60.16rpx;
background-color: #f5f5f5;
border-radius: 30.08rpx;
}
.replyMainComment .left input {
border: none;
height: 100%;
width: 100%;
padding-left: 32rpx;
text-align: left;
box-sizing: border-box;
}
.replyMainComment .right {
width: 96rpx;
height: 60.16rpx;
font-size: 30.08rpx;
line-height: 60.16rpx;
color: #333;
}
.commentList .maincomment .li {
display: flex;
}
.commentList .maincomment .li .maincommentleft {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
margin-right: 23.04rpx;
}
.commentList .maincomment .li .maincommentleft image {
width: 100%;
height: 100%;
}
.commentList .maincomment .li .maincommentright {
flex: 1;
padding-bottom: 22.08rpx;
border-bottom: 1.92rpx solid #eee;
}
.commentList .maincomment .li .maincommentright .master_content {
display: flex;
justify-content: space-between;
margin-bottom: 12.8rpx;
}
.commentList .maincomment .li .maincommentright .master_content .master_content_left {
text-align: left;
}
.commentList .maincomment .li .maincommentright .master_content .master_content_left .name {
font-size: 28.16rpx;
line-height: 36.16rpx;
color: #1c96fe;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 320rpx;
}
.commentList .maincomment .li .maincommentright .master_content .master_content_left .createdata {
font-size: 24rpx;
line-height: 36.16rpx;
color: #999;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 320rpx;
}
.commentList .maincomment .li .maincommentright .master_content .master_content_left .review_content {
font-size: 28.16rpx;
line-height: 36.16rpx;
color: #333;
}
.commentList .maincomment .li .maincommentright .master_content .thumb_up {
display: flex;
align-items: center;
flex-direction: column;
}
.commentList .maincomment .li .maincommentright .master_content .thumb_up .thumb_img {
width: 30.08rpx;
height: 30.08rpx;
}
.commentList .maincomment .li .maincommentright .master_content .thumb_up .thumb_img image {
width: 100%;
height: 100%;
}
.commentList .maincomment .li .maincommentright .master_content .thumb_up .thumb_num {
font-size: 20.16rpx;
line-height: 36.16rpx;
color: #333;
}
.commentList .maincomment .li .maincommentright .deputy_comment {
display: flex;
margin-bottom: 12.8rpx;
}
.commentList .maincomment .li .maincommentright .deputy_comment .deputy_comment_left {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
margin-right: 13.12rpx;
}
.commentList .maincomment .li .maincommentright .deputy_comment .deputy_comment_left image {
width: 100%;
height: 100%;
}
.commentList .maincomment .li .maincommentright .deputy_comment .deputy_comment_right {
flex: 1;
display: flex;
justify-content: space-between;
text-align: left;
}
.commentList .maincomment .li .maincommentright .deputy_comment .deputy_comment_right .deputy_message {
flex: 1;
}
.commentList .maincomment .li .maincommentright .deputy_comment .deputy_comment_right .deputy_message .name {
font-size: 24rpx;
line-height: 36.16rpx;
color: #1c96fe;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 320rpx;
}
.commentList .maincomment .li .maincommentright .deputy_comment .deputy_comment_right .deputy_message .createdata {
font-size: 20.16rpx;
line-height: 36.16rpx;
color: #999;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 320rpx;
}
.commentList .maincomment .li .maincommentright .deputy_comment .deputy_comment_right .deputy_message .review_content {
font-size: 28.16rpx;
line-height: 36.16rpx;
color: #333;
}
.commentList .maincomment .li .maincommentright .deputy_comment .deputy_comment_right .deputy_message .review_content .selecolor {
color: #1c96fe;
}
.commentList .maincomment .li .maincommentright .deputy_comment .deputy_comment_right .thumb_up {
display: flex;
align-items: center;
flex-direction: column;
}
.commentList .maincomment .li .maincommentright .deputy_comment .deputy_comment_right .thumb_up .thumb_img {
width: 30.08rpx;
height: 30.08rpx;
}
.commentList .maincomment .li .maincommentright .deputy_comment .deputy_comment_right .thumb_up .thumb_img image {
width: 100%;
height: 100%;
}
.commentList .maincomment .li .maincommentright .deputy_comment .deputy_comment_right .thumb_up .thumb_num {
font-size: 20.16rpx;
line-height: 36.16rpx;
color: #333;
}
.commentList .maincomment .li:last-of-type .maincommentright {
border-bottom: none;
}
.rewardPay {
background-color: #f2f2f2;
}
.rewardPay .content {
background-color: #fff;
text-align: left;
padding: 19.2rpx;
min-height: 110.08rpx;
font-size: 25.6rpx;
line-height: 32rpx;
width: 100%;
white-space: normal;
word-break: break-all;
word-wrap: break-word;
}
.rewardPay .content .span {
color: #1c96fe;
}
.rewardPay .payMode .ul .li {
background-color: #fff;
height: 110.08rpx;
border-bottom: 1.92rpx solid #eee;
font-size: 32rpx;
color: #333;
text-align: center;
line-height: 110.08rpx;
}
.rewardPay .payMode .ul .li:last-of-type {
border-bottom: none;
margin-bottom: 22.08rpx;
}
.rewardPay .cancel {
background-color: #fff;
height: 110.08rpx;
border-bottom: 1.92rpx solid #eee;
font-size: 32rpx;
color: #333;
text-align: center;
line-height: 110.08rpx;
}
.replyComment {
padding: 32rpx;
}
.replyComment .top {
margin-bottom: 16rpx;
}
.replyComment .top .left {
font-size: 28.16rpx;
line-height: 36.16rpx;
color: #333;
text-align: left;
}
.replyComment .top .left .selcolor {
color: #1c96fe;
}
.replyComment .bottom {
height: 256rpx;
background-color: #f5f5f5;
border-radius: 30.08rpx;
position: relative;
padding: 16rpx;
}
.replyComment .bottom textarea {
height: 192rpx;
width: 100%;
overflow: auto;
background-color: #f5f5f5;
border: none;
text-align: left;
}
.replyComment .bottom .replysubmit {
position: absolute;
bottom: 16rpx;
right: 32rpx;
width: 81.92rpx;
height: 32rpx;
line-height: 32rpx;
font-size: 28.16rpx;
}