271 lines
7.4 KiB
Plaintext
271 lines
7.4 KiB
Plaintext
@import './public.css';
|
|
@import './videoDetail.less';
|
|
@width: 1180px;
|
|
@color: #80C4AE;
|
|
@title_color: #333;
|
|
@high_color: #fff;
|
|
@font: 16px;
|
|
@fonts: 14px;
|
|
@font_high: #71FFDE;
|
|
@line: #74C6B3;
|
|
@shadow: #dad6d6;
|
|
|
|
.clearfix {
|
|
display: block;
|
|
content: '';
|
|
clear: both;
|
|
}
|
|
|
|
.width {
|
|
width: @width;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
nav{
|
|
.main{
|
|
.user{
|
|
position: relative;
|
|
.userlist{
|
|
width: 122px;
|
|
height: 269px;
|
|
background: url('../img/login/jx.png') no-repeat;
|
|
background-size: cover;
|
|
position: absolute;
|
|
top: 35px;
|
|
right: -15px;
|
|
display: none;
|
|
ul{
|
|
width: 122px;
|
|
height: 100%;
|
|
padding-top: 30px;
|
|
margin-left: 0;
|
|
li{
|
|
font-size: 16px;
|
|
color: #333;
|
|
line-height: 30px;
|
|
height: 40px;
|
|
text-align: center;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
&:hover{
|
|
background: none;
|
|
}
|
|
&:last-child{
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:hover{
|
|
.userlist{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
div.classDetail {
|
|
.left {
|
|
margin-right: 14px;
|
|
position: relative;
|
|
video {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
i{
|
|
font-size: 30px;
|
|
position: absolute;
|
|
bottom: 83px;
|
|
right: 30px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
padding-top: 20px;
|
|
margin-left: 0;
|
|
|
|
p.top {
|
|
margin-left: 26px;
|
|
padding-right: 20px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, .1);
|
|
width: 250px;
|
|
|
|
span {
|
|
display: inline-block;
|
|
width: 81px;
|
|
height: 35px;
|
|
font-weight: 500;
|
|
line-height: 35px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
color: #333;
|
|
|
|
&.active {
|
|
color: #fff;
|
|
background: #80C4AE;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.content {
|
|
width: 300px;
|
|
height: 525px;
|
|
overflow: scroll;
|
|
display: none;
|
|
|
|
.list {
|
|
margin-top: 20px;
|
|
width: 300px;
|
|
height: auto;
|
|
|
|
p {
|
|
margin-left: 26px;
|
|
font-size: 16px;
|
|
color: #333;
|
|
line-height: 22px;
|
|
}
|
|
|
|
ul {
|
|
width: 300px;
|
|
|
|
li {
|
|
cursor: pointer;
|
|
height: 41px;
|
|
width: 300px;
|
|
line-height: 40px;
|
|
font-size: 14px;
|
|
padding-left: 26px;
|
|
color: #333;
|
|
|
|
&.active {
|
|
color: #80C4AE;
|
|
background: rgba(128, 196, 174, .2);
|
|
|
|
span {
|
|
color: #80C4AE;
|
|
}
|
|
}
|
|
|
|
span {
|
|
color: #333;
|
|
float: left;
|
|
}
|
|
|
|
i {
|
|
color: #80C4AE;
|
|
line-height: 37px;
|
|
float: right;
|
|
margin-right: 22px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
|
|
textarea {
|
|
width: 260px;
|
|
height: 80px;
|
|
border-radius: 4px;
|
|
border: 1px solid #E5E5E5;
|
|
margin-left: 26px;
|
|
margin-top: 20px;
|
|
background: #fafafa;
|
|
outline: none;
|
|
padding: 5px;
|
|
}
|
|
|
|
button {
|
|
width: 54px;
|
|
height: 30px;
|
|
background: #74C6B3;
|
|
border-radius: 4px;
|
|
outline: none;
|
|
padding: 5px 13px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
border: none;
|
|
margin-top: 10px;
|
|
margin-left: 232px;
|
|
}
|
|
|
|
ul.comment {
|
|
width: 260px;
|
|
margin-left: 26px;
|
|
|
|
li {
|
|
min-height: 86px;
|
|
border-bottom: 1px solid rgba(0,0,0, .1);
|
|
p {
|
|
img {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
span {
|
|
color: #333;
|
|
font-size: 14px;
|
|
&:last-child{
|
|
float: right;
|
|
line-height: 35px;
|
|
}
|
|
}
|
|
&:last-child{
|
|
color: #666;
|
|
margin-top: 10px;
|
|
margin-bottom: 20px;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child{
|
|
overflow: hidden;
|
|
.scroll{
|
|
height: 375px;
|
|
overflow: scroll;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.classlist {
|
|
|
|
// .content{
|
|
.detail {
|
|
ul {
|
|
li {
|
|
p {
|
|
span.title {
|
|
width: 320px;
|
|
display: inline-block;
|
|
}
|
|
|
|
span.hasStudy {
|
|
width: 46px;
|
|
height: 22px;
|
|
background: #80C4AE;
|
|
border-radius: 4px;
|
|
padding: 3px 5px 3px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// }
|
|
}
|
|
} |