<template>
<div class="palyer-bottom">
<div class="pb-top">
<div class="allprogress">
<div class="currentprogress">
<div class="progress-cl"></div>
</div>
</div>
</div>
<div class="pb-bottom">
<div class="pbmode"></div>
<div class="pbprev"></div>
<div class="pbpaly" @click="musicPlay"></div>
<div class="pbnext"></div>
<div class="pbfav"></div>
</div>
</div>
</template>
<script>
export default {
name: "playerBottom",
components: "",
data() {
return {};
},
created() {},
mounted() {},
methods: {
musicPlay(){
}
},
};
</script>
<style scoped lang="scss">
@import "../../assets/css/mixin.scss";
.palyer-bottom {
position: fixed;
left: 0;
right: 0;
bottom: 0;
.pb-top {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
.allprogress {
width: 400px;
height: 10px;
position: relative;
background-color: #ccc;
border-radius: 5px;
.currentprogress {
position: absolute;
top: 0;
left: 0;
width: 30px;
background-color: #fff;
height: 10px;
border-radius: 5px;
.progress-cl {
position: absolute;
top: -4px;
right: -4px;
width: 20px;
height: 20px;
border-radius: 8px;
background-color: #fff;
}
}
}
}
.pb-bottom {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
height: 160px;
div {
width: 84px;
height: 84px;
}
.pbmode {
@include changeImg("../../assets/images/loop");
}
.pbprev {
@include changeImg("../../assets/images/prev");
}
.pbpaly {
@include changeImg("../../assets/images/pause");
}
.pbnext {
@include changeImg("../../assets/images/next");
}
.pbfav {
@include changeImg("../../assets/images/favorite");
}
}
}
</style>
|
