1.md

播放器基础样式以歌曲数据应用

关于样式问题实在太费时间了

<template>
  <!--主要分为两大块内容：1. 全屏播放器 2， 迷你播放器-->
  <div class="player" v-show="playlist.length >0">
    <div class="normal-player" v-show="fullScreen">
      <!--背景图-->
      <div class="background">
        <img width="100%" height="100%">
      </div>
      <!--顶部信息-->
      <div class="top">
        <div class="back">
          <i class="icon-back"></i>
        </div>
        <h1 class="title">枫叶</h1>
        <h2 class="subtitle">周杰伦</h2>
      </div>
      <!--唱片转动效果-->
      <div class="middle">
        <div class="middle-l">
          <div class="cd-wrapper">
            <div class="cd">
              <img class="image">
            </div>
          </div>
        </div>
      </div>
      <!--底部操作区-->
      <div class="bottom">
        <div class="operators">
          <div class="icon i-left">
            <i class="icon-sequence"></i>
          </div>
          <div class="icon i-left">
            <i class="icon-prev"></i>
          </div>
          <div class="icon i-center">
            <i class="icon-play"></i>
          </div>
          <div class="icon i-right">
            <i class="icon-next"></i>
          </div>
          <div class="icon i-right">
            <i class="icon-not-favorite"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="mini-player" v-show="!fullScreen">
      <div class="icon">
        <img width="40" height="40">
      </div>
      <div class="text">
        <h2 class="name">枫叶</h2>
        <p class="desc">周杰伦</p>
      </div>
      <div class="control"></div>
      <div class="control">
        <i class="icon-playlist"></i>
      </div>
    </div>
  </div>
</template>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .player {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background $color-background
    .background {
      position absolute
      left 0
      top 0
      right 0
      bottom 0
      z-index: -1
      opacity: 0.6
      filter: blur(20px)
    }
    .top {
      position relative
      margin-bottom 25px
      .back {
        position absolute
        top 0
        left 6px
        .icon-back {
          display block
          padding 9px
          font-size $font-size-large-x
          color $color-theme
          transform rotate(-90deg)
        }
      }
      .title {
        width 70%
        margin 0 auto
        text-align center
        line-height 40px
        no-wrap()
        font-size $font-size-large
        color $color-text
      }
      .subtitle {
        text-align center
        line-height 20px
        font-size $font-size-medium
        color $color-text
      }
    }
    .middle {
      position absolute
      top 80px
      bottom 170px
      width 100%
      font-size 0
      white-space nowrap
      .middle-l {
        display: inline-block
        vertical-align: top
        position: relative
        width: 100%
      // padding 的百分比始终参考的是 宽度值，而这里宽度是100%
      // 而 内部的cd-wrapper 的宽度是百分之 80%，高为100%
      // 所以 middle-l 的高是 宽度的 80%，而 cd-wrapper的高为100%也就是和 middle-l的高一致
      // 而 cd-wrapper de 宽为80%,那么就和middle-l的高度一致，正方形
        padding-top: 80%
        .cd-wrapper {
          position: absolute
          left: 10% // 左右10% + 宽80% 刚好让这个容器居中
          top: 0
          width: 80%
          height: 100%
          .cd {
            width 100%
            height 100%
            border 10px solid rgba(255, 255, 255, 0.1)
            border-radius: 50%
            box-sizing border-box // 任何内边距和边框都将在已设定的宽度和高度内进行绘制。让绘制的圆形始终在限制的高度内
            &.play {
              animation: rotate 20s linear infinite
            }
            &.pause {
              animation-play-state: paused // css3属性 动画是否暂停 或则运行
            }
            .image {
              position absolute
              left 0
              top 0
              width 100%
              height 100%
              border-radius 50%
            }
          }
        }
      }
    }
    .bottom {
      position absolute
      bottom 50px
      width 100%
      .operators {
        display flex
        align-items center // 当高度不一致的时候，能让他们垂直居中
        .icon {
          flex 1
          color $color-theme
          &.disable {
            color $color-theme-d
          }
          i {
            font-size 30px
          }
        }
        .i-left {
          text-align right
        }
        .i-center {
          text-align center
          padding 0 20px
          i {
            font-size 40px
          }
        }
        .i-right {
          text-align left
        }
        .icon-favorite {
          color: $color-sub-theme
        }
      }
    }
    .mini-player {
      position absolute
      bottom 0
      right 0
      left 0
      height 60px
      background $color-highlight-background
    }
    @keyframes rotate {
      0% {
        transform: rotate(0)
      }
      100% {
        transform: rotate(360deg)
      }
    }
  }
</style>

这里主要说下 唱片转动效果 的实现思路

<div class="middle">
        <div class="middle-l">
          <div class="cd-wrapper">
            <div class="cd">
              <img class="image">
            </div>
          </div>
        </div>
      </div>

middle: 定位容器，把这个唱片固定在什么位置显示 middle-l ： 使用 padding-top: 80% （百分比总是以宽度作为参照物）制定一个高 cd-wrapper ：使用 width: 80% 制定一个宽度，这里的参照物都是宽度，所以这里得到了一个宽高1:1的矩形 cd ：用来做唱片的边框透明部分和唱片容器 image : 用来承载歌曲图片