菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 李扬敏-20230104-vue [打印本页]

作者: 王源的李可爱 时间: 2023-1-7 09:27
标题: 李扬敏-20230104-vue
<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>

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)