├── README.md ├── static └── .gitkeep ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── assets │ └── logo.png ├── style │ ├── lyrics.scss │ ├── app.scss │ ├── slider.scss │ ├── rotate.scss │ ├── login.scss │ ├── album.scss │ ├── search.scss │ ├── hotSinger.scss │ ├── musicList.scss │ ├── newSong.scss │ ├── searchSinger.scss │ ├── banner.scss │ ├── playList.scss │ ├── sidebar.scss │ ├── searchSongList.scss │ ├── searchAlbum.scss │ ├── singer.scss │ ├── day.scss │ ├── searchSong.scss │ ├── songList.scss │ ├── index.scss │ ├── footer.scss │ ├── rank.scss │ └── play.scss ├── storage.js ├── App.vue ├── components │ ├── login.vue │ ├── findMusic │ │ ├── hotSinger.vue │ │ ├── playList.vue │ │ ├── newSong.vue │ │ ├── findMusic.vue │ │ ├── rank.vue │ │ └── banner.vue │ ├── play │ │ ├── rotate.vue │ │ └── lyrics.vue │ ├── musicList.vue │ ├── searchType │ │ ├── searchSinger.vue │ │ ├── searchSongList.vue │ │ ├── searchAlbum.vue │ │ └── searchSong.vue │ ├── album.vue │ ├── day.vue │ ├── slider.vue │ ├── public │ │ ├── sidebar.vue │ │ └── head.vue │ ├── singer.vue │ ├── songList.vue │ └── about.vue ├── router │ └── index.js └── main.js ├── .gitignore ├── .editorconfig ├── .postcssrc.js ├── .babelrc ├── index.html ├── docs ├── index.html └── static │ └── js │ └── manifest.0d2ea0e1a8f5116b2922.js ├── LICENSE ├── package.json ├── music-data.json ├── commend-list.json └── day.json /README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reusser/VueMusic-PC/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | NeteaseCloudMusicApi/ -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-2" 5 | ], 6 | "plugins": ["transform-runtime"], 7 | "comments": false, 8 | "env": { 9 | "test": { 10 | "presets": ["env", "stage-2"], 11 | "plugins": [ "istanbul" ] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue仿写网易云音乐 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Vue仿写网易云音乐
-------------------------------------------------------------------------------- /src/style/lyrics.scss: -------------------------------------------------------------------------------- 1 | .lyrics-container { 2 | position: relative; 3 | height: 73%; 4 | margin-top: 3rem; 5 | overflow: hidden; 6 | font-size: 13px; 7 | .lyrics { 8 | transition: transform .5s; 9 | } 10 | p { 11 | margin: { 12 | top: 1.5rem; 13 | bottom: 1.5rem; 14 | } 15 | } 16 | .now { 17 | color: #ededee; 18 | } 19 | .no-lyric { 20 | position: absolute; 21 | left: 50%; 22 | top: 50%; 23 | transform: translateX(-50%) translateY(-50%); 24 | font-size: 14px; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/storage.js: -------------------------------------------------------------------------------- 1 | const STORAGE_MUSIC_KEY = 'music'; 2 | const STORAGE_USER_KEY = 'user' 3 | 4 | export default { 5 | getMusic(key = STORAGE_MUSIC_KEY) { 6 | return JSON.parse(window.localStorage.getItem(key)); 7 | }, 8 | saveMusic(items, key = STORAGE_MUSIC_KEY) { 9 | window.localStorage.setItem(key, JSON.stringify(items)); 10 | }, 11 | getUser(key = STORAGE_USER_KEY) { 12 | return JSON.parse(window.localStorage.getItem(key)); 13 | }, 14 | saveUser(items, key = STORAGE_USER_KEY) { 15 | window.localStorage.setItem(key, JSON.stringify(items)); 16 | } 17 | } -------------------------------------------------------------------------------- /src/style/app.scss: -------------------------------------------------------------------------------- 1 | html, body, div, span, h1, h2, h3, p, img, i, ul, li, label, 2 | footer, header, time, mark, audio, video { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | html { 7 | height: 100%; 8 | font-size: 62.5%; 9 | } 10 | body { 11 | height: 100%; 12 | font-size: 1.4rem; 13 | overflow: hidden; 14 | } 15 | #app { 16 | height: 100%; 17 | overflow: auto; 18 | font-family: 'Avenir', Helvetica, Arial, sans-serif; 19 | .router-view { 20 | position: absolute; 21 | top: 5rem; 22 | right: 0; 23 | bottom: 4.6rem; 24 | left: 20rem; 25 | overflow-x: hidden; 26 | overflow-y: auto; 27 | background-color: #fafafa; 28 | &::-webkit-scrollbar { 29 | width: 8px; 30 | } 31 | &::-webkit-scrollbar-thumb { 32 | border-radius: 4px; 33 | background-color: #e1e1e2; 34 | &:hover { 35 | background-color: #cfcfd1; 36 | } 37 | } 38 | } 39 | } 40 | #app { 41 | #black { 42 | background-color: #16181c; 43 | } 44 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 oyh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 42 | 43 | 46 | -------------------------------------------------------------------------------- /src/style/slider.scss: -------------------------------------------------------------------------------- 1 | .progress-container { 2 | position: relative; 3 | display: inline-block; 4 | width: 95rem; 5 | height: .5rem; 6 | margin: { 7 | left: 1rem; 8 | right: 1rem; 9 | } 10 | vertical-align: middle; 11 | background-color: #e8e8e8; 12 | border-radius: 5px; 13 | .progress { 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | height: 5px; 18 | width: 0; 19 | border-radius: 5px; 20 | background-color: #e83c3c; 21 | } 22 | .dot { 23 | position: absolute; 24 | top: 50%; 25 | left: -10px; 26 | transform: translateY(-50%); 27 | width: 1.5rem; 28 | height: 1.5rem; 29 | text-align: center; 30 | line-height: 1.5rem; 31 | background-color: #fff; 32 | border: 1px solid #cdcdcd; 33 | border-radius: 50%; 34 | cursor: pointer; 35 | user-select: all; 36 | &:hover { 37 | box-shadow: 0 0 5px #bbb; 38 | } 39 | .circle { 40 | display: inline-block; 41 | height: .5rem; 42 | width: .5rem; 43 | margin-bottom: 2px; 44 | vertical-align: middle; 45 | border-radius: 50%; 46 | background-color: #e83c3c; 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /src/components/login.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 53 | 54 | -------------------------------------------------------------------------------- /docs/static/js/manifest.0d2ea0e1a8f5116b2922.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var n=window.webpackJsonp;window.webpackJsonp=function(t,a,c){for(var i,u,s,f=0,l=[];f 2 |
3 | 10 | 16 |
17 | 18 | 19 | 53 | 54 | -------------------------------------------------------------------------------- /src/style/rotate.scss: -------------------------------------------------------------------------------- 1 | .rotate-container { 2 | position: relative; 3 | width: 33rem; 4 | height: 36rem; 5 | .needle { 6 | position: absolute; 7 | top: -6rem; 8 | left: 50%; 9 | width: 10rem; 10 | transform: translateX(-30%) rotateZ(-10deg); 11 | transform-origin: left top; 12 | transition: transform .5s; 13 | z-index: 2; 14 | } 15 | .needle.pause { 16 | transform: translateX(-30%) rotateZ(-32deg); 17 | } 18 | .disk { 19 | position: relative; 20 | width: 33rem; 21 | height: 33rem; 22 | margin: 4rem auto; 23 | background: url(http://on99ebnkk.bkt.clouddn.com/disc-ip6.png); 24 | background-repeat: no-repeat; 25 | background-position: center center; 26 | background-size: cover; 27 | > div { 28 | position: absolute; 29 | left: 50%; 30 | top: 50%; 31 | transform: translateX(-50%) translateY(-50%); 32 | width: 21rem; 33 | height: 21rem; 34 | border-radius: 50%; 35 | background-color: #1f1f1f; 36 | } 37 | .song-img { 38 | position: absolute; 39 | left: 50%; 40 | top: 50%; 41 | transform: translateX(-50%) translateY(-50%); 42 | width: 20rem; 43 | height: 20rem; 44 | border-radius: 50%; 45 | } 46 | } 47 | .disk.playing { 48 | animation: rotate 40s infinite linear; 49 | animation-play-state: running; 50 | } 51 | .disk.pause { 52 | animation: rotate 40s infinite linear; 53 | animation-play-state: paused; 54 | } 55 | } 56 | @keyframes rotate { 57 | 0% { 58 | transform: rotateZ(0); 59 | } 60 | 100% { 61 | transform: rotateZ(360deg); 62 | } 63 | } -------------------------------------------------------------------------------- /src/style/login.scss: -------------------------------------------------------------------------------- 1 | .login-container { 2 | position: absolute; 3 | top: 50%; 4 | left: 50%; 5 | transform: translateX(-50%) translateY(-50%); 6 | z-index: 999; 7 | .choose { 8 | width: 27rem; 9 | height: 30rem; 10 | background-color: #fff; 11 | border-radius: 3px; 12 | box-shadow: 0 0 5px #aaa; 13 | header { 14 | position: relative; 15 | height: 4rem; 16 | background-color: #c62f2f; 17 | border-top-left-radius: 3px; 18 | border-top-right-radius: 3px; 19 | span { 20 | position: absolute; 21 | right: 1rem; 22 | top: 50%; 23 | transform: translateY(-50%); 24 | color: #f1f1f1; 25 | cursor: pointer; 26 | &:hover { 27 | color: #fff; 28 | } 29 | } 30 | } 31 | .btn-box { 32 | position: relative; 33 | height: 26rem; 34 | >div { 35 | position: absolute; 36 | top: 50%; 37 | left: 50%; 38 | transform: translateX(-50%) translateY(-50%); 39 | >p { 40 | margin-top: 2rem; 41 | } 42 | } 43 | .login-btn { 44 | display: inline-block; 45 | width: 20rem; 46 | height: 3rem; 47 | text-align: center; 48 | line-height: 3rem; 49 | color: #c62f2f; 50 | border: 1px solid #c62f2f; 51 | border-radius: 20px; 52 | cursor: pointer; 53 | &:hover { 54 | background-color: #c62f2f; 55 | color: #fff; 56 | } 57 | } 58 | } 59 | } 60 | } 61 | .fade-enter-active, .fade-leave-active { 62 | transition: opacity .5s 63 | } 64 | .fade-enter, .fade-leave-active { 65 | opacity: 0 66 | } -------------------------------------------------------------------------------- /src/components/play/rotate.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 56 | 57 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import findMusic from '../components/findMusic/findMusic.vue' 4 | import singer from '../components/singer.vue' 5 | import album from '../components/album.vue' 6 | import search from '../components/search.vue' 7 | import songList from '../components/songList.vue' 8 | import playList from '../components/findMusic/playList.vue' 9 | import rank from '../components/findMusic/rank.vue' 10 | import hotSinger from '../components/findMusic/hotSinger.vue' 11 | import newSong from '../components/findMusic/newSong.vue' 12 | import day from '../components/day.vue' 13 | 14 | Vue.use(Router) 15 | 16 | export default new Router({ 17 | routes: [ 18 | { 19 | path: '/', 20 | name: 'findMusic', 21 | component: findMusic 22 | }, 23 | { 24 | path: '/singer/:id', 25 | name: 'singer', 26 | component: singer 27 | }, 28 | { 29 | path: '/album/:id', 30 | name: 'album', 31 | component: album 32 | }, 33 | { 34 | path: '/search/:keywords', 35 | name: 'search', 36 | component: search 37 | }, 38 | { 39 | path: '/songList/:id', 40 | name: 'songList', 41 | component: songList 42 | }, 43 | { 44 | path: '/playList', 45 | name: 'playList', 46 | component: playList 47 | }, 48 | { 49 | path: '/rank', 50 | name: 'rank', 51 | component: rank 52 | }, 53 | { 54 | path: '/hotSinger', 55 | name: 'hotSinger', 56 | component: hotSinger 57 | }, 58 | { 59 | path: '/newSong', 60 | name: 'newSong', 61 | component: newSong 62 | }, 63 | { 64 | path: '/day', 65 | name: 'day', 66 | component: day 67 | } 68 | ] 69 | }) 70 | -------------------------------------------------------------------------------- /src/components/musicList.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 54 | 55 | -------------------------------------------------------------------------------- /src/style/album.scss: -------------------------------------------------------------------------------- 1 | .album-container { 2 | .album-container-head { 3 | display: flex; 4 | box-sizing: border-box; 5 | width: 100%; 6 | padding: 2rem 3rem; 7 | flex-flow: row nowrap; 8 | .album-logo { 9 | width: 20rem; 10 | height: 20rem; 11 | margin-right: 2rem; 12 | border: 2px solid #ced6d7; 13 | img { 14 | width: 100%; 15 | height: 100%; 16 | } 17 | } 18 | .detail { 19 | margin-left: 2rem; 20 | .tag { 21 | display: inline-block; 22 | width: 4rem; 23 | height: 2.4rem; 24 | line-height: 2.4rem; 25 | text-align: center; 26 | color: #fdf8f8; 27 | vertical-align: middle; 28 | background-color: #c62f2f; 29 | border-radius: 3px; 30 | } 31 | p { 32 | font-size: 14px; 33 | margin-bottom: 1rem; 34 | } 35 | p:first-child { 36 | margin-bottom: 4rem; 37 | } 38 | .album-name { 39 | margin-left: 1rem; 40 | font-size: 24px; 41 | font-family: "SimSun"; 42 | color: #666; 43 | vertical-align: middle; 44 | } 45 | .singer, 46 | .publishtime { 47 | margin-left: 1rem; 48 | font-size: 13px; 49 | color: #6b696b; 50 | } 51 | } 52 | } 53 | .nav { 54 | box-sizing: border-box; 55 | height: 3.2rem; 56 | width: 100%; 57 | margin-top: 5rem; 58 | padding-left: 3rem; 59 | border-bottom: 2px solid #c62f2f; 60 | span { 61 | display: inline-block; 62 | width: 8rem; 63 | height: 3.2rem; 64 | line-height: 3.2rem; 65 | text-align: center; 66 | font-size: 13px; 67 | color: #fdf8f8; 68 | background-color: #c62f2f; 69 | } 70 | } 71 | } 72 | #black { 73 | .album-name { 74 | color: #c2c3c9; 75 | } 76 | .detail { 77 | p { 78 | color: #c2c3c9; 79 | } 80 | } 81 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuemusic-pc", 3 | "version": "1.0.0", 4 | "description": "A vue.js music player", 5 | "author": "oyh <919917215@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node build/dev-server.js", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.16.1", 14 | "vue": "^2.2.2", 15 | "vue-axios": "^2.0.1", 16 | "vue-router": "^2.3.0", 17 | "vuex": "^2.2.1" 18 | }, 19 | "devDependencies": { 20 | "autoprefixer": "^6.7.2", 21 | "babel-core": "^6.22.1", 22 | "babel-loader": "^6.2.10", 23 | "babel-plugin-transform-runtime": "^6.22.0", 24 | "babel-preset-env": "^1.2.1", 25 | "babel-preset-stage-2": "^6.22.0", 26 | "babel-register": "^6.22.0", 27 | "chalk": "^1.1.3", 28 | "connect-history-api-fallback": "^1.3.0", 29 | "copy-webpack-plugin": "^4.0.1", 30 | "css-loader": "^0.26.1", 31 | "eventsource-polyfill": "^0.9.6", 32 | "express": "^4.14.1", 33 | "extract-text-webpack-plugin": "^2.0.0", 34 | "file-loader": "^0.10.0", 35 | "friendly-errors-webpack-plugin": "^1.1.3", 36 | "html-webpack-plugin": "^2.28.0", 37 | "http-proxy-middleware": "^0.17.3", 38 | "node-sass": "^4.5.2", 39 | "opn": "^4.0.2", 40 | "optimize-css-assets-webpack-plugin": "^1.3.0", 41 | "ora": "^1.1.0", 42 | "rimraf": "^2.6.0", 43 | "sass-loader": "^6.0.3", 44 | "semver": "^5.3.0", 45 | "shelljs": "^0.7.6", 46 | "url-loader": "^0.5.8", 47 | "vue-loader": "^11.1.4", 48 | "vue-style-loader": "^2.0.0", 49 | "vue-template-compiler": "^2.2.4", 50 | "webpack": "^2.2.1", 51 | "webpack-bundle-analyzer": "^2.2.1", 52 | "webpack-dev-middleware": "^1.10.0", 53 | "webpack-hot-middleware": "^2.16.1", 54 | "webpack-merge": "^2.6.1" 55 | }, 56 | "engines": { 57 | "node": ">= 4.0.0", 58 | "npm": ">= 3.0.0" 59 | }, 60 | "browserslist": [ 61 | "> 1%", 62 | "last 2 versions", 63 | "not ie <= 8" 64 | ] 65 | } 66 | -------------------------------------------------------------------------------- /src/style/search.scss: -------------------------------------------------------------------------------- 1 | .search-container { 2 | .search-count { 3 | padding: 3rem; 4 | font-size: 13px; 5 | .keywords { 6 | color: #3f6bad; 7 | } 8 | .search-num { 9 | margin: 0 .5rem; 10 | } 11 | } 12 | .nav { 13 | height: 3.2rem; 14 | width: 100%; 15 | padding-left: 3rem; 16 | overflow: hidden; 17 | border-bottom: 2px solid #c62f2f; 18 | span { 19 | display: inline-block; 20 | width: 8rem; 21 | height: 3.2rem; 22 | margin: 0 .5rem; 23 | line-height: 3.2rem; 24 | text-align: center; 25 | font-size: 13px; 26 | background-color: #fff; 27 | border: 1px solid #ced6d7; 28 | cursor: pointer; 29 | &:hover { 30 | background-color: #ecedee; 31 | } 32 | } 33 | .active { 34 | color: #fdf8f8; 35 | background-color: #c62f2f; 36 | border: 1px solid #c62f2f; 37 | &:hover { 38 | background-color: #c62f2f; 39 | } 40 | } 41 | } 42 | .loading { 43 | position: absolute; 44 | top: 0; 45 | left: 50%; 46 | transform: translateX(-50%); 47 | margin-top: 5rem; 48 | text-align: center; 49 | > p { 50 | margin-top: 3rem; 51 | } 52 | .fa { 53 | color: #c62f2f; 54 | font-size: 30px; 55 | } 56 | } 57 | } 58 | .fade-enter-active, .fade-leave-active { 59 | transition: opacity .5s 60 | } 61 | .fade-enter, .fade-leave-active { 62 | opacity: 0 63 | } 64 | #black { 65 | .search-count { 66 | color: #dadbe2; 67 | } 68 | .nav { 69 | span { 70 | background-color: #26272b; 71 | border-color: transparent; 72 | color: #cacbd2; 73 | &:hover { 74 | background-color: #2d2f32; 75 | } 76 | } 77 | .active { 78 | color: #fdf8f8; 79 | background-color: #c62f2f; 80 | border: 1px solid #c62f2f; 81 | &:hover { 82 | background-color: #c62f2f; 83 | } 84 | } 85 | } 86 | .loading { 87 | p { 88 | color: #a4a4a4; 89 | } 90 | } 91 | } -------------------------------------------------------------------------------- /src/style/hotSinger.scss: -------------------------------------------------------------------------------- 1 | .hot-singer-container { 2 | padding: { 3 | left: 3rem; 4 | right: 3rem; 5 | } 6 | .hot-singer-nav { 7 | height: 4rem; 8 | margin-bottom: 4rem; 9 | text-align: center; 10 | line-height: 4rem; 11 | border-bottom: 1px solid #e4e4e4; 12 | li { 13 | display: inline-block; 14 | height: 95%; 15 | width: 8rem; 16 | margin-left: 1rem; 17 | margin-right: 1rem; 18 | vertical-align: middle; 19 | cursor: pointer; 20 | &:hover { 21 | color: #c62f2f; 22 | } 23 | } 24 | .active { 25 | color: #c62f2f; 26 | border-bottom: 3px solid #c62f2f; 27 | } 28 | } 29 | .singers { 30 | display: flex; 31 | flex-flow: row wrap; 32 | width: 100rem; 33 | margin: 0 auto; 34 | list-style: none; 35 | li { 36 | position: relative; 37 | height: 20rem; 38 | margin: 2rem .7rem 0 .7rem; 39 | } 40 | img { 41 | display: block; 42 | width: 15rem; 43 | height: 15rem; 44 | border: 1px solid #e4e4e4; 45 | cursor: pointer; 46 | } 47 | p { 48 | height: 3rem; 49 | line-height: 3rem; 50 | font-size: 13px; 51 | color: #555; 52 | span { 53 | cursor: pointer; 54 | &:hover { 55 | color: #000; 56 | } 57 | } 58 | } 59 | } 60 | } 61 | @media screen and (max-width: 1450px) { 62 | .hot-singer-container { 63 | .singers { 64 | width: 70rem; 65 | img { 66 | width: 10rem; 67 | height: 10rem; 68 | } 69 | } 70 | } 71 | } 72 | #black { 73 | .hot-singer-nav { 74 | border-bottom: 1px solid #202226; 75 | li { 76 | color: #818284; 77 | &:hover { 78 | color: #c8c9d0; 79 | } 80 | } 81 | .active { 82 | color: #c8c9d0; 83 | border-bottom: 3px solid #5c5e61; 84 | } 85 | } 86 | img { 87 | border: 1px solid #16181c; 88 | } 89 | span { 90 | &:hover { 91 | color:#fff; 92 | } 93 | } 94 | } -------------------------------------------------------------------------------- /music-data.json: -------------------------------------------------------------------------------- 1 | { 2 | "musicData": [ 3 | { 4 | "name": "你就不要想起我(cover田馥甄)", 5 | "id": "449577226", 6 | "singer": "简弘亦", 7 | "singerId": "5001", 8 | "duration": "280971" 9 | }, 10 | { 11 | "name": "故梦", 12 | "id": "409654891", 13 | "singer": "双笙", 14 | "singerId": "12025552", 15 | "duration": "284110" 16 | }, 17 | { 18 | "name": "我的一个道姑朋友", 19 | "id": "437250607", 20 | "singer": "以冬", 21 | "singerId": "12065133", 22 | "duration": "313748" 23 | }, 24 | { 25 | "name": "夏天的风", 26 | "id": "26494530", 27 | "singer": "刘瑞琦", 28 | "singerId": "840134", 29 | "duration": "197960" 30 | }, 31 | { 32 | "name": "水星记", 33 | "id": "441491828", 34 | "singer": "郭顶", 35 | "singerId": "2843", 36 | "duration": "325266" 37 | }, 38 | { 39 | "name": "推开世界的门", 40 | "id": "441120217", 41 | "singer": "杨乃文", 42 | "singerId": "10198", 43 | "duration": "282015" 44 | }, 45 | { 46 | "name": "回到过去", 47 | "id": "186055", 48 | "singer": "周杰伦", 49 | "singerId": "6452", 50 | "duration": "233000" 51 | }, 52 | { 53 | "name": "梦伴", 54 | "id": "26584453", 55 | "singer": "李悦君", 56 | "singerId": "8678", 57 | "duration": "247413" 58 | }, 59 | { 60 | "name": "画双", 61 | "id": "410181460", 62 | "singer": "双笙", 63 | "singerId": "12025552", 64 | "duration": "287051" 65 | }, 66 | { 67 | "name": "远辰落身旁", 68 | "id": "464674509", 69 | "singer": "谢春花", 70 | "singerId": "1039895", 71 | "duration": "213369" 72 | }, 73 | { 74 | "name": "River Flows In You (Original Mix) - remix", 75 | "id": "5086081", 76 | "singer": "Mark Pride", 77 | "singerId": "211838", 78 | "duration": "298866" 79 | }, 80 | { 81 | "name": "Something Just Like This", 82 | "id": "461347998", 83 | "singer": "The Chainsmokers", 84 | "singerId": "893484", 85 | "duration": "247626" 86 | } 87 | ] 88 | } -------------------------------------------------------------------------------- /src/components/findMusic/playList.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 70 | 71 | -------------------------------------------------------------------------------- /commend-list.json: -------------------------------------------------------------------------------- 1 | { 2 | "commendList": [ 3 | { 4 | "id": "396560343", 5 | "name": "「钢琴史诗」这美妙与震撼足以让你彻底沦陷", 6 | "copywrite": "根据你收藏的歌单《前奏直接秒杀的纯音乐》推荐", 7 | "playcount": "4027609", 8 | "backgroundUrl": "http://p4.music.126.net/Z3fUkt-wQJkgKMIjLL-4Cg==/528865119747098.jpg" 9 | }, 10 | { 11 | "id": "482653439", 12 | "name": "成长吧，双笙！", 13 | "copywrite": "根据你喜欢的单曲《故梦》推荐", 14 | "playcount": "216336", 15 | "backgroundUrl": "http://p4.music.126.net/RpF1WePchMgAcBn-WiaA3g==/18631224534329560.jpg" 16 | }, 17 | { 18 | "id": "41564652", 19 | "name": "孤独症的自愈歌", 20 | "copywrite": "根据你喜欢的单曲《高尚》推荐", 21 | "playcount": "50978", 22 | "backgroundUrl": "http://p4.music.126.net/XYX1GfDeeqB6pWZinUEi2w==/109951162865187513.jpg" 23 | }, 24 | { 25 | "id": "642847603", 26 | "name": "『电音』℃ 泳池派对 夏日里的极致清凉", 27 | "copywrite": "根据你喜欢的单曲《Nevada (Original Mix)》推荐", 28 | "playcount": "1065804", 29 | "backgroundUrl": "http://p4.music.126.net/hfERTD70EViOyEa0J-rgHQ==/18673005976966035.jpg" 30 | }, 31 | { 32 | "id": "703464130", 33 | "name": "我们一起离开吧，远离尘埃。", 34 | "copywrite": "编辑推荐：我不想拯救世界，我也拯救不了世界", 35 | "playcount": "539929", 36 | "backgroundUrl": "http://p3.music.126.net/NDs0aPsYLreaJUqNdqXdGA==/109951162910093162.jpg?param=200y200" 37 | }, 38 | { 39 | "id": "711845605", 40 | "name": "华语丨同名异曲，耳目一新的听觉之旅", 41 | "copywrite": "编辑推荐：异曲同名，别有一番滋味", 42 | "playcount": "535826", 43 | "backgroundUrl": "http://p1.music.126.net/gdHyecgFUV27nJ-_gxvfrg==/19097417462968474.jpg" 44 | }, 45 | { 46 | "id": "460217828", 47 | "name": "「中国女说唱」暗香里袭人的刺", 48 | "copywrite": "根据你喜欢的单曲《模棱两可》推荐", 49 | "playcount": "802081", 50 | "backgroundUrl": "http://p1.music.126.net/V0BH4wkKQdIvVNVxhBitdw==/109951162792729779.jpg" 51 | }, 52 | { 53 | "id": "450285333", 54 | "name": "【十二月 花之物语】一花一世界 一曲一离殇", 55 | "copywrite": "根据你喜欢的单曲《方圆寸地儿》推荐", 56 | "playcount": "600220", 57 | "backgroundUrl": "http://p1.music.126.net/cnuXyZD8wuYo2-2vfR1Kzg==/18670806951436203.jpg" 58 | }, 59 | { 60 | "id": "563656963", 61 | "name": "中国风丨昆山玉碎凤凰叫(流行乐)", 62 | "copywrite": "根据你喜欢的单曲《等》推荐", 63 | "playcount": "1019893", 64 | "backgroundUrl": "http://p1.music.126.net/foHgEcnNVGgqgVYZGwDAKw==/18686200115755007.jpg" 65 | } 66 | ] 67 | } -------------------------------------------------------------------------------- /src/components/searchType/searchSinger.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 64 | 65 | -------------------------------------------------------------------------------- /src/components/album.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 91 | 92 | -------------------------------------------------------------------------------- /src/components/searchType/searchSongList.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 68 | 69 | -------------------------------------------------------------------------------- /src/components/searchType/searchAlbum.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 64 | 65 | -------------------------------------------------------------------------------- /src/components/day.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 90 | 91 | -------------------------------------------------------------------------------- /src/components/findMusic/newSong.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 86 | 87 | -------------------------------------------------------------------------------- /src/style/musicList.scss: -------------------------------------------------------------------------------- 1 | .music-list { 2 | width: 100%; 3 | margin-bottom: 5rem; 4 | li { 5 | height: 3rem; 6 | line-height: 3rem; 7 | &:hover { 8 | background-color: #ecedee; 9 | } 10 | } 11 | span { 12 | display: inline-block; 13 | margin-left: 1rem; 14 | font-size: 13px; 15 | } 16 | .music-list-head { 17 | box-sizing: border-box; 18 | color: #555; 19 | font-size: 13px; 20 | border-bottom: 1px solid #ced6d7; 21 | span { 22 | border-right: 1px solid #ced6d7; 23 | vertical-align: middle; 24 | } 25 | .space, 26 | .option { 27 | width: 5rem; 28 | } 29 | .space { 30 | height: 100%; 31 | } 32 | .music-title { 33 | width: 40rem; 34 | } 35 | .singer { 36 | width: 30rem; 37 | } 38 | .album-name { 39 | width: 35rem; 40 | } 41 | .duration { 42 | width: 5rem; 43 | border-right: 0; 44 | } 45 | } 46 | ul { 47 | .index, 48 | .option { 49 | width: 5rem; 50 | color: #777; 51 | } 52 | .index { 53 | text-align: right; 54 | } 55 | .music-title { 56 | width: 40rem; 57 | } 58 | .singer { 59 | width: 30rem; 60 | color: #777; 61 | cursor: pointer; 62 | } 63 | .album-name { 64 | width: 35rem; 65 | color: #777; 66 | } 67 | .duration { 68 | width: 5rem; 69 | color: #777; 70 | } 71 | li:nth-child(odd) { 72 | background-color: #f5f5f7; 73 | &:hover { 74 | background-color: #ecedee; 75 | } 76 | } 77 | } 78 | } 79 | @media screen and (max-width: 1450px) { 80 | .music-list { 81 | .music-list-head { 82 | .music-title { 83 | width: 30rem; 84 | } 85 | .singer { 86 | width: 20rem; 87 | } 88 | .album-name { 89 | width: 25rem; 90 | } 91 | } 92 | ul { 93 | .music-title { 94 | width: 30rem; 95 | } 96 | .singer { 97 | width: 20rem; 98 | } 99 | .album-name { 100 | width: 25rem; 101 | } 102 | .duration { 103 | width: 5rem; 104 | } 105 | } 106 | } 107 | } 108 | #black { 109 | li { 110 | .music-title { 111 | color: #d6d7de; 112 | } 113 | &:hover { 114 | background-color: #242629; 115 | color: #d6d7de; 116 | } 117 | } 118 | .music-list-head { 119 | .music-title { 120 | color: #777; 121 | } 122 | color: #d6d7de; 123 | background: #16181c; 124 | border-bottom: 1px solid #22252a; 125 | span { 126 | border-right: 1px solid #22252a; 127 | } 128 | } 129 | ul { 130 | .index, 131 | .option { 132 | color: #777; 133 | } 134 | .singer { 135 | color: #777; 136 | } 137 | .album-name { 138 | color: #777; 139 | } 140 | .duration { 141 | color: #777; 142 | } 143 | li:nth-child(odd) { 144 | background-color: #1b1c20; 145 | &:hover { 146 | background-color: #242629; 147 | } 148 | } 149 | } 150 | } -------------------------------------------------------------------------------- /src/components/slider.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 105 | 106 | -------------------------------------------------------------------------------- /src/style/newSong.scss: -------------------------------------------------------------------------------- 1 | .new-song-container { 2 | padding: { 3 | left: 3rem; 4 | right: 3rem; 5 | } 6 | .new-song-nav { 7 | height: 4rem; 8 | margin-bottom: 4rem; 9 | text-align: center; 10 | line-height: 4rem; 11 | border-bottom: 1px solid #e4e4e4; 12 | li { 13 | display: inline-block; 14 | height: 95%; 15 | width: 8rem; 16 | margin-left: 1rem; 17 | margin-right: 1rem; 18 | vertical-align: middle; 19 | cursor: pointer; 20 | &:hover { 21 | color: #c62f2f; 22 | } 23 | } 24 | .active { 25 | color: #c62f2f; 26 | border-bottom: 3px solid #c62f2f; 27 | } 28 | } 29 | .new-song { 30 | width: 100rem; 31 | margin: 4rem auto; 32 | list-style: none; 33 | border: 1px solid #e4e4e4; 34 | li { 35 | font-size: 13px; 36 | height: 6rem; 37 | line-height: 6rem; 38 | cursor: default; 39 | &:hover { 40 | background-color: #ecedee; 41 | } 42 | img { 43 | width: 4rem; 44 | height: 4rem; 45 | margin-right: .5rem; 46 | vertical-align: middle; 47 | border: 2px solid #e4e4e4; 48 | } 49 | >span { 50 | display: inline-block; 51 | overflow: hidden; 52 | text-overflow: ellipsis; 53 | white-space: nowrap; 54 | vertical-align: middle; 55 | } 56 | .alias { 57 | margin-left: .5rem; 58 | color: #888; 59 | } 60 | .index { 61 | width: 4rem; 62 | margin-left: 1rem; 63 | color: #999; 64 | } 65 | .song-name { 66 | width: 40rem; 67 | } 68 | .singer { 69 | width: 10rem; 70 | color: #555; 71 | cursor: pointer; 72 | &:hover { 73 | color: #000; 74 | } 75 | } 76 | .album { 77 | width: 30rem; 78 | color: #555; 79 | cursor: pointer; 80 | &:hover { 81 | color: #000; 82 | } 83 | } 84 | } 85 | li:nth-child(even) { 86 | background-color: #f5f5f7; 87 | &:hover { 88 | background-color: #ecedee; 89 | } 90 | } 91 | } 92 | } 93 | @media screen and (max-width: 1450px) { 94 | .new-song-container { 95 | .new-song { 96 | width: 90rem; 97 | li { 98 | .song-name { 99 | width: 30rem; 100 | } 101 | } 102 | } 103 | } 104 | } 105 | #black { 106 | .new-song-nav { 107 | border-bottom: 1px solid #202226; 108 | li { 109 | color: #818284; 110 | &:hover { 111 | color: #c8c9d0; 112 | } 113 | } 114 | .active { 115 | color: #c8c9d0; 116 | border-bottom: 3px solid #5c5e61; 117 | } 118 | } 119 | .new-song { 120 | border: 1px solid #202226; 121 | .song-name { 122 | color: #c8c9d0; 123 | } 124 | img { 125 | border-color: transparent; 126 | } 127 | li { 128 | background-color: #1b1d20; 129 | .duration { 130 | color: #555; 131 | } 132 | } 133 | li:hover { 134 | background-color: #242629; 135 | .singer, 136 | .album { 137 | color: #fff; 138 | } 139 | } 140 | li:nth-child(even) { 141 | background-color: #16181c; 142 | } 143 | } 144 | } -------------------------------------------------------------------------------- /src/style/searchSinger.scss: -------------------------------------------------------------------------------- 1 | .search-singer-container { 2 | .singer-list { 3 | li { 4 | height: 6rem; 5 | line-height: 6rem; 6 | padding: 0 3.5rem; 7 | cursor: pointer; 8 | img { 9 | width: 4rem; 10 | height: 4rem; 11 | margin-right: 1rem; 12 | vertical-align: middle; 13 | border: 1px solid #e4e4e4; 14 | } 15 | .singer-name { 16 | font-size: 13px; 17 | } 18 | .alias { 19 | font-size: 13px; 20 | color: #888; 21 | } 22 | &:hover { 23 | background-color: #ecedee; 24 | } 25 | } 26 | li:nth-child(even) { 27 | background-color: #f5f5f7; 28 | &:hover { 29 | background-color: #ecedee; 30 | } 31 | } 32 | } 33 | .page { 34 | margin-top: 3rem; 35 | margin-bottom: 4rem; 36 | text-align: center; 37 | ul { 38 | list-style: none; 39 | .fa { 40 | color: #646464; 41 | font-size: 14px; 42 | vertical-align: middle; 43 | } 44 | li { 45 | display: inline-block; 46 | height: 2.4rem; 47 | padding: 0 .9rem; 48 | color: #a4a4a4; 49 | line-height: 2.4rem; 50 | text-align: center; 51 | font-size: 12px; 52 | border: 1px solid transparent; 53 | cursor: pointer; 54 | &:hover { 55 | color: #646464; 56 | border: 1px solid #c3c4c7; 57 | background-color: #ecedf1; 58 | } 59 | } 60 | .pre-btn, 61 | .next-btn { 62 | border: 2px solid #e9e9e9; 63 | &:hover { 64 | border: 2px solid #e9e9e9; 65 | } 66 | } 67 | .apostrophe { 68 | cursor: default; 69 | &:hover { 70 | border: 1px solid transparent; 71 | background-color: transparent; 72 | } 73 | } 74 | .active { 75 | color: #c62f2f; 76 | text-decoration: underline; 77 | border: none; 78 | cursor: default; 79 | &:hover { 80 | color: #c62f2f; 81 | background-color: transparent; 82 | border: none; 83 | } 84 | } 85 | } 86 | } 87 | } 88 | #black { 89 | .singer-list { 90 | li { 91 | color: #c2d1dc; 92 | background: #16181c; 93 | img { 94 | border: 1px solid transparent; 95 | } 96 | .alias { 97 | font-size: 13px; 98 | color: #888; 99 | } 100 | &:hover { 101 | background-color: #242629; 102 | } 103 | } 104 | li:nth-child(even) { 105 | background-color: #1b1d20; 106 | &:hover { 107 | background-color: #242629; 108 | } 109 | } 110 | } 111 | .page { 112 | ul { 113 | .fa { 114 | color: #7a7b7d; 115 | } 116 | li { 117 | color: #a4a4a4; 118 | &:hover { 119 | color: #fff; 120 | border: 1px solid #1f2227; 121 | background-color: #282b32; 122 | } 123 | } 124 | .pre-btn, 125 | .next-btn { 126 | border: 2px solid #1f2227; 127 | &:hover { 128 | border: 2px solid #1f2227; 129 | } 130 | } 131 | .active { 132 | color: #c62f2f; 133 | &:hover { 134 | color: #c62f2f; 135 | } 136 | } 137 | } 138 | } 139 | } -------------------------------------------------------------------------------- /src/style/banner.scss: -------------------------------------------------------------------------------- 1 | .banner-container { 2 | position: relative; 3 | width: 100rem; 4 | height: 25rem; 5 | margin: 2rem auto; 6 | .img-container { 7 | position: relative; 8 | height: 90%; 9 | cursor: pointer; 10 | &:hover { 11 | .prev-btn, 12 | .post-btn { 13 | display: block; 14 | } 15 | } 16 | ul { 17 | list-style: none; 18 | img { 19 | width: 100%; 20 | height: 100%; 21 | } 22 | } 23 | li { 24 | position: absolute; 25 | left: 50%; 26 | bottom: 0; 27 | width: 50rem; 28 | height: 100%; 29 | transform: translateX(-50%); 30 | transition: all .5s; 31 | } 32 | .left { 33 | transform: translateX(-110%) scale(.9, .9) translateY(5%); 34 | z-index: 2; 35 | &:before { 36 | position: absolute; 37 | left: 0; 38 | top: 0; 39 | content: ''; 40 | width: 100%; 41 | height: 100%; 42 | background: rgba(0, 0, 0, .5); 43 | } 44 | } 45 | .center { 46 | position: absolute; 47 | left: 50%; 48 | width: 50rem; 49 | height: 100%; 50 | transform: translateX(-50%) scale(1, 1); 51 | z-index: 3; 52 | } 53 | .right { 54 | transform: translateX(10%) scale(.9, .9) translateY(5%); 55 | z-index: 1; 56 | &:before { 57 | position: absolute; 58 | left: 0; 59 | top: 0; 60 | content: ''; 61 | width: 100%; 62 | height: 100%; 63 | background: rgba(0, 0, 0, .5); 64 | } 65 | } 66 | .right.is-prev { 67 | z-index: 2 68 | } 69 | .left.is-prev { 70 | z-index: 1 71 | } 72 | .skip-left, 73 | .skip-center, 74 | .skip-right { 75 | transition: none; 76 | } 77 | .skip-left { 78 | transform: translateX(-80%) scale(.7, .7) translateY(5%); 79 | } 80 | .skip-center { 81 | transform: translateX(-50%) scale(.8, .8); 82 | } 83 | .skip-right { 84 | transform: translateX(-20%) scale(.7, .7) translateY(5%); 85 | } 86 | } 87 | .prev-btn, 88 | .post-btn { 89 | display: none; 90 | position: absolute; 91 | top: 50%; 92 | z-index: 999; 93 | font-size: 1.8rem; 94 | color: #7d7e80; 95 | &:hover { 96 | color: #e0e0e1; 97 | } 98 | } 99 | .prev-btn { 100 | left: 0; 101 | } 102 | .post-btn { 103 | right: 0; 104 | } 105 | .dot-list { 106 | position: absolute; 107 | bottom: 0; 108 | left: 0; 109 | width: 100%; 110 | height: 8%; 111 | display: flex; 112 | align-items: center; 113 | justify-content: center; 114 | list-style: none; 115 | .dot { 116 | width: 1.8rem; 117 | height: 3px; 118 | background-color: #c4c4c4; 119 | margin-left: .25rem; 120 | margin-right: .25rem; 121 | cursor: pointer; 122 | } 123 | .active { 124 | background-color: #c62f2f; 125 | } 126 | } 127 | } 128 | @media screen and (max-width: 1450px) { 129 | .banner-container { 130 | width: 80rem; 131 | .img-container { 132 | li { 133 | width: 40rem; 134 | height: 20rem; 135 | } 136 | .center { 137 | width: 40rem; 138 | height: 20rem; 139 | } 140 | } 141 | } 142 | } 143 | #black { 144 | .dot { 145 | background-color: #27292c; 146 | } 147 | .active { 148 | background-color: #7f8082; 149 | } 150 | } -------------------------------------------------------------------------------- /src/components/searchType/searchSong.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 86 | 87 | -------------------------------------------------------------------------------- /src/style/playList.scss: -------------------------------------------------------------------------------- 1 | .playlist-container { 2 | padding: { 3 | left: 3rem; 4 | right: 3rem; 5 | } 6 | &::-webkit-scrollbar { 7 | width: 8px; 8 | } 9 | &::-webkit-scrollbar-thumb { 10 | border-radius: 4px; 11 | background-color: #e1e1e2; 12 | &:hover { 13 | background-color: #cfcfd1; 14 | } 15 | } 16 | .playlist-nav { 17 | height: 4rem; 18 | margin-bottom: 4rem; 19 | text-align: center; 20 | line-height: 4rem; 21 | border-bottom: 1px solid #e4e4e4; 22 | li { 23 | display: inline-block; 24 | height: 95%; 25 | width: 8rem; 26 | margin-left: 1rem; 27 | margin-right: 1rem; 28 | vertical-align: middle; 29 | cursor: pointer; 30 | &:hover { 31 | color: #c62f2f; 32 | } 33 | } 34 | .active { 35 | color: #c62f2f; 36 | border-bottom: 3px solid #c62f2f; 37 | } 38 | } 39 | .playlists { 40 | display: flex; 41 | flex-flow: row wrap; 42 | justify-content: space-between; 43 | width: 105rem; 44 | margin: 0 auto; 45 | list-style: none; 46 | li { 47 | position: relative; 48 | width: 19rem; 49 | height: 24rem; 50 | margin-bottom: 2rem; 51 | overflow: hidden; 52 | .detail { 53 | position: relative; 54 | } 55 | .item-img { 56 | position: relative; 57 | height: 19rem; 58 | margin-bottom: .5rem; 59 | border: 2px solid #e4e4e4; 60 | cursor: pointer; 61 | } 62 | .creator { 63 | position: absolute; 64 | bottom: 2rem; 65 | left: 1rem; 66 | width: 10rem; 67 | overflow: hidden; 68 | text-overflow: ellipsis; 69 | white-space: nowrap; 70 | color: #efefef; 71 | font-family: "SimSun"; 72 | font-size: 12px; 73 | .fa { 74 | margin-right: .5rem; 75 | } 76 | } 77 | } 78 | .dec { 79 | font-size: 1.3rem; 80 | color: #555; 81 | span { 82 | &:hover { 83 | cursor: pointer; 84 | color: #000; 85 | } 86 | } 87 | } 88 | .listen-num { 89 | position: absolute; 90 | right: .1rem; 91 | top: 0; 92 | width: 8rem; 93 | padding: .2rem 1rem; 94 | color: #eee; 95 | font-size: 13px; 96 | text-align: right; 97 | z-index: 3; 98 | background-image: -webkit-linear-gradient( 99 | to right, 100 | rgba(255, 255, 255, .5), 101 | rgba(80, 80, 80, .5) 102 | ); 103 | background-image: linear-gradient(to right, 104 | rgba(255, 255, 255, 0), 105 | rgba(100, 100, 100, .5)); 106 | .fa { 107 | margin-right: .5rem; 108 | font-size: 14px; 109 | } 110 | } 111 | } 112 | } 113 | @media screen and (max-width: 1450px) { 114 | .playlist-container { 115 | .playlists { 116 | width: 90rem; 117 | li { 118 | width: 16rem; 119 | .item-img { 120 | height: 16rem; 121 | } 122 | } 123 | } 124 | } 125 | } 126 | #black { 127 | .playlist-nav { 128 | border-bottom: 1px solid #202226; 129 | li { 130 | color: #818284; 131 | &:hover { 132 | color: #c8c9d0; 133 | } 134 | } 135 | .active { 136 | color: #c8c9d0; 137 | border-bottom: 3px solid #5c5e61; 138 | } 139 | } 140 | .playlists { 141 | .item-img { 142 | border: 2px solid #161830; 143 | } 144 | } 145 | .dec { 146 | color: #dcdde4; 147 | span { 148 | &:hover { 149 | color: #dcdde4; 150 | } 151 | } 152 | } 153 | } -------------------------------------------------------------------------------- /src/style/sidebar.scss: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | position: absolute; 3 | top: 5rem; 4 | bottom: 4.6rem; 5 | width: 20rem; 6 | border-right: 1px solid #e1e1e2; 7 | background-color: #f5f5f7; 8 | .sidebar-list { 9 | height: 90%; 10 | overflow: auto; 11 | &::-webkit-scrollbar { 12 | width: 8px; 13 | } 14 | &::-webkit-scrollbar-thumb { 15 | border-radius: 4px; 16 | background-color: #e1e1e2; 17 | &:hover { 18 | background-color: #cfcfd1; 19 | } 20 | } 21 | } 22 | .sidebar-head { 23 | position: relative; 24 | padding-left: 1rem; 25 | height: 3.2rem; 26 | line-height: 3.2rem; 27 | font-size: 1.3rem; 28 | text-align: left; 29 | color: #898989; 30 | cursor: pointer; 31 | .fa { 32 | margin-left: 10rem; 33 | font-size: 1.8rem; 34 | &:hover { 35 | color: #000; 36 | } 37 | } 38 | } 39 | ul { 40 | li { 41 | box-sizing: border-box; 42 | overflow-x: hidden; 43 | text-overflow: ellipsis; 44 | white-space: nowrap; 45 | width: 100%; 46 | height: 3rem; 47 | padding-left: 2rem; 48 | font-size: 1.3rem; 49 | line-height: 3rem; 50 | color: #5e5e5e; 51 | vertical-align: middle; 52 | cursor: pointer; 53 | &:hover { 54 | color: #000; 55 | } 56 | .fa { 57 | font-size: 1.8rem; 58 | margin-right: 1rem; 59 | } 60 | } 61 | } 62 | .preview { 63 | position: relative; 64 | height: 10%; 65 | border-top: 1px solid #e1e1e2; 66 | &:hover .shadow { 67 | display: flex; 68 | align-items: center; 69 | justify-content: center; 70 | } 71 | .musicImg, 72 | .shadow { 73 | position: absolute; 74 | top: 0; 75 | left: 0; 76 | height: 100%; 77 | width: 6.5rem; 78 | cursor: pointer; 79 | } 80 | .shadow { 81 | display: none; 82 | text-align: center; 83 | font-size: 3rem; 84 | color: #ddd; 85 | background: rgba(0, 0, 0, .3); 86 | } 87 | .info { 88 | display: flex; 89 | position: absolute; 90 | right: 0; 91 | top: 50%; 92 | transform: translateY(-50%); 93 | height: 100%; 94 | width: 12rem; 95 | flex-direction: column; 96 | justify-content: center; 97 | color: #474747; 98 | > div { 99 | display: flex; 100 | box-sizing: border-box; 101 | width: 12rem; 102 | padding-right: 1rem; 103 | flex-flow: row nowrap; 104 | align-items: center; 105 | justify-content: space-between; 106 | > span { 107 | display: inline-block; 108 | width: 10rem; 109 | overflow-x: hidden; 110 | text-overflow: ellipsis; 111 | white-space: nowrap; 112 | vertical-align: middle; 113 | cursor: pointer; 114 | } 115 | .singer { 116 | font-size: 1.2rem; 117 | } 118 | .fa { 119 | color: #a8a8a8; 120 | cursor: pointer; 121 | } 122 | .fa-heart { 123 | color: #e83c3c; 124 | } 125 | } 126 | } 127 | } 128 | } 129 | #black { 130 | .sidebar-head { 131 | position: relative; 132 | padding-left: 1rem; 133 | height: 3.2rem; 134 | line-height: 3.2rem; 135 | font-size: 1.3rem; 136 | text-align: left; 137 | color: #898989; 138 | cursor: pointer; 139 | .fa { 140 | &:hover { 141 | color: #fff; 142 | } 143 | } 144 | } 145 | ul { 146 | li { 147 | &:hover { 148 | color: #fff; 149 | } 150 | } 151 | } 152 | .preview { 153 | border-top: solid 1px #22252b; 154 | .info { 155 | color: #c8c9d0; 156 | } 157 | } 158 | } -------------------------------------------------------------------------------- /src/style/searchSongList.scss: -------------------------------------------------------------------------------- 1 | .search-song-list-container { 2 | .playlist { 3 | list-style: none; 4 | li { 5 | height: 6rem; 6 | line-height: 6rem; 7 | padding: 0 3.5rem; 8 | cursor: pointer; 9 | font-size: 13px; 10 | &:hover { 11 | background-color: #ecedee; 12 | } 13 | } 14 | .playlist-logo { 15 | width: 4rem; 16 | height: 4rem; 17 | margin-right: 1rem; 18 | border: 1px solid #ced6d7; 19 | vertical-align: middle; 20 | } 21 | .playlist-name { 22 | display: inline-block; 23 | width: 50rem; 24 | overflow: hidden; 25 | text-overflow: ellipsis; 26 | white-space: nowrap; 27 | vertical-align: middle; 28 | } 29 | .track-count { 30 | display: inline-block; 31 | width: 20rem; 32 | color: #888; 33 | } 34 | .creator { 35 | color: #777; 36 | &:hover { 37 | color: #222; 38 | } 39 | } 40 | li:nth-child(even) { 41 | background-color: #f5f5f7; 42 | &:hover { 43 | background-color: #ecedee; 44 | } 45 | } 46 | } 47 | .page { 48 | margin-top: 3rem; 49 | margin-bottom: 4rem; 50 | text-align: center; 51 | ul { 52 | list-style: none; 53 | .fa { 54 | color: #646464; 55 | font-size: 14px; 56 | vertical-align: middle; 57 | } 58 | li { 59 | display: inline-block; 60 | height: 2.4rem; 61 | padding: 0 .9rem; 62 | color: #a4a4a4; 63 | line-height: 2.4rem; 64 | text-align: center; 65 | font-size: 12px; 66 | border: 1px solid transparent; 67 | cursor: pointer; 68 | &:hover { 69 | color: #646464; 70 | border: 1px solid #c3c4c7; 71 | background-color: #ecedf1; 72 | } 73 | } 74 | .pre-btn, 75 | .next-btn { 76 | border: 2px solid #e9e9e9; 77 | &:hover { 78 | border: 2px solid #e9e9e9; 79 | } 80 | } 81 | .apostrophe { 82 | cursor: default; 83 | &:hover { 84 | border: 1px solid transparent; 85 | background-color: transparent; 86 | } 87 | } 88 | .active { 89 | color: #c62f2f; 90 | text-decoration: underline; 91 | border: none; 92 | cursor: default; 93 | &:hover { 94 | color: #c62f2f; 95 | background-color: transparent; 96 | border: none; 97 | } 98 | } 99 | } 100 | } 101 | } 102 | @media screen and (max-width: 1450px) { 103 | .search-song-list-container { 104 | .playlist { 105 | list-style: none; 106 | .playlist-name { 107 | width: 40rem; 108 | } 109 | } 110 | } 111 | } 112 | #black { 113 | .playlist { 114 | li { 115 | color: #c2d1dc; 116 | background: #16181c; 117 | img { 118 | border: 1px solid transparent; 119 | } 120 | .alias { 121 | font-size: 13px; 122 | color: #888; 123 | } 124 | &:hover { 125 | background-color: #242629; 126 | } 127 | } 128 | li:nth-child(even) { 129 | background-color: #1b1d20; 130 | &:hover { 131 | background-color: #242629; 132 | } 133 | } 134 | } 135 | .page { 136 | ul { 137 | .fa { 138 | color: #7a7b7d; 139 | } 140 | li { 141 | color: #a4a4a4; 142 | &:hover { 143 | color: #fff; 144 | border: 1px solid #1f2227; 145 | background-color: #282b32; 146 | } 147 | } 148 | .pre-btn, 149 | .next-btn { 150 | border: 2px solid #1f2227; 151 | &:hover { 152 | border: 2px solid #1f2227; 153 | } 154 | } 155 | .active { 156 | color: #c62f2f; 157 | &:hover { 158 | color: #c62f2f; 159 | } 160 | } 161 | } 162 | } 163 | } -------------------------------------------------------------------------------- /src/style/searchAlbum.scss: -------------------------------------------------------------------------------- 1 | .search-album-container { 2 | .album-list { 3 | img { 4 | width: 4rem; 5 | height: 4rem; 6 | margin-right: 1rem; 7 | vertical-align: middle; 8 | border: 1px solid #e4e4e4; 9 | } 10 | li { 11 | height: 6rem; 12 | padding: 0 3.5rem; 13 | line-height: 6rem; 14 | font-size: 13px; 15 | cursor: pointer; 16 | .album-name { 17 | display: inline-block; 18 | width: 40rem; 19 | margin-right: 20rem; 20 | } 21 | .alias { 22 | font-size: 12px; 23 | color: #888; 24 | } 25 | .singer { 26 | display: inline-block; 27 | width: 40rem; 28 | } 29 | .singer, 30 | .album-name { 31 | text-overflow: ellipsis; 32 | white-space: nowrap; 33 | } 34 | &:hover { 35 | background-color: #ecedee; 36 | } 37 | } 38 | li:nth-child(even) { 39 | background-color: #f5f5f7; 40 | &:hover { 41 | background-color: #ecedee; 42 | } 43 | } 44 | } 45 | .page { 46 | margin-top: 3rem; 47 | margin-bottom: 4rem; 48 | text-align: center; 49 | ul { 50 | list-style: none; 51 | .fa { 52 | color: #646464; 53 | font-size: 14px; 54 | vertical-align: middle; 55 | } 56 | li { 57 | display: inline-block; 58 | height: 2.4rem; 59 | padding: 0 .9rem; 60 | color: #a4a4a4; 61 | line-height: 2.4rem; 62 | text-align: center; 63 | font-size: 12px; 64 | border: 1px solid transparent; 65 | cursor: pointer; 66 | &:hover { 67 | color: #646464; 68 | border: 1px solid #c3c4c7; 69 | background-color: #ecedf1; 70 | } 71 | } 72 | .pre-btn, 73 | .next-btn { 74 | border: 2px solid #e9e9e9; 75 | &:hover { 76 | border: 2px solid #e9e9e9; 77 | } 78 | } 79 | .apostrophe { 80 | cursor: default; 81 | &:hover { 82 | border: 1px solid transparent; 83 | background-color: transparent; 84 | } 85 | } 86 | .active { 87 | color: #c62f2f; 88 | text-decoration: underline; 89 | border: none; 90 | cursor: default; 91 | &:hover { 92 | color: #c62f2f; 93 | background-color: transparent; 94 | border: none; 95 | } 96 | } 97 | } 98 | } 99 | } 100 | @media screen and (max-width: 1450px) { 101 | .search-album-container { 102 | .album-list { 103 | li { 104 | .album-name { 105 | width: 30rem; 106 | } 107 | .singer { 108 | width: 30rem; 109 | } 110 | } 111 | } 112 | } 113 | } 114 | #black { 115 | .album-list { 116 | li { 117 | color: #c2d1dc; 118 | background: #16181c; 119 | img { 120 | border: 1px solid transparent; 121 | } 122 | .alias { 123 | font-size: 13px; 124 | color: #888; 125 | } 126 | &:hover { 127 | background-color: #242629; 128 | } 129 | } 130 | li:nth-child(even) { 131 | background-color: #1b1d20; 132 | &:hover { 133 | background-color: #242629; 134 | } 135 | } 136 | } 137 | .page { 138 | ul { 139 | .fa { 140 | color: #7a7b7d; 141 | } 142 | li { 143 | color: #a4a4a4; 144 | &:hover { 145 | color: #fff; 146 | border: 1px solid #1f2227; 147 | background-color: #282b32; 148 | } 149 | } 150 | .pre-btn, 151 | .next-btn { 152 | border: 2px solid #1f2227; 153 | &:hover { 154 | border: 2px solid #1f2227; 155 | } 156 | } 157 | .active { 158 | color: #c62f2f; 159 | &:hover { 160 | color: #c62f2f; 161 | } 162 | } 163 | } 164 | } 165 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | import axios from 'axios' 7 | import VueAxios from 'vue-axios' 8 | import Vuex from 'vuex' 9 | import storage from './storage.js' 10 | 11 | Vue.config.productionTip = false 12 | 13 | Vue.use(VueAxios, axios) 14 | 15 | Vue.use(Vuex) 16 | 17 | 18 | const store = new Vuex.Store({ 19 | state: { 20 | musicList: {'musicData': []}, 21 | theme: 'red', 22 | isPlaying: false, 23 | nowPlayIndex: 0, 24 | showMiniAudio: true, 25 | commendList: {'commendList': []}, 26 | curTimeNum: 0, 27 | showPlay: false, 28 | showAbout: false, 29 | showLogin: false, 30 | day: {'musicData': []}, 31 | theme: '' 32 | }, 33 | mutations: { 34 | setMusicList: (state, playload) => { 35 | state.musicList = playload 36 | storage.saveMusic(playload) 37 | }, 38 | play: state => { 39 | state.isPlaying = true 40 | 41 | }, 42 | pause: state => { 43 | state.isPlaying = false 44 | }, 45 | clear: state => { 46 | state.musicList = {'musicData':[]} 47 | storage.saveMusic({'musicData':[]}) 48 | }, 49 | setPlayIndex: (state, playload) => { 50 | state.nowPlayIndex = playload 51 | }, 52 | setShowMiniAudio: (state, playload) => { 53 | state.showMiniAudio = playload 54 | }, 55 | setCommendList: (state, playload) => { 56 | state.commendList = playload 57 | }, 58 | setCurTimeNum: (state, playload) => { 59 | state.curTimeNum = playload 60 | }, 61 | setShowPlay: (state, playload) => { 62 | state.showPlay = playload 63 | }, 64 | modifyMusicList: (state, playload) => { 65 | for (let i = 0, length = state.musicList.musicData.length; i < length; i++) { 66 | if (state.musicList.musicData[i].id == playload.id) { 67 | return 68 | } 69 | } 70 | state.musicList.musicData.splice(state.nowPlayIndex + 1, 0, playload) 71 | state.nowPlayIndex = state.nowPlayIndex + 1 72 | storage.saveMusic(playload) 73 | }, 74 | setShowAbout: (state, playload) => { 75 | state.showAbout = playload 76 | }, 77 | setShowLogin: (state, playload) => { 78 | state.showLogin = playload 79 | }, 80 | setDay: (state, playload) => { 81 | state.day = playload 82 | }, 83 | setTheme: (state, playload) => { 84 | state.theme = playload 85 | } 86 | }, 87 | actions: { 88 | getInitData() { 89 | return new Promise((resolve, reject) => { 90 | Vue.axios.get('http://oyhfe.com:666/music-data') 91 | .then(res => { 92 | resolve(res.data.musicData) 93 | }) 94 | }) 95 | }, 96 | getInitCommend() { 97 | return new Promise((resolve, reject) => { 98 | Vue.axios.get('http://oyhfe.com:666/commend-list') 99 | .then(res => { 100 | resolve(res.data.commendList) 101 | }) 102 | }) 103 | }, 104 | getInitDay() { 105 | return new Promise((resolve, reject) => { 106 | Vue.axios.get('http://oyhfe.com:666/day') 107 | .then(res => { 108 | resolve(res.data.day) 109 | }) 110 | }) 111 | } 112 | } 113 | }) 114 | /* eslint-disable no-new */ 115 | new Vue({ 116 | el: '#app', 117 | router, 118 | store, 119 | template: '', 120 | components: { App } 121 | }) 122 | console.log("%c18届萌新求前端实习 熟悉css ES5 ES6 前端自动化构建 vue.js","background-image:-webkit-gradient( linear, left top,right top, color-stop(0, #4096EE), color-stop(0.15, #FF1A00), color-stop(0.3, #4096EE), color-stop(0.45, #FF1A00),color-stop(0.6, #4096EE), color-stop(0.75, #FF1A00),color-stop(0.9, #4096EE), color-stop(1, #FF1A00));color:transparent;-webkit-background-clip:text;font-size:10px;"); 123 | console.log("%c联系方式(QQ): 919917215","background-image:-webkit-gradient( linear, left top,right top, color-stop(0, #4096EE), color-stop(0.15, #FF1A00), color-stop(0.3, #4096EE), color-stop(0.45, #FF1A00),color-stop(0.6, #4096EE), color-stop(0.75, #FF1A00),color-stop(0.9, #4096EE), color-stop(1, #FF1A00));color:transparent;-webkit-background-clip:text;font-size:10px;"); 124 | 125 | -------------------------------------------------------------------------------- /src/components/findMusic/findMusic.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 114 | 115 | -------------------------------------------------------------------------------- /src/components/public/sidebar.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 108 | 109 | -------------------------------------------------------------------------------- /src/style/singer.scss: -------------------------------------------------------------------------------- 1 | .singer-container { 2 | .singer-head { 3 | display: flex; 4 | box-sizing: border-box; 5 | width: 100%; 6 | padding: 2rem 3rem; 7 | flex-flow: row nowrap; 8 | .singer-img { 9 | width: 20rem; 10 | height: 20rem; 11 | margin-right: 2rem; 12 | border: 2px solid #ced6d7; 13 | img { 14 | width: 100%; 15 | height: 100%; 16 | } 17 | } 18 | .detail { 19 | margin-left: 2rem; 20 | .tag { 21 | display: inline-block; 22 | width: 4rem; 23 | height: 2.4rem; 24 | line-height: 2.4rem; 25 | text-align: center; 26 | color: #fdf8f8; 27 | vertical-align: middle; 28 | background-color: #c62f2f; 29 | border-radius: 3px; 30 | } 31 | p { 32 | font-size: 14px; 33 | margin-bottom: 1rem; 34 | } 35 | .singer { 36 | font-size: 24px; 37 | font-family: "SimSun"; 38 | color: #666; 39 | vertical-align: middle; 40 | } 41 | .alias { 42 | margin-top: 3rem; 43 | margin-bottom: 2rem; 44 | font-size: 13px; 45 | } 46 | .detail-num { 47 | color: #6b696b; 48 | } 49 | } 50 | } 51 | .nav { 52 | box-sizing: border-box; 53 | height: 3.2rem; 54 | width: 100%; 55 | margin-top: 5rem; 56 | padding-left: 3rem; 57 | border-bottom: 2px solid #c62f2f; 58 | span { 59 | display: inline-block; 60 | width: 8rem; 61 | height: 3.2rem; 62 | line-height: 3.2rem; 63 | text-align: center; 64 | font-size: 13px; 65 | color: #fdf8f8; 66 | background-color: #c62f2f; 67 | } 68 | } 69 | .albums { 70 | box-sizing: border-box; 71 | padding: 2rem 3rem; 72 | .album-logo { 73 | width: 16rem; 74 | height: 16rem; 75 | img { 76 | width: 100%; 77 | height: 100%; 78 | } 79 | } 80 | .publishtime { 81 | margin-top: 1rem; 82 | margin-bottom: 1rem; 83 | font-size: 12px; 84 | color: #888; 85 | } 86 | .hot-songs, 87 | .album-songs { 88 | display: flex; 89 | flex-flow: row nowrap; 90 | margin-bottom: 5rem; 91 | } 92 | .albums-content { 93 | margin-left: 6rem; 94 | flex-grow: 1; 95 | } 96 | .albums-title { 97 | color: #555; 98 | font-size: 13px; 99 | margin-bottom: 2rem; 100 | &:hover { 101 | color: #000; 102 | } 103 | } 104 | .album-songs { 105 | .albums-title { 106 | cursor: pointer; 107 | } 108 | } 109 | ul { 110 | font-size: 13px; 111 | list-style: none; 112 | border: 2px solid #ededee; 113 | .fa { 114 | color: #b6b6b6; 115 | } 116 | .index, 117 | .time { 118 | color: #a1a2a2; 119 | font-weight: 500; 120 | } 121 | li { 122 | height: 3rem; 123 | line-height: 3rem; 124 | .index { 125 | margin-left: 2rem; 126 | } 127 | .fa { 128 | margin-left: .5rem; 129 | } 130 | .song-name { 131 | display: inline-block; 132 | width: 80rem; 133 | margin-left: 2rem; 134 | cursor: default; 135 | } 136 | &:hover { 137 | background-color: #ecedee; 138 | } 139 | } 140 | li:nth-child(even) { 141 | background-color: #f5f5f7; 142 | &:hover { 143 | background-color: #ecedee; 144 | } 145 | } 146 | } 147 | .show-all { 148 | padding: 1rem; 149 | font-size: 13px; 150 | color: #a1a2a2; 151 | span { 152 | cursor: pointer; 153 | &:hover { 154 | color: #666; 155 | } 156 | } 157 | } 158 | } 159 | } 160 | @media screen and (max-width: 1450px) { 161 | .singer-container { 162 | .albums { 163 | .album-logo { 164 | img { 165 | width: 16rem; 166 | height: 16rem; 167 | } 168 | } 169 | ul { 170 | li { 171 | .song-name { 172 | width: 60rem; 173 | } 174 | } 175 | } 176 | } 177 | } 178 | } 179 | #black { 180 | .singer { 181 | color: #c2c3c9; 182 | } 183 | .detail { 184 | p { 185 | color: #c2c3c9; 186 | } 187 | } 188 | .albums-title { 189 | color: #c2c3c9; 190 | &:hover { 191 | color: #fff; 192 | } 193 | } 194 | ul { 195 | border-color: transparent; 196 | li:nth-child(even) { 197 | background-color: #1b1d20; 198 | } 199 | li:hover { 200 | background-color: #242629; 201 | } 202 | .song-name { 203 | color: #c2c3c9; 204 | } 205 | } 206 | } -------------------------------------------------------------------------------- /day.json: -------------------------------------------------------------------------------- 1 | { 2 | "musicData": [ 3 | { 4 | "name": "庆祝", 5 | "id": "468513150", 6 | "singer": "陈粒", 7 | "singerId": "1007170", 8 | "duration": "199178", 9 | "albumName": "庆祝", 10 | "albumId": "35313290" 11 | }, 12 | { 13 | "name": "明天何其多", 14 | "id": "471411214", 15 | "singer": "陈奕迅", 16 | "singerId": "2116", 17 | "duration": "255608", 18 | "albumName": "欣赏", 19 | "albumId": "35357294" 20 | }, 21 | { 22 | "name": "红昭愿", 23 | "id": "460581493", 24 | "singer": "流芒菌", 25 | "singerId": "12293313", 26 | "duration": "173217", 27 | "albumName": "红昭愿", 28 | "albumId": "35189170" 29 | }, 30 | { 31 | "name": "脑海浮游的你（原曲：大爱）", 32 | "id": "437311664", 33 | "singer": "以冬", 34 | "singerId": "12065133", 35 | "duration": "250515", 36 | "albumName": "脑海浮游的你", 37 | "albumId": "34937865" 38 | }, 39 | { 40 | "name": "圆", 41 | "id": "406475388", 42 | "singer": "AGA", 43 | "singerId": "768208", 44 | "duration": "249051", 45 | "albumName": "Ginadoll", 46 | "albumId": "34561161" 47 | }, 48 | { 49 | "name": "烟霞", 50 | "id": "287744", 51 | "singer": "容祖儿", 52 | "singerId": "9269", 53 | "duration": "237891", 54 | "albumName": "Give Love A Break", 55 | "albumId": "28561" 56 | }, 57 | { 58 | "name": "相依为命", 59 | "id": "94639", 60 | "singer": "陈小春", 61 | "singerId": "2112", 62 | "duration": "237087", 63 | "albumName": "十年选", 64 | "albumId": "9259" 65 | }, 66 | { 67 | "name": "剧本", 68 | "id": "35678880", 69 | "singer": "Fine乐团", 70 | "singerId": "1160085", 71 | "duration": "340422", 72 | "albumName": "I'm Sorry", 73 | "albumId": "3314573" 74 | }, 75 | { 76 | "name": "Light It Up (Original Mix)", 77 | "id": "421423251", 78 | "singer": "Calvo", 79 | "singerId": "1146039", 80 | "duration": "173740", 81 | "albumName": "Light It Up", 82 | "albumId": "34780371" 83 | }, 84 | { 85 | "name": "刚刚好", 86 | "id": "415792881", 87 | "singer": "薛之谦", 88 | "singerId": "5781", 89 | "duration": "250482", 90 | "albumName": "初学者", 91 | "albumId": "34780271" 92 | }, 93 | { 94 | "name": "I Am You", 95 | "id": "2919622", 96 | "singer": "Kim Taylor", 97 | "singerId": "63943", 98 | "duration": "274495", 99 | "albumName": "I Am You", 100 | "albumId": "294835" 101 | }, 102 | { 103 | "name": "身骑白马", 104 | "id": "306664", 105 | "singer": "徐佳莹", 106 | "singerId": "9940", 107 | "duration": "313417", 108 | "albumName": "LaLa首张创作专辑", 109 | "albumId": "30452" 110 | }, 111 | { 112 | "name": "迷宫", 113 | "id": "4873594", 114 | "singer": "王若琳", 115 | "singerId": "9604", 116 | "duration": "218018", 117 | "albumName": "美味关系 电视原声带", 118 | "albumId": "489824" 119 | }, 120 | { 121 | "name": "思念是一种病(Live) - live", 122 | "id": "394485", 123 | "singer": "张震岳", 124 | "singerId": "6453", 125 | "duration": "295000", 126 | "albumName": "Live in Taipei 出发/终点站", 127 | "albumId": "39066" 128 | }, 129 | { 130 | "name": "苦瓜", 131 | "id": "64293", 132 | "singer": "陈奕迅", 133 | "singerId": "2116", 134 | "duration": "278000", 135 | "albumName": "Stranger Under My Skin", 136 | "albumId": "6355" 137 | }, 138 | { 139 | "name": "没关系", 140 | "id": "426027536", 141 | "singer": "曹轩宾", 142 | "singerId": "2159", 143 | "duration": "282950", 144 | "albumName": "亲爱的,公主病 电视原声带", 145 | "albumId": "34839993" 146 | }, 147 | { 148 | "name": "蓝莲花", 149 | "id": "168091", 150 | "singer": "许巍", 151 | "singerId": "5770", 152 | "duration": "270000", 153 | "albumName": "时光.漫步", 154 | "albumId": "16975" 155 | }, 156 | { 157 | "name": "秀才胡同", 158 | "id": "254445", 159 | "singer": "李宇春", 160 | "singerId": "8327", 161 | "duration": "292598", 162 | "albumName": "少年中国", 163 | "albumId": "25425" 164 | }, 165 | { 166 | "name": "月出", 167 | "id": "36117196", 168 | "singer": "双笙", 169 | "singerId": "12025552", 170 | "duration": "239086", 171 | "albumName": "月圆，笙起", 172 | "albumId": "3313711" 173 | }, 174 | { 175 | "name": "独角戏", 176 | "id": "307525", 177 | "singer": "许茹芸", 178 | "singerId": "9943", 179 | "duration": "277293", 180 | "albumName": "如果云知道", 181 | "albumId": "30534" 182 | } 183 | ] 184 | } -------------------------------------------------------------------------------- /src/components/play/lyrics.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 151 | 152 | 155 | 156 | -------------------------------------------------------------------------------- /src/style/day.scss: -------------------------------------------------------------------------------- 1 | .container-head { 2 | position: relative; 3 | display: flex; 4 | box-sizing: border-box; 5 | width: 100%; 6 | padding: 2rem 3rem; 7 | flex-flow: row nowrap; 8 | .list-logo { 9 | position: relative; 10 | width: 20rem; 11 | height: 20rem; 12 | margin-right: 2rem; 13 | text-align: center; 14 | background-color: #fff; 15 | border: 2px solid #ced6d7; 16 | div { 17 | position: absolute; 18 | top: 50%; 19 | left: 50%; 20 | transform: translateY(-50%) translateX(-50%); 21 | .week { 22 | font-size: 2rem; 23 | color: #6c6c6c; 24 | } 25 | .day { 26 | font-size: 8rem; 27 | color: #c62f2f; 28 | } 29 | } 30 | } 31 | .detail { 32 | flex-grow: 1; 33 | margin-left: 2rem; 34 | p { 35 | margin-bottom: 2rem; 36 | } 37 | .list-name { 38 | margin-left: 1rem; 39 | font-size: 24px; 40 | color: #666; 41 | vertical-align: middle; 42 | } 43 | .description { 44 | color: #666; 45 | font-size: 13px; 46 | } 47 | } 48 | } 49 | .music-list { 50 | width: 100%; 51 | margin-bottom: 5rem; 52 | li { 53 | height: 3rem; 54 | line-height: 3rem; 55 | cursor: default; 56 | &:hover { 57 | background-color: #ecedee; 58 | } 59 | } 60 | span { 61 | display: inline-block; 62 | margin-left: 1rem; 63 | font-size: 13px; 64 | } 65 | .music-list-head { 66 | box-sizing: border-box; 67 | color: #555; 68 | font-size: 13px; 69 | border-bottom: 1px solid #ced6d7; 70 | span { 71 | border-right: 1px solid #ced6d7; 72 | vertical-align: middle; 73 | } 74 | .space, 75 | .option { 76 | width: 5rem; 77 | } 78 | .space { 79 | height: 100%; 80 | } 81 | .music-title { 82 | width: 40rem; 83 | } 84 | .singer { 85 | width: 30rem; 86 | } 87 | .album-name { 88 | width: 35rem; 89 | } 90 | .duration { 91 | width: 5rem; 92 | border-right: 0; 93 | } 94 | } 95 | ul { 96 | .index, 97 | .option { 98 | width: 5rem; 99 | color: #777; 100 | vertical-align: top; 101 | } 102 | .index { 103 | text-align: right; 104 | } 105 | .music-title { 106 | width: 40rem; 107 | } 108 | .singer { 109 | width: 30rem; 110 | color: #777; 111 | cursor: pointer; 112 | } 113 | .album-name { 114 | width: 35rem; 115 | color: #777; 116 | cursor: pointer; 117 | } 118 | .duration { 119 | width: 5rem; 120 | color: #777; 121 | vertical-align: top; 122 | } 123 | .music-title, 124 | .album-name, 125 | .singer { 126 | overflow: hidden; 127 | text-overflow: ellipsis; 128 | white-space: nowrap; 129 | } 130 | .alias { 131 | color: #888; 132 | } 133 | li:nth-child(odd) { 134 | background-color: #f5f5f7; 135 | &:hover { 136 | background-color: #ecedee; 137 | } 138 | } 139 | } 140 | } 141 | .loading { 142 | position: absolute; 143 | top: 0; 144 | left: 50%; 145 | transform: translateX(-50%); 146 | margin-top: 5rem; 147 | text-align: center; 148 | > p { 149 | margin-top: 3rem; 150 | } 151 | .fa { 152 | color: #c62f2f; 153 | font-size: 30px; 154 | } 155 | } 156 | .fade-enter-active, .fade-leave-active { 157 | transition: opacity .5s 158 | } 159 | .fade-enter, .fade-leave-active { 160 | opacity: 0 161 | } 162 | @media screen and (max-width: 1450px) { 163 | .music-list { 164 | .music-list-head { 165 | .music-title { 166 | width: 30rem; 167 | } 168 | .singer { 169 | width: 20rem; 170 | } 171 | .album-name { 172 | width: 25rem; 173 | } 174 | } 175 | ul { 176 | .music-title { 177 | width: 30rem; 178 | } 179 | .singer { 180 | width: 20rem; 181 | } 182 | .album-name { 183 | width: 25rem; 184 | } 185 | .duration { 186 | width: 5rem; 187 | } 188 | } 189 | } 190 | } 191 | #black { 192 | .list-name { 193 | color: #dbdde3; 194 | } 195 | .istag { 196 | color: #dbdde3; 197 | } 198 | .toggle-btn:hover { 199 | color: #dbdde3; 200 | } 201 | li { 202 | .music-title { 203 | color: #d6d7de; 204 | } 205 | &:hover { 206 | background-color: #242629; 207 | color: #d6d7de; 208 | } 209 | } 210 | .music-list-head { 211 | .music-title { 212 | color: #777; 213 | } 214 | color: #d6d7de; 215 | background: #16181c; 216 | border-bottom: 1px solid #22252a; 217 | span { 218 | border-right: 1px solid #22252a; 219 | } 220 | } 221 | ul { 222 | .index, 223 | .option { 224 | color: #777; 225 | } 226 | .singer { 227 | color: #777; 228 | } 229 | .album-name { 230 | color: #777; 231 | } 232 | .duration { 233 | color: #777; 234 | } 235 | li:nth-child(odd) { 236 | background-color: #1b1c20; 237 | &:hover { 238 | background-color: #242629; 239 | } 240 | } 241 | } 242 | .loading { 243 | p { 244 | color: #a4a4a4; 245 | } 246 | } 247 | } -------------------------------------------------------------------------------- /src/components/findMusic/rank.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 157 | 158 | -------------------------------------------------------------------------------- /src/style/searchSong.scss: -------------------------------------------------------------------------------- 1 | .search-list-head { 2 | box-sizing: border-box; 3 | height: 3rem; 4 | color: #555; 5 | font-size: 13px; 6 | line-height: 3rem; 7 | border-bottom: 1px solid #ced6d7; 8 | span { 9 | display: inline-block; 10 | margin-left: 1rem; 11 | font-size: 13px; 12 | vertical-align: middle; 13 | border-right: 1px solid #ced6d7; 14 | } 15 | .space, 16 | .option { 17 | width: 5rem; 18 | } 19 | .space { 20 | height: 100%; 21 | } 22 | .music-title { 23 | width: 40rem; 24 | } 25 | .singer { 26 | width: 30rem; 27 | } 28 | .album-name { 29 | width: 35rem; 30 | } 31 | .duration { 32 | width: 5rem; 33 | border-right: 0; 34 | } 35 | } 36 | .songs { 37 | margin-bottom: 5rem; 38 | li { 39 | line-height: 3rem; 40 | &:hover { 41 | background-color: #ecedee; 42 | } 43 | } 44 | span { 45 | display: inline-block; 46 | margin-left: 1rem; 47 | font-size: 13px; 48 | white-space: nowrap; 49 | overflow: hidden; 50 | text-overflow: ellipsis; 51 | vertical-align: middle; 52 | } 53 | .index, 54 | .option { 55 | width: 5rem; 56 | color: #777; 57 | } 58 | .index { 59 | text-align: right; 60 | } 61 | .music-title { 62 | width: 40rem; 63 | } 64 | div.music-title { 65 | display: inline-block; 66 | height: 6rem; 67 | margin-left: 1rem; 68 | font-size: 13px; 69 | vertical-align: top; 70 | } 71 | .alias { 72 | color: #888; 73 | } 74 | .singer { 75 | width: 30rem; 76 | color: #777; 77 | cursor: pointer; 78 | } 79 | .album-name { 80 | width: 35rem; 81 | color: #777; 82 | cursor: pointer; 83 | } 84 | .duration { 85 | width: 5rem; 86 | color: #777; 87 | } 88 | li:nth-child(even) { 89 | background-color: #f5f5f7; 90 | &:hover { 91 | background-color: #ecedee; 92 | } 93 | } 94 | } 95 | .page { 96 | margin-top: 3rem; 97 | margin-bottom: 4rem; 98 | text-align: center; 99 | ul { 100 | list-style: none; 101 | .fa { 102 | color: #646464; 103 | font-size: 14px; 104 | vertical-align: middle; 105 | } 106 | li { 107 | display: inline-block; 108 | height: 2.4rem; 109 | padding: 0 .9rem; 110 | color: #a4a4a4; 111 | line-height: 2.4rem; 112 | text-align: center; 113 | font-size: 12px; 114 | border: 1px solid transparent; 115 | cursor: pointer; 116 | &:hover { 117 | color: #646464; 118 | border: 1px solid #c3c4c7; 119 | background-color: #ecedf1; 120 | } 121 | } 122 | .pre-btn, 123 | .next-btn { 124 | border: 2px solid #e9e9e9; 125 | &:hover { 126 | border: 2px solid #e9e9e9; 127 | } 128 | } 129 | .apostrophe { 130 | cursor: default; 131 | &:hover { 132 | border: 1px solid transparent; 133 | background-color: transparent; 134 | } 135 | } 136 | .active { 137 | color: #c62f2f; 138 | text-decoration: underline; 139 | border: none; 140 | cursor: default; 141 | &:hover { 142 | color: #c62f2f; 143 | background-color: transparent; 144 | border: none; 145 | } 146 | } 147 | } 148 | } 149 | @media screen and (max-width: 1450px) { 150 | .search-list-head { 151 | .music-title { 152 | width: 30rem; 153 | } 154 | .singer { 155 | width: 20rem; 156 | } 157 | .album-name { 158 | width: 25rem; 159 | } 160 | } 161 | .songs { 162 | .music-title { 163 | width: 30rem; 164 | } 165 | .singer { 166 | width: 20rem; 167 | color: #777; 168 | cursor: pointer; 169 | } 170 | .album-name { 171 | width: 25rem; 172 | color: #777; 173 | cursor: pointer; 174 | } 175 | } 176 | } 177 | #black { 178 | li { 179 | .music-title { 180 | color: #d6d7de; 181 | } 182 | &:hover { 183 | background-color: #242629; 184 | color: #d6d7de; 185 | } 186 | } 187 | .search-list-head { 188 | .music-title { 189 | color: #777; 190 | } 191 | color: #d6d7de; 192 | background: #16181c; 193 | border-bottom: 1px solid #22252a; 194 | span { 195 | border-right: 1px solid #22252a; 196 | } 197 | } 198 | .songs{ 199 | .index, 200 | .option { 201 | color: #777; 202 | } 203 | .singer { 204 | color: #777; 205 | } 206 | .album-name { 207 | color: #777; 208 | } 209 | .duration { 210 | color: #777; 211 | } 212 | li:nth-child(even) { 213 | background-color: #1b1c20; 214 | &:hover { 215 | background-color: #242629; 216 | } 217 | } 218 | } 219 | .page { 220 | ul { 221 | .fa { 222 | color: #7a7b7d; 223 | } 224 | li { 225 | color: #a4a4a4; 226 | &:hover { 227 | color: #fff; 228 | border: 1px solid #1f2227; 229 | background-color: #282b32; 230 | } 231 | } 232 | .pre-btn, 233 | .next-btn { 234 | border: 2px solid #1f2227; 235 | &:hover { 236 | border: 2px solid #1f2227; 237 | } 238 | } 239 | .active { 240 | color: #c62f2f; 241 | &:hover { 242 | color: #c62f2f; 243 | } 244 | } 245 | } 246 | } 247 | .loading { 248 | p { 249 | color: #a4a4a4; 250 | } 251 | } 252 | } -------------------------------------------------------------------------------- /src/components/singer.vue: -------------------------------------------------------------------------------- 1 | 72 | 73 | 181 | 182 | -------------------------------------------------------------------------------- /src/style/songList.scss: -------------------------------------------------------------------------------- 1 | .container-head { 2 | position: relative; 3 | display: flex; 4 | box-sizing: border-box; 5 | width: 100%; 6 | padding: 2rem 3rem; 7 | flex-flow: row nowrap; 8 | .list-logo { 9 | width: 20rem; 10 | height: 20rem; 11 | margin-right: 2rem; 12 | border: 2px solid #ced6d7; 13 | img { 14 | width: 20rem; 15 | height: 20rem; 16 | } 17 | } 18 | .detail { 19 | flex-grow: 1; 20 | margin-left: 2rem; 21 | p { 22 | margin-bottom: 2rem; 23 | } 24 | .tag { 25 | display: inline-block; 26 | width: 4rem; 27 | height: 2.4rem; 28 | line-height: 2.4rem; 29 | text-align: center; 30 | color: #fdf8f8; 31 | vertical-align: middle; 32 | background-color: #c62f2f; 33 | border-radius: 3px; 34 | } 35 | .list-name { 36 | margin-left: 1rem; 37 | font-size: 24px; 38 | color: #666; 39 | vertical-align: middle; 40 | } 41 | .avatar { 42 | width: 3.2rem; 43 | height: 3.2rem; 44 | vertical-align: middle; 45 | border-radius: 50%; 46 | } 47 | .creator { 48 | color: #555; 49 | } 50 | .time { 51 | margin-left: 2rem; 52 | color: #888; 53 | font-size: 13px; 54 | } 55 | .tags { 56 | color: #2481c8; 57 | } 58 | .description { 59 | color: #666; 60 | font-size: 13px; 61 | } 62 | .toggle-btn { 63 | position: absolute; 64 | right: 4rem; 65 | bottom: 3rem; 66 | font-size: 25px; 67 | color: #888; 68 | cursor: pointer; 69 | &:hover { 70 | color: #000; 71 | } 72 | } 73 | .count { 74 | position: absolute; 75 | right: 5rem; 76 | top: 3rem; 77 | color: #666; 78 | span { 79 | margin-right: 2rem; 80 | } 81 | .fa { 82 | font-size: 16px; 83 | color: #666; 84 | margin-right: .5rem; 85 | } 86 | } 87 | } 88 | } 89 | .nav { 90 | box-sizing: border-box; 91 | height: 3.2rem; 92 | width: 100%; 93 | margin-top: 5rem; 94 | padding-left: 3rem; 95 | border-bottom: 2px solid #c62f2f; 96 | span { 97 | display: inline-block; 98 | width: 8rem; 99 | height: 3.2rem; 100 | line-height: 3.2rem; 101 | text-align: center; 102 | font-size: 13px; 103 | color: #fdf8f8; 104 | background-color: #c62f2f; 105 | } 106 | } 107 | .music-list { 108 | width: 100%; 109 | margin-bottom: 5rem; 110 | li { 111 | height: 3rem; 112 | line-height: 3rem; 113 | cursor: default; 114 | &:hover { 115 | background-color: #ecedee; 116 | } 117 | } 118 | span { 119 | display: inline-block; 120 | margin-left: 1rem; 121 | font-size: 13px; 122 | } 123 | .music-list-head { 124 | box-sizing: border-box; 125 | color: #555; 126 | font-size: 13px; 127 | border-bottom: 1px solid #ced6d7; 128 | span { 129 | border-right: 1px solid #ced6d7; 130 | vertical-align: middle; 131 | } 132 | .space, 133 | .option { 134 | width: 5rem; 135 | } 136 | .space { 137 | height: 100%; 138 | } 139 | .music-title { 140 | width: 40rem; 141 | } 142 | .singer { 143 | width: 30rem; 144 | } 145 | .album-name { 146 | width: 35rem; 147 | } 148 | .duration { 149 | width: 5rem; 150 | border-right: 0; 151 | } 152 | } 153 | ul { 154 | .index, 155 | .option { 156 | width: 5rem; 157 | color: #777; 158 | vertical-align: top; 159 | } 160 | .index { 161 | text-align: right; 162 | } 163 | .music-title { 164 | width: 40rem; 165 | } 166 | .singer { 167 | width: 30rem; 168 | color: #777; 169 | cursor: pointer; 170 | } 171 | .album-name { 172 | width: 35rem; 173 | color: #777; 174 | cursor: pointer; 175 | } 176 | .duration { 177 | width: 5rem; 178 | color: #777; 179 | } 180 | .music-title, 181 | .album-name, 182 | .singer { 183 | overflow: hidden; 184 | text-overflow: ellipsis; 185 | white-space: nowrap; 186 | } 187 | .alias { 188 | color: #888; 189 | } 190 | li:nth-child(odd) { 191 | background-color: #f5f5f7; 192 | &:hover { 193 | background-color: #ecedee; 194 | } 195 | } 196 | } 197 | } 198 | .loading { 199 | position: absolute; 200 | top: 0; 201 | left: 50%; 202 | transform: translateX(-50%); 203 | margin-top: 5rem; 204 | text-align: center; 205 | > p { 206 | margin-top: 3rem; 207 | } 208 | .fa { 209 | color: #c62f2f; 210 | font-size: 30px; 211 | } 212 | } 213 | .fade-enter-active, .fade-leave-active { 214 | transition: opacity .5s 215 | } 216 | .fade-enter, .fade-leave-active { 217 | opacity: 0 218 | } 219 | @media screen and (max-width: 1450px) { 220 | .music-list { 221 | .music-list-head { 222 | .music-title { 223 | width: 30rem; 224 | } 225 | .singer { 226 | width: 20rem; 227 | } 228 | .album-name { 229 | width: 25rem; 230 | } 231 | } 232 | ul { 233 | .music-title { 234 | width: 30rem; 235 | } 236 | .singer { 237 | width: 20rem; 238 | } 239 | .album-name { 240 | width: 25rem; 241 | } 242 | .duration { 243 | width: 5rem; 244 | } 245 | } 246 | } 247 | } 248 | #black { 249 | .list-name { 250 | color: #dbdde3; 251 | } 252 | .istag { 253 | color: #dbdde3; 254 | } 255 | .toggle-btn:hover { 256 | color: #dbdde3; 257 | } 258 | li { 259 | .music-title { 260 | color: #d6d7de; 261 | } 262 | &:hover { 263 | background-color: #242629; 264 | color: #d6d7de; 265 | } 266 | } 267 | .music-list-head { 268 | .music-title { 269 | color: #777; 270 | } 271 | color: #d6d7de; 272 | background: #16181c; 273 | border-bottom: 1px solid #22252a; 274 | span { 275 | border-right: 1px solid #22252a; 276 | } 277 | } 278 | ul { 279 | .index, 280 | .option { 281 | color: #777; 282 | } 283 | .singer { 284 | color: #777; 285 | } 286 | .album-name { 287 | color: #777; 288 | } 289 | .duration { 290 | color: #777; 291 | } 292 | li:nth-child(odd) { 293 | background-color: #1b1c20; 294 | &:hover { 295 | background-color: #242629; 296 | } 297 | } 298 | } 299 | .loading { 300 | p { 301 | color: #a4a4a4; 302 | } 303 | } 304 | } -------------------------------------------------------------------------------- /src/style/index.scss: -------------------------------------------------------------------------------- 1 | .index-container { 2 | padding: { 3 | left: 3rem; 4 | right: 3rem; 5 | } 6 | &::-webkit-scrollbar { 7 | width: 8px; 8 | } 9 | &::-webkit-scrollbar-thumb { 10 | border-radius: 4px; 11 | background-color: #e1e1e2; 12 | &:hover { 13 | background-color: #cfcfd1; 14 | } 15 | } 16 | .find-music-nav { 17 | height: 4rem; 18 | text-align: center; 19 | line-height: 4rem; 20 | border-bottom: 1px solid #e4e4e4; 21 | li { 22 | display: inline-block; 23 | height: 95%; 24 | width: 8rem; 25 | margin-left: 1rem; 26 | margin-right: 1rem; 27 | vertical-align: middle; 28 | cursor: pointer; 29 | &:hover { 30 | color: #c62f2f; 31 | } 32 | } 33 | .active { 34 | color: #c62f2f; 35 | border-bottom: 3px solid #c62f2f; 36 | } 37 | } 38 | .recommend-list { 39 | > p { 40 | width: 105rem; 41 | margin: 1rem auto; 42 | padding-top: 1px; 43 | padding-bottom: 10px; 44 | font-size: 2rem; 45 | color: #474747; 46 | border-bottom: 2px solid #e4e4e4; 47 | } 48 | ul { 49 | display: flex; 50 | flex-flow: row wrap; 51 | justify-content: space-between; 52 | width: 105rem; 53 | margin: 0 auto; 54 | list-style: none; 55 | .day-commend { 56 | .content { 57 | position: relative; 58 | height: 19rem; 59 | margin-bottom: .5rem; 60 | text-align: center; 61 | background-color: #fff; 62 | border: 2px solid #e4e4e4; 63 | cursor: pointer; 64 | > div { 65 | position: absolute; 66 | top: 50%; 67 | left: 50%; 68 | transform: translateY(-50%) translateX(-50%); 69 | } 70 | } 71 | .week { 72 | font-size: 2rem; 73 | color: #6c6c6c; 74 | } 75 | .day { 76 | font-size: 8rem; 77 | color: #c62f2f; 78 | } 79 | .show-copywrite { 80 | transform: translateY(0); 81 | } 82 | } 83 | li { 84 | position: relative; 85 | width: 19rem; 86 | height: 24rem; 87 | margin-bottom: 2rem; 88 | overflow: hidden; 89 | .item-img { 90 | position: relative; 91 | height: 19rem; 92 | margin-bottom: .5rem; 93 | border: 2px solid #e4e4e4; 94 | cursor: pointer; 95 | } 96 | .copywrite { 97 | position: absolute; 98 | width: 17rem; 99 | height: 3.2rem; 100 | padding: .5rem 1rem; 101 | transform: translateY(-110%); 102 | transition: transform .2s; 103 | color: #eee; 104 | font-size: 1.2rem; 105 | background: rgba(0, 0, 0, .4); 106 | z-index: 2; 107 | cursor: pointer; 108 | > div { 109 | position: absolute; 110 | top: 50%; 111 | left: 50%; 112 | width: 17rem; 113 | transform: translateY(-50%) translateX(-50%); 114 | overflow:hidden; 115 | text-overflow:ellipsis; 116 | display:-webkit-box; 117 | -webkit-box-orient:vertical; 118 | -webkit-line-clamp:2; 119 | } 120 | } 121 | .show-copywrite { 122 | transform: translateY(0); 123 | } 124 | } 125 | .play-btn { 126 | position: absolute; 127 | right: 1rem; 128 | bottom: 1rem; 129 | width: 2.5rem; 130 | height: 2.5rem; 131 | border: 1px solid #ccc; 132 | border-radius: 50%; 133 | transform: rotateZ(-90deg); 134 | background: rgba(80, 80, 80, .5); 135 | display: none; 136 | &:hover { 137 | background: rgba(0, 0, 0, .6); 138 | } 139 | &:before { 140 | position: absolute; 141 | left: 50%; 142 | top: 50%; 143 | transform: translateY(-20%) translateX(-50%); 144 | content: ''; 145 | width: 0; 146 | height: 0; 147 | border: 6px solid transparent; 148 | border-top: 6px solid #fff; 149 | } 150 | } 151 | .show-play { 152 | display: block; 153 | } 154 | .dec { 155 | font-size: 1.3rem; 156 | color: #555; 157 | span { 158 | &:hover { 159 | cursor: pointer; 160 | color: #000; 161 | } 162 | } 163 | } 164 | .listen-num { 165 | position: absolute; 166 | right: .1rem; 167 | top: 0; 168 | width: 8rem; 169 | padding: .2rem 1rem; 170 | color: #eee; 171 | font-size: 13px; 172 | text-align: right; 173 | z-index: 3; 174 | background-image: -webkit-linear-gradient( 175 | to right, 176 | rgba(255, 255, 255, .5), 177 | rgba(80, 80, 80, .5) 178 | ); 179 | background-image: linear-gradient(to right, 180 | rgba(255, 255, 255, 0), 181 | rgba(100, 100, 100, .5)); 182 | .fa { 183 | margin-right: .5rem; 184 | font-size: 14px; 185 | } 186 | } 187 | .hide-listen-num { 188 | display: none; 189 | } 190 | } 191 | } 192 | } 193 | @media screen and (max-width: 1450px) { 194 | .index-container { 195 | .recommend-list { 196 | >p { 197 | width: 85rem; 198 | } 199 | ul { 200 | width: 85rem; 201 | li { 202 | width: 15rem; 203 | .item-img { 204 | height: 15rem; 205 | } 206 | .copywrite { 207 | width: 13rem; 208 | >div { 209 | width: 13rem; 210 | } 211 | } 212 | } 213 | .day-commend { 214 | .content { 215 | height: 15rem; 216 | } 217 | } 218 | } 219 | } 220 | } 221 | } 222 | #black { 223 | .find-music-nav { 224 | border-bottom: 1px solid #202226; 225 | li { 226 | color: #818284; 227 | &:hover { 228 | color: #c8c9d0; 229 | } 230 | } 231 | .active { 232 | color: #c8c9d0; 233 | border-bottom: 3px solid #5c5e61; 234 | } 235 | } 236 | .recommend-list { 237 | >p { 238 | color: #cbccd3; 239 | border-bottom: 2px solid #22252a; 240 | } 241 | .item-img { 242 | border: 2px solid #161830; 243 | } 244 | } 245 | .dec { 246 | color: #dcdde4; 247 | span { 248 | &:hover { 249 | color: #dcdde4; 250 | } 251 | } 252 | } 253 | } -------------------------------------------------------------------------------- /src/components/songList.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 183 | 184 | -------------------------------------------------------------------------------- /src/components/findMusic/banner.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 216 | 217 | 220 | 221 | -------------------------------------------------------------------------------- /src/style/footer.scss: -------------------------------------------------------------------------------- 1 | .music-footer { 2 | position: absolute; 3 | bottom: 0; 4 | left: 0; 5 | box-sizing: border-box; 6 | width: 100%; 7 | height: 4.6rem; 8 | line-height: 4.6rem; 9 | background-color: #f6f6f8; 10 | border-top: 1px solid #e4e4e4; 11 | .footer-left { 12 | display: inline-block; 13 | > span { 14 | display: inline-block; 15 | border-radius: 50%; 16 | background-color: #e83c3c; 17 | cursor: pointer; 18 | &:hover { 19 | background-color: #d33030; 20 | } 21 | i { 22 | color: #fff; 23 | } 24 | } 25 | .back, 26 | .next { 27 | height: 3rem; 28 | width: 3rem; 29 | margin: { 30 | left: 2rem; 31 | right: 2rem; 32 | } 33 | line-height: 3rem; 34 | text-align: center; 35 | } 36 | .back { 37 | margin-left: 3rem; 38 | } 39 | .next { 40 | margin-right: 3rem; 41 | } 42 | .play-pause { 43 | height: 3.5rem; 44 | width: 3.5rem; 45 | line-height: 3.5rem; 46 | text-align: center; 47 | .fa-play { 48 | margin-left: 2px; 49 | font-size: 1.8rem; 50 | vertical-align: middle; 51 | } 52 | } 53 | } 54 | .time { 55 | font-size: 1.2rem; 56 | color: #555; 57 | } 58 | .value { 59 | margin-left: 1.8rem; 60 | color: #666; 61 | font-size: 18px; 62 | text-align: center; 63 | vertical-align: middle; 64 | cursor: pointer; 65 | &:hover { 66 | color: #444; 67 | } 68 | } 69 | .play-state { 70 | .fa { 71 | font-size: 1.8rem; 72 | color: #666; 73 | vertical-align: middle; 74 | cursor: pointer; 75 | &:hover { 76 | color: #444; 77 | } 78 | } 79 | } 80 | .list-icon { 81 | position: absolute; 82 | left: -1.7rem; 83 | top: 0; 84 | vertical-align: middle; 85 | } 86 | .fa-file-text-o { 87 | font-size: 1.8rem; 88 | vertical-align: middle; 89 | color: #686868; 90 | } 91 | .list-num { 92 | position: absolute; 93 | right: 2rem; 94 | top: 50%; 95 | transform: translateY(-50%); 96 | display: inline-block; 97 | width: 4rem; 98 | height: 2rem; 99 | margin-left: 2rem; 100 | line-height: 2rem; 101 | text-align: center; 102 | font-size: 1.2rem; 103 | color: #686868; 104 | border-top-right-radius: 10px; 105 | border-bottom-right-radius: 10px; 106 | background-color: #e1e1e2; 107 | cursor: pointer; 108 | &:hover .fa-file-text-o { 109 | color: #4f4f4f; 110 | } 111 | } 112 | .list-dialog { 113 | position: absolute; 114 | right: 0; 115 | top: 0; 116 | transform: translateY(-100%); 117 | width: 55rem; 118 | height: 60rem; 119 | background-color: #fff; 120 | border: 2px solid #cac8ca; 121 | box-shadow: 0 0 5px #aaa; 122 | overflow-y: auto; 123 | z-index: 5; 124 | &::-webkit-scrollbar { 125 | width: 8px; 126 | } 127 | &::-webkit-scrollbar-thumb { 128 | border-radius: 4px; 129 | background-color: #e1e1e2; 130 | &:hover { 131 | background-color: #cfcfd1; 132 | } 133 | } 134 | .list-head { 135 | position: relative; 136 | height: 4rem; 137 | text-align: center; 138 | line-height: 4rem; 139 | background-color: #f5f5f7; 140 | > span:first-child { 141 | display: inline-block; 142 | height: 2.5rem; 143 | width: 10rem; 144 | font-family: "SimSun"; 145 | text-align: center; 146 | line-height: 2.5rem; 147 | vertical-align: middle; 148 | color: #fff; 149 | border-radius: 4px; 150 | background-color: #7c7d85; 151 | } 152 | > span:last-child { 153 | position: absolute; 154 | right: 2rem; 155 | color: #6d6d6d; 156 | cursor: pointer; 157 | } 158 | } 159 | .info { 160 | height: 2.8rem; 161 | font-size: 1.3rem; 162 | color: #7c7c7c; 163 | line-height: 2.8rem; 164 | background-color: #f9f9f9; 165 | .fa { 166 | font-size: 1.6rem; 167 | } 168 | > span:first-child { 169 | display: inline-block; 170 | box-sizing: border-box; 171 | width: 47rem; 172 | padding-left: 5rem; 173 | text-align: left; 174 | } 175 | > span:last-child { 176 | display: inline-block; 177 | width: 5rem; 178 | text-align: left; 179 | } 180 | > span:last-child:hover { 181 | cursor: pointer; 182 | color: #565656; 183 | } 184 | } 185 | ul { 186 | li { 187 | height: 2.8rem; 188 | font-size: 1.3rem; 189 | line-height: 2.8rem; 190 | background-color: #fafafa; 191 | cursor: pointer; 192 | &:hover { 193 | background-color: #ecedee; 194 | } 195 | .name, 196 | .singer { 197 | display: inline-block; 198 | width: 10rem; 199 | overflow-x: hidden; 200 | text-overflow: ellipsis; 201 | white-space: nowrap; 202 | vertical-align: top; 203 | } 204 | .name { 205 | display: inline-block; 206 | box-sizing: border-box; 207 | width: 35rem; 208 | padding-left: 5rem; 209 | text-align: left; 210 | } 211 | .singer { 212 | display: inline-block; 213 | width: 12rem; 214 | text-align: left; 215 | } 216 | .singer, 217 | .duration { 218 | color: #888; 219 | } 220 | } 221 | li:nth-child(even) { 222 | background-color: #f5f5f7; 223 | &:hover { 224 | background-color: #ecedee; 225 | } 226 | } 227 | } 228 | .no-song { 229 | margin-top: 20rem; 230 | text-align: center; 231 | line-height: normal; 232 | color: #b0b0b0; 233 | span { 234 | cursor: pointer; 235 | color: #000; 236 | text-decoration: underline; 237 | } 238 | } 239 | } 240 | } 241 | #black { 242 | background-color: #222225; 243 | border-top: 1px solid #232327; 244 | .footer-left { 245 | >span { 246 | background-color: #3c3c3f; 247 | } 248 | } 249 | .value, 250 | .fa { 251 | &:hover { 252 | color: #fff; 253 | } 254 | } 255 | .list-num { 256 | color: #cacbd2; 257 | background-color: #2c2c2f; 258 | } 259 | .list-dialog { 260 | background-color: #282a2f; 261 | border: 2px solid #282a2f; 262 | } 263 | .list-head { 264 | background-color: #282a2f; 265 | } 266 | .info { 267 | color: #7a7a7d; 268 | background-color: #2d2f33; 269 | > span:last-child:hover { 270 | color: #fff; 271 | } 272 | } 273 | li { 274 | .name{ 275 | color: #d7d8df; 276 | } 277 | background-color: #2d2f33; 278 | &:hover { 279 | .name, 280 | .singer, 281 | .duration { 282 | color: #d7d8df; 283 | } 284 | background-color: #333539; 285 | } 286 | } 287 | li:nth-child(even) { 288 | background-color: #313337; 289 | &:hover{ 290 | color: #d7d8df; 291 | background-color: #333539; 292 | } 293 | } 294 | .no-song { 295 | span { 296 | color: #cccdd4; 297 | } 298 | } 299 | } -------------------------------------------------------------------------------- /src/components/public/head.vue: -------------------------------------------------------------------------------- 1 | 102 | 103 | 199 | 200 | -------------------------------------------------------------------------------- /src/style/rank.scss: -------------------------------------------------------------------------------- 1 | .rank-container { 2 | padding: { 3 | left: 3rem; 4 | right: 3rem; 5 | } 6 | &::-webkit-scrollbar { 7 | width: 8px; 8 | } 9 | &::-webkit-scrollbar-thumb { 10 | border-radius: 4px; 11 | background-color: #e1e1e2; 12 | &:hover { 13 | background-color: #cfcfd1; 14 | } 15 | } 16 | .rank-nav { 17 | height: 4rem; 18 | margin-bottom: 4rem; 19 | text-align: center; 20 | line-height: 4rem; 21 | border-bottom: 1px solid #e4e4e4; 22 | li { 23 | display: inline-block; 24 | height: 95%; 25 | width: 8rem; 26 | margin-left: 1rem; 27 | margin-right: 1rem; 28 | vertical-align: middle; 29 | cursor: pointer; 30 | &:hover { 31 | color: #c62f2f; 32 | } 33 | } 34 | .active { 35 | color: #c62f2f; 36 | border-bottom: 3px solid #c62f2f; 37 | } 38 | } 39 | .content { 40 | width: 100rem; 41 | margin: 0 auto; 42 | .title { 43 | font-size: 18px; 44 | padding-bottom: 1rem; 45 | border-bottom: 2px solid #e4e4e4; 46 | } 47 | .rank { 48 | display: flex; 49 | flex-flow: row wrap; 50 | justify-content: space-between; 51 | width: 100rem; 52 | list-style: none; 53 | >li { 54 | width: 32rem; 55 | margin-top: 2rem; 56 | margin-bottom: 2rem; 57 | .item-head { 58 | position: relative; 59 | cursor: pointer; 60 | img { 61 | display: block; 62 | width: 32rem; 63 | height: 15rem; 64 | } 65 | .update-time { 66 | position: absolute; 67 | bottom: 2rem; 68 | left: 50%; 69 | transform: translateX(-50%); 70 | color: #f5f5f5; 71 | font-size: 13px; 72 | } 73 | } 74 | } 75 | ul { 76 | list-style: none; 77 | border: 1px solid #efefef; 78 | border-top: none; 79 | li { 80 | height: 3rem; 81 | line-height: 3rem; 82 | cursor: default; 83 | &:hover { 84 | background-color: #ecedee; 85 | } 86 | .index { 87 | display: inline-block; 88 | width: 6%; 89 | text-align: right; 90 | font-size: 16px; 91 | color: #555; 92 | vertical-align: middle; 93 | } 94 | .top { 95 | color: #db6868; 96 | } 97 | .signal { 98 | margin: 0 1rem; 99 | color: #888; 100 | } 101 | .song-name { 102 | display: inline-block; 103 | width: 60%; 104 | font-size: 13px; 105 | overflow: hidden; 106 | text-overflow: ellipsis; 107 | white-space: nowrap; 108 | vertical-align: middle; 109 | .alias { 110 | margin-left: .3rem; 111 | color: #888; 112 | } 113 | } 114 | .singer { 115 | display: inline-block; 116 | width: 20%; 117 | font-size: 13px; 118 | overflow: hidden; 119 | text-overflow: ellipsis; 120 | white-space: nowrap; 121 | vertical-align: middle; 122 | color: #888; 123 | cursor: pointer; 124 | &:hover { 125 | color: #333; 126 | } 127 | } 128 | } 129 | #all { 130 | height: 5rem; 131 | text-align: right; 132 | line-height: 5rem; 133 | font-size: 13px; 134 | color: #888; 135 | &:hover { 136 | background-color: #f5f5f7; 137 | } 138 | span { 139 | margin-right: 1rem; 140 | cursor: pointer; 141 | &:hover { 142 | color: #222; 143 | } 144 | } 145 | } 146 | li:nth-child(odd) { 147 | background-color: #f5f5f7; 148 | &:hover { 149 | background-color: #ecedee; 150 | } 151 | } 152 | } 153 | } 154 | .other-rank { 155 | display: flex; 156 | flex-flow: row wrap; 157 | justify-content: space-between; 158 | width: 100rem; 159 | list-style: none; 160 | li { 161 | position: relative; 162 | height: 20rem; 163 | margin-top: 2rem; 164 | } 165 | img { 166 | display: block; 167 | width: 15rem; 168 | height: 15rem; 169 | border: 1px solid #e4e4e4; 170 | cursor: pointer; 171 | } 172 | p { 173 | height: 3rem; 174 | line-height: 3rem; 175 | font-size: 13px; 176 | color: #555; 177 | span { 178 | cursor: pointer; 179 | &:hover { 180 | color: #000; 181 | } 182 | } 183 | } 184 | .listen-num { 185 | position: absolute; 186 | right: .1rem; 187 | top: 0; 188 | width: 8rem; 189 | padding: .2rem 1rem; 190 | color: #eee; 191 | font-size: 12px; 192 | text-align: right; 193 | z-index: 3; 194 | background-image: -webkit-linear-gradient( 195 | to right, 196 | rgba(255, 255, 255, .5), 197 | rgba(80, 80, 80, .5) 198 | ); 199 | background-image: linear-gradient(to right, 200 | rgba(255, 255, 255, 0), 201 | rgba(100, 100, 100, .5)); 202 | .fa { 203 | margin-right: .5rem; 204 | font-size: 14px; 205 | vertical-align: middle; 206 | } 207 | } 208 | } 209 | } 210 | } 211 | .loading { 212 | position: absolute; 213 | top: 0; 214 | left: 50%; 215 | transform: translateX(-50%); 216 | margin-top: 8rem; 217 | text-align: center; 218 | > p { 219 | margin-top: 3rem; 220 | } 221 | .fa { 222 | color: #c62f2f; 223 | font-size: 30px; 224 | } 225 | } 226 | .fade-enter-active, .fade-leave-active { 227 | transition: opacity .5s 228 | } 229 | .fade-enter, .fade-leave-active { 230 | opacity: 0 231 | } 232 | #black { 233 | .rank-nav { 234 | border-bottom: 1px solid #202226; 235 | li { 236 | color: #818284; 237 | &:hover { 238 | color: #c8c9d0; 239 | } 240 | } 241 | .active { 242 | color: #c8c9d0; 243 | border-bottom: 3px solid #5c5e61; 244 | } 245 | } 246 | .title { 247 | color: #c3c4ca; 248 | border-bottom: 2px solid #22252a; 249 | } 250 | .other-rank { 251 | img { 252 | border: 1px solid #22252a; 253 | } 254 | } 255 | .rank { 256 | ul { 257 | border: 1px solid #22252a; 258 | li { 259 | background-color: #16181c; 260 | &:hover { 261 | .singer { 262 | color: #fff; 263 | } 264 | background-color: #1c1e22; 265 | } 266 | } 267 | li:nth-child(odd) { 268 | background-color: #1b1d20; 269 | } 270 | .song-name { 271 | color: #c8c9d0; 272 | } 273 | #all { 274 | &:hover { 275 | background-color: #1b1d20; 276 | span { 277 | &:hover { 278 | color: #fff; 279 | } 280 | } 281 | } 282 | } 283 | } 284 | } 285 | .other-rank { 286 | .other-rank-name { 287 | span:hover { 288 | color: #fff; 289 | } 290 | } 291 | } 292 | .loading { 293 | p { 294 | color: #a4a4a4; 295 | } 296 | } 297 | } -------------------------------------------------------------------------------- /src/style/play.scss: -------------------------------------------------------------------------------- 1 | .play-container { 2 | position: absolute; 3 | top: 5rem; 4 | bottom: 4.6rem; 5 | width: 100%; 6 | background: #fff; 7 | z-index: 4; 8 | transform-origin: left bottom; 9 | transition: all .5s; 10 | overflow-y:auto; 11 | overflow-x: hidden; 12 | background-color: #fafafa; 13 | &::-webkit-scrollbar { 14 | width: 8px; 15 | } 16 | &::-webkit-scrollbar-thumb { 17 | border-radius: 4px; 18 | background-color: #cecece; 19 | &:hover { 20 | background-color: #aeaeae; 21 | } 22 | } 23 | } 24 | .hide { 25 | transform: scale(0, 0); 26 | } 27 | .show { 28 | transform: scale(1, 1); 29 | } 30 | .play-box{ 31 | position: absolute; 32 | top: 0; 33 | left: 50%; 34 | transform: translateX(-50%); 35 | width: 80rem; 36 | padding: 0 2rem; 37 | margin: 0 auto; 38 | } 39 | .shadow { 40 | width: 120rem; 41 | height: 35rem; 42 | margin: 0 auto; 43 | transform: translateX(-5%); 44 | filter: blur(130px); 45 | } 46 | .btn-box { 47 | width: 34rem; 48 | text-align: center; 49 | button { 50 | width: 7rem; 51 | height: 3rem; 52 | margin: .5rem; 53 | color: #737374; 54 | border: 1px solid #b2b8b7; 55 | background-color: #eee; 56 | border-radius: 4px; 57 | cursor: pointer; 58 | &:hover { 59 | background-color: #f3f4f5; 60 | .fa { 61 | color: #333; 62 | } 63 | .fa-heart { 64 | color: #c62f2f; 65 | } 66 | } 67 | .fa { 68 | margin-right: 3px; 69 | } 70 | .fa-heart { 71 | color: #c62f2f; 72 | } 73 | } 74 | } 75 | .detail { 76 | position: absolute; 77 | top: 0; 78 | bottom: 0; 79 | left: 44rem; 80 | right: 0; 81 | .song-name { 82 | position: relative; 83 | padding: { 84 | top: 3rem; 85 | bottom: 1rem; 86 | } 87 | font-size: 22px; 88 | color: #292a28; 89 | span { 90 | position: absolute; 91 | right: 0; 92 | bottom: 0; 93 | width: 4rem; 94 | height: 3rem; 95 | line-height: 3rem; 96 | text-align: center; 97 | color: #555; 98 | border-radius: 3px; 99 | background: rgba(250, 250, 250, .3); 100 | cursor: pointer; 101 | &:hover { 102 | background: rgba(250, 250, 250, .6); 103 | } 104 | } 105 | } 106 | .song-detail { 107 | font-size: 12px; 108 | .album-name, 109 | .singer { 110 | color: #3f6bad; 111 | cursor: pointer; 112 | &:hover { 113 | color: #0a4aab; 114 | } 115 | } 116 | .album-name, 117 | .singer { 118 | display: inline-block; 119 | width: 10rem; 120 | overflow-x: hidden; 121 | text-overflow: ellipsis; 122 | white-space: nowrap; 123 | vertical-align: top; 124 | } 125 | } 126 | } 127 | .comment-container { 128 | position: absolute; 129 | top: 50rem; 130 | left: 50%; 131 | width: 80rem; 132 | transform: translateX(-50%); 133 | .comment-head { 134 | padding: 1rem 0; 135 | font-size: 18px; 136 | color: #444; 137 | border-bottom: 1px solid #e4e4e4; 138 | .comment-num { 139 | margin-left: 2rem; 140 | font-size: 13px; 141 | color: #ababab; 142 | } 143 | } 144 | .hot-comment-head, 145 | .new-comment-head { 146 | margin-top: 5rem; 147 | padding-bottom: 1rem; 148 | font-size: 16px; 149 | color: #949494; 150 | font-family: "SimSun"; 151 | border-bottom: 1px solid #e4e4e4; 152 | } 153 | .comment-box { 154 | display: flex; 155 | flex-flow: row nowrap; 156 | padding: { 157 | top: 2rem; 158 | bottom: 2rem; 159 | } 160 | border-bottom: 1px solid #e1e1e1; 161 | .avatar { 162 | width: 4rem; 163 | height: 4rem; 164 | border-radius: 50%; 165 | > img { 166 | width: 4rem; 167 | height: 4rem; 168 | border-radius: 50%; 169 | } 170 | } 171 | .content { 172 | width: 95%; 173 | margin-left: 2rem; 174 | font-size: 12px; 175 | .user-name { 176 | color: #2481c8; 177 | } 178 | .replied { 179 | margin-top: 1rem; 180 | padding: 1rem; 181 | background-color: #f1f1f4; 182 | } 183 | .content-footer { 184 | display: flex; 185 | flex-flow: row nowrap; 186 | justify-content: space-between; 187 | margin-top: 1rem; 188 | color: #9e9e9e; 189 | div:nth-of-type(2) { 190 | span { 191 | padding: { 192 | left: 1rem; 193 | right: 1rem; 194 | } 195 | } 196 | span:nth-of-type(2) { 197 | border-left: 2px solid #d9d9d9; 198 | border-right: 2px solid #d9d9d9; 199 | } 200 | } 201 | } 202 | } 203 | } 204 | .page { 205 | margin-top: 3rem; 206 | margin-bottom: 4rem; 207 | text-align: center; 208 | ul { 209 | list-style: none; 210 | .fa { 211 | color: #646464; 212 | font-size: 14px; 213 | vertical-align: middle; 214 | } 215 | li { 216 | display: inline-block; 217 | height: 2.4rem; 218 | padding: 0 .9rem; 219 | color: #a4a4a4; 220 | line-height: 2.4rem; 221 | text-align: center; 222 | font-size: 12px; 223 | border: 1px solid transparent; 224 | cursor: pointer; 225 | &:hover { 226 | color: #646464; 227 | border: 1px solid #c3c4c7; 228 | background-color: #ecedf1; 229 | } 230 | } 231 | .pre-btn, 232 | .next-btn { 233 | border: 2px solid #e9e9e9; 234 | &:hover { 235 | border: 2px solid #e9e9e9; 236 | } 237 | } 238 | .apostrophe { 239 | cursor: default; 240 | &:hover { 241 | border: 1px solid transparent; 242 | background-color: transparent; 243 | } 244 | } 245 | .active { 246 | color: #c62f2f; 247 | text-decoration: underline; 248 | border: none; 249 | cursor: default; 250 | &:hover { 251 | color: #c62f2f; 252 | background-color: transparent; 253 | border: none; 254 | } 255 | } 256 | } 257 | } 258 | .loading { 259 | position: absolute; 260 | top: 0; 261 | left: 50%; 262 | transform: translateX(-50%); 263 | margin-top: 5rem; 264 | text-align: center; 265 | > p { 266 | margin-top: 3rem; 267 | } 268 | .fa { 269 | color: #c62f2f; 270 | font-size: 30px; 271 | } 272 | } 273 | 274 | } 275 | .fade-enter-active, .fade-leave-active { 276 | transition: opacity .5s 277 | } 278 | .fade-enter, .fade-leave-active { 279 | opacity: 0 280 | } 281 | #black { 282 | .btn-box { 283 | button { 284 | color: #616267; 285 | border: 1px solid #2c2c31; 286 | background-color: #2c2c31; 287 | .fa { 288 | color: #48494c; 289 | } 290 | &:hover { 291 | background-color: #323338; 292 | .fa { 293 | color: #aaabaf; 294 | } 295 | .fa-heart { 296 | color: #c62f2f; 297 | } 298 | } 299 | .fa-heart { 300 | color: #c62f2f; 301 | } 302 | } 303 | } 304 | .song-name { 305 | color: #cfcfd0; 306 | } 307 | .song-detail { 308 | color: #cfcfd0; 309 | } 310 | .comment-head { 311 | color: #c5c6cc; 312 | border-bottom: 1px solid #1f2227; 313 | } 314 | .hot-comment-head, 315 | .new-comment-head { 316 | border-bottom: 1px solid #1f2227; 317 | } 318 | .comment-box { 319 | color: #b2b4ba; 320 | border-bottom: 1px solid #1f2227; 321 | } 322 | .replied { 323 | background-color: #1c1e23; 324 | } 325 | .content-footer { 326 | color: #48494d; 327 | div:nth-of-type(2) { 328 | span:nth-of-type(2) { 329 | border-left: 2px solid #1f2227; 330 | border-right: 2px solid #1f2227; 331 | } 332 | } 333 | } 334 | .page { 335 | ul { 336 | .fa { 337 | color: #7a7b7d; 338 | } 339 | li { 340 | color: #a4a4a4; 341 | &:hover { 342 | color: #fff; 343 | border: 1px solid #1f2227; 344 | background-color: #282b32; 345 | } 346 | } 347 | .pre-btn, 348 | .next-btn { 349 | border: 2px solid #1f2227; 350 | &:hover { 351 | border: 2px solid #1f2227; 352 | } 353 | } 354 | .active { 355 | color: #c62f2f; 356 | &:hover { 357 | color: #c62f2f; 358 | } 359 | } 360 | } 361 | } 362 | .loading { 363 | p { 364 | color: #a4a4a4; 365 | } 366 | } 367 | } 368 | -------------------------------------------------------------------------------- /src/components/about.vue: -------------------------------------------------------------------------------- 1 | 122 | 123 | 133 | 134 | 135 | 291 | --------------------------------------------------------------------------------