├── static ├── .gitkeep ├── js │ ├── manifest.d7747395207f3e34b811.js │ ├── manifest.d7747395207f3e34b811.js.map │ └── app.0e8afee9829afd26b61d.js └── css │ └── app.4f0d91c3db84edcc65ee711f11c45cc2.css ├── .eslintignore ├── src ├── store │ ├── getters.js │ ├── actions.js │ ├── state.js │ ├── mutations_types.js │ ├── mutations.js │ └── index.js ├── assets │ ├── logo.png │ └── img │ │ ├── jzxer.pdf │ │ └── favicon.ico ├── components │ ├── search │ │ └── search.vue │ ├── mv.vue │ ├── myMusic-c │ │ ├── unlogin.vue │ │ └── style │ │ │ └── unlogin.scss │ ├── myMusic.vue │ ├── cd.vue │ ├── musicDis_c │ │ ├── style │ │ │ ├── event.scss │ │ │ ├── toplist.scss │ │ │ └── newCD.scss │ │ ├── event.vue │ │ ├── newCD.vue │ │ ├── taogeList.vue │ │ └── topList.vue │ ├── musicDis.vue │ ├── public │ │ ├── style │ │ │ ├── public.scss │ │ │ ├── footer.scss │ │ │ └── header.css │ │ ├── exp.html │ │ ├── footer.vue │ │ └── header.vue │ ├── singer.vue │ └── artList.vue ├── main.js ├── App.vue ├── router │ └── index.js └── pages │ ├── resume.vue │ └── player.vue ├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── 我的简历.pdf ├── test ├── unit │ ├── .eslintrc │ ├── specs │ │ └── Hello.spec.js │ ├── index.js │ └── karma.conf.js └── e2e │ ├── specs │ └── test.js │ ├── custom-assertions │ └── elementCount.js │ ├── runner.js │ └── nightwatch.conf.js ├── .gitignore ├── .editorconfig ├── .postcssrc.js ├── .babelrc ├── .eslintrc.js ├── index.html ├── package.json └── README.md /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /src/store/getters.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | } 3 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /我的简历.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/j710328466/vue-qqmusic/HEAD/我的简历.pdf -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/j710328466/vue-qqmusic/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | import * as types from './mutations_types' 2 | export default { 3 | 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/img/jzxer.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/j710328466/vue-qqmusic/HEAD/src/assets/img/jzxer.pdf -------------------------------------------------------------------------------- /src/assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/j710328466/vue-qqmusic/HEAD/src/assets/img/favicon.ico -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/store/state.js: -------------------------------------------------------------------------------- 1 | const state = { 2 | songList: [], 3 | linkIndex: 1, 4 | tagLink: 1, 5 | isLogin: false, 6 | singer: [] 7 | } 8 | 9 | export default state 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | test/unit/coverage 8 | test/e2e/reports 9 | selenium-debug.log 10 | -------------------------------------------------------------------------------- /src/components/search/search.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | 14 | -------------------------------------------------------------------------------- /src/store/mutations_types.js: -------------------------------------------------------------------------------- 1 | // export const SAVE_SONGLIST = 'SAVE_SONGLIST' 2 | // 3 | // export const CHANGE_INDEX = 'CHANGE_INDEX' 4 | // 5 | // export const SAVE_SINGER = 'SAVE_SINGER' 6 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/components/mv.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /src/store/mutations.js: -------------------------------------------------------------------------------- 1 | import types from './mutations_types' 2 | export default{ 3 | save_songList(state, songList) { 4 | state.songList = songList 5 | }, 6 | changeLinkIndex(state, index) { 7 | state.linkIndex = index 8 | }, 9 | changeTagIndex(state, index) { 10 | state.tagLink = index 11 | }, 12 | save_singer(state, singer) { 13 | state.singer = singer 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /test/unit/specs/Hello.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Hello from '@/components/Hello' 3 | 4 | describe('Hello.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(Hello) 7 | const vm = new Constructor().$mount() 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | .to.equal('Welcome to Your Vue.js App') 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import state from './state' 4 | import * as getters from './getters' 5 | import actions from './actions' 6 | import mutations from './mutations' 7 | import * as mutations_types from './mutations_types' 8 | 9 | Vue.use(Vuex) 10 | 11 | const store = new Vuex.Store({ 12 | state, 13 | actions, 14 | // getters, 15 | // actions, 16 | mutations 17 | }) 18 | export default store 19 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.config.productionTip = false 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/) 13 | srcContext.keys().forEach(srcContext) 14 | -------------------------------------------------------------------------------- /src/components/myMusic-c/unlogin.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /src/components/myMusic.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 27 | 28 | 30 | -------------------------------------------------------------------------------- /test/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | 'default e2e tests': function (browser) { 6 | // automatically uses dev Server port from /config.index.js 7 | // default: http://localhost:8080 8 | // see nightwatch.conf.js 9 | const devServer = browser.globals.devServerURL 10 | 11 | browser 12 | .url(devServer) 13 | .waitForElementVisible('#app', 5000) 14 | .assert.elementPresent('.hello') 15 | .assert.containsText('h1', 'Welcome to Your Vue.js App') 16 | .assert.elementCount('img', 1) 17 | .end() 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /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 router from './router' 5 | import axios from 'axios' 6 | import VueAxios from 'vue-axios' 7 | import ElementUI from 'element-ui' 8 | import 'element-ui/lib/theme-default/index.css' 9 | import App from './App' 10 | import store from './store' 11 | 12 | Vue.use(VueAxios, axios) 13 | Vue.use(ElementUI) 14 | 15 | Vue.config.productionTip = false 16 | 17 | 18 | /* eslint-disable no-new */ 19 | new Vue({ 20 | el: '#app', 21 | router, 22 | store, 23 | template: '', 24 | components: { App } 25 | }) 26 | -------------------------------------------------------------------------------- /src/components/cd.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 29 | 30 | 33 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/components/musicDis_c/style/event.scss: -------------------------------------------------------------------------------- 1 | .mod_index--event .section_inner { 2 | height: 610px; 3 | } 4 | .index__tit_sprite { 5 | background-position: 0 -240px; 6 | } 7 | .index__line { 8 | background-color: #000; 9 | } 10 | .mod_slide { 11 | overflow: hidden; 12 | margin-bottom: 25px; 13 | .event_list { 14 | width: 100%; 15 | height: 325px; 16 | } 17 | .slide__list { 18 | position: relative; 19 | font-size: 0; 20 | .event_list__item { 21 | position: absolute; 22 | top: 0; 23 | left: 0; 24 | width: 751px; 25 | height: 300px; 26 | opacity: .8; 27 | z-index: 1; 28 | transition: all 300ms ease-out; 29 | } 30 | .slide__item { 31 | display: inline-block; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/components/musicDis.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 33 | 34 | 37 | -------------------------------------------------------------------------------- /test/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // the name of the method is the filename. 3 | // can be used in tests like this: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // for how to write custom assertions see 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | exports.assertion = function (selector, count) { 10 | this.message = 'Testing if element <' + selector + '> has count: ' + count 11 | this.expected = count 12 | this.pass = function (val) { 13 | return val === this.expected 14 | } 15 | this.value = function (res) { 16 | return res.value 17 | } 18 | this.command = function (cb) { 19 | var self = this 20 | return this.api.execute(function (selector) { 21 | return document.querySelectorAll(selector).length 22 | }, [selector], function (res) { 23 | cb.call(self, res) 24 | }) 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | vue-qqmusic
2 | 3 | 4 | 5 | 6 | 7 | vue-qqmusic 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 27 | 28 | 54 | -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | // This is a karma config file. For more details see 2 | // http://karma-runner.github.io/0.13/config/configuration-file.html 3 | // we are also using it with karma-webpack 4 | // https://github.com/webpack/karma-webpack 5 | 6 | var webpackConfig = require('../../build/webpack.test.conf') 7 | 8 | module.exports = function (config) { 9 | config.set({ 10 | // to run in additional browsers: 11 | // 1. install corresponding karma launcher 12 | // http://karma-runner.github.io/0.13/config/browsers.html 13 | // 2. add it to the `browsers` array below. 14 | browsers: ['PhantomJS'], 15 | frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'], 16 | reporters: ['spec', 'coverage'], 17 | files: ['./index.js'], 18 | preprocessors: { 19 | './index.js': ['webpack', 'sourcemap'] 20 | }, 21 | webpack: webpackConfig, 22 | webpackMiddleware: { 23 | noInfo: true 24 | }, 25 | coverageReporter: { 26 | dir: './coverage', 27 | reporters: [ 28 | { type: 'lcov', subdir: '.' }, 29 | { type: 'text-summary' } 30 | ] 31 | } 32 | }) 33 | } 34 | -------------------------------------------------------------------------------- /test/e2e/runner.js: -------------------------------------------------------------------------------- 1 | // 1. start the dev server using production config 2 | process.env.NODE_ENV = 'testing' 3 | var server = require('../../build/dev-server.js') 4 | 5 | server.ready.then(() => { 6 | // 2. run the nightwatch test suite against it 7 | // to run in additional browsers: 8 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings" 9 | // 2. add it to the --env flag below 10 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 11 | // For more information on Nightwatch's config file, see 12 | // http://nightwatchjs.org/guide#settings-file 13 | var opts = process.argv.slice(2) 14 | if (opts.indexOf('--config') === -1) { 15 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']) 16 | } 17 | if (opts.indexOf('--env') === -1) { 18 | opts = opts.concat(['--env', 'chrome']) 19 | } 20 | 21 | var spawn = require('cross-spawn') 22 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }) 23 | 24 | runner.on('exit', function (code) { 25 | server.close() 26 | process.exit(code) 27 | }) 28 | 29 | runner.on('error', function (err) { 30 | server.close() 31 | throw err 32 | }) 33 | }) 34 | -------------------------------------------------------------------------------- /test/e2e/nightwatch.conf.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | var config = require('../../config') 3 | 4 | // http://nightwatchjs.org/gettingstarted#settings-file 5 | module.exports = { 6 | src_folders: ['test/e2e/specs'], 7 | output_folder: 'test/e2e/reports', 8 | custom_assertions_path: ['test/e2e/custom-assertions'], 9 | 10 | selenium: { 11 | start_process: true, 12 | server_path: require('selenium-server').path, 13 | host: '127.0.0.1', 14 | port: 4444, 15 | cli_args: { 16 | 'webdriver.chrome.driver': require('chromedriver').path 17 | } 18 | }, 19 | 20 | test_settings: { 21 | default: { 22 | selenium_port: 4444, 23 | selenium_host: 'localhost', 24 | silent: true, 25 | globals: { 26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port) 27 | } 28 | }, 29 | 30 | chrome: { 31 | desiredCapabilities: { 32 | browserName: 'chrome', 33 | javascriptEnabled: true, 34 | acceptSslCerts: true 35 | } 36 | }, 37 | 38 | firefox: { 39 | desiredCapabilities: { 40 | browserName: 'firefox', 41 | javascriptEnabled: true, 42 | acceptSslCerts: true 43 | } 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import musicDis from '@/components/musicDis' 4 | import myMusic from '@/components/myMusic' 5 | import artList from '@/components/artList' 6 | import resume from '../pages/resume' 7 | import player from '../pages/player' 8 | import singer from '../components/singer' 9 | import cd from '../components/cd' 10 | import mv from '../components/mv' 11 | 12 | 13 | Vue.use(Router) 14 | 15 | export default new Router({ 16 | routes: [ 17 | { 18 | path: '/', 19 | name: 'musicDis', 20 | component: musicDis 21 | }, 22 | { 23 | path: '/myMusic', 24 | name: 'myMusic', 25 | component: myMusic 26 | }, 27 | { 28 | path: '/artList', 29 | name: 'artList', 30 | component: artList 31 | }, 32 | { 33 | path: '/resume', 34 | name: 'resume', 35 | component: resume 36 | }, 37 | { 38 | path: '/player:id', 39 | name: 'player', 40 | component: player 41 | }, 42 | { 43 | path: '/singer', 44 | name: 'singer', 45 | component: singer 46 | }, 47 | { 48 | path: '/cd', 49 | name: 'cd', 50 | component: cd 51 | }, 52 | { 53 | path: '/mv', 54 | name: 'mv', 55 | component: mv 56 | }, 57 | ] 58 | }) 59 | -------------------------------------------------------------------------------- /src/components/musicDis_c/event.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 43 | 44 | 48 | -------------------------------------------------------------------------------- /static/js/manifest.d7747395207f3e34b811.js: -------------------------------------------------------------------------------- 1 | !function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,i){for(var u,a,f,s=0,l=[];s 2 |
3 |
4 |
5 |
6 |
7 | 8 |
9 |
10 | 江志雄 11 |

向往诗歌和远方

12 |

技术栈：vue vuex vue-router element-UI scss

13 |

Email: 710328466@qq.com

14 | gitHub 15 |
16 | Blog 17 |
18 |
19 |
20 |

大三求前端实习中...

21 |

rocker. JS

22 |
23 |
24 |
25 | 26 | 27 | 38 | 39 | 111 | -------------------------------------------------------------------------------- /src/components/public/style/public.scss: -------------------------------------------------------------------------------- 1 | .mod_index { 2 | position: relative; 3 | .section_inner { 4 | z-index: 2; 5 | overflow: hidden; 6 | max-width: 1200px; 7 | margin: 0 auto; 8 | position: relative; 9 | .index__hd { 10 | position: relative; 11 | width: 490px; 12 | height: 48px; 13 | padding-top: 80px; 14 | margin: 0 auto 50px; 15 | .index__tit { 16 | font-weight: 400; 17 | text-align: center; 18 | .index__tit_sprite { 19 | width: 193px; 20 | display: block; 21 | margin: 0 auto; 22 | height: 48px; 23 | background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/index_tit.png?max_age=2592000&v=ea6515ebb82f7609712c02805e2abe9c); 24 | } 25 | } 26 | } 27 | } 28 | } 29 | .index__line { 30 | position: absolute; 31 | top: 104px; 32 | width: 72px; 33 | height: 1px; 34 | opacity: .1; 35 | } 36 | .index__line--left { 37 | left: 0; 38 | } 39 | .index__line--right { 40 | right: 0; 41 | } 42 | 43 | // 下虚线 44 | .mod_slide_switch { 45 | width: 100%; 46 | text-align: center; 47 | font-size: 0; 48 | .slide_switch__item { 49 | display: inline-block; 50 | width: 30px; 51 | height: 2px; 52 | padding: 10px 0; 53 | margin: 0 5px; 54 | .slide_switch__bg { 55 | background: rgba(21, 21, 21, .3); 56 | display: block; 57 | width: 100%; 58 | height: 1px; 59 | } 60 | } 61 | } 62 | 63 | .index__more { 64 | position: absolute; 65 | right: 0; 66 | } 67 | .index__more:hover { 68 | color: #31c27c; 69 | } 70 | .index__more--white { 71 | font-size: 15px; 72 | color: #fff; 73 | .icon_index_arrow { 74 | background-position: -40px -260px; 75 | display: inline-block; 76 | width: 7px; 77 | height: 12px; 78 | background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40); 79 | margin-left: 6px; 80 | } 81 | .icon_index_arrow:hover { 82 | background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40); 83 | background-position: 0 0; 84 | } 85 | } 86 | .mod_cover { 87 | opacity: .9; 88 | zoom: 1; 89 | } 90 | .mod_cover:hover > .toplist__bg { 91 | transform: scale(1.07); 92 | } 93 | .mod_cover:hover > .playlist__pic { 94 | transform: scale(1.07); 95 | } 96 | .mod_cover:hover > .mod_cover__mask { 97 | opacity: .4; 98 | } 99 | .mod_cover:hover > .mod_cover__icon_play { 100 | transform: scale(1); 101 | opacity: 1; 102 | } 103 | .mod_cover:hover > .toplist__line { 104 | opacity: 0; 105 | } 106 | .mod_cover:hover + .playlist__title > .btn_opera_menu { 107 | transition: .5s ease-in; 108 | opacity: 1; 109 | } 110 | .mod_cover__mask { 111 | position: absolute; 112 | top: 0; 113 | left: 0; 114 | width: 100%; 115 | height: 100%; 116 | background-color: #000; 117 | opacity: 0; 118 | transition: opacity .5s; 119 | } 120 | .mod_cover__icon_play { 121 | background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/cover_play.png?max_age=2592000&v=fa72193fd8d5000e90837380d6be93ea); 122 | position: absolute; 123 | top: 50%; 124 | left: 50%; 125 | margin: -35px; 126 | width: 70px; 127 | height: 70px; 128 | opacity: 0; 129 | transform: scale(.7); 130 | transition-property: opacity,transform; 131 | transition-duration: .5s; 132 | zoom: 1; 133 | } 134 | -------------------------------------------------------------------------------- /src/components/public/style/footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | color: #999; 3 | background-color: #333; 4 | clear: both; 5 | height: 450px; 6 | a { 7 | color: #999; 8 | &:hover { 9 | color: #31c27c; 10 | } 11 | } 12 | .section_inner { 13 | max-width: 1200px; 14 | margin: 0 auto; 15 | position: relative; 16 | .footer_tit { 17 | font-size: 15px; 18 | font-weight: 400; 19 | padding: 80px 0 46px; 20 | } 21 | .icon_qm_pc,.icon_qm_mac,.icon_qm_kg, 22 | .icon_qm_qp,.icon_qm_ss,.icon_qm_android, 23 | .icon_qm_iphone{ 24 | display: block; 25 | margin: 0 29px 12px; 26 | height: 48px; 27 | background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/footer.png?max_age=2592000&v=4739050c9bfc2db438241313ce65f4bf); 28 | } 29 | } 30 | .footer_info { 31 | overflow: hidden; 32 | border-bottom: 1px solid #353535; 33 | position: relative; 34 | } 35 | } 36 | .footer_download { 37 | position: absolute; 38 | top: 0; 39 | left: 10px; 40 | .footer_download_list { 41 | margin-left: -29px; 42 | .footer_download_list__item { 43 | float: left; 44 | text-align: center; 45 | position: relative; 46 | .icon_qm_pc { 47 | width: 37px; 48 | background-position: -2px 0; 49 | &:hover { 50 | background-position: -2px -50px; 51 | } 52 | } 53 | .icon_qm_mac { 54 | width: 46px; 55 | background-position: -92px 0; 56 | &:hover { 57 | background-position: -92px -50px; 58 | } 59 | } 60 | .icon_qm_android { 61 | width: 37px; 62 | background-position: -190px 0; 63 | &:hover { 64 | background-position: -190px -50px; 65 | } 66 | } 67 | .icon_qm_iphone { 68 | width: 34px; 69 | background-position: -279px 0; 70 | &:hover { 71 | background-position: -279px -50px; 72 | } 73 | } 74 | } 75 | } 76 | } 77 | // 产品 78 | .footer_product { 79 | position: absolute; 80 | top: 0; 81 | left: 476px; 82 | width: 304px; 83 | .footer_product_list { 84 | margin-left: -25px; 85 | .footer_product_list__item { 86 | float: left; 87 | margin-bottom: 18px; 88 | text-indent: 25px; 89 | margin-right: 5px; 90 | } 91 | .footer_product_list__item--pic { 92 | text-align: center; 93 | position: relative; 94 | margin-right: 0; 95 | text-indent: 0; 96 | .icon_qm_kg { 97 | width: 41px; 98 | background-position: -370px 0; 99 | &:hover { 100 | background-position: -370px 47px; 101 | } 102 | } 103 | .icon_qm_ss { 104 | width: 37px; 105 | background-position: -463px 0; 106 | &:hover { 107 | background-position: -463px 47px; 108 | } 109 | } 110 | .icon_qm_qp { 111 | margin-right: 23px; 112 | width: 40px; 113 | background-position: -563px 0; 114 | &:hover { 115 | background-position: -563px 47px; 116 | } 117 | } 118 | } 119 | } 120 | } 121 | // link 122 | .footer_link { 123 | float: right; 124 | width: 300px; 125 | padding-bottom: 57px; 126 | .footer_link_list__item { 127 | float: left; 128 | min-width: 100px; 129 | margin-bottom: 12px; 130 | } 131 | } 132 | // copyright 133 | .footer_copyright { 134 | text-align: center; 135 | line-height: 28px; 136 | padding: 24px 0; 137 | } 138 | -------------------------------------------------------------------------------- /src/components/public/exp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |

{{ message }}

11 |
12 | 13 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-qqmusic", 3 | "version": "1.0.0", 4 | "description": "qqmusic", 5 | "author": "jzxer <710328466@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 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 12 | "e2e": "node test/e2e/runner.js", 13 | "test": "npm run unit && npm run e2e", 14 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" 15 | }, 16 | "dependencies": { 17 | "axios": "^0.16.1", 18 | "css-loader": "^0.28.3", 19 | "element-ui": "^1.3.5", 20 | "node-sass": "^4.5.3", 21 | "sass-loader": "^6.0.5", 22 | "stylus-loader": "^3.0.1", 23 | "vue": "^2.2.6", 24 | "vue-axios": "^2.0.2", 25 | "vue-router": "^2.3.1", 26 | "vue-style-loader": "^2.0.5", 27 | "vuex": "^2.3.1" 28 | }, 29 | "devDependencies": { 30 | "autoprefixer": "^6.7.2", 31 | "babel-core": "^6.22.1", 32 | "babel-eslint": "^7.1.1", 33 | "babel-loader": "^6.2.10", 34 | "babel-plugin-transform-runtime": "^6.22.0", 35 | "babel-preset-env": "^1.3.2", 36 | "babel-preset-stage-2": "^6.22.0", 37 | "babel-register": "^6.22.0", 38 | "chalk": "^1.1.3", 39 | "connect-history-api-fallback": "^1.3.0", 40 | "copy-webpack-plugin": "^4.0.1", 41 | "css-loader": "^0.28.0", 42 | "eslint": "^3.19.0", 43 | "eslint-friendly-formatter": "^2.0.7", 44 | "eslint-loader": "^1.7.1", 45 | "eslint-plugin-html": "^2.0.0", 46 | "eslint-config-standard": "^6.2.1", 47 | "eslint-plugin-promise": "^3.4.0", 48 | "eslint-plugin-standard": "^2.0.1", 49 | "eventsource-polyfill": "^0.9.6", 50 | "express": "^4.14.1", 51 | "extract-text-webpack-plugin": "^2.0.0", 52 | "file-loader": "^0.11.1", 53 | "friendly-errors-webpack-plugin": "^1.1.3", 54 | "html-webpack-plugin": "^2.28.0", 55 | "http-proxy-middleware": "^0.17.3", 56 | "webpack-bundle-analyzer": "^2.2.1", 57 | "cross-env": "^4.0.0", 58 | "karma": "^1.4.1", 59 | "karma-coverage": "^1.1.1", 60 | "karma-mocha": "^1.3.0", 61 | "karma-phantomjs-launcher": "^1.0.2", 62 | "karma-phantomjs-shim": "^1.4.0", 63 | "karma-sinon-chai": "^1.3.1", 64 | "karma-sourcemap-loader": "^0.3.7", 65 | "karma-spec-reporter": "0.0.30", 66 | "karma-webpack": "^2.0.2", 67 | "lolex": "^1.5.2", 68 | "mocha": "^3.2.0", 69 | "chai": "^3.5.0", 70 | "sinon": "^2.1.0", 71 | "sinon-chai": "^2.8.0", 72 | "inject-loader": "^3.0.0", 73 | "babel-plugin-istanbul": "^4.1.1", 74 | "phantomjs-prebuilt": "^2.1.14", 75 | "chromedriver": "^2.27.2", 76 | "cross-spawn": "^5.0.1", 77 | "nightwatch": "^0.9.12", 78 | "selenium-server": "^3.0.1", 79 | "semver": "^5.3.0", 80 | "shelljs": "^0.7.6", 81 | "opn": "^4.0.2", 82 | "optimize-css-assets-webpack-plugin": "^1.3.0", 83 | "ora": "^1.2.0", 84 | "rimraf": "^2.6.0", 85 | "url-loader": "^0.5.8", 86 | "vue-loader": "^11.3.4", 87 | "vue-style-loader": "^2.0.5", 88 | "vue-template-compiler": "^2.2.6", 89 | "webpack": "^2.3.3", 90 | "webpack-dev-middleware": "^1.10.0", 91 | "webpack-hot-middleware": "^2.18.0", 92 | "webpack-merge": "^4.1.0" 93 | }, 94 | "engines": { 95 | "node": ">= 4.0.0", 96 | "npm": ">= 3.0.0" 97 | }, 98 | "browserslist": [ 99 | "> 1%", 100 | "last 2 versions", 101 | "not ie <= 8" 102 | ] 103 | } 104 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 用Vue高仿qq音乐官网-pc端 2 | 一直想做一个vue项目 然后呢 我就做了 3 | 4 | ## 效果预览 5 | 6 | 部分地方不全部根据原版，也有自由发挥的，目前功能模块比较简陋，要完整显示效果必须接入后端数据，请下载以下api文件并打开 7 | >  [网易云音乐API](https://github.com/Binaryify/NeteaseCloudMusicApi) 8 | 9 | 10 | > 项目地址：[github](https://github.com/j710328466/vue-qqmusic) 11 | 12 | > 预览地址：[demo](http://182.254.147.168:8564/#/) 13 | 14 | ## Build Setup 15 | 16 | 17 | ``` 18 | # install dependencies 19 | cnpm i 20 | (可以用cnpm或yarn，更方便快捷，你值得拥有) 21 | 22 | # serve with hot reload at localhost:8564 23 | npm run dev 24 | 25 | # build for production with minification 26 | npm run build 27 | 28 | # build for production and view the bundle analyzer report 29 | npm run build --report 30 | 31 | # 网易云API部署 listen localhost:3000 32 | npm run start 33 | ``` 34 | ## 技术栈 35 | 36 | * vue(数据绑定) 37 | * vue-router 38 | * vuex(管理组件状态，实现组件通信） 39 | * webpack(打包工具) 40 | * scss（原来想用stylus,回头看看我都快写完了...） 41 | * axios（我等下要重点讲这****） 42 | * 组件库: element-UI(本来想用muse-UI,感觉那个更cool，下次吧..) 43 | * API: 网易云音乐API(仿qq音乐我用网易云音乐的东西，你怕不怕...) 44 | 45 | ## 核心功能组件的实现 46 | 47 | * 搜索功能 48 | 49 | ![](https://ooo.0o0.ooo/2017/06/14/594135198d975.gif) 50 | 51 | * 播放功能 52 | 53 | ![](https://ooo.0o0.ooo/2017/06/14/5941364de751e.gif) 54 |    (播放页面正在完善中，样式只是大概，待细化...) 55 | 56 | * 跳转功能 57 | 58 | ![](https://ooo.0o0.ooo/2017/06/14/59415a8cd0df7.gif) 59 | (目前子目录只开通歌手列表) 60 | 61 | 62 | ## 自己挖的坑，自己埋 63 | 64 | 1. vuex的模块应用 65 | 66 | *  一开始我并没有使用vuex，因为我觉得目前这个项目比较小，并不需要它来管理数据，毕竟vuex针对大项目来说确实很好用，但是后来考虑到如果后期该项目我还要 维护，数据量一大，还是要重新分类数据，所以中途某些地方插入了vuex的使用，这就很大一部分影响了项目进行的进度。（目前只用到action和state） 67 | 68 | 2. qq音乐的轮播图 69 | * 不用说，qq音乐这个网站的页面我是真的挺喜欢，不光是他的设计，页面的布局也很美观，在控制台调试的时候可以看看它的结构，非常有层次而富有美感，即使加上 一层margin,padding也不会有违和感。这就造就了它的轮播图结构比较麻烦，不是说做不出来，因为这是第一次上传的项目，我想先将大概的结构完善一下，后期再 维护，所以我就选用了element-UI里面的跑马灯式轮播图组件，大体来说，除了部分瑕疵以外，还是高度还原了原版轮播图的。 70 | 71 | 3. axios后端数据获取时产生的跨域问题 72 | 73 | *  重点来了，这个是我在该项目中花了最多时间的地方，相信很多同学使用axios都碰到过我这个问题，目前我这里使用了三种方法处理该问题，请大家针对自己的项目 问题对号入座 74 |     75 | * 跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。 76 |     77 | ①. 针对本地相同端口服务器之间的跨域 78 | 79 | * 这是我刚开始碰到问题时使用的第一种，这个时候你只需要找到build文件中的dev-server，找到引用express的位置，给它加上一个头文件： 80 | ``` 81 | app.all('*', function (req, res, next) { 82 | res.header("Access-Control-Allow-Credentials", true) 83 | res.header("Access-Control-Allow-Origin", "*") 84 | res.header("Access-Control-Allow-Headers", "X-Requested-With") 85 | res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS") 86 | res.header("X-Powered-By", ' 3.2.1') 87 | res.header("Content-Type", "application/json;charset=utf-8") 88 | next() 89 | }) 90 | ``` 91 | 92 | > ![](https://ooo.0o0.ooo/2017/06/14/594140894d162.jpg) 93 | 94 | * 然后它就会报错~，具体原因是你同一个端口申请相同端口的东西,不好意思，那不叫跨域... 95 |
96 | ②. 针对本地不同端口的服务器之间的跨域 97 | 98 | * 就是将上面的头文件放在当前项目申请的服务器的那个api中。 99 |
100 | ③. 针对本地服务器对域名服务器访问的跨域问题 101 | 102 | * 找到当前项目congfig文件夹下index.js文件，然后在文件中将proxyTable内容改为： 103 | ``` 104 | proxyTable: { 105 | '/api': { 106 | target: '[1]', 107 | changeOrigin: true, 108 | pathRewrite: { 109 | '^/api': '/' 110 | } 111 | } 112 | } 113 | ``` 114 | * 就是你当前想访问的api地址，项目中访问的时候就只要用/api做反向代理即可 115 | 116 | ## 终于 117 | 118 | *  这是我第一个用vue撸的项目，可能功能有点简陋，很多地方有待提高，不过这次实践让我对组件化的理解有了一定的提升，后期会继续加入其它功能模块的，文中有用词不对的地方，欢迎大家指出，项目有什么bug，也希望大家多多提issue 119 | 120 | * 如果你帮到了你，给个star吧 121 | 122 | 123 | * （最后，这是[我的简历](https://github.com/j710328466/vue-qqmusic/blob/master/%E6%88%91%E7%9A%84%E7%AE%80%E5%8E%86.pdf) 2018级毕业生，也可以在项目跟目录下载pdf文件，谢谢） 124 | ![](https://ooo.0o0.ooo/2017/06/14/594148dc7c4f1.gif) 125 | -------------------------------------------------------------------------------- /src/components/singer.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 51 | 52 | 140 | -------------------------------------------------------------------------------- /src/components/musicDis_c/newCD.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 101 | 102 | 105 | -------------------------------------------------------------------------------- /src/components/public/footer.vue: -------------------------------------------------------------------------------- 1 | 121 | 122 | 127 | 128 | 132 | -------------------------------------------------------------------------------- /src/components/musicDis_c/taogeList.vue: -------------------------------------------------------------------------------- 1 | 82 | 83 | 126 | 127 | 130 | -------------------------------------------------------------------------------- /src/components/public/style/header.css: -------------------------------------------------------------------------------- 1 | .mod_header { 2 | background-color: #fff; 3 | position: relative; 4 | z-index: 4; 5 | } 6 | .mod_header .section_inner { 7 | padding-top: 90px; 8 | } 9 | .section_inner { 10 | max-width: 1200px; 11 | margin: 0 auto; 12 | position: relative; 13 | } 14 | .qqmusic_title { 15 | position: absolute; 16 | top: 19px; 17 | left: 0; 18 | } 19 | .qqmusic_logo { 20 | width: 190px; 21 | height: 52px; 22 | } 23 | .mod_top_nav { 24 | position: absolute; 25 | top: 0; 26 | left: 225px; 27 | } 28 | .top_nav__item { 29 | float: left; 30 | } 31 | .top_nav_link { 32 | display: block; 33 | padding: 0 20px; 34 | line-height: 90px; 35 | height: 90px; 36 | text-align: center; 37 | font-size: 18px; 38 | } 39 | .top_nav_link:hover { 40 | color: #31c27c; 41 | opacity: .9; 42 | transition: .5s ease-out; 43 | } 44 | .top_nav_link--current,.top_nav_link--current:hover { 45 | background-color: #31c27c; 46 | color: #fff; 47 | } 48 | .mod_top_search { 49 | position: absolute; 50 | top: 0; 51 | right: 294px; 52 | } 53 | .mod_search_input { 54 | border: 1px solid #c9c9c9; 55 | padding: 0 33px 0 15px; 56 | line-height: 36px; 57 | height: 36px; 58 | margin-top: 26px; 59 | position: relative; 60 | border-radius: 3px; 61 | background-color: #fff; 62 | transition: width .6s ease-out; 63 | } 64 | .search_input__input { 65 | width: 200px; 66 | height: 36px; 67 | outline: none; 68 | border: 0 none; 69 | font-size: 14px; 70 | background: 0 0; 71 | transition: width .6s ease-out,visibility .6s 1ms ease-out; 72 | } 73 | .search_input__btn { 74 | position: absolute; 75 | top: 0; 76 | right: 0; 77 | outline: none; 78 | border: 0 none; 79 | cursor: pointer; 80 | width: 38px; 81 | height: 35px; 82 | overflow: visible; 83 | background: 0 0; 84 | } 85 | .icon_search { 86 | position: absolute; 87 | top: 50%; 88 | right: 15px; 89 | margin-top: -8px; 90 | width: 16px; 91 | height: 16px; 92 | background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40); 93 | background-position: 0 -40px; 94 | } 95 | .icon_search:hover { 96 | background-position: 0 -60px; 97 | } 98 | .icon_txt { 99 | font: 0/0 a; 100 | } 101 | .header__opt { 102 | position: absolute; 103 | top: 0; 104 | right: -25px; 105 | height: 90px; 106 | line-height: 90px; 107 | } 108 | .mod_top_login { 109 | font-size: 0; 110 | height: 90px; 111 | line-height: 90px; 112 | } 113 | .avatar { 114 | position: absolute; 115 | height: 50px; 116 | width: 50px; 117 | top: 15px; 118 | left: -70px; 119 | border-radius: 80px; 120 | border: 2px solid rgba(60, 59, 60, .7); 121 | } 122 | .avatar:hover { 123 | cursor: pointer; 124 | transform: scale(1.1); 125 | opacity: .9; 126 | transition: .5s ease-in; 127 | } 128 | .top_login__link { 129 | position: absolute; 130 | font-size: 16px; 131 | float: left; 132 | height: 40px; 133 | width: 40px; 134 | left: -65px; 135 | margin-right: 11px; 136 | text-align: center; 137 | } 138 | .js_login { 139 | margin-top: 30px; 140 | } 141 | .js_login:hover { 142 | color: #31c27c; 143 | } 144 | .top_login__btn_vip { 145 | line-height: 39px; 146 | margin-top: 24px; 147 | padding: 0 11px; 148 | margin-left: 10px; 149 | margin-right: 0; 150 | font-size: 13px; 151 | } 152 | .mod_btn_green { 153 | border: 1px solid #31c27c; 154 | background-color: #31c27c; 155 | color: #fff; 156 | } 157 | .mod_btn_green:hover { 158 | background-color: #2caf6f; 159 | } 160 | .mod_btn { 161 | border: 1px solid #c9c9c9; 162 | color: #333; 163 | } 164 | .mod_btn:hover { 165 | background-color: #ededed; 166 | } 167 | .mod_btn, .mod_btn_green { 168 | border-radius: 2px; 169 | height: 38px; 170 | display: inline-block; 171 | -webkit-box-sizing: border-box; 172 | box-sizing: border-box; 173 | overflow: hidden; 174 | } 175 | .mod_top_subnav { 176 | height: 51px; 177 | line-height: 51px; 178 | border-top: 1px solid #f2f2f2; 179 | padding-left: 256px; 180 | } 181 | .top_subnav__item { 182 | float: left; 183 | font-size: 15px; 184 | color: #c1c1c1; 185 | margin-right: 56px; 186 | } 187 | .top_subnav__link { 188 | cursor: auto; 189 | } 190 | .top_subnav__link--current { 191 | color: #31c27c; 192 | } 193 | .top_subnav__link:hover { 194 | color: #31c27c; 195 | } 196 | 197 | /*搜索下拉框*/ 198 | .mod_search_other { 199 | max-height: 0; 200 | visibility: hidden; 201 | transition: max-height .6s ease-out,visibility 1ms .6s; 202 | overflow: hidden; 203 | position: absolute; 204 | top: 63px; 205 | left: 0; 206 | background: #fff; 207 | width: 248px; 208 | border: 1px solid #c9c9c9; 209 | z-index: 8; 210 | text-align: left; 211 | font-size: 14px; 212 | line-height: 36px; 213 | } 214 | .drop { 215 | visibility: visible; 216 | max-height: 300px; 217 | transition: max-height .6s ease-out; 218 | } 219 | .search_hot { 220 | padding: 5px 0; 221 | } 222 | .search_hot__link { 223 | display: block; 224 | overflow: hidden; 225 | white-space: nowrap; 226 | text-overflow: ellipsis; 227 | padding-left: 15px; 228 | line-height: 36px; 229 | padding-right: 15px; 230 | } 231 | .search_hot__link:hover { 232 | background-color: #31c27c; 233 | color: #fff; 234 | } 235 | .search_hot__link .search_hot__number { 236 | color: #ff4222; 237 | float: left; 238 | width: 18px; 239 | } 240 | .search_hot__link .search_hot__name { 241 | float: left; 242 | color: #333; 243 | max-width: 140px; 244 | overflow: hidden; 245 | white-space: mowrap; 246 | text-overflow: ellipsis; 247 | } 248 | .search_hot__link .search_hot__listen { 249 | float: right; 250 | color: #999; 251 | font-size: 12px; 252 | } 253 | -------------------------------------------------------------------------------- /src/components/artList.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 85 | 86 | 250 | -------------------------------------------------------------------------------- /src/components/public/header.vue: -------------------------------------------------------------------------------- 1 | 103 | 104 | 157 | 158 | 161 | -------------------------------------------------------------------------------- /src/pages/player.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 88 | 89 | 263 | -------------------------------------------------------------------------------- /src/components/musicDis_c/style/newCD.scss: -------------------------------------------------------------------------------- 1 | .mod_index--new { 2 | height: 734px; 3 | .index__hd { 4 | padding-top: 80px; 5 | margin-bottom: 43px; 6 | position: relative; 7 | width: 490px; 8 | height: 48px; 9 | margin: 0 auto 50px; 10 | .index__tit { 11 | font-weight: 400; 12 | text-align: center; 13 | .index__tit_sprite { 14 | width: 193px; 15 | background-position: 0 0; 16 | display: block; 17 | margin: 0 auto; 18 | height: 48px; 19 | background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/index_tit.png?max_age=2592000&v=ea6515ebb82f7609712c02805e2abe9c); 20 | } 21 | .icon_txt { 22 | font: 0/0 a; 23 | } 24 | } 25 | .index__line { 26 | top: 104px; 27 | position: absolute; 28 | width: 72px; 29 | height: 1px; 30 | opacity: .2; 31 | background-color: #fff; 32 | } 33 | .index__line--left { 34 | left: 0; 35 | } 36 | .index__line--right { 37 | right: 0; 38 | } 39 | } 40 | } 41 | .mod_index { 42 | position: relative; 43 | .section_inner { 44 | z-index: 2; 45 | overflow: hidden; 46 | .index__more { 47 | position: absolute; 48 | right: 0; 49 | top: initial; 50 | } 51 | .index__more:hover { 52 | color: #31c27c; 53 | } 54 | .index__more--white { 55 | font-size: 15px; 56 | color: #fff; 57 | .icon_index_arrow { 58 | background-position: -40px -260px; 59 | display: inline-block; 60 | width: 7px; 61 | height: 12px; 62 | background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40); 63 | margin-left: 6px; 64 | } 65 | .icon_index_arrow:hover { 66 | background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40); 67 | background-position: 0 0; 68 | } 69 | } 70 | .mod_index_tab { 71 | height: 50px; 72 | text-align: center; 73 | font-size: 0; 74 | .index_tab__item { 75 | display: inline-block; 76 | font-size: 16px; 77 | margin: 0 35px; 78 | color: #fff; 79 | opacity: .5; 80 | } 81 | .index_tab__item:hover { 82 | opacity: 1; 83 | } 84 | } 85 | } 86 | } 87 | .mod_playlist { 88 | text-align: center; 89 | .playlist__item { 90 | width: 25%; 91 | background: rgba(0, 0, 0, .8); 92 | font-size: 16px; 93 | padding-bottom: 0; 94 | float: left; 95 | overflow: hidden; 96 | } 97 | .playlist__item:hover { 98 | background-color: #31c27c; 99 | } 100 | .playlist__item:hover + .playlist__item_box > .playlist__title > .btn_opera_menu { 101 | transition: .5s ease-in; 102 | opacity: 1; 103 | } 104 | .playlist__item_box{ 105 | height: auto; 106 | margin-right: 0; 107 | position: relative; 108 | .playlist__title { 109 | display: inline-block; 110 | position: relative; 111 | max-width: 75%; 112 | padding: 0 26px; 113 | height: 22px; 114 | margin-bottom: 0; 115 | overflow: hidden; 116 | .playlist__title_txt { 117 | a { 118 | color: #fff; 119 | } 120 | float: none; 121 | display: inline-block; 122 | max-width: 100%; 123 | font-weight: 400; 124 | white-space: nowrap; 125 | overflow: hidden; 126 | text-overflow: ellipsis; 127 | line-height: 22px; 128 | } 129 | .btn_opera_menu { 130 | bottom: 23px; 131 | top: 2px; 132 | display: inline-block; 133 | background-position: -180px -100px; 134 | right: 0; 135 | position: absolute; 136 | width: 20px; 137 | height: 20px; 138 | opacity: 0; 139 | background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40); 140 | } 141 | } 142 | .playlist__author { 143 | margin-bottom: 32px; 144 | line-height: 18px; 145 | a { 146 | color: #c1e9d5; 147 | white-space: nowrap; 148 | overflow: hidden; 149 | text-overflow: ellipsis; 150 | height: 22px; 151 | // &:hover { 152 | // color: #c1e9d5; 153 | // } 154 | } 155 | } 156 | } 157 | .mod_cover { 158 | opacity: .9; 159 | } 160 | .mod_cover:hover > .js_album > .playlist__pic { 161 | transform: scale(1.07); 162 | } 163 | .mod_cover:hover > .js_album > .mod_cover__mask { 164 | opacity: .4; 165 | } 166 | .mod_cover:hover > .js_album > .mod_cover__icon_play { 167 | transform: scale(1); 168 | opacity: 1; 169 | } 170 | .mod_cover:hover + .playlist__title > .btn_opera_menu { 171 | transition: .5s ease-in; 172 | opacity: 1; 173 | } 174 | .mod_cover:hover + .playlist__author > .js_singer { 175 | color: #fff; 176 | } 177 | .playlist__cover { 178 | margin-bottom: 32px; 179 | position: relative; 180 | display: block; 181 | overflow: hidden; 182 | padding-top: 100%; 183 | .playlist__pic { 184 | position: absolute; 185 | top: 0; 186 | left: 0; 187 | width: 100%; 188 | transform: scale(1) translateZ(0); 189 | transition: transform .75s; 190 | } 191 | .mod_cover__mask { 192 | position: absolute; 193 | top: 0; 194 | left: 0; 195 | width: 100%; 196 | height: 100%; 197 | background-color: #000; 198 | opacity: 0; 199 | transition: opacity .5s; 200 | } 201 | .mod_cover__icon_play { 202 | background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/cover_play.png?max_age=2592000&v=fa72193fd8d5000e90837380d6be93ea); 203 | position: absolute; 204 | top: 50%; 205 | left: 50%; 206 | margin: -35px; 207 | width: 70px; 208 | height: 70px; 209 | opacity: 0; 210 | transform: scale(.7); 211 | transition-property: opacity,transform; 212 | transition-duration: .5s; 213 | zoom: 1; 214 | } 215 | } 216 | } 217 | .mod_slide { 218 | overflow: hidden; 219 | margin-bottom: 25px; 220 | } 221 | .slide__item { 222 | display: inline-block; 223 | } 224 | 225 | // 左右箭头 226 | .mod_slide_action { 227 | position: absolute; 228 | top: 0; 229 | left: 0; 230 | width: 100%; 231 | height: 100%; 232 | overflow: hidden; 233 | .slide_action { 234 | position: absolute; 235 | top: 0; 236 | width: 50%; 237 | height: 100%; 238 | } 239 | .slide_action--left { 240 | left: 0; 241 | } 242 | .slide_action__btn--left { 243 | left: 0; 244 | transform: translateX(-100%); 245 | .slide_action__arrow--left { 246 | left: 28px; 247 | background-position: -180px 0; 248 | } 249 | } 250 | .slide_action--right { 251 | right: 0; 252 | } 253 | .slide_action__btn--right { 254 | right: 0; 255 | transform: translateX(100%); 256 | .slide_action__arrow--right { 257 | right: 28px; 258 | background-position: -160px 0; 259 | } 260 | } 261 | .slide_action__btn { 262 | position: absolute; 263 | top: 50%; 264 | margin-top: -54px; 265 | width: 72px; 266 | height: 108px; 267 | background: rgba(153, 153, 153, .4); 268 | transition-property: opacity, transform; 269 | transition-duration: .5s; 270 | z-index: 2; 271 | } 272 | .slide_action__btn:hover { 273 | transition: .6s ease-out; 274 | background: #31c27c; 275 | } 276 | .slide_action__arrow { 277 | position: absolute; 278 | top: 50%; 279 | margin-top: -9px; 280 | background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40); 281 | width: 11px; 282 | height: 18px; 283 | } 284 | } 285 | // 点线 286 | .mod_slide_switch { 287 | bottom:24px; 288 | width: 100%; 289 | text-align: center; 290 | font-size: 0; 291 | .slide_switch__item { 292 | display: inline-block; 293 | width: 30px; 294 | height: 2px; 295 | padding: 10px 0; 296 | margin: 0 5px; 297 | .slide_switch__bg { 298 | display: block; 299 | width: 100%; 300 | background: rgba(255,255,255,.3); 301 | height: .5px; 302 | &:hover { 303 | color: #fff; 304 | } 305 | } 306 | } 307 | } 308 | .slide_switch__item--current .slide_switch__bg, .slide_switch__item:hover .slide_switch__bg { 309 | filter: none; 310 | background-color: #fff; 311 | } 312 | -------------------------------------------------------------------------------- /src/components/musicDis_c/topList.vue: -------------------------------------------------------------------------------- 1 | 197 | 198 | 203 | 204 | 208 | -------------------------------------------------------------------------------- /static/js/manifest.d7747395207f3e34b811.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///static/js/manifest.d7747395207f3e34b811.js","webpack:///webpack/bootstrap e6714be2ce28ab226630"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","i","l","call","parentJsonpFunction","window","chunkIds","moreModules","executeModules","chunkId","result","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","shift","s","2","resolvedPromise","Promise","resolve","e","onScriptComplete","script","onerror","onload","clearTimeout","timeout","chunk","Error","undefined","promise","reject","head","document","getElementsByTagName","createElement","type","charset","async","nc","setAttribute","src","p","0","1","setTimeout","appendChild","m","c","value","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","oe","err","console","error"],"mappings":"CAAS,SAAUA,GCyCnB,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAE,OAGA,IAAAC,GAAAF,EAAAD,IACAI,EAAAJ,EACAK,GAAA,EACAH,WAUA,OANAJ,GAAAE,GAAAM,KAAAH,EAAAD,QAAAC,IAAAD,QAAAH,GAGAI,EAAAE,GAAA,EAGAF,EAAAD,QA5DA,GAAAK,GAAAC,OAAA,YACAA,QAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,GAAAX,GAAAY,EAAAC,EAAAT,EAAA,EAAAU,KACQV,EAAAK,EAAAM,OAAoBX,IAC5BQ,EAAAH,EAAAL,GACAY,EAAAJ,IACAE,EAAAG,KAAAD,EAAAJ,GAAA,IAEAI,EAAAJ,GAAA,CAEA,KAAAZ,IAAAU,GACAQ,OAAAC,UAAAC,eAAAd,KAAAI,EAAAV,KACAF,EAAAE,GAAAU,EAAAV,GAIA,KADAO,KAAAE,EAAAC,EAAAC,GACAG,EAAAC,QACAD,EAAAO,SAEA,IAAAV,EACA,IAAAP,EAAA,EAAYA,EAAAO,EAAAI,OAA2BX,IACvCS,EAAAd,IAAAuB,EAAAX,EAAAP,GAGA,OAAAS,GAIA,IAAAZ,MAGAe,GACAO,EAAA,GAGAC,EAAA,GAAAC,SAAA,SAAAC,GAAuDA,KA4BvD3B,GAAA4B,EAAA,SAAAf,GA8BA,QAAAgB,KAEAC,EAAAC,QAAAD,EAAAE,OAAA,KACAC,aAAAC,EACA,IAAAC,GAAAlB,EAAAJ,EACA,KAAAsB,IACAA,GACAA,EAAA,MAAAC,OAAA,iBAAAvB,EAAA,aAEAI,EAAAJ,OAAAwB,IAtCA,OAAApB,EAAAJ,GACA,MAAAY,EAIA,IAAAR,EAAAJ,GACA,MAAAI,GAAAJ,GAAA,EAIA,IAAAyB,GAAA,GAAAZ,SAAA,SAAAC,EAAAY,GACAtB,EAAAJ,IAAAc,EAAAY,IAEAtB,GAAAJ,GAAA,GAAAyB,CAGA,IAAAE,GAAAC,SAAAC,qBAAA,WACAZ,EAAAW,SAAAE,cAAA,SACAb,GAAAc,KAAA,kBACAd,EAAAe,QAAA,QACAf,EAAAgB,OAAA,EACAhB,EAAAI,QAAA,KAEAlC,EAAA+C,IACAjB,EAAAkB,aAAA,QAAAhD,EAAA+C,IAEAjB,EAAAmB,IAAAjD,EAAAkD,EAAA,aAAArC,EAAA,KAAwEsC,EAAA,uBAAAC,EAAA,wBAAsDvC,GAAA,KAC9H,IAAAqB,GAAAmB,WAAAxB,EAAA,KAgBA,OAfAC,GAAAC,QAAAD,EAAAE,OAAAH,EAaAW,EAAAc,YAAAxB,GAEAQ,GAIAtC,EAAAuD,EAAAxD,EAGAC,EAAAwD,EAAAtD,EAGAF,EAAAK,EAAA,SAAAoD,GAA2C,MAAAA,IAG3CzD,EAAA0D,EAAA,SAAAvD,EAAAwD,EAAAC,GACA5D,EAAA6D,EAAA1D,EAAAwD,IACAxC,OAAA2C,eAAA3D,EAAAwD,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMA5D,EAAAkE,EAAA,SAAA9D,GACA,GAAAwD,GAAAxD,KAAA+D,WACA,WAA2B,MAAA/D,GAAA,SAC3B,WAAiC,MAAAA,GAEjC,OADAJ,GAAA0D,EAAAE,EAAA,IAAAA,GACAA,GAIA5D,EAAA6D,EAAA,SAAAO,EAAAC,GAAsD,MAAAlD,QAAAC,UAAAC,eAAAd,KAAA6D,EAAAC,IAGtDrE,EAAAkD,EAAA,KAGAlD,EAAAsE,GAAA,SAAAC,GAA8D,KAApBC,SAAAC,MAAAF,GAAoBA","file":"static/js/manifest.d7747395207f3e34b811.js","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// install a JSONP callback for chunk loading\n/******/ \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n/******/ \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n/******/ \t\t// add \"moreModules\" to the modules object,\n/******/ \t\t// then flag all \"chunkIds\" as loaded and fire callback\n/******/ \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n/******/ \t\tfor(;i < chunkIds.length; i++) {\n/******/ \t\t\tchunkId = chunkIds[i];\n/******/ \t\t\tif(installedChunks[chunkId]) {\n/******/ \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n/******/ \t\t\t}\n/******/ \t\t\tinstalledChunks[chunkId] = 0;\n/******/ \t\t}\n/******/ \t\tfor(moduleId in moreModules) {\n/******/ \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n/******/ \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n/******/ \t\t\t}\n/******/ \t\t}\n/******/ \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n/******/ \t\twhile(resolves.length) {\n/******/ \t\t\tresolves.shift()();\n/******/ \t\t}\n/******/ \t\tif(executeModules) {\n/******/ \t\t\tfor(i=0; i < executeModules.length; i++) {\n/******/ \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n/******/ \t\t\t}\n/******/ \t\t}\n/******/ \t\treturn result;\n/******/ \t};\n/******/\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// objects to store loaded and loading chunks\n/******/ \tvar installedChunks = {\n/******/ \t\t2: 0\n/******/ \t};\n/******/\n/******/ \tvar resolvedPromise = new Promise(function(resolve) { resolve(); });\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/ \t// This file contains only the entry chunk.\n/******/ \t// The chunk loading function for additional chunks\n/******/ \t__webpack_require__.e = function requireEnsure(chunkId) {\n/******/ \t\tif(installedChunks[chunkId] === 0) {\n/******/ \t\t\treturn resolvedPromise;\n/******/ \t\t}\n/******/\n/******/ \t\t// a Promise means \"currently loading\".\n/******/ \t\tif(installedChunks[chunkId]) {\n/******/ \t\t\treturn installedChunks[chunkId][2];\n/******/ \t\t}\n/******/\n/******/ \t\t// setup Promise in chunk cache\n/******/ \t\tvar promise = new Promise(function(resolve, reject) {\n/******/ \t\t\tinstalledChunks[chunkId] = [resolve, reject];\n/******/ \t\t});\n/******/ \t\tinstalledChunks[chunkId][2] = promise;\n/******/\n/******/ \t\t// start chunk loading\n/******/ \t\tvar head = document.getElementsByTagName('head')[0];\n/******/ \t\tvar script = document.createElement('script');\n/******/ \t\tscript.type = 'text/javascript';\n/******/ \t\tscript.charset = 'utf-8';\n/******/ \t\tscript.async = true;\n/******/ \t\tscript.timeout = 120000;\n/******/\n/******/ \t\tif (__webpack_require__.nc) {\n/******/ \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n/******/ \t\t}\n/******/ \t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"0\":\"0e8afee9829afd26b61d\",\"1\":\"2a0d5f9d5d52822b23c0\"}[chunkId] + \".js\";\n/******/ \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n/******/ \t\tscript.onerror = script.onload = onScriptComplete;\n/******/ \t\tfunction onScriptComplete() {\n/******/ \t\t\t// avoid mem leaks in IE.\n/******/ \t\t\tscript.onerror = script.onload = null;\n/******/ \t\t\tclearTimeout(timeout);\n/******/ \t\t\tvar chunk = installedChunks[chunkId];\n/******/ \t\t\tif(chunk !== 0) {\n/******/ \t\t\t\tif(chunk) {\n/******/ \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n/******/ \t\t\t\t}\n/******/ \t\t\t\tinstalledChunks[chunkId] = undefined;\n/******/ \t\t\t}\n/******/ \t\t};\n/******/ \t\thead.appendChild(script);\n/******/\n/******/ \t\treturn promise;\n/******/ \t};\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// identity function for calling harmony imports with the correct context\n/******/ \t__webpack_require__.i = function(value) { return value; };\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"./\";\n/******/\n/******/ \t// on error function for async loading\n/******/ \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n/******/ })\n/************************************************************************/\n/******/ ([]);\n\n\n// WEBPACK FOOTER //\n// static/js/manifest.d7747395207f3e34b811.js"," \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \tvar resolvedPromise = new Promise(function(resolve) { resolve(); });\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tif(installedChunks[chunkId] === 0) {\n \t\t\treturn resolvedPromise;\n \t\t}\n\n \t\t// a Promise means \"currently loading\".\n \t\tif(installedChunks[chunkId]) {\n \t\t\treturn installedChunks[chunkId][2];\n \t\t}\n\n \t\t// setup Promise in chunk cache\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunks[chunkId][2] = promise;\n\n \t\t// start chunk loading\n \t\tvar head = document.getElementsByTagName('head')[0];\n \t\tvar script = document.createElement('script');\n \t\tscript.type = 'text/javascript';\n \t\tscript.charset = 'utf-8';\n \t\tscript.async = true;\n \t\tscript.timeout = 120000;\n\n \t\tif (__webpack_require__.nc) {\n \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t}\n \t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"0\":\"0e8afee9829afd26b61d\",\"1\":\"2a0d5f9d5d52822b23c0\"}[chunkId] + \".js\";\n \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n \t\tscript.onerror = script.onload = onScriptComplete;\n \t\tfunction onScriptComplete() {\n \t\t\t// avoid mem leaks in IE.\n \t\t\tscript.onerror = script.onload = null;\n \t\t\tclearTimeout(timeout);\n \t\t\tvar chunk = installedChunks[chunkId];\n \t\t\tif(chunk !== 0) {\n \t\t\t\tif(chunk) {\n \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\t}\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n \t\thead.appendChild(script);\n\n \t\treturn promise;\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap e6714be2ce28ab226630"],"sourceRoot":""} -------------------------------------------------------------------------------- /static/js/app.0e8afee9829afd26b61d.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0],[,,,,,,,,,,,function(t,s,i){i(62);var a=i(1)(i(70),i(50),null,null);t.exports=a.exports},,function(t,s,i){"use strict";var a=i(3),_=i(68),e=i(35),l=i.n(e),n=i(41),c=i.n(n),o=i(42),r=i.n(o);a.a.use(_.a),s.a=new _.a({routes:[{path:"/",name:"musicDis",component:l.a},{path:"/myMusic",name:"myMusic",component:c.a},{path:"/player",name:"player",component:r.a}]})},,,,,,,,,,,,,,,,,,,,,,function(t,s,i){i(61);var a=i(1)(i(71),i(49),null,null);t.exports=a.exports},function(t,s,i){i(57);var a=i(1)(i(72),i(45),"data-v-1aced3d2",null);t.exports=a.exports},function(t,s,i){i(66);var a=i(1)(i(73),i(54),"data-v-a1903c04",null);t.exports=a.exports},function(t,s,i){i(63);var a=i(1)(i(74),i(51),"data-v-6ed987bb",null);t.exports=a.exports},function(t,s,i){i(65);var a=i(1)(i(75),i(53),"data-v-7cd64d50",null);t.exports=a.exports},function(t,s,i){i(67);var a=i(1)(i(76),i(55),null,null);t.exports=a.exports},function(t,s,i){i(59);var a=i(1)(i(77),i(47),null,null);t.exports=a.exports},function(t,s,i){i(58);var a=i(1)(i(78),i(46),"data-v-27564d40",null);t.exports=a.exports},function(t,s,i){i(64);var a=i(1)(i(79),i(52),"data-v-70eb005c",null);t.exports=a.exports},function(t,s,i){i(60);var a=i(1)(i(80),i(48),"data-v-2e863878",null);t.exports=a.exports},function(t,s){t.exports={render:function(){var t=this,s=t.$createElement;t._self._c;return t._m(0)},staticRenderFns:[function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"mod_index mod_index--event mod_slide_box",attrs:{id:"focus"}},[i("div",{staticClass:"section_inner"},[i("div",{staticClass:"index__hd"},[i("h2",{staticClass:"index__tit"},[i("i",{staticClass:"index__tit_sprite"}),t._v(" "),i("i",{staticClass:"icon_txt"},[t._v("精彩推荐")])]),t._v(" "),i("i",{staticClass:"index__line index__line--left"}),t._v(" "),i("i",{staticClass:"index__line index__line--right"})]),t._v(" "),i("div",{staticClass:"mod_event mod_slide mod_focus--animate"},[i("ul",{staticClass:"event_list slide__list"},[i("li",{staticClass:"event_list__item slide__item js_focus_pic p1"},[i("a",{staticClass:"event_list__link js_focus_jump",attrs:{href:"javascript:;"}},[i("img",{staticClass:"event_list__pic",attrs:{src:"https://y.gtimg.cn/music/common/upload/t_focus_info_iphone/102445.jpg",alt:""}})])])])]),t._v(" "),i("div",{staticClass:"mod_slide_switch js_focus_index"},[i("a",{staticClass:"slide_switch__item",attrs:{href:"jacascript:;"}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"})]),t._v(" "),i("a",{staticClass:"slide_switch__item",attrs:{href:"jacascript:;"}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"})]),t._v(" "),i("a",{staticClass:"slide_switch__item",attrs:{href:"jacascript:;"}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"})]),t._v(" "),i("a",{staticClass:"slide_switch__item",attrs:{href:"jacascript:;"}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"})]),t._v(" "),i("a",{staticClass:"slide_switch__item",attrs:{href:"jacascript:;"}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"})]),t._v(" "),i("a",{staticClass:"slide_switch__item",attrs:{href:"jacascript:;"}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"})])])]),t._v(" "),i("div",{staticClass:"mod_slide_action"})])}]}},function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"main-bg"},[i("div",{staticClass:"main"},[i("div",{staticClass:"mod_data"},[i("img",{staticClass:"avatar",attrs:{src:t.songList[0].album.picUrl,alt:t.songList[0].album.name}}),t._v(" "),i("div",{staticClass:"data__cont"},[i("div",{staticClass:"data__name"},[i("h1",[t._v(t._s(t.songList[0].artists[0].name))])])])]),t._v(" "),i("div",{staticClass:"mod_part"},[t._m(0),t._v(" "),i("div",{staticClass:"mod_songlist"},[t._m(1),t._v(" "),i("ul",{staticClass:"songlist__list"},t._l(t.songList,function(s,a){return i("li",[i("p",{staticClass:"songNum"},[t._v(t._s(a+1))]),t._v(" "),i("div",{staticClass:"songName"},[i("p",[t._v(t._s(s.name))]),t._v(" "),i("div",{staticClass:"mod_list_menu",staticStyle:{display:"none"}},[i("router-link",{attrs:{to:"/"}},[i("i",{staticClass:"song_play"})]),t._v(" "),i("router-link",{attrs:{to:"/"}},[i("i",{staticClass:"song_download"})])],1)]),t._v(" "),i("p",{staticClass:"songAlbum"},[t._v(t._s(s.album.name))]),t._v(" "),i("p",{staticClass:"songTime"},[t._v(t._s((s.mMusic.playTime/6e4).toFixed(2))+"分钟")])])}))])])])])},staticRenderFns:[function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"part_hd"},[i("h2",[t._v("热门歌曲")]),t._v(" "),i("a",{staticClass:"part_more js_goto_tab",attrs:{href:"#"}},[t._v("\n 全部\n "),i("i",{staticClass:"icon_part_arrow sprite"})])])},function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("ul",{staticClass:"songlist__header"},[i("li",{staticClass:"songlist__header_name"},[t._v("歌曲")]),t._v(" "),i("li",{staticClass:"songlist__header_album"},[t._v("专辑")]),t._v(" "),i("li",{staticClass:"songlist__header_time"},[t._v("时长")])])}]}},function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"play"},[i("un-login")],1)},staticRenderFns:[]}},function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"mod_header"},[i("div",{staticClass:"section_inner"},[i("h1",{staticClass:"qqmusic_title"},[i("router-link",{attrs:{to:"/"}},[i("img",{staticClass:"qqmusic_logo",attrs:{src:"https://y.gtimg.cn/mediastyle/yqq/img/logo@2x.png",alt:"qqmusic"}})])],1),t._v(" "),i("ul",{staticClass:"mod_top_nav"},[i("li",{staticClass:"top_nav__item top_nav__item--room"},[i("router-link",{staticClass:"top_nav_link top_nav_link--current",attrs:{to:"/"}},[t._v("音乐馆")])],1),t._v(" "),i("li",{staticClass:"top_nav__item top_nav__item--mine"},[i("router-link",{staticClass:"top_nav_link",attrs:{to:"/myMusic"}},[t._v("我的音乐")])],1),t._v(" "),i("li",{staticClass:"top_nav__item top_nav__item--down"},[i("router-link",{staticClass:"top_nav_link",attrs:{to:""}},[t._v("下载客户端")])],1),t._v(" "),i("li",{staticClass:"top_nav__item top_nav__item--vip"},[i("router-link",{staticClass:"top_nav_link",attrs:{to:""}},[t._v("VIP")])],1)]),t._v(" "),i("ul",{staticClass:"mod_top_subnav"},t._l(t.subnav,function(s){return i("li",{staticClass:"top_subnav__item"},[i("a",{staticClass:"top_subnav__link",attrs:{href:s.href}},[t._v(t._s(s.name))])])})),t._v(" "),i("div",{staticClass:"mod_top_search",on:{mouseout:t.schleave}},[i("div",{staticClass:"mod_search_input"},[i("input",{directives:[{name:"model",rawName:"v-model",value:t.keyword,expression:"keyword"}],staticClass:"search_input__input",attrs:{type:"text",placeholder:"先搜一下好吗？"},domProps:{value:t.keyword},on:{click:t.dropmenu,input:function(s){s.target.composing||(t.keyword=s.target.value)}}}),t._v(" "),i("button",{staticClass:"search_input__btn"},[i("i",{staticClass:"icon_search",on:{click:t.search}}),t._v(" "),i("span",{staticClass:"icon_text"})])]),t._v(" "),i("div",{staticClass:"js_smartbox"},[i("div",{staticClass:"mod_search_other",class:t.drop?"drop":""},[t._m(0),t._v(" "),t._m(1)])])]),t._v(" "),t._m(2)])])},staticRenderFns:[function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"search_hot"},[i("dl",{staticClass:"search_hot__list"},[i("dt",{staticClass:"search_hot__tit"},[t._v("热门搜索")]),t._v(" "),i("dd",[i("a",{staticClass:"search_hot__link js_smartbox_search\n js_left",attrs:{href:"javascript:;","data-name":""}},[i("span",{staticClass:"search_hot__number"},[t._v("1")]),t._v(" "),i("span",{staticClass:"search_hot__name"},[t._v("鹿晗")]),t._v(" "),i("span",{staticClass:"search_hot__listen"},[t._v("100.6万")])])])])])},function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"search_history"},[i("dl",{staticClass:"search_history__list"},[i("dt",{staticClass:"search_history__tit"},[t._v("\n 搜索历史\n "),i("a",{staticClass:"search_history__clear js_smartbox_delete_all",attrs:{href:""}},[i("i",{staticClass:"icon_history_clear"}),t._v(" "),i("span",{staticClass:"icon_txt"},[t._v("清空")])])])])])},function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"header__opt"},[i("span",{staticClass:"mod_top_login"},[i("a",{staticClass:"top_login__link js_logined",attrs:{href:"y.qq.com"}}),t._v(" "),i("a",{staticClass:"top_login__link js_login",attrs:{href:"#"}},[t._v("登录")]),t._v(" "),i("a",{staticClass:"mod_btn_green top_login__btn_vip js_openvip",attrs:{href:"y.qq.com"}},[t._v("开通绿钻豪华版")]),t._v(" "),i("a",{staticClass:"mod_btn top_login__btn_vip js_openmusic",attrs:{href:"#"}},[t._v("开通付费包")])])])}]}},function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",[i("v-cd"),t._v(" "),i("v-event"),t._v(" "),i("v-toplist"),t._v(" "),i("v-taolist")],1)},staticRenderFns:[]}},function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{attrs:{id:"app"}},[i("v-head"),t._v(" "),i("router-view"),t._v(" "),i("v-foot")],1)},staticRenderFns:[]}},function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"mod_index mod_index--new mod_slide_box",attrs:{id:"albumlist_box"},on:{mouseover:t.arrow,mouseout:t.arrowL}},[i("div",{staticClass:"section_inner"},[t._m(0),t._v(" "),t._m(1),t._v(" "),i("div",{staticClass:"mod_playlist mod_slide"},[i("ul",{staticClass:"playlist__list slide__list",staticStyle:{left:"-1200px"},attrs:{id:"albumlist"}},t._l(t.playList,function(s){return i("li",{staticClass:"playlist__item slide__item"},[i("div",{staticClass:"playlist__item_box"},[i("div",{staticClass:"playlist__cover mod_cover"},[i("a",{staticClass:"js_album",attrs:{href:""}},[i("img",{staticClass:"playlist__pic",attrs:{src:s.src,alt:""}}),t._v(" "),i("i",{staticClass:"mod_cover__mask"}),t._v(" "),i("i",{staticClass:"mod_cover__icon_play js_play"})])]),t._v(" "),i("h4",{staticClass:"playlist__title"},[i("span",{staticClass:"playlist__title_txt"},[i("a",{staticClass:"js_album",attrs:{href:""}},[t._v(t._s(s.title))])]),t._v(" "),t._m(2,!0)]),t._v(" "),i("div",{staticClass:"playlist__author"},[i("a",{staticClass:"js_singer",attrs:{href:"#"}},[t._v(t._s(s.name))])])])])}))]),t._v(" "),t._m(3)]),t._v(" "),t._m(4)])},staticRenderFns:[function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"index__hd"},[i("h2",{staticClass:"index__tit"},[i("i",{staticClass:"index__tit_sprite",staticStyle:{"background-position":"0 -60px"}}),t._v(" "),i("i",{staticClass:"icon_txt"},[t._v("新碟首发")])]),t._v(" "),i("i",{staticClass:"index__line index__line--left"}),t._v(" "),i("i",{staticClass:"index__line index__line--right"})])},function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("a",{staticClass:"index__more index__more--white js_album_more",attrs:{href:"y.qq.com/portal/album_lib.html#stat=y_new.index.album.more"}},[t._v("\n 全部\n "),i("i",{staticClass:"icon_index_arrow"})])},function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("a",{staticClass:"btn_opera_menu js_albumlist_more",attrs:{href:"#"}},[i("span",{staticClass:"icon_txt"},[t._v("更多")])])},function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"mod_slide_switch js_switch"},[i("a",{staticClass:"js_jump slide_switch__item",attrs:{href:""}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"},[t._v("1")])]),t._v(" "),i("a",{staticClass:"js_jump slide_switch__item",attrs:{href:""}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"},[t._v("1")])]),t._v(" "),i("a",{staticClass:"js_jump slide_switch__item",attrs:{href:""}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"},[t._v("1")])]),t._v(" "),i("a",{staticClass:"js_jump slide_switch__item",attrs:{href:""}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"},[t._v("1")])])])},function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"mod_slide_action",attrs:{id:"mod_slide_action"}},[i("div",{staticClass:"slide_action slide_action--left"},[i("a",{staticClass:"slide_action__btn\n slide_action__btn--left js_jump",attrs:{href:"javascript:;"}},[i("i",{staticClass:"icon_txt"},[t._v("上一页")]),t._v(" "),i("i",{staticClass:"slide_action__arrow slide_action__arrow--left"})])]),t._v(" "),i("div",{staticClass:"slide_action slide_action--right"},[i("a",{staticClass:"slide_action__btn\n slide_action__btn--right js_jump",attrs:{href:"javascript:;"}},[i("i",{staticClass:"icon_txt"},[t._v("下一页")]),t._v(" "),i("i",{staticClass:"slide_action__arrow slide_action__arrow--right"})])])])}]}},function(t,s){t.exports={render:function(){var t=this,s=t.$createElement;t._self._c;return t._m(0)},staticRenderFns:[function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"footer"},[i("div",{staticClass:"section_inner"},[i("div",{staticClass:"footer_info"},[i("div",{staticClass:"footer_download"},[i("h3",{staticClass:"footer_tit"},[t._v("下载QQ音乐客户端")]),t._v(" "),i("ul",{staticClass:"footer_download_list"},[i("li",{staticClass:"footer_download_list__item"},[i("a",{staticClass:"js_footer_down",attrs:{href:""}},[i("i",{staticClass:"icon_qm_pc"},[i("span",{staticClass:"icon_txt"},[t._v("QQ音乐")])]),t._v("\n PC版\n ")])]),t._v(" "),i("li",{staticClass:"footer_download_list__item"},[i("a",{staticClass:"js_footer_down",attrs:{href:""}},[i("i",{staticClass:"icon_qm_mac"},[i("span",{staticClass:"icon_txt"},[t._v("QQ音乐")])]),t._v("\n Mac版\n ")])]),i("li",{staticClass:"footer_download_list__item"},[i("a",{staticClass:"js_footer_down",attrs:{href:""}},[i("i",{staticClass:"icon_qm_android"},[i("span",{staticClass:"icon_txt"},[t._v("QQ音乐")])]),t._v("\n Android版\n ")])]),i("li",{staticClass:"footer_download_list__item"},[i("a",{staticClass:"js_footer_down",attrs:{href:""}},[i("i",{staticClass:"icon_qm_iphone"},[i("span",{staticClass:"icon_txt"},[t._v("QQ音乐")])]),t._v("\n Iphone版\n ")])])])]),t._v(" "),i("div",{staticClass:"footer_product"},[i("h3",{staticClass:"footer_tit"},[t._v("特色产品")]),t._v(" "),i("ul",{staticClass:"footer_product_list"},[i("li",{staticClass:"footer_product_list__item footer_product_list__item--pic"},[i("a",{staticClass:"js_other_link",attrs:{href:"#"}},[i("i",{staticClass:"icon_qm_kg"}),t._v("\n 全民K歌\n ")])]),t._v(" "),i("li",{staticClass:"footer_product_list__item footer_product_list__item--pic"},[i("a",{staticClass:"js_other_link",attrs:{href:"#"}},[i("i",{staticClass:"icon_qm_ss"}),t._v("\n Super Sound\n ")])]),t._v(" "),i("li",{staticClass:"footer_product_list__item footer_product_list__item--pic"},[i("a",{staticClass:"js_other_link",attrs:{href:"#"}},[i("i",{staticClass:"icon_qm_qp"}),t._v("\n QPlay\n ")])]),t._v(" "),i("li",{staticClass:"footer_product_list__item"},[i("a",{staticClass:"js_other_link",attrs:{href:"#"}},[t._v("\n QQ音乐原创音乐平台\n ")])]),t._v(" "),i("li",{staticClass:"footer_product_list__item"},[i("a",{staticClass:"js_other_link",attrs:{href:"#"}},[t._v("\n 上传视频\n ")])]),t._v(" "),i("li",{staticClass:"footer_product_list__item"},[i("a",{staticClass:"js_other_link",attrs:{href:"#"}},[t._v("\n 车载互联\n ")])]),t._v(" "),i("li",{staticClass:"footer_product_list__item"},[i("a",{staticClass:"js_other_link",attrs:{href:"#"}},[t._v("\n QQ演出\n ")])])])]),t._v(" "),i("div",{staticClass:"footer_link"},[i("h3",{staticClass:"footer_tit"},[t._v("合作链接")]),t._v(" "),i("ul",{staticClass:"footer_link_list"},[i("li",{staticClass:"footer_link_list__item"},[i("a",{staticClass:"js_other_link",attrs:{href:""}},[t._v("CJ E&M")])]),t._v(" "),i("li",{staticClass:"footer_link_list__item"},[i("a",{staticClass:"js_other_link",attrs:{href:""}},[t._v("腾讯视频")])]),t._v(" "),i("li",{staticClass:"footer_link_list__item"},[i("a",{staticClass:"js_other_link",attrs:{href:""}},[t._v("手机QQ空间")])]),t._v(" "),i("li",{staticClass:"footer_link_list__item"},[i("a",{staticClass:"js_other_link",attrs:{href:""}},[t._v("最新版QQ")])]),t._v(" "),i("li",{staticClass:"footer_link_list__item"},[i("a",{staticClass:"js_other_link",attrs:{href:""}},[t._v("腾讯社交广告")])]),t._v(" "),i("li",{staticClass:"footer_link_list__item"},[i("a",{staticClass:"js_other_link",attrs:{href:""}},[t._v("电脑管家")])]),t._v(" "),i("li",{staticClass:"footer_link_list__item"},[i("a",{staticClass:"js_other_link",attrs:{href:""}},[t._v("腾讯体育")])]),t._v(" "),i("li",{staticClass:"footer_link_list__item"},[i("a",{staticClass:"js_other_link",attrs:{href:""}},[t._v("腾讯微云")])])])])]),t._v(" "),i("div",{staticClass:"footer_copyright"},[i("p",[i("a",{attrs:{href:""}},[t._v("vue项目")])]),t._v(" "),i("p",[i("a",{attrs:{href:""}},[t._v("Copyright @ tencent")])]),t._v(" "),i("p",[i("a",{attrs:{href:""}},[t._v("jzxer")]),t._v("出品")])])])])}]}},function(t,s){t.exports={render:function(){var t=this,s=t.$createElement;t._self._c;return t._m(0)},staticRenderFns:[function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{attrs:{id:"toplist_box"}},[i("div",{staticClass:"mod_index mod_index--top mod_slide_box"},[i("div",{staticClass:"section_inner"},[i("div",{staticClass:"index__hd"},[i("h2",{staticClass:"index__tit"},[i("i",{staticClass:"index__tit_sprite"}),t._v(" "),i("i",{staticClass:"icon_txt"},[t._v("排行榜")])]),t._v(" "),i("i",{staticClass:"index__line index__line--left"}),t._v(" "),i("i",{staticClass:"index__line index__line--right"})]),t._v(" "),i("a",{staticClass:"index__more index__more--white",attrs:{href:"#"}},[t._v("\n 全部\n "),i("i",{staticClass:"icon_index_arrow"})]),t._v(" "),i("div",{staticClass:"mod_toplist"},[i("ul",{staticClass:"toplist__list"},[i("li",{staticClass:"toplist__item toplist__item--pop mod_cover"},[i("div",{staticClass:"toplist__bg"}),t._v(" "),i("i",{staticClass:"mod_cover__mask"}),t._v(" "),i("i",{staticClass:"mod_cover__icon_play js_play_toplist"}),t._v(" "),i("i",{staticClass:"toplist__line"}),t._v(" "),i("h3",{staticClass:"toplist__hd"},[i("a",{staticClass:"toplist__tit js_toplist",attrs:{href:"#"}},[i("i",{staticClass:"toplist__tit_top"},[i("i",{staticClass:"icon_txt"},[t._v("巅峰榜")])]),t._v(" "),i("div",{staticClass:"toplist__tit_pop"},[t._v("流行指数")])])]),t._v(" "),i("ul",{staticClass:"toplist__songlist"},[i("li",{staticClass:"toplist__song"},[i("div",{staticClass:"toplist__number"},[t._v("1")]),t._v(" "),i("div",{staticClass:"toplist__songname"},[i("a",{staticClass:"js_song",attrs:{href:"#"}},[t._v("望")])]),t._v(" "),i("div",{staticClass:"toplist__artist"},[i("a",{staticClass:"js_singers",attrs:{href:"#"}},[t._v("张碧晨/赵丽颖")])])]),t._v(" "),i("li",{staticClass:"toplist__song"},[i("div",{staticClass:"toplist__number"},[t._v("1")]),t._v(" "),i("div",{staticClass:"toplist__songname"},[i("a",{staticClass:"js_song",attrs:{href:"#"}},[t._v("望")])]),t._v(" "),i("div",{staticClass:"toplist__artist"},[i("a",{staticClass:"js_singers",attrs:{href:"#"}},[t._v("张碧晨/赵丽颖")])])]),t._v(" "),i("li",{staticClass:"toplist__song"},[i("div",{staticClass:"toplist__number"},[t._v("1")]),t._v(" "),i("div",{staticClass:"toplist__songname"},[i("a",{staticClass:"js_song",attrs:{href:"#"}},[t._v("望")])]),t._v(" "),i("div",{staticClass:"toplist__artist"},[i("a",{staticClass:"js_singers",attrs:{href:"#"}},[t._v("张碧晨/赵丽颖")])])])])]),t._v(" "),i("li",{staticClass:"toplist__item toplist__item--pop mod_cover"},[i("div",{staticClass:"toplist__bg",staticStyle:{"background-position":"-299px 0"}}),t._v(" "),i("i",{staticClass:"mod_cover__mask"}),t._v(" "),i("i",{staticClass:"mod_cover__icon_play js_play_toplist"}),t._v(" "),i("i",{staticClass:"toplist__line"}),t._v(" "),i("h3",{staticClass:"toplist__hd"},[i("a",{staticClass:"toplist__tit js_toplist",attrs:{href:"#"}},[i("i",{staticClass:"toplist__tit_top"},[i("i",{staticClass:"icon_txt"},[t._v("巅峰榜")])]),t._v(" "),i("div",{staticClass:"toplist__tit_pop"},[t._v("热歌")])])]),t._v(" "),i("ul",{staticClass:"toplist__songlist"},[i("li",{staticClass:"toplist__song"},[i("div",{staticClass:"toplist__number"},[t._v("1")]),t._v(" "),i("div",{staticClass:"toplist__songname"},[i("a",{staticClass:"js_song",attrs:{href:"#"}},[t._v("望")])]),t._v(" "),i("div",{staticClass:"toplist__artist"},[i("a",{staticClass:"js_singers",attrs:{href:"#"}},[t._v("张碧晨/赵丽颖")])])]),t._v(" "),i("li",{staticClass:"toplist__song"},[i("div",{staticClass:"toplist__number"},[t._v("1")]),t._v(" "),i("div",{staticClass:"toplist__songname"},[i("a",{staticClass:"js_song",attrs:{href:"#"}},[t._v("望")])]),t._v(" "),i("div",{staticClass:"toplist__artist"},[i("a",{staticClass:"js_singers",attrs:{href:"#"}},[t._v("张碧晨/赵丽颖")])])]),t._v(" "),i("li",{staticClass:"toplist__song"},[i("div",{staticClass:"toplist__number"},[t._v("1")]),t._v(" "),i("div",{staticClass:"toplist__songname"},[i("a",{staticClass:"js_song",attrs:{href:"#"}},[t._v("望")])]),t._v(" "),i("div",{staticClass:"toplist__artist"},[i("a",{staticClass:"js_singers",attrs:{href:"#"}},[t._v("张碧晨/赵丽颖")])])])])]),t._v(" "),i("li",{staticClass:"toplist__item toplist__item--pop mod_cover"},[i("div",{staticClass:"toplist__bg",staticStyle:{"background-position":"-599px 0"}}),t._v(" "),i("i",{staticClass:"mod_cover__mask"}),t._v(" "),i("i",{staticClass:"mod_cover__icon_play js_play_toplist"}),t._v(" "),i("i",{staticClass:"toplist__line"}),t._v(" "),i("h3",{staticClass:"toplist__hd"},[i("a",{staticClass:"toplist__tit js_toplist",attrs:{href:"#"}},[i("i",{staticClass:"toplist__tit_top"},[i("i",{staticClass:"icon_txt"},[t._v("巅峰榜")])]),t._v(" "),i("div",{staticClass:"toplist__tit_pop"},[t._v("新歌")])])]),t._v(" "),i("ul",{staticClass:"toplist__songlist"},[i("li",{staticClass:"toplist__song"},[i("div",{staticClass:"toplist__number"},[t._v("1")]),t._v(" "),i("div",{staticClass:"toplist__songname"},[i("a",{staticClass:"js_song",attrs:{href:"#"}},[t._v("望")])]),t._v(" "),i("div",{staticClass:"toplist__artist"},[i("a",{staticClass:"js_singers",attrs:{href:"#"}},[t._v("张碧晨/赵丽颖")])])]),t._v(" "),i("li",{staticClass:"toplist__song"},[i("div",{staticClass:"toplist__number"},[t._v("1")]),t._v(" "),i("div",{staticClass:"toplist__songname"},[i("a",{staticClass:"js_song",attrs:{href:"#"}},[t._v("望")])]),t._v(" "),i("div",{staticClass:"toplist__artist"},[i("a",{staticClass:"js_singers",attrs:{href:"#"}},[t._v("张碧晨/赵丽颖")])])]),t._v(" "),i("li",{staticClass:"toplist__song"},[i("div",{staticClass:"toplist__number"},[t._v("1")]),t._v(" "),i("div",{staticClass:"toplist__songname"},[i("a",{staticClass:"js_song",attrs:{href:"#"}},[t._v("望")])]),t._v(" "),i("div",{staticClass:"toplist__artist"},[i("a",{staticClass:"js_singers",attrs:{href:"#"}},[t._v("张碧晨/赵丽颖")])])])])]),t._v(" "),i("li",{staticClass:"toplist__item toplist__item--pop mod_cover"},[i("div",{staticClass:"toplist__bg",staticStyle:{"background-position":"-899px 0"}}),t._v(" "),i("i",{staticClass:"mod_cover__mask"}),t._v(" "),i("i",{staticClass:"mod_cover__icon_play js_play_toplist"}),t._v(" "),i("i",{staticClass:"toplist__line"}),t._v(" "),i("h3",{staticClass:"toplist__hd"},[i("a",{staticClass:"toplist__tit js_toplist",attrs:{href:"#"}},[i("i",{staticClass:"toplist__tit_top"},[i("i",{staticClass:"icon_txt"},[t._v("巅峰榜")])]),t._v(" "),i("div",{staticClass:"toplist__tit_pop"},[t._v("欧美")])])]),t._v(" "),i("ul",{staticClass:"toplist__songlist"},[i("li",{staticClass:"toplist__song"},[i("div",{staticClass:"toplist__number"},[t._v("1")]),t._v(" "),i("div",{staticClass:"toplist__songname"},[i("a",{staticClass:"js_song",attrs:{href:"#"}},[t._v("望")])]),t._v(" "),i("div",{staticClass:"toplist__artist"},[i("a",{staticClass:"js_singers",attrs:{href:"#"}},[t._v("张碧晨/赵丽颖")])])]),t._v(" "),i("li",{staticClass:"toplist__song"},[i("div",{staticClass:"toplist__number"},[t._v("1")]),t._v(" "),i("div",{staticClass:"toplist__songname"},[i("a",{staticClass:"js_song",attrs:{href:"#"}},[t._v("望")])]),t._v(" "),i("div",{staticClass:"toplist__artist"},[i("a",{staticClass:"js_singers",attrs:{href:"#"}},[t._v("张碧晨/赵丽颖")])])]),t._v(" "),i("li",{staticClass:"toplist__song"},[i("div",{staticClass:"toplist__number"},[t._v("1")]),t._v(" "),i("div",{staticClass:"toplist__songname"},[i("a",{staticClass:"js_song",attrs:{href:"#"}},[t._v("望")])]),t._v(" "),i("div",{staticClass:"toplist__artist"},[i("a",{staticClass:"js_singers",attrs:{href:"#"}},[t._v("张碧晨/赵丽颖")])])])])])])])])])])}]}},function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"mod_index mod_index--new mod_slide_box",staticStyle:{background:"#000 url(https://y.gtimg.cn/mediastyle/yqq/img/bg_index_new.jpg) 50% 0 repeat-x"},attrs:{id:"albumlist_box"},on:{mouseover:t.arrow,mouseout:t.arrowL}},[i("div",{staticClass:"section_inner"},[t._m(0),t._v(" "),t._m(1),t._v(" "),i("div",{staticClass:"mod_index_tab"},t._l(t.navList,function(s){return i("a",{staticClass:"index_tab__item js_tab",attrs:{href:""}},[t._v(t._s(s))])})),t._v(" "),i("div",{staticClass:"mod_playlist mod_slide"},[i("ul",{staticClass:"playlist__list slide__list",staticStyle:{left:"-1200px"},attrs:{id:"albumlist"}},t._l(t.playList,function(s){return i("li",{staticClass:"playlist__item slide__item"},[i("div",{staticClass:"playlist__item_box"},[i("div",{staticClass:"playlist__cover mod_cover"},[i("a",{staticClass:"js_album",attrs:{href:""}},[i("img",{staticClass:"playlist__pic",attrs:{src:s.src,alt:""}}),t._v(" "),i("i",{staticClass:"mod_cover__mask"}),t._v(" "),i("i",{staticClass:"mod_cover__icon_play js_play"})])]),t._v(" "),i("h4",{staticClass:"playlist__title"},[i("span",{staticClass:"playlist__title_txt"},[i("a",{staticClass:"js_album",attrs:{href:""}},[t._v(t._s(s.title))])]),t._v(" "),t._m(2,!0)]),t._v(" "),i("div",{staticClass:"playlist__author"},[i("a",{staticClass:"js_singer",attrs:{href:"#"}},[t._v(t._s(s.name))])])])])}))]),t._v(" "),t._m(3)]),t._v(" "),t._m(4)])},staticRenderFns:[function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"index__hd"},[i("h2",{staticClass:"index__tit"},[i("i",{staticClass:"index__tit_sprite"}),t._v(" "),i("i",{staticClass:"icon_txt"},[t._v("新碟首发")])]),t._v(" "),i("i",{staticClass:"index__line index__line--left"}),t._v(" "),i("i",{staticClass:"index__line index__line--right"})])},function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("a",{staticClass:"index__more index__more--white js_album_more",attrs:{href:"y.qq.com/portal/album_lib.html#stat=y_new.index.album.more"}},[t._v("\n 全部\n "),i("i",{staticClass:"icon_index_arrow"})])},function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("a",{staticClass:"btn_opera_menu js_albumlist_more",attrs:{href:"#"}},[i("span",{staticClass:"icon_txt"},[t._v("更多")])])},function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"mod_slide_switch js_switch"},[i("a",{staticClass:"js_jump slide_switch__item",attrs:{href:""}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"},[t._v("1")])]),t._v(" "),i("a",{staticClass:"js_jump slide_switch__item",attrs:{href:""}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"},[t._v("1")])]),t._v(" "),i("a",{staticClass:"js_jump slide_switch__item",attrs:{href:""}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"},[t._v("1")])]),t._v(" "),i("a",{staticClass:"js_jump slide_switch__item",attrs:{href:""}},[i("i",{staticClass:"slide_switch__bg"}),t._v(" "),i("i",{staticClass:"icon_txt"},[t._v("1")])])])},function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"mod_slide_action",attrs:{id:"mod_slide_action"}},[i("div",{staticClass:"slide_action slide_action--left"},[i("a",{staticClass:"slide_action__btn\n slide_action__btn--left js_jump",attrs:{href:"javascript:;"}},[i("i",{staticClass:"icon_txt"},[t._v("上一页")]),t._v(" "),i("i",{staticClass:"slide_action__arrow slide_action__arrow--left"})])]),t._v(" "),i("div",{staticClass:"slide_action slide_action--right"},[i("a",{staticClass:"slide_action__btn\n slide_action__btn--right js_jump",attrs:{href:"javascript:;"}},[i("i",{staticClass:"icon_txt"},[t._v("下一页")]),t._v(" "),i("i",{staticClass:"slide_action__arrow slide_action__arrow--right"})])])])}]}},function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("div",{staticClass:"mod_profile_unlogin"},[i("div",{staticClass:"section_inner"},[t._m(0),t._v(" "),i("div",{staticClass:"profile_unlogin__desc"}),t._v(" "),i("router-link",{staticClass:"mod_btn_green profile_unlogin__btn js_login",attrs:{to:"/"}},[t._v("立即登录")])],1)])},staticRenderFns:[function(){var t=this,s=t.$createElement,i=t._self._c||s;return i("h2",{staticClass:"profile_unlogin__tit"},[i("div",{staticClass:"icon_txt"},[t._v("听我喜欢听的歌")])])}]}},,function(t,s){},function(t,s){},function(t,s){},function(t,s){},function(t,s){},function(t,s){},function(t,s){},function(t,s){},function(t,s){},function(t,s){},function(t,s){},,,function(t,s,i){"use strict";Object.defineProperty(s,"__esModule",{value:!0});var a=i(44),_=i.n(a),e=i(43),l=i.n(e);s.default={name:"app",components:{vHead:_.a,vFoot:l.a}}},function(t,s,i){"use strict";Object.defineProperty(s,"__esModule",{value:!0});var a=i(37),_=i.n(a),e=i(36),l=i.n(e),n=i(39),c=i.n(n),o=i(38),r=i.n(o);s.default={data:function(){return{}},components:{"v-cd":_.a,"v-event":l.a,"v-toplist":c.a,"v-taolist":r.a}}},function(t,s,i){"use strict";Object.defineProperty(s,"__esModule",{value:!0}),s.default={}},function(t,s,i){"use strict";Object.defineProperty(s,"__esModule",{value:!0}),s.default={data:function(){return{navList:["内地","港台","欧美","韩国","日本"],playList:[{src:"https://y.gtimg.cn/music/photo_new/T002R300x300M000000mbhaG00NiAJ.jpg?max_age=2592000",title:"望",name:"张碧晨"},{src:"https://y.gtimg.cn/music/photo_new/T002R300x300M000000klxir01BBlq.jpg?max_age=2592000",title:"揭穿",name:"黄子韬"},{src:"https://y.gtimg.cn/music/photo_new/T002R300x300M0000004ScoT0orlN2.jpg?max_age=2592000",title:"金曲捞 第七期",name:"金曲捞"},{src:"https://y.gtimg.cn/music/photo_new/T002R300x300M000001B4oow41ntZj.jpg?max_age=2592000",title:"从心出发",name:"庄心妍"}]}},methods:{arrow:function(){for(var t=document.querySelectorAll(".slide_action__btn"),s=0;s",components:{App:e.a}})}],[81]); 2 | //# sourceMappingURL=app.0e8afee9829afd26b61d.js.map -------------------------------------------------------------------------------- /static/css/app.4f0d91c3db84edcc65ee711f11c45cc2.css: -------------------------------------------------------------------------------- 1 | *{margin:0;padding:0}body{min-width:1240px;overflow-y:scroll}a,body,button,input,select,textarea,th{color:#000;font-size:14px;line-height:1.5;font-family:poppin,PingFang SC,Tahoma,Arial,sans-serif}li{list-style:none}a{text-decoration:none}img{border:0 none}.mod_header{background-color:#fff;position:relative;z-index:4}.mod_header .section_inner{padding-top:90px}.section_inner{max-width:1200px;margin:0 auto;position:relative}.qqmusic_title{position:absolute;top:19px;left:0}.qqmusic_logo{width:190px;height:52px}.mod_top_nav{position:absolute;top:0;left:225px}.top_nav__item{float:left}.top_nav_link{display:block;padding:0 20px;line-height:90px;height:90px;text-align:center;font-size:18px}.top_nav_link:hover{color:#31c27c}.top_nav_link--current,.top_nav_link--current:hover{background-color:#31c27c;color:#fff}.mod_top_search{position:absolute;top:0;right:294px}.mod_search_input{border:1px solid #c9c9c9;padding:0 33px 0 15px;line-height:36px;height:36px;margin-top:26px;position:relative;border-radius:3px;background-color:#fff;transition:width .6s ease-out}.search_input__input{width:200px;height:36px;font-size:14px;transition:width .6s ease-out,visibility .6s ease-out 1ms}.search_input__btn,.search_input__input{outline:none;border:0 none;background:0 0}.search_input__btn{position:absolute;top:0;right:0;cursor:pointer;width:38px;height:35px;overflow:visible}.icon_search{position:absolute;top:50%;right:15px;margin-top:-8px;width:16px;height:16px;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40);background-position:0 -40px}.icon_search:hover{background-position:0 -60px}.icon_txt{font:0/0 a}.header__opt{position:absolute;top:0;right:-56px}.header__opt,.mod_top_login{height:90px;line-height:90px}.mod_top_login{font-size:0}.top_login__link{position:relative;font-size:16px;float:left;width:38px;margin-right:11px;text-align:center}.js_login{margin-top:30px}.js_login:hover{color:#31c27c}.top_login__btn_vip{line-height:39px;margin-top:24px;padding:0 11px;margin-left:10px;margin-right:0;font-size:13px}.mod_btn_green{border:1px solid #31c27c;background-color:#31c27c;color:#fff}.mod_btn_green:hover{background-color:#2caf6f}.mod_btn{border:1px solid #c9c9c9;color:#333}.mod_btn:hover{background-color:#ededed}.mod_btn,.mod_btn_green{border-radius:2px;height:38px;display:inline-block;box-sizing:border-box;overflow:hidden}.mod_top_subnav{height:51px;line-height:51px;border-top:1px solid #f2f2f2;padding-left:256px}.top_subnav__item{float:left;font-size:15px;color:#c1c1c1;margin-right:56px}.top_subnav__link{cursor:auto}.top_subnav__link:hover{color:#31c27c}.mod_search_other{max-height:0;visibility:hidden;transition:max-height .6s ease-out,visibility 1ms .6s;overflow:hidden;position:absolute;top:63px;left:0;background:#fff;width:248px;border:1px solid #c9c9c9;z-index:8;text-align:left;font-size:14px;line-height:36px}.drop{visibility:visible;max-height:300px;transition:max-height .6s ease-out}.search_hot{padding:5px 0}.search_hot__link{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:15px;padding-right:15px}.search_hot__link .search_hot__number{color:#ff4222;float:left;width:18px}.search_hot__link .search_hot__name{float:left;color:#333;max-width:140px;overflow:hidden;white-space:mowrap;text-overflow:ellipsis}.search_hot__link .search_hot__listen{float:right;color:#999;font-size:12px}.mod_index[data-v-70eb005c]{position:relative}.mod_index .section_inner[data-v-70eb005c]{z-index:2;overflow:hidden;max-width:1200px;margin:0 auto;position:relative}.mod_index .section_inner .index__hd[data-v-70eb005c]{position:relative;width:490px;height:48px;padding-top:80px;margin:0 auto 50px}.mod_index .section_inner .index__hd .index__tit[data-v-70eb005c]{font-weight:400;text-align:center}.mod_index .section_inner .index__hd .index__tit .index__tit_sprite[data-v-70eb005c]{width:193px;display:block;margin:0 auto;height:48px;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/index_tit.png?max_age=2592000&v=ea6515ebb82f7609712c02805e2abe9c)}.index__line[data-v-70eb005c]{position:absolute;top:104px;width:72px;height:1px;opacity:.1}.index__line--left[data-v-70eb005c]{left:0}.index__line--right[data-v-70eb005c]{right:0}.mod_slide_switch[data-v-70eb005c]{width:100%;text-align:center;font-size:0}.mod_slide_switch .slide_switch__item[data-v-70eb005c]{display:inline-block;width:30px;height:2px;padding:10px 0;margin:0 5px}.mod_slide_switch .slide_switch__item .slide_switch__bg[data-v-70eb005c]{background:hsla(0,0%,8%,.3);display:block;width:100%;height:1px}.index__more[data-v-70eb005c]{position:absolute;right:0}.index__more[data-v-70eb005c]:hover{color:#31c27c}.index__more--white[data-v-70eb005c]{font-size:15px;color:#fff}.index__more--white .icon_index_arrow[data-v-70eb005c]{background-position:-40px -260px;display:inline-block;width:7px;height:12px;margin-left:6px}.index__more--white .icon_index_arrow[data-v-70eb005c],.index__more--white .icon_index_arrow[data-v-70eb005c]:hover{background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40)}.index__more--white .icon_index_arrow[data-v-70eb005c]:hover{background-position:0 0}.mod_cover[data-v-70eb005c]{opacity:.9;zoom:1}.mod_cover:hover>.playlist__pic[data-v-70eb005c],.mod_cover:hover>.toplist__bg[data-v-70eb005c]{-webkit-transform:scale(1.07);transform:scale(1.07)}.mod_cover:hover>.mod_cover__mask[data-v-70eb005c]{opacity:.4}.mod_cover:hover>.mod_cover__icon_play[data-v-70eb005c]{-webkit-transform:scale(1);transform:scale(1);opacity:1}.mod_cover:hover>.toplist__line[data-v-70eb005c]{opacity:0}.mod_cover:hover+.playlist__title>.btn_opera_menu[data-v-70eb005c]{transition:.5s ease-in;opacity:1}.mod_cover__mask[data-v-70eb005c]{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;transition:opacity .5s}.mod_cover__icon_play[data-v-70eb005c]{background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/cover_play.png?max_age=2592000&v=fa72193fd8d5000e90837380d6be93ea);position:absolute;top:50%;left:50%;margin:-35px;width:70px;height:70px;opacity:0;-webkit-transform:scale(.7);transform:scale(.7);transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform;transition-duration:.5s;zoom:1}.footer[data-v-70eb005c]{color:#999;background-color:#333;clear:both;height:450px}.footer a[data-v-70eb005c]{color:#999}.footer a[data-v-70eb005c]:hover{color:#31c27c}.footer .section_inner[data-v-70eb005c]{max-width:1200px;margin:0 auto;position:relative}.footer .section_inner .footer_tit[data-v-70eb005c]{font-size:15px;font-weight:400;padding:80px 0 46px}.footer .section_inner .icon_qm_android[data-v-70eb005c],.footer .section_inner .icon_qm_iphone[data-v-70eb005c],.footer .section_inner .icon_qm_kg[data-v-70eb005c],.footer .section_inner .icon_qm_mac[data-v-70eb005c],.footer .section_inner .icon_qm_pc[data-v-70eb005c],.footer .section_inner .icon_qm_qp[data-v-70eb005c],.footer .section_inner .icon_qm_ss[data-v-70eb005c]{display:block;margin:0 29px 12px;height:48px;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/footer.png?max_age=2592000&v=4739050c9bfc2db438241313ce65f4bf)}.footer .footer_info[data-v-70eb005c]{overflow:hidden;border-bottom:1px solid #353535;position:relative}.footer_download[data-v-70eb005c]{position:absolute;top:0;left:10px}.footer_download .footer_download_list[data-v-70eb005c]{margin-left:-29px}.footer_download .footer_download_list .footer_download_list__item[data-v-70eb005c]{float:left;text-align:center;position:relative}.footer_download .footer_download_list .footer_download_list__item .icon_qm_pc[data-v-70eb005c]{width:37px;background-position:-2px 0}.footer_download .footer_download_list .footer_download_list__item .icon_qm_pc[data-v-70eb005c]:hover{background-position:-2px -50px}.footer_download .footer_download_list .footer_download_list__item .icon_qm_mac[data-v-70eb005c]{width:46px;background-position:-92px 0}.footer_download .footer_download_list .footer_download_list__item .icon_qm_mac[data-v-70eb005c]:hover{background-position:-92px -50px}.footer_download .footer_download_list .footer_download_list__item .icon_qm_android[data-v-70eb005c]{width:37px;background-position:-190px 0}.footer_download .footer_download_list .footer_download_list__item .icon_qm_android[data-v-70eb005c]:hover{background-position:-190px -50px}.footer_download .footer_download_list .footer_download_list__item .icon_qm_iphone[data-v-70eb005c]{width:34px;background-position:-279px 0}.footer_download .footer_download_list .footer_download_list__item .icon_qm_iphone[data-v-70eb005c]:hover{background-position:-279px -50px}.footer_product[data-v-70eb005c]{position:absolute;top:0;left:476px;width:304px}.footer_product .footer_product_list[data-v-70eb005c]{margin-left:-25px}.footer_product .footer_product_list .footer_product_list__item[data-v-70eb005c]{float:left;margin-bottom:18px;text-indent:25px;margin-right:5px}.footer_product .footer_product_list .footer_product_list__item--pic[data-v-70eb005c]{text-align:center;position:relative;margin-right:0;text-indent:0}.footer_product .footer_product_list .footer_product_list__item--pic .icon_qm_kg[data-v-70eb005c]{width:41px;background-position:-370px 0}.footer_product .footer_product_list .footer_product_list__item--pic .icon_qm_kg[data-v-70eb005c]:hover{background-position:-370px 47px}.footer_product .footer_product_list .footer_product_list__item--pic .icon_qm_ss[data-v-70eb005c]{width:37px;background-position:-463px 0}.footer_product .footer_product_list .footer_product_list__item--pic .icon_qm_ss[data-v-70eb005c]:hover{background-position:-463px 47px}.footer_product .footer_product_list .footer_product_list__item--pic .icon_qm_qp[data-v-70eb005c]{margin-right:23px;width:40px;background-position:-563px 0}.footer_product .footer_product_list .footer_product_list__item--pic .icon_qm_qp[data-v-70eb005c]:hover{background-position:-563px 47px}.footer_link[data-v-70eb005c]{float:right;width:300px;padding-bottom:57px}.footer_link .footer_link_list__item[data-v-70eb005c]{float:left;min-width:100px;margin-bottom:12px}.footer_copyright[data-v-70eb005c]{text-align:center;line-height:28px;padding:24px 0}.mod_index--new[data-v-a1903c04]{height:734px}.mod_index--new .index__hd[data-v-a1903c04]{padding-top:80px;margin-bottom:43px;position:relative;width:490px;height:48px;margin:0 auto 50px}.mod_index--new .index__hd .index__tit[data-v-a1903c04]{font-weight:400;text-align:center}.mod_index--new .index__hd .index__tit .index__tit_sprite[data-v-a1903c04]{width:193px;background-position:0 0;display:block;margin:0 auto;height:48px;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/index_tit.png?max_age=2592000&v=ea6515ebb82f7609712c02805e2abe9c)}.mod_index--new .index__hd .index__tit .icon_txt[data-v-a1903c04]{font:0/0 a}.mod_index--new .index__hd .index__line[data-v-a1903c04]{top:104px;position:absolute;width:72px;height:1px;opacity:.2;background-color:#fff}.mod_index--new .index__hd .index__line--left[data-v-a1903c04]{left:0}.mod_index--new .index__hd .index__line--right[data-v-a1903c04]{right:0}.mod_index[data-v-a1903c04]{position:relative}.mod_index .section_inner[data-v-a1903c04]{z-index:2;overflow:hidden}.mod_index .section_inner .index__more[data-v-a1903c04]{position:absolute;right:0;top:auto}.mod_index .section_inner .index__more[data-v-a1903c04]:hover{color:#31c27c}.mod_index .section_inner .index__more--white[data-v-a1903c04]{font-size:15px;color:#fff}.mod_index .section_inner .index__more--white .icon_index_arrow[data-v-a1903c04]{background-position:-40px -260px;display:inline-block;width:7px;height:12px;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40);margin-left:6px}.mod_index .section_inner .index__more--white .icon_index_arrow[data-v-a1903c04]:hover{background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40);background-position:0 0}.mod_index .section_inner .mod_index_tab[data-v-a1903c04]{height:50px;text-align:center;font-size:0}.mod_index .section_inner .mod_index_tab .index_tab__item[data-v-a1903c04]{display:inline-block;font-size:16px;margin:0 35px;color:#fff;opacity:.5}.mod_index .section_inner .mod_index_tab .index_tab__item[data-v-a1903c04]:hover{opacity:1}.mod_playlist[data-v-a1903c04]{text-align:center}.mod_playlist .playlist__item[data-v-a1903c04]{width:25%;background:rgba(0,0,0,.8);font-size:16px;padding-bottom:0;float:left;overflow:hidden}.mod_playlist .playlist__item[data-v-a1903c04]:hover{background-color:#31c27c}.mod_playlist .playlist__item:hover+.playlist__item_box>.playlist__title>.btn_opera_menu[data-v-a1903c04]{transition:.5s ease-in;opacity:1}.mod_playlist .playlist__item_box[data-v-a1903c04]{height:auto;margin-right:0;position:relative}.mod_playlist .playlist__item_box .playlist__title[data-v-a1903c04]{display:inline-block;position:relative;max-width:75%;padding:0 26px;height:22px;margin-bottom:0;overflow:hidden}.mod_playlist .playlist__item_box .playlist__title .playlist__title_txt[data-v-a1903c04]{float:none;display:inline-block;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:22px}.mod_playlist .playlist__item_box .playlist__title .playlist__title_txt a[data-v-a1903c04]{color:#fff}.mod_playlist .playlist__item_box .playlist__title .btn_opera_menu[data-v-a1903c04]{bottom:23px;top:2px;display:inline-block;background-position:-180px -100px;right:0;position:absolute;width:20px;height:20px;opacity:0;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40)}.mod_playlist .playlist__item_box .playlist__author[data-v-a1903c04]{margin-bottom:32px;line-height:18px}.mod_playlist .playlist__item_box .playlist__author a[data-v-a1903c04]{color:#c1e9d5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:22px}.mod_playlist .mod_cover[data-v-a1903c04]{opacity:.9}.mod_playlist .mod_cover:hover>.js_album>.playlist__pic[data-v-a1903c04]{-webkit-transform:scale(1.07);transform:scale(1.07)}.mod_playlist .mod_cover:hover>.js_album>.mod_cover__mask[data-v-a1903c04]{opacity:.4}.mod_playlist .mod_cover:hover>.js_album>.mod_cover__icon_play[data-v-a1903c04]{-webkit-transform:scale(1);transform:scale(1);opacity:1}.mod_playlist .mod_cover:hover+.playlist__title>.btn_opera_menu[data-v-a1903c04]{transition:.5s ease-in;opacity:1}.mod_playlist .mod_cover:hover+.playlist__author>.js_singer[data-v-a1903c04]{color:#fff}.mod_playlist .playlist__cover[data-v-a1903c04]{margin-bottom:32px;position:relative;display:block;overflow:hidden;padding-top:100%}.mod_playlist .playlist__cover .playlist__pic[data-v-a1903c04]{position:absolute;top:0;left:0;width:100%;-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transition:-webkit-transform .75s;transition:transform .75s;transition:transform .75s,-webkit-transform .75s}.mod_playlist .playlist__cover .mod_cover__mask[data-v-a1903c04]{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;transition:opacity .5s}.mod_playlist .playlist__cover .mod_cover__icon_play[data-v-a1903c04]{background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/cover_play.png?max_age=2592000&v=fa72193fd8d5000e90837380d6be93ea);position:absolute;top:50%;left:50%;margin:-35px;width:70px;height:70px;opacity:0;-webkit-transform:scale(.7);transform:scale(.7);transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform;transition-duration:.5s;zoom:1}.mod_slide[data-v-a1903c04]{overflow:hidden;margin-bottom:25px}.slide__item[data-v-a1903c04]{display:inline-block}.mod_slide_action[data-v-a1903c04]{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.mod_slide_action .slide_action[data-v-a1903c04]{position:absolute;top:0;width:50%;height:100%}.mod_slide_action .slide_action--left[data-v-a1903c04]{left:0}.mod_slide_action .slide_action__btn--left[data-v-a1903c04]{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mod_slide_action .slide_action__btn--left .slide_action__arrow--left[data-v-a1903c04]{left:28px;background-position:-180px 0}.mod_slide_action .slide_action--right[data-v-a1903c04]{right:0}.mod_slide_action .slide_action__btn--right[data-v-a1903c04]{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.mod_slide_action .slide_action__btn--right .slide_action__arrow--right[data-v-a1903c04]{right:28px;background-position:-160px 0}.mod_slide_action .slide_action__btn[data-v-a1903c04]{position:absolute;top:50%;margin-top:-54px;width:72px;height:108px;background:hsla(0,0%,60%,.4);transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform;transition-duration:.5s;z-index:2}.mod_slide_action .slide_action__btn[data-v-a1903c04]:hover{transition:.6s ease-out;background:#31c27c}.mod_slide_action .slide_action__arrow[data-v-a1903c04]{position:absolute;top:50%;margin-top:-9px;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40);width:11px;height:18px}.mod_slide_switch[data-v-a1903c04]{bottom:24px;width:100%;text-align:center;font-size:0}.mod_slide_switch .slide_switch__item[data-v-a1903c04]{display:inline-block;width:30px;height:2px;padding:10px 0;margin:0 5px}.mod_slide_switch .slide_switch__item .slide_switch__bg[data-v-a1903c04]{display:block;width:100%;background:hsla(0,0%,100%,.3);height:.5px}.mod_slide_switch .slide_switch__item .slide_switch__bg[data-v-a1903c04]:hover{color:#fff}.slide_switch__item--current .slide_switch__bg[data-v-a1903c04],.slide_switch__item:hover .slide_switch__bg[data-v-a1903c04]{-webkit-filter:none;filter:none;background-color:#fff}.mod_index--event .section_inner[data-v-1aced3d2]{height:610px}.index__tit_sprite[data-v-1aced3d2]{background-position:0 -240px}.index__line[data-v-1aced3d2]{background-color:#000}.mod_slide[data-v-1aced3d2]{overflow:hidden;margin-bottom:25px}.mod_slide .event_list[data-v-1aced3d2]{width:100%;height:325px}.mod_slide .slide__list[data-v-1aced3d2]{position:relative;font-size:0}.mod_slide .slide__list .event_list__item[data-v-1aced3d2]{position:absolute;top:0;left:0;width:751px;height:300px;opacity:.8;z-index:1;transition:all .3s ease-out}.mod_slide .slide__list .slide__item[data-v-1aced3d2]{display:inline-block}.event_list__pic[data-v-1aced3d2]{width:100%}.mod_index[data-v-1aced3d2]{position:relative}.mod_index .section_inner[data-v-1aced3d2]{z-index:2;overflow:hidden;max-width:1200px;margin:0 auto;position:relative}.mod_index .section_inner .index__hd[data-v-1aced3d2]{position:relative;width:490px;height:48px;padding-top:80px;margin:0 auto 50px}.mod_index .section_inner .index__hd .index__tit[data-v-1aced3d2]{font-weight:400;text-align:center}.mod_index .section_inner .index__hd .index__tit .index__tit_sprite[data-v-1aced3d2]{width:193px;display:block;margin:0 auto;height:48px;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/index_tit.png?max_age=2592000&v=ea6515ebb82f7609712c02805e2abe9c)}.index__line[data-v-1aced3d2]{position:absolute;top:104px;width:72px;height:1px;opacity:.1}.index__line--left[data-v-1aced3d2]{left:0}.index__line--right[data-v-1aced3d2]{right:0}.mod_slide_switch[data-v-1aced3d2]{width:100%;text-align:center;font-size:0}.mod_slide_switch .slide_switch__item[data-v-1aced3d2]{display:inline-block;width:30px;height:2px;padding:10px 0;margin:0 5px}.mod_slide_switch .slide_switch__item .slide_switch__bg[data-v-1aced3d2]{background:hsla(0,0%,8%,.3);display:block;width:100%;height:1px}.index__more[data-v-1aced3d2]{position:absolute;right:0}.index__more[data-v-1aced3d2]:hover{color:#31c27c}.index__more--white[data-v-1aced3d2]{font-size:15px;color:#fff}.index__more--white .icon_index_arrow[data-v-1aced3d2]{background-position:-40px -260px;display:inline-block;width:7px;height:12px;margin-left:6px}.index__more--white .icon_index_arrow[data-v-1aced3d2],.index__more--white .icon_index_arrow[data-v-1aced3d2]:hover{background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40)}.index__more--white .icon_index_arrow[data-v-1aced3d2]:hover{background-position:0 0}.mod_cover[data-v-1aced3d2]{opacity:.9;zoom:1}.mod_cover:hover>.playlist__pic[data-v-1aced3d2],.mod_cover:hover>.toplist__bg[data-v-1aced3d2]{-webkit-transform:scale(1.07);transform:scale(1.07)}.mod_cover:hover>.mod_cover__mask[data-v-1aced3d2]{opacity:.4}.mod_cover:hover>.mod_cover__icon_play[data-v-1aced3d2]{-webkit-transform:scale(1);transform:scale(1);opacity:1}.mod_cover:hover>.toplist__line[data-v-1aced3d2]{opacity:0}.mod_cover:hover+.playlist__title>.btn_opera_menu[data-v-1aced3d2]{transition:.5s ease-in;opacity:1}.mod_cover__mask[data-v-1aced3d2]{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;transition:opacity .5s}.mod_cover__icon_play[data-v-1aced3d2]{background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/cover_play.png?max_age=2592000&v=fa72193fd8d5000e90837380d6be93ea);position:absolute;top:50%;left:50%;margin:-35px;width:70px;height:70px;opacity:0;-webkit-transform:scale(.7);transform:scale(.7);transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform;transition-duration:.5s;zoom:1}.mod_index--top[data-v-7cd64d50]{background:#121212 url(https://y.gtimg.cn/mediastyle/yqq/img/bg_index_top2.jpg) 50% 0 no-repeat}.mod_index--top .section_inner[data-v-7cd64d50]{height:830px}.mod_index--top .index__tit_sprite[data-v-7cd64d50]{width:144px;background-position:0 -120px}.index__line[data-v-7cd64d50]{background-color:#fff}.toplist__item[data-v-7cd64d50]{position:relative;float:left;z-index:2;width:25%;height:567px;overflow:hidden}.toplist__item .toplist__bg[data-v-7cd64d50]{-webkit-transform:scale(1);transform:scale(1);transition:-webkit-transform .75s;transition:transform .75s;transition:transform .75s,-webkit-transform .75s;position:absolute;top:0;left:0;width:100%;height:567px;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/bg_index_top.jpg?max_age=2592000&v=2591d4829162dfda6b9112c771edda86)}.toplist__item .mod_cover__icon_play[data-v-7cd64d50]{top:214px}.toplist__item .toplist__line[data-v-7cd64d50]{position:absolute;left:50%;top:215px;margin-left:-31px;width:62px;height:2px;background:hsla(0,0%,100%,.3)}.toplist__item .toplist__hd[data-v-7cd64d50]{position:absolute;top:80px;left:50%;margin-left:-100px;width:200px;height:110px;text-align:center}.toplist__item .toplist__hd .toplist__tit_top[data-v-7cd64d50]{display:block;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/index_tit.png?max_age=2592000&v=ea6515ebb82f7609712c02805e2abe9c);margin-left:auto;margin-right:auto;width:66px;height:24px;background-position:0 -300px;margin-bottom:8px}.toplist__item .toplist__hd .toplist__tit_pop[data-v-7cd64d50]{height:36px;line-height:1;font-size:36px;color:#fff;font-weight:400}.toplist__songlist[data-v-7cd64d50]{position:absolute;top:282px;left:50%;margin-left:-90px;width:180px;white-space:nowrap}.toplist__songlist .toplist__song[data-v-7cd64d50]{position:relative;padding-left:15px;margin-bottom:10px;color:#fff}.toplist__songlist .toplist__song .toplist__number[data-v-7cd64d50]{position:absolute;top:0;left:0}.toplist__songlist .toplist__song .toplist__songname[data-v-7cd64d50]{overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.toplist__songlist .toplist__song .toplist__songname .js_song[data-v-7cd64d50]{color:#fff;font-size:16px}.toplist__songlist .toplist__song .toplist__artist[data-v-7cd64d50]{font-size:13px;opacity:.5;overflow:hidden;text-overflow:ellipsis}.toplist__songlist .toplist__song .toplist__artist .js_singers[data-v-7cd64d50]{color:#fff}.index__more[data-v-7cd64d50]{top:145px}.mod_index[data-v-7cd64d50]{position:relative}.mod_index .section_inner[data-v-7cd64d50]{z-index:2;overflow:hidden;max-width:1200px;margin:0 auto;position:relative}.mod_index .section_inner .index__hd[data-v-7cd64d50]{position:relative;width:490px;height:48px;padding-top:80px;margin:0 auto 50px}.mod_index .section_inner .index__hd .index__tit[data-v-7cd64d50]{font-weight:400;text-align:center}.mod_index .section_inner .index__hd .index__tit .index__tit_sprite[data-v-7cd64d50]{width:193px;display:block;margin:0 auto;height:48px;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/index_tit.png?max_age=2592000&v=ea6515ebb82f7609712c02805e2abe9c)}.index__line[data-v-7cd64d50]{position:absolute;top:104px;width:72px;height:1px;opacity:.1}.index__line--left[data-v-7cd64d50]{left:0}.index__line--right[data-v-7cd64d50]{right:0}.mod_slide_switch[data-v-7cd64d50]{width:100%;text-align:center;font-size:0}.mod_slide_switch .slide_switch__item[data-v-7cd64d50]{display:inline-block;width:30px;height:2px;padding:10px 0;margin:0 5px}.mod_slide_switch .slide_switch__item .slide_switch__bg[data-v-7cd64d50]{background:hsla(0,0%,8%,.3);display:block;width:100%;height:1px}.index__more[data-v-7cd64d50]{position:absolute;right:0}.index__more[data-v-7cd64d50]:hover{color:#31c27c}.index__more--white[data-v-7cd64d50]{font-size:15px;color:#fff}.index__more--white .icon_index_arrow[data-v-7cd64d50]{background-position:-40px -260px;display:inline-block;width:7px;height:12px;margin-left:6px}.index__more--white .icon_index_arrow[data-v-7cd64d50],.index__more--white .icon_index_arrow[data-v-7cd64d50]:hover{background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40)}.index__more--white .icon_index_arrow[data-v-7cd64d50]:hover{background-position:0 0}.mod_cover[data-v-7cd64d50]{opacity:.9;zoom:1}.mod_cover:hover>.playlist__pic[data-v-7cd64d50],.mod_cover:hover>.toplist__bg[data-v-7cd64d50]{-webkit-transform:scale(1.07);transform:scale(1.07)}.mod_cover:hover>.mod_cover__mask[data-v-7cd64d50]{opacity:.4}.mod_cover:hover>.mod_cover__icon_play[data-v-7cd64d50]{-webkit-transform:scale(1);transform:scale(1);opacity:1}.mod_cover:hover>.toplist__line[data-v-7cd64d50]{opacity:0}.mod_cover:hover+.playlist__title>.btn_opera_menu[data-v-7cd64d50]{transition:.5s ease-in;opacity:1}.mod_cover__mask[data-v-7cd64d50]{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;transition:opacity .5s}.mod_cover__icon_play[data-v-7cd64d50]{background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/cover_play.png?max_age=2592000&v=fa72193fd8d5000e90837380d6be93ea);position:absolute;top:50%;left:50%;margin:-35px;width:70px;height:70px;opacity:0;-webkit-transform:scale(.7);transform:scale(.7);transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform;transition-duration:.5s;zoom:1}.mod_index--new[data-v-6ed987bb]{height:734px}.mod_index--new .index__hd[data-v-6ed987bb]{padding-top:80px;margin-bottom:43px;position:relative;width:490px;height:48px;margin:0 auto 50px}.mod_index--new .index__hd .index__tit[data-v-6ed987bb]{font-weight:400;text-align:center}.mod_index--new .index__hd .index__tit .index__tit_sprite[data-v-6ed987bb]{width:193px;background-position:0 0;display:block;margin:0 auto;height:48px;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/index_tit.png?max_age=2592000&v=ea6515ebb82f7609712c02805e2abe9c)}.mod_index--new .index__hd .index__tit .icon_txt[data-v-6ed987bb]{font:0/0 a}.mod_index--new .index__hd .index__line[data-v-6ed987bb]{top:104px;position:absolute;width:72px;height:1px;opacity:.2;background-color:#fff}.mod_index--new .index__hd .index__line--left[data-v-6ed987bb]{left:0}.mod_index--new .index__hd .index__line--right[data-v-6ed987bb]{right:0}.mod_index[data-v-6ed987bb]{position:relative}.mod_index .section_inner[data-v-6ed987bb]{z-index:2;overflow:hidden}.mod_index .section_inner .index__more[data-v-6ed987bb]{position:absolute;right:0;top:auto}.mod_index .section_inner .index__more[data-v-6ed987bb]:hover{color:#31c27c}.mod_index .section_inner .index__more--white[data-v-6ed987bb]{font-size:15px;color:#fff}.mod_index .section_inner .index__more--white .icon_index_arrow[data-v-6ed987bb]{background-position:-40px -260px;display:inline-block;width:7px;height:12px;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40);margin-left:6px}.mod_index .section_inner .index__more--white .icon_index_arrow[data-v-6ed987bb]:hover{background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40);background-position:0 0}.mod_index .section_inner .mod_index_tab[data-v-6ed987bb]{height:50px;text-align:center;font-size:0}.mod_index .section_inner .mod_index_tab .index_tab__item[data-v-6ed987bb]{display:inline-block;font-size:16px;margin:0 35px;color:#fff;opacity:.5}.mod_index .section_inner .mod_index_tab .index_tab__item[data-v-6ed987bb]:hover{opacity:1}.mod_playlist[data-v-6ed987bb]{text-align:center}.mod_playlist .playlist__item[data-v-6ed987bb]{width:25%;background:rgba(0,0,0,.8);font-size:16px;padding-bottom:0;float:left;overflow:hidden}.mod_playlist .playlist__item[data-v-6ed987bb]:hover{background-color:#31c27c}.mod_playlist .playlist__item:hover+.playlist__item_box>.playlist__title>.btn_opera_menu[data-v-6ed987bb]{transition:.5s ease-in;opacity:1}.mod_playlist .playlist__item_box[data-v-6ed987bb]{height:auto;margin-right:0;position:relative}.mod_playlist .playlist__item_box .playlist__title[data-v-6ed987bb]{display:inline-block;position:relative;max-width:75%;padding:0 26px;height:22px;margin-bottom:0;overflow:hidden}.mod_playlist .playlist__item_box .playlist__title .playlist__title_txt[data-v-6ed987bb]{float:none;display:inline-block;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:22px}.mod_playlist .playlist__item_box .playlist__title .playlist__title_txt a[data-v-6ed987bb]{color:#fff}.mod_playlist .playlist__item_box .playlist__title .btn_opera_menu[data-v-6ed987bb]{bottom:23px;top:2px;display:inline-block;background-position:-180px -100px;right:0;position:absolute;width:20px;height:20px;opacity:0;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40)}.mod_playlist .playlist__item_box .playlist__author[data-v-6ed987bb]{margin-bottom:32px;line-height:18px}.mod_playlist .playlist__item_box .playlist__author a[data-v-6ed987bb]{color:#c1e9d5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:22px}.mod_playlist .mod_cover[data-v-6ed987bb]{opacity:.9}.mod_playlist .mod_cover:hover>.js_album>.playlist__pic[data-v-6ed987bb]{-webkit-transform:scale(1.07);transform:scale(1.07)}.mod_playlist .mod_cover:hover>.js_album>.mod_cover__mask[data-v-6ed987bb]{opacity:.4}.mod_playlist .mod_cover:hover>.js_album>.mod_cover__icon_play[data-v-6ed987bb]{-webkit-transform:scale(1);transform:scale(1);opacity:1}.mod_playlist .mod_cover:hover+.playlist__title>.btn_opera_menu[data-v-6ed987bb]{transition:.5s ease-in;opacity:1}.mod_playlist .mod_cover:hover+.playlist__author>.js_singer[data-v-6ed987bb]{color:#fff}.mod_playlist .playlist__cover[data-v-6ed987bb]{margin-bottom:32px;position:relative;display:block;overflow:hidden;padding-top:100%}.mod_playlist .playlist__cover .playlist__pic[data-v-6ed987bb]{position:absolute;top:0;left:0;width:100%;-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);transition:-webkit-transform .75s;transition:transform .75s;transition:transform .75s,-webkit-transform .75s}.mod_playlist .playlist__cover .mod_cover__mask[data-v-6ed987bb]{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;transition:opacity .5s}.mod_playlist .playlist__cover .mod_cover__icon_play[data-v-6ed987bb]{background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/cover_play.png?max_age=2592000&v=fa72193fd8d5000e90837380d6be93ea);position:absolute;top:50%;left:50%;margin:-35px;width:70px;height:70px;opacity:0;-webkit-transform:scale(.7);transform:scale(.7);transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform;transition-duration:.5s;zoom:1}.mod_slide[data-v-6ed987bb]{overflow:hidden;margin-bottom:25px}.slide__item[data-v-6ed987bb]{display:inline-block}.mod_slide_action[data-v-6ed987bb]{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.mod_slide_action .slide_action[data-v-6ed987bb]{position:absolute;top:0;width:50%;height:100%}.mod_slide_action .slide_action--left[data-v-6ed987bb]{left:0}.mod_slide_action .slide_action__btn--left[data-v-6ed987bb]{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mod_slide_action .slide_action__btn--left .slide_action__arrow--left[data-v-6ed987bb]{left:28px;background-position:-180px 0}.mod_slide_action .slide_action--right[data-v-6ed987bb]{right:0}.mod_slide_action .slide_action__btn--right[data-v-6ed987bb]{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.mod_slide_action .slide_action__btn--right .slide_action__arrow--right[data-v-6ed987bb]{right:28px;background-position:-160px 0}.mod_slide_action .slide_action__btn[data-v-6ed987bb]{position:absolute;top:50%;margin-top:-54px;width:72px;height:108px;background:hsla(0,0%,60%,.4);transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform;transition-duration:.5s;z-index:2}.mod_slide_action .slide_action__btn[data-v-6ed987bb]:hover{transition:.6s ease-out;background:#31c27c}.mod_slide_action .slide_action__arrow[data-v-6ed987bb]{position:absolute;top:50%;margin-top:-9px;background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/icon_sprite.png?max_age=2592000&v=3139b9b10089fcb0bf3725ac66b82a40);width:11px;height:18px}.mod_slide_switch[data-v-6ed987bb]{bottom:24px;width:100%;text-align:center;font-size:0}.mod_slide_switch .slide_switch__item[data-v-6ed987bb]{display:inline-block;width:30px;height:2px;padding:10px 0;margin:0 5px}.mod_slide_switch .slide_switch__item .slide_switch__bg[data-v-6ed987bb]{display:block;width:100%;background:hsla(0,0%,100%,.3);height:.5px}.mod_slide_switch .slide_switch__item .slide_switch__bg[data-v-6ed987bb]:hover{color:#fff}.slide_switch__item--current .slide_switch__bg[data-v-6ed987bb],.slide_switch__item:hover .slide_switch__bg[data-v-6ed987bb]{-webkit-filter:none;filter:none;background-color:#fff}@media screen and (max-height:800px){.mod_profile_unlogin{height:622px;background:url(https://y.gtimg.cn/mediastyle/yqq/img/bg_profile_unlogin.jpg) 50% no-repeat;background-size:cover;overflow:hidden}}.play .profile_unlogin__btn,.play .profile_unlogin__desc,.play .profile_unlogin__tit{opacity:1}.profile_unlogin__btn,.profile_unlogin__desc,.profile_unlogin__tit{-webkit-transform:all 1s;transform:all 1s}.profile_unlogin__tit{margin-top:210px;width:735px;height:64px;background-position:0 0;margin-left:auto;margin-right:auto}.profile_unlogin__desc,.profile_unlogin__tit{background-image:url(https://y.gtimg.cn/mediastyle/yqq/img/profile_tit.png?max_age=2592000&v=70fa6a47cc15d1acecae39dda6821428)}.profile_unlogin__desc{width:345px;height:30px;background-position:0 -70px;margin:30px auto 36px}.profile_unlogin__btn{line-height:49px;display:block;font-size:20px;height:48px;width:128px;text-align:center;margin:0 auto;border:1px solid #31c27c;background-color:#31c27c}.profile_unlogin__btn:hover{color:#fff}.main-bg[data-v-27564d40]{background:url(https://y.gtimg.cn/mediastyle/yqq/img/bg_detail.jpg) no-repeat}.main[data-v-27564d40]{z-index:2;max-width:1200px;margin:0 auto}.mod_data[data-v-27564d40]{position:relative;height:250px;padding-left:305px;margin-bottom:35px}.mod_data .avatar[data-v-27564d40]{position:absolute;left:0;top:25px;width:200px;height:200px;border-radius:30px}.mod_data .data__cont[data-v-27564d40]{margin-left:20px}.mod_data .data__cont h1[data-v-27564d40]{font-size:40px;padding-top:30px;font-weight:300}.part_hd[data-v-27564d40]{height:54px;line-height:54px}.part_hd h2[data-v-27564d40]{font-size:25px;font-weight:400;float:left}.part_hd .part_more[data-v-27564d40]{float:right;line-height:54px}.part_hd .part_more[data-v-27564d40]:hover{color:#2eb674}.mod_songlist[data-v-27564d40]{font-size:16px;color:#000;overflow:hidden}.mod_songlist .songlist__header[data-v-27564d40]{height:50px;line-height:50px;color:#999;padding-left:30px;padding-right:100px;background-color:#fbfbfd}.mod_songlist .songlist__header_name[data-v-27564d40]{float:left;width:48%;padding-left:15px;position:relative;white-space:normal}.mod_songlist .songlist__album[data-v-27564d40],.mod_songlist .songlist__artist[data-v-27564d40],.mod_songlist .songlist__header_album[data-v-27564d40],.mod_songlist .songlist__header_author[data-v-27564d40]{float:left;padding-left:20px;width:24%}.mod_songlist .songlist__header_time[data-v-27564d40],.mod_songlist .songlist__time[data-v-27564d40]{float:right;top:0;right:38px;width:50px}.songlist__list[data-v-27564d40]{position:relative}.songlist__list li[data-v-27564d40]{height:50px;line-height:50px}.songlist__list li[data-v-27564d40]:nth-child(2n){background-color:#fbfbfd}.songlist__list .mod_list_menu[data-v-27564d40]{position:absolute;top:-50px;left:30%}.songlist__list .mod_list_menu .song_download[data-v-27564d40],.songlist__list .mod_list_menu .song_play[data-v-27564d40]{width:36px;height:36px;display:block;float:left;margin-top:7px;margin-left:5px;background:url(https://y.gtimg.cn/mediastyle/yqq/img/icon_list_menu.png?max_age=2592000&v=4566a1a62ecad72fe9b9205d1ad62d2b) no-repeat}.songlist__list .mod_list_menu .song_play[data-v-27564d40]:hover{background-position:-40px 0}.songlist__list .mod_list_menu .song_download[data-v-27564d40]{background-position:0 -120px}.songlist__list .mod_list_menu .song_download[data-v-27564d40]:hover{background-position:-40px -120px}.songlist__list .songNum[data-v-27564d40]{top:0;float:left;text-align:center;left:10px;color:#999;width:45px}.songlist__list .songName[data-v-27564d40]{width:44.5%;float:left;height:50px;position:relative}.songlist__list .songName p[data-v-27564d40]:hover{color:#2eb674}.songlist__list .songAlbum[data-v-27564d40]{float:left}.songlist__list .songTime[data-v-27564d40]{font-size:12px;float:right;margin-right:102px;color:#999} --------------------------------------------------------------------------------