使用vue实现自己音乐播放器仿网易云移动端(audio、播放、暂停、上一

filter: blur(50px);}.play-container{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; background: rgba(0, 0, 0, .2);}.cd{ height: 60%; display: flex; align-items: center; justify-content: center; img{ border-radius: 50%; }}. img{ animation: rotateIMG 15s linear infinite;}.Pause img{ animation-play-state:paused; -webkit-animation-play-state:paused; /* Safari

和 Chrome */}.lyrics{ height: 70%; box-sizing: border-box; padding: 0 5% 20% 5%; display: flex; flex-direction: column; justify-content: space-between; color: #fff; .volume{ display: flex; align-items: center; i{ margin-right: 20px; } .volumeRange{ width: 100%; } } &-container{ height: 75%; font-size: 16px; overflow: hidden; ul{ text-align: center; li{ color: #ded9d9; line-height: 30px; } { color: skyblue; } } }}.bottom{ height: 20%;

height: 20%; color: #fff; &-line1{ font-size: 30px; display: flex; align-items: center; justify-content: space-around; .like-yes{ i{ color: #C20C0C; } } } &-progress{ padding: 0 5%; margin: 5% 0; display: flex; align-items: center; justify-content: space-between; .progress{ height: 2px; background-color: #fff; width: 70%; position: relative; .line{ position: absolute; left: 0; top: 0; height: 2px; background-color: skyblue; transition: width .1s; } .dot{ width: 14px; height: 14px; border-radius: 50%; position: absolute; top: -6px; background-color: #ccc; transition: left .1s; } } } &-controls{ // padding: 0 5%; display: flex; align-items: center; justify-content: space-around; font-size: 30px; }}JavaScript