1190 lines
73 KiB
HTML
1190 lines
73 KiB
HTML
<!DOCTYPE html>
|
||
<html style="display: none;" lang="zh">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<!--
|
||
© Material Theme
|
||
https://github.com/viosey/hexo-theme-material
|
||
Version: 1.4.0 -->
|
||
<script>window.materialVersion = "1.4.0"</script>
|
||
|
||
<!-- Title -->
|
||
|
||
<title>
|
||
|
||
vue高仿qq音乐官网 |
|
||
|
||
Feax's Blog
|
||
</title>
|
||
|
||
<!-- dns prefetch -->
|
||
<meta http-equiv="x-dns-prefetch-control" content="on">
|
||
|
||
|
||
<link rel="dns-prefetch" href="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"/>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Meta & Info -->
|
||
<meta http-equiv="X-UA-Compatible">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||
<meta name="theme-color" content="#0097A7">
|
||
<meta name="author" content="Feax">
|
||
<meta name="description" itemprop="description" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2">
|
||
<meta name="keywords" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2,vue,vuex,vue-router">
|
||
|
||
<!-- Site Verification -->
|
||
|
||
|
||
|
||
<!-- Favicons -->
|
||
<link rel="icon shortcut" type="image/ico" href="/img/favicon.png">
|
||
<link rel="icon" sizes="192x192" href="/img/favicon.png">
|
||
<link rel="apple-touch-icon" href="/img/favicon.png">
|
||
|
||
<!--iOS -->
|
||
<meta name="apple-mobile-web-app-title" content="Title">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||
<meta name="HandheldFriendly" content="True">
|
||
<meta name="MobileOptimized" content="480">
|
||
|
||
<!-- Add to homescreen for Chrome on Android -->
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
|
||
<!-- Add to homescreen for Safari on iOS -->
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||
<meta name="apple-mobile-web-app-title" content="Feax's Blog">
|
||
|
||
<!-- The Open Graph protocol -->
|
||
<meta property="og:url" content="http://blog.jzxer.cn">
|
||
<meta property="og:type" content="blog">
|
||
<meta property="og:title" content="vue高仿qq音乐官网 | Feax's Blog">
|
||
<meta property="og:image" content="/img/favicon.png" />
|
||
<meta property="og:description" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2">
|
||
<meta property="og:article:tag" content="vue"> <meta property="og:article:tag" content="vuex"> <meta property="og:article:tag" content="vue-router">
|
||
|
||
|
||
<meta property="article:published_time" content="6月 15, 2017" />
|
||
<meta property="article:modified_time" content="5月 25, 2018" />
|
||
|
||
|
||
<!-- The Twitter Card protocol -->
|
||
<meta name="twitter:title" content="vue高仿qq音乐官网 | Feax's Blog">
|
||
<meta name="twitter:description" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2">
|
||
<meta name="twitter:image" content="/img/favicon.png">
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:url" content="http://blog.jzxer.cn" />
|
||
|
||
<!-- Add canonical link for SEO -->
|
||
|
||
<link rel="canonical" href="http://blog.jzxer.cn/vue高仿qq音乐官网.html" />
|
||
|
||
|
||
<!-- Structured-data for SEO -->
|
||
|
||
|
||
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Article",
|
||
"publisher": {
|
||
"@type": "Organization",
|
||
"name": "Feax's Blog",
|
||
"logo": "/img/favicon.png"
|
||
},
|
||
"author": {
|
||
"@type": "Person",
|
||
"name": "Feax",
|
||
"image": {
|
||
"@type": "ImageObject",
|
||
"url": "/img/favicon.png"
|
||
},
|
||
"description": "对的，坚持！错的，放弃！"
|
||
},
|
||
"headline": "vue高仿qq音乐官网",
|
||
"url": "http://blog.jzxer.cn/vue高仿qq音乐官网.html",
|
||
"datePublished": "6月 15, 2017",
|
||
"dateModified": "5月 25, 2018",
|
||
"description": "web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2",
|
||
"mainEntityOfPage": {
|
||
"@type": "WebPage",
|
||
"@id": "http://blog.jzxer.cn"
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
|
||
<!--[if lte IE 9]>
|
||
<link rel="stylesheet" href="/css/ie-blocker.css">
|
||
|
||
|
||
<script src="/js/ie-blocker.zhCN.js"></script>
|
||
|
||
<![endif]-->
|
||
|
||
<!-- Import lsloader -->
|
||
<script>(function(){window.lsloader={jsRunSequence:[],jsnamemap:{},cssnamemap:{}};lsloader.removeLS=function(key){try{localStorage.removeItem(key)}catch(e){}};lsloader.setLS=function(key,val){try{localStorage.setItem(key,val)}catch(e){}};lsloader.getLS=function(key){var val="";try{val=localStorage.getItem(key)}catch(e){val=""}return val};versionString="/*"+materialVersion+"*/";lsloader.clean=function(){try{var keys=[];for(var i=0;i<localStorage.length;i++){keys.push(localStorage.key(i))}keys.forEach(function(key){var data=lsloader.getLS(key);if(data&&data.indexOf(versionString)===-1){lsloader.removeLS(key)}})}catch(e){}};lsloader.clean();lsloader.load=function(jsname,jspath,cssonload){cssonload=cssonload||function(){};var code;code=this.getLS(jsname);if(code&&code.indexOf(versionString)===-1){this.removeLS(jsname);this.requestResource(jsname,jspath,cssonload);return}if(code){var versionNumber=code.split(versionString)[0];if(versionNumber!=jspath){console.log("reload:"+jspath);this.removeLS(jsname);this.requestResource(jsname,jspath,cssonload);return}code=code.split(versionString)[1];if(/\.js?.+$/.test(versionNumber)){this.jsRunSequence.push({name:jsname,code:code});this.runjs(jspath,jsname,code)}else{document.getElementById(jsname).appendChild(document.createTextNode(code));cssonload()}}else{this.requestResource(jsname,jspath,cssonload)}};lsloader.requestResource=function(name,path,cssonload){var that=this;if(/\.js?.+$/.test(path)){this.iojs(path,name,function(path,name,code){that.setLS(name,path+versionString+code);that.runjs(path,name,code)})}else if(/\.css?.+$/.test(path)){this.iocss(path,name,function(code){document.getElementById(name).appendChild(document.createTextNode(code));that.setLS(name,path+versionString+code)},cssonload)}};lsloader.iojs=function(path,jsname,callback){var that=this;that.jsRunSequence.push({name:jsname,code:""});try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(path,jsname,xhr.response);return}}that.jsfallback(path,jsname)}};xhr.send(null)}catch(e){that.jsfallback(path,jsname)}};lsloader.iocss=function(path,jsname,callback,cssonload){var that=this;try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(xhr.response);cssonload();return}}that.cssfallback(path,jsname,cssonload)}};xhr.send(null)}catch(e){that.cssfallback(path,jsname,cssonload)}};lsloader.iofonts=function(path,jsname,callback,cssonload){var that=this;try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(xhr.response);cssonload();return}}that.cssfallback(path,jsname,cssonload)}};xhr.send(null)}catch(e){that.cssfallback(path,jsname,cssonload)}};lsloader.runjs=function(path,name,code){if(!!name&&!!code){for(var k in this.jsRunSequence){if(this.jsRunSequence[k].name==name){this.jsRunSequence[k].code=code}}}if(!!this.jsRunSequence[0]&&!!this.jsRunSequence[0].code&&this.jsRunSequence[0].status!="failed"){var script=document.createElement("script");script.appendChild(document.createTextNode(this.jsRunSequence[0].code));script.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(script);this.jsRunSequence.shift();if(this.jsRunSequence.length>0){this.runjs()}}else if(!!this.jsRunSequence[0]&&this.jsRunSequence[0].status=="failed"){var that=this;var script=document.createElement("script");script.src=this.jsRunSequence[0].path;script.type="text/javascript";this.jsRunSequence[0].status="loading";script.onload=function(){that.jsRunSequence.shift();if(that.jsRunSequence.length>0){that.runjs()}};document.body.appendChild(script)}};lsloader.tagLoad=function(path,name){this.jsRunSequence.push({name:name,code:"",path:path,status:"failed"});this.runjs()};lsloader.jsfallback=function(path,name){if(!!this.jsnamemap[name]){return}else{this.jsnamemap[name]=name}for(var k in this.jsRunSequence){if(this.jsRunSequence[k].name==name){this.jsRunSequence[k].code="";this.jsRunSequence[k].status="failed";this.jsRunSequence[k].path=path}}this.runjs()};lsloader.cssfallback=function(path,name,cssonload){if(!!this.cssnamemap[name]){return}else{this.cssnamemap[name]=1}var link=document.createElement("link");link.type="text/css";link.href=path;link.rel="stylesheet";link.onload=link.onerror=cssonload;var root=document.getElementsByTagName("script")[0];root.parentNode.insertBefore(link,root)};lsloader.runInlineScript=function(scriptId,codeId){var code=document.getElementById(codeId).innerText;this.jsRunSequence.push({name:scriptId,code:code});this.runjs()};lsloader.loadCombo=function(jslist){var updateList="";var requestingModules={};for(var k in jslist){var LS=this.getLS(jslist[k].name);if(!!LS){var version=LS.split(versionString)[0];var code=LS.split(versionString)[1]}else{var version=""}if(version==jslist[k].path){this.jsRunSequence.push({name:jslist[k].name,code:code,path:jslist[k].path})}else{this.jsRunSequence.push({name:jslist[k].name,code:null,path:jslist[k].path,status:"comboloading"});requestingModules[jslist[k].name]=true;updateList+=(updateList==""?"":";")+jslist[k].path}}var that=this;if(!!updateList){var xhr=new XMLHttpRequest;xhr.open("get",combo+updateList,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){that.runCombo(xhr.response,requestingModules);return}}else{for(var i in that.jsRunSequence){if(requestingModules[that.jsRunSequence[i].name]){that.jsRunSequence[i].status="failed"}}that.runjs()}}};xhr.send(null)}this.runjs()};lsloader.runCombo=function(comboCode,requestingModules){comboCode=comboCode.split("/*combojs*/");comboCode.shift();for(var k in this.jsRunSequence){if(!!requestingModules[this.jsRunSequence[k].name]&&!!comboCode[0]){this.jsRunSequence[k].status="comboJS";this.jsRunSequence[k].code=comboCode[0];this.setLS(this.jsRunSequence[k].name,this.jsRunSequence[k].path+versionString+comboCode[0]);comboCode.shift()}}this.runjs()}})();</script>
|
||
|
||
<!-- Import CSS & jQuery -->
|
||
|
||
<style id="css/material.min.css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("css/material.min.css","/css/material.min.css?fJTiM/K1J3dWIruo3pxtAw==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";})</script>
|
||
<style id="css/style.min.css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("css/style.min.css","/css/style.min.css?oCSEO3ST+aEypEwttTDI9g==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";})</script>
|
||
|
||
|
||
<style>
|
||
|
||
.footer-sns-facebook {
|
||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xMzguNiA3OGMtMjIuNCA1LjItNTUuOCA0MC4yLTYwLjYgNjMuNC0xLjQgNi40LTIgMTI5LjgtMS42IDM2Ny42LjYgMjk4LjYgMSAzNTguOCAzLjQgMzYzIDExIDIwLjIgMjEuNiAzMi40IDM3LjIgNDMgMTUgMTAuMiAxNy40IDExLjIgMzMgMTMgMTEuMiAxLjQgMTM2IDIgMzY1IDEuNiAzMTQtLjYgMzQ4LjYtMSAzNTUtMy44IDE1LjgtNy4yIDMzLjgtMjIgNDMuMi0zNS40IDUuMi03LjQgMTAuOC0xNi42IDEyLjYtMjAuNCAyLjgtNi40IDMuMi00MC44IDMuOC0zNTQgLjQtMjIzLS4yLTM1My40LTEuNC0zNjUtMi0xNy0yLjYtMTguNi0xMy0zNC04LjYtMTIuNi0xNC4yLTE4LjQtMjUuMi0yNS44LTcuOC01LjQtMTcuNC0xMS0yMS42LTEyLjQtNi0yLjItNzIuOC0yLjYtMzY1LjQtMi42LTE5Ni44LjItMzYxIC44LTM2NC40IDEuOHptNjU3LjYgODcuOGw0LjggMy44djU1LjJjMCA1NC42IDAgNTUuMi00LjYgNTkuNi00LjQgNC40LTYgNC42LTUwLjIgNS42bC00NS42IDEtNy4yIDUuNmMtMTAuNCA4LTE2LjggMTcuMi0xOS4yIDI3LjQtMSA1LTEuOCAyNC44LTEuOCA0NCAuMiAzOCAxLjYgNDQuNiAxMC44IDQ4IDIuOCAxLjIgMjguNCAyIDU2LjggMiA0Ny44IDAgNTIgLjIgNTYuMiAzLjhsNC44IDMuOHY1NS4yYzAgNTQuNiAwIDU1LjItNC42IDU5LjYtNC40IDQuNi01LjQgNC42LTU3IDUuMi0yOC44LjItNTQuNC44LTU2LjggMS40LTIuNC42LTUuNiAzLTYuOCA1LjQtMS44IDMuMi0yLjQgNDEuNC0yLjYgMTQzLjJsLS4yIDEzOC44LTUuNiA0LjgtNS42IDQuOEg2MDljLTUyLjQgMC01Mi44IDAtNTguMi00LjZsLTUuNC00LjYtLjItMTQwLjYtLjItMTQwLjYtNC44LTMuOGMtNC4yLTMuNC04LTMuOC0zNS42LTMuOC0zMi44IDAtNDEtMS44LTQzLjYtMTAtLjYtMi4yLTEuMi0yNS40LTEuMi01MS40IDAtNjAuOC0uMi01NyAzLjQtNjEuNiAyLjgtMy42IDYtNCAzNy44LTUgMzMtMSAzNS4yLTEuMiAzOS40LTUuNiA0LjYtNC40IDQuNi01LjIgNS44LTcxIDEuMi03My40LjItNjcuMiAxNi42LTk5LjQgOC0xNS44IDEyLjgtMjIgMjgtMzcgMTUuMi0xNS4yIDIxLjQtMTkuNiAzOC4yLTI4IDExLTUuNCAyNC0xMSAyOS0xMi4yIDYuMi0xLjggMjguNi0yLjYgNzEuMi0yLjYgNTguNi0uMiA2Mi42IDAgNjcgMy42eiIvPjwvc3ZnPg==);
|
||
}
|
||
|
||
|
||
.footer-sns-twitter {
|
||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xMzguNiA3OGMtMjIuNCA1LjItNTUuOCA0MC4yLTYwLjYgNjMuNC0xLjQgNi40LTIgMTI5LjgtMS42IDM2Ny42LjYgMjk4LjYgMSAzNTguOCAzLjQgMzYzIDExIDIwLjIgMjEuNiAzMi40IDM3LjIgNDMgMTUgMTAuMiAxNy40IDExLjIgMzMgMTMgMTEuMiAxLjQgMTM2IDIgMzY1IDEuNiAzMTQtLjYgMzQ4LjYtMSAzNTUtMy44IDE1LjgtNy4yIDMzLjgtMjIgNDMuMi0zNS40IDUuMi03LjQgMTAuOC0xNi42IDEyLjYtMjAuNCAyLjgtNi40IDMuMi00MC44IDMuOC0zNTQgLjQtMjIzLS4yLTM1My40LTEuNC0zNjUtMi0xNy0yLjYtMTguNi0xMy0zNC04LjYtMTIuNi0xNC4yLTE4LjQtMjUuMi0yNS44LTcuOC01LjQtMTcuNC0xMS0yMS42LTEyLjQtNi0yLjItNzIuOC0yLjYtMzY1LjQtMi42LTE5Ni44LjItMzYxIC44LTM2NC40IDEuOHptNTMyLjggMjA1YzEwIDQgMjMgMTAuOCAyOC44IDE1LjIgMTIuNiA5LjIgMTYuNiAxMC42IDI5LjQgOS40IDYuNi0uNiAxMy0zLjIgMjAuNC04LjIgMTEuMi03LjYgMTkuNC05LjIgMjMuNi01IDMuNiAzLjYgMi44IDktMi44IDE4LjYtNy4yIDEyLjQtNiAxOC44IDQuMiAyNC4yIDQuNCAyLjIgOC4yIDUuNiA4LjYgNy40IDEgNC44LTEyLjYgMjQuMi0yMiAzMS44LTExLjggOS4yLTE3LjIgMjIuNi0xOS42IDQ3LjgtNC44IDUwLjQtNy44IDY2LjYtMTYuNCA4NS40LTMgNy03IDE3LjgtOC44IDI0LTEuOCA2LjQtNSAxNC42LTcuNCAxOC40LTIuMiAzLjgtNy40IDEzLTExLjQgMjAuNC0xNy4yIDMwLjgtNDMuNCA2MS40LTcxLjQgODMuOC0yNS42IDIwLjQtNDYgMzMuMi02NC4yIDQwLjItOC40IDMuMi0xOCA3LjYtMjEuNCA5LjYtNy40IDQuNi0yMi40IDguNi01Ny4yIDE1LTYyLjIgMTEuNi03OS4yIDExLjQtMTM1LjYtMS0zMi40LTctMzguNi05LTUyLTE2LjgtMjEuNC0xMi42LTI0LjItMTQuOC0yNC4yLTE5LjQgMC02LjIgMTAuMi05LjIgMzUtMTAuNCAyMi40LTEgMjguNi0yLjYgNTctMTQuMiAyMy44LTkuOCAyOS40LTEyLjggMzAuNC0xNi44IDIuMi04LjItMy0xMy4yLTI2LjgtMjUuNC0yNS44LTEzLjItMzIuMi0xOC40LTQzLjgtMzUuOC05LTEzLjYtMTAtMjEuMi0zLjYtMzMuNiA1LjQtMTAuOCAzLjYtMTUtMTEuOC0yNS40LTktNi0xNC0xMS42LTIwLjgtMjIuNi0yMy40LTM3LjgtMjUtNTAuOC03LjItNTkuOCA0LjgtMi40IDkuNC01LjQgMTAuMi02LjYgMi44LTQuMi0uNC0xNS42LTguNC0yOS0xMS42LTE5LjYtMTMuMi0yNS44LTEzLjItNTUuMiAwLTI4LjggMi42LTM3LjggMTItNDAuMiA5LTIuMiAxNC44IDEgMzUuNiAyMC4yIDI0LjggMjIuOCA0My42IDM2LjYgNjIuOCA0NS44IDggMy44IDE3LjggOS4yIDIyIDEyIDQuMiAyLjggMTQuOCA3IDIzLjQgOS4yIDguNiAyLjIgMjQuMiA2LjggMzQuOCAxMC4yIDEzLjQgNC40IDIzLjYgNi40IDMzIDYuNiAxMi44LjIgMTQuMi0uMiAxOC42LTUuNCA0LTQuOCA0LjgtNy44IDQuOC0xOS4yIDAtMTQuNCA1LjYtMzkuNiAxMS4yLTUwLjYgNC4yLTguNCAyOS4yLTM0LjIgMzkuOC00MS40IDcuOC01LjQgMzUuNi0xNiA1Mi0yMCAxNC4yLTMuNiAzMi42LTEuMiA1Mi40IDYuOHoiLz48L3N2Zz4=);
|
||
}
|
||
|
||
|
||
.footer-sns-gplus {
|
||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xMzguNiA3OGMtMjIuNCA1LjItNTUuOCA0MC4yLTYwLjYgNjMuNC0xLjQgNi40LTIgMTI5LjgtMS42IDM2Ny42LjYgMjk4LjYgMSAzNTguOCAzLjQgMzYzIDExIDIwLjIgMjEuNiAzMi40IDM3LjIgNDMgMTUgMTAuMiAxNy40IDExLjIgMzMgMTMgMTEuMiAxLjQgMTM2IDIgMzY1IDEuNiAzMTQtLjYgMzQ4LjYtMSAzNTUtMy44IDE1LjgtNy4yIDMzLjgtMjIgNDMuMi0zNS40IDUuMi03LjQgMTAuOC0xNi42IDEyLjYtMjAuNCAyLjgtNi40IDMuMi00MC44IDMuOC0zNTQgLjQtMjIzLS4yLTM1My40LTEuNC0zNjUtMi0xNy0yLjYtMTguNi0xMy0zNC04LjYtMTIuNi0xNC4yLTE4LjQtMjUuMi0yNS44LTcuOC01LjQtMTcuNC0xMS0yMS42LTEyLjQtNi0yLjItNzIuOC0yLjYtMzY1LjQtMi42LTE5Ni44LjItMzYxIC44LTM2NC40IDEuOHpNNDMwIDI5NS40YzQwLjYgMTUuNCA1Ni42IDIzLjggNzIuNiAzOC40IDYuOCA2LjIgNy4yIDE1LjIgMSAyMy40LTYuMiA4LTMzLjYgMzMuOC0zOSAzNi42LTUuNiAyLjgtMTcuNiAyLjgtMjMuMi0uMi0yLjQtMS4yLTguMi01LjItMTMtOC44LTExLjItOC42LTI0LjYtMTEuMi01NS4yLTExLjItMjcuNCAwLTQwLjYgMi42LTUyLjIgMTAuNC00LjQgMi44LTEyLjIgNy42LTE3LjIgMTAuNi0yMyAxMy4yLTUxLjQgNTUtNTUuOCA4Mi40LTIuNiAxNS42LTIuNCAzNC44LjIgNTEgMi44IDE3LjQgMTkuOCA0OC44IDM1LjIgNjUuMiAxNiAxNi42IDQ1IDMzLjYgNjIuOCAzNi42IDI2LjggNC40IDY1LjggMS42IDc5LjQtNS44IDIwLjYtMTEuNCAzMS0xOSA0MS0zMC40IDE4LjgtMjEuNiAyMy40LTM0LjIgMTUuNi00My44LTMuOC00LjgtNC40LTQuOC01MS01LjgtNjAuOC0xLjItNTYuMiAyLjItNTYuMi00My4yIDAtMzIuNC4yLTMzLjIgNC44LTM3IDQuNC0zLjYgOS0zLjggOTItMy44IDc5IDAgODcuOC40IDk0LjIgMy42IDExLjIgNS42IDEzIDExLjQgMTIuOCA0My40IDAgMjUuNC0uOCAzMC44LTcuNiA1OC00IDE2LjYtOS44IDM0LTEyLjYgMzktMi44IDUtOC4yIDE0LjItMTEuNiAyMC42LTguNCAxNS40LTI3LjIgMzYuOC00MC44IDQ2LjYtNS44IDQuNC0xMy44IDEwLjItMTcuNiAxMy4yLTMuOCAzLTExIDctMTYuMiA4LjgtNS4yIDEuOC0xNi4yIDYuNC0yNC40IDEwLTIyLjQgOS42LTM0LjggMTEuNi03MyAxMS42LTM3LjYuMi00Ny0xLjQtNzEtMTItOC4yLTMuNi0xNy42LTcuMi0yMC44LTgtMTUuOC0zLjgtNjctNDUuMi03Ny44LTYyLjgtMi4yLTMuOC03LjYtMTEuNi0xMS44LTE3LjItNC4yLTUuNC05LTE0LTEwLjYtMTktMS44LTQuOC02LjItMTYtMTAtMjQuOC0zLjYtOC44LTcuOC0yMi4yLTkuMi0yOS42LTMuMi0xOC44LTEuNC03OS40IDIuOC05MS40IDEzLjgtNDAuNiAzNS42LTc4IDU4LjgtMTAwLjIgMTQtMTMuNiA0Ny4yLTM2LjQgNTgtMzkuOCA0LjItMS40IDEzLjQtNS4yIDIwLjYtOC40IDIyLTEwIDMyLjgtMTEuNiA3Ni0xMSAzMy44LjYgNDAuNCAxLjIgNTAgNC44em0zNDAuOCA4MC44YzggMy42IDkuNiAxMS4yIDkuMiAzOS4yLS42IDM0LjQtLjYgMzQgNSAzOS42IDQuOCA1IDUuNCA1IDM3LjYgNSA0My40IDAgNDQuNC44IDQzLjIgMzYuMi0uOCAxNy0xLjIgMTguNC02LjQgMjMtNS40IDQuNi02LjYgNC44LTM3LjYgNC44LTMxLjIgMC0zMiAuMi0zNi44IDUtNS42IDUuNC01LjYgNC40LTUgNDEuMi40IDI2LjQuMiAyNy40LTQuNiAzMy00LjggNS42LTYgNS44LTI0LjQgNi40LTIwLjguOC0yOS42LTEuNC0zMy40LTguNC0xLjQtMi42LTItMTUuNi0xLjgtMzUuNi40LTMxLjIuNC0zMS42LTQuNi0zNi42cy01LjYtNS0zNi01Yy0xOC44IDAtMzMtLjgtMzYtMi4yLTcuNi0zLjYtOS42LTExLjItOC44LTMzLjguOC0yOC4yLjQtMjggNDEtMjggNDUuNCAwIDQ1LjQgMCA0NC42LTQyLjYtLjYtMzMtLjYtMzMgNS0zOC40IDQuNC00LjYgNi4yLTUgMjQuOC01IDExIDAgMjIuMiAxIDI1IDIuMnoiLz48L3N2Zz4=);
|
||
}
|
||
|
||
|
||
.footer-sns-weibo {
|
||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xMzUuMiA3OWMtOC42IDMtMjIuOCAxMi40LTMyLjggMjEuOC04LjIgNy44LTIyLjIgMzEtMjQuNiA0MC42LTEgNC4yLTEuNiAxNjctMS42IDM2NC42IDAgMjg0LjguNCAzNTguNCAyLjYgMzY0IDEuNCAzLjggNi44IDEzIDEyIDIwLjQgOC44IDEyLjggMjQgMjUuNCA0MS44IDM1IDYgMy40IDI3IDMuNiAzNjcuNCAzLjYgMjg2LjIgMCAzNjIuNi0uNiAzNjktMi42IDE5LjgtNi4yIDUxLjItMzcuNiA1Ny40LTU3LjQgMi02LjQgMi42LTgyLjYgMi42LTM2OFYxNDFsLTQuMi05Yy0xMS42LTI0LTM5LjItNDkuOC01OC4yLTU0LjItNC4yLTEtMTY4LjYtMS42LTM2NS42LTEuNi0zMDAgMC0zNTkuMi40LTM2NS44IDIuOHptNTU4LjYgMTY5YzguNiAxLjIgMTYuNCA0IDI0IDguNiA2LjIgMy42IDE1LjIgOC4yIDIwLjIgMTAuMiA1LjggMi4yIDE0LjYgOC44IDI1IDE4LjggMjUuNCAyNC44IDMyLjggMzQuOCAzNy44IDUxIDIuNiA4IDcuNCAxOS44IDEwLjggMjYuNCA3LjggMTQuNiAxMS42IDQyLjYgOS40IDY5LTEgMTQuMi0yLjIgMTguNi03LjQgMjYuNC0zLjIgNS4yLTkgMTIuMi0xMi44IDE1LjYtMTMuOCAxMi0zNCA1LjgtMzguOC0xMi0xLjYtNi0xLjQtMTEuNCAxLjItMjMuNCA0LjItMjAgMy00Ni0yLjYtNTguNi0yLjItNS04LTEyLjYtMTIuOC0xNi44LTQuOC00LjItMTQuNi0xNi40LTIxLjgtMjYuOC03LjItMTAuNi0xNS4yLTIwLjgtMTgtMjIuOC0yLjgtMi0xMi42LTYtMjItOS0xNC40LTQuNC0yMC44LTUuNC00My01LjYtMjgtLjItMzEuNC0xLjItNDIuNC0xMS42LTcuNC03LTguNi0xNS42LTMuOC0yNS4yIDctMTMuMiAxNi40LTE2IDU0LjItMTYgMTYuNiAwIDM1LjguOCA0Mi44IDEuOHptLTIxMy42IDc1LjZjMjAuMiAxNS40IDIwLjYgMTYuNCAyMiA0OCAuNiAxNSAxLjggMjkgMi42IDMxIDIuOCA2LjIgMTEgNi42IDIxLjYuNiA1LjQtMy4yIDE0LTUuOCAyMC02LjQgNS44LS42IDE4LjgtMi40IDI5LTQuMiAxNy4yLTMgMTkuNC0zIDM2IC40IDMyIDYuNiAzNS44IDkuMiA0NC4yIDMxLjYgNS4yIDE0IDUuNCAyMS40IDEuMiAzMi44LTIuMiA1LjQtMi44IDExLTIgMTUuNCAxLjggMTAgMTcuNiAyMy40IDM1IDMwLjIgMTEuMiA0LjIgMTYuMiA3LjYgMjcgMTkgMTkuMiAxOS44IDIwLjIgMjMgMjAgNTktLjIgMzUtLjQgMzUuNC0xOS44IDYzLjYtMTMuOCAxOS44LTMyLjQgMzguNi00OSA1MC01IDMuNC0xMi4yIDguOC0xNS44IDEyLTMuOCAzLjItMTEuNiA4LTE3LjIgMTAuNC01LjYgMi42LTE0LjYgNy40LTE5LjggMTAuNi01LjIgMy40LTE1LjggNy42LTIzLjggOS40LTggMi0yMS4yIDYuNi0yOS42IDEwLjItMjIuNCAxMC0zNi4yIDExLjItMTIxLjggMTAuNGwtNzUtLjYtMTktOC40Yy0xMC42LTQuNi0yNS40LTkuOC0zMy0xMS42LTcuNi0xLjYtMTgtNS44LTIzLTlzLTE0LjItOC0yMC40LTEwLjhjLTE4LTgtNTkuNC00Ni4yLTY2LTYxLjItMi4yLTUtNy40LTE0LjQtMTEuNC0yMC44bC03LjItMTJWNTQ5bDcuNi0xMy42YzQuMi03LjQgOS40LTE4LjYgMTEuNi0yNC44IDMuOC0xMS40IDEzLjQtMjcuOCAyNC44LTQyLjYgMjAuMi0yNi4yIDM4LjQtNDYuOCA1My02MCA5LjItOC4yIDIxLTE4LjYgMjYtMjMuMiA1LTQuNCAxMy4yLTExIDE4LjYtMTQuNiA1LjItMy40IDkuNC03LjIgOS40LTggMC0xIDUuNi00LjYgMTIuNi04LjIgNi44LTMuOCAxNi40LTkuNiAyMS40LTEzLjIgNS0zLjYgMTQuNC04IDIxLTkuOCA2LjYtMiAxNy44LTYuNiAyNS0xMC4yIDEyLTYuMiAxNC40LTYuOCAzMi40LTYuOGgxOS40bDEyLjQgOS42em0yMDMuNiAxMy4yYzMgMS42IDYuNiA0LjQgOCA2IDEuNiAxLjggOS40IDcgMTcuNCAxMS42IDE3IDkuNiAxOSAxMyAyNCA0MiAzLjQgMjAuNCAyLjYgMzIuMi0zLjQgNDMuOC03LjYgMTUuMi0yMi44IDIwLjYtMzEuMiAxMS4yLTctNy42LTkuMi0xMy44LTEwLjYtMjkuNi0xLjItMTMuMi0yLjQtMTYuNC05LjYtMjcuMi0xMS0xNi0xNi44LTIwLjYtMjcuMi0yMC42LTEwIDAtMjQtNi4yLTI3LTExLjYtNS44LTEwLjguNC0yNC42IDEyLjQtMjguNCA4LjYtMi42IDQwLjItLjggNDcuMiAyLjh6Ii8+PHBhdGggZD0iTTQyNCA0NzcuNGMtMzIuNiAzLjYtNDcuOCA3LTYxLjggMTMuOC04IDQtMTkgOC40LTI0LjIgMTAtNS4yIDEuNi0xMi40IDUtMTYuMiA3LjgtMy44IDIuNi0xMSA3LjYtMTYuMiAxMS0xMy40IDguOC0zNSAzMy4yLTM4LjggNDQtMS44IDUtNS40IDE0LjQtOC4yIDIxLTguOCAyMS4yLTguMiAyNi44IDQgNTMgMTAuNiAyMi42IDExIDIzLjIgMjcuNiAzNi40IDIxIDE2LjggMjMuNiAxOC40IDUwLjggMjguMiAyMC4yIDcuMiAyNC42IDggNTQgMTAgMTcuNiAxLjIgNDUuNiAyLjIgNjIgMi4ybDMwIC4yIDE3LjQtOC40YzkuNi00LjYgMjIuNC05LjYgMjguMi0xMS40IDYtMS44IDE1LjQtNi4yIDIwLjgtMTAgNS40LTMuNiAxMy40LTguNiAxNy42LTEwLjggOS4yLTQuNiAzOS0zNC40IDM5LTM5IDAtMS42IDMuOC0xMC4yIDguNC0xOC44IDcuOC0xNC4yIDguNi0xNi44IDguNC0yOS42LS4yLTEyLjgtMS0xNS44LTEwLjYtMzQuNi0xMy40LTI2LjItMzAuNC00My42LTUwLjItNTEuNC03LjItMi44LTE2LjItNy0yMC05LjYtMTEuNC03LjYtMTcuNi05LjItNDguOC0xMi40LTI3LjYtMi44LTU2LjYtMy40LTczLjItMS42em0zOS40IDQ0LjRjMTEuMiAyLjIgMjIuNiA1IDI1IDYuNCA3IDMuNiAyNiAyMS44IDMwLjggMjkuNCA4LjYgMTMuNCAxMSA1NCA0LjYgNzctMi42IDkuNi0xOC44IDI3LjYtMzkuNCA0NC4yLTE1LjYgMTIuNC0xNyAxMy0yOS44IDE0LTcuNi44LTIyLjQgMi4yLTMzIDMuNi0yMi42IDIuNi00NS42IDEtNTMuOC0zLjgtMy4yLTItOC02LjgtMTAuOC0xMC44LTIuNi00LjItOC40LTEwLjQtMTIuOC0xMy44LTguMi02LjgtMTMuNC0xNi40LTE5LjQtMzctMy44LTEzLjItMi44LTIxLjggNS4yLTQ3LjYgMy4yLTEwLjQgNi0xNC42IDE3LjQtMjUuOCAxMi40LTEyLjIgMjMuOC0yMi4yIDMzLjItMjkuNiA0LTMgMzguNi05LjQgNTMuNC05LjggNSAwIDE4LjIgMS42IDI5LjQgMy42eiIvPjxwYXRoIGQ9Ik0zODcuMiA2MDZjLTEyLjIgMy44LTE4LjIgMTMuNC0xNSAyNC42IDUuOCAyMS4yIDI3LjggMjUuOCA0MC42IDguNiA2LjYtOC44IDcuOC0xNi4yIDQuMi0yNC00LjgtMTAuMi0xNS40LTEzLjQtMjkuOC05LjJ6Ii8+PC9zdmc+);
|
||
}
|
||
|
||
|
||
.footer-sns-instagram {
|
||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xNDAuNiA3OGMtOS44IDIuMi0yOC40IDEzLjgtMzguNiAyNC0xMC42IDEwLjgtMjEuNiAyOC44LTI0LjIgMzkuNC0yLjYgMTEuNC0yLjQgNzE0LjguNCA3MjUuMiA1LjIgMjAuNCAyOSA0Ni4yIDUzLjIgNTcuNiA4LjIgMy44IDE1LjQgMy44IDM3MC42IDMuOCAzNTEuOCAwIDM2Mi44LS4yIDM3MS0zLjggMjEtOS4yIDM4LjgtMjcgNTAtNDkuMmw1LTEwLjItLjQtMzYzLjgtLjYtMzY0LTQuNC04Yy0xMC44LTE5LjYtMTgtMjguMi0zMi42LTM4LjQtOS4yLTYuMi0xOC44LTExLjItMjQuNi0xMi40LTExLjItMi42LTcxNC40LTIuOC03MjQuOC0uMnpNNjYyIDIwMi44YzEyLjYgMi44IDYwLjIgMjIuMiA2OC40IDI4IDQuNCAzIDMwLjIgMzEuNCAzOSA0Mi42IDIuOCAzLjYgOS42IDE5LjQgMTUuMiAzNWwxMCAyOC42LjggMTQ2Yy42IDEwNi40LjQgMTQ5LjItMS40IDE1Ny44LTEuMiA2LjYtNiAyMi4yLTEwLjQgMzQuNi05LjggMjcuOC0yMyA0Ni42LTQ4LjIgNjguOC0yMi4yIDE5LjQtMzYuOCAyNi44LTYxLjQgMzAuOC0xMC40IDEuNi0yMi42IDQtMjcgNS4yLTE1IDMuOC0xNDAuNiA2LjItMjEzLjQgNC0zNy44LTEuMi03My0zLTc4LjYtNC01LjQtMS4yLTE2LjItMi44LTIzLjgtNC0yNi44LTQtNjguOC0zMy42LTg5LjgtNjMuOC0xMC4yLTE0LjgtMTktMzYuMi0yNy42LTY4LjQtMy4yLTEyLTMtMjkyLjQuMi0zMDcuMiA0LjYtMjEuMiAxNi42LTUzIDIzLjYtNjMuMiA0LTUuOCAxNS0xOC40IDI0LjQtMjcuOCAxNC0xNC4yIDIwLjQtMTkgMzUuOC0yNi44IDI3LTEzLjQgNDIuOC0xNyA4NC4yLTE5IDU3LjItMi44IDI2NC40LS42IDI4MCAyLjh6Ii8+PHBhdGggZD0iTTM1NiAyNjIuMmMtMi44IDEtMTEuMiA0LjItMTguNiA3LjItMTIuNCA0LjYtMzUuNCAyMS00Mi44IDMwLjYtNi4yIDgtMjEgNDcuOC0yMi44IDYxLS44IDcuNi0xLjQgNzAuMi0xIDEzOSAuNiAxMDguNiAxLjIgMTI2LjQgNCAxMzUuNCA0LjQgMTMuOCAxOC42IDQ0LjYgMjIuOCA0OS40IDQuNCA0LjggMzAuMiAyNCAzNy42IDI3LjggMTMgNi42IDQ4IDguNCAxNjcuOCA4LjQgMTE1LjIgMCAxNTAuOC0xLjYgMTY2LTcuNCA2LjYtMi40IDMyLjgtMjEuNCAzOS4yLTI4LjIgNy42LTguMiAyMy44LTQ0IDI2LTU3LjYgMS4yLTcuOCAxLjgtNjUgMS40LTE0OWwtLjYtMTM2LjItMTItMjMuOGMtMTEuNC0yMi44LTEyLjYtMjQuNC0yNy0zNS4yLTguMi02LjQtMjAuOC0xNC0yOC0xN2wtMTMtNS42LTE0Ny0uNGMtOTEuMi0uMi0xNDkgLjQtMTUyIDEuNnptMzE1LjYgNDFjMTIuMiA2IDE5LjYgMTQuMiAyMi40IDI0LjggNi40IDI0LTE4LjggNTEuNi00MyA0Ny4yLTkuOC0yLTIzLjYtMTQuOC0zMC4yLTI4LjQtNC42LTkuMi00LjgtMTEuNC0zLTE3LjQgMi42LTcuOCAxNi40LTIyLjQgMjYuNC0yNy42IDkuNC01IDE1LjItNC42IDI3LjQgMS40ek01MzYuOCAzMzhjNSAxIDE4LjYgNyAzMC40IDEzLjQgMjUgMTMuMiA0Ny4yIDMyLjggNjMgNTUuNiA1LjQgNy42IDExLjYgMTYuMiAxMy44IDE5IDUuOCA3LjIgMTQuOCA1NSAxMy40IDcxLTEuNiAxNi42LTEwIDUzLjgtMTMuNiA1OC42LTEuNiAyLjItNy40IDEwLjYtMTMuMiAxOC42LTE2LjQgMjMuNi00OC42IDUyLTYzLjIgNTUuOC00LjYgMS40LTE1LjYgNS42LTI0LjQgOS42LTE1LjggNy4yLTE2LjQgNy40LTQwIDcuMi0yMy4yLS4yLTI0LjQtLjQtMzktNy40LTguMi00LTE5LjItOC4yLTI0LjQtOS40LTE2LjYtNC4yLTQ5LTM0LTY5LjItNjMuNi0xNi4yLTI0LTE5LTM1LTE5LTc0LjQgMC0zMyAzLjgtNTQuOCAxMS4yLTY0LjggMi42LTMuNCA3LjItMTAuNiAxMC40LTE2IDguNC0xNC40IDI0LjQtMzEuOCAzOC40LTQyIDIwLjItMTQuOCA1My44LTMxLjIgNjcuNi0zMyAxNC4yLTIgNDUuNi0xIDU3LjggMS44eiIvPjxwYXRoIGQ9Ik00OTEgMzk4Yy00LjQuOC0xNi40IDYtMjYuNiAxMS40LTE2IDguNC0yMCAxMS42LTMxLjQgMjUuNC03LjYgOS4yLTE0IDE5LjItMTUuNCAyNC0zLjIgMTEuMi0zLjIgNTIgMCA2Mi42IDMuMiAxMSAyNC40IDM2LjQgMzUgNDIgMTQuOCA4IDM3IDE2LjYgNDUuOCAxNy44IDYuMi44IDEyIDAgMjAuNi0zLjIgNi42LTIuMiAxNy44LTYuMiAyNC42LTguNiAxMC44LTMuNiAxNS02LjYgMjcuNC0xOS42IDEyLTEyLjYgMTUtMTcgMTcuMi0yNiAzLjQtMTMuMiAzLjYtNTUuNC4yLTY2LjgtNS0xNy40LTI5LjQtNDAuNC01OC40LTU1LjItOC40LTQuMi0yNy44LTYuMi0zOS0zLjh6Ii8+PC9zdmc+);
|
||
}
|
||
|
||
|
||
|
||
.footer-sns-github {
|
||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xMzguNCA3OGMtNi40IDEuNC0yNi40IDE0LjItMzYgMjIuOC04IDcuMi0yMiAyOS44LTI0LjQgMzkuMi0xLjYgNi40LTIgMTEzLjItMS42IDM2OCAuNiAyOTkuNCAxIDM1OS44IDMuNCAzNjQgMTEgMjAuMiAyMS42IDMyLjQgMzcuMiA0MyAxNS42IDEwLjYgMTcuMiAxMS4yIDM0LjIgMTMuMiAxMC42IDEuMiA2My40IDEuNiAxMjcuNiAxLjRsMTA5LjYtLjYgNi02LjggNi4yLTYuOC0xLjItMjUuMmMtLjgtMTUuOC0uMi0zMy40IDEuNC00Ny4yIDMtMjUuNCAxLjQtMzYuMi02LTQzLjItNS00LjYtNi4yLTQuOC0zMC42LTQuMi0yNy42LjgtMjQgMS42LTY4LjgtMTYtOC42LTMuNC0yMi42LTE4LTI4LjQtMjkuOC0xMS40LTIyLjgtMjctNDUtMzkuMi01NS42LTE0LTEyLjItMTkuOC0yMC44LTE5LjgtMjguNiAwLTExLjYgMTMuNi0xMi42IDMzLjItMi40IDE2LjYgOC44IDIwLjggMTIuNCA0MC44IDM2LjIgMjQuMiAyOC42IDMxIDMzLjYgNTQgMzkuNiAxNS4yIDQgNDIuMiAzIDUxLjQtMS44IDktNC42IDE4LTE1LjIgMjQuNC0yOS4yIDExLjQtMjQuMiA3LjQtMzEuMi0yMC42LTM2LjgtOS44LTItMjkuMi04LTQzLjQtMTMuNC00MC40LTE1LjgtNjQuNi0zNy40LTg1LjQtNzYuMi0xMS42LTIxLjgtMTUuNC0zMy0xOC4yLTUzLjYtNC4yLTMyLjItNC44LTYwLjItMS40LTg0IDMuNC0yMy44IDYuOC0zMi44IDIwLjItNTQgNC02IDguOC0xNS42IDExLTIxLjQgMy44LTEwIDMuOC0xMS42IDEtMzAtNS4yLTM0LjItMy4yLTUyLjQgNy42LTcwLjIgNy4yLTEyLjIgMTUtMTcuMiAyNC4yLTE1LjggMTIuOCAyLjIgNTIgMTcuNCA2Ni44IDI2LjIgMjYgMTUgMjkgMTUuNCA4Mi40IDcuMiAyNC42LTMuOCAzMy44LTQuMiA2MC0zLjIgMTcgLjYgNDEuNCAzIDU0IDUuMiAzOC40IDYuNiA0OS42IDUuMiA3My0xMCA2LjYtNC4yIDE3LjQtOS40IDI0LTExLjYgNi42LTIuMiAxNi01LjggMjEtOC4yIDEzLTYgMjgtNS42IDM1LjYuOCAxMi40IDEwLjQgMTguNiA0MS40IDE0LjQgNzEuNi00LjQgMzAuNi0zIDM5LjQgOC40IDUzLjggMy40IDQuNCAxMS4yIDE5LjIgMTcuNCAzMy4yTDc3NSA0NDN2NzhsLTEwIDI4Yy0xNS4yIDQzLjItMzYuOCA3My4yLTY2LjIgOTIuOC0xMy40IDguOC01NyAyNS40LTc2LjggMjktMjguMiA1LjItMzMuMiAxMi42LTIyIDMyLjIgMTEuMiAxOS40IDEyLjQgMzIuOCAxMS42IDEyOS42bC0uNiA4NS44IDUuNCA0LjZjMy42IDMgOS4yIDUuMiAxNiA2IDUuOC44IDYwLjIgMSAxMjAuNi42IDEwOC40LS42IDExMC4yLS42IDExOS01IDI0LTExLjYgNDAtMjcuNCA1MS42LTUwLjZsNS40LTExIC42LTM0N2MuNC0yMjMtLjItMzUzLjQtMS40LTM2NS0yLTE3LTIuNi0xOC42LTEzLTM0LTEwLjYtMTUuNC0yMi44LTI2LjItNDMuMi0zNy4yLTQuMi0yLjQtNjQuNi0yLjgtMzY2LTMuMi0xOTguNiAwLTM2NCAuNC0zNjcuNiAxLjR6Ii8+PC9zdmc+);
|
||
}
|
||
|
||
|
||
.footer-sns-linkedin {
|
||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xNDEgNzcuOGMtNy40IDEuOC0xMS4yIDMuOC0yNi44IDE0LjItMTIuNCA4LjQtMjEuNiAxOC44LTMxLjYgMzdMNzcgMTM5bC0uNiAzNTljLS40IDI1NC40LjIgMzYxLjYgMS42IDM2Ny44IDMuNiAxNC40IDIwLjYgMzYuOCAzNS44IDQ3LjYgNy4yIDUgMTYuMiAxMC40IDE5LjYgMTIgNS40IDIuMiA2Ny42IDIuNiAzNzEuMiAyLjJsMzY0LjYtLjYgMTEuOC03YzE1LTkgMzAtMjQgMzktMzlsNy0xMS44LjYtMzYyLjZjLjQtMjk3IDAtMzYzLjgtMi4yLTM3MC0xLjQtNC4yLTYuOC0xNC0xMS44LTIyLTcuNi0xMS40LTEyLjQtMTYuMi0yNC40LTI0LjQtOC40LTUuNi0xOS0xMS0yMy44LTEyLjItOS44LTIuMi03MTUtMi40LTcyNC40LS4yek0yOTIuMiAxOTZjMTYgNS40IDI1LjQgMTEuNiAzNS42IDIzLjQgMjYuNCAzMC42IDI3LjYgNjMuNCAzLjggOTgtNi40IDkuNC0yNS4yIDIzLjItMzguMiAyOC0xMi44IDQuNi00MC4yIDQuMi01MS44LS44LTQzLTE5LjItNjIuOC02NC42LTQ1LTEwMy40IDE4LTM5IDU3LjgtNTcuOCA5NS42LTQ1LjJ6bTQwMyAyMDBjMjAuMiAzLjQgMjYgNS40IDM4LjYgMTIuNiAzMy42IDE5LjIgNDguMiAzOS4yIDYwIDgyLjQgNi44IDI0LjQgOCA1MSA4LjQgMTc1LjIuMiAxMzAuMi40IDEyOC4yLTExLjIgMTMzLjQtMy42IDEuNi0yMC40IDIuNC01My42IDIuNC00NC42IDAtNDktLjQtNTQuOC00LTMuNi0yLjItNy02LTcuNi04LjQtLjYtMi42LTEuNC01Mi44LTEuNi0xMTEuNi0uNi0xMDEuMi0xLTEwNy44LTQuOC0xMjEuNC03LTI0LjYtMTkuNi00MS0zOC4yLTQ5LjgtMTcuMi04LjItNDcuOC00LjgtNjYuOCA3LjQtMTguNiAxMi0zMS40IDMzLTM1LjYgNTgtMS4yIDcuNi0yIDUzLjgtMiAxMTMuNCAwIDEwOS4yIDAgMTA5LTExIDExNC0zLjYgMS42LTIwLjYgMi40LTU0LjggMi40LTQ3IDAtNTAtLjItNTQuOC00LTMtMi40LTYtNy02LjgtMTAuNi0uOC0zLjYtMS4yLTkwLjQtLjYtMTkzbDEtMTg2LjggNS42LTQuOGM1LjYtNC44IDUuOC00LjggNTMuNC00LjggMzEuMiAwIDQ5LjYuOCA1Mi44IDIuMiA2IDIuOCA4LjYgOSAxMC40IDI0LjggMi40IDIzIDExLjggMjUuMiAyOC40IDcgMTEuOC0xMi44IDI5LjYtMjUuMiA0NC40LTMwLjggMjUuMi05LjQgNjQuNC0xMS40IDEwMS4yLTUuMnptLTM3NC40IDRjMTIgNC42IDExLjQtNi40IDExLjQgMjAxIC4yIDE4MC44IDAgMTg5LjYtMy42IDE5My40LTIgMi4yLTUuOCA0LjgtOC40IDUuOC0yLjYgMS4yLTI2LjIgMi01Mi42IDItNTEuOCAwLTU2LjYtMS02MS40LTExLjYtMS42LTMuNC0yLjItNjEuNC0yLjItMTkwLjggMC0xNzAuNC4yLTE4Ni42IDMuNC0xOTEuOCAxLjgtMy4yIDUuMi02LjYgNy40LTcuOCA1LjQtMi42IDk5LjItMi44IDEwNi0uMnoiLz48L3N2Zz4=);
|
||
}
|
||
|
||
|
||
|
||
.footer-sns-bilibili {
|
||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xMzguOCA3Ny44Yy03LjggMi0zMiAxNy44LTM4LjggMjUuNi05LjYgMTAuNi0xOC40IDI1LTIxLjIgMzQtNC4yIDE0LjItNC4yIDcyMy42IDAgNzMzLjYgOC40IDIwLjIgMjkuNCA0MS42IDUzLjIgNTQuMiA2LjggMy42IDE4LjggMy44IDM3MCAzLjhoMzYzbDktNC4yYzE0LTYuOCAzMS42LTIyLjQgNDIuNi0zOCA5LjQtMTMuOCAxMC0xNS4yIDExLjYtMzIuNiAxLjItMTAuNCAxLjYtMTY2LjggMS40LTM2NS42LS42LTMxNy44LS44LTM0OC4yLTMuOC0zNTQuNi05LjItMTkuMi0yMC44LTMzLTM4LjYtNDVsLTE3LjYtMTItMzYyLjQtLjRjLTE5OS4yIDAtMzY1IC40LTM2OC40IDEuMnpNMzcxLjIgMjUxYzQuMiAxLjYgMjIuNiAxOC4yIDQ0LjYgMzkuOCAyOS44IDI5LjIgMzkgMzcuMiA0NS40IDM5IDEwLjYgMyA3My4yIDIuOCA4My4yLS4yIDYtMS44IDE1LjgtMTAuNCA0My40LTM3LjggMTkuOC0xOS42IDM5LjQtMzcuNCA0NC0zOS42IDE1LjItNy44IDMxLjYtNCA0MSA5LjQgMTAuNCAxNS4yIDguOCAyOC02IDQ0LjYtMTUgMTYuOC0xMSAyNC40IDE0LjIgMjYuOCAxOC44IDEuNiAyNS4yIDMuOCA0My44IDE0LjggMTkuMiAxMS4yIDI4IDIxIDQwLjYgNDQuOEw3NzUgNDExdjI1MGwtOS44IDE5LjZjLTEwLjQgMjAuNi0yMy44IDM1LjYtNDMgNDcuNi0xOC44IDEyLTE4LjYgMTItMjI2LjIgMTEuNGwtMTg5LS42LTExLjgtNC44Yy02LjQtMi42LTE4LjYtMTAuMi0yNi44LTE3LTE2LTEyLjgtMjUuNi0yNi40LTM1LTQ5LjItNC40LTExLTQuNC0xMS40LTQuNC0xMzIuMlY0MTQuNmwxMC40LTIxYzguNC0xNi44IDEzLTIzLjQgMjIuNi0zMi4yIDE3LjItMTYgMzkuMi0yNi40IDU5LjItMjguNCAyNy4yLTIuNCAzMS4yLTkuMiAxNS44LTI3LjItNS01LjgtOS42LTEzLjQtMTAuMi0xNy4yLTUuMi0yNy40IDE5LjQtNDguMiA0NC40LTM3LjZ6Ii8+PHBhdGggZD0iTTMzMC4yIDQwMC40Yy05IDEuNi0xNSA1LjQtMjMgMTUtMTEuNCAxMy40LTExLjIgMTItMTEuMiAxMjAuNnMtLjIgMTA1LjYgMTEuMiAxMjIuNEMzMTggNjczLjggMzA3IDY3MyA0OTIgNjczLjZjOTAuOC40IDE3MC42IDAgMTc3LjQtLjYgMTUuNi0xLjYgMjMuNi02LjggMzIuMi0yMWw2LjQtMTAuOFY1MzcuOGMwLTY4LS44LTEwNS40LTIuMi0xMDkuMi0zLTgtMTUuMi0yMi4yLTIyLjItMjUuOC01LjItMi42LTI2LjYtMy4yLTE3NS42LTMuNC05My40LS4yLTE3My40LjItMTc3LjggMXptNzguNCA3MC40YzkuNiA0IDIyLjggMTcuOCAyNS4yIDI2LjYgMi44IDkuOCAyLjggMzMuNCAwIDQzLjItMi40IDguNi0xMS44IDIwLjItMjAgMjQuNi04IDQtMjMuNiAzLjYtMzEtMS0zLjYtMi4yLTguNC04LTExLTEzLjYtNC4yLTguNC00LjgtMTIuNC00LjgtMzEuOCAwLTIxIC4yLTIyLjYgNi0zMS44IDQtNi40IDktMTEuMiAxNC44LTE0LjQgMTAuMi01LjQgMTIuMi01LjYgMjAuOC0xLjh6bTIwNiAwYzIwIDguMiAyOS4yIDM2LjQgMjIuMiA2Ny40LTIuOCAxMi00LjggMTYuMi0xMC44IDIyLjItNyA3LTguNCA3LjYtMTguOCA3LjYtMTkgMC0zMC42LTkuMi0zNi40LTI5LjItMy42LTEyLjQtMi40LTM3LjggMi4yLTQ2LjggNS05LjYgMjQtMjQgMzEuNi0yNCAyIDAgNi40IDEuMiAxMCAyLjh6Ii8+PC9zdmc+);
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
|
||
<!-- Config CSS -->
|
||
|
||
<!-- Other Styles -->
|
||
<style>
|
||
body, html {
|
||
font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||
}
|
||
|
||
a {
|
||
color: #679cc5;
|
||
}
|
||
|
||
.mdl-card__media,
|
||
#search-label,
|
||
#search-form-label:after,
|
||
#scheme-Paradox .hot_tags-count,
|
||
#scheme-Paradox .sidebar_archives-count,
|
||
#scheme-Paradox .sidebar-colored .sidebar-header,
|
||
#scheme-Paradox .sidebar-colored .sidebar-badge{
|
||
background-color: #77546f !important;
|
||
}
|
||
|
||
/* Sidebar User Drop Down Menu Text Color */
|
||
#scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
|
||
#scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus {
|
||
color: #77546f !important;
|
||
}
|
||
|
||
#post_entry-right-info,
|
||
.sidebar-colored .sidebar-nav li:hover > a,
|
||
.sidebar-colored .sidebar-nav li:hover > a i,
|
||
.sidebar-colored .sidebar-nav li > a:hover,
|
||
.sidebar-colored .sidebar-nav li > a:hover i,
|
||
.sidebar-colored .sidebar-nav li > a:focus i,
|
||
.sidebar-colored .sidebar-nav > .open > a,
|
||
.sidebar-colored .sidebar-nav > .open > a:hover,
|
||
.sidebar-colored .sidebar-nav > .open > a:focus,
|
||
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
|
||
color: #77546f !important;
|
||
}
|
||
|
||
.toTop {
|
||
background: #1b1d3a !important;
|
||
}
|
||
|
||
.material-layout .material-post>.material-nav,
|
||
.material-layout .material-index>.material-nav,
|
||
.material-nav a {
|
||
color: #1b1d3a;
|
||
}
|
||
|
||
#scheme-Paradox .MD-burger-layer {
|
||
background-color: #1b1d3a;
|
||
}
|
||
|
||
#scheme-Paradox #post-toc-trigger-btn {
|
||
color: #1b1d3a;
|
||
}
|
||
|
||
.post-toc a:hover {
|
||
color: #679cc5;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
</style>
|
||
|
||
|
||
<!-- Theme Background Related-->
|
||
|
||
<style>
|
||
body{
|
||
background-image: url(/img/bg.png);
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
|
||
<!-- Fade Effect -->
|
||
|
||
<style>
|
||
.fade {
|
||
transition: all 888ms linear;
|
||
-webkit-transform: translate3d(0,0,0);
|
||
-moz-transform: translate3d(0,0,0);
|
||
-ms-transform: translate3d(0,0,0);
|
||
-o-transform: translate3d(0,0,0);
|
||
transform: translate3d(0,0,0);
|
||
opacity: 1;
|
||
}
|
||
|
||
.fade.out{
|
||
opacity: 0;
|
||
}
|
||
</style>
|
||
|
||
|
||
<!-- Import Font -->
|
||
|
||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
|
||
|
||
|
||
<script>lsloader.load("js/jquery.min.js","/js/jquery.min.js?qcusAULNeBksqffqUM2+Ig==")</script>
|
||
|
||
|
||
<script>function Queue(){this.dataStore=[];this.offer=b;this.poll=d;this.execNext=a;this.debug=false;this.startDebug=c;function b(e){if(this.debug){console.log("Offered a Queued Function.")}if(typeof e==="function"){this.dataStore.push(e)}else{console.log("You must offer a function.")}}function d(){if(this.debug){console.log("Polled a Queued Function.")}return this.dataStore.shift()}function a(){var e=this.poll();if(e!==undefined){if(this.debug){console.log("Run a Queued Function.")}e()}}function c(){this.debug=true}}var queue=new Queue();</script>
|
||
|
||
<!-- Analytics -->
|
||
|
||
|
||
<!-- Custom Head -->
|
||
|
||
</head>
|
||
|
||
|
||
|
||
<body id="scheme-Paradox" class="lazy">
|
||
<div class="material-layout mdl-js-layout has-drawer is-upgraded">
|
||
|
||
|
||
<!-- Main Container -->
|
||
<main class="material-layout__content" id="main">
|
||
|
||
<!-- Top Anchor -->
|
||
<div id="top"></div>
|
||
|
||
|
||
<!-- Hamburger Button -->
|
||
<button class="MD-burger-icon sidebar-toggle">
|
||
<span class="MD-burger-layer"></span>
|
||
</button>
|
||
|
||
|
||
<!-- Post TOC -->
|
||
|
||
|
||
<!-- Back Button -->
|
||
<!--
|
||
<div class="material-back" id="backhome-div" tabindex="0">
|
||
<a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
|
||
href="#" onclick="window.history.back();return false;"
|
||
target="_self"
|
||
role="button"
|
||
data-upgraded=",MaterialButton,MaterialRipple">
|
||
<i class="material-icons" role="presentation">arrow_back</i>
|
||
<span class="mdl-button__ripple-container">
|
||
<span class="mdl-ripple"></span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
-->
|
||
|
||
<!-- Left aligned menu below button -->
|
||
<button id="post-toc-trigger-btn"
|
||
class="mdl-button mdl-js-button mdl-button--icon">
|
||
<i class="material-icons">format_list_numbered</i>
|
||
</button>
|
||
|
||
|
||
<ul class="post-toc-wrap mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="post-toc-trigger-btn" style="max-height:80vh; overflow-y:scroll;">
|
||
<ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#效果预览"><span class="post-toc-number">1.</span> <span class="post-toc-text">效果预览</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Build-Setup"><span class="post-toc-number">2.</span> <span class="post-toc-text">Build Setup</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#技术栈"><span class="post-toc-number">3.</span> <span class="post-toc-text">技术栈</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#核心功能组件的实现"><span class="post-toc-number">4.</span> <span class="post-toc-text">核心功能组件的实现</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#搜索功能"><span class="post-toc-number">4.1.</span> <span class="post-toc-text">搜索功能</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#播放功能"><span class="post-toc-number">4.2.</span> <span class="post-toc-text">播放功能</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#跳转功能"><span class="post-toc-number">4.3.</span> <span class="post-toc-text">跳转功能</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#自己挖的坑，自己埋"><span class="post-toc-number">5.</span> <span class="post-toc-text">自己挖的坑，自己埋</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#vuex的模块应用"><span class="post-toc-number">5.1.</span> <span class="post-toc-text">vuex的模块应用</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#qq音乐的轮播图"><span class="post-toc-number">5.2.</span> <span class="post-toc-text">qq音乐的轮播图</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#axios后端数据获取时产生的跨域问题"><span class="post-toc-number">5.3.</span> <span class="post-toc-text">axios后端数据获取时产生的跨域问题</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#①-针对本地相同端口服务器之间的跨域"><span class="post-toc-number">5.3.1.</span> <span class="post-toc-text">①. 针对本地相同端口服务器之间的跨域</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#②-针对本地不同端口的服务器之间的跨域"><span class="post-toc-number">5.3.2.</span> <span class="post-toc-text">②. 针对本地不同端口的服务器之间的跨域</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#③-针对本地服务器对域名服务器访问的跨域问题"><span class="post-toc-number">5.3.3.</span> <span class="post-toc-text">③. 针对本地服务器对域名服务器访问的跨域问题</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#终于"><span class="post-toc-number">6.</span> <span class="post-toc-text">终于</span></a></li></ol>
|
||
<!--
|
||
<li class="mdl-menu__item">
|
||
Some Action
|
||
</li>
|
||
-->
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Layouts -->
|
||
|
||
<!-- Post Module -->
|
||
<div class="material-post_container">
|
||
|
||
<div class="material-post mdl-grid">
|
||
<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">
|
||
|
||
<!-- Post Header(Thumbnail & Title) -->
|
||
|
||
<!-- Paradox Post Header -->
|
||
|
||
|
||
<!-- Random Thumbnail -->
|
||
<div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
|
||
<script type="text/ls-javascript" id="post-thumbnail-script">
|
||
var randomNum = Math.floor(Math.random() * 19 + 1);
|
||
|
||
$('.post_thumbnail-random').attr('data-original', '/img/random/material-' + randomNum + '.png');
|
||
$('.post_thumbnail-random').addClass('lazy');
|
||
</script>
|
||
|
||
|
||
|
||
<p class="article-headline-p">
|
||
vue高仿qq音乐官网
|
||
</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Paradox Post Info -->
|
||
<div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">
|
||
|
||
<!-- Author Avatar -->
|
||
<div id="author-avatar">
|
||
<img src="/img/avatar.png" width="44px" height="44px" alt="Author Avatar"/>
|
||
</div>
|
||
<!-- Author Name & Date -->
|
||
<div>
|
||
<strong>Feax</strong>
|
||
<span>6月 15, 2017</span>
|
||
</div>
|
||
|
||
<div class="section-spacer"></div>
|
||
|
||
<!-- Favorite -->
|
||
<!--
|
||
<button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
|
||
<i class="material-icons" role="presentation">favorite</i>
|
||
<span class="visuallyhidden">favorites</span>
|
||
</button>
|
||
-->
|
||
|
||
<!-- Qrcode -->
|
||
|
||
<button id="article-functions-qrcode-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
|
||
<i class="material-icons" role="presentation">devices other</i>
|
||
<span class="visuallyhidden">devices other</span>
|
||
</button>
|
||
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-qrcode-button">
|
||
<li class="mdl-menu__item">在其它设备中阅读本文章</li>
|
||
|
||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN4AAADeCAAAAAB3DOFrAAACVElEQVR42u3aQY7DIAwF0Nz/0jMHqDLzbQNNq8cqitSUxwKjj6+frx4XHh4eHh4eHh7ew3hXPF5/9fp89+buH+/ejOaGh4eHd4T3z1ZbBCQLUX0uzA0PDw/vIO9uw8038Wph+PvL1bnh4eHhfQqvWiSSozMeHh7ed/OS4CA/puPh4eF9Fq8XKMxj3zxo2J614OHh4cW8/JLp/PPR+z08PDy8gFduaRqz8xLSnCEeHh7eZl7viLzqWmvVkR0PDw/vJK8XQ+S85Dt5kYgCYjw8PLzNvPwqK28jyA/KPeroAgwPDw9vKW/ttFYFxHmQgYeHh3eSl0QJ1UAhac9KikE19sXDw8M7w+tFA9XwIikzC47veHh4eJt5kzi11xyQX4xVYwg8PDy8k7xqc0AyoWohmXwHDw8P7128PGztXYzlbQfVaAMPDw/vJK+3+Sak6oF78gYPDw/vJC8/HOcRQ3U58kuy6Ld4eHh4R3j59dU8jKg2WpUDYjw8PLw38arXXdXC0HsfRcN4eHh4m3n5hpuXkLw85AFxoZzg4eHhHeFVnydNAz1SYVnx8PDwHsCbBARJAciXDA8PD+9pvPzT86Nzdcny5gY8PDy83bzq+Hvrzy/71xYkPDw8vJO8Kx5VdrVs5OxC6wAeHh7eNl7vuquKnywlHh4e3jN5vcNxfhSehxHNpis8PDy8B/B6cUPeCjAB4+Hh4T2T14sM8masfFE21j08PDy8RWFEHlgk7QLzxgU8PDy8d/HyY2u1fSqf6MZ2VTw8PLylvO8beHh4eHh4eHh4Dxi/F2q6lhHDdOoAAAAASUVORK5CYII=">
|
||
|
||
</ul>
|
||
|
||
|
||
<!-- Tags (bookmark) -->
|
||
|
||
<button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
|
||
<i class="material-icons" role="presentation">bookmark</i>
|
||
<span class="visuallyhidden">bookmark</span>
|
||
</button>
|
||
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
|
||
<li class="mdl-menu__item">
|
||
<a class="post_tag-link" href="/tags/vue/">vue</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/vue-router/">vue-router</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/vuex/">vuex</a>
|
||
</ul>
|
||
|
||
|
||
<!-- Share -->
|
||
<button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
|
||
<i class="material-icons" role="presentation">share</i>
|
||
<span class="visuallyhidden">share</span>
|
||
</button>
|
||
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
|
||
|
||
<!-- Leancloud Views -->
|
||
<a class="post_share-link" href="#">
|
||
<li class="mdl-menu__item">
|
||
<span id="/vue高仿qq音乐官网.html" class="leancloud-views_num" data-flag-title="vue高仿qq音乐官网">
|
||
浏览量
|
||
</span>
|
||
|
||
</li>
|
||
</a>
|
||
|
||
|
||
|
||
|
||
<!-- Share Weibo -->
|
||
|
||
<a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=vue高仿qq音乐官网&url=http://blog.jzxer.cn/vue高仿qq音乐官网.html&pic=&searchPic=false&style=simple" target="_blank">
|
||
<li class="mdl-menu__item">
|
||
分享到微博
|
||
</li>
|
||
</a>
|
||
|
||
|
||
<!-- Share Twitter -->
|
||
|
||
<a class="post_share-link" href="https://twitter.com/intent/tweet?text=vue高仿qq音乐官网&url=http://blog.jzxer.cn/vue高仿qq音乐官网.html&via=Feax" target="_blank">
|
||
<li class="mdl-menu__item">
|
||
分享到 Twitter
|
||
</li>
|
||
</a>
|
||
|
||
|
||
<!-- Share Facebook -->
|
||
|
||
<a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=http://blog.jzxer.cn/vue高仿qq音乐官网.html" target="_blank">
|
||
<li class="mdl-menu__item">
|
||
分享到 Facebook
|
||
</li>
|
||
</a>
|
||
|
||
|
||
<!-- Share Google+ -->
|
||
|
||
<a class="post_share-link" href="https://plus.google.com/share?url=http://blog.jzxer.cn/vue高仿qq音乐官网.html" target="_blank">
|
||
<li class="mdl-menu__item">
|
||
分享到 Google+
|
||
</li>
|
||
</a>
|
||
|
||
|
||
<!-- Share LinkedIn -->
|
||
|
||
<a class="post_share-link" href="https://www.linkedin.com/shareArticle?mini=true&url=http://blog.jzxer.cn/vue高仿qq音乐官网.html&title=vue高仿qq音乐官网" target="_blank">
|
||
<li class="mdl-menu__item">
|
||
分享到 LinkedIn
|
||
</li>
|
||
</a>
|
||
|
||
|
||
<!-- Share QQ -->
|
||
|
||
<a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=Feax's Blog&title=vue高仿qq音乐官网&summary=web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2&pics=http://blog.jzxer.cn/img/favicon.png&url=http://blog.jzxer.cn/vue高仿qq音乐官网.html" target="_blank">
|
||
<li class="mdl-menu__item">
|
||
分享到 QQ
|
||
</li>
|
||
</a>
|
||
|
||
|
||
<!-- Share Telegram -->
|
||
|
||
<a class="post_share-link" href="https://telegram.me/share/url?url=http://blog.jzxer.cn/vue高仿qq音乐官网.html&text=vue高仿qq音乐官网" target="_blank">
|
||
<li class="mdl-menu__item">
|
||
分享到 Telegram
|
||
</li>
|
||
</a>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<!-- Post Content -->
|
||
<div id="post-content" class="mdl-color-text--grey-700 mdl-card__supporting-text fade out">
|
||
|
||
<p>一直想做一个vue项目 然后呢 我就做了</p>
|
||
<h2 id="效果预览"><a href="#效果预览" class="headerlink" title="效果预览"></a>效果预览</h2><p>部分地方不全部根据原版，也有自由发挥的，目前功能模块比较简陋，如果显示不完整，请下载以下api文件并打开</p>
|
||
<blockquote>
|
||
<p><a href="https://github.com/Binaryify/NeteaseCloudMusicApi" target="_blank" rel="noopener">网易云音乐API</a><br>项目地址：<a href="https://github.com/j710328466/vue-qqmusic" target="_blank" rel="noopener">github</a><br>预览地址：<a href="http://182.254.147.168:8564/#/" target="_blank" rel="noopener">demo</a></p>
|
||
</blockquote>
|
||
<h2 id="Build-Setup"><a href="#Build-Setup" class="headerlink" title="Build Setup"></a>Build Setup</h2><pre><code class="js"># install dependencies
|
||
cnpm i
|
||
(可以用cnpm或yarn，更方便快捷，你值得拥有)
|
||
|
||
# serve with hot reload at localhost:8564
|
||
npm run dev
|
||
|
||
# build for production with minification
|
||
npm run build
|
||
|
||
# build for production and view the bundle analyzer report
|
||
npm run build --report
|
||
|
||
# 网易云API部署 listen localhost:3000
|
||
npm run start
|
||
</code></pre>
|
||
<h2 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h2><ul>
|
||
<li>vue(数据绑定)</li>
|
||
<li>vue-router</li>
|
||
<li>vuex(管理组件状态，实现组件通信）</li>
|
||
<li>webpack(打包工具)</li>
|
||
<li>scss（原来想用stylus,回头看看我都快写完了…）</li>
|
||
<li>axios（我等下要重点讲这<em>**</em>）</li>
|
||
<li>组件库: element-UI(本来想用muse-UI,感觉那个更cool，下次吧..) </li>
|
||
<li>API: 网易云音乐API(仿qq音乐我用网易云音乐的东西，你怕不怕…)</li>
|
||
</ul>
|
||
<h2 id="核心功能组件的实现"><a href="#核心功能组件的实现" class="headerlink" title="核心功能组件的实现"></a>核心功能组件的实现</h2><h3 id="搜索功能"><a href="#搜索功能" class="headerlink" title="搜索功能"></a>搜索功能</h3><p><img src="https://ooo.0o0.ooo/2017/06/14/594135198d975.gif" alt=""></p>
|
||
<h3 id="播放功能"><a href="#播放功能" class="headerlink" title="播放功能"></a>播放功能</h3><p><img src="https://ooo.0o0.ooo/2017/06/14/5941364de751e.gif" alt=""><br> (播放页面正在完善中，样式只是大概，待细化…)</p>
|
||
<h3 id="跳转功能"><a href="#跳转功能" class="headerlink" title="跳转功能"></a>跳转功能</h3><p><img src="https://ooo.0o0.ooo/2017/06/14/59415a8cd0df7.gif" alt=""><br> (目前子目录只开通歌手列表)</p>
|
||
<h2 id="自己挖的坑，自己埋"><a href="#自己挖的坑，自己埋" class="headerlink" title="自己挖的坑，自己埋"></a>自己挖的坑，自己埋</h2><h3 id="vuex的模块应用"><a href="#vuex的模块应用" class="headerlink" title="vuex的模块应用"></a>vuex的模块应用</h3><ul>
|
||
<li>一开始我并没有使用vuex，因为我觉得目前这个项目比较小，并不需要它来管理数据，毕竟vuex针对大项目来说确实很好用，但是后来考虑到如果后期该项目我还要 维护，数据量一大，还是要重新分类数据，所以中途某些地方插入了vuex的使用，这就很大一部分影响了项目进行的进度。（目前只用到action和state）</li>
|
||
</ul>
|
||
<h3 id="qq音乐的轮播图"><a href="#qq音乐的轮播图" class="headerlink" title="qq音乐的轮播图"></a>qq音乐的轮播图</h3><ul>
|
||
<li>不用说，qq音乐这个网站的页面我是真的挺喜欢，不光是他的设计，页面的布局也很美观，在控制台调试的时候可以看看它的结构，非常有层次而富有美感，即使加上 一层margin,padding也不会有违和感。这就造就了它的轮播图结构比较麻烦，不是说做不出来，因为这是第一次上传的项目，我想先将大概的结构完善一下，后期再 维护，所以我就选用了element-UI里面的跑马灯式轮播图组件，大体来说，除了部分瑕疵以外，还是高度还原了原版轮播图的。</li>
|
||
</ul>
|
||
<h3 id="axios后端数据获取时产生的跨域问题"><a href="#axios后端数据获取时产生的跨域问题" class="headerlink" title="axios后端数据获取时产生的跨域问题"></a>axios后端数据获取时产生的跨域问题</h3><ul>
|
||
<li>重点来了，这个是我在该项目中花了最多时间的地方，相信很多同学使用axios都碰到过我这个问题，目前我这里使用了三种方法处理该问题，请大家针对自己的项目问题对号入座</li>
|
||
<li>跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。</li>
|
||
</ul>
|
||
<h4 id="①-针对本地相同端口服务器之间的跨域"><a href="#①-针对本地相同端口服务器之间的跨域" class="headerlink" title="①. 针对本地相同端口服务器之间的跨域"></a>①. 针对本地相同端口服务器之间的跨域</h4><ul>
|
||
<li>这是我刚开始碰到问题时使用的第一种，这个时候你只需要找到build文件中的dev-server，找到引用express的位置，给它加上一个头文件：</li>
|
||
</ul>
|
||
<pre><code class="js"> app.all('*', function (req, res, next) {
|
||
res.header("Access-Control-Allow-Credentials", true)
|
||
res.header("Access-Control-Allow-Origin", "*")
|
||
res.header("Access-Control-Allow-Headers", "X-Requested-With")
|
||
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
|
||
res.header("X-Powered-By", ' 3.2.1')
|
||
res.header("Content-Type", "application/json;charset=utf-8")
|
||
next()
|
||
})
|
||
</code></pre>
|
||
<blockquote>
|
||
<p> <img src="https://ooo.0o0.ooo/2017/06/14/594140894d162.jpg" alt=""><br><code>`</code></p>
|
||
</blockquote>
|
||
<ul>
|
||
<li>然后它就会报错~，具体原因是你同一个端口申请相同端口的东西,不好意思，那不叫跨域…</li>
|
||
</ul>
|
||
<h4 id="②-针对本地不同端口的服务器之间的跨域"><a href="#②-针对本地不同端口的服务器之间的跨域" class="headerlink" title="②. 针对本地不同端口的服务器之间的跨域"></a>②. 针对本地不同端口的服务器之间的跨域</h4><ul>
|
||
<li>就是将上面的头文件放在当前项目申请的服务器的那个api中。</li>
|
||
</ul>
|
||
<h4 id="③-针对本地服务器对域名服务器访问的跨域问题"><a href="#③-针对本地服务器对域名服务器访问的跨域问题" class="headerlink" title="③. 针对本地服务器对域名服务器访问的跨域问题"></a>③. 针对本地服务器对域名服务器访问的跨域问题</h4><ul>
|
||
<li>找到当前项目congfig文件夹下index.js文件，然后在文件中将proxyTable内容改为：</li>
|
||
</ul>
|
||
<pre><code class="js"> proxyTable: {
|
||
'/api': {
|
||
target: '[1]',
|
||
changeOrigin: true,
|
||
pathRewrite: {
|
||
'^/api': '/'
|
||
}
|
||
}
|
||
}
|
||
</code></pre>
|
||
<blockquote>
|
||
<p>就是你当前想访问的api地址，项目中访问的时候就只要用/api做反向代理即可</p>
|
||
</blockquote>
|
||
<h2 id="终于"><a href="#终于" class="headerlink" title="终于"></a>终于</h2><ul>
|
||
<li>这是我第一个用vue撸的项目，可能功能有点简陋，很多地方有待提高，不过这次实践让我对组件化的理解有了一定的提升，后期会继续加入其它功能模块的，文中有用词不对的地方，欢迎大家指出，项目有什么bug，也希望大家多多提issue</li>
|
||
<li>如果对你有帮助，给个star吧</li>
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<!-- Post Comments -->
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<!-- Post Prev & Next Nav -->
|
||
<nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
|
||
<!-- Prev Nav -->
|
||
|
||
<a href="/hexo搭建博客.html" id="post_nav-newer" class="prev-content">
|
||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
|
||
<i class="material-icons">arrow_back</i>
|
||
</button>
|
||
|
||
新篇
|
||
</a>
|
||
|
||
|
||
<!-- Section Spacer -->
|
||
<div class="section-spacer"></div>
|
||
|
||
<!-- Next Nav -->
|
||
|
||
<a href="/GIT使用攻略.html" id="post_nav-older" class="next-content">
|
||
旧篇
|
||
|
||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
|
||
<i class="material-icons">arrow_forward</i>
|
||
</button>
|
||
</a>
|
||
|
||
</nav>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<!-- Overlay For Active Sidebar -->
|
||
<div class="sidebar-overlay"></div>
|
||
|
||
<!-- Material sidebar -->
|
||
<aside id="sidebar" class="sidebar sidebar-colored sidebar-fixed-left" role="navigation">
|
||
<div id="sidebar-main">
|
||
<!-- Sidebar Header -->
|
||
<div class="sidebar-header header-cover" style="background-image: url(/img/sidebar_header.png);">
|
||
<!-- Top bar -->
|
||
<div class="top-bar"></div>
|
||
|
||
<!-- Sidebar toggle button -->
|
||
<button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
|
||
<i class="material-icons">clear_all</i>
|
||
<span class="mdl-button__ripple-container">
|
||
<span class="mdl-ripple">
|
||
</span>
|
||
</span>
|
||
</button>
|
||
|
||
<!-- Sidebar Avatar -->
|
||
<div class="sidebar-image">
|
||
<img src="/img/avatar.png" alt="Feax's avatar">
|
||
</div>
|
||
|
||
<!-- Sidebar Email -->
|
||
<a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
|
||
710328466@qq.com
|
||
<b class="caret"></b>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
<!-- Sidebar Navigation -->
|
||
<ul class="nav sidebar-nav">
|
||
<!-- User dropdown -->
|
||
<li class="dropdown">
|
||
<ul id="settings-dropdown" class="dropdown-menu">
|
||
|
||
<li>
|
||
<a href="710328466@qq.com" target="_blank" title="Email Me">
|
||
|
||
<i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
|
||
|
||
Email Me
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Homepage -->
|
||
|
||
<li id="sidebar-first-li">
|
||
<a href="/">
|
||
|
||
<i class="material-icons sidebar-material-icons">home</i>
|
||
|
||
主页
|
||
</a>
|
||
</li>
|
||
|
||
|
||
|
||
<!-- Archives -->
|
||
|
||
<li class="dropdown">
|
||
<a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
|
||
|
||
<i class="material-icons sidebar-material-icons">inbox</i>
|
||
|
||
归档
|
||
<b class="caret"></b>
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li>
|
||
<a class="sidebar_archives-link" href="/archives/2018/06/">六月 2018<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/05/">五月 2018<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/04/">四月 2018<span class="sidebar_archives-count">7</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/03/">三月 2018<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/02/">二月 2018<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/01/">一月 2018<span class="sidebar_archives-count">5</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/12/">十二月 2017<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/11/">十一月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/10/">十月 2017<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/09/">九月 2017<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/08/">八月 2017<span class="sidebar_archives-count">5</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/07/">七月 2017<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/06/">六月 2017<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/04/">四月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/03/">三月 2017<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/02/">二月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/01/">一月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/11/">十一月 2016<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/08/">八月 2016<span class="sidebar_archives-count">1</span></a>
|
||
</ul>
|
||
</li>
|
||
|
||
|
||
|
||
<!-- Categories -->
|
||
|
||
|
||
<!-- Pages -->
|
||
|
||
<li>
|
||
<a href="/timeline" title="时间轴">
|
||
|
||
<i class="material-icons sidebar-material-icons">person</i>
|
||
|
||
时间轴
|
||
</a>
|
||
</li>
|
||
|
||
<li class="divider"></li>
|
||
|
||
|
||
<li>
|
||
<a href="/tags" title="标签">
|
||
|
||
<i class="material-icons sidebar-material-icons">person</i>
|
||
|
||
标签
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li>
|
||
<a href="/gallery" title="图库">
|
||
|
||
<i class="material-icons sidebar-material-icons">person</i>
|
||
|
||
图库
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li>
|
||
<a href="/footprint" title="我的足迹">
|
||
|
||
<i class="material-icons sidebar-material-icons">person</i>
|
||
|
||
我的足迹
|
||
</a>
|
||
</li>
|
||
|
||
<li class="divider"></li>
|
||
|
||
|
||
<li>
|
||
<a href="/about" title="About">
|
||
|
||
<i class="material-icons sidebar-material-icons">person</i>
|
||
|
||
About
|
||
</a>
|
||
</li>
|
||
|
||
|
||
|
||
<!-- Article Number -->
|
||
|
||
<li>
|
||
<a href="/archives">
|
||
文章总数
|
||
<span class="sidebar-badge">55</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
<!-- Sidebar Footer -->
|
||
<!--
|
||
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
|
||
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
|
||
It will not impact the appearance and can give developers a lot of support :)
|
||
|
||
很高兴您使用并喜欢该主题，开发不易 十分谢谢与希望您可以保留一下版权声明。
|
||
如果您仍然想删除的话 能否只保留第一项呢？即 "Theme Material"
|
||
它不会影响美观并可以给开发者很大的支持和动力。 :)
|
||
-->
|
||
|
||
<!-- Sidebar Divider -->
|
||
|
||
<div class="sidebar-divider"></div>
|
||
|
||
|
||
<!-- Theme Material -->
|
||
|
||
|
||
<!-- Help & Support -->
|
||
<!--
|
||
|
||
-->
|
||
|
||
<!-- Feedback -->
|
||
<!--
|
||
|
||
-->
|
||
|
||
<!-- About Theme -->
|
||
<!--
|
||
|
||
-->
|
||
|
||
</div>
|
||
|
||
<!-- Sidebar Image -->
|
||
|
||
|
||
</aside>
|
||
|
||
|
||
|
||
|
||
<!-- Footer Top Button -->
|
||
<div id="back-to-top" class="toTop-wrap">
|
||
<a href="#top" class="toTop">
|
||
<i class="material-icons footer_top-i">expand_less</i>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
|
||
<!--Footer-->
|
||
<footer class="mdl-mini-footer" id="bottom">
|
||
|
||
<!-- Paradox Footer Left Section -->
|
||
<div class="mdl-mini-footer--left-section sns-list">
|
||
<!-- Twitter -->
|
||
|
||
<a href="https://twitter.com/Rockhellbear" target="_blank">
|
||
<button class="mdl-mini-footer--social-btn social-btn footer-sns-twitter">
|
||
<span class="visuallyhidden">Twitter</span>
|
||
</button><!--
|
||
--></a>
|
||
|
||
|
||
<!-- Facebook -->
|
||
|
||
<a href="https://www.facebook.com/facebook" target="_blank">
|
||
<button class="mdl-mini-footer--social-btn social-btn footer-sns-facebook">
|
||
<span class="visuallyhidden">Facebook</span>
|
||
</button><!--
|
||
--></a>
|
||
|
||
|
||
<!-- Google + -->
|
||
|
||
<a href="https://www.google.com/" target="_blank">
|
||
<button class="mdl-mini-footer--social-btn social-btn footer-sns-gplus">
|
||
<span class="visuallyhidden">Google Plus</span>
|
||
</button><!--
|
||
--></a>
|
||
|
||
|
||
<!-- Weibo -->
|
||
|
||
<a href="http://weibo.com/5330486979/fans?topnav=1&wvr=6&mod=message&need_filter=1" target="_blank">
|
||
<button class="mdl-mini-footer--social-btn social-btn footer-sns-weibo">
|
||
<span class="visuallyhidden">Weibo</span>
|
||
</button><!--
|
||
--></a>
|
||
|
||
|
||
<!-- Instagram -->
|
||
|
||
<a href="https://www.instagram.com/jzxer" target="_blank">
|
||
<button class="mdl-mini-footer--social-btn social-btn footer-sns-instagram">
|
||
<span class="visuallyhidden">Instagram</span>
|
||
</button><!--
|
||
--></a>
|
||
|
||
|
||
<!-- Tumblr -->
|
||
|
||
|
||
<!-- Github -->
|
||
|
||
<a href="https://github.com/j710328466" target="_blank">
|
||
<button class="mdl-mini-footer--social-btn social-btn footer-sns-github">
|
||
<span class="visuallyhidden">Github</span>
|
||
</button><!--
|
||
--></a>
|
||
|
||
|
||
<!-- LinkedIn -->
|
||
|
||
<a href="http://www.linkedin.com/in/%E5%BF%97%E9%9B%84-%E6%B1%9F-338928105/" target="_blank">
|
||
<button class="mdl-mini-footer--social-btn social-btn footer-sns-linkedin">
|
||
<span class="visuallyhidden">LinkedIn</span>
|
||
</button><!--
|
||
--></a>
|
||
|
||
|
||
<!-- Zhihu -->
|
||
|
||
|
||
<!-- Bilibili -->
|
||
|
||
<a href="https://space.bilibili.com/73148384/#/" target="_blank">
|
||
<button class="mdl-mini-footer--social-btn social-btn footer-sns-bilibili">
|
||
<span class="visuallyhidden">Bilibili</span>
|
||
</button><!--
|
||
--></a>
|
||
|
||
|
||
<!-- Telegram -->
|
||
|
||
</div>
|
||
|
||
|
||
<!--Copyright-->
|
||
<div id="copyright">
|
||
Copyright © 2016 -<script type="text/javascript">var fd = new Date();document.write(" " + fd.getFullYear() + " ");</script>Feax's Blog
|
||
</div>
|
||
|
||
<!-- Paradox Footer Right Section -->
|
||
|
||
<!--
|
||
I am glad you use this theme, the development is no so easy, I hope you can keep the copyright.
|
||
It will not impact the appearance and can give developers a lot of support :)
|
||
|
||
很高兴您使用该主题，开发不易，希望您可以保留一下版权声明。
|
||
它不会影响美观并可以给开发者很大的支持。 :)
|
||
-->
|
||
|
||
<div class="mdl-mini-footer--right-section">
|
||
<div>
|
||
<div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
|
||
<div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
|
||
</div>
|
||
</div>
|
||
|
||
</footer>
|
||
|
||
|
||
<!-- Import File -->
|
||
|
||
|
||
<script>lsloader.load("js/lazyload.min.js","/js/lazyload.min.js?1BcfzuNXqV+ntF6gq+5X3Q==")</script>
|
||
<script>lsloader.load("js/js.min.js","/js/js.min.js?oAl/+lvaqTFV31JXTmbrNA==")</script>
|
||
|
||
|
||
|
||
<script>lsloader.load("js/nprogress.js","/js/nprogress.js?pl3Qhb9lvqR1FlyLUna1Yw==")</script>
|
||
|
||
|
||
<script type="text/ls-javascript" id="NProgress-script">
|
||
NProgress.configure({
|
||
showSpinner: true
|
||
});
|
||
NProgress.start();
|
||
$('#nprogress .bar').css({
|
||
'background': '#fff'
|
||
});
|
||
$('#nprogress .peg').css({
|
||
'box-shadow': '0 0 10px #fff, 0 0 15px #fff'
|
||
});
|
||
$('#nprogress .spinner-icon').css({
|
||
'border-top-color': '#fff',
|
||
'border-left-color': '#fff'
|
||
});
|
||
setTimeout(function() {
|
||
NProgress.done();
|
||
$('.fade').removeClass('out');
|
||
}, 888);
|
||
</script>
|
||
|
||
|
||
|
||
|
||
<script>lsloader.load("js/smoothscroll.js","/js/smoothscroll.js?lOy/ACj5suSNi7ZVFVbpFQ==")</script>
|
||
|
||
|
||
|
||
|
||
<!-- Leancloud -->
|
||
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
|
||
<script>
|
||
AV.initialize('ONAFtjxhaBqrA7LGAQFYsmUx-gzGzoHsz', 'hUSwCACEEbPBcGUh42RMzy6P');
|
||
</script>
|
||
<script type="text/ls-javascript" id="leancloud-views-script">
|
||
function showTime(Counter) {
|
||
var query = new AV.Query(Counter);
|
||
$('.leancloud-views_num').each(function() {
|
||
var url = $(this).attr('id').trim();
|
||
query.equalTo('url', url);
|
||
query.find({
|
||
success: function(results) {
|
||
if (results.length === 0) {
|
||
var content = '0 ' + $(document.getElementById(url)).text();
|
||
$(document.getElementById(url)).text(content);
|
||
return;
|
||
}
|
||
for (var i = 0; i < results.length; i++) {
|
||
var object = results[i];
|
||
var content = object.get('time') + ' ' + $(document.getElementById(url)).text();
|
||
$(document.getElementById(url)).text(content);
|
||
}
|
||
},
|
||
error: function(object, error) {
|
||
console.log('Error: ' + error.code + ' ' + error.message);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
function addCount(Counter) {
|
||
var Counter = AV.Object.extend('Counter');
|
||
url = $('.leancloud-views_num').attr('id').trim();
|
||
title = $('.leancloud-views_num').attr('data-flag-title').trim();
|
||
var query = new AV.Query(Counter);
|
||
query.equalTo('url', url);
|
||
query.find({
|
||
success: function(results) {
|
||
if (results.length > 0) {
|
||
var counter = results[0];
|
||
counter.fetchWhenSave(true);
|
||
counter.increment('time');
|
||
counter.save(null, {
|
||
success: function(counter) {
|
||
var content = counter.get('time') + ' ' + $(document.getElementById(url)).text();
|
||
$(document.getElementById(url)).text(content);
|
||
},
|
||
error: function(counter, error) {
|
||
console.log('Failed to save Visitor num, with error message: ' + error.message);
|
||
}
|
||
});
|
||
} else {
|
||
var newcounter = new Counter();
|
||
newcounter.set('title', title);
|
||
newcounter.set('url', url);
|
||
newcounter.set('time', 1);
|
||
newcounter.save(null, {
|
||
success: function(newcounter) {
|
||
console.log('newcounter.get(\'time\')='+newcounter.get('time'));
|
||
var content = newcounter.get('time') + ' ' + $(document.getElementById(url)).text();
|
||
$(document.getElementById(url)).text(content);
|
||
},
|
||
error: function(newcounter, error) {
|
||
console.log('Failed to create');
|
||
}
|
||
});
|
||
}
|
||
},
|
||
error: function(error) {
|
||
console.log('Error:' + error.code + ' ' + error.message);
|
||
}
|
||
});
|
||
}
|
||
$(function() {
|
||
var Counter = AV.Object.extend('Counter');
|
||
if ($('.leancloud-views_num').length === 1) {
|
||
addCount(Counter);
|
||
} else if ($('.post-title-link').length > 1) {
|
||
showTime(Counter);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- UC Browser Compatible -->
|
||
<script>
|
||
var agent = navigator.userAgent.toLowerCase();
|
||
if(agent.indexOf('ucbrowser')>0) {
|
||
document.write('<link rel="stylesheet" href="/css/uc.css">');
|
||
alert('由于 UC 浏览器使用极旧的内核，而本网站使用了一些新的特性。\n为了您能更好的浏览，推荐使用 Chrome 或 Firefox 浏览器。');
|
||
}
|
||
</script>
|
||
|
||
<!-- Window Load-->
|
||
<script type="text/ls-javascript" id="window-load">
|
||
$(window).on('load', function() {
|
||
// Post_Toc parent position fixed
|
||
$('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
|
||
});
|
||
</script>
|
||
|
||
<!-- MathJax Load-->
|
||
|
||
<script type="text/ls-javascript" id="lazy-load">
|
||
// Offer LazyLoad
|
||
queue.offer(function(){
|
||
$('.lazy').lazyload({
|
||
effect : 'show'
|
||
});
|
||
});
|
||
|
||
// Start Queue
|
||
$(document).ready(function(){
|
||
setInterval(function(){
|
||
queue.execNext();
|
||
},200);
|
||
});
|
||
</script>
|
||
|
||
<!-- Bing Background -->
|
||
|
||
|
||
<script>
|
||
(function(){
|
||
var scriptList = document.querySelectorAll('script[type="text/ls-javascript"]')
|
||
|
||
for (var i = 0; i < scriptList.length; ++i) {
|
||
var item = scriptList[i];
|
||
lsloader.runInlineScript(item.id,item.id);
|
||
}
|
||
})()
|
||
console.log('\n %c © Material Theme | Version: 1.4.0 | https://github.com/viosey/hexo-theme-material %c \n', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-left-radius:5px;border-bottom-left-radius:5px;', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-right-radius:5px;border-bottom-right-radius:5px;');
|
||
</script>
|
||
|
||
</main>
|
||
</div>
|
||
</body>
|
||
|
||
</html>
|