You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.1 KiB
115 lines
2.1 KiB
@import "var.scss";
|
|
@import "global.scss";
|
|
|
|
.play-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
transition: all 0.5s;
|
|
@include box-shadow($box-shadow);
|
|
|
|
.item-up {
|
|
position: absolute;
|
|
bottom: $play-bar-height + 10px;
|
|
left: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.kongjian {
|
|
@include layout(center, center);
|
|
bottom: 0;
|
|
height: $play-bar-height;
|
|
width: 100%;
|
|
min-width: 1000px;
|
|
background-color: $theme-play-bar-color;
|
|
|
|
.item {
|
|
position: relative;
|
|
width: 80px;
|
|
height: 50px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
.icon.active {
|
|
color: red !important;
|
|
}
|
|
.volume {
|
|
position: absolute;
|
|
display: none;
|
|
height: 100px;
|
|
top: -($play-bar-height + 50px);
|
|
right: 22px;
|
|
}
|
|
.show-volume {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.item-img {
|
|
width: $play-bar-height;
|
|
height: $play-bar-height;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.playing-speed {
|
|
// 进度条
|
|
height: 50px;
|
|
width: 900px;
|
|
@include layout(center, center);
|
|
|
|
.current-time,
|
|
.left-time {
|
|
width: 70px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: $color-black;
|
|
font-weight: 500;
|
|
top: -10px;
|
|
}
|
|
|
|
.progress-box {
|
|
flex: 1;
|
|
.item-song-title {
|
|
@include layout(space-between);
|
|
height: 20px;
|
|
line-height: 10px;
|
|
}
|
|
.progress {
|
|
width: 100%;
|
|
background: $color-blue-shallow;
|
|
height: 6px;
|
|
.bg {
|
|
height: 100%;
|
|
.cur-progress {
|
|
height: 100%;
|
|
background: $color-blue-active;
|
|
}
|
|
}
|
|
.idot {
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
border-radius: 50%;
|
|
background-color: $color-black;
|
|
top: -11px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.turn {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.show {
|
|
bottom: -($play-bar-height);
|
|
}
|
|
|
|
.icon {
|
|
@include icon(1.2em, $color-black);
|
|
}
|