├── static ├── .gitkeep ├── bg.jpg ├── dw.png ├── cable.png ├── wave.gif ├── cd_block.png ├── coverall.png ├── favicon.ico ├── WechatIMG1.jpeg ├── WechatIMG2.jpeg ├── testimg │ ├── 0.jpg │ ├── 1.jpg │ ├── w1.jpg │ ├── w2.jpg │ ├── w3.jpg │ ├── w4.jpg │ ├── w5.jpg │ ├── w6.jpg │ ├── w7.jpg │ ├── w8.jpg │ ├── w9.jpg │ ├── wave.gif │ └── 微信截图_20171225233630.png ├── 101920356445396365.jpg ├── 18627925998890855.jpg ├── 818741753301018324.jpg ├── masktype │ └── overlay-bg-1.png └── font-icon │ ├── fonts │ ├── icomoon.eot │ ├── icomoon.ttf │ └── icomoon.woff │ ├── Read Me.txt │ ├── demo-files │ ├── demo.js │ └── demo.css │ └── style.css ├── .eslintignore ├── src ├── common │ ├── stylus │ │ ├── border-1px │ │ │ ├── index.styl │ │ │ ├── mixin.styl │ │ │ └── base.styl │ │ ├── style.styl │ │ ├── global.styl │ │ └── custom_input.styl │ ├── js │ │ ├── global.js │ │ ├── Dom.js │ │ ├── Navigator.js │ │ ├── Storage.js │ │ └── Utils.js │ └── api │ │ ├── user.js │ │ └── background.js ├── assets │ └── logo.png ├── components │ ├── blog │ │ └── blog.vue │ ├── about │ │ ├── utilities │ │ │ └── utilities.vue │ │ ├── joke │ │ │ ├── jokeList │ │ │ │ └── jokeList.vue │ │ │ └── joke.vue │ │ ├── works │ │ │ ├── workList │ │ │ │ └── workList.vue │ │ │ └── works.vue │ │ ├── friendship │ │ │ └── friendship.vue │ │ ├── contact │ │ │ └── contact.vue │ │ ├── resources │ │ │ ├── video │ │ │ │ └── video.vue │ │ │ ├── audio │ │ │ │ └── audio.vue │ │ │ └── resources.vue │ │ ├── updateinfo │ │ │ └── updateinfo.vue │ │ ├── me │ │ │ └── me.vue │ │ ├── suggest │ │ │ └── suggest.vue │ │ ├── news │ │ │ └── news.vue │ │ └── about.vue │ ├── common │ │ ├── line │ │ │ └── line.vue │ │ ├── tips │ │ │ └── tips.vue │ │ ├── advertisement │ │ │ └── advertisement.vue │ │ ├── selectmask │ │ │ ├── selectmask.js │ │ │ └── selectmask.vue │ │ ├── switch │ │ │ └── switch.vue │ │ ├── bscroll │ │ │ └── bscroll.vue │ │ ├── loader │ │ │ └── loader.vue │ │ ├── coverhistory │ │ │ └── coverhistory.vue │ │ ├── usercompletion │ │ │ └── usercompletion.vue │ │ ├── colorpicker │ │ │ └── colorpicker.vue │ │ ├── fixedbg │ │ │ └── fixedbg.vue │ │ ├── weather │ │ │ └── weather.vue │ │ ├── userSetting │ │ │ └── userSetting.vue │ │ └── updatetips │ │ │ └── updatetips.vue │ ├── user │ │ └── user.vue │ ├── music │ │ ├── sheet │ │ │ └── sheet.vue │ │ ├── collection │ │ │ └── collection.vue │ │ ├── playlist │ │ │ └── playlist.vue │ │ ├── searchlist │ │ │ └── searchlist.vue │ │ ├── albumlist │ │ │ └── albumlist.vue │ │ ├── search │ │ │ └── search.vue │ │ └── toplist │ │ │ └── toplist.vue │ ├── pic │ │ └── picList │ │ │ └── picList.vue │ └── reward │ │ └── reward.vue ├── store │ ├── modules │ │ ├── pic.js │ │ ├── other.js │ │ ├── router.js │ │ ├── fixedimage.js │ │ ├── global.js │ │ └── audio.js │ └── index.js ├── main.js ├── utils │ ├── dragElement.js │ └── fecth.js ├── config │ └── api.js └── App.vue ├── .gitattributes ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── .babelrc ├── .eslintrc.js ├── index.html ├── README.md └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /src/common/stylus/border-1px/index.styl: -------------------------------------------------------------------------------- 1 | @import "./mixin" 2 | @import "./base" -------------------------------------------------------------------------------- /static/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/bg.jpg -------------------------------------------------------------------------------- /static/dw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/dw.png -------------------------------------------------------------------------------- /static/cable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/cable.png -------------------------------------------------------------------------------- /static/wave.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/wave.gif -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /static/cd_block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/cd_block.png -------------------------------------------------------------------------------- /static/coverall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/coverall.png -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /static/WechatIMG1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/WechatIMG1.jpeg -------------------------------------------------------------------------------- /static/WechatIMG2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/WechatIMG2.jpeg -------------------------------------------------------------------------------- /static/testimg/0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/testimg/0.jpg -------------------------------------------------------------------------------- /static/testimg/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/testimg/1.jpg -------------------------------------------------------------------------------- /static/testimg/w1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/testimg/w1.jpg -------------------------------------------------------------------------------- /static/testimg/w2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/testimg/w2.jpg -------------------------------------------------------------------------------- /static/testimg/w3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/testimg/w3.jpg -------------------------------------------------------------------------------- /static/testimg/w4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/testimg/w4.jpg -------------------------------------------------------------------------------- /static/testimg/w5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/testimg/w5.jpg -------------------------------------------------------------------------------- /static/testimg/w6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/testimg/w6.jpg -------------------------------------------------------------------------------- /static/testimg/w7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/testimg/w7.jpg -------------------------------------------------------------------------------- /static/testimg/w8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/testimg/w8.jpg -------------------------------------------------------------------------------- /static/testimg/w9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/testimg/w9.jpg -------------------------------------------------------------------------------- /static/testimg/wave.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/testimg/wave.gif -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=vue 2 | *.css linguist-language=vue 3 | *.html linguist-language=vue 4 | -------------------------------------------------------------------------------- /static/101920356445396365.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/101920356445396365.jpg -------------------------------------------------------------------------------- /static/18627925998890855.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/18627925998890855.jpg -------------------------------------------------------------------------------- /static/818741753301018324.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/818741753301018324.jpg -------------------------------------------------------------------------------- /static/masktype/overlay-bg-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/masktype/overlay-bg-1.png -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"', 3 | HOST: '"https://www.daiwei.site"' 4 | } 5 | -------------------------------------------------------------------------------- /static/font-icon/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/font-icon/fonts/icomoon.eot -------------------------------------------------------------------------------- /static/font-icon/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/font-icon/fonts/icomoon.ttf -------------------------------------------------------------------------------- /static/font-icon/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/font-icon/fonts/icomoon.woff -------------------------------------------------------------------------------- /static/testimg/微信截图_20171225233630.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-website/HEAD/static/testimg/微信截图_20171225233630.png -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | module.exports = merge(prodEnv, { 4 | NODE_ENV: '"development"', 5 | HOST: '"https://www.daiwei.site"' 6 | }) 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /src/common/js/global.js: -------------------------------------------------------------------------------- 1 | import {Storage} from './Storage.js' 2 | import {Utils} from './Utils.js' 3 | const DGlobal = { 4 | // 存储 5 | storage: Storage, 6 | // 实用工具 7 | utils: Utils 8 | } 9 | export default DGlobal 10 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/components/blog/blog.vue: -------------------------------------------------------------------------------- 1 | 6 | 10 | 12 | -------------------------------------------------------------------------------- /src/components/about/utilities/utilities.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 17 | -------------------------------------------------------------------------------- /src/store/modules/pic.js: -------------------------------------------------------------------------------- 1 | const pic = { 2 | state: { 3 | piclist: [] 4 | }, 5 | getters: { 6 | getPicList: state => state.piclist 7 | }, 8 | mutations: { 9 | setPicList (state, obj) { 10 | state.piclist = obj.data 11 | } 12 | }, 13 | actions: { 14 | set_PicList ({commit}, obj) { 15 | commit('setPicList', obj) 16 | } 17 | } 18 | } 19 | 20 | export default pic 21 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/common/line/line.vue: -------------------------------------------------------------------------------- 1 | 4 | 9 | 15 | -------------------------------------------------------------------------------- /src/components/user/user.vue: -------------------------------------------------------------------------------- 1 | 6 | 10 | 21 | -------------------------------------------------------------------------------- /src/store/modules/other.js: -------------------------------------------------------------------------------- 1 | const otherInfo = { 2 | state: { 3 | versionlist: {} 4 | }, 5 | getters: { 6 | getVersionList: state => { 7 | return state.versionlist 8 | } 9 | }, 10 | mutations: { 11 | setVersionList (state, obj) { 12 | state.versionlist = obj.data 13 | } 14 | }, 15 | actions: { 16 | set_VersionList ({commit}, obj) { 17 | commit('setVersionList', obj) 18 | } 19 | } 20 | } 21 | 22 | export default otherInfo 23 | -------------------------------------------------------------------------------- /src/store/modules/router.js: -------------------------------------------------------------------------------- 1 | const router = { 2 | state: { 3 | showAboutChildrenRouter: true 4 | }, 5 | getters: { 6 | getAboutChildrenRouter: state => state.showAboutChildrenRouter 7 | }, 8 | mutations: { 9 | setAboutChildrenRouter (state, obj) { 10 | state.showAboutChildrenRouter = obj.data 11 | } 12 | }, 13 | actions: { 14 | set_AboutChildrenRouter ({commit}, obj) { 15 | commit('setAboutChildrenRouter', obj) 16 | } 17 | } 18 | } 19 | 20 | export default router 21 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import Fixedimage from './modules/fixedimage.js' 4 | import GlobalInfo from './modules/global.js' 5 | import PicList from './modules/pic.js' 6 | import Router from './modules/router.js' 7 | import Audio from './modules/audio.js' 8 | import Other from './modules/other.js' 9 | 10 | Vue.use(Vuex) 11 | 12 | const store = new Vuex.Store({ 13 | modules: { 14 | fixedimage: Fixedimage, 15 | globalInfo: GlobalInfo, 16 | picList: PicList, 17 | router: Router, 18 | audio: Audio, 19 | other: Other 20 | } 21 | }) 22 | 23 | export default store 24 | -------------------------------------------------------------------------------- /src/common/js/Dom.js: -------------------------------------------------------------------------------- 1 | export function hasClass (el, className) { 2 | let reg = new RegExp('(^|\\s)' + className + '(\\s|$)') 3 | return reg.test(el.className) 4 | } 5 | 6 | export function addClass (el, className) { 7 | if (hasClass(el, className)) { 8 | return 9 | } 10 | 11 | let newClass = el.className.split(' ') 12 | newClass.push(className) 13 | el.className = newClass.join(' ') 14 | } 15 | 16 | export function removeClass (el, className) { 17 | if (hasClass(el, className)) { 18 | let newClass = el.className.split(' ') 19 | newClass.forEach((value, index, array) => { 20 | if (value === className) { 21 | newClass.splice(index, 1) 22 | } 23 | }) 24 | el.className = newClass.join(' ') 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/about/joke/jokeList/jokeList.vue: -------------------------------------------------------------------------------- 1 | 5 | 14 | 30 | -------------------------------------------------------------------------------- /src/components/common/tips/tips.vue: -------------------------------------------------------------------------------- 1 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /src/common/api/user.js: -------------------------------------------------------------------------------- 1 | import fecth from 'utils/fecth.js' 2 | import store from 'store' 3 | // import router from 'router' 4 | const LOGIN_INFO = { 5 | code: 0, 6 | msg: '用户未登录' 7 | } 8 | // import Global from 'common/js/global.js' 9 | export function fecthPromise (url, options) { 10 | return new Promise((resolve, reject) => { 11 | fecth.post(url, options).then((res) => { 12 | resolve(res) 13 | }, (err) => { 14 | reject(err) 15 | }) 16 | }) 17 | } 18 | 19 | // 用户验证 有信息则返回信息 否则跳到login 20 | export function todoUserInfo () { 21 | let loginInfo = store.getters.getUserInfo 22 | return new Promise((resolve, reject) => { 23 | if (loginInfo === null) { 24 | reject(LOGIN_INFO) 25 | } else { 26 | resolve(loginInfo) 27 | } 28 | }) 29 | } 30 | -------------------------------------------------------------------------------- /static/font-icon/Read Me.txt: -------------------------------------------------------------------------------- 1 | Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. 2 | 3 | To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts 4 | 5 | You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. 6 | 7 | You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection. 8 | -------------------------------------------------------------------------------- /src/common/stylus/border-1px/mixin.styl: -------------------------------------------------------------------------------- 1 | border-1px($color, $position) 2 | position: relative 3 | if $position == 'top' 4 | &:after 5 | display: block 6 | position: absolute 7 | left: 0 8 | top: 0 9 | width: 100% 10 | border-top: 1px solid $color 11 | content: ' ' 12 | else if $position == 'bottom' 13 | &:after 14 | display: block 15 | position: absolute 16 | left: 0 17 | bottom: 0 18 | width: 100% 19 | border-bottom: 1px solid $color 20 | content: ' ' 21 | 22 | border-none() 23 | &:after 24 | display: none 25 | 26 | bg-image($url) 27 | background-image: url($url + "@2x.png") 28 | @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) 29 | background-image: url($url + "@3x.png") -------------------------------------------------------------------------------- /src/store/modules/fixedimage.js: -------------------------------------------------------------------------------- 1 | const fixedimage = { 2 | state: { 3 | fixedImageInfo: { 4 | index: 0 5 | }, 6 | fixedBgInfo: { 7 | opacity: '0.4', 8 | bgcolor: 'rgb(51, 102, 153)' 9 | } 10 | }, 11 | getters: { 12 | getFixedImageInfo: state => state.fixedImageInfo, 13 | getFixedBgInfo: state => state.fixedBgInfo, 14 | getFixedBgIndex: state => state.index 15 | }, 16 | mutations: { 17 | setFixedImageInfo (state, obj) { 18 | state.fixedImageInfo = obj.data 19 | }, 20 | setFixedBgInfo (state, obj) { 21 | state.fixedBgInfo = obj.data 22 | }, 23 | setFixedBgIndex (state, obj) { 24 | state.index = obj.data 25 | } 26 | }, 27 | actions: { 28 | set_FixedImageInfo ({commit}, obj) { 29 | commit('setFixedImageInfo', obj) 30 | }, 31 | set_FixedBgInfo ({commit}, obj) { 32 | commit('setFixedBgInfo', obj) 33 | } 34 | } 35 | } 36 | 37 | export default fixedimage 38 | -------------------------------------------------------------------------------- /src/common/stylus/border-1px/base.styl: -------------------------------------------------------------------------------- 1 | body, html 2 | line-height: 1 3 | font-weight: 200 4 | font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif 5 | 6 | .clearfix 7 | display: inline-block 8 | &:after 9 | display: block 10 | content: "." 11 | height: 0 12 | line-height: 0 13 | clear: both 14 | visibility: hidden 15 | 16 | @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) 17 | .border-1px 18 | &::after 19 | -webkit-transform: scaleY(0.7) 20 | transform: scaleY(0.7) 21 | 22 | @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) 23 | .border-1px 24 | &::after 25 | -webkit-transform: scaleY(0.5) 26 | transform: scaleY(0.5) 27 | 28 | @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) 29 | .border-1px 30 | &::after 31 | -webkit-transform: scaleY(0.3) 32 | transform: scaleY(0.3) -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | "extends":"eslint:recommended", 5 | root: true, 6 | parser: 'babel-eslint', 7 | parserOptions: { 8 | sourceType: 'module' 9 | }, 10 | env: { 11 | browser: true, 12 | }, 13 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 14 | extends: 'standard', 15 | // required to lint *.vue files 16 | plugins: [ 17 | 'html' 18 | ], 19 | // add your custom rules here 20 | 'rules': { 21 | // allow paren-less arrow functions 22 | 'arrow-parens': 0, 23 | // allow async-await 24 | 'indent': 0, 25 | 'no-tabs': 0, 26 | 'generator-star-spacing': 0, 27 | // allow debugger during development 28 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 29 | "no-compare-neg-zero":"off", 30 | "no-useless-escape":"off", 31 | 'import/no-unresolved': 0 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 未曾遗忘的青春 | 个人网站 | web前端_技术分享_戴伟的个人网站 12 | 13 | 20 | 21 | 22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /src/components/common/advertisement/advertisement.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | import VueLazyload from 'vue-lazyload' 7 | import './../static/font-icon/style.css' 8 | import store from '@/store' 9 | import Msg from 'vue-message' 10 | 11 | import ElementUI from 'element-ui' 12 | import 'element-ui/lib/theme-chalk/index.css' 13 | 14 | import VueAwesomeSwiper from 'vue-awesome-swiper' 15 | Vue.use(Msg, {text: 'Hello world', duration: 3000, background: 'rgba(7,17,27,0.6)'}) 16 | 17 | Vue.use(VueAwesomeSwiper) 18 | Vue.use(ElementUI) 19 | 20 | Vue.use(VueLazyload, { 21 | loading: 'https://www.daiwei.site/web_v2/dw.png', 22 | error: 'https://www.daiwei.site/web_v2/bg/657952152722629515.jpg' 23 | }) 24 | 25 | Vue.config.productionTip = false 26 | 27 | /* eslint-disable no-new */ 28 | const vueExp = new Vue({ 29 | el: '#app', 30 | router, 31 | store, 32 | template: '', 33 | render: h => h(App) 34 | }) 35 | 36 | export default vueExp 37 | -------------------------------------------------------------------------------- /src/utils/dragElement.js: -------------------------------------------------------------------------------- 1 | export function dragElement (ref) { 2 | let moveX = 0 3 | let moveY = 0 4 | let offsetEleX = 0 5 | let offsetEleY = 0 6 | let isDrag = false 7 | let refWidth = ref.offsetWidth 8 | let refHeight = ref.offsetHeight 9 | if (ref) { 10 | ref.onmousedown = (event) => { 11 | isDrag = true 12 | let e = event || window.event 13 | console.log(e) 14 | offsetEleX = e.pageX - ref.offsetLeft 15 | offsetEleY = e.pageY - ref.offsetTop 16 | console.log(e) 17 | } 18 | 19 | ref.onmousemove = (event) => { 20 | if (isDrag) { 21 | let e = event || window.event 22 | moveX = e.pageX - offsetEleX 23 | moveY = e.pageY - offsetEleY 24 | let maxX = document.documentElement.scrollWidth - refWidth 25 | let maxY = document.documentElement.scrollHeight - refHeight 26 | moveX = Math.min(maxX, Math.max(0, moveX)) 27 | moveY = Math.min(maxY, Math.max(0, moveY)) 28 | 29 | ref.style.cssText = 'position:fixed;cursor:move;left:' + moveX + 'px;top:' + moveY + 'px;zIndex:111111111' 30 | } 31 | } 32 | ref.onmouseup = (event) => { 33 | isDrag = false 34 | } 35 | } 36 | } 37 | 38 | -------------------------------------------------------------------------------- /static/font-icon/demo-files/demo.js: -------------------------------------------------------------------------------- 1 | if (!('boxShadow' in document.body.style)) { 2 | document.body.setAttribute('class', 'noBoxShadow'); 3 | } 4 | 5 | document.body.addEventListener("click", function(e) { 6 | var target = e.target; 7 | if (target.tagName === "INPUT" && 8 | target.getAttribute('class').indexOf('liga') === -1) { 9 | target.select(); 10 | } 11 | }); 12 | 13 | (function() { 14 | var fontSize = document.getElementById('fontSize'), 15 | testDrive = document.getElementById('testDrive'), 16 | testText = document.getElementById('testText'); 17 | function updateTest() { 18 | testDrive.innerHTML = testText.value || String.fromCharCode(160); 19 | if (window.icomoonLiga) { 20 | window.icomoonLiga(testDrive); 21 | } 22 | } 23 | function updateSize() { 24 | testDrive.style.fontSize = fontSize.value + 'px'; 25 | } 26 | fontSize.addEventListener('change', updateSize, false); 27 | testText.addEventListener('input', updateTest, false); 28 | testText.addEventListener('change', updateTest, false); 29 | updateSize(); 30 | }()); 31 | -------------------------------------------------------------------------------- /src/common/stylus/style.styl: -------------------------------------------------------------------------------- 1 | .g-content 2 | position:fixed 3 | top:100px 4 | bottom:50px 5 | left:50% 6 | max-width:1240px 7 | width:100% 8 | transform:translate3d(-50%,0,0) 9 | margin:0 auto 10 | overflow-y:scroll 11 | box-sizing:border-box 12 | -webkit-overflow-scrolling: touch 13 | padding:15px 14 | @media screen and (max-width:1440px) 15 | .g-content 16 | top:60px 17 | bottom:30px 18 | 19 | @media screen and (max-width:992px) 20 | .g-content 21 | top:40px 22 | bottom:10px 23 | 24 | // .mCustomScrollBox>.mCSB_scrollTools{ 25 | // position:absolute !important 26 | // } 27 | 28 | ::-webkit-scrollbar { 29 | width: 14px; 30 | height: 14px; 31 | } 32 | 33 | ::-webkit-scrollbar-track, 34 | ::-webkit-scrollbar-thumb { 35 | border-radius: 999px; 36 | border: 5px solid transparent; 37 | } 38 | 39 | ::-webkit-scrollbar-track { 40 | box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset; 41 | } 42 | 43 | ::-webkit-scrollbar-thumb { 44 | min-height: 20px; 45 | background-clip: content-box; 46 | box-shadow: 0 0 0 5px rgba(255,255,255,.6) inset; 47 | } 48 | 49 | ::-webkit-scrollbar-corner { 50 | background: transparent; 51 | } -------------------------------------------------------------------------------- /src/common/js/Navigator.js: -------------------------------------------------------------------------------- 1 | // 浏览器相关方法 2 | export const Navigator = { 3 | deviceVersion () { 4 | const u = navigator.userAgent 5 | const app = navigator.appVersion 6 | return { // 移动终端浏览器版本信息 7 | userAgent: u, 8 | appVersion: app, 9 | trident: u.includes('Trident'), // IE内核 10 | presto: u.includes('Presto'), // opera内核 11 | webKit: u.includes('AppleWebKit'), // 苹果、谷歌内核 12 | gecko: u.includes('Gecko') && !u.includes('KHTML'), // 火狐内核 13 | mobile: !!u.match(/AppleWebKit.*Mobile/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/), // 是否为移动终端 14 | ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端 15 | android: u.includes('Android') || u.includes('Linux'), // android终端或者uc浏览器 16 | iPhone: u.includes('iPhone') || u.includes('Mac'), // 是否为iPhone或者QQHD浏览器 17 | iPad: u.includes('iPad'), // 是否iPad 18 | webApp: !u.includes('Safari'), // 是否web应该程序，没有头部与底部, 19 | language: (navigator.browserLanguage || navigator.language).toLowerCase() // 浏览器语言 20 | // audroidVersion: u.substr(u.indexOf('Android') + 8, 3), 21 | // iosVersion: u.substr(u.indexOf('ios') + 8, 3) 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/about/works/workList/workList.vue: -------------------------------------------------------------------------------- 1 | 8 | 23 | 57 | -------------------------------------------------------------------------------- /src/components/common/selectmask/selectmask.js: -------------------------------------------------------------------------------- 1 | // type 是类型 data 是通用设置 主要是控制颜色 和透明度 2 | export default function (type, data) { 3 | if (type === 'default') { 4 | return { 5 | background: data.contentInfo.bgcolor, 6 | opacity: data.contentInfo.opacity 7 | } 8 | } 9 | if (type === 'radial-gradient-ellipse') { 10 | return { 11 | background: `-webkit-radial-gradient(50% 50%,ellipse closest-corner,rgba(0,0,0,0) 10%, ${data.contentInfo.bgcolor} 90%)`, 12 | opacity: data.contentInfo.opacity 13 | } 14 | } 15 | 16 | if (type === 'linear-gradient-toptobottom') { 17 | return { 18 | background: `-webkit-linear-gradient(90deg, rgba(0,0,0,0) 0%, ${data.contentInfo.bgcolor} 100%)`, 19 | opacity: data.contentInfo.opacity 20 | } 21 | } 22 | 23 | if (type === 'linear-gradient-bottomtotop') { 24 | return { 25 | background: `-webkit-linear-gradient(270deg, rgba(0,0,0,0) 0%, ${data.contentInfo.bgcolor} 100%)`, 26 | opacity: data.contentInfo.opacity 27 | } 28 | } 29 | 30 | // top right to left bottom 31 | if (type === 'linear-gradient-trtolb') { 32 | return { 33 | background: `-webkit-linear-gradient(45deg, ${data.contentInfo.bgcolor} 0%, rgba(0,0,0,0) 50%, ${data.contentInfo.bgcolor} 100%)`, 34 | opacity: data.contentInfo.opacity 35 | } 36 | } 37 | 38 | if (type === 'cut-lefttoright') { 39 | return { 40 | background: `-webkit-linear-gradient(45deg, ${data.contentInfo.bgcolor} 0%, rgba(0,0,0,0) 50%, ${data.contentInfo.bgcolor} 50%)`, 41 | opacity: data.contentInfo.opacity 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/common/api/background.js: -------------------------------------------------------------------------------- 1 | import fecth from 'utils/fecth.js' 2 | import store from 'store' 3 | import Global from 'common/js/global.js' 4 | export function getBingInfo (url, index = 0) { 5 | return new Promise((resolve, reject) => { 6 | fecth.get(url).then((res) => { 7 | let imageInfo = { 8 | type: 'bing', 9 | url: 'https://www.bing.com' + res.data.url, 10 | title: res.data.title, 11 | disc: res.data.disc, 12 | date: Global.utils.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'), 13 | index: index 14 | } 15 | store.dispatch({ 16 | type: 'set_FixedImageInfo', 17 | data: imageInfo 18 | }) 19 | localStorage.setItem('fixedImageBg', JSON.stringify(imageInfo)) 20 | resolve(imageInfo) 21 | }, (err) => { 22 | alert(err) 23 | reject(err) 24 | }) 25 | }) 26 | } 27 | 28 | // 我自己设置的背景图是有其他字段的 29 | // type 类型 url 图片地址 title 图片title disc 图片disc date 图片date musicUrl 配置音乐的地址 musicName配置音乐的名字 index 索引值 30 | export function getMineBgByIndex (url, index) { 31 | return new Promise((resolve, reject) => { 32 | fecth.post(url, {index: index}).then((res) => { 33 | let imageInfo = { 34 | type: 'home', 35 | url: res.data.url, 36 | title: res.data.title, 37 | disc: res.data.disc, 38 | date: res.data.date, 39 | musicUrl: res.data.musicUrl, 40 | musicName: res.data.musicName, 41 | index: index 42 | } 43 | store.dispatch({ 44 | type: 'set_FixedImageInfo', 45 | data: imageInfo 46 | }) 47 | localStorage.setItem('fixedImageBg', JSON.stringify(imageInfo)) 48 | resolve(imageInfo) 49 | }, (err) => { 50 | alert(err) 51 | reject(err) 52 | }) 53 | }) 54 | } 55 | -------------------------------------------------------------------------------- /src/common/stylus/global.styl: -------------------------------------------------------------------------------- 1 | // 主色调 2 | $primary_c = #F4C2EC; 3 | 4 | // 正常文字颜色 5 | $text_color = #fff; 6 | 7 | $text_color_opacity = rgba(225,225,225,0.8); 8 | $text_link_color = #91AACE; 9 | 10 | // active状态下的颜色 11 | $text_color_active = #ccc; 12 | 13 | $text_before_color = rgba(225,225,225,.8); 14 | 15 | // 列表在hover状态下的背景色 16 | $list_hover = rgba(0,0,0,0.2); 17 | 18 | // 遮罩层背景色 19 | $mask_color = rgba(0,0,0,0.98); 20 | $mask_color_opacity = rgba(0,0,0,0.58); 21 | $mask_color_gray = rgba(122,122,122,0.3) 22 | 23 | // 边框颜色 24 | $border_color = $primary_c; 25 | $border_bottom_color = rgba(255,255,255,0.1); 26 | $border_bottom_color_deep = rgba(255,255,255,0.3) 27 | 28 | // box-shadow 29 | $box_s_eee = #eee 30 | 31 | // active色调 32 | $active_color = $primary_c; 33 | 34 | // color 顔色 35 | $color_gray = #aaa; 36 | $color_deep_gray = #222; 37 | 38 | //勾选的颜色 39 | $check_color = rgba(36,174,61,0.4) 40 | $check_active_color = rgba(36,174,61,0.6) 41 | $check_color_deep = rgba(36,174,61,0.8) 42 | 43 | $btn_hover_color = rgba(255,255,255,0.4); 44 | 45 | // ============= 音乐进度条 46 | $progress_color = rgba(255,255,255,0.1); 47 | $buffering_color = rgba(255,255,255,0.2); 48 | $real_color = $primary_c; 49 | $range_color = rgba(255,255,255,1); 50 | 51 | 52 | // 自定义组件 通用样式 53 | $com_bg = rgba(12,14,27,0.96) 54 | $com_text_color = rgba(255,255,255,0.6) 55 | $com_text_color_deep = rgba(255,255,255,0.9) 56 | $com_text_color_active = rgba(255,255,255,0.8) 57 | 58 | 59 | // 红色按钮 更新页面的效果 60 | $com_button_deep = rgba(255,12,12,0.08) 61 | $com_button_color = rgba(255,12,12,0.03) 62 | $com_button_active_color = rgba(255,12,12,0.05) 63 | 64 | @import "./custom_input.styl" 65 | -------------------------------------------------------------------------------- /src/common/js/Storage.js: -------------------------------------------------------------------------------- 1 | export const Storage = { 2 | // 设置Cookie 3 | // name: 为cookie的名字 4 | // value: 为对应的值 5 | // exp: 为过期时间 单位为毫秒 默认设置为2个小时的过期时间 6 | setCookie (name, value, exp = 60 * 60 * 2 * 1000) { 7 | let date = new Date() 8 | date.setTime(date.getTime() + exp) 9 | document.cookie = `${name}=${escape(value)};expires=${date.toGMTString()}` 10 | }, 11 | // 获取Cookie 12 | // name: 为cookie的名字 13 | getCookie (name) { 14 | if (name) { 15 | let reg = new RegExp(`(^| )${name}=([^;]*)(;|$)`) 16 | let arr = document.cookie.match(reg) 17 | if (arr) { 18 | // return arr[2] 19 | return arr[2] 20 | } else { 21 | return null 22 | } 23 | } else { 24 | let getAllCookies = [] 25 | if (document.cookie !== '') { 26 | let arrCookie = document.cookie.split('; ') 27 | for (let k in arrCookie) { 28 | getAllCookies.push({ 29 | name: `${unescape(arrCookie[k].split('=')[0])}`, 30 | value: `${unescape(arrCookie[k].split('=')[1])}` 31 | }) 32 | } 33 | return getAllCookies 34 | } else { 35 | return null 36 | } 37 | } 38 | }, 39 | // 删除 Cookie 40 | // name: 为cookie的名字 41 | deleteCookie (name) { 42 | let date = new Date() 43 | date.setTime(date.getTime() - 1) // 设置过期了 44 | if (name) { 45 | let cookieInfo = Storage.getCookie(name) 46 | if (cookieInfo !== null) { 47 | document.cookie = `${name}=${cookieInfo};expires=${date.toGMTString()}` 48 | } 49 | } else { 50 | let getAllCookies = Storage.getCookie() 51 | for (let k in getAllCookies) { 52 | document.cookie = `${getAllCookies[k].name}=${getAllCookies[k].value};expires=${date.toGMTString()}` 53 | } 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | // assetsRoot: path.resolve(__dirname, '../dist/new'), 9 | // assetsSubDirectory: 'static', 10 | // assetsPublicPath: 'new/', 11 | // productionSourceMap: true, 12 | assetsRoot: path.resolve(__dirname, '../dist/'), 13 | assetsSubDirectory: '', 14 | assetsPublicPath: '/', 15 | productionSourceMap: false, 16 | 17 | // Gzip off by default as many popular static hosts such as 18 | // Surge or Netlify already gzip all static assets for you. 19 | // Before setting to `true`, make sure to: 20 | // npm install --save-dev compression-webpack-plugin 21 | productionGzip: false, 22 | productionGzipExtensions: ['js', 'css'], 23 | // Run the build command with an extra argument to 24 | // View the bundle analyzer report after build finishes: 25 | // `npm run build --report` 26 | // Set to `true` or `false` to always turn it on or off 27 | bundleAnalyzerReport: process.env.npm_config_report 28 | }, 29 | dev: { 30 | env: require('./dev.env'), 31 | port: 8082, 32 | autoOpenBrowser: true, 33 | assetsSubDirectory: 'static', 34 | assetsPublicPath: '/', 35 | proxyTable: {}, 36 | // CSS Sourcemaps off by default because relative paths are "buggy" 37 | // with this option, according to the CSS-Loader README 38 | // (https://github.com/webpack/css-loader#sourcemaps) 39 | // In our experience, they generally work as expected, 40 | // just be aware of this issue when enabling this option. 41 | cssSourceMap: false 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/common/stylus/custom_input.styl: -------------------------------------------------------------------------------- 1 | $activecolor = red 2 | // radio 3 | .custom_input[type="radio"] 4 | display: none 5 | .custom_input[type="radio"] + label.custom_input 6 | cursor: pointer 7 | display:inline-block 8 | width: auto 9 | text-align: left 10 | box-sizing:border-box 11 | user-select:none 12 | .custom_input[type="radio"] + label.custom_input::before 13 | content: "" 14 | display: inline-block 15 | width: 18px 16 | height: 18px 17 | background: #EEE 18 | vertical-align: middle 19 | margin-right: 5px 20 | box-sizing:border-box 21 | background-color: #fff 22 | border: 4px solid #EEEEEE 23 | border-radius:50% 24 | transition: all ease-in .3s 25 | 26 | .custom_input[type="radio"]:checked + label.custom_input::before 27 | background-color: $activecolor 28 | transition: all ease-in .3s 29 | 30 | .custom_input[type="radio"]:hover + label.custom_input::before 31 | border: 4px solid #e1e1e1 32 | transition: all ease-in .3s 33 | 34 | // check 35 | .custom_input[type="checkbox"] 36 | display: none 37 | .custom_input[type="checkbox"] + label.custom_input 38 | cursor: pointer 39 | display:inline-block 40 | width: auto 41 | text-align: left 42 | box-sizing:border-box 43 | user-select:none 44 | .custom_input[type="checkbox"] + label.custom_input::before 45 | content: "" 46 | display: inline-block 47 | width: 18px 48 | height: 18px 49 | background: #EEE 50 | vertical-align: middle 51 | margin-right: 5px 52 | box-sizing:border-box 53 | background-color: #fff 54 | border: 4px solid #EEEEEE 55 | transition: all ease-in .3s 56 | 57 | .custom_input[type="checkbox"]:checked + label.custom_input::before 58 | background-color: $activecolor 59 | transition: all ease-in .3s 60 | 61 | .custom_input[type="checkbox"]:hover + label.custom_input::before 62 | border: 4px solid #e1e1e1 63 | transition: all ease-in .3s 64 | -------------------------------------------------------------------------------- /src/components/about/joke/joke.vue: -------------------------------------------------------------------------------- 1 | 10 | 42 | 81 | -------------------------------------------------------------------------------- /src/components/common/switch/switch.vue: -------------------------------------------------------------------------------- 1 | 6 | 61 | 79 | -------------------------------------------------------------------------------- /src/components/common/bscroll/bscroll.vue: -------------------------------------------------------------------------------- 1 | 6 | 89 | -------------------------------------------------------------------------------- /src/components/music/sheet/sheet.vue: -------------------------------------------------------------------------------- 1 | 15 | 71 | 80 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 网站版本更新 2 | ![](https://img.shields.io/badge/vue-2.3.3-4EDD96.svg) ![](https://img.shields.io/badge/stylus-0.54.5-F6B386.svg)  ![](https://img.shields.io/badge/vue_awesome_swiper-2.5.4-FD9494.svg) ![](https://img.shields.io/badge/vuex-2.4.1-69D3E3.svg)  ![](https://img.shields.io/badge/axios-0.16.2-56DD7F.svg) ![](https://img.shields.io/badge/vue_message-1.3.0-F876B5.svg) ![](https://img.shields.io/badge/vue_lazyload-1.1.4-68CBD2.svg) ![](https://img.shields.io/badge/better_scroll-1.6.0-B07541.svg) 3 | 4 | ## 演示地址   https://v2.daiwei.site 5 | 6 | ## 网页截图 7 | 8 | #### 首页 9 | 10 | ![](https://github.com/IFmiss/vue-website/blob/master/static/testimg/w1.jpg) 11 | 12 | #### 状态   13 | 14 | ![](https://github.com/IFmiss/vue-website/blob/master/static/testimg/w2.jpg) 15 | 16 | #### 音乐 17 | 18 | ![](https://github.com/IFmiss/vue-website/blob/master/static/testimg/w3.jpg) 19 | 20 | #### 设置   21 | 22 | ![](https://github.com/IFmiss/vue-website/blob/master/static/testimg/w4.jpg) 23 | 24 | #### News 25 | 26 | ![](https://github.com/IFmiss/vue-website/blob/master/static/testimg/w5.jpg) 27 | 28 | #### 作品信息 29 | 30 | ![](https://github.com/IFmiss/vue-website/blob/master/static/testimg/w6.jpg) 31 | 32 | #### 标签信息 33 | 34 | ![](https://github.com/IFmiss/vue-website/blob/master/static/testimg/w7.jpg) 35 | 36 | #### 浮层类型 37 | 38 | ![](https://github.com/IFmiss/vue-website/blob/master/static/testimg/w8.jpg) 39 | 40 | #### 版本记录 41 | 42 | ![](https://github.com/IFmiss/vue-website/blob/master/static/testimg/w9.jpg) 43 | 44 | 等等... 45 | 46 | ## 执行方法 47 | 48 | ``` bash 49 | # install dependencies   安装依赖 50 | npm install 51 | 52 | # serve with hot reload at localhost:8081   启动项目 53 | npm run dev 54 | 55 | # build for production with minification    打包项目 56 | npm run build 57 | 58 | ``` 59 | 60 | ## 描述 61 | 这是关于网站版本的一次更新，网站采用当前比较热门的前端框架vue编写，目的也是通过开发提升自己 62 | 63 | ## 使用到的技术 &　插件 64 | vuex axios swiper vue-router lazyload better-scorll 等 65 | 66 | ## 网站特点 67 | * 同步bing主题  并且可以自定义壁纸(个人状态中的壁纸 或者我个人自定义的默认壁纸信息) 68 | * 自定义壁纸可添加音频 69 | * 可自定义遮罩的显示模式 70 | * 兼容移动端 71 | * 海量音乐播放，api来自网易云音乐，听歌我就用网易云 72 | * 时实用户ip显示地址，并显示当地的天气情况 73 | * 实时新闻信息 74 | * 每日一笑 75 | * 个人动态展示，可发表文字，图片信息 76 | * 网站设置同步本地存储，包括音乐收藏列表 77 | * 用户登陆以及打通用户听歌以及用户评价的接口 78 | 79 | -------------------------------------------------------------------------------- /src/components/about/friendship/friendship.vue: -------------------------------------------------------------------------------- 1 | 13 | 46 | 91 | -------------------------------------------------------------------------------- /src/components/about/works/works.vue: -------------------------------------------------------------------------------- 1 | 12 | 45 | 91 | -------------------------------------------------------------------------------- /src/components/about/contact/contact.vue: -------------------------------------------------------------------------------- 1 | 16 | 37 | 95 | -------------------------------------------------------------------------------- /src/store/modules/global.js: -------------------------------------------------------------------------------- 1 | const globalStore = { 2 | state: { 3 | globalInfo: { 4 | // 路由的背景色 全屏状态下 5 | contentInfo: { 6 | opacity: '0.9', 7 | bgcolor: 'rgb(7, 17, 27)', 8 | type: 'radial-gradient-ellipse' 9 | }, 10 | isHigher768: false, 11 | showBingImage: true 12 | }, 13 | place: {}, 14 | weather: {}, 15 | showloading: true, 16 | musicRouter: '/music/sheet/124995419', 17 | host: process.env.HOST || 'https://www.daiwei.site', 18 | userInfo: null 19 | }, 20 | getters: { 21 | getGlobalInfo: state => state.globalInfo, 22 | getPlace: state => state.place, 23 | getShowLoading: state => state.showloading, 24 | getWeatherInfo: state => state.weather, 25 | getMusicRouter: state => state.musicRouter, 26 | getUserInfo: state => state.userInfo 27 | }, 28 | mutations: { 29 | setGlobalInfo (state, obj) { 30 | state.globalInfo = obj.data 31 | }, 32 | setIsHigher768 (state, obj) { 33 | state.globalInfo.isHigher768 = obj.data 34 | }, 35 | setShowBingImage (state, obj) { 36 | state.globalInfo.showBingImage = obj.data 37 | }, 38 | setGlobalBgColor (state, obj) { 39 | state.globalInfo.contentInfo.bgcolor = obj.data 40 | }, 41 | setGlobaBglColorOpacity (state, obj) { 42 | state.globalInfo.contentInfo.opacity = obj.data 43 | }, 44 | setMaskType (state, obj) { 45 | state.globalInfo.contentInfo.type = obj.data 46 | }, 47 | setPlace (state, obj) { 48 | state.place = obj.data 49 | }, 50 | setShowLoading (state, obj) { 51 | state.showloading = obj.data 52 | }, 53 | setWeather (state, obj) { 54 | state.weather = obj.data 55 | }, 56 | setMusicRouter (state, obj) { 57 | state.musicRouter = obj.data 58 | }, 59 | setUserInfo (state, obj) { 60 | state.userInfo = obj.data 61 | } 62 | }, 63 | actions: { 64 | set_GlobalInfo ({commit}, obj) { 65 | commit('setGlobalInfo', obj) 66 | }, 67 | set_ShowBingImage ({commit}, obj) { 68 | commit('setShowBingImage', obj) 69 | }, 70 | set_GlobaBglColor ({commit}, obj) { 71 | commit('setGlobalBgColor', obj) 72 | }, 73 | set_GlobaBglColorOpacity ({commit}, obj) { 74 | commit('setGlobaBglColorOpacity', obj) 75 | }, 76 | set_MaskType ({commit}, obj) { 77 | commit('setMaskType', obj) 78 | }, 79 | set_Place ({commit}, obj) { 80 | commit('setPlace', obj) 81 | }, 82 | set_ShowLoading ({commit}, obj) { 83 | commit('setShowLoading', obj) 84 | }, 85 | set_Weather ({commit}, obj) { 86 | commit('setWeather', obj) 87 | }, 88 | set_MusicRouter ({commit}, obj) { 89 | commit('setMusicRouter', obj) 90 | }, 91 | set_UserInfo ({commit}, obj) { 92 | commit('setUserInfo', obj) 93 | } 94 | } 95 | } 96 | 97 | export default globalStore 98 | -------------------------------------------------------------------------------- /src/config/api.js: -------------------------------------------------------------------------------- 1 | const HOST = process.env.HOST || 'https://www.daiwei.site' 2 | const api = { 3 | // 设置的请求host地址 4 | HOST, 5 | 6 | // 获取位置 7 | GET_ADRESS: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getAdress`, 8 | 9 | // 获取天气信息 10 | GET_WEATHER: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getWeather`, 11 | 12 | // 获取bing壁纸 13 | GET_BING_IMAGE: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getImageByBingJson`, 14 | 15 | // 获取个人首页图片集合 16 | GET_MINE_IMAGE: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getHomeImage`, 17 | 18 | // 获取个人所有的图片信息 19 | GET_ALL_MINE_IMAGE: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getAllImage`, 20 | 21 | // 获取友情链接地址 22 | GET_LINKS: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getLinksInfo`, 23 | 24 | // 获取笑话数据 25 | GET_JOKE: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getJokeInfo`, 26 | 27 | // 获取个人的标签 28 | GET_TIPS_INFO: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getTipsInfo`, 29 | 30 | // 更新个人标签 31 | UPDATE_TIPS_INFO: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=updataTipsInfo`, 32 | 33 | // 获取新闻信息 34 | GET_NEWS_INFO: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getNewsInfo`, 35 | 36 | // 获取资源信息中音频地址 37 | GET_RESOURCE_AUDIO: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getResourceAudio`, 38 | 39 | // 获取资源信息中视频地址 40 | GET_RESOURCE_VIDEO: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getResourceVideo`, 41 | 42 | // 获取建议和意见的内容 43 | GET_SUGGEST_INFO: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getSuggestInfo`, 44 | 45 | // 提交建议和意见 46 | SUB_SUGGEST_INFO: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=submitSuggestInfo`, 47 | 48 | // 获取网址更新内容 49 | GET_WEB_UPDATE_INFO: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getUpdateInfo`, 50 | 51 | // 获取作品列表 52 | GET_WORKS_LIST: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getWorksList`, 53 | 54 | // 判断是否要更新 在弹窗提示的时候使用 55 | IS_NEED_UPDATE: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=isNeedUpdate`, 56 | 57 | // 更新注册信息 58 | UPDATE_SINGIN_INFO: `${HOST}/php/web_v2_api/user.php?inAjax=1&do=updateSigninInfo`, 59 | 60 | // 文件上传 61 | UPLOAD: `${HOST}/php/web_v2_api/upload.php`, 62 | 63 | // 更新用户信息 64 | UPDATE_USER_INFO: `${HOST}/php/web_v2_api/user.php?inAjax=1&do=updateUserInfo`, 65 | 66 | // 获取pic路由下图片的数据 67 | GET_PIC_IMAGE: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getImageCondition`, 68 | 69 | // 获取赞赏的人的信息 70 | GET_REWARD_LIST: `${HOST}/php/web_v2_api/home.php?inAjax=1&do=getRewardList`, 71 | 72 | // 个人中心数据获取 73 | GET_PERSONAL_INFO: `${HOST}/php/web_v2_api/user.php?inAjax=1&do=personalCenter`, 74 | 75 | // 登陆 76 | LOGIN: `${HOST}/php/web_v2_api/user.php?inAjax=1&do=login`, 77 | 78 | // 注册 79 | SINGIN: `${HOST}/php/web_v2_api/user.php?inAjax=1&do=singin` 80 | } 81 | export default api 82 | -------------------------------------------------------------------------------- /src/components/common/loader/loader.vue: -------------------------------------------------------------------------------- 1 | 8 | 35 | -------------------------------------------------------------------------------- /static/font-icon/demo-files/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: sans-serif; 5 | font-size: 1em; 6 | line-height: 1.5; 7 | color: #555; 8 | background: #fff; 9 | } 10 | h1 { 11 | font-size: 1.5em; 12 | font-weight: normal; 13 | } 14 | small { 15 | font-size: .66666667em; 16 | } 17 | a { 18 | color: #e74c3c; 19 | text-decoration: none; 20 | } 21 | a:hover, a:focus { 22 | box-shadow: 0 1px #e74c3c; 23 | } 24 | .bshadow0, input { 25 | box-shadow: inset 0 -2px #e7e7e7; 26 | } 27 | input:hover { 28 | box-shadow: inset 0 -2px #ccc; 29 | } 30 | input, fieldset { 31 | font-family: sans-serif; 32 | font-size: 1em; 33 | margin: 0; 34 | padding: 0; 35 | border: 0; 36 | } 37 | input { 38 | color: inherit; 39 | line-height: 1.5; 40 | height: 1.5em; 41 | padding: .25em 0; 42 | } 43 | input:focus { 44 | outline: none; 45 | box-shadow: inset 0 -2px #449fdb; 46 | } 47 | .glyph { 48 | font-size: 16px; 49 | width: 15em; 50 | padding-bottom: 1em; 51 | margin-right: 4em; 52 | margin-bottom: 1em; 53 | float: left; 54 | overflow: hidden; 55 | } 56 | .liga { 57 | width: 80%; 58 | width: calc(100% - 2.5em); 59 | } 60 | .talign-right { 61 | text-align: right; 62 | } 63 | .talign-center { 64 | text-align: center; 65 | } 66 | .bgc1 { 67 | background: #f1f1f1; 68 | } 69 | .fgc1 { 70 | color: #999; 71 | } 72 | .fgc0 { 73 | color: #000; 74 | } 75 | p { 76 | margin-top: 1em; 77 | margin-bottom: 1em; 78 | } 79 | .mvm { 80 | margin-top: .75em; 81 | margin-bottom: .75em; 82 | } 83 | .mtn { 84 | margin-top: 0; 85 | } 86 | .mtl, .mal { 87 | margin-top: 1.5em; 88 | } 89 | .mbl, .mal { 90 | margin-bottom: 1.5em; 91 | } 92 | .mal, .mhl { 93 | margin-left: 1.5em; 94 | margin-right: 1.5em; 95 | } 96 | .mhmm { 97 | margin-left: 1em; 98 | margin-right: 1em; 99 | } 100 | .mls { 101 | margin-left: .25em; 102 | } 103 | .ptl { 104 | padding-top: 1.5em; 105 | } 106 | .pbs, .pvs { 107 | padding-bottom: .25em; 108 | } 109 | .pvs, .pts { 110 | padding-top: .25em; 111 | } 112 | .unit { 113 | float: left; 114 | } 115 | .unitRight { 116 | float: right; 117 | } 118 | .size1of2 { 119 | width: 50%; 120 | } 121 | .size1of1 { 122 | width: 100%; 123 | } 124 | .clearfix:before, .clearfix:after { 125 | content: " "; 126 | display: table; 127 | } 128 | .clearfix:after { 129 | clear: both; 130 | } 131 | .hidden-true { 132 | display: none; 133 | } 134 | .textbox0 { 135 | width: 3em; 136 | background: #f1f1f1; 137 | padding: .25em .5em; 138 | line-height: 1.5; 139 | height: 1.5em; 140 | } 141 | #testDrive { 142 | display: block; 143 | padding-top: 24px; 144 | line-height: 1.5; 145 | } 146 | .fs0 { 147 | font-size: 16px; 148 | } 149 | .fs1 { 150 | font-size: 32px; 151 | } 152 | .fs2 { 153 | font-size: 32px; 154 | } 155 | 156 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dw-site", 3 | "version": "1.0.0", 4 | "description": "this is my website start at 2014-7-19", 5 | "author": "daiwei", 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 | "lint": "eslint --ext .js,.vue src" 12 | }, 13 | "dependencies": { 14 | "babel-polyfill": "^6.23.0", 15 | "debug": "^3.1.0", 16 | "element-ui": "^2.3.7", 17 | "hoek": "^5.0.3", 18 | "lodash": "^4.17.10", 19 | "pug": "^2.0.3", 20 | "vue-awesome-swiper": "^2.5.4", 21 | "vue-lazyload": "^1.1.4", 22 | "vue-router": "^2.6.0" 23 | }, 24 | "devDependencies": { 25 | "autoprefixer": "^7.1.2", 26 | "axios": "^0.16.2", 27 | "babel-core": "^6.22.1", 28 | "babel-eslint": "^7.1.1", 29 | "babel-loader": "^7.1.1", 30 | "babel-plugin-transform-runtime": "^6.22.0", 31 | "babel-polyfill": "^6.23.0", 32 | "babel-preset-env": "^1.3.2", 33 | "babel-preset-stage-2": "^6.22.0", 34 | "babel-register": "^6.22.0", 35 | "better-scroll": "^1.9.1", 36 | "chalk": "^2.0.1", 37 | "compass-mixins": "^0.12.10", 38 | "connect-history-api-fallback": "^1.3.0", 39 | "copy-webpack-plugin": "^4.0.1", 40 | "css-loader": "^0.28.0", 41 | "cssnano": "^3.10.0", 42 | "d-video": "^1.1.0", 43 | "eslint": "^3.19.0", 44 | "eslint-config-standard": "^6.2.1", 45 | "eslint-friendly-formatter": "^3.0.0", 46 | "eslint-loader": "^1.7.1", 47 | "eslint-plugin-html": "^3.0.0", 48 | "eslint-plugin-promise": "^3.4.0", 49 | "eslint-plugin-standard": "^2.0.1", 50 | "eventsource-polyfill": "^0.9.6", 51 | "express": "^4.14.1", 52 | "extract-text-webpack-plugin": "^2.0.0", 53 | "file-loader": "^0.11.1", 54 | "friendly-errors-webpack-plugin": "^1.1.3", 55 | "html-webpack-plugin": "^2.28.0", 56 | "http-proxy-middleware": "^0.17.3", 57 | "imports-loader": "^0.7.1", 58 | "node-sass": "^4.9.3", 59 | "opn": "^5.1.0", 60 | "optimize-css-assets-webpack-plugin": "^2.0.0", 61 | "ora": "^1.2.0", 62 | "rimraf": "^2.6.0", 63 | "sass-loader": "^7.0.1", 64 | "semver": "^5.3.0", 65 | "shelljs": "^0.7.6", 66 | "style-loader": "^0.20.3", 67 | "stylus": "^0.54.5", 68 | "stylus-loader": "^3.0.1", 69 | "url-loader": "^0.5.8", 70 | "vue": "^2.5.16", 71 | "vue-loader": "^12.1.0", 72 | "vue-message": "^1.4.1", 73 | "vue-style-loader": "^3.0.1", 74 | "vue-template-compiler": "^2.5.16", 75 | "vuex": "^2.4.1", 76 | "webpack": "^2.6.1", 77 | "webpack-bundle-analyzer": "^2.2.1", 78 | "webpack-dev-middleware": "^1.10.0", 79 | "webpack-hot-middleware": "^2.18.0", 80 | "webpack-merge": "^4.1.0", 81 | "randomatic": ">=3.0.0", 82 | "macaddress": ">=0.2.9" 83 | }, 84 | "engines": { 85 | "node": ">= 4.0.0", 86 | "npm": ">= 3.0.0" 87 | }, 88 | "browserslist": [ 89 | "> 1%", 90 | "last 2 versions", 91 | "not ie <= 8" 92 | ] 93 | } 94 | -------------------------------------------------------------------------------- /src/components/about/resources/video/video.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 71 | 72 | -------------------------------------------------------------------------------- /src/components/about/updateinfo/updateinfo.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 48 | 49 | -------------------------------------------------------------------------------- /src/utils/fecth.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import qs from 'qs' 3 | import store from './../store' 4 | import DGlobal from 'common/js/global.js' 5 | 6 | // request拦截器 7 | axios.interceptors.request.use( 8 | config => { 9 | // loading 10 | // console.log('loadding') 11 | store.dispatch({ 12 | type: 'set_ShowLoading', 13 | data: true 14 | }) 15 | return config 16 | }, error => { 17 | // Do something with request error 18 | console.log(error) // for debug 19 | return Promise.reject(error) 20 | }) 21 | 22 | // respone拦截器 23 | axios.interceptors.response.use(response => { 24 | return response 25 | }, error => { 26 | return Promise.resolve(error.response) 27 | }) 28 | 29 | function checkStatus (response) { 30 | // loading 31 | // 如果http状态码正常，则直接返回数据 32 | if (response && (response.status === 200 || response.status === 304 || response.status === 400)) { 33 | return response 34 | // 如果不需要除了data之外的数据，可以直接 return response.data 35 | } 36 | store.dispatch({ 37 | type: 'set_ShowLoading', 38 | data: false 39 | }) 40 | 41 | if (!store.getters.userInfo) { 42 | const userInfo = DGlobal.storage.getCookie('c_user_info') 43 | store.dispatch({ 44 | type: 'set_UserInfo', 45 | data: userInfo 46 | }) 47 | } 48 | 49 | // 异常状态下，把错误信息返回去 50 | return { 51 | status: -404, 52 | msg: '网络异常' 53 | } 54 | } 55 | 56 | function checkCode (res) { 57 | // 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户 58 | if (res.status === -404) { 59 | console.log(res.msg) 60 | } 61 | if (res.data && (!res.data.success)) { 62 | // alert(res.data.error_msg) 63 | } 64 | // console.log('loadding') 65 | store.dispatch({ 66 | type: 'set_ShowLoading', 67 | data: false 68 | }) 69 | return res 70 | } 71 | 72 | export default { 73 | post (url, data) { 74 | return axios({ 75 | method: 'post', 76 | baseURL: process.env.BASE_API, 77 | url, 78 | data: qs.stringify(data), 79 | timeout: 15000, 80 | headers: { 81 | // 'X-Requested-With': 'XMLHttpRequest', 82 | 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 83 | } 84 | }).then( 85 | (response) => { 86 | return checkStatus(response) 87 | } 88 | ).then( 89 | (res) => { 90 | return checkCode(res) 91 | } 92 | ) 93 | }, 94 | 95 | upload (url, data) { 96 | return axios({ 97 | method: 'post', 98 | baseURL: process.env.BASE_API, 99 | url, 100 | data, 101 | timeout: 15000, 102 | headers: { 103 | // 'X-Requested-With': 'XMLHttpRequest', 104 | 'Content-Type': 'multipart/form-data' 105 | } 106 | }).then( 107 | (response) => { 108 | return checkStatus(response) 109 | } 110 | ).then( 111 | (res) => { 112 | return checkCode(res) 113 | } 114 | ) 115 | }, 116 | 117 | get (url, params) { 118 | return axios({ 119 | method: 'get', 120 | baseURL: process.env.BASE_API, 121 | url, 122 | params, // get 请求时带的参数 123 | timeout: 15000 124 | }).then( 125 | (response) => { 126 | return checkStatus(response) 127 | } 128 | ).then( 129 | (res) => { 130 | return checkCode(res) 131 | } 132 | ) 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /src/components/music/collection/collection.vue: -------------------------------------------------------------------------------- 1 | 15 | 97 | 124 | -------------------------------------------------------------------------------- /src/components/common/coverhistory/coverhistory.vue: -------------------------------------------------------------------------------- 1 | 19 | 59 | -------------------------------------------------------------------------------- /src/store/modules/audio.js: -------------------------------------------------------------------------------- 1 | const audio = { 2 | state: { 3 | currentAudio: { 4 | url: '', 5 | duration: '', 6 | picurl: '', 7 | index: 1 8 | }, 9 | // 音乐的元素 10 | audioEle: '', 11 | // 滚动的歌词内容 为了之后的移动 12 | audioLrcContent: '', 13 | // lrc的索引 显示歌词使用 14 | lrcIndex: 0, 15 | // 当前的音乐时间 16 | currentTime: '00:00', 17 | // 当前的时长 18 | currentD: 0, 19 | // 音频是否正在播放 20 | isPlaying: false, 21 | // 播放模式 1-列表播放 2-单曲循环 3-随机播放 22 | playType: 1, 23 | // 音乐显示列表 其他列表都要把内容赋值给他 才能可以显示内容 24 | musicList: {}, 25 | // 搜索列表 26 | musicSearchList: [], 27 | // 歌单列表 28 | musicSheetList: {}, 29 | // 播放列表 30 | musicPlayList: {}, 31 | // 收集歌曲的内容 32 | musicCollectList: [] 33 | }, 34 | getters: { 35 | getCurrentAudio: state => state.currentAudio, 36 | getAudioEle: state => state.audioEle, 37 | getMusicList: state => state.musicList, 38 | getMusicSearchList: state => state.musicSearchList, 39 | getMusicSheetList: state => state.musicSheetList, 40 | getMusicPlayList: state => state.musicPlayList, 41 | getMusicCollectList: state => state.musicCollectList, 42 | getAudioLrcContent: state => state.audioLrcContent, 43 | getAudiolrcIndex: state => state.lrcIndex, 44 | getAudioIsPlay: state => state.isPlaying, 45 | getAudioCurrentTime: state => state.currentTime, 46 | getAudioCurrentD: state => state.currentD, 47 | getAudioPlayType: state => state.playType 48 | }, 49 | mutations: { 50 | setCurrentAudio (state, obj) { 51 | state.currentAudio = obj.data 52 | }, 53 | setAudioEle (state, obj) { 54 | state.audioEle = obj.data 55 | }, 56 | setMusicList (state, obj) { 57 | state.musicList = obj.data 58 | }, 59 | setMusicSearchList (state, obj) { 60 | state.musicSearchList = obj.data 61 | }, 62 | setMusicSheetList (state, obj) { 63 | state.musicSheetList = obj.data 64 | }, 65 | setMusicPlayList (state, obj) { 66 | state.musicPlayList = obj.data 67 | }, 68 | setMusicCollectList (state, obj) { 69 | state.musicCollectList = obj.data 70 | }, 71 | setAudioLrcContent (state, obj) { 72 | state.audioLrcContent = obj.data 73 | }, 74 | setAudiolrcIndex (state, obj) { 75 | state.lrcIndex = obj.data 76 | }, 77 | setAudioIsPlay (state, obj) { 78 | state.isPlaying = obj 79 | }, 80 | setAudioCurrentTime (state, obj) { 81 | state.currentTime = obj 82 | }, 83 | setAudioCurrentD (state, obj) { 84 | state.currentD = obj 85 | }, 86 | setAudioPlayType (state, obj) { 87 | state.playType = obj.data 88 | } 89 | }, 90 | actions: { 91 | set_CurrentAudio ({commit}, obj) { 92 | // alert(JSON.stringify(obj.data)) 93 | commit('setCurrentAudio', obj) 94 | }, 95 | set_AudioEle ({commit}, obj) { 96 | commit('setAudioEle', obj) 97 | }, 98 | set_MusicList ({commit}, obj) { 99 | commit('setMusicList', obj) 100 | }, 101 | set_MusicSearchList ({commit}, obj) { 102 | commit('setMusicSearchList', obj) 103 | }, 104 | set_MusicSheetList ({commit}, obj) { 105 | commit('setMusicSheetList', obj) 106 | }, 107 | set_MusicPlayList ({commit}, obj) { 108 | commit('setMusicPlayList', obj) 109 | }, 110 | set_MusicCollectList ({commit}, obj) { 111 | commit('setMusicCollectList', obj) 112 | }, 113 | set_AudioCurrentTime ({commit}, obj) { 114 | commit('setAudioCurrentTime', obj) 115 | }, 116 | set_AudioCurrentD ({commit}, obj) { 117 | commit('setAudioCurrentD', obj) 118 | }, 119 | set_AudioPlayType ({commit}, obj) { 120 | commit('setAudioPlayType', obj) 121 | } 122 | } 123 | } 124 | 125 | export default audio 126 | -------------------------------------------------------------------------------- /src/components/music/playlist/playlist.vue: -------------------------------------------------------------------------------- 1 | 15 | 88 | 115 | -------------------------------------------------------------------------------- /src/components/common/usercompletion/usercompletion.vue: -------------------------------------------------------------------------------- 1 | 40 | 109 | 111 | -------------------------------------------------------------------------------- /src/components/common/selectmask/selectmask.vue: -------------------------------------------------------------------------------- 1 | 18 | 69 | 136 | -------------------------------------------------------------------------------- /src/components/common/colorpicker/colorpicker.vue: -------------------------------------------------------------------------------- 1 | 13 | 79 | 107 | -------------------------------------------------------------------------------- /src/components/common/fixedbg/fixedbg.vue: -------------------------------------------------------------------------------- 1 | 6 | 101 | 141 | -------------------------------------------------------------------------------- /src/components/about/me/me.vue: -------------------------------------------------------------------------------- 1 | 26 | 79 | 147 | -------------------------------------------------------------------------------- /src/components/about/resources/audio/audio.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 73 | 74 | -------------------------------------------------------------------------------- /src/components/music/searchlist/searchlist.vue: -------------------------------------------------------------------------------- 1 | 13 | 130 | 140 | -------------------------------------------------------------------------------- /src/common/js/Utils.js: -------------------------------------------------------------------------------- 1 | import {Navigator} from './Navigator.js' 2 | // 这是工具的相关js操作 3 | export const Utils = { 4 | // 设置多个元素的统一样式 5 | // selectors： document.querySelectorAll 的参数 如 div.div_img, div.content span,可添加多个 逗号隔开 6 | // callback (dom): 回调函数 dom是回调的参数 表示需要操作的这些dom 7 | setMoreEleStyle (selectors, callback) { 8 | Array.prototype.forEach.call(document.querySelectorAll(`${selectors}`), dom => { 9 | if (callback && typeof callback === 'function') { 10 | callback(dom) 11 | } 12 | }) 13 | }, 14 | // 设置console 带有自定义美化的功能 15 | // text： 内容; 16 | // isOneLine： 是否一行显示（1行相当于3行log的高度 所以不能换行）; 17 | // author：用户名称 ； 18 | setConsole (text = 'this is console!', isOneLine = 1, author = '未曾遗忘的青春') { 19 | if (isOneLine) { 20 | console.log('') 21 | console.log(`%c${text} --- ${author}`, `background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2Y2NjYyIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjMzM5OTk5Ii8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNjY2NjOTkiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzk5Y2NmZiIvPjxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjY2NjY2ZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY5OWNjIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');background-size: 100%;background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #66cccc), color-stop(20%, #339999), color-stop(40%, #cccc99), color-stop(60%, #99ccff), color-stop(80%, #ccccff), color-stop(100%, #ff99cc));background-image: -moz-linear-gradient(left, #66cccc 0%, #339999 20%, #cccc99 40%, #99ccff 60%, #ccccff 80%, #ff99cc 100%);background-image: -webkit-linear-gradient(left, #66cccc 0%, #339999 20%, #cccc99 40%, #99ccff 60%, #ccccff 80%, #ff99cc 100%);background-image: linear-gradient(to right, #66cccc 0%, #339999 20%, #cccc99 40%, #99ccff 60%, #ccccff 80%, #ff99cc 100%);padding:20px 40px;color:#fff;font-size:12px;`) 22 | console.log('') 23 | } else { 24 | console.log(`%c${text} --- ${author}`, `background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2Y2NjYyIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjMzM5OTk5Ii8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNjY2NjOTkiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzk5Y2NmZiIvPjxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjY2NjY2ZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY5OWNjIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');background-size: 100%;background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #66cccc), color-stop(20%, #339999), color-stop(40%, #cccc99), color-stop(60%, #99ccff), color-stop(80%, #ccccff), color-stop(100%, #ff99cc));background-image: -moz-linear-gradient(left, #66cccc 0%, #339999 20%, #cccc99 40%, #99ccff 60%, #ccccff 80%, #ff99cc 100%);background-image: -webkit-linear-gradient(left, #66cccc 0%, #339999 20%, #cccc99 40%, #99ccff 60%, #ccccff 80%, #ff99cc 100%);background-image: linear-gradient(to right, #66cccc 0%, #339999 20%, #cccc99 40%, #99ccff 60%, #ccccff 80%, #ff99cc 100%);padding:0;color:#fff;font-size:12px;`) 25 | } 26 | }, 27 | 28 | // 一个promise 通过手机自带的设备传感器感应xyz方向的角度实现移动端背景图片视差显示效果 29 | moveImage () { 30 | const deviceVersion = Navigator.deviceVersion() 31 | return new Promise((resolve, reject) => { 32 | if (deviceVersion.ios) { 33 | resolve() 34 | } else if (deviceVersion.android) { 35 | reject() 36 | } 37 | }) 38 | }, 39 | 40 | // 格式化日期工具 41 | formatDate (data, fmt) { 42 | var o = { 43 | // 'y+': data.getFullYear() + 1, // 月份 44 | 'M+': data.getMonth() + 1, // 月份 45 | 'd+': data.getDate(), // 日 46 | 'h+': data.getHours(), // 小时 47 | 'm+': data.getMinutes(), // 分 48 | 's+': data.getSeconds(), // 秒 49 | 'q+': Math.floor((data.getMonth() + 3) / 3), // 季度 50 | 'S': data.getMilliseconds() // 毫秒 51 | } 52 | if (/(y+)/.test(fmt)) { 53 | fmt = fmt.replace(RegExp.$1, (data.getFullYear() + '').substr(4 - RegExp.$1.length)) 54 | } 55 | for (var k in o) { 56 | if (new RegExp('(' + k + ')').test(fmt)) { 57 | fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) 58 | } 59 | } 60 | return fmt 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /static/font-icon/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('fonts/icomoon.eot?43z8q8'); 4 | src: url('fonts/icomoon.eot?43z8q8#iefix') format('embedded-opentype'), 5 | url('fonts/icomoon.ttf?43z8q8') format('truetype'), 6 | url('fonts/icomoon.woff?43z8q8') format('woff'), 7 | url('fonts/icomoon.svg?43z8q8#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | /* use !important to prevent issues with browser extensions that change fonts */ 14 | font-family: 'icomoon' !important; 15 | font-style: normal; 16 | font-weight: normal; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | .icon-reward:before { 27 | content: "\e93b"; 28 | } 29 | .icon-bing:before { 30 | content: "\e93a"; 31 | } 32 | .icon-imgsetting:before { 33 | content: "\e939"; 34 | } 35 | .icon-canclefullscreen:before { 36 | content: "\e932"; 37 | } 38 | .icon-fullscreen:before { 39 | content: "\e933"; 40 | } 41 | .icon-github:before { 42 | content: "\e936"; 43 | } 44 | .icon-clown:before { 45 | content: "\e934"; 46 | } 47 | .icon-smile:before { 48 | content: "\e935"; 49 | } 50 | .icon-works:before { 51 | content: "\e937"; 52 | } 53 | .icon-about:before { 54 | content: "\e938"; 55 | } 56 | .icon-erji:before { 57 | content: "\e931"; 58 | } 59 | .icon-date:before { 60 | content: "\e92e"; 61 | } 62 | .icon-rank-list:before { 63 | content: "\e92f"; 64 | } 65 | .icon-fm:before { 66 | content: "\e930"; 67 | } 68 | .icon-list-circle-small:before { 69 | content: "\e92a"; 70 | } 71 | .icon-download:before { 72 | content: "\e92b"; 73 | } 74 | .icon-like:before { 75 | content: "\e92c"; 76 | } 77 | .icon-msg:before { 78 | content: "\e92d"; 79 | } 80 | .icon-playdetail:before { 81 | content: "\e925"; 82 | } 83 | .icon-pause-detail:before { 84 | content: "\e926"; 85 | } 86 | .icon-prevdetail:before { 87 | content: "\e927"; 88 | } 89 | .icon-nextdetail:before { 90 | content: "\e928"; 91 | } 92 | .icon-music-shunxu:before { 93 | content: "\e929"; 94 | } 95 | .icon-back:before { 96 | content: "\e924"; 97 | } 98 | .icon-edit-paper:before { 99 | content: "\e900"; 100 | } 101 | .icon-edit:before { 102 | content: "\e91b"; 103 | } 104 | .icon-delete:before { 105 | content: "\e923"; 106 | } 107 | .icon-add-project:before { 108 | content: "\e913"; 109 | } 110 | .icon-add:before { 111 | content: "\e921"; 112 | } 113 | .icon-list-music:before { 114 | content: "\e91d"; 115 | } 116 | .icon-night:before { 117 | content: "\e91e"; 118 | } 119 | .icon-day:before { 120 | content: "\e91f"; 121 | } 122 | .icon-community:before { 123 | content: "\e920"; 124 | } 125 | .icon-wangyi:before { 126 | content: "\e90e"; 127 | } 128 | .icon-share:before { 129 | content: "\e90f"; 130 | } 131 | .icon-play:before { 132 | content: "\e910"; 133 | } 134 | .icon-list-circle:before { 135 | content: "\e911"; 136 | } 137 | .icon-setting:before { 138 | content: "\e914"; 139 | } 140 | .icon-theme:before { 141 | content: "\e915"; 142 | } 143 | .icon-friend:before { 144 | content: "\e916"; 145 | } 146 | .icon-set-time:before { 147 | content: "\e917"; 148 | } 149 | .icon-lock:before { 150 | content: "\e918"; 151 | } 152 | .icon-car:before { 153 | content: "\e919"; 154 | } 155 | .icon-cloud:before { 156 | content: "\e91a"; 157 | } 158 | .icon-exit:before { 159 | content: "\e91c"; 160 | } 161 | .icon-place:before { 162 | content: "\e909"; 163 | } 164 | .icon-SHARE2:before { 165 | content: "\e90a"; 166 | } 167 | .icon-zuijinplay:before { 168 | content: "\e90b"; 169 | } 170 | .icon-diantai:before { 171 | content: "\e90c"; 172 | } 173 | .icon-collect:before { 174 | content: "\e90d"; 175 | } 176 | .icon-coin:before { 177 | content: "\e908"; 178 | } 179 | .icon-market:before { 180 | content: "\e901"; 181 | } 182 | .icon-menu:before { 183 | content: "\e902"; 184 | } 185 | .icon-message:before { 186 | content: "\e903"; 187 | } 188 | .icon-music:before { 189 | content: "\e904"; 190 | } 191 | .icon-search:before { 192 | content: "\e905"; 193 | } 194 | .icon-vip:before { 195 | content: "\e906"; 196 | } 197 | .icon-wangyiyun:before { 198 | content: "\e907"; 199 | } 200 | .icon-close:before { 201 | content: "\e912"; 202 | } 203 | .icon-down:before { 204 | content: "\e922"; 205 | } 206 | .icon-left:before { 207 | content: "\e940"; 208 | } 209 | .icon-pause:before { 210 | content: "\e955"; 211 | } 212 | .icon-right:before { 213 | content: "\e963"; 214 | } 215 | .icon-up:before { 216 | content: "\e978"; 217 | } 218 | .icon-music-danqu1:before { 219 | content: "\e94a"; 220 | } 221 | .icon-music-random:before { 222 | content: "\e94b"; 223 | } 224 | .icon-volume-medium:before { 225 | content: "\ea27"; 226 | } 227 | -------------------------------------------------------------------------------- /src/components/about/resources/resources.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 60 | 61 | -------------------------------------------------------------------------------- /src/components/common/weather/weather.vue: -------------------------------------------------------------------------------- 1 | 32 | 70 | -------------------------------------------------------------------------------- /src/components/pic/picList/picList.vue: -------------------------------------------------------------------------------- 1 | 17 | 81 | 193 | -------------------------------------------------------------------------------- /src/components/music/albumlist/albumlist.vue: -------------------------------------------------------------------------------- 1 | 35 | 147 | 167 | -------------------------------------------------------------------------------- /src/components/about/suggest/suggest.vue: -------------------------------------------------------------------------------- 1 | 22 | 91 | -------------------------------------------------------------------------------- /src/components/common/userSetting/userSetting.vue: -------------------------------------------------------------------------------- 1 | 22 | 90 | 200 | -------------------------------------------------------------------------------- /src/components/about/news/news.vue: -------------------------------------------------------------------------------- 1 | 25 | 113 | -------------------------------------------------------------------------------- /src/components/about/about.vue: -------------------------------------------------------------------------------- 1 | 77 | 117 | 199 | -------------------------------------------------------------------------------- /src/components/music/search/search.vue: -------------------------------------------------------------------------------- 1 | 48 | 82 | 185 | -------------------------------------------------------------------------------- /src/components/common/updatetips/updatetips.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 128 | 129 | -------------------------------------------------------------------------------- /src/components/reward/reward.vue: -------------------------------------------------------------------------------- 1 | 39 | 73 | 243 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 237 | 238 | -------------------------------------------------------------------------------- /src/components/music/toplist/toplist.vue: -------------------------------------------------------------------------------- 1 | 69 | 138 | 203 | --------------------------------------------------------------------------------