128 lines
2.0 KiB
CSS
128 lines
2.0 KiB
CSS
.recommend{
|
|
margin: 0 auto;
|
|
}
|
|
.title{
|
|
font-size: 22px;
|
|
color: #000;
|
|
height: 40px;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
background-color: #f3f3f3;
|
|
padding-top: 50px;
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
|
|
|
|
.menu{
|
|
text-align: center;
|
|
background-color: #f8f8f8;
|
|
height: 50px;
|
|
}
|
|
.menu li{
|
|
font-size: 12px;
|
|
color: #333;
|
|
font-weight: 400;
|
|
display: inline-block;
|
|
margin: 0 24px;
|
|
}
|
|
.menu .active{
|
|
color: #31c27c;
|
|
}
|
|
.menu li:hover{
|
|
color: #31c27c;
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon ul{
|
|
overflow: hidden;
|
|
width: 898px;
|
|
margin: 0 auto;
|
|
background-color: #fdfdfd;
|
|
}
|
|
.icon li{
|
|
width: 170px;
|
|
float: left;
|
|
margin-right: 12px;
|
|
}
|
|
.icon li:last-child{
|
|
margin-right: 0;
|
|
}
|
|
.icon img{
|
|
width: 100%;
|
|
height: 170px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.icon p{
|
|
font-size: 10px;
|
|
}
|
|
.icon p:nth-child(3){
|
|
color: #999;
|
|
font-size: 10px;
|
|
}
|
|
.icon p:nth-child(2){
|
|
width: 100%;
|
|
overflow: hidden;
|
|
/* //单行文本溢出显示省略号 */
|
|
text-overflow: ellipsis;
|
|
/* //单行文本不会换行 */
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.more ul{
|
|
text-align: center;
|
|
margin-top: 40px;
|
|
}
|
|
.more li{
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background-color: rgba(0,0,0,.1);
|
|
display: inline-block;
|
|
margin-left: 17px;
|
|
}
|
|
.more .active{
|
|
background-color: rgba(0,0,0,.3);
|
|
}
|
|
.more li:hover{
|
|
background-color: rgba(0,0,0,.3);
|
|
}
|
|
|
|
|
|
/* .icon .imgs{
|
|
width: 100%;
|
|
height: 170px;
|
|
background-image: url('https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1');
|
|
background-size: 100%;
|
|
padding: calc((100% - 50px)/2);
|
|
box-sizing: border-box;
|
|
transition: all ease 1s;
|
|
}
|
|
.icon .imgs .play_btn{
|
|
background: #ffffff;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
opacity: 0;
|
|
transition: all ease 0.5s;
|
|
}
|
|
.icon .imgs:hover{
|
|
background-size: 110%;
|
|
}
|
|
.icon .imgs:hover .play_btn{
|
|
opacity: 1;
|
|
}
|
|
.icon .imgs .play_btn i{
|
|
font-size: 20px;
|
|
line-height: 50px;
|
|
} */
|
|
|
|
|