Janx
2 years ago
parent
104cd0fcf2
commit
91d7e734e3
File diff suppressed because it is too large
Load Diff
@ -1,80 +1,79 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||||
<meta charset="utf-8" />
|
<meta http-equiv='content-language' content='zh-cn'>
|
||||||
<meta name="Robots" content="all" />
|
<meta charset="utf-8" />
|
||||||
<meta name="KEYWords" content="janx,pixiv,博客,游戏,动漫"/>
|
<meta name="Robots" content="all" />
|
||||||
<meta name="DEscription" content="Janxland,Janx,动漫,游戏,博客">
|
<meta name="keywords" content="Janxland,Janx,Roginshin,roginx,人工智能,前端,后端,动漫,游戏,博客"/>
|
||||||
<meta name="baidu-site-verification" content="codeva-FAjK1LxybY" />
|
<meta name="description" content="Janxland,Janx,Roginshin,roginx,人工智能,动漫,游戏,博客">
|
||||||
<meta content="webkit" name="renderer" />
|
<meta name="baidu-site-verification" content="codeva-FAjK1LxybY" />
|
||||||
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
|
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
|
||||||
<meta name="force-rendering" content="webkit"/>
|
<meta content="webkit" name="renderer" />
|
||||||
<meta name="referrer" content="no-referrer" />
|
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="force-rendering" content="webkit"/>
|
||||||
<link rel="icon" href="./poetize.jpg" sizes="16x16">
|
<meta name="referrer" content="no-referrer" />
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.min.css">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
|
<link rel="icon" href="./poetize.jpg" sizes="16x16">
|
||||||
<title>Roginx</title>
|
<title>ROGINSHIN - 兴</title>
|
||||||
<!-- <script>
|
<script>
|
||||||
fetch('https://search.heweather.net/find?key=3180d3c43e524753ab8bcef69dba023a&group=cn&lang=zh&location=450800')
|
// fetch('https://search.heweather.net/find?key=3180d3c43e524753ab8bcef69dba023a&group=cn&lang=zh&location=450800')
|
||||||
.then(function(response) {
|
// .then(function(response) {
|
||||||
return response.json();
|
// return response.json();
|
||||||
})
|
// })
|
||||||
.then(function(myJson) {
|
// .then(function(myJson) {
|
||||||
top.dominCN = myJson.HeWeather6[0].basic[0]
|
// top.dominCN = myJson.HeWeather6[0].basic[0]
|
||||||
});
|
// });
|
||||||
</script> -->
|
</script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.jQuery || document.write("<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js'>"+ "<"+"/script>");
|
window.jQuery || document.write("<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js'>"+ "<"+"/script>");
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.$.cookie || document.write("<script src='https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js'>"+ "<"+"/script>");
|
window.$.cookie || document.write("<script src='https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js'>"+ "<"+"/script>");
|
||||||
</script>
|
</script>
|
||||||
<script src="https://cdn.bootcdn.net/ajax/libs/mobile-detect/1.4.5/mobile-detect.min.js"></script>
|
<script src="https://cdn.bootcdn.net/ajax/libs/mobile-detect/1.4.5/mobile-detect.min.js"></script>
|
||||||
<script src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
|
<script src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
|
||||||
<!-- <script src="https://use.fontawesome.com/3eac4d4c53.js"></script> -->
|
<!-- <script src="https://use.fontawesome.com/3eac4d4c53.js"></script> -->
|
||||||
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
|
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
|
||||||
<script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
|
<script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
|
||||||
<script src="https://cdn.bootcdn.net/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
|
<script src="https://cdn.bootcdn.net/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
|
||||||
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.js"></script>
|
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.js"></script>
|
||||||
<script src="https://cdn.bootcdn.net/ajax/libs/qiniu-js/3.4.1/qiniu.min.js"></script>
|
<script src="https://cdn.bootcdn.net/ajax/libs/qiniu-js/3.4.1/qiniu.min.js"></script>
|
||||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/qiniu-js/3.4.0/qiniu.min.js"></script> -->
|
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
|
||||||
<!-- lg插件 -->
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/qiniu-js/3.4.0/qiniu.min.js"></script> -->
|
||||||
|
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.min.css">
|
||||||
<script src="./music-js/aes.js"></script>
|
<style>
|
||||||
<script src="./music-js/BigInt.js"></script>
|
body {
|
||||||
<script src="./music-js/Barrett.js"></script>
|
margin: 0;
|
||||||
<script src="./music-js/RSA.js"></script>
|
}
|
||||||
<script src="./music-js/163Api.js"></script>
|
</style>
|
||||||
<script src="./music-js/jsoup.js"></script>
|
</head>
|
||||||
<script src="./music-js/JMshake.js"></script>
|
<body>
|
||||||
<!-- 统计代码 https://analytics.apimoe.lol/ -->
|
<div id="app"></div>
|
||||||
<script defer src="https://analytics.apimoe.lol/pixel/CmhIWUSAeHp5v5Kq"></script>
|
<script src="./music-js/aes.js"></script>
|
||||||
<!-- /统计代码 -->
|
<script src="./music-js/BigInt.js"></script>
|
||||||
<style>
|
<script src="./music-js/Barrett.js"></script>
|
||||||
body {
|
<script src="./music-js/RSA.js"></script>
|
||||||
margin: 0;
|
<script src="./music-js/163Api.js"></script>
|
||||||
}
|
<script src="./music-js/jsoup.js"></script>
|
||||||
</style>
|
<script src="./music-js/JMshake.js"></script>
|
||||||
</head>
|
<!-- lg -->
|
||||||
<body>
|
<script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7/lightgallery.min.js"></script>
|
||||||
<div id="app"></div>
|
<link href="https://fastly.jsdelivr.net/npm/lightgallery@2.7/css/lightgallery-bundle.min.css" rel="stylesheet"></link>
|
||||||
</body>
|
<script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7.1/plugins/thumbnail/lg-thumbnail.min.js"></script>
|
||||||
<!-- lg -->
|
<script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7.1/plugins/hash/lg-hash.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7/lightgallery.min.js"></script>
|
<script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7.1/plugins/rotate/lg-rotate.min.js"></script>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/lightgallery@2.7/css/lightgallery-bundle.min.css" rel="stylesheet"></link>
|
<script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7.1/plugins/video/lg-video.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/thumbnail/lg-thumbnail.min.js"></script>
|
<script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7.1/plugins/zoom/lg-zoom.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/hash/lg-hash.min.js"></script>
|
<script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7.1/plugins/fullscreen/lg-fullscreen.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/rotate/lg-rotate.min.js"></script>
|
<script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7.1/plugins/autoplay/lg-autoplay.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/video/lg-video.min.js"></script>
|
<script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7.1/plugins/comment/lg-comment.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/zoom/lg-zoom.min.js"></script>
|
<!-- <script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7.1/plugins/share/lg-share.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/fullscreen/lg-fullscreen.min.js"></script>
|
<script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7.1/plugins/pager/lg-pager.min.js"></script> -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/autoplay/lg-autoplay.min.js"></script>
|
<!-- <script src="https://fastly.jsdelivr.net/npm/masonry.js@3.1.5/dist/masonry.pkgd.min.js"></script> -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/comment/lg-comment.min.js"></script>
|
<!-- <script src="https://fastly.jsdelivr.net/npm/vue-lazyload@3.0.0-rc.2/vue-lazyload.min.js"></script> -->
|
||||||
<!-- <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/share/lg-share.min.js"></script> -->
|
</body>
|
||||||
<!-- <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/pager/lg-pager.min.js"></script> -->
|
<script>
|
||||||
<script>
|
new WOW().init();
|
||||||
new WOW().init();
|
</script>
|
||||||
</script>
|
</html>
|
||||||
</html>
|
|
||||||
|
|||||||
@ -1,253 +1,253 @@
|
|||||||
var JMusicjsoup = {
|
var JMusicjsoup = {
|
||||||
getRecommends:function(callback){
|
getRecommends:function(callback){
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/musicapi/apiqq/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
|
url:'/musicapi/apiqq/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
|
||||||
data:{'g_tk':5381,'uin':0,'format':'json','inCharset':'utf-8','outCharset':'utf-8','notice':0,'platform':'h5','needNewCode':1,'_':1535537714744},
|
data:{'g_tk':5381,'uin':0,'format':'json','inCharset':'utf-8','outCharset':'utf-8','notice':0,'platform':'h5','needNewCode':1,'_':1535537714744},
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
type:'get',
|
type:'get',
|
||||||
async:true,
|
async:true,
|
||||||
success:function(data){
|
success:function(data){
|
||||||
callback._setRecommend(data);
|
callback._setRecommend(data);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getNewsongs:function(num,callback){
|
getNewsongs:function(num,callback){
|
||||||
//"{"limit":10}"
|
//"{"limit":10}"
|
||||||
setV.d = '{"limit":'+num+'}';
|
setV.d = '{"limit":'+num+'}';
|
||||||
var res = __getKeyton();
|
var res = __getKeyton();
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/mapi163/weapi/personalized/newsong',
|
url:'/mapi163/weapi/personalized/newsong',
|
||||||
// data:{'params':'ujh2NED7JxtOit8f2Vo/sp+bqzzC9urfBWjZD60xDdA=','encSecKey':'302d922dd30c10cc489121d1e5e956db50d5d3f8cf1f46dae2c501d88d378cb4b4b11d732efafb3c02c8e5b4e6f2633a5422bf8a0f902a10eb1627ee3665d1dbf370de4356b9a9348f0a3ff8ffb188e996d8e2f8878a95effac07ab1295ebb81ff06127e3e58d339a07d6c824128b58d2f60b60c284b7a55b70ea5e4e126136a'},
|
// data:{'params':'ujh2NED7JxtOit8f2Vo/sp+bqzzC9urfBWjZD60xDdA=','encSecKey':'302d922dd30c10cc489121d1e5e956db50d5d3f8cf1f46dae2c501d88d378cb4b4b11d732efafb3c02c8e5b4e6f2633a5422bf8a0f902a10eb1627ee3665d1dbf370de4356b9a9348f0a3ff8ffb188e996d8e2f8878a95effac07ab1295ebb81ff06127e3e58d339a07d6c824128b58d2f60b60c284b7a55b70ea5e4e126136a'},
|
||||||
data:{'params':res[0],'encSecKey':res[1]},
|
data:{'params':res[0],'encSecKey':res[1]},
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
type:'post',
|
type:'post',
|
||||||
async:true,
|
async:true,
|
||||||
success:function(data){
|
success:function(data){
|
||||||
callback._setNewsongs(data);
|
callback._setNewsongs(data);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getLyric:function(id,callback){
|
getLyric:function(id,callback){
|
||||||
setV.d = '{"id":"'+id+'","lv":0,"tv":0}';
|
setV.d = '{"id":"'+id+'","lv":0,"tv":0}';
|
||||||
var res = __getKeyton();
|
var res = __getKeyton();
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/mapi163/weapi/song/lyric',
|
url:'/mapi163/weapi/song/lyric',
|
||||||
data:{'params':res[0],'encSecKey':res[1]},
|
data:{'params':res[0],'encSecKey':res[1]},
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
type:'post',
|
type:'post',
|
||||||
async:true,
|
async:true,
|
||||||
success:function(data){
|
success:function(data){
|
||||||
callback._setLyric(id,data);
|
callback._setLyric(id,data);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getListsongs:function(callback){
|
getListsongs:function(callback){
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/mapi163/weapi/v3/playlist/detail',
|
url:'/mapi163/weapi/v6/playlist/detail',
|
||||||
data:{'params':'KvByhpvz7lzKJlmmur31pyP9wun0SzssbTnXHQveNOPYvGMFH7w8U+0pcbpv3NX0','encSecKey':'be25f5794f940eebbde77dba783699e38bc12db41eadee670e69ebd16a3b29277817dd1795814de4c8264a28e5383da8620736d21275cc3b1f32797c4c63ca76db5dcae60fb21cc2b5d02741ed49fef00dcdaf3e16027de3c5ede1c7d8b8c182f1b0c5fedac846a5f511dbcda94936425b7a5df71dfd54cad47120e26d974b64'},
|
data:{'params':'KvByhpvz7lzKJlmmur31pyP9wun0SzssbTnXHQveNOPYvGMFH7w8U+0pcbpv3NX0','encSecKey':'be25f5794f940eebbde77dba783699e38bc12db41eadee670e69ebd16a3b29277817dd1795814de4c8264a28e5383da8620736d21275cc3b1f32797c4c63ca76db5dcae60fb21cc2b5d02741ed49fef00dcdaf3e16027de3c5ede1c7d8b8c182f1b0c5fedac846a5f511dbcda94936425b7a5df71dfd54cad47120e26d974b64'},
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
type:'post',
|
type:'post',
|
||||||
async:true,
|
async:true,
|
||||||
success:function(data){
|
success:function(data){
|
||||||
callback._setListsongs(data);
|
callback._setListsongs(data);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getKeywordsHot(){
|
getKeywordsHot(){
|
||||||
//https://music.163.com/weapi/search/hot
|
//https://music.163.com/weapi/search/hot
|
||||||
//d = "{"type":1111}"
|
//d = "{"type":1111}"
|
||||||
},
|
},
|
||||||
getKeywordsTips(key,callback){ //关键词
|
getKeywordsTips(key,callback){ //关键词
|
||||||
setV.d = '{"s":"'+key+'"}';
|
setV.d = '{"s":"'+key+'"}';
|
||||||
var res = __getKeyton();
|
var res = __getKeyton();
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/mapi163/weapi/search/suggest/keyword',
|
url:'/mapi163/weapi/search/suggest/keyword',
|
||||||
data:{'params':res[0],'encSecKey':res[1]},
|
data:{'params':res[0],'encSecKey':res[1]},
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
type:'post',
|
type:'post',
|
||||||
async:true,
|
async:true,
|
||||||
success:function(data){
|
success:function(data){
|
||||||
if(callback!=null){
|
if(callback!=null){
|
||||||
callback._setKeywordsTips(data);
|
callback._setKeywordsTips(data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getSearchRes(key,limit,offset,callback){
|
getSearchRes(key,limit,offset,callback){
|
||||||
//"{"s":"神","limit":20,"offset":20,"type":1,"strategy":5,"queryCorrect":true}" 继续获取
|
//"{"s":"神","limit":20,"offset":20,"type":1,"strategy":5,"queryCorrect":true}" 继续获取
|
||||||
setV.d = '{"s":"'+key+'","type":1,"limit":'+limit+',"offset":'+offset+',"strategy":5,"queryCorrect":true}';
|
setV.d = '{"s":"'+key+'","type":1,"limit":'+limit+',"offset":'+offset+',"strategy":5,"queryCorrect":true}';
|
||||||
var res = __getKeyton();
|
var res = __getKeyton();
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/mapi163/weapi/search/get/',
|
url:'/mapi163/weapi/search/get/',
|
||||||
data:{'params':res[0],'encSecKey':res[1]},
|
data:{'params':res[0],'encSecKey':res[1]},
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
type:'post',
|
type:'post',
|
||||||
async:true,
|
async:true,
|
||||||
success:function(data){
|
success:function(data){
|
||||||
if(callback!=null){
|
if(callback!=null){
|
||||||
callback._setSearchRessong(data);
|
callback._setSearchRessong(data);
|
||||||
}
|
}
|
||||||
//data.result;//"songs"下直接取个数 songs[0].name song[0].ar[0].name
|
//data.result;//"songs"下直接取个数 songs[0].name song[0].ar[0].name
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getSongInfo(id,callback){
|
getSongInfo(id,callback){
|
||||||
setV.d ='{"id":"'+id+'","c":"[{\\"id\\":\\"'+id+'\\"}]"}';
|
setV.d ='{"id":"'+id+'","c":"[{\\"id\\":\\"'+id+'\\"}]"}';
|
||||||
var res = __getKeyton();
|
var res = __getKeyton();
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/mapi163/weapi/v3/song/detail',
|
url:'/mapi163/weapi/v3/song/detail',
|
||||||
data:{'params':res[0],'encSecKey':res[1]},
|
data:{'params':res[0],'encSecKey':res[1]},
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
type:'post',
|
type:'post',
|
||||||
async:true,
|
async:true,
|
||||||
success:function(data){
|
success:function(data){
|
||||||
if(callback!=null){
|
if(callback!=null){
|
||||||
if(data.code==200){
|
if(data.code==200){
|
||||||
callback._setSongInfo(id,data); //songs:data.playlist.[tracks,name]
|
callback._setSongInfo(id,data); //songs:data.playlist.[tracks,name]
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error:function(err){
|
error:function(err){
|
||||||
console.log(err);
|
console.log(err);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
getPlayLists(key,limit,offset,callback){
|
getPlayLists(key,limit,offset,callback){
|
||||||
//获得歌单内容
|
//获得歌单内容
|
||||||
//https://music.163.com/weapi/v3/playlist/detail
|
//https://music.163.com/weapi/v3/playlist/detail
|
||||||
//d:"{"id":"2358852380","n":1000}" 歌单ID
|
//d:"{"id":"2358852380","n":1000}" 歌单ID
|
||||||
//"{"s":"神","limit":20,"offset":20,"type":1,"strategy":5,"queryCorrect":true}" 继续获取
|
//"{"s":"神","limit":20,"offset":20,"type":1,"strategy":5,"queryCorrect":true}" 继续获取
|
||||||
setV.d = '{"limit":'+limit+',"offset":'+offset+',"s":"'+key+'","total":"true","type":"1000","csrf_token":""}';
|
setV.d = '{"limit":'+limit+',"offset":'+offset+',"s":"'+key+'","total":"true","type":"1000","csrf_token":""}';
|
||||||
var res = __getKeyton();
|
var res = __getKeyton();
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/mapi163/weapi/cloudsearch/get/web',
|
url:'/mapi163/weapi/cloudsearch/get/web',
|
||||||
data:{'params':res[0],'encSecKey':res[1]},
|
data:{'params':res[0],'encSecKey':res[1]},
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
type:'post',
|
type:'post',
|
||||||
async:true,
|
async:true,
|
||||||
success:function(data){
|
success:function(data){
|
||||||
console.error(data);
|
console.error(data);
|
||||||
if(callback!=null){
|
if(callback!=null){
|
||||||
callback._setSearchResplay(data); //songs:data.playlist.[tracks,name]
|
callback._setSearchResplay(data); //songs:data.playlist.[tracks,name]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getPlayList(id,callback){
|
getPlayList(id,callback){
|
||||||
//获得歌单内容
|
//获得歌单内容
|
||||||
//https://music.163.com/weapi/v3/playlist/detail
|
//https://music.163.com/weapi/v3/playlist/detail
|
||||||
//d:"{"id":"2358852380","n":1000}" 歌单ID
|
//d:"{"id":"2358852380","n":1000}" 歌单ID
|
||||||
setV.d = `{"id":"${id}","total":"True","limit":1000,"n":1000,"csrf_token":"09556b378da338d2c373d38422f901a6"}`;
|
setV.d = `{"id":"${id}","total":"True","limit":1000,"n":1000,"csrf_token":"09556b378da338d2c373d38422f901a6"}`;
|
||||||
var res = __getKeyton();
|
var res = __getKeyton();
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/mapi163/weapi/v3/playlist/detail',
|
url:'/mapi163/weapi/v6/playlist/detail',
|
||||||
// url:'/mapi163/weapi/middle/clientcfg/config/list?csrf_token=',
|
// url:'/mapi163/weapi/middle/clientcfg/config/list?csrf_token=',
|
||||||
data:{'params':res[0],'encSecKey':res[1]},
|
data:{'params':res[0],'encSecKey':res[1]},
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
type:'post',
|
type:'post',
|
||||||
async:true,
|
async:true,
|
||||||
success:function(data){
|
success:function(data){
|
||||||
if(callback!=null){
|
if(callback!=null){
|
||||||
callback._setPlayList(data); //songs:data.playlist.[tracks,name]
|
callback._setPlayList(data); //songs:data.playlist.[tracks,name]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getuserPlayList(id,callback){
|
getuserPlayList(id,callback){
|
||||||
//获得用户的所有歌单
|
//获得用户的所有歌单
|
||||||
//https://music.163.com/weapi/v3/playlist/detail
|
//https://music.163.com/weapi/v3/playlist/detail
|
||||||
//d:"{"id":"2358852380","n":1000}" 歌单ID
|
//d:"{"id":"2358852380","n":1000}" 歌单ID
|
||||||
//"{"s":"神","limit":20,"offset":20,"type":1,"strategy":5,"queryCorrect":true}" 继续获取
|
//"{"s":"神","limit":20,"offset":20,"type":1,"strategy":5,"queryCorrect":true}" 继续获取
|
||||||
setV.d = '{\"uid\":\"'+id+'\",\"offset\":"0","limit":"1001"}';
|
setV.d = '{\"uid\":\"'+id+'\",\"offset\":"0","limit":"1001"}';
|
||||||
var res = __getKeyton();
|
var res = __getKeyton();
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/mapi163/weapi/user/playlist',
|
url:'/mapi163/weapi/user/playlist',
|
||||||
data:{'params':res[0],'encSecKey':res[1]},
|
data:{'params':res[0],'encSecKey':res[1]},
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
type:'post',
|
type:'post',
|
||||||
async:true,
|
async:true,
|
||||||
success:function(data){
|
success:function(data){
|
||||||
if(callback!=null){
|
if(callback!=null){
|
||||||
callback._setuserPlayList(data); //songs:data.playlist.[tracks,name]
|
callback._setuserPlayList(data); //songs:data.playlist.[tracks,name]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getCommentsByPlayList(id,callback){
|
getCommentsByPlayList(id,callback){
|
||||||
//获得评论内容
|
//获得评论内容
|
||||||
//https://music.163.com/weapi/v1/resource/comments/get
|
//https://music.163.com/weapi/v1/resource/comments/get
|
||||||
//d:"{"resourceType":0,"resourceId":"2358852380","limit":15}" 歌单ID
|
//d:"{"resourceType":0,"resourceId":"2358852380","limit":15}" 歌单ID
|
||||||
setV.d = '{"resourceType":0,"resourceId":"'+id+'","limit":15}';
|
setV.d = '{"resourceType":0,"resourceId":"'+id+'","limit":15}';
|
||||||
var res = __getKeyton();
|
var res = __getKeyton();
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/mapi163/weapi/v1/resource/comments/get',
|
url:'/mapi163/weapi/v1/resource/comments/get',
|
||||||
data:{'params':res[0],'encSecKey':res[1]},
|
data:{'params':res[0],'encSecKey':res[1]},
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
type:'post',
|
type:'post',
|
||||||
async:true,
|
async:true,
|
||||||
success:function(data){
|
success:function(data){
|
||||||
if(callback!=null){
|
if(callback!=null){
|
||||||
callback._setPlayList(data); //songs:data.playlist.[tracks,name]
|
callback._setPlayList(data); //songs:data.playlist.[tracks,name]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getMp3Url(id,callback){
|
getMp3Url(id,callback){
|
||||||
setV.d = `{"ids":"[\\"${id}\\"]","level":"lossless","encodeType":"aac","csrf_token":"","br":"128000"}`;
|
setV.d = `{"ids":"[\\"${id}\\"]","level":"lossless","encodeType":"aac","csrf_token":"","br":"128000"}`;
|
||||||
//setV.d = "{\"ids\":\"[\\\""+id+"\\\"]\",\"br\":\"128000\"}";
|
//setV.d = "{\"ids\":\"[\\\""+id+"\\\"]\",\"br\":\"128000\"}";
|
||||||
var res = __getKeyton();
|
var res = __getKeyton();
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/mapi163/weapi/song/enhance/player/url',
|
url:'/mapi163/weapi/song/enhance/player/url',
|
||||||
type:'post',
|
type:'post',
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
async:true,
|
async:true,
|
||||||
data:{'params':res[0],'encSecKey':res[1]},
|
data:{'params':res[0],'encSecKey':res[1]},
|
||||||
success:function(data){
|
success:function(data){
|
||||||
if(callback!=null){
|
if(callback!=null){
|
||||||
callback._setMp3Url(id,data);
|
callback._setMp3Url(id,data);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error:function(err){
|
error:function(err){
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getOnline(callback){
|
getOnline(callback){
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/userarea',
|
url:'/userarea',
|
||||||
type:'post',
|
type:'post',
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
async:true,
|
async:true,
|
||||||
data:{"type":"ONLINE"},
|
data:{"type":"ONLINE"},
|
||||||
success:function(data){
|
success:function(data){
|
||||||
if(data.status == 0){
|
if(data.status == 0){
|
||||||
if(callback!=null){
|
if(callback!=null){
|
||||||
Jsonp.getUser(data.message,callback);
|
Jsonp.getUser(data.message,callback);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error:function(err){
|
error:function(err){
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getUser(id,callback){
|
getUser(id,callback){
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/userarea',
|
url:'/userarea',
|
||||||
type:'post',
|
type:'post',
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
async:true,
|
async:true,
|
||||||
data:{"type":"USER","id":id},
|
data:{"type":"USER","id":id},
|
||||||
success:function(data){
|
success:function(data){
|
||||||
if(callback!=null){
|
if(callback!=null){
|
||||||
callback._setUser(data);
|
callback._setUser(data);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error:function(err){
|
error:function(err){
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,33 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<router-view/>
|
<router-view/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {}
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {},
|
computed: {},
|
||||||
|
|
||||||
watch: {},
|
watch: {},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
|
this.$store.commit("changePlaylist", this.$constant.playlists[Math.floor(Math.random() * this.$constant.playlists.length)]);
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,83 +1,94 @@
|
|||||||
:root {
|
:root {
|
||||||
/* 背景 */
|
--color-body-bg: #ffffff;
|
||||||
--background: white;
|
--color-text: #000;
|
||||||
--gradualBackground: linear-gradient(to right bottom, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
--color-primary: #335eea;
|
||||||
|
--color-primary-bg: #eaeffd;
|
||||||
/* 字体 */
|
--color-secondary: #7a7a7b;
|
||||||
--fontColor: black;
|
--color-secondary-bg: #f5f5f7;
|
||||||
/* 边框 */
|
--color-navbar-bg: rgba(255, 255, 255, 0.86);
|
||||||
--borderColor: rgba(0, 0, 0, 0.5);
|
--color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
|
||||||
/* 边框 */
|
--color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
|
||||||
--borderHoverColor: rgba(110, 110, 110, 0.4);
|
--html-overflow-y: overlay;
|
||||||
/* 文章字体 */
|
/* 背景 */
|
||||||
--articleFontColor: #1f1f1f;
|
--background: white;
|
||||||
/* 文章灰色字体 */
|
--gradualBackground: linear-gradient(to right bottom, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||||
--articleGreyFontColor: #616161;
|
|
||||||
/* 评论背景颜色 */
|
/* 字体 */
|
||||||
--commentContent: #F7F9FE;
|
--fontColor: black;
|
||||||
|
/* 边框 */
|
||||||
|
--borderColor: rgba(0, 0, 0, 0.5);
|
||||||
/* 主题背景 */
|
/* 边框 */
|
||||||
--themeBackground: orange;
|
--borderHoverColor: rgba(110, 110, 110, 0.4);
|
||||||
/* 主题悬停背景 */
|
/* 文章字体 */
|
||||||
--gradualRed: linear-gradient(to right, #ff4b2b, #ff416c);
|
--articleFontColor: #1f1f1f;
|
||||||
|
/* 文章灰色字体 */
|
||||||
/* 水波纹 */
|
--articleGreyFontColor: #616161;
|
||||||
--rippleColor: rgba(0, 0, 0, 0.5);
|
/* 评论背景颜色 */
|
||||||
/* 导航栏字体 */
|
--commentContent: #F7F9FE;
|
||||||
--toolbarFont: #333333;
|
|
||||||
/* 导航栏背景 */
|
|
||||||
--toolbarBackground: rgba(255, 255, 255, 1);
|
/* 主题背景 */
|
||||||
/* 灰色字体 */
|
--themeBackground: orange;
|
||||||
--greyFont: #797979;
|
--themeBackground-bg: rgb(253, 237, 208);
|
||||||
--maxGreyFont: #595A5A;
|
/* 主题悬停背景 */
|
||||||
/* footer背景 */
|
--gradualRed: linear-gradient(to right, #ff4b2b, #ff416c);
|
||||||
--gradientBG: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
|
||||||
/* 白色遮罩 */
|
/* 水波纹 */
|
||||||
--whiteMask: rgba(255, 255, 255, 0.3);
|
--rippleColor: rgba(0, 0, 0, 0.5);
|
||||||
/* max白色遮罩 */
|
/* 导航栏字体 */
|
||||||
--maxWhiteMask: rgba(255, 255, 255, 0.5);
|
--toolbarFont: #333333;
|
||||||
--maxMaxWhiteMask: rgba(255, 255, 255, 0.7);
|
/* 导航栏背景 */
|
||||||
/* mini白色遮罩 */
|
--toolbarBackground: rgba(255, 255, 255, 1);
|
||||||
--miniWhiteMask: rgba(255, 255, 255, 0.15);
|
/* 灰色字体 */
|
||||||
/* 透明 */
|
--greyFont: #797979;
|
||||||
--transparent: rgba(0, 0, 0, 0);
|
--maxGreyFont: #595A5A;
|
||||||
/* mini黑色遮罩 */
|
/* footer背景 */
|
||||||
--miniMask: rgba(0, 0, 0, 0.15);
|
--gradientBG: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||||
/* 黑色遮罩 */
|
/* 白色遮罩 */
|
||||||
--mask: rgba(0, 0, 0, 0.3);
|
--whiteMask: rgba(255, 255, 255, 0.3);
|
||||||
/* 半透明 */
|
/* max白色遮罩 */
|
||||||
--translucent: rgba(0, 0, 0, 0.5);
|
--maxWhiteMask: rgba(255, 255, 255, 0.5);
|
||||||
/* 深黑遮罩 */
|
--maxMaxWhiteMask: rgba(255, 255, 255, 0.7);
|
||||||
--maxMask: rgba(0, 0, 0, 0.7);
|
/* mini白色遮罩 */
|
||||||
|
--miniWhiteMask: rgba(255, 255, 255, 0.15);
|
||||||
|
/* 透明 */
|
||||||
--white: white;
|
--transparent: rgba(0, 0, 0, 0);
|
||||||
|
/* mini黑色遮罩 */
|
||||||
--red: red;
|
--miniMask: rgba(0, 0, 0, 0.15);
|
||||||
--lightRed: #ff4b2b;
|
/* 黑色遮罩 */
|
||||||
--maxLightRed: #ff416c;
|
--mask: rgba(0, 0, 0, 0.3);
|
||||||
--orangeRed: #EF794F;
|
/* 半透明 */
|
||||||
|
--translucent: rgba(0, 0, 0, 0.5);
|
||||||
--azure: #ECF7FE;
|
/* 深黑遮罩 */
|
||||||
--blue: rgb(3, 169, 244);
|
--maxMask: rgba(0, 0, 0, 0.7);
|
||||||
|
|
||||||
--lightGray: #DDDDDD;
|
|
||||||
--maxLightGray: #EEEEEE;
|
--white: white;
|
||||||
--maxMaxLightGray: rgba(242, 242, 242, 0.5);
|
|
||||||
|
--red: red;
|
||||||
--lightGreen: #39c5bb;
|
--lightRed: #ff4b2b;
|
||||||
|
--maxLightRed: #ff416c;
|
||||||
--green: #67C23A;
|
--orangeRed: #EF794F;
|
||||||
--black: black;
|
|
||||||
--lightYellow: #F4E1C0;
|
--azure: #ECF7FE;
|
||||||
|
--blue: rgb(3, 169, 244);
|
||||||
--globalFont: SmileySans;
|
|
||||||
|
--lightGray: #DDDDDD;
|
||||||
--commentURL: url(../file/comment.jpg);
|
--maxLightGray: #EEEEEE;
|
||||||
--toTop: url(../file/top.jpg);
|
--maxMaxLightGray: rgba(242, 242, 242, 0.5);
|
||||||
--bannerWave1: url(../file/bannerwave1.png) repeat-x;
|
|
||||||
--bannerWave2: url(../file/bannerwave2.png) repeat-x;
|
--lightGreen: #39c5bb;
|
||||||
--verifyImage: url(../file/bg1.jpg);
|
|
||||||
--toolbar: url(../file/bg.jpg);
|
--green: #67C23A;
|
||||||
}
|
--black: black;
|
||||||
|
--lightYellow: #F4E1C0;
|
||||||
|
|
||||||
|
--globalFont: SmileySans;
|
||||||
|
|
||||||
|
--commentURL: url(../file/comment.jpg);
|
||||||
|
--toTop: url(../file/top.jpg);
|
||||||
|
--bannerWave1: url(../file/bannerwave1.png) repeat-x;
|
||||||
|
--bannerWave2: url(../file/bannerwave2.png) repeat-x;
|
||||||
|
--verifyImage: url(../file/bg1.jpg);
|
||||||
|
--toolbar: url(../file/bg.jpg);
|
||||||
|
}
|
||||||
|
|||||||
@ -1,478 +1,479 @@
|
|||||||
/* 通用css */
|
/* 通用css */
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
i{
|
i{
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
color: var(--fontColor);
|
color: var(--fontColor);
|
||||||
font-family: var(--globalFont), serif;
|
font-family: var(--globalFont), serif;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: SmileySans;
|
font-family: SmileySans;
|
||||||
/* src: url(../fonts/SmileySans.otf); */
|
/* src: url(../fonts/SmileySans.otf); */
|
||||||
src: url(//qiniu.roginx.ink/cdn/fonts/%E9%92%89%E9%92%89%E8%BF%9B%E6%AD%A5%E4%BD%93.ttf);
|
src: url(//qiniu.roginx.ink/cdn/fonts/%E9%92%89%E9%92%89%E8%BF%9B%E6%AD%A5%E4%BD%93.ttf);
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
/* 图片 */
|
/* 图片 */
|
||||||
.background-image {
|
.background-image {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
/* 固定位置，不随滚动条滚动 */
|
/* 固定位置，不随滚动条滚动 */
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-image::before {
|
.background-image::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: rgba(0, 0, 0, .2);
|
background-color: rgba(0, 0, 0, .2);
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-image-error {
|
.background-image-error {
|
||||||
background-color: var(--lightGreen);
|
background-color: var(--lightGreen);
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
/* 固定位置，不随滚动条滚动 */
|
/* 固定位置，不随滚动条滚动 */
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 模块化背景色及透明度 */
|
/* 模块化背景色及透明度 */
|
||||||
.background-opacity {
|
.background-opacity {
|
||||||
/*background: var(--background);*/
|
/*background: var(--background);*/
|
||||||
/*opacity: 0.88;*/
|
/*opacity: 0.88;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-el-image {
|
.my-el-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-el-image .image-slot {
|
.my-el-image .image-slot {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 遮罩 */
|
/* 遮罩 */
|
||||||
.poem-image::before {
|
.poem-image::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: var(--mask);
|
background-color: var(--mask);
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-avatar {
|
.user-avatar {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-avatar:hover {
|
.user-avatar:hover {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 滚动条 */
|
/* 滚动条 */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background-color: rgba(73, 177, 245, 0.2);
|
background-color: rgba(73, 177, 245, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background-color: #49b1f5;
|
background-color: #49b1f5;
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(
|
||||||
45deg,
|
45deg,
|
||||||
rgba(255, 255, 255, 0.4) 25%,
|
rgba(255, 255, 255, 0.4) 25%,
|
||||||
transparent 25%,
|
transparent 25%,
|
||||||
transparent 50%,
|
transparent 50%,
|
||||||
rgba(255, 255, 255, 0.4) 50%,
|
rgba(255, 255, 255, 0.4) 50%,
|
||||||
rgba(255, 255, 255, 0.4) 75%,
|
rgba(255, 255, 255, 0.4) 75%,
|
||||||
transparent 75%,
|
transparent 75%,
|
||||||
transparent
|
transparent
|
||||||
);
|
);
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-select-dropdown.el-popper ::-webkit-scrollbar {
|
.el-select-dropdown.el-popper ::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 选中样式 */
|
/* 选中样式 */
|
||||||
::selection {
|
::selection {
|
||||||
background: var(--lightYellow);
|
background: var(--lightYellow);
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 居中 */
|
/* 居中 */
|
||||||
.myCenter {
|
.myCenter {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.transformCenter {
|
.transformCenter {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 两边 */
|
/* 两边 */
|
||||||
.myBetween {
|
.myBetween {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 阴影 */
|
/* 阴影 */
|
||||||
.shadow-box-mini {
|
.shadow-box-mini {
|
||||||
box-shadow: 1px 1px 3px var(--mask);
|
box-shadow: 1px 1px 3px var(--mask);
|
||||||
}
|
}
|
||||||
|
|
||||||
.shadow-box {
|
.shadow-box {
|
||||||
box-shadow: 0 1px 20px -6px var(--borderColor);
|
box-shadow: 0 1px 20px -6px var(--borderColor);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shadow-box:hover {
|
.shadow-box:hover {
|
||||||
box-shadow: 0 5px 10px 5px var(--borderHoverColor);
|
box-shadow: 0 5px 10px 5px var(--borderHoverColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* el弹出框样式 */
|
/* el弹出框样式 */
|
||||||
.el-message {
|
.el-message {
|
||||||
top: 80px !important;
|
top: 80px !important;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-message * {
|
.el-message * {
|
||||||
color: var(--white) !important;
|
color: var(--white) !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-message--success {
|
.el-message--success {
|
||||||
background: var(--themeBackground);
|
background: var(--themeBackground);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-message--warning {
|
.el-message--warning {
|
||||||
background: var(--gradientBG);
|
background: var(--gradientBG);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-message--error {
|
.el-message--error {
|
||||||
background: var(--gradualRed);
|
background: var(--gradualRed);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 看板娘 */
|
/* 看板娘 */
|
||||||
#waifu-toggle, #waifu {
|
#waifu-toggle, #waifu {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
#waifu-tips {
|
#waifu-tips {
|
||||||
border: unset;
|
border: unset;
|
||||||
animation: unset;
|
animation: unset;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#waifu-tool {
|
#waifu-tool {
|
||||||
right: -10px;
|
right: -10px;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
top: unset;
|
top: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
#waifu #live2d {
|
#waifu #live2d {
|
||||||
height: 250px;
|
height: 250px;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 图标旋转 */
|
/* 图标旋转 */
|
||||||
.iconRotate {
|
.iconRotate {
|
||||||
animation: rotate 2s linear infinite;
|
animation: rotate 2s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 树洞留言 */
|
/* 树洞留言 */
|
||||||
.baberrage-item .baberrage-msg {
|
.baberrage-item .baberrage-msg {
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.baberrage-item .normal .baberrage-avatar img {
|
.baberrage-item .normal .baberrage-avatar img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.el-upload.el-upload--picture {
|
.el-upload.el-upload--picture {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-upload-dragger {
|
.el-upload-dragger {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
height: 100px !important;
|
height: 100px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 导航栏 */
|
/* 导航栏 */
|
||||||
.toolbarDrawer {
|
.toolbarDrawer {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--toolbar) center center / cover no-repeat;
|
background: var(--toolbar) center center / cover no-repeat;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbarDrawer .el-drawer__header {
|
.toolbarDrawer .el-drawer__header {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbarDrawer::before {
|
.toolbarDrawer::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: var(--mask);
|
background-color: var(--mask);
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-menu {
|
.small-menu {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-menu > li {
|
.small-menu > li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag] {
|
[ks-tag] {
|
||||||
position: relative
|
position: relative
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag]:before,[ks-tag]:after {
|
[ks-tag]:before,[ks-tag]:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag]:before {
|
[ks-tag]:before {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transition: opacity .3s;
|
transition: opacity .3s;
|
||||||
border: .5rem solid transparent
|
border: .5rem solid transparent
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag~=top]:before {
|
[ks-tag~=top]:before {
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
border-top-color: rgba(0,0,0,.7)
|
border-top-color: rgba(0,0,0,.7)
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag~=bottom]:before {
|
[ks-tag~=bottom]:before {
|
||||||
top: 100%;
|
top: 100%;
|
||||||
border-bottom-color: aliceblue;
|
border-bottom-color: aliceblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag~=top]:before,[ks-tag~=bottom]:before {
|
[ks-tag~=top]:before,[ks-tag~=bottom]:before {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%)
|
transform: translateX(-50%)
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag=left]:before {
|
[ks-tag=left]:before {
|
||||||
right: 100%;
|
right: 100%;
|
||||||
border-left-color: rgba(0,0,0,.7)
|
border-left-color: rgba(0,0,0,.7)
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag=right]:before {
|
[ks-tag=right]:before {
|
||||||
left: 100%;
|
left: 100%;
|
||||||
border-right-color: rgba(0,0,0,.7)
|
border-right-color: rgba(0,0,0,.7)
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag=left]:before,[ks-tag=right]:before {
|
[ks-tag=left]:before,[ks-tag=right]:before {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%)
|
transform: translateY(-50%)
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag~=top]:after {
|
[ks-tag~=top]:after {
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
margin-bottom: 1rem
|
margin-bottom: 1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag~=bottom]:after {
|
[ks-tag~=bottom]:after {
|
||||||
top: 100%;
|
top: 100%;
|
||||||
margin-top: 1rem
|
margin-top: 1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag=top]:after,[ks-tag=bottom]:after {
|
[ks-tag=top]:after,[ks-tag=bottom]:after {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%)
|
transform: translateX(-50%)
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag=left]:after {
|
[ks-tag=left]:after {
|
||||||
right: 100%;
|
right: 100%;
|
||||||
margin-right: 1rem
|
margin-right: 1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag=right]:after {
|
[ks-tag=right]:after {
|
||||||
left: 100%;
|
left: 100%;
|
||||||
margin-left: 1rem
|
margin-left: 1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag=left]:after,[ks-tag=right]:after {
|
[ks-tag=left]:after,[ks-tag=right]:after {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%)
|
transform: translateY(-50%)
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag~=left][ks-tag~=top]:after,[ks-tag~=left][ks-tag~=bottom]:after {
|
[ks-tag~=left][ks-tag~=top]:after,[ks-tag~=left][ks-tag~=bottom]:after {
|
||||||
right: 0;
|
right: 0;
|
||||||
min-width: 4em
|
min-width: 4em
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-tag~=right][ks-tag~=top]:after,[ks-tag~=right][ks-tag~=bottom]:after {
|
[ks-tag~=right][ks-tag~=top]:after,[ks-tag~=right][ks-tag~=bottom]:after {
|
||||||
left: 0;
|
left: 0;
|
||||||
min-width: 4em
|
min-width: 4em
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-text]:hover:before,[ks-text]:hover:after {
|
[ks-text]:hover:before,[ks-text]:hover:after {
|
||||||
opacity: 1
|
opacity: 1
|
||||||
}
|
}
|
||||||
|
|
||||||
[ks-text]:after {
|
[ks-text]:after {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: .85rem;
|
font-size: .85rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
border-radius: .5rem;
|
border-radius: .5rem;
|
||||||
padding: .25rem .5rem;
|
padding: .25rem .5rem;
|
||||||
content: attr(ks-text);
|
content: attr(ks-text);
|
||||||
transition: opacity .3s;
|
transition: opacity .3s;
|
||||||
background: rgba(0,0,0,.7)
|
background: rgba(0,0,0,.7)
|
||||||
}
|
}
|
||||||
.mceTmpl{
|
.mceTmpl,tinytemplate{
|
||||||
position:relative;
|
position:relative;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
display: block;
|
||||||
.check_label{
|
}
|
||||||
box-sizing: border-box;
|
.check_label{
|
||||||
width:100%;
|
box-sizing: border-box;
|
||||||
display: block;
|
width:100%;
|
||||||
position: absolute;
|
display: block;
|
||||||
width: 100%;
|
position: absolute;
|
||||||
height: 120px;
|
width: 100%;
|
||||||
opacity: 1;
|
height: 120px;
|
||||||
bottom: 0;
|
opacity: 1;
|
||||||
left: 0;
|
bottom: 0;
|
||||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--background) 70%);
|
left: 0;
|
||||||
pointer-events: none;
|
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--background) 100%);
|
||||||
}
|
pointer-events: none;
|
||||||
.hideContext{
|
}
|
||||||
position: relative;
|
.hideContext{
|
||||||
box-sizing: border-box;
|
position: relative;
|
||||||
width:100%;
|
box-sizing: border-box;
|
||||||
max-height:120px;
|
width:100%;
|
||||||
min-height: 80px;
|
max-height:160px;
|
||||||
overflow: hidden;
|
min-height: 100px;
|
||||||
transition:.3s;
|
overflow: hidden;
|
||||||
}
|
transition:.3s;
|
||||||
.check_label::after{
|
}
|
||||||
content: '显示内容';
|
.check_label::after{
|
||||||
letter-spacing: .3em;
|
content: '显示内容';
|
||||||
height: 1.2em;
|
letter-spacing: .3em;
|
||||||
background: #0000000a;
|
height: 1.2em;
|
||||||
line-height: 1.2em;
|
background: #0000000a;
|
||||||
bottom: 0px;
|
line-height: 1.2em;
|
||||||
display: inline-block;
|
bottom: 0px;
|
||||||
position: absolute;
|
display: inline-block;
|
||||||
left: 50%;
|
position: absolute;
|
||||||
transform: translateX(-50%);
|
left: 50%;
|
||||||
background-color: #333;
|
transform: translateX(-50%);
|
||||||
font-size: .8em;
|
background-color: #333;
|
||||||
color: #fff;
|
font-size: .8em;
|
||||||
padding: 8px 14px;
|
color: #fff;
|
||||||
border-radius: 4px;
|
padding: 8px 14px;
|
||||||
box-shadow: 0px 2px 2px rgb(0 0 0 / 20%);
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
box-shadow: 0px 2px 2px rgb(0 0 0 / 20%);
|
||||||
pointer-events: auto;
|
cursor: pointer;
|
||||||
}
|
pointer-events: auto;
|
||||||
.check_label:hover::after{
|
}
|
||||||
font-weight:550;
|
.check_label:hover::after{
|
||||||
color:#FFF;
|
font-weight:550;
|
||||||
background: #000;
|
color:#FFF;
|
||||||
opacity: 1 !important;
|
background: #000;
|
||||||
transition:.3s;
|
opacity: 1 !important;
|
||||||
}
|
transition:.3s;
|
||||||
.hideCheckInput{
|
}
|
||||||
display: none;
|
.hideCheckInput{
|
||||||
}
|
display: none;
|
||||||
.hideCheckInput:checked ~ .check_label{
|
}
|
||||||
transition: .3s;
|
.hideCheckInput:checked ~ .check_label{
|
||||||
background-image: none;
|
transition: .3s;
|
||||||
}
|
background-image: none;
|
||||||
.hideCheckInput:checked ~ .hideContext {
|
}
|
||||||
min-height: 300px;
|
.hideCheckInput:checked ~ .hideContext {
|
||||||
max-height: unset;
|
min-height: 300px;
|
||||||
transition: .3s;
|
max-height: unset;
|
||||||
}
|
transition: .3s;
|
||||||
.hideCheckInput:checked ~ .check_label::after{
|
}
|
||||||
content: '隐藏内容';
|
.hideCheckInput:checked ~ .check_label::after{
|
||||||
transition: 2s ease .5s;
|
content: '隐藏内容';
|
||||||
opacity: 0;
|
transition: 2s ease .5s;
|
||||||
}
|
opacity: 0;
|
||||||
.hideCheckInput:checked ~ .check_label:hover::after{
|
}
|
||||||
background: #000 !important;
|
.hideCheckInput:checked ~ .check_label:hover::after{
|
||||||
animation:none;
|
background: #000 !important;
|
||||||
transition: .4s !important;
|
animation:none;
|
||||||
}
|
transition: .4s !important;
|
||||||
|
}
|
||||||
.print{
|
|
||||||
width:1000px;
|
.print{
|
||||||
white-space:nowrap;
|
width:1000px;
|
||||||
overflow:hidden;
|
white-space:nowrap;
|
||||||
-webkit-animation: dy 3s steps(60, end) infinite;
|
overflow:hidden;
|
||||||
animation: dy 3s steps(50, end) infinite;
|
-webkit-animation: dy 3s steps(60, end) infinite;
|
||||||
}
|
animation: dy 3s steps(50, end) infinite;
|
||||||
.spanFeather {
|
}
|
||||||
width: 100%;
|
.spanFeather {
|
||||||
overflow: hidden;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
overflow: hidden;
|
||||||
}
|
text-overflow: ellipsis;
|
||||||
@supports (-webkit-mask-image: inherit) or (mask-image: inherit) {
|
}
|
||||||
.spanFeather {
|
@supports (-webkit-mask-image: inherit) or (mask-image: inherit) {
|
||||||
text-overflow: clip;
|
.spanFeather {
|
||||||
-webkit-mask-image: linear-gradient(
|
text-overflow: clip;
|
||||||
to right,
|
-webkit-mask-image: linear-gradient(
|
||||||
rgba(0, 0, 0, 1) calc(100% - 2em),
|
to right,
|
||||||
transparent
|
rgba(0, 0, 0, 1) calc(100% - 2em),
|
||||||
);
|
transparent
|
||||||
mask-image: linear-gradient(
|
);
|
||||||
to right,
|
mask-image: linear-gradient(
|
||||||
rgba(0, 0, 0, 1) calc(100% - 2em),
|
to right,
|
||||||
transparent
|
rgba(0, 0, 0, 1) calc(100% - 2em),
|
||||||
);
|
transparent
|
||||||
}
|
);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
@-webkit-keyframes dy{
|
|
||||||
from { width: 0;}
|
@-webkit-keyframes dy{
|
||||||
}
|
from { width: 0;}
|
||||||
@keyframes dy{
|
}
|
||||||
from { width: 0;}
|
@keyframes dy{
|
||||||
}
|
from { width: 0;}
|
||||||
@media screen and (max-width: 400px) {
|
}
|
||||||
.el-dialog {
|
@media screen and (max-width: 400px) {
|
||||||
width: 75% !important;
|
.el-dialog {
|
||||||
}
|
width: 75% !important;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -0,0 +1,47 @@
|
|||||||
|
{
|
||||||
|
"bookSourceComment": "",
|
||||||
|
"bookSourceGroup": "🎨漫画",
|
||||||
|
"bookSourceName": "🎨禁漫天堂(正文有问题)",
|
||||||
|
"bookSourceType": 0,
|
||||||
|
"bookSourceUrl": "https:\/\/jmcomic1.me\/",
|
||||||
|
"customOrder": 37,
|
||||||
|
"enabled": true,
|
||||||
|
"enabledExplore": true,
|
||||||
|
"exploreUrl": "总排行榜::\/albums?o=mv?page={{key}}\n月排行榜::\/albums?t=m&o=mv?page={{key}}\n周排行榜::\/albums?o=mv&t=w?page={{key}}\n日排行榜::\/albums?o=mv&t=t?page={{key}}\n最新A漫::\/albums?o=mr?page={{key}}\n同人::\/albums\/doujin?page={{key}}\n\n单行本::\/albums\/single?o=mr?page={{key}}\n短篇::\/albums\/short?page={{key}}\n其他::\/albums\/another?page={{key}}\n韩漫::\/albums\/hanman?page={{key}}\n美漫::\/albums\/meiman?page={{key}}\ncosplay::\/albums\/another\/sub\/cosplay?page={{key}}",
|
||||||
|
"lastUpdateTime": 1651214216611,
|
||||||
|
"respondTime": 180000,
|
||||||
|
"ruleBookInfo": {
|
||||||
|
"coverUrl": "class.thumb-overlay.2@tag.img@src",
|
||||||
|
"init": "",
|
||||||
|
"intro": "class.nav-tab-content@class.p-t-5 p-b-5@text",
|
||||||
|
"kind": "class.tag-block.3@text",
|
||||||
|
"name": "class.panel-heading.0@text"
|
||||||
|
},
|
||||||
|
"ruleContent": {
|
||||||
|
"content":"class.row thumb-overlay-albums",
|
||||||
|
"imageStyle": "Full"
|
||||||
|
},
|
||||||
|
"ruleExplore": {
|
||||||
|
"bookList": "class.col-xs-6 col-sm-6 col-md-4 col-lg-3 list-col",
|
||||||
|
"bookUrl": "tag.a.0@href",
|
||||||
|
"coverUrl": "tag.img@src",
|
||||||
|
"intro": "class.p-t-5 p-b-5.7@text",
|
||||||
|
"kind": "class.title-truncate@tag.a@text",
|
||||||
|
"name": "class.video-title title-truncate m-t-5@text"
|
||||||
|
},
|
||||||
|
"ruleSearch": {
|
||||||
|
"bookList": "class.list-col",
|
||||||
|
"bookUrl": "tag.a.0@href",
|
||||||
|
"realUrl":"class.img@data-original",
|
||||||
|
"coverUrl": "class.img@data-original",
|
||||||
|
"kind": "class.title-truncate tags p-b-5@tag.a@text",
|
||||||
|
"name": "tag.img@title"
|
||||||
|
},
|
||||||
|
"ruleToc": {
|
||||||
|
"chapterList": "class.btn-toolbar.0@tag.a||class.col btn btn-primary dropdown-toggle reading",
|
||||||
|
"chapterName": "text",
|
||||||
|
"chapterUrl": "tag.a@href"
|
||||||
|
},
|
||||||
|
"searchUrl": "https:\/jmcomic1.me\/search\/photos?search_query={{key}}&main_tag=0",
|
||||||
|
"weight": 0
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,115 +1,115 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="poem-container myCenter my-animation-hideToShow"
|
<div class="poem-container myCenter my-animation-hideToShow"
|
||||||
v-if="!$common.isEmpty(guShi.origin) || !$common.isEmpty(hitokoto.hitokoto)">
|
v-if="!$common.isEmpty(guShi.origin) || !$common.isEmpty(hitokoto.hitokoto)">
|
||||||
<!-- 背景图片 -->
|
<!-- 背景图片 -->
|
||||||
<el-image class="my-el-image poem-image "
|
<el-image class="my-el-image poem-image "
|
||||||
style="position: absolute;margin-top: -50px"
|
style="position: absolute;margin-top: -50px"
|
||||||
v-once
|
v-once
|
||||||
:src="$constant.random_backImage_miaomc+Math.floor(Math.random()*100)"
|
:src="$constant.random_backImage_miaomc+'?id='+Math.floor(Math.random()*100)"
|
||||||
fit="cover">
|
fit="cover">
|
||||||
<div slot="error" class="image-slot"></div>
|
<div slot="error" class="image-slot"></div>
|
||||||
</el-image>
|
</el-image>
|
||||||
<div class="poem-wrap">
|
<div class="poem-wrap">
|
||||||
<div><span>{{isHitokoto?hitokoto.from:guShi.origin}}</span></div>
|
<div><span>{{isHitokoto?hitokoto.from:guShi.origin}}</span></div>
|
||||||
<p class="poem">{{isHitokoto?hitokoto.hitokoto:guShi.content}}</p>
|
<p class="poem">{{isHitokoto?hitokoto.hitokoto:guShi.content}}</p>
|
||||||
<p class="info" v-if="!isHitokoto || (isHitokoto && !$common.isEmpty(hitokoto.from_who))">
|
<p class="info" v-if="!isHitokoto || (isHitokoto && !$common.isEmpty(hitokoto.from_who))">
|
||||||
{{isHitokoto?hitokoto.from_who:guShi.author}}
|
{{isHitokoto?hitokoto.from_who:guShi.author}}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
isHitokoto: {
|
isHitokoto: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
guShi: {
|
guShi: {
|
||||||
"content": "...",
|
"content": "...",
|
||||||
"origin": "...",
|
"origin": "...",
|
||||||
"author": "...",
|
"author": "...",
|
||||||
"category": "..."
|
"category": "..."
|
||||||
},
|
},
|
||||||
hitokoto: {
|
hitokoto: {
|
||||||
"hitokoto": "...",
|
"hitokoto": "...",
|
||||||
"from": "...",
|
"from": "...",
|
||||||
"from_who": "..."
|
"from_who": "..."
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
if (this.isHitokoto) {
|
if (this.isHitokoto) {
|
||||||
this.getHitokoto();
|
this.getHitokoto();
|
||||||
} else {
|
} else {
|
||||||
this.getGuShi();
|
this.getGuShi();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
getGuShi() {
|
getGuShi() {
|
||||||
let that = this;
|
let that = this;
|
||||||
let xhr = new XMLHttpRequest();
|
let xhr = new XMLHttpRequest();
|
||||||
xhr.open('get', this.$constant.jinrishici);
|
xhr.open('get', this.$constant.jinrishici);
|
||||||
xhr.onreadystatechange = function () {
|
xhr.onreadystatechange = function () {
|
||||||
if (xhr.readyState === 4) {
|
if (xhr.readyState === 4) {
|
||||||
that.guShi = JSON.parse(xhr.responseText);
|
that.guShi = JSON.parse(xhr.responseText);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
xhr.send();
|
xhr.send();
|
||||||
},
|
},
|
||||||
getHitokoto() {
|
getHitokoto() {
|
||||||
let that = this;
|
let that = this;
|
||||||
let xhr = new XMLHttpRequest();
|
let xhr = new XMLHttpRequest();
|
||||||
xhr.open('get', this.$constant.hitokoto);
|
xhr.open('get', this.$constant.hitokoto);
|
||||||
xhr.onreadystatechange = function () {
|
xhr.onreadystatechange = function () {
|
||||||
if (xhr.readyState === 4) {
|
if (xhr.readyState === 4) {
|
||||||
that.hitokoto = JSON.parse(xhr.responseText);
|
that.hitokoto = JSON.parse(xhr.responseText);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
xhr.send();
|
xhr.send();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
.poem-container {
|
.poem-container {
|
||||||
padding: 90px 0 40px;
|
padding: 90px 0 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.poem-wrap {
|
.poem-wrap {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
letter-spacing: 4px;
|
letter-spacing: 4px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.poem-wrap div span {
|
.poem-wrap div span {
|
||||||
padding: 5px 40px;
|
padding: 5px 40px;
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.poem-wrap p {
|
.poem-wrap p {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.poem-wrap p.poem {
|
.poem-wrap p.poem {
|
||||||
margin: 40px auto;
|
margin: 40px auto;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.poem-wrap p.info {
|
.poem-wrap p.info {
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,411 +1,410 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<loader :loading="loading">
|
<loader :loading="loading">
|
||||||
<!-- 加载页面 -->
|
<!-- 加载页面 -->
|
||||||
<template slot="loader">
|
<template slot="loader">
|
||||||
<div>
|
<div>
|
||||||
<zombie></zombie>
|
<zombie></zombie>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<!-- 内容页面 -->
|
<!-- 内容页面 -->
|
||||||
<template slot="body">
|
<template slot="body">
|
||||||
<!-- 首页图片 -->
|
<!-- 首页图片 -->
|
||||||
<el-image style="animation: header-effect 2s"
|
<el-image style="animation: header-effect 2s"
|
||||||
class="background-image"
|
class="background-image"
|
||||||
v-once
|
:src="$store.state.webInfo.backgroundImage?$store.state.webInfo.backgroundImage:$constant.two_poem_image[0]"
|
||||||
:src="!$common.isEmpty($store.state.webInfo.backgroundImage)?$store.state.webInfo.backgroundImage:$constant.random_image+new Date()+Math.floor(Math.random()*10)"
|
fit="cover">
|
||||||
fit="cover">
|
<div slot="error" class="image-slot background-image-error"></div>
|
||||||
<div slot="error" class="image-slot background-image-error"></div>
|
</el-image>
|
||||||
</el-image>
|
<!-- 首页文字 -->
|
||||||
<!-- 首页文字 -->
|
<div class="signature-wall myCenter my-animation-hideToShow">
|
||||||
<div class="signature-wall myCenter my-animation-hideToShow">
|
<h1 class="playful">
|
||||||
<h1 class="playful">
|
<span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{a}}</span>
|
||||||
<span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{a}}</span>
|
</h1>
|
||||||
</h1>
|
<div class="printer" @click="getGuShi()">
|
||||||
<div class="printer" @click="getGuShi()">
|
<printer :printerInfo="printerInfo">
|
||||||
<printer :printerInfo="printerInfo">
|
<template slot="paper" slot-scope="scope">
|
||||||
<template slot="paper" slot-scope="scope">
|
<h3>
|
||||||
<h3>
|
{{ scope.content }}<span class="cursor">|</span>
|
||||||
{{ scope.content }}<span class="cursor">|</span>
|
</h3>
|
||||||
</h3>
|
</template>
|
||||||
</template>
|
</printer>
|
||||||
</printer>
|
</div>
|
||||||
</div>
|
<div id="bannerWave1"></div>
|
||||||
<div id="bannerWave1"></div>
|
<div id="bannerWave2"></div>
|
||||||
<div id="bannerWave2"></div>
|
<i class="el-icon-arrow-down" @click="navigation('.page-container-wrap')"></i>
|
||||||
<i class="el-icon-arrow-down" @click="navigation('.page-container-wrap')"></i>
|
</div>
|
||||||
</div>
|
<!-- 首页内容 -->
|
||||||
<!-- 首页内容 -->
|
<div class="page-container-wrap">
|
||||||
<div class="page-container-wrap">
|
<div class="page-container">
|
||||||
<div class="page-container">
|
<div class="aside-content" v-if="showAside">
|
||||||
<div class="aside-content" v-if="showAside">
|
<myAside class="aside-content-myAside"></myAside>
|
||||||
<myAside class="aside-content-myAside"></myAside>
|
</div>
|
||||||
</div>
|
<div class="recent-posts">
|
||||||
<div class="recent-posts">
|
<div class="announcement background-opacity">
|
||||||
<div class="announcement background-opacity">
|
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
||||||
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
<div>
|
||||||
<div>
|
<div v-for="(notice, index) in $store.state.webInfo.notices" :key="index">
|
||||||
<div v-for="(notice, index) in $store.state.webInfo.notices" :key="index">
|
{{ notice }}
|
||||||
{{ notice }}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<articleList :articleList="articles"></articleList>
|
||||||
<articleList :articleList="articles"></articleList>
|
<div class="pagination-wrap">
|
||||||
<div class="pagination-wrap">
|
<div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">
|
||||||
<div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">
|
下一页
|
||||||
下一页
|
</div>
|
||||||
</div>
|
<div v-else style="user-select: none">
|
||||||
<div v-else style="user-select: none">
|
~~到底啦~~
|
||||||
~~到底啦~~
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- 页脚 -->
|
||||||
<!-- 页脚 -->
|
<div style="background: var(--background)">
|
||||||
<div style="background: var(--background)">
|
<myFooter></myFooter>
|
||||||
<myFooter></myFooter>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
</loader>
|
||||||
</loader>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
<script>
|
||||||
<script>
|
const loader = () => import( "./common/loader");
|
||||||
const loader = () => import( "./common/loader");
|
const zombie = () => import( "./common/zombie");
|
||||||
const zombie = () => import( "./common/zombie");
|
const printer = () => import( "./common/printer");
|
||||||
const printer = () => import( "./common/printer");
|
const articleList = () => import( "./articleList");
|
||||||
const articleList = () => import( "./articleList");
|
const myFooter = () => import( "./common/myFooter");
|
||||||
const myFooter = () => import( "./common/myFooter");
|
const myAside = () => import( "./myAside");
|
||||||
const myAside = () => import( "./myAside");
|
|
||||||
|
export default {
|
||||||
export default {
|
components: {
|
||||||
components: {
|
loader,
|
||||||
loader,
|
zombie,
|
||||||
zombie,
|
printer,
|
||||||
printer,
|
articleList,
|
||||||
articleList,
|
myFooter,
|
||||||
myFooter,
|
myAside
|
||||||
myAside
|
},
|
||||||
},
|
|
||||||
|
data() {
|
||||||
data() {
|
return {
|
||||||
return {
|
loading: false,
|
||||||
loading: false,
|
showAside: true,
|
||||||
showAside: true,
|
printerInfo: "你看对面的青山多漂亮",
|
||||||
printerInfo: "你看对面的青山多漂亮",
|
pagination: {
|
||||||
pagination: {
|
current: 1,
|
||||||
current: 1,
|
size: 10,
|
||||||
size: 10,
|
total: 0,
|
||||||
total: 0,
|
searchKey: "玩客云"
|
||||||
searchKey: "玩客云"
|
},
|
||||||
},
|
guShi: {
|
||||||
guShi: {
|
"content": "",
|
||||||
"content": "",
|
"origin": "",
|
||||||
"origin": "",
|
"author": "",
|
||||||
"author": "",
|
"category": ""
|
||||||
"category": ""
|
},
|
||||||
},
|
articles: []
|
||||||
articles: []
|
};
|
||||||
};
|
},
|
||||||
},
|
|
||||||
|
created() {
|
||||||
created() {
|
this.getGuShi();
|
||||||
this.getGuShi();
|
// this.getArticles();
|
||||||
// this.getArticles();
|
},
|
||||||
},
|
|
||||||
|
mounted() {
|
||||||
mounted() {
|
|
||||||
// this.$store.commit("changePlaylist", 7463646845)
|
},
|
||||||
},
|
watch: {
|
||||||
watch: {
|
// 监视搜索词变化
|
||||||
// 监视搜索词变化
|
"$route.query.searchKey": {
|
||||||
"$route.query.searchKey": {
|
immediate: true,
|
||||||
immediate: true,
|
handler() {
|
||||||
handler() {
|
this.articles = [];
|
||||||
this.articles = [];
|
this.pagination.searchKey = this.$route.query.searchKey;
|
||||||
this.pagination.searchKey = this.$route.query.searchKey;
|
this.getArticles();
|
||||||
this.getArticles();
|
|
||||||
|
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
methods: {
|
||||||
methods: {
|
pageArticles() {
|
||||||
pageArticles() {
|
this.pagination.current = this.pagination.current + 1;
|
||||||
this.pagination.current = this.pagination.current + 1;
|
this.getArticles();
|
||||||
this.getArticles();
|
},
|
||||||
},
|
|
||||||
|
getArticles() {
|
||||||
getArticles() {
|
this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
||||||
this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
.then((res) => {
|
||||||
.then((res) => {
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
if (!this.$common.isEmpty(res.data)) {
|
this.articles = this.articles.concat(res.data.records);
|
||||||
this.articles = this.articles.concat(res.data.records);
|
this.pagination.total = res.data.total;
|
||||||
this.pagination.total = res.data.total;
|
}
|
||||||
}
|
})
|
||||||
})
|
.catch((error) => {
|
||||||
.catch((error) => {
|
this.$message({
|
||||||
this.$message({
|
message: error.message,
|
||||||
message: error.message,
|
type: "error"
|
||||||
type: "error"
|
});
|
||||||
});
|
});
|
||||||
});
|
},
|
||||||
},
|
navigation(selector) {
|
||||||
navigation(selector) {
|
let pageId = document.querySelector(selector);
|
||||||
let pageId = document.querySelector(selector);
|
window.scrollTo({
|
||||||
window.scrollTo({
|
top: pageId.offsetTop,
|
||||||
top: pageId.offsetTop,
|
behavior: "smooth"
|
||||||
behavior: "smooth"
|
});
|
||||||
});
|
},
|
||||||
},
|
getGuShi() {
|
||||||
getGuShi() {
|
let that = this;
|
||||||
let that = this;
|
let xhr = new XMLHttpRequest();
|
||||||
let xhr = new XMLHttpRequest();
|
xhr.open('get', this.$constant.jinrishici);
|
||||||
xhr.open('get', this.$constant.jinrishici);
|
xhr.onreadystatechange = function () {
|
||||||
xhr.onreadystatechange = function () {
|
if (xhr.readyState === 4) {
|
||||||
if (xhr.readyState === 4) {
|
that.guShi = JSON.parse(xhr.responseText);
|
||||||
that.guShi = JSON.parse(xhr.responseText);
|
that.printerInfo = that.guShi.content;
|
||||||
that.printerInfo = that.guShi.content;
|
}
|
||||||
}
|
};
|
||||||
};
|
xhr.send();
|
||||||
xhr.send();
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
</script>
|
||||||
</script>
|
|
||||||
|
<style scoped>
|
||||||
<style scoped>
|
|
||||||
|
.signature-wall {
|
||||||
.signature-wall {
|
/* 向下排列 */
|
||||||
/* 向下排列 */
|
display: flex;
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
flex-direction: column;
|
position: relative;
|
||||||
position: relative;
|
user-select: none;
|
||||||
user-select: none;
|
height: 100vh;
|
||||||
height: 100vh;
|
overflow: hidden;
|
||||||
overflow: hidden;
|
}
|
||||||
}
|
|
||||||
|
.playful {
|
||||||
.playful {
|
color: var(--white);
|
||||||
color: var(--white);
|
font-size: 40px;
|
||||||
font-size: 40px;
|
}
|
||||||
}
|
|
||||||
|
/*.playful span {*/
|
||||||
/*.playful span {*/
|
/* position: relative;*/
|
||||||
/* position: relative;*/
|
/* color: #5362f6;*/
|
||||||
/* color: #5362f6;*/
|
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
|
||||||
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
|
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
|
||||||
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
|
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
|
||||||
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
|
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
|
||||||
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
|
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
|
||||||
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
|
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
|
||||||
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
|
/* 6px 6px #e485f8;*/
|
||||||
/* 6px 6px #e485f8;*/
|
/* animation: scatter 1.75s infinite;*/
|
||||||
/* animation: scatter 1.75s infinite;*/
|
/* font-weight: normal;*/
|
||||||
/* font-weight: normal;*/
|
/*}*/
|
||||||
/*}*/
|
|
||||||
|
/*.playful span:nth-child(2n) {*/
|
||||||
/*.playful span:nth-child(2n) {*/
|
/* color: #ed625c;*/
|
||||||
/* color: #ed625c;*/
|
/* text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,*/
|
||||||
/* text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,*/
|
/* 1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063,*/
|
||||||
/* 1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063,*/
|
/* 2px 2px #f2a063, 2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,*/
|
||||||
/* 2px 2px #f2a063, 2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,*/
|
/* 3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,*/
|
||||||
/* 3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,*/
|
/* 4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063,*/
|
||||||
/* 4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063,*/
|
/* 5px 5px #f2a063, 5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,*/
|
||||||
/* 5px 5px #f2a063, 5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,*/
|
/* 6px 6px #f2a063;*/
|
||||||
/* 6px 6px #f2a063;*/
|
/* animation-delay: 0.3s;*/
|
||||||
/* animation-delay: 0.3s;*/
|
/*}*/
|
||||||
/*}*/
|
|
||||||
|
/*.playful span:nth-child(3n) {*/
|
||||||
/*.playful span:nth-child(3n) {*/
|
/* color: #ffd913;*/
|
||||||
/* color: #ffd913;*/
|
/* text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,*/
|
||||||
/* text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,*/
|
/* 1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9,*/
|
||||||
/* 1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9,*/
|
/* 2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,*/
|
||||||
/* 2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,*/
|
/* 3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,*/
|
||||||
/* 3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,*/
|
/* 4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9,*/
|
||||||
/* 4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9,*/
|
/* 5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,*/
|
||||||
/* 5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,*/
|
/* 6px 6px #6ec0a9;*/
|
||||||
/* 6px 6px #6ec0a9;*/
|
/* animation-delay: 0.15s;*/
|
||||||
/* animation-delay: 0.15s;*/
|
/*}*/
|
||||||
/*}*/
|
|
||||||
|
/*.playful span:nth-child(5n) {*/
|
||||||
/*.playful span:nth-child(5n) {*/
|
/* color: #555bff;*/
|
||||||
/* color: #555bff;*/
|
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
|
||||||
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
|
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
|
||||||
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
|
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
|
||||||
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
|
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
|
||||||
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
|
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
|
||||||
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
|
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
|
||||||
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
|
/* 6px 6px #e485f8;*/
|
||||||
/* 6px 6px #e485f8;*/
|
/* animation-delay: 0.4s;*/
|
||||||
/* animation-delay: 0.4s;*/
|
/*}*/
|
||||||
/*}*/
|
|
||||||
|
/*.playful span:nth-child(7n) {*/
|
||||||
/*.playful span:nth-child(7n) {*/
|
/* color: #ff9c55;*/
|
||||||
/* color: #ff9c55;*/
|
/* text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,*/
|
||||||
/* text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,*/
|
/* 1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555,*/
|
||||||
/* 1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555,*/
|
/* 2px 2px #ff5555, 2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,*/
|
||||||
/* 2px 2px #ff5555, 2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,*/
|
/* 3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,*/
|
||||||
/* 3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,*/
|
/* 4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555,*/
|
||||||
/* 4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555,*/
|
/* 5px 5px #ff5555, 5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,*/
|
||||||
/* 5px 5px #ff5555, 5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,*/
|
/* 6px 6px #ff5555;*/
|
||||||
/* 6px 6px #ff5555;*/
|
/* animation-delay: 0.25s;*/
|
||||||
/* animation-delay: 0.25s;*/
|
/*}*/
|
||||||
/*}*/
|
|
||||||
|
.printer {
|
||||||
.printer {
|
cursor: pointer;
|
||||||
cursor: pointer;
|
color: var(--white);
|
||||||
color: var(--white);
|
background: var(--translucent);
|
||||||
background: var(--translucent);
|
border-radius: 10px;
|
||||||
border-radius: 10px;
|
padding-left: 10px;
|
||||||
padding-left: 10px;
|
padding-right: 10px;
|
||||||
padding-right: 10px;
|
}
|
||||||
}
|
|
||||||
|
#bannerWave1 {
|
||||||
#bannerWave1 {
|
height: 84px;
|
||||||
height: 84px;
|
background: var(--bannerWave1);
|
||||||
background: var(--bannerWave1);
|
position: absolute;
|
||||||
position: absolute;
|
width: 200%;
|
||||||
width: 200%;
|
bottom: 0;
|
||||||
bottom: 0;
|
z-index: 10;
|
||||||
z-index: 10;
|
animation: gradientBG 120s linear infinite;
|
||||||
animation: gradientBG 120s linear infinite;
|
}
|
||||||
}
|
|
||||||
|
#bannerWave2 {
|
||||||
#bannerWave2 {
|
height: 100px;
|
||||||
height: 100px;
|
background: var(--bannerWave2);
|
||||||
background: var(--bannerWave2);
|
position: absolute;
|
||||||
position: absolute;
|
width: 400%;
|
||||||
width: 400%;
|
bottom: 0;
|
||||||
bottom: 0;
|
z-index: 5;
|
||||||
z-index: 5;
|
animation: gradientBG 120s linear infinite;
|
||||||
animation: gradientBG 120s linear infinite;
|
}
|
||||||
}
|
|
||||||
|
/* 光标 */
|
||||||
/* 光标 */
|
.cursor {
|
||||||
.cursor {
|
margin-left: 1px;
|
||||||
margin-left: 1px;
|
animation: hideToShow 0.7s infinite;
|
||||||
animation: hideToShow 0.7s infinite;
|
font-weight: 200;
|
||||||
font-weight: 200;
|
}
|
||||||
}
|
|
||||||
|
.el-icon-arrow-down {
|
||||||
.el-icon-arrow-down {
|
font-size: 40px;
|
||||||
font-size: 40px;
|
font-weight: bold;
|
||||||
font-weight: bold;
|
color: var(--white);
|
||||||
color: var(--white);
|
position: absolute;
|
||||||
position: absolute;
|
bottom: 60px;
|
||||||
bottom: 60px;
|
animation: my-shake 1.5s ease-out infinite;
|
||||||
animation: my-shake 1.5s ease-out infinite;
|
z-index: 15;
|
||||||
z-index: 15;
|
cursor: pointer;
|
||||||
cursor: pointer;
|
}
|
||||||
}
|
|
||||||
|
.page-container-wrap {
|
||||||
.page-container-wrap {
|
background: var(--background);
|
||||||
background: var(--background);
|
position: relative;
|
||||||
position: relative;
|
transition: .5s;
|
||||||
transition: .5s;
|
}
|
||||||
}
|
|
||||||
|
.page-container {
|
||||||
.page-container {
|
display: flex;
|
||||||
display: flex;
|
justify-content: center;
|
||||||
justify-content: center;
|
width: 90%;
|
||||||
width: 90%;
|
max-width: 1280px;
|
||||||
max-width: 1280px;
|
padding: 0 14px 40px 14px;
|
||||||
padding: 0 20px 40px 20px;
|
margin: 0 auto;
|
||||||
margin: 0 auto;
|
flex-direction: row;
|
||||||
flex-direction: row;
|
}
|
||||||
}
|
|
||||||
|
.recent-posts {
|
||||||
.recent-posts {
|
width: 70%;
|
||||||
width: 70%;
|
}
|
||||||
}
|
|
||||||
|
.announcement {
|
||||||
.announcement {
|
padding: 22px;
|
||||||
padding: 22px;
|
border: 1px dashed var(--lightGray);
|
||||||
border: 1px dashed var(--lightGray);
|
color: var(--greyFont);
|
||||||
color: var(--greyFont);
|
border-radius: 10px;
|
||||||
border-radius: 10px;
|
display: flex;
|
||||||
display: flex;
|
max-width: 780px;
|
||||||
max-width: 780px;
|
margin: 40px auto 40px;
|
||||||
margin: 40px auto 40px;
|
}
|
||||||
}
|
|
||||||
|
.announcement i {
|
||||||
.announcement i {
|
color: var(--themeBackground);
|
||||||
color: var(--themeBackground);
|
font-size: 22px;
|
||||||
font-size: 22px;
|
margin: auto 0;
|
||||||
margin: auto 0;
|
animation: scale 0.8s ease-in-out infinite;
|
||||||
animation: scale 0.8s ease-in-out infinite;
|
}
|
||||||
}
|
|
||||||
|
.announcement div div {
|
||||||
.announcement div div {
|
margin-left: 20px;
|
||||||
margin-left: 20px;
|
line-height: 30px;
|
||||||
line-height: 30px;
|
}
|
||||||
}
|
|
||||||
|
.aside-content {
|
||||||
.aside-content {
|
width: calc(30% - 40px);
|
||||||
width: calc(30% - 40px);
|
user-select: none;
|
||||||
user-select: none;
|
margin-top: 40px;
|
||||||
margin-top: 40px;
|
margin-right: 40px;
|
||||||
margin-right: 40px;
|
max-width: 300px;
|
||||||
max-width: 300px;
|
float: right;
|
||||||
float: right;
|
}
|
||||||
}
|
|
||||||
|
.pagination-wrap {
|
||||||
.pagination-wrap {
|
display: flex;
|
||||||
display: flex;
|
justify-content: center;
|
||||||
justify-content: center;
|
margin-top: 40px;
|
||||||
margin-top: 40px;
|
}
|
||||||
}
|
|
||||||
|
.pagination {
|
||||||
.pagination {
|
padding: 13px 15px;
|
||||||
padding: 13px 15px;
|
border: 1px solid var(--lightGray);
|
||||||
border: 1px solid var(--lightGray);
|
border-radius: 3rem;
|
||||||
border-radius: 3rem;
|
color: var(--greyFont);
|
||||||
color: var(--greyFont);
|
width: 100px;
|
||||||
width: 100px;
|
user-select: none;
|
||||||
user-select: none;
|
cursor: pointer;
|
||||||
cursor: pointer;
|
text-align: center;
|
||||||
text-align: center;
|
}
|
||||||
}
|
.aside-content-myAside{
|
||||||
.aside-content-myAside{
|
position: sticky;
|
||||||
position: sticky;
|
top: 10px;
|
||||||
top: 10px;
|
}
|
||||||
}
|
.pagination:hover {
|
||||||
.pagination:hover {
|
border: 1px solid var(--themeBackground);
|
||||||
border: 1px solid var(--themeBackground);
|
color: var(--themeBackground);
|
||||||
color: var(--themeBackground);
|
box-shadow: 0 0 5px var(--themeBackground);
|
||||||
box-shadow: 0 0 5px var(--themeBackground);
|
}
|
||||||
}
|
|
||||||
|
@media screen and (max-width: 1100px) {
|
||||||
@media screen and (max-width: 1100px) {
|
.recent-posts {
|
||||||
.recent-posts {
|
width: 100%;
|
||||||
width: 100%;
|
}
|
||||||
}
|
|
||||||
|
.page-container {
|
||||||
.page-container {
|
width: 100%;
|
||||||
width: 100%;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
@media screen and (max-width: 1000px) {
|
|
||||||
|
.page-container {
|
||||||
.page-container {
|
/* 文章栏与侧标栏垂直排列 */
|
||||||
/* 文章栏与侧标栏垂直排列 */
|
flex-direction: column;
|
||||||
flex-direction: column;
|
}
|
||||||
}
|
|
||||||
|
.aside-content {
|
||||||
.aside-content {
|
width: 100%;
|
||||||
width: 100%;
|
max-width: unset;
|
||||||
max-width: unset;
|
float: unset;
|
||||||
float: unset;
|
margin: 40px auto 0;
|
||||||
margin: 40px auto 0;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
|
h1 {
|
||||||
h1 {
|
font-size: 35px;
|
||||||
font-size: 35px;
|
}
|
||||||
}
|
}
|
||||||
}
|
</style>
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,406 +1,429 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<loader :loading="loading">
|
<loader :loading="loading">
|
||||||
<!-- 加载页面 -->
|
<!-- 加载页面 -->
|
||||||
<template slot="loader">
|
<template slot="loader">
|
||||||
<div>
|
<div>
|
||||||
<zombie></zombie>
|
<zombie></zombie>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<!-- 内容页面 -->
|
<!-- 内容页面 -->
|
||||||
<template slot="body">
|
<template slot="body">
|
||||||
<!-- 首页图片 -->
|
<!-- 首页图片 -->
|
||||||
<el-image style="animation: header-effect 2s"
|
<el-image style="animation: header-effect 2s"
|
||||||
class="background-image"
|
class="background-image"
|
||||||
v-once
|
v-once
|
||||||
:src="$constant.background.view_random"
|
:lazy='true'
|
||||||
fit="cover">
|
:src="$constant.background.bing_random"
|
||||||
<div slot="error" class="image-slot background-image-error"></div>
|
fit="cover">
|
||||||
</el-image>
|
<div slot="error" class="image-slot background-image-error"></div>
|
||||||
<!-- 首页文字 -->
|
</el-image>
|
||||||
<div class="signature-wall myCenter my-animation-hideToShow">
|
<!-- 首页文字 -->
|
||||||
<h1 class="playful">
|
<div class="signature-wall myCenter my-animation-hideToShow">
|
||||||
<span v-for="(a, index) in '💎我的空间💎'" :key="index">{{a}}</span>
|
<h1 class="playful">
|
||||||
</h1>
|
<span v-for="(a, index) in '💎我的空间💎'" :key="index">{{a}}</span>
|
||||||
<div class="printer" @click="getGuShi()">
|
</h1>
|
||||||
<printer :printerInfo="printerInfo">
|
<div class="printer" @click="getGuShi()">
|
||||||
<template slot="paper" slot-scope="scope">
|
<printer :printerInfo="printerInfo">
|
||||||
<h3>
|
<template slot="paper" slot-scope="scope">
|
||||||
{{ scope.content }}<span class="cursor">|</span>
|
<h3>
|
||||||
</h3>
|
{{ scope.content }}<span class="cursor">|</span>
|
||||||
</template>
|
</h3>
|
||||||
</printer>
|
</template>
|
||||||
</div>
|
</printer>
|
||||||
<div id="bannerWave1"></div>
|
</div>
|
||||||
<div id="bannerWave2"></div>
|
<div id="bannerWave1"></div>
|
||||||
<i class="el-icon-arrow-down" @click="navigation('.page-container-wrap')"></i>
|
<div id="bannerWave2"></div>
|
||||||
</div>
|
<i class="el-icon-arrow-down" @click="navigation('.page-container-wrap')"></i>
|
||||||
<!-- 首页内容 -->
|
</div>
|
||||||
<div class="page-container-wrap">
|
<!-- 首页内容 -->
|
||||||
<div class="page-container">
|
<div class="page-container-wrap">
|
||||||
<div class="aside-content" v-if="showAside">
|
<div class="page-container">
|
||||||
<myAside class="aside-content-myAside"></myAside>
|
<div class="aside-content" v-if="showAside">
|
||||||
</div>
|
<myAside class="aside-content-myAside"></myAside>
|
||||||
<div class="recent-posts" >
|
</div>
|
||||||
<div class="announcement background-opacity">
|
<div class="recent-posts" >
|
||||||
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
<div class="announcement background-opacity">
|
||||||
<div>
|
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
||||||
<div v-for="(notice, index) in $store.state.webInfo.notices" :key="index">
|
<div>
|
||||||
{{ notice }}
|
<div v-for="(notice, index) in $store.state.webInfo.notices" :key="index">
|
||||||
</div>
|
{{ notice }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div ref="pictureList">
|
</div>
|
||||||
|
<div ref="pictureList">
|
||||||
<shuoshuo v-for="item in articles" :key="item" :source = "item"></shuoshuo>
|
|
||||||
</div>
|
<shuoshuo v-for="item in filterArticles()" :key="item" :source = "item"></shuoshuo>
|
||||||
<!-- -->
|
</div>
|
||||||
<div class="pagination-wrap">
|
<!-- -->
|
||||||
<div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">
|
<div class="pagination-wrap">
|
||||||
下一页
|
<div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">
|
||||||
</div>
|
下一页
|
||||||
<div v-else style="user-select: none">
|
</div>
|
||||||
~~到底啦~~
|
<div v-else style="user-select: none">
|
||||||
</div>
|
~~到底啦~~
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 页脚 -->
|
</div>
|
||||||
<div style="background: var(--background)">
|
<!-- 页脚 -->
|
||||||
<myFooter></myFooter>
|
<div style="background: var(--background)">
|
||||||
</div>
|
<myFooter></myFooter>
|
||||||
</template>
|
</div>
|
||||||
</loader>
|
</template>
|
||||||
</div>
|
</loader>
|
||||||
</template>
|
</div>
|
||||||
<script>
|
</template>
|
||||||
const loader = () => import( "./common/loader");
|
<script>
|
||||||
const zombie = () => import( "./common/zombie");
|
const loader = () => import( "./common/loader");
|
||||||
const printer = () => import( "./common/printer");
|
const zombie = () => import( "./common/zombie");
|
||||||
const shuoshuo = () => import( "./common/shuoshuo");
|
const printer = () => import( "./common/printer");
|
||||||
const myFooter = () => import( "./common/myFooter");
|
const shuoshuo = () => import( "./common/shuoshuo");
|
||||||
const myAside = () => import( "./myAside");
|
const myFooter = () => import( "./common/myFooter");
|
||||||
|
const myAside = () => import( "./myAside");
|
||||||
export default {
|
|
||||||
components: {
|
export default {
|
||||||
loader,
|
components: {
|
||||||
zombie,
|
loader,
|
||||||
printer,
|
zombie,
|
||||||
myFooter,
|
printer,
|
||||||
shuoshuo,
|
myFooter,
|
||||||
myAside
|
shuoshuo,
|
||||||
},
|
myAside
|
||||||
|
},
|
||||||
data() {
|
|
||||||
return {
|
data() {
|
||||||
loading: false,
|
return {
|
||||||
showAside: true,
|
loading: false,
|
||||||
printerInfo: "你看对面的青山多漂亮",
|
showAside: true,
|
||||||
pagination: {
|
printerInfo: "你看对面的青山多漂亮",
|
||||||
current: 1,
|
pagination: {
|
||||||
size: 10,
|
current: 1,
|
||||||
total: 0,
|
size: 10,
|
||||||
searchKey: ""
|
total: 0,
|
||||||
},
|
searchKey: ""
|
||||||
guShi: {
|
},
|
||||||
"content": "",
|
guShi: {
|
||||||
"origin": "",
|
"content": "",
|
||||||
"author": "",
|
"origin": "",
|
||||||
"category": ""
|
"author": "",
|
||||||
},
|
"category": ""
|
||||||
articles: []
|
},
|
||||||
};
|
articles: []
|
||||||
},
|
};
|
||||||
|
},
|
||||||
watch: {},
|
|
||||||
|
watch: {},
|
||||||
created() {
|
|
||||||
this.getGuShi();
|
created() {
|
||||||
this.getArticles();
|
this.getGuShi();
|
||||||
},
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||||
|
this.$message({
|
||||||
mounted() {
|
message: "登录后可查看更多",
|
||||||
this.$store.commit("changePlaylist", 370417370);
|
type: "warning"
|
||||||
},
|
});
|
||||||
|
}
|
||||||
methods: {
|
this.getArticles();
|
||||||
pageArticles() {
|
},
|
||||||
this.pagination.current = this.pagination.current + 1;
|
|
||||||
this.getArticles();
|
mounted() {
|
||||||
},
|
this.$store.commit("changePlaylist", 370417370);
|
||||||
|
},
|
||||||
getArticles() {
|
|
||||||
this.$http.post(this.$constant.baseURL + "/diary/listArticle", this.pagination)
|
methods: {
|
||||||
.then((res) => {
|
pageArticles() {
|
||||||
if (!this.$common.isEmpty(res.data)) {
|
this.pagination.current = this.pagination.current + 1;
|
||||||
this.articles = this.articles.concat(res.data.records);
|
this.getArticles();
|
||||||
this.pagination.total = res.data.total;
|
},
|
||||||
}
|
filterArticles(){
|
||||||
})
|
//这里我显示所有文章
|
||||||
.catch((error) => {
|
return this.articles;
|
||||||
this.$message({
|
if (this.$route.query.showAll)
|
||||||
message: error.message,
|
return this.articles;
|
||||||
type: "error"
|
else if (!this.$common.isEmpty(this.$store.state.currentUser))
|
||||||
});
|
return this.articles.filter(obj => obj.permission < 2);
|
||||||
});
|
else
|
||||||
},
|
return this.articles.filter(obj => obj.permission < 1);
|
||||||
navigation(selector) {
|
},
|
||||||
let pageId = document.querySelector(selector);
|
getArticles() {
|
||||||
window.scrollTo({
|
this.$http.post(this.$constant.baseURL + "/diary/listArticle", this.pagination)
|
||||||
top: pageId.offsetTop,
|
.then((res) => {
|
||||||
behavior: "smooth"
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
});
|
this.articles = this.articles.concat(res.data.records);
|
||||||
},
|
this.pagination.total = res.data.total;
|
||||||
getGuShi() {
|
console.log(this.articles);
|
||||||
let that = this;
|
let obj = [[],[]]
|
||||||
let xhr = new XMLHttpRequest();
|
this.articles.forEach(artcile => {
|
||||||
xhr.open('get', this.$constant.jinrishici);
|
let items = JSON.parse(artcile.articleItems)
|
||||||
xhr.onreadystatechange = function () {
|
obj[0].push(...items[0])
|
||||||
if (xhr.readyState === 4) {
|
obj[1].push(...items[1])
|
||||||
that.guShi = JSON.parse(xhr.responseText);
|
});
|
||||||
that.printerInfo = that.guShi.content;
|
}
|
||||||
}
|
})
|
||||||
};
|
.catch((error) => {
|
||||||
xhr.send();
|
this.$message({
|
||||||
}
|
message: error.message,
|
||||||
}
|
type: "error"
|
||||||
}
|
});
|
||||||
</script>
|
});
|
||||||
|
},
|
||||||
<style scoped>
|
navigation(selector) {
|
||||||
|
let pageId = document.querySelector(selector);
|
||||||
.signature-wall {
|
window.scrollTo({
|
||||||
/* 向下排列 */
|
top: pageId.offsetTop,
|
||||||
display: flex;
|
behavior: "smooth"
|
||||||
flex-direction: column;
|
});
|
||||||
position: relative;
|
},
|
||||||
user-select: none;
|
getGuShi() {
|
||||||
height: 100vh;
|
let that = this;
|
||||||
overflow: hidden;
|
let xhr = new XMLHttpRequest();
|
||||||
}
|
xhr.open('get', this.$constant.jinrishici);
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
.playful {
|
if (xhr.readyState === 4) {
|
||||||
color: var(--white);
|
that.guShi = JSON.parse(xhr.responseText);
|
||||||
font-size: 40px;
|
that.printerInfo = that.guShi.content;
|
||||||
}
|
}
|
||||||
|
};
|
||||||
/*.playful span {*/
|
xhr.send();
|
||||||
/* position: relative;*/
|
}
|
||||||
/* color: #5362f6;*/
|
}
|
||||||
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
|
}
|
||||||
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
|
</script>
|
||||||
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
|
|
||||||
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
|
<style scoped>
|
||||||
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
|
|
||||||
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
|
.signature-wall {
|
||||||
/* 6px 6px #e485f8;*/
|
/* 向下排列 */
|
||||||
/* animation: scatter 1.75s infinite;*/
|
display: flex;
|
||||||
/* font-weight: normal;*/
|
flex-direction: column;
|
||||||
/*}*/
|
position: relative;
|
||||||
|
user-select: none;
|
||||||
/*.playful span:nth-child(2n) {*/
|
height: 100vh;
|
||||||
/* color: #ed625c;*/
|
overflow: hidden;
|
||||||
/* text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,*/
|
}
|
||||||
/* 1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063,*/
|
|
||||||
/* 2px 2px #f2a063, 2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,*/
|
.playful {
|
||||||
/* 3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,*/
|
color: var(--white);
|
||||||
/* 4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063,*/
|
font-size: 40px;
|
||||||
/* 5px 5px #f2a063, 5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,*/
|
}
|
||||||
/* 6px 6px #f2a063;*/
|
|
||||||
/* animation-delay: 0.3s;*/
|
/*.playful span {*/
|
||||||
/*}*/
|
/* position: relative;*/
|
||||||
|
/* color: #5362f6;*/
|
||||||
/*.playful span:nth-child(3n) {*/
|
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
|
||||||
/* color: #ffd913;*/
|
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
|
||||||
/* text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,*/
|
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
|
||||||
/* 1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9,*/
|
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
|
||||||
/* 2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,*/
|
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
|
||||||
/* 3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,*/
|
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
|
||||||
/* 4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9,*/
|
/* 6px 6px #e485f8;*/
|
||||||
/* 5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,*/
|
/* animation: scatter 1.75s infinite;*/
|
||||||
/* 6px 6px #6ec0a9;*/
|
/* font-weight: normal;*/
|
||||||
/* animation-delay: 0.15s;*/
|
/*}*/
|
||||||
/*}*/
|
|
||||||
|
/*.playful span:nth-child(2n) {*/
|
||||||
/*.playful span:nth-child(5n) {*/
|
/* color: #ed625c;*/
|
||||||
/* color: #555bff;*/
|
/* text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,*/
|
||||||
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
|
/* 1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063,*/
|
||||||
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
|
/* 2px 2px #f2a063, 2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,*/
|
||||||
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
|
/* 3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,*/
|
||||||
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
|
/* 4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063,*/
|
||||||
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
|
/* 5px 5px #f2a063, 5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,*/
|
||||||
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
|
/* 6px 6px #f2a063;*/
|
||||||
/* 6px 6px #e485f8;*/
|
/* animation-delay: 0.3s;*/
|
||||||
/* animation-delay: 0.4s;*/
|
/*}*/
|
||||||
/*}*/
|
|
||||||
|
/*.playful span:nth-child(3n) {*/
|
||||||
/*.playful span:nth-child(7n) {*/
|
/* color: #ffd913;*/
|
||||||
/* color: #ff9c55;*/
|
/* text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,*/
|
||||||
/* text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,*/
|
/* 1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9,*/
|
||||||
/* 1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555,*/
|
/* 2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,*/
|
||||||
/* 2px 2px #ff5555, 2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,*/
|
/* 3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,*/
|
||||||
/* 3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,*/
|
/* 4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9,*/
|
||||||
/* 4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555,*/
|
/* 5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,*/
|
||||||
/* 5px 5px #ff5555, 5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,*/
|
/* 6px 6px #6ec0a9;*/
|
||||||
/* 6px 6px #ff5555;*/
|
/* animation-delay: 0.15s;*/
|
||||||
/* animation-delay: 0.25s;*/
|
/*}*/
|
||||||
/*}*/
|
|
||||||
|
/*.playful span:nth-child(5n) {*/
|
||||||
.printer {
|
/* color: #555bff;*/
|
||||||
cursor: pointer;
|
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
|
||||||
color: var(--white);
|
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
|
||||||
background: var(--translucent);
|
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
|
||||||
border-radius: 10px;
|
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
|
||||||
padding-left: 10px;
|
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
|
||||||
padding-right: 10px;
|
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
|
||||||
}
|
/* 6px 6px #e485f8;*/
|
||||||
|
/* animation-delay: 0.4s;*/
|
||||||
#bannerWave1 {
|
/*}*/
|
||||||
height: 84px;
|
|
||||||
background: var(--bannerWave1);
|
/*.playful span:nth-child(7n) {*/
|
||||||
position: absolute;
|
/* color: #ff9c55;*/
|
||||||
width: 200%;
|
/* text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,*/
|
||||||
bottom: 0;
|
/* 1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555,*/
|
||||||
z-index: 10;
|
/* 2px 2px #ff5555, 2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,*/
|
||||||
animation: gradientBG 120s linear infinite;
|
/* 3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,*/
|
||||||
}
|
/* 4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555,*/
|
||||||
|
/* 5px 5px #ff5555, 5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,*/
|
||||||
#bannerWave2 {
|
/* 6px 6px #ff5555;*/
|
||||||
height: 100px;
|
/* animation-delay: 0.25s;*/
|
||||||
background: var(--bannerWave2);
|
/*}*/
|
||||||
position: absolute;
|
|
||||||
width: 400%;
|
.printer {
|
||||||
bottom: 0;
|
cursor: pointer;
|
||||||
z-index: 5;
|
color: var(--white);
|
||||||
animation: gradientBG 120s linear infinite;
|
background: var(--translucent);
|
||||||
}
|
border-radius: 10px;
|
||||||
|
padding-left: 10px;
|
||||||
/* 光标 */
|
padding-right: 10px;
|
||||||
.cursor {
|
}
|
||||||
margin-left: 1px;
|
|
||||||
animation: hideToShow 0.7s infinite;
|
#bannerWave1 {
|
||||||
font-weight: 200;
|
height: 84px;
|
||||||
}
|
background: var(--bannerWave1);
|
||||||
|
position: absolute;
|
||||||
.el-icon-arrow-down {
|
width: 200%;
|
||||||
font-size: 40px;
|
bottom: 0;
|
||||||
font-weight: bold;
|
z-index: 10;
|
||||||
color: var(--white);
|
animation: gradientBG 120s linear infinite;
|
||||||
position: absolute;
|
}
|
||||||
bottom: 60px;
|
|
||||||
animation: my-shake 1.5s ease-out infinite;
|
#bannerWave2 {
|
||||||
z-index: 15;
|
height: 100px;
|
||||||
cursor: pointer;
|
background: var(--bannerWave2);
|
||||||
}
|
position: absolute;
|
||||||
|
width: 400%;
|
||||||
.page-container-wrap {
|
bottom: 0;
|
||||||
background: var(--background);
|
z-index: 5;
|
||||||
position: relative;
|
animation: gradientBG 120s linear infinite;
|
||||||
transition: .5s;
|
}
|
||||||
}
|
|
||||||
|
/* 光标 */
|
||||||
.page-container {
|
.cursor {
|
||||||
display: flex;
|
margin-left: 1px;
|
||||||
justify-content: center;
|
animation: hideToShow 0.7s infinite;
|
||||||
width: 90%;
|
font-weight: 200;
|
||||||
max-width: 1280px;
|
}
|
||||||
padding: 0 20px 40px 20px;
|
|
||||||
margin: 0 auto;
|
.el-icon-arrow-down {
|
||||||
flex-direction: row;
|
font-size: 40px;
|
||||||
}
|
font-weight: bold;
|
||||||
|
color: var(--white);
|
||||||
.recent-posts {
|
position: absolute;
|
||||||
width: 70%;
|
bottom: 60px;
|
||||||
}
|
animation: my-shake 1.5s ease-out infinite;
|
||||||
|
z-index: 15;
|
||||||
.announcement {
|
cursor: pointer;
|
||||||
padding: 22px;
|
}
|
||||||
border: 1px dashed var(--lightGray);
|
|
||||||
color: var(--greyFont);
|
.page-container-wrap {
|
||||||
border-radius: 10px;
|
background: var(--background);
|
||||||
display: flex;
|
position: relative;
|
||||||
max-width: 780px;
|
transition: .5s;
|
||||||
margin: 40px auto 40px;
|
}
|
||||||
}
|
|
||||||
|
.page-container {
|
||||||
.announcement i {
|
display: flex;
|
||||||
color: var(--themeBackground);
|
justify-content: center;
|
||||||
font-size: 22px;
|
width: 90%;
|
||||||
margin: auto 0;
|
max-width: 1280px;
|
||||||
animation: scale 0.8s ease-in-out infinite;
|
padding: 0 20px 40px 20px;
|
||||||
}
|
margin: 0 auto;
|
||||||
|
flex-direction: row;
|
||||||
.announcement div div {
|
}
|
||||||
margin-left: 20px;
|
|
||||||
line-height: 30px;
|
.recent-posts {
|
||||||
}
|
width: 70%;
|
||||||
|
}
|
||||||
.aside-content {
|
|
||||||
width: calc(30% - 40px);
|
.announcement {
|
||||||
user-select: none;
|
padding: 22px;
|
||||||
margin-top: 40px;
|
border: 1px dashed var(--lightGray);
|
||||||
margin-right: 40px;
|
color: var(--greyFont);
|
||||||
max-width: 300px;
|
border-radius: 10px;
|
||||||
float: right;
|
display: flex;
|
||||||
}
|
max-width: 780px;
|
||||||
|
margin: 40px auto 40px;
|
||||||
.pagination-wrap {
|
}
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
.announcement i {
|
||||||
margin-top: 40px;
|
color: var(--themeBackground);
|
||||||
}
|
font-size: 22px;
|
||||||
|
margin: auto 0;
|
||||||
.pagination {
|
animation: scale 0.8s ease-in-out infinite;
|
||||||
padding: 13px 15px;
|
}
|
||||||
border: 1px solid var(--lightGray);
|
|
||||||
border-radius: 3rem;
|
.announcement div div {
|
||||||
color: var(--greyFont);
|
margin-left: 20px;
|
||||||
width: 100px;
|
line-height: 30px;
|
||||||
user-select: none;
|
}
|
||||||
cursor: pointer;
|
|
||||||
text-align: center;
|
.aside-content {
|
||||||
}
|
width: calc(30% - 40px);
|
||||||
.aside-content-myAside{
|
user-select: none;
|
||||||
position: sticky;
|
margin-top: 40px;
|
||||||
top: 10px;
|
margin-right: 40px;
|
||||||
}
|
max-width: 300px;
|
||||||
.pagination:hover {
|
float: right;
|
||||||
border: 1px solid var(--themeBackground);
|
}
|
||||||
color: var(--themeBackground);
|
|
||||||
box-shadow: 0 0 5px var(--themeBackground);
|
.pagination-wrap {
|
||||||
}
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
@media screen and (max-width: 1100px) {
|
margin-top: 40px;
|
||||||
.recent-posts {
|
}
|
||||||
width: 100%;
|
|
||||||
}
|
.pagination {
|
||||||
|
padding: 13px 15px;
|
||||||
.page-container {
|
border: 1px solid var(--lightGray);
|
||||||
width: 100%;
|
border-radius: 3rem;
|
||||||
}
|
color: var(--greyFont);
|
||||||
}
|
width: 100px;
|
||||||
|
user-select: none;
|
||||||
@media screen and (max-width: 1000px) {
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
.page-container {
|
}
|
||||||
/* 文章栏与侧标栏垂直排列 */
|
.aside-content-myAside{
|
||||||
flex-direction: column;
|
position: sticky;
|
||||||
}
|
top: 10px;
|
||||||
|
}
|
||||||
.aside-content {
|
.pagination:hover {
|
||||||
width: 100%;
|
border: 1px solid var(--themeBackground);
|
||||||
max-width: unset;
|
color: var(--themeBackground);
|
||||||
float: unset;
|
box-shadow: 0 0 5px var(--themeBackground);
|
||||||
margin: 40px auto 0;
|
}
|
||||||
}
|
|
||||||
}
|
@media screen and (max-width: 1100px) {
|
||||||
|
.recent-posts {
|
||||||
@media screen and (max-width: 768px) {
|
width: 100%;
|
||||||
|
}
|
||||||
h1 {
|
|
||||||
font-size: 35px;
|
.page-container {
|
||||||
}
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
|
||||||
|
.page-container {
|
||||||
|
/* 文章栏与侧标栏垂直排列 */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-content {
|
||||||
|
width: 100%;
|
||||||
|
max-width: unset;
|
||||||
|
float: unset;
|
||||||
|
margin: 40px auto 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,331 +1,335 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 搜索框 -->
|
<!-- 搜索框 -->
|
||||||
<div class="card-content0">
|
<div class="card-content0">
|
||||||
<form @submit.prevent="goSearch()">
|
<form @submit.prevent="goSearch()">
|
||||||
<input type="text" v-model="searchKey" placeholder="搜索从这里开始...">
|
<input type="text" v-model="searchKey" placeholder="搜索从这里开始...">
|
||||||
<button type="submit"></button>
|
<button type="submit"></button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<!-- 网站信息 -->
|
<!-- 网站信息 -->
|
||||||
<div class="card-content1 shadow-box background-opacity">
|
<div class="card-content1 shadow-box background-opacity">
|
||||||
<el-avatar style="margin-top: 20px" class="user-avatar" :size="120" :src="webInfo.avatar"></el-avatar>
|
<el-avatar style="margin-top: 20px" class="user-avatar" :size="120" :src="webInfo.avatar"></el-avatar>
|
||||||
<div class="web-name">{{webInfo.webName}}</div>
|
<div class="web-name">{{webInfo.webName}}</div>
|
||||||
<div class="web-info">
|
<div class="web-info">
|
||||||
<div class="blog-info-box">
|
<div class="blog-info-box">
|
||||||
<span>文章</span>
|
<span>文章</span>
|
||||||
<span class="blog-info-num">{{ $store.getters.articleTotal }}</span>
|
<span class="blog-info-num">{{ $store.getters.articleTotal }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="blog-info-box">
|
<div class="blog-info-box">
|
||||||
<span>分类</span>
|
<span>分类</span>
|
||||||
<span class="blog-info-num">{{ sortInfo.length }}</span>
|
<span class="blog-info-num">{{ sortInfo.length }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="more-cannal">
|
<div class="more-cannal">
|
||||||
<a ks-text="Github" ks-tag="top" href="https://github.com/janxland" target="_blank" ><i class="fa fa-github" style="background-color: #000;" aria-hidden="true"></i></a>
|
<a ks-text="Github" ks-tag="top" href="https://github.com/janxland" target="_blank" ><i class="fa fa-github" style="background-color: #000;" aria-hidden="true"></i></a>
|
||||||
<a ks-text="Twitter" ks-tag="top" href="" target="_blank"><i class="fa fa-twitter" style="background-color: #1d9bf0;" aria-hidden="true"></i></a>
|
<a ks-text="Twitter" ks-tag="top" href="" target="_blank"><i class="fa fa-twitter" style="background-color: #1d9bf0;" aria-hidden="true"></i></a>
|
||||||
<a ks-text="微信" ks-tag="top" href="" target="_blank"><i class="fa fa-wechat" style="background-color: #1aad19;" aria-hidden="true"></i></a>
|
<a ks-text="微信" ks-tag="top" href="https://u.wechat.com/MP9ZNUD9y1VsG3xlE103RVs" target="_blank"><i class="fa fa-wechat" style="background-color: #1aad19;" aria-hidden="true"></i></a>
|
||||||
<a ks-text="Bilibili" ks-tag="top" href="https://space.bilibili.com/11363292" target="_blank"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color: #f25d8e"><path d="M777.514667 131.669333a53.333333 53.333333 0 0 1 0 75.434667L728.746667 255.829333h49.92A160 160 0 0 1 938.666667 415.872v320a160 160 0 0 1-160 160H245.333333A160 160 0 0 1 85.333333 735.872v-320a160 160 0 0 1 160-160h49.749334L246.4 207.146667a53.333333 53.333333 0 1 1 75.392-75.434667l113.152 113.152c3.370667 3.370667 6.186667 7.04 8.448 10.965333h137.088c2.261333-3.925333 5.12-7.68 8.490667-11.008l113.109333-113.152a53.333333 53.333333 0 0 1 75.434667 0z m1.152 231.253334H245.333333a53.333333 53.333333 0 0 0-53.205333 49.365333l-0.128 4.010667v320c0 28.117333 21.76 51.157333 49.365333 53.162666l3.968 0.170667h533.333334a53.333333 53.333333 0 0 0 53.205333-49.365333l0.128-3.968v-320c0-29.44-23.893333-53.333333-53.333333-53.333334z m-426.666667 106.666666c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z m320 0c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z" fill="#fff"></path></svg></a>
|
<a ks-text="Bilibili" ks-tag="top" href="https://space.bilibili.com/11363292" target="_blank"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color: #f25d8e"><path d="M777.514667 131.669333a53.333333 53.333333 0 0 1 0 75.434667L728.746667 255.829333h49.92A160 160 0 0 1 938.666667 415.872v320a160 160 0 0 1-160 160H245.333333A160 160 0 0 1 85.333333 735.872v-320a160 160 0 0 1 160-160h49.749334L246.4 207.146667a53.333333 53.333333 0 1 1 75.392-75.434667l113.152 113.152c3.370667 3.370667 6.186667 7.04 8.448 10.965333h137.088c2.261333-3.925333 5.12-7.68 8.490667-11.008l113.109333-113.152a53.333333 53.333333 0 0 1 75.434667 0z m1.152 231.253334H245.333333a53.333333 53.333333 0 0 0-53.205333 49.365333l-0.128 4.010667v320c0 28.117333 21.76 51.157333 49.365333 53.162666l3.968 0.170667h533.333334a53.333333 53.333333 0 0 0 53.205333-49.365333l0.128-3.968v-320c0-29.44-23.893333-53.333333-53.333333-53.333334z m-426.666667 106.666666c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z m320 0c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z" fill="#fff"></path></svg></a>
|
||||||
<a ks-text="QQ企鹅🐧" ks-tag="top" href="" target="_blank"><i class="fa fa-qq" style="background-color: #12b7f5;"></i></a>
|
<a ks-text="QQ联系" ks-tag="top" href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=983341575" target="_blank"><i class="fa fa-qq" style="background-color: #12b7f5;"></i></a>
|
||||||
<a ks-text="RSS订阅" ks-tag="top" href="" target="_blank"><i class="fa fa-rss" style="background-color: #ff9800"></i></a>
|
<a ks-text="RSS订阅" ks-tag="top" href="" target="_blank"><i class="fa fa-rss" style="background-color: #ff9800"></i></a>
|
||||||
</div>
|
</div>
|
||||||
<a class="collection-btn" @click="showTip()">
|
<a class="collection-btn" @click="$router.push({path: '/izone'});">
|
||||||
<i class="el-icon-star-off" style="margin-right: 2px"></i>朋友圈
|
<i class="el-icon-star-off" style="margin-right: 2px"></i>个人空间
|
||||||
</a>
|
</a>
|
||||||
|
<a class="collection-btn" @click="$router.push({path: '/album',query:{type:'dynamic'}});">
|
||||||
</div>
|
<i class="el-icon-star-off" style="margin-right: 2px"></i>动态相册
|
||||||
<!-- 分类 -->
|
</a>
|
||||||
<div class="shadow-box background-opacity wow"
|
|
||||||
style="padding: 25px 25px 5px;border-radius: 10px;animation: zoomIn 0.8s ease-in-out">
|
</div>
|
||||||
<div class="card-content2-title">
|
<!-- 分类 -->
|
||||||
<i class="el-icon-folder-opened card-content2-icon"></i>
|
<div class="shadow-box background-opacity wow"
|
||||||
<span>分类</span>
|
style="padding: 25px 25px 5px;border-radius: 10px;animation: zoomIn 0.8s ease-in-out">
|
||||||
</div>
|
<div class="card-content2-title">
|
||||||
<div v-for="(sort, index) in sortInfo"
|
<i class="el-icon-folder-opened card-content2-icon"></i>
|
||||||
:key="index"
|
<span>分类</span>
|
||||||
class="post-sort"
|
</div>
|
||||||
@click="$router.push({path: '/sort', query: {sortId: sort.id}})">
|
<div v-for="(sort, index) in sortInfo"
|
||||||
<div>
|
:key="index"
|
||||||
<span v-for="(s, i) in sort.sortName.split('')" :key="i">{{ s }}</span>
|
class="post-sort"
|
||||||
</div>
|
@click="$router.push({path: '/sort', query: {sortId: sort.id}})">
|
||||||
</div>
|
<div>
|
||||||
</div>
|
<span v-for="(s, i) in sort.sortName.split('')" :key="i">{{ s }}</span>
|
||||||
<!-- 推荐文章 -->
|
</div>
|
||||||
<div v-if="!$common.isEmpty(recommendArticles)"
|
</div>
|
||||||
style="padding: 25px;border-radius: 10px;margin-top: 40px;animation: zoomIn 0.8s ease-in-out"
|
</div>
|
||||||
class="shadow-box background-opacity wow">
|
<!-- 推荐文章 -->
|
||||||
<div class="card-content2-title">
|
<div v-if="!$common.isEmpty(recommendArticles)"
|
||||||
<i class="el-icon-reading card-content2-icon"></i>
|
style="padding: 25px;border-radius: 10px;margin-top: 40px;animation: zoomIn 0.8s ease-in-out"
|
||||||
<span>推荐文章</span>
|
class="shadow-box background-opacity wow">
|
||||||
</div>
|
<div class="card-content2-title">
|
||||||
<div v-for="(article, index) in recommendArticles"
|
<i class="el-icon-reading card-content2-icon"></i>
|
||||||
:key="index"
|
<span>推荐文章</span>
|
||||||
@click="$router.push({path: '/article', query: {id: article.id}})">
|
</div>
|
||||||
<div class="aside-post-detail">
|
<div v-for="(article, index) in recommendArticles"
|
||||||
<div class="aside-post-image">
|
:key="index"
|
||||||
<el-image class="my-el-image" :src="article.articleCover" fit="cover">
|
@click="$router.push({path: '/article', query: {id: article.id}})">
|
||||||
<div slot="error" class="image-slot">
|
<div class="aside-post-detail">
|
||||||
<div class="error-aside-image">
|
<div class="aside-post-image">
|
||||||
{{article.username}}
|
<el-image class="my-el-image" :src="article.articleCover" fit="cover">
|
||||||
</div>
|
<div slot="error" class="image-slot">
|
||||||
</div>
|
<div class="error-aside-image">
|
||||||
</el-image>
|
{{article.username}}
|
||||||
</div>
|
</div>
|
||||||
<div class="aside-post-title">
|
</div>
|
||||||
{{ article.articleTitle }}
|
</el-image>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="aside-post-title">
|
||||||
<div class="aside-post-date">
|
{{ article.articleTitle }}
|
||||||
<i class="el-icon-date" style="color: var(--greyFont)"></i>{{ article.createTime }}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="aside-post-date">
|
||||||
</div>
|
<i class="el-icon-date" style="color: var(--greyFont)"></i>{{ article.createTime }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
|
</div>
|
||||||
<script>
|
</div>
|
||||||
import {navigation} from '../utils/tools.js'
|
</template>
|
||||||
export default {
|
|
||||||
data() {
|
<script>
|
||||||
return {
|
import {navigation} from '../utils/tools.js'
|
||||||
pagination: {
|
export default {
|
||||||
current: 1,
|
data() {
|
||||||
size: 5,
|
return {
|
||||||
recommendStatus: true
|
pagination: {
|
||||||
},
|
current: 1,
|
||||||
searchKey:"",
|
size: 5,
|
||||||
recommendArticles: []
|
recommendStatus: true
|
||||||
}
|
},
|
||||||
},
|
searchKey:"",
|
||||||
computed: {
|
recommendArticles: []
|
||||||
webInfo() {
|
}
|
||||||
return this.$store.state.webInfo;
|
},
|
||||||
},
|
computed: {
|
||||||
sortInfo() {
|
webInfo() {
|
||||||
return this.$store.state.sortInfo;
|
return this.$store.state.webInfo;
|
||||||
}
|
},
|
||||||
},
|
sortInfo() {
|
||||||
created() {
|
return this.$store.state.sortInfo;
|
||||||
this.getRecommendArticles();
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
created() {
|
||||||
getRecommendArticles() {
|
this.getRecommendArticles();
|
||||||
this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
},
|
||||||
.then((res) => {
|
methods: {
|
||||||
if (!this.$common.isEmpty(res.data)) {
|
getRecommendArticles() {
|
||||||
this.recommendArticles = res.data.records;
|
this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
||||||
}
|
.then((res) => {
|
||||||
})
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
.catch((error) => {
|
this.recommendArticles = res.data.records;
|
||||||
this.$message({
|
}
|
||||||
message: error.message,
|
})
|
||||||
type: "error"
|
.catch((error) => {
|
||||||
});
|
this.$message({
|
||||||
});
|
message: error.message,
|
||||||
},
|
type: "error"
|
||||||
showTip() {
|
});
|
||||||
this.$router.push({path: '/weiYan'});
|
});
|
||||||
},
|
},
|
||||||
goSearch(){
|
showTip() {
|
||||||
this.$router.push({query: {searchKey:this.searchKey}})
|
this.$router.push({path: '/weiYan'});
|
||||||
this.$nextTick(()=>{
|
},
|
||||||
this.navigation('.page-container-wrap');
|
goSearch(){
|
||||||
})
|
this.$router.push({query: {searchKey:this.searchKey}})
|
||||||
},
|
this.$nextTick(()=>{
|
||||||
navigation(selector) {
|
this.navigation('.page-container-wrap');
|
||||||
let pageId = document.querySelector(selector);
|
})
|
||||||
window.scrollTo({
|
},
|
||||||
top: pageId.offsetTop,
|
navigation(selector) {
|
||||||
behavior: "smooth"
|
let pageId = document.querySelector(selector);
|
||||||
});
|
window.scrollTo({
|
||||||
},
|
top: pageId.offsetTop,
|
||||||
}
|
behavior: "smooth"
|
||||||
}
|
});
|
||||||
</script>
|
},
|
||||||
|
}
|
||||||
<style scoped>
|
}
|
||||||
.card-content0{
|
</script>
|
||||||
}
|
|
||||||
.card-content0 {
|
<style scoped>
|
||||||
transition: .3s;
|
.card-content0{
|
||||||
background-color: var(--background);
|
}
|
||||||
}
|
.card-content0 {
|
||||||
.card-content0 input {
|
transition: .3s;
|
||||||
transition: .3s;
|
background-color: var(--background);
|
||||||
width: 100%;
|
}
|
||||||
height: 42px;
|
.card-content0 input {
|
||||||
padding-left: 10px;
|
transition: .3s;
|
||||||
background-color: var(--background);
|
width: 100%;
|
||||||
border: 2px solid #7BA7AB;
|
height: 42px;
|
||||||
border-radius: 5px;
|
padding-left: 10px;
|
||||||
outline: none;
|
background-color: var(--background);
|
||||||
color: var(--fontColor);
|
border: 2px solid #7BA7AB;
|
||||||
}
|
border-radius: 5px;
|
||||||
.card-content0 button {
|
outline: none;
|
||||||
position: absolute;
|
color: var(--fontColor);
|
||||||
top: 0;
|
}
|
||||||
right: 0px;
|
.card-content0 button {
|
||||||
width: 42px;
|
position: absolute;
|
||||||
height: 42px;
|
top: 0;
|
||||||
border: none;
|
right: 0px;
|
||||||
background: #7BA7AB;
|
width: 42px;
|
||||||
border-radius: 0 5px 5px 0;
|
height: 42px;
|
||||||
cursor: pointer;
|
border: none;
|
||||||
}
|
background: #7BA7AB;
|
||||||
.card-content0 button:before {
|
border-radius: 0 5px 5px 0;
|
||||||
transition: .3s;
|
cursor: pointer;
|
||||||
content: "\f002";
|
}
|
||||||
font-family: FontAwesome;
|
.card-content0 button:before {
|
||||||
font-size: 16px;
|
transition: .3s;
|
||||||
color: var(--fontColor);
|
content: "\f002";
|
||||||
}
|
font-family: FontAwesome;
|
||||||
.card-content1 {
|
font-size: 16px;
|
||||||
background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
|
color: var(--fontColor);
|
||||||
background-size: 400% 400%;
|
}
|
||||||
animation: gradientBG 10s ease infinite;
|
.card-content1 {
|
||||||
display: flex;
|
background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
|
||||||
flex-direction: column;
|
background-size: 400% 400%;
|
||||||
align-items: center;
|
animation: gradientBG 10s ease infinite;
|
||||||
margin: 10px 0;
|
display: flex;
|
||||||
border-radius: 10px;
|
flex-direction: column;
|
||||||
position: relative;
|
align-items: center;
|
||||||
/*color: var(--white);*/
|
margin: 10px 0;
|
||||||
overflow: hidden;
|
border-radius: 10px;
|
||||||
}
|
position: relative;
|
||||||
|
/*color: var(--white);*/
|
||||||
.card-content1 :not(:first-child) {
|
overflow: hidden;
|
||||||
z-index: 10;
|
}
|
||||||
}
|
|
||||||
|
.card-content1 :not(:first-child) {
|
||||||
.web-name {
|
z-index: 10;
|
||||||
font-size: 30px;
|
}
|
||||||
font-weight: bold;
|
|
||||||
margin: 20px 0;
|
.web-name {
|
||||||
}
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
.web-info {
|
margin: 20px 0;
|
||||||
width: 80%;
|
}
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
.web-info {
|
||||||
justify-content: space-around;
|
width: 80%;
|
||||||
}
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
.blog-info-box {
|
justify-content: space-around;
|
||||||
display: flex;
|
}
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
.blog-info-box {
|
||||||
justify-content: space-around;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
.blog-info-num {
|
justify-content: space-around;
|
||||||
margin-top: 12px;
|
}
|
||||||
}
|
|
||||||
.more-cannal {
|
.blog-info-num {
|
||||||
justify-content: space-around;
|
margin-top: 12px;
|
||||||
display: flex;
|
}
|
||||||
width: 80%;
|
.more-cannal {
|
||||||
margin-top:12px ;
|
justify-content: space-around;
|
||||||
}
|
display: flex;
|
||||||
.more-cannal svg, .more-cannal i{
|
width: 80%;
|
||||||
text-align: center;
|
margin-top:12px ;
|
||||||
color: #FFF;
|
}
|
||||||
width: 2em;
|
.more-cannal svg, .more-cannal i{
|
||||||
padding: .5em;
|
text-align: center;
|
||||||
border-radius: 1em;
|
color: #FFF;
|
||||||
}
|
width: 2em;
|
||||||
.collection-btn {
|
padding: .5em;
|
||||||
position: relative;
|
border-radius: 1em;
|
||||||
margin-top: 12px;
|
}
|
||||||
background: var(--lightGreen);
|
.collection-btn {
|
||||||
cursor: pointer;
|
position: relative;
|
||||||
width: 65%;
|
margin-top: 12px;
|
||||||
height: 35px;
|
background: var(--lightGreen);
|
||||||
border-radius: 1rem;
|
cursor: pointer;
|
||||||
text-align: center;
|
width: 65%;
|
||||||
line-height: 35px;
|
height: 35px;
|
||||||
color: var(--white);
|
border-radius: 1rem;
|
||||||
overflow: hidden;
|
text-align: center;
|
||||||
z-index: 1;
|
line-height: 35px;
|
||||||
margin-bottom: 25px;
|
color: var(--white);
|
||||||
}
|
overflow: hidden;
|
||||||
|
z-index: 1;
|
||||||
.collection-btn::before {
|
}
|
||||||
background: var(--gradualRed);
|
.collection-btn:last-child{
|
||||||
position: absolute;
|
margin-bottom: 25px;
|
||||||
top: 0;
|
}
|
||||||
right: 0;
|
.collection-btn::before {
|
||||||
bottom: 0;
|
background: var(--gradualRed);
|
||||||
left: 0;
|
position: absolute;
|
||||||
content: "";
|
top: 0;
|
||||||
transform: scaleX(0);
|
right: 0;
|
||||||
transform-origin: 0;
|
bottom: 0;
|
||||||
transition: transform 0.5s ease-out;
|
left: 0;
|
||||||
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
|
content: "";
|
||||||
border-radius: 1rem;
|
transform: scaleX(0);
|
||||||
z-index: -1;
|
transform-origin: 0;
|
||||||
}
|
transition: transform 0.5s ease-out;
|
||||||
|
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
|
||||||
.collection-btn:hover::before {
|
border-radius: 1rem;
|
||||||
transform: scaleX(1);
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-content2-title {
|
.collection-btn:hover::before {
|
||||||
font-size: 18px;
|
transform: scaleX(1);
|
||||||
margin-bottom: 20px;
|
}
|
||||||
}
|
|
||||||
|
.card-content2-title {
|
||||||
.card-content2-icon {
|
font-size: 18px;
|
||||||
color: var(--red);
|
margin-bottom: 20px;
|
||||||
margin-right: 5px;
|
}
|
||||||
animation: scale 1s ease-in-out infinite;
|
|
||||||
}
|
.card-content2-icon {
|
||||||
|
color: var(--red);
|
||||||
.aside-post-detail {
|
margin-right: 5px;
|
||||||
display: flex;
|
animation: scale 1s ease-in-out infinite;
|
||||||
cursor: pointer;
|
}
|
||||||
}
|
|
||||||
|
.aside-post-detail {
|
||||||
.aside-post-image {
|
display: flex;
|
||||||
width: 40%;
|
cursor: pointer;
|
||||||
border-radius: 0.2rem;
|
}
|
||||||
margin-right: 8px;
|
|
||||||
overflow: hidden;
|
.aside-post-image {
|
||||||
}
|
width: 40%;
|
||||||
|
border-radius: 0.2rem;
|
||||||
.error-aside-image {
|
margin-right: 8px;
|
||||||
background: var(--themeBackground);
|
overflow: hidden;
|
||||||
color: var(--white);
|
}
|
||||||
padding: 10px;
|
|
||||||
text-align: center;
|
.error-aside-image {
|
||||||
width: 100%;
|
background: var(--themeBackground);
|
||||||
height: 100%;
|
color: var(--white);
|
||||||
}
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
.aside-post-title {
|
width: 100%;
|
||||||
width: 60%;
|
height: 100%;
|
||||||
white-space: nowrap;
|
}
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
.aside-post-title {
|
||||||
}
|
width: 60%;
|
||||||
|
white-space: nowrap;
|
||||||
.aside-post-date {
|
text-overflow: ellipsis;
|
||||||
margin-top: 8px;
|
overflow: hidden;
|
||||||
margin-bottom: 20px;
|
}
|
||||||
color: var(--greyFont);
|
|
||||||
font-size: 12px;
|
.aside-post-date {
|
||||||
}
|
margin-top: 8px;
|
||||||
|
margin-bottom: 20px;
|
||||||
.post-sort {
|
color: var(--greyFont);
|
||||||
border-radius: 1rem;
|
font-size: 12px;
|
||||||
margin-bottom: 15px;
|
}
|
||||||
line-height: 30px;
|
|
||||||
transition: all 0.3s;
|
.post-sort {
|
||||||
}
|
border-radius: 1rem;
|
||||||
|
margin-bottom: 15px;
|
||||||
.post-sort:hover {
|
line-height: 30px;
|
||||||
background: var(--themeBackground);
|
transition: all 0.3s;
|
||||||
padding: 2px 15px;
|
}
|
||||||
cursor: pointer;
|
|
||||||
color: var(--white);
|
.post-sort:hover {
|
||||||
}
|
background: var(--themeBackground);
|
||||||
</style>
|
padding: 2px 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,64 +1,69 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import store from './store'
|
import store from './store'
|
||||||
import ElementUI from 'element-ui'
|
import ElementUI from 'element-ui'
|
||||||
import http from './utils/request'
|
import http from './utils/request'
|
||||||
import common from './utils/common'
|
import common from './utils/common'
|
||||||
import constant from './utils/constant'
|
import constant from './utils/constant'
|
||||||
import mavonEditor from 'mavon-editor'
|
import mavonEditor from 'mavon-editor'
|
||||||
//引入json配置
|
//引入json配置
|
||||||
import EMOJI from './assets/json/emoji.json'
|
import EMOJI from './assets/json/emoji.json'
|
||||||
//引入js
|
//引入js
|
||||||
//import './utils/live2d'
|
// import './utils/live2d'
|
||||||
import './utils/title'
|
import './utils/title'
|
||||||
//引入css
|
//引入css
|
||||||
import './assets/css/animation.css'
|
import './assets/css/animation.css'
|
||||||
import './assets/css/index.css'
|
import './assets/css/index.css'
|
||||||
import './assets/css/tocbot.css'
|
import './assets/css/tocbot.css'
|
||||||
import './assets/css/color.css'
|
import './assets/css/color.css'
|
||||||
import './assets/css/markdown-highlight.css'
|
import './assets/css/markdown-highlight.css'
|
||||||
import './assets/css/font-awesome.min.css'
|
import './assets/css/font-awesome.min.css'
|
||||||
import 'mavon-editor/dist/css/index.css'
|
import 'mavon-editor/dist/css/index.css'
|
||||||
//点击涟漪效果
|
//点击涟漪效果
|
||||||
import Ripple from 'vue-ripple-directive'
|
import Ripple from 'vue-ripple-directive'
|
||||||
import {vueBaberrage} from 'vue-baberrage'
|
import {vueBaberrage} from 'vue-baberrage'
|
||||||
|
import VueLazyload from 'vue-lazyload'
|
||||||
Ripple.color = 'var(--rippleColor)'
|
Vue.use(VueLazyload, {
|
||||||
Vue.directive("ripple", Ripple)
|
lazyComponent: true,
|
||||||
|
loading: 'https://mybox-1257251314.cos.ap-chengdu.myqcloud.com/load.gif'
|
||||||
Vue.use(ElementUI)
|
})
|
||||||
Vue.use(vueBaberrage)
|
Ripple.color = 'var(--rippleColor)'
|
||||||
Vue.use(mavonEditor)
|
Vue.directive("ripple", Ripple)
|
||||||
Vue.use(store)
|
Vue.use(ElementUI)
|
||||||
Vue.prototype.EMOJI = EMOJI
|
Vue.use(vueBaberrage)
|
||||||
|
Vue.use(mavonEditor)
|
||||||
Vue.prototype.$http = http
|
Vue.use(store)
|
||||||
Vue.prototype.$common = common
|
Vue.prototype.EMOJI = EMOJI
|
||||||
Vue.prototype.$constant = constant
|
|
||||||
Vue.config.productionTip = false
|
Vue.prototype.$http = http
|
||||||
top.faceReg = common.faceReg;
|
Vue.prototype.$common = common
|
||||||
|
Vue.prototype.$constant = constant
|
||||||
// import 'viewerjs/dist/viewer.css'
|
Vue.config.productionTip = false
|
||||||
// import VueViewer from 'v-viewer'
|
top.faceReg = common.faceReg;
|
||||||
// Vue.use(VueViewer)
|
|
||||||
|
// import 'viewerjs/dist/viewer.css'
|
||||||
const app = new Vue({
|
// import VueViewer from 'v-viewer'
|
||||||
router,
|
// Vue.use(VueViewer)
|
||||||
store,
|
|
||||||
render: h => h(App)
|
const app = new Vue({
|
||||||
}).$mount('#app')
|
router,
|
||||||
|
store,
|
||||||
Vue.prototype.ipData = {}
|
render: h => h(App)
|
||||||
fetch("//ip-api.com/json/?lang=zh-CN").then((e=>e.json())).then((e=>{
|
}).$mount('#app')
|
||||||
let a = JSON.stringify(e);
|
|
||||||
localStorage.setItem("ipData", a);
|
// Vue.prototype.ipData = {}
|
||||||
Vue.prototype.ipData = e;
|
// fetch("/getIp",{
|
||||||
Vue.prototype.$message({
|
// mode: 'cors',
|
||||||
type: 'success',
|
// }).then((e=>e.json())).then((e=>{
|
||||||
message: `欢迎IP:${e.query},来自${e.country}${e.regionName}${e.city}的朋友！`
|
// let a = JSON.stringify(e);
|
||||||
});
|
// localStorage.setItem("ipData", a);
|
||||||
}))
|
// Vue.prototype.ipData = e;
|
||||||
|
// Vue.prototype.$message({
|
||||||
console.log('%c hello world! \n Print by Roginshin. ',
|
// type: 'success',
|
||||||
|
// message: `欢迎IP:${e.query??'0.0.0.0'},来自${e.country??'中国'}${e.regionName??''}${e.city??''}的朋友！`
|
||||||
|
// });检机构都是差不多都是有这个
|
||||||
|
// }))
|
||||||
|
|
||||||
|
console.log('%c hello world! \n Print by Roginshin. ',
|
||||||
'background: #ed556a;line-height:50px;font-size:24px; color: #f6cec1');
|
'background: #ed556a;line-height:50px;font-size:24px; color: #f6cec1');
|
||||||
@ -1,142 +1,150 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import VueRouter from 'vue-router'
|
import VueRouter from 'vue-router'
|
||||||
|
|
||||||
const originalPush = VueRouter.prototype.push;
|
const originalPush = VueRouter.prototype.push;
|
||||||
VueRouter.prototype.push = function push(location) {
|
VueRouter.prototype.push = function push(location) {
|
||||||
return originalPush.call(this, location).catch(err => err);
|
return originalPush.call(this, location).catch(err => err);
|
||||||
}
|
}
|
||||||
|
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
component: () => import('../components/home'),
|
component: () => import('../components/home'),
|
||||||
children: [{
|
children: [{
|
||||||
path: "/",
|
path: "/",
|
||||||
name: "index",
|
name: "index",
|
||||||
component: () => import('../components/index')
|
component: () => import('../components/index')
|
||||||
}, {
|
}, {
|
||||||
path: "/sort",
|
path: "/sort",
|
||||||
name: "sort",
|
name: "sort",
|
||||||
component: () => import('../components/sort')
|
component: () => import('../components/sort')
|
||||||
}, {
|
}, {
|
||||||
path: "/article",
|
path: "/article",
|
||||||
name: "article",
|
name: "article",
|
||||||
component: () => import('../components/article')
|
component: () => import('../components/article')
|
||||||
}, {
|
}, {
|
||||||
path: "/weiYan",
|
path: "/weiYan",
|
||||||
name: "weiYan",
|
name: "weiYan",
|
||||||
component: () => import('../components/weiYan')
|
component: () => import('../components/weiYan')
|
||||||
}, {
|
}, {
|
||||||
path: "/message",
|
path: "/message",
|
||||||
name: "message",
|
name: "message",
|
||||||
component: () => import('../components/message')
|
component: () => import('../components/message')
|
||||||
}, {
|
}, {
|
||||||
path: "/friend",
|
path: "/friend",
|
||||||
name: "friend",
|
name: "friend",
|
||||||
component: () => import('../components/friend')
|
component: () => import('../components/friend')
|
||||||
},{
|
},{
|
||||||
path: "/bangumi",
|
path: "/bangumi",
|
||||||
name: "bangumi",
|
name: "bangumi",
|
||||||
component: () => import('../components/bangumi')
|
component: () => import('../components/bangumi')
|
||||||
},{
|
},{
|
||||||
path: "/izone",
|
path: "/izone",
|
||||||
name: "izone",
|
name: "izone",
|
||||||
component: () => import('../components/izone')
|
component: () => import('../components/izone')
|
||||||
}, {
|
},{
|
||||||
path: "/about",
|
path: "/album",
|
||||||
name: "about",
|
name: "album",
|
||||||
component: () => import('../components/about')
|
component: () => import('../components/album')
|
||||||
}, {
|
}, {
|
||||||
path: "/user",
|
path: "/about",
|
||||||
name: "user",
|
name: "about",
|
||||||
component: () => import('../components/user')
|
component: () => import('../components/about')
|
||||||
}, {
|
}, {
|
||||||
path: "/letter",
|
path: "/user",
|
||||||
name: "letter",
|
name: "user",
|
||||||
component: () => import('../components/letter')
|
component: () => import('../components/user')
|
||||||
}]
|
}, {
|
||||||
},
|
path: "/letter",
|
||||||
{
|
name: "letter",
|
||||||
path: '/admin',
|
component: () => import('../components/letter')
|
||||||
redirect: '/main',
|
}]
|
||||||
meta: {requiresAuth: true},
|
},
|
||||||
component: () => import('../components/admin/admin'),
|
{
|
||||||
children: [{
|
path: '/admin',
|
||||||
path: '/main',
|
redirect: '/main',
|
||||||
name: 'main',
|
meta: {requiresAuth: true},
|
||||||
component: () => import('../components/admin/main')
|
component: () => import('../components/admin/admin'),
|
||||||
}, {
|
children: [{
|
||||||
path: '/webEdit',
|
path: '/main',
|
||||||
name: 'webEdit',
|
name: 'main',
|
||||||
component: () => import('../components/admin/webEdit')
|
component: () => import('../components/admin/main')
|
||||||
}, {
|
}, {
|
||||||
path: '/userList',
|
path: '/webEdit',
|
||||||
name: 'userList',
|
name: 'webEdit',
|
||||||
component: () => import('../components/admin/userList')
|
component: () => import('../components/admin/webEdit')
|
||||||
}, {
|
}, {
|
||||||
path: '/postList',
|
path: '/userList',
|
||||||
name: 'postList',
|
name: 'userList',
|
||||||
component: () => import('../components/admin/postList')
|
component: () => import('../components/admin/userList')
|
||||||
}, {
|
}, {
|
||||||
path: '/postShuoshuo',
|
path: '/postList',
|
||||||
name: 'postShuoshuo',
|
name: 'postList',
|
||||||
component: () => import('../components/admin/postShuoshuo')
|
component: () => import('../components/admin/postList')
|
||||||
}, {
|
}, {
|
||||||
path: '/postEdit',
|
path: '/postShuoshuo',
|
||||||
name: 'postEdit',
|
name: 'postShuoshuo',
|
||||||
component: () => import('../components/admin/postEdit')
|
component: () => import('../components/admin/postShuoshuo')
|
||||||
}, {
|
}, {
|
||||||
path: '/sortList',
|
path: '/postEdit',
|
||||||
name: 'sortList',
|
name: 'postEdit',
|
||||||
component: () => import('../components/admin/sortList')
|
component: () => import('../components/admin/postEdit')
|
||||||
}, {
|
}, {
|
||||||
path: '/commentList',
|
path: '/sortList',
|
||||||
name: 'commentList',
|
name: 'sortList',
|
||||||
component: () => import('../components/admin/commentList')
|
component: () => import('../components/admin/sortList')
|
||||||
}, {
|
}, {
|
||||||
path: '/treeHoleList',
|
path: '/commentList',
|
||||||
name: 'treeHoleList',
|
name: 'commentList',
|
||||||
component: () => import('../components/admin/treeHoleList')
|
component: () => import('../components/admin/commentList')
|
||||||
}, {
|
}, {
|
||||||
path: '/resourceList',
|
path: '/treeHoleList',
|
||||||
name: 'resourceList',
|
name: 'treeHoleList',
|
||||||
component: () => import('../components/admin/resourceList')
|
component: () => import('../components/admin/treeHoleList')
|
||||||
}, {
|
}, {
|
||||||
path: '/resourcePathList',
|
path: '/resourceList',
|
||||||
name: 'resourcePathList',
|
name: 'resourceList',
|
||||||
component: () => import('../components/admin/resourcePathList')
|
component: () => import('../components/admin/resourceList')
|
||||||
}]
|
}, {
|
||||||
},
|
path: '/resourcePathList',
|
||||||
{
|
name: 'resourcePathList',
|
||||||
path: '/verify',
|
component: () => import('../components/admin/resourcePathList')
|
||||||
name: 'verify',
|
}]
|
||||||
component: () => import('../components/admin/verify')
|
},
|
||||||
}
|
{
|
||||||
]
|
path: '/verify',
|
||||||
|
name: 'verify',
|
||||||
const router = new VueRouter({
|
component: () => import('../components/admin/verify')
|
||||||
mode: "history",
|
},{
|
||||||
routes: routes,
|
path: "/loveheart",
|
||||||
scrollBehavior(to, from, savedPosition) {
|
name: "loveheart",
|
||||||
return {x: 0, y: 0}
|
component: () => import('../components/loveheart')
|
||||||
}
|
},
|
||||||
})
|
]
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
const router = new VueRouter({
|
||||||
if (to.matched.some(record => record.meta.requiresAuth)) {
|
mode: "history",
|
||||||
if (!Boolean(localStorage.getItem("adminToken"))) {
|
routes: routes,
|
||||||
next({
|
scrollBehavior(to, from, savedPosition) {
|
||||||
path: '/verify',
|
return {x: 0, y: 0}
|
||||||
query: {redirect: to.fullPath}
|
}
|
||||||
});
|
})
|
||||||
} else {
|
|
||||||
next();
|
router.beforeEach((to, from, next) => {
|
||||||
}
|
if (to.matched.some(record => record.meta.requiresAuth)) {
|
||||||
} else {
|
if (!Boolean(localStorage.getItem("adminToken"))) {
|
||||||
next();
|
next({
|
||||||
}
|
path: '/verify',
|
||||||
})
|
query: {redirect: to.fullPath}
|
||||||
|
});
|
||||||
export default router
|
} else {
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|||||||
@ -1,85 +1,88 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import Vuex from 'vuex'
|
import Vuex from 'vuex'
|
||||||
import createPersistedState from "vuex-persistedstate";
|
import createPersistedState from "vuex-persistedstate";
|
||||||
|
import constant from '../utils/constant'
|
||||||
Vue.use(Vuex)
|
Vue.use(Vuex)
|
||||||
|
|
||||||
export default new Vuex.Store({
|
export default new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
toolbar: {
|
toolbar: {
|
||||||
visible: false,
|
visible: false,
|
||||||
enter: true
|
enter: true
|
||||||
},
|
},
|
||||||
sortInfo: [],
|
sortInfo: [],
|
||||||
currentUser: {},
|
currentUser: {},
|
||||||
currentAdmin: {},
|
currentAdmin: {},
|
||||||
webInfo: {
|
webInfo: {
|
||||||
webName: "",
|
webName: "",
|
||||||
webTitle: [],
|
webTitle: [],
|
||||||
notices: [],
|
notices: [],
|
||||||
footer: "",
|
footer: "",
|
||||||
backgroundImage: "",
|
backgroundImage: "",
|
||||||
avatar: ""
|
avatar: ""
|
||||||
},
|
},
|
||||||
playlist:3226523716
|
playlist:3217120394
|
||||||
},
|
},
|
||||||
getters: {
|
getters: {
|
||||||
articleTotal: state => {
|
articleTotal: state => {
|
||||||
if (state.sortInfo !== null && state.sortInfo.length !== 0) {
|
if (state.sortInfo !== null && state.sortInfo.length !== 0) {
|
||||||
if (state.sortInfo.length === 1) {
|
if (state.sortInfo.length === 1) {
|
||||||
return state.sortInfo[0].countOfSort;
|
return state.sortInfo[0].countOfSort;
|
||||||
} else {
|
} else {
|
||||||
return state.sortInfo.reduce((prev, curr) => {
|
return state.sortInfo.reduce((prev, curr) => {
|
||||||
if (typeof prev === "number") {
|
if (typeof prev === "number") {
|
||||||
return prev + curr.countOfSort;
|
return prev + curr.countOfSort;
|
||||||
} else {
|
} else {
|
||||||
return prev.countOfSort + curr.countOfSort;
|
return prev.countOfSort + curr.countOfSort;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
navigationBar: state => {
|
navigationBar: state => {
|
||||||
if (state.sortInfo !== null && state.sortInfo.length !== 0) {
|
if (state.sortInfo !== null && state.sortInfo.length !== 0) {
|
||||||
return state.sortInfo.filter(f => {
|
return state.sortInfo.filter(f => {
|
||||||
return f.sortType === 0;
|
return f.sortType === 0;
|
||||||
}).sort((s1, s2) => {
|
}).sort((s1, s2) => {
|
||||||
return s1.priority - s2.priority;
|
return s1.priority - s2.priority;
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
changePlaylist(state, playlist){
|
pushPlaylist(state, playlist){
|
||||||
state.playlist = playlist
|
state.pushPlaylist = playlist
|
||||||
},
|
},
|
||||||
changeToolbarStatus(state, toolbarState) {
|
changePlaylist(state, playlist){
|
||||||
state.toolbar = toolbarState;
|
state.playlist = playlist
|
||||||
},
|
},
|
||||||
loadSortInfo(state, sortInfo) {
|
changeToolbarStatus(state, toolbarState) {
|
||||||
state.sortInfo = sortInfo;
|
state.toolbar = toolbarState;
|
||||||
},
|
},
|
||||||
loadCurrentUser(state, user) {
|
loadSortInfo(state, sortInfo) {
|
||||||
state.currentUser = user;
|
state.sortInfo = sortInfo;
|
||||||
},
|
},
|
||||||
loadCurrentAdmin(state, user) {
|
loadCurrentUser(state, user) {
|
||||||
state.currentAdmin = user;
|
state.currentUser = user;
|
||||||
},
|
},
|
||||||
loadWebInfo(state, webInfo) {
|
loadCurrentAdmin(state, user) {
|
||||||
webInfo.webTitle = webInfo.webTitle.split('');
|
state.currentAdmin = user;
|
||||||
webInfo.notices = JSON.parse(webInfo.notices);
|
},
|
||||||
state.webInfo = webInfo;
|
loadWebInfo(state, webInfo) {
|
||||||
}
|
webInfo.webTitle = webInfo.webTitle.split('');
|
||||||
},
|
webInfo.notices = JSON.parse(webInfo.notices);
|
||||||
actions: {},
|
state.webInfo = webInfo;
|
||||||
modules: {},
|
}
|
||||||
plugins: [
|
},
|
||||||
createPersistedState({
|
actions: {},
|
||||||
storage: window.localStorage
|
modules: {},
|
||||||
})
|
plugins: [
|
||||||
]
|
createPersistedState({
|
||||||
})
|
storage: window.localStorage
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|||||||
@ -1,164 +1,189 @@
|
|||||||
import constant from "./constant";
|
import constant from "./constant";
|
||||||
import EMOJI from "../assets/json/emoji.json"
|
import EMOJI from "../assets/json/emoji.json"
|
||||||
import CryptoJS from 'crypto-js';
|
import CryptoJS from 'crypto-js';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mobile() {
|
mobile() {
|
||||||
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
|
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
|
||||||
return flag && flag.length && flag.length > 0;
|
return flag && flag.length && flag.length > 0;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 判断是否为空
|
* 判断是否为空
|
||||||
*/
|
*/
|
||||||
isEmpty(value) {
|
isEmpty(value) {
|
||||||
if (typeof value === "undefined" || value === null || (typeof value === "string" && value.trim() === "") || (Array.prototype.isPrototypeOf(value) && value.length === 0) || (Object.prototype.isPrototypeOf(value) && Object.keys(value).length === 0)) {
|
if (typeof value === "undefined" || value === null || (typeof value === "string" && value.trim() === "") || (Array.prototype.isPrototypeOf(value) && value.length === 0) || (Object.prototype.isPrototypeOf(value) && Object.keys(value).length === 0)) {
|
||||||
return true;
|
return true;
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 加密
|
* 加密
|
||||||
*/
|
*/
|
||||||
encrypt(plaintText) {
|
encrypt(plaintText) {
|
||||||
let options = {
|
let options = {
|
||||||
mode: CryptoJS.mode.ECB,
|
mode: CryptoJS.mode.ECB,
|
||||||
padding: CryptoJS.pad.Pkcs7
|
padding: CryptoJS.pad.Pkcs7
|
||||||
};
|
};
|
||||||
let key = CryptoJS.enc.Utf8.parse(constant.cryptojs_key);
|
let key = CryptoJS.enc.Utf8.parse(constant.cryptojs_key);
|
||||||
let encryptedData = CryptoJS.AES.encrypt(plaintText, key, options);
|
let encryptedData = CryptoJS.AES.encrypt(plaintText, key, options);
|
||||||
return encryptedData.toString().replace(/\//g, "_").replace(/\+/g, "-");
|
return encryptedData.toString().replace(/\//g, "_").replace(/\+/g, "-");
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 解密
|
* 解密
|
||||||
*/
|
*/
|
||||||
decrypt(encryptedBase64Str) {
|
decrypt(encryptedBase64Str) {
|
||||||
let val = encryptedBase64Str.replace(/\-/g, '+').replace(/_/g, '/');
|
let val = encryptedBase64Str.replace(/\-/g, '+').replace(/_/g, '/');
|
||||||
let options = {
|
let options = {
|
||||||
mode: CryptoJS.mode.ECB,
|
mode: CryptoJS.mode.ECB,
|
||||||
padding: CryptoJS.pad.Pkcs7
|
padding: CryptoJS.pad.Pkcs7
|
||||||
};
|
};
|
||||||
let key = CryptoJS.enc.Utf8.parse(constant.cryptojs_key);
|
let key = CryptoJS.enc.Utf8.parse(constant.cryptojs_key);
|
||||||
let decryptedData = CryptoJS.AES.decrypt(val, key, options);
|
let decryptedData = CryptoJS.AES.decrypt(val, key, options);
|
||||||
return CryptoJS.enc.Utf8.stringify(decryptedData);
|
return CryptoJS.enc.Utf8.stringify(decryptedData);
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 表情包转换
|
* 表情包转换
|
||||||
*/
|
*/
|
||||||
faceReg(content) {
|
faceReg(content) {
|
||||||
content = content.replace(/\[[^\[^\]]+\]/g, (word) => {
|
content = content.replace(/\[[^\[^\]]+\]/g, (word) => {
|
||||||
let arr = [];
|
let arr = [];
|
||||||
EMOJI.forEach(element => {
|
EMOJI.forEach(element => {
|
||||||
arr = arr.concat(element.emote);
|
arr = arr.concat(element.emote);
|
||||||
});
|
});
|
||||||
let index = arr.findIndex(function(item) {
|
let index = arr.findIndex(function(item) {
|
||||||
return item.text === word;
|
return item.text === word;
|
||||||
});
|
});
|
||||||
if (index > -1) {
|
if (index > -1) {
|
||||||
let url = arr[index].url
|
let url = arr[index].url
|
||||||
return '<img style="vertical-align: middle;width: 32px;height: 32px" src="' + url + '" title="' + word + '"/>';
|
return '<img style="vertical-align: middle;width: 32px;height: 32px" src="' + url + '" title="' + word + '"/>';
|
||||||
} else {
|
} else {
|
||||||
return word;
|
return word;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return content;
|
return content;
|
||||||
},
|
},
|
||||||
|
loadAssets(assets) {
|
||||||
/**
|
const head = document.getElementsByTagName('head')[0];
|
||||||
* 图片转换
|
const loadAsset = (asset) => {
|
||||||
*/
|
return new Promise((resolve, reject) => {
|
||||||
pictureReg(content) {
|
let element;
|
||||||
content = content.replace(/\<[^\<^\>]+\>/g, (word) => {
|
if (asset.type === 'js') {
|
||||||
let index = word.indexOf(",");
|
element = document.createElement('script');
|
||||||
if (index > -1) {
|
element.src = asset.src;
|
||||||
let arr = word.replace("<", "").replace(">", "").split(",");
|
} else if (asset.type === 'css') {
|
||||||
return '<img style="border-radius: 5px;width: 100%;max-width: 250px;display: block" src="' + arr[1] + '" title="' + arr[0] + '"/>';
|
element = document.createElement('link');
|
||||||
} else {
|
element.href = asset.src;
|
||||||
return word;
|
element.rel = 'stylesheet';
|
||||||
}
|
}
|
||||||
});
|
element.onload = () => {
|
||||||
return content;
|
console.log(`Loaded ${asset.type} file: ${asset.src}`);
|
||||||
},
|
resolve();
|
||||||
|
};
|
||||||
/**
|
element.onerror = () => {
|
||||||
* 字符串转换为时间戳
|
console.error(`Error loading ${asset.type} file: ${asset.src}`);
|
||||||
*/
|
reject();
|
||||||
getDateTimeStamp(dateStr) {
|
};
|
||||||
return Date.parse(dateStr.replace(/-/gi, "/"));
|
head.appendChild(element);
|
||||||
},
|
});
|
||||||
|
};
|
||||||
getDateDiff(dateStr) {
|
return Promise.all(assets.map(loadAsset));
|
||||||
let publishTime = isNaN(Date.parse(dateStr.replace(/-/gi, "/")) / 1000) ? Date.parse(dateStr) / 1000 : Date.parse(dateStr.replace(/-/gi, "/")) / 1000;
|
},
|
||||||
let d_seconds,
|
/**
|
||||||
d_minutes,
|
* 图片转换
|
||||||
d_hours,
|
*/
|
||||||
d_days,
|
pictureReg(content) {
|
||||||
timeNow = Math.floor(new Date().getTime() / 1000),
|
content = content.replace(/\<[^\<^\>]+\>/g, (word) => {
|
||||||
d,
|
let index = word.indexOf(",");
|
||||||
date = new Date(publishTime * 1000),
|
if (index > -1) {
|
||||||
Y = date.getFullYear(),
|
let arr = word.replace("<", "").replace(">", "").split(",");
|
||||||
M = date.getMonth() + 1,
|
return '<img style="border-radius: 5px;width: 100%;max-width: 250px;display: block" src="' + arr[1] + '" title="' + arr[0] + '"/>';
|
||||||
D = date.getDate(),
|
} else {
|
||||||
H = date.getHours(),
|
return word;
|
||||||
m = date.getMinutes(),
|
}
|
||||||
s = date.getSeconds();
|
});
|
||||||
//小于10的在前面补0
|
return content;
|
||||||
if (M < 10) {
|
},
|
||||||
M = '0' + M;
|
|
||||||
}
|
/**
|
||||||
if (D < 10) {
|
* 字符串转换为时间戳
|
||||||
D = '0' + D;
|
*/
|
||||||
}
|
getDateTimeStamp(dateStr) {
|
||||||
if (H < 10) {
|
return Date.parse(dateStr.replace(/-/gi, "/"));
|
||||||
H = '0' + H;
|
},
|
||||||
}
|
|
||||||
if (m < 10) {
|
getDateDiff(dateStr) {
|
||||||
m = '0' + m;
|
let publishTime = isNaN(Date.parse(dateStr.replace(/-/gi, "/")) / 1000) ? Date.parse(dateStr) / 1000 : Date.parse(dateStr.replace(/-/gi, "/")) / 1000;
|
||||||
}
|
let d_seconds,
|
||||||
if (s < 10) {
|
d_minutes,
|
||||||
s = '0' + s;
|
d_hours,
|
||||||
}
|
d_days,
|
||||||
d = timeNow - publishTime;
|
timeNow = Math.floor(new Date().getTime() / 1000),
|
||||||
d_days = Math.floor(d / 86400);
|
d,
|
||||||
d_hours = Math.floor(d / 3600);
|
date = new Date(publishTime * 1000),
|
||||||
d_minutes = Math.floor(d / 60);
|
Y = date.getFullYear(),
|
||||||
d_seconds = Math.floor(d);
|
M = date.getMonth() + 1,
|
||||||
if (d_days > 0 && d_days < 3) {
|
D = date.getDate(),
|
||||||
return d_days + '天前';
|
H = date.getHours(),
|
||||||
} else if (d_days <= 0 && d_hours > 0) {
|
m = date.getMinutes(),
|
||||||
return d_hours + '小时前';
|
s = date.getSeconds();
|
||||||
} else if (d_hours <= 0 && d_minutes > 0) {
|
//小于10的在前面补0
|
||||||
return d_minutes + '分钟前';
|
if (M < 10) {
|
||||||
} else if (d_seconds < 60) {
|
M = '0' + M;
|
||||||
if (d_seconds <= 0) {
|
}
|
||||||
return '刚刚发表';
|
if (D < 10) {
|
||||||
} else {
|
D = '0' + D;
|
||||||
return d_seconds + '秒前';
|
}
|
||||||
}
|
if (H < 10) {
|
||||||
} else if (d_days >= 3) {
|
H = '0' + H;
|
||||||
return Y + '-' + M + '-' + D + ' ' + H + ':' + m;
|
}
|
||||||
}
|
if (m < 10) {
|
||||||
},
|
m = '0' + m;
|
||||||
|
}
|
||||||
/**
|
if (s < 10) {
|
||||||
* 保存资源
|
s = '0' + s;
|
||||||
*/
|
}
|
||||||
saveResource(that, type, path, isAdmin = false) {
|
d = timeNow - publishTime;
|
||||||
let resource = {
|
d_days = Math.floor(d / 86400);
|
||||||
type: type,
|
d_hours = Math.floor(d / 3600);
|
||||||
path: path
|
d_minutes = Math.floor(d / 60);
|
||||||
};
|
d_seconds = Math.floor(d);
|
||||||
|
if (d_days > 0 && d_days < 3) {
|
||||||
that.$http.post(that.$constant.baseURL + "/resource/saveResource", resource, isAdmin)
|
return d_days + '天前';
|
||||||
.catch((error) => {
|
} else if (d_days <= 0 && d_hours > 0) {
|
||||||
that.$message({
|
return d_hours + '小时前';
|
||||||
message: error.message,
|
} else if (d_hours <= 0 && d_minutes > 0) {
|
||||||
type: "error"
|
return d_minutes + '分钟前';
|
||||||
});
|
} else if (d_seconds < 60) {
|
||||||
});
|
if (d_seconds <= 0) {
|
||||||
}
|
return '刚刚发表';
|
||||||
}
|
} else {
|
||||||
|
return d_seconds + '秒前';
|
||||||
|
}
|
||||||
|
} else if (d_days >= 3) {
|
||||||
|
return Y + '-' + M + '-' + D + ' ' + H + ':' + m;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 保存资源
|
||||||
|
*/
|
||||||
|
saveResource(that, type, path, isAdmin = false) {
|
||||||
|
let resource = {
|
||||||
|
type: type,
|
||||||
|
path: path
|
||||||
|
};
|
||||||
|
|
||||||
|
that.$http.post(that.$constant.baseURL + "/resource/saveResource", resource, isAdmin)
|
||||||
|
.catch((error) => {
|
||||||
|
that.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -0,0 +1,144 @@
|
|||||||
|
export default {
|
||||||
|
/**
|
||||||
|
* 从一个个书中获取属性
|
||||||
|
*/
|
||||||
|
getAttr(doc,str){
|
||||||
|
let selector = "";
|
||||||
|
top.testEle = doc;
|
||||||
|
let sq = str?.split("@");// 必然分出前面tag. 或class. 或id. 最后是 某个属性或者text html
|
||||||
|
for (let index = 0; index < sq.length-1; index++) {
|
||||||
|
let regex = /^(\w+)\.([\w\s-]+)(?:\.(\d+))?$/
|
||||||
|
let parm = sq[index].match(regex);
|
||||||
|
if(parm[1]=="tag"){
|
||||||
|
selector = selector + parm[2];
|
||||||
|
if(parm[3]) {
|
||||||
|
selector = selector + `:eq(${parm[3]})`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(parm[1]=="class"){
|
||||||
|
selector = selector + `[class*='${parm[2]}']`
|
||||||
|
if(parm[3]) {
|
||||||
|
selector = selector + `:eq(${parm[3]})`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(parm[2]=="id"){
|
||||||
|
selector = selector + `[id*='${parm[2]}']`
|
||||||
|
}
|
||||||
|
selector = selector + " ";
|
||||||
|
}
|
||||||
|
let res = undefined;
|
||||||
|
if(sq[sq.length-1]){
|
||||||
|
if(sq[sq.length-1]=="text"){
|
||||||
|
let result = $(doc).find(selector);
|
||||||
|
if(result.length>1) {
|
||||||
|
res = result.map(function(index, item) {
|
||||||
|
return $(item)?.text()
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
res = $(doc).find(selector)?.text()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
let result = $(doc).find(selector);
|
||||||
|
if(result.length>1) {
|
||||||
|
res = result.map(function(index, item) {
|
||||||
|
return $(item)?.attr(sq[sq.length-1])
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
res = $(doc).find(selector)?.attr(sq[sq.length-1])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
getBookPreview(doc,str){
|
||||||
|
return {
|
||||||
|
"bookItem": doc,
|
||||||
|
"bookUrl": this.getAttr(doc,str.bookUrl),
|
||||||
|
"realUrl": this.getAttr(doc,str.realUrl),
|
||||||
|
"coverUrl": this.getAttr(doc,str.coverUrl),
|
||||||
|
"kind": this.getAttr(doc,str.kind),
|
||||||
|
"name": this.getAttr(doc,str.name)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getBookContent(doc,str){
|
||||||
|
return {
|
||||||
|
"content":this.selector(doc,str),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getBookInfo(doc,str){
|
||||||
|
return {
|
||||||
|
"bookItem": doc,
|
||||||
|
"coverUrl": this.getAttr(doc,str.coverUrl),
|
||||||
|
// "init": "",
|
||||||
|
"intro": this.getAttr(doc,str.intro),
|
||||||
|
"kind": this.getAttr(doc,str.kind),
|
||||||
|
"name": this.getAttr(doc,str.name),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selector(doc,str){
|
||||||
|
let selector = "";
|
||||||
|
let sq = str.split("@");// 必然分出前面tag. 或class. 或id. 最后是 某个属性或者text html
|
||||||
|
for (let index = 0; index < sq.length; index++) {
|
||||||
|
let regex = /^(\w+)\.([\w\s-]+)(?:\.(\d+))?$/
|
||||||
|
let parm = sq[index].match(regex);
|
||||||
|
if(parm[1]=="tag"){
|
||||||
|
selector = selector + parm[2];
|
||||||
|
if(parm[3]) {
|
||||||
|
selector = selector + `:eq(${parm[3]})`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(parm[1]=="class"){
|
||||||
|
selector = selector + `[class*='${parm[2]}']`
|
||||||
|
if(parm[3]) {
|
||||||
|
selector = selector + `:eq(${parm[3]})`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(parm[2]=="id"){
|
||||||
|
selector = selector + `[id*='${parm[2]}']`
|
||||||
|
}
|
||||||
|
selector = selector + " ";
|
||||||
|
}
|
||||||
|
console.log("selector,",doc.find(selector));
|
||||||
|
return doc.find(selector);
|
||||||
|
},
|
||||||
|
//返回搜索页面
|
||||||
|
ruleSearch(source,key){
|
||||||
|
return fetch('/api/scrape', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ url: source.searchUrl.replace("{{key}}",key)??this.$route.query.url })
|
||||||
|
})
|
||||||
|
.then(response => response.text())
|
||||||
|
.then(html => {
|
||||||
|
const doc = $(html);
|
||||||
|
return doc;
|
||||||
|
})
|
||||||
|
.catch(error => console.error(error));
|
||||||
|
},
|
||||||
|
ruleBookInfo(source,key){
|
||||||
|
return fetch('/api/scrape', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ url: source.bookSourceUrl + key ?? this.$route.query.url })
|
||||||
|
})
|
||||||
|
.then(response => response.text())
|
||||||
|
.then(html => {
|
||||||
|
const doc = $(html);
|
||||||
|
return doc;
|
||||||
|
})
|
||||||
|
.catch(error => console.error(error));
|
||||||
|
},
|
||||||
|
ruleContent(source,key){
|
||||||
|
return fetch('/api/scrape', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ url: source.bookSourceUrl + key ?? this.$route.query.url })
|
||||||
|
})
|
||||||
|
.then(response => response.text())
|
||||||
|
.then(html => {
|
||||||
|
const doc = $(html);
|
||||||
|
return doc;
|
||||||
|
})
|
||||||
|
.catch(error => console.error(error));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,37 +1,61 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
devServer: {
|
devServer: {
|
||||||
// 代理配置
|
// 代理配置
|
||||||
proxy: {
|
proxy: {
|
||||||
'/v': {
|
'/getIp': {
|
||||||
target: 'http://janxland.xyz/v/',
|
target: 'http://ip-api.com/json/?lang=zh-CN',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
headers: {
|
pathRewrite: {
|
||||||
Host: 'www.janxland.xyz'
|
'/getIp': ''
|
||||||
},
|
}
|
||||||
pathRewrite: {
|
},
|
||||||
'/v': ''
|
'/api/scrape': {
|
||||||
}
|
target: 'http://localhost:3000/scrape/',
|
||||||
},
|
changeOrigin: true,
|
||||||
'/api': {
|
headers: {
|
||||||
target: 'http://janxland.xyz/ablaze/',
|
Host: 'aurora.roginx.ink'
|
||||||
changeOrigin: true,
|
},
|
||||||
headers: {
|
pathRewrite: {
|
||||||
Host: 'www.janxland.xyz'
|
'/api/scrape': ''
|
||||||
},
|
}
|
||||||
pathRewrite: {
|
},
|
||||||
'/api': '/'
|
'/api/aurora': {
|
||||||
}
|
target: 'http://aurora.roginx.ink/aurora/',
|
||||||
},
|
changeOrigin: true,
|
||||||
'/mapi163/weapi': {
|
headers: {
|
||||||
target: 'http://janxland.xyz/',
|
Host: 'aurora.roginx.ink'
|
||||||
changeOrigin: true,
|
},
|
||||||
headers: {
|
pathRewrite: {
|
||||||
Host: 'www.janxland.xyz'
|
'/api/aurora': ''
|
||||||
},
|
}
|
||||||
pathRewrite: {
|
},
|
||||||
'/mapi163/weapi': '/mapi163/weapi'
|
'/v': {
|
||||||
}
|
target: 'http://aurora.roginx.ink/v/',
|
||||||
},
|
changeOrigin: true,
|
||||||
}
|
headers: {
|
||||||
}
|
Host: 'aurora.roginx.ink'
|
||||||
|
},
|
||||||
|
pathRewrite: {
|
||||||
|
'/v': ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'/api': {
|
||||||
|
target: 'http://aurora.roginx.ink/ablaze/',
|
||||||
|
changeOrigin: true,
|
||||||
|
headers: {
|
||||||
|
Host: 'aurora.roginx.ink'
|
||||||
|
},
|
||||||
|
pathRewrite: {
|
||||||
|
'/api': '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'/mapi163/weapi': {
|
||||||
|
target: 'http://aurora.roginx.ink/',
|
||||||
|
changeOrigin: true,
|
||||||
|
headers: {
|
||||||
|
Host: 'aurora.roginx.ink'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in new issue