代码拉取完成,页面将自动刷新
*{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
.music{
width: 100%;
height: 100%;
}
.bg{
width: 100%;
height: 400px;
background: url(http://5b0988e595225.cdn.sohucs.com/images/20180921/0e3cc4ed20ae4fc494e4855310a0b3b2.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
filter: blur(10px);
position: absolute;
z-index: -1;
}
header{
height: 40px;
font-size: 1.2rem;
font-family: SourceHanSansCN;
font-weight: 400;
line-height: 40px;
color: #fff;
text-align: center;
}
.content{
width: 100%;
height: calc(100vh - 13rem);
background: #fff;
position: absolute;
bottom: 0;
border-top-left-radius: 31px;
border-top-right-radius: 31px;
box-shadow: 0px 0px 10px #eee;
}
@media screen and (min-width:410px){
html{
font-size: 14px;
}
}
/*
@media screen and (min-width:500px){
header{
font-size: 16px;
}
} */
.picture{
width: 25.6rem;
height: 28.3rem;
overflow: hidden;
border-radius: 40px;
margin: 0 auto;
/* margin-top: -4rem; */
position: relative;
top: -4rem;
box-shadow: 0px 10px 10px rgb(185, 174, 174);
}
.picture img{
height: 100%;
}
.name{
text-align: center;
font-family: SourceHanSansCN;
color: #000000;
}
.name h1{
font-size: 2.1rem;
font-weight: bold;
}
.name p{
margin-top: 5px;
}
.bar{
width: 22.6rem;
height: 0.1rem;
background: #c6c6c6;
margin-top: 5.1rem;
margin-left: 8.2rem;
}
.slide{
width: 11.8rem;
height: 0.2rem;
background: #f03030;
margin-top: -0.1rem;
}
.time-progress{
width: 100%;
display: flex;
}
.progress{
font-size: 0.7rem;
font-family: SourceHanSansCN;
font-weight: bold;
color: #9EA0AD;
line-height: 2.5rem;
margin-left: 7.8rem;
}
.time{
font-size: 7px;
font-family: SourceHanSansCN;
font-weight: bold;
color: #9EA0AD;
line-height: 25px;
margin-left: 17rem;
}
.Icons{
width: 100%;
}
.tu1{
width: 2.5rem;
height: 2.1rem;
margin-left: 7.2rem;
}
.tu2{
width: 3rem;
height: 2.4rem;
margin-left: 1.5rem;
}
.tu3{
width: 4.9rem;
height: 4.8rem;
position: relative;
top: 1.2rem;
left: 2rem;
}
.tu4{
width: 3rem;
height: 2.4rem;
margin-left: 3.8rem;
}
.tu5{
width: 2.4rem;
height: 2.4rem;
margin-left: 1.5rem;
}
.footer{
display: flex;
margin-top: 2rem;
}
.biao1{
margin-left: 7.5rem;
width: 1.9rem;
height: 1.9rem;
border: 1px solid #8370a8;
border-radius: 50%;
}
.biao1 p{
margin-top: 0.9rem;
margin-right: 0.5rem;
transform: scale(0.5);
font-family: SourceHanSansCN;
font-weight: 800;
color: #8370A8;
line-height: 0.3px;
}
.biao2{
margin-left: 19.5rem;
width: 1.9rem;
height: 1.9rem;
border: 1px solid #8370a8;
border-radius: 50%;
}
.biao2 p{
margin-top: 0.9rem;
margin-right: 0.5rem;
transform: scale(0.5);
font-family: SourceHanSansCN;
font-weight: 800;
color: #8370A8;
line-height: 0.3px;
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。