.video-m{
width: 1600px;
margin: 0 auto;
position: relative;
}
.images-m{
width: 1440px;
margin: 0 auto;
position: relative;
.reply2-input {
width: 905px;
}
.video-input{
width: 880px;
}
.video-msg-list-content-box{
width: 915px;
margin-left: 69*0.86px;
min-height: 87*0.86px;
}
// .video-msg-list-content-box .video-msg-user-face{
// left: -68*0.86px;
// }
.video-msg-list{
width: 1133*0.86px;
}
.video-msg-reply-box{
width: 1064*0.86px;
}
}
.images-big-box-left{
width: 1035px;
float: left;
font-size: 0;
position: relative;
}
.neck-nav{
height: 60px;
width: 100%;
background: #E43985;
position: fixed;
z-index: 500;
.neck-nav-content{
width: 1440px;
margin: 0 auto;
height: 60px;
position: relative;
}
.logo{
position: absolute;
top: 8px;
}
}
.video-big-box-left{
width: 1195px;
float: left;
font-size: 0;
position: relative;
}
.video-big-box-right{
width: 405px;
display: inline-block;
font-size: 0;
position: relative;
float: left;
}
.video-play-box{
position: relative;
width: 100%;
video{
width: 100%;
border-radius: 8px;
height: 673px;
}
}
.video-more-box{
margin-left: 4.5%;
width: 95.5%;
background: #FFFCFD;
border-radius: 8px;
min-height: 200px;
}
.video-more-h2{
height: 70px;
line-height: 70px;
font-size: 28px;
font-weight: 700;
color: #333333;
text-indent: 24px;
position: relative;
>div{
position: absolute;
width: 4px;
height: 24px;
background:linear-gradient(to bottom,#E53989,#E539BA);
border-radius: 8px;
left: 16px;
top: 25px;
}
}
.left-images-title{
width: 1035px;
text-align: center;
line-height: 44px;
height: 44px;
font-size: 22px;
color: #333333;
font-weight: 700;
margin-bottom: 10px;
}
.images-content-box{
.images-content-imgBox{
width: 100%;
>img{
width: 100%;
border-radius: 8px;
margin-bottom: 15px;
}
}
>p{
font-size: 14px;
text-indent: 20px;
padding-top: 10px;
}
}
.video-more-ul{
width: 342px;
margin-left: 22px;
li{
position: relative;
height: 254px;
margin-bottom: 19px;
}
.video-top-box{
width: 342px;
height: 192px;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.video-top-shadow{
width: 342px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}
.video-time{
color: #fff;
font-size: 16px;
position: absolute;
z-index: 2;
right: 8px;
bottom: 10px;
}
.video-name-box{
position: relative;
height: 65px;
width: 342px;
}
.video-face{
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
left: 6px;
top: 10px;
}
.video-title{
color: #333333;
font-size: 14px;
text-indent: 56px;
padding-top: 10px;
width: 330px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.video-tag-box{
width: 290px;
overflow: hidden;
margin-left: 54px;
margin-top: 4px;
border-bottom: none;
>div{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
min-width: 42px;
max-width: 84px;
height: 18px;
background: #FFE8F1;
color: #E53985;
font-size: 12px;
line-height: 18px;
text-align: center;
border-radius: 4px;
float: left;
margin-right: 4px;
margin-bottom: 30px;
}
}
}
.video-content-box{
height: 182px;
width: 100%;
position: relative;
}
.video-content-title{
font-size: 24px;
height: 46px;
line-height: 46px;
margin-top: 8px;
font-weight: 700;
width: 70%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: relative;
}
.video-btn-box{
// width: 215px;
width: 150px;
height: 46px;
position: absolute;
right: 0;
top: 0;
div{
width: 71px;
height: 46px;
float: left;
position: relative;
line-height: 46px;
font-size: 0;
text-indent: 28px;
img{
position: absolute;
left: 0;
top: 10px;
cursor: pointer;
}
span{
font-size: 14px;
}
}
}
.video-time-box{
line-height: 28px;
font-size: 16px;
color: #AAAAAA;
span:nth-child(1){
}
span:nth-child(2){
margin-left: 28px;
}
}
.video-tag-box{
width: 100%;
height: 47px;
border-bottom: 1px solid #E5E5E5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
>div{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
height: 24px;
min-width: 56px;
max-width: 90px;
background:#FFE8F1;
font-size: 14px;
color: #E53985;
float: left;
margin-right: 8px;
text-align: center;
line-height: 24px;
margin-top: 6px;
}
}
.video-face-box{
position: relative;
width: 100%;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #E5E5E5;
text-indent: 45px;
font-size: 14px;
.video-face-box-face{
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
top: 10px;
left: 0;
}
.video-like-btn{
width: 76px;
height: 34px;
background:#E53985;
line-height: 34px;
font-size: 14px;
color: #fff;
text-align: center;
text-indent: 0;
position: absolute;
top: 13px;
border-radius: 50px;
right: 0;
}
.video-like-btn-yes{
background: #F3F4F7;
border: 1px solid #E53985;
color: #E53985;
}
}
.video-msg-box{
margin-top: 20px;
background: #FCF8FC;
width: 100%;
min-height: 200px;
border-radius: 8px;
}
.video-msg-h2{
text-indent: 26px;
font-size: 16px;
color: #333333;
font-weight: 700;
}
.video-input-box{
height: 77px;
width: 100%;
position: relative;
// background:pink;
}
.video-input{
height: 48px;
line-height: 48px;
width: 1024px;
background: #FFF2FA;
border-radius: 50px;
border:1px solid #E53985;
position: absolute;
left: 22px;
top: 17px;
text-indent: 20px;
font-size: 16px;
}
.video-input::placeholder { /* Firefox, Chrome, Opera */
color: #AAAAAA;
}
.video-input-btn{
width: 88px;
height: 50px;
background:linear-gradient(to right,#E53989,#E539C2);
border-radius: 50px;
position: absolute;
top: 17px;
right: 30px;
text-align: center;
line-height: 50px;
font-size: 14px;
color: #fff;
cursor: pointer;
}
.video-msg-list{
width: 1133px;
margin: 0 auto;
position: relative;
padding-bottom: 20px;
border-bottom: 1px solid #E5E5E5;
}
.video-msg-list-content-box{
width: 1064px;
margin-left: 69px;
min-height: 87px;
position: relative;
.video-msg-user-face{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
left: -68px;
top: 4px;
}
.msg-p1{
height: 30px;
line-height: 30px;
font-size: 14px;
color: #666666;
}
.msg-p2{
line-height: 26px;
font-size: 16px;
}
.msg-p3{
font-size: 14px;
color: #B8B7B8;
margin-top: 2px;
padding-bottom: 10px;
.msg-p3-span1{
cursor: pointer;
margin-left: 12px;
img{
position: relative;
top: 1px;
}
}
.msg-p3-span2{
cursor: pointer;
margin-left: 12px;
color: #E53985;
}
}
}
.video-msg-reply-box{
width: 1064px;
margin-left: 50px;
min-height: 8px;
position: relative;
background: #F4F5F8;
border-radius: 8px;
.reply-box-list{
min-height: 57px;
position: relative;
margin-left: 50px;
}
.reply-face{
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
left: -40px;
top: 9px;
}
.reply-box-p1{
font-size: 14px;
padding-top: 8px;
span{
color: #666666;
font-size: 14px;
margin-right: 6px;
}
}
.reply-box-p2{
font-size: 14px;
color: #B8B7B8;
margin-top: 1px;
padding-bottom: 10px;
.msg-p3-span1{
cursor: pointer;
margin-left: 12px;
img{
position: relative;
top: 1px;
}
}
.msg-p3-span2{
cursor: pointer;
margin-left: 12px;
color: #E53985;
}
}
}
.reply-input-box{
position: relative;
margin-left: 69px;
margin-top: 6px;
>span{
position: absolute;
height: 50px;
width: 88px;
background:linear-gradient(to right,#E53988,#E539C1);
border-radius: 50px;
font-size: 16px;
line-height: 50px;
text-align: center;
right: 0;
color: #fff;
}
}
.reply2-input{
width: 956px;
height: 50px;
background: #F4F5F8;
border-radius: 50px;
font-size: 14px;
text-indent: 20px;
color: #333;
}
.input-noLogin-tips{
font-size: 14px;
color: #aaa;
position: absolute;
top: 32px;
left: 40%;
cursor: pointer;
span{
color: #E53985;
margin-right: 6px;
}
}
.more-replay{
text-indent:8px;
color: #AAAAAA;
font-size: 12px;
line-height: 20px;
padding-bottom: 4px;
span{
color: #E53985;
cursor: pointer;
}
}
.images-text-box{
width: 100%;
font-size: 16px !important;
.MsoNormal{
width: 100%;
white-space: normal;
margin-bottom: 20px;
}
span{
white-space: normal;
}
h3{
white-space: normal;
margin-bottom: 20px;
}
p{
margin-bottom: 20px;
}
}