# zero-music

**Repository Path**: allentest/zero-music

## Basic Information

- **Project Name**: zero-music
- **Description**: vue实现一个音乐播放器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-07-02
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# zero-music

预览地址 [Zero Player](http://allentest.gitee.io/zero-music) http://allentest.gitee.io/zero-music

源码地址 [zero-music](https://gitee.com/allentest/zero-music) https://gitee.com/allentest/zero-music

### 介绍
vue实现一个音乐播放器

### 软件架构

软件架构说明

#### 技术栈

vue + vue-cli + vue-router + vuex + axios + scss
mint-ui + iconfont + better-scroll + fastclick + vue-awesome-swiper

#### 实现功能

1. 推荐页
 - 歌单
  - 歌单歌曲列表
2. 排行页
 - 排行榜
  - 排行榜歌曲列表
3. 歌手页
 - 歌手
  - 歌手歌曲列表
4. 搜索页
 - 推荐搜索
 - 历史记录
5. 播放器
 - 播放/暂停
 - 上一首/下一首
 - 播放模式
6. 播放列表
7. 轮播图



#### 安装教程


## 使用说明

### 1. vue-cli 安装

### 使用伪对象实现背景模糊
```scss
  .box_bd {
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: inherit;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      filter: blur(10px) brightness(0.7);
      z-index: -1;
    }
  }
  ```

### 文本超出省略号
```scss
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
```

### vue-awesome-swiper
ue-awesome-swiper的无限循环loop在页面刷新时失效
解决方法,渲染时加个判断,拿到数据后再渲染页面


####  感谢
[网易云音乐API](https://github.com/Binaryify/NeteaseCloudMusicApi)

## 修改
1.  [x]路由切换方向
2.  [x]图标需要放大
3.  [x]轮播图像素提高
4.  [x]推荐页文本宽度对齐图片
5.  [-]歌单详情加载过慢
6.  [x]播放列表中的播放模式加上文字说明,参考网易云
7.  [x]播放列表的顶部改为50px
8.  [x]播放器图片太小,碟的border太小
9.  []切歌时还原旋转动画
10. [x]进度条向上移10px
11. [x]进度条的圆点太小
12. [x]进度条与两边的文字不对称
13. [x]播放器与迷你播放器切换的动画延迟
14. [x]歌单页音乐名字过长隐藏
15. [x]图片为空的时候替换方案
16. [x]轮播图高度
17. [x]播放器关闭按钮