Janx
2 years ago
parent
104cd0fcf2
commit
91d7e734e3
File diff suppressed because it is too large
Load Diff
@ -1,80 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||
<meta charset="utf-8" />
|
||||
<meta name="Robots" content="all" />
|
||||
<meta name="KEYWords" content="janx,pixiv,博客,游戏,动漫"/>
|
||||
<meta name="DEscription" content="Janxland,Janx,动漫,游戏,博客">
|
||||
<meta name="baidu-site-verification" content="codeva-FAjK1LxybY" />
|
||||
<meta content="webkit" name="renderer" />
|
||||
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
|
||||
<meta name="force-rendering" content="webkit"/>
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="./poetize.jpg" sizes="16x16">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.min.css">
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
|
||||
<title>Roginx</title>
|
||||
<!-- <script>
|
||||
fetch('https://search.heweather.net/find?key=3180d3c43e524753ab8bcef69dba023a&group=cn&lang=zh&location=450800')
|
||||
.then(function(response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(function(myJson) {
|
||||
top.dominCN = myJson.HeWeather6[0].basic[0]
|
||||
});
|
||||
</script> -->
|
||||
<script type="text/javascript">
|
||||
window.jQuery || document.write("<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js'>"+ "<"+"/script>");
|
||||
</script>
|
||||
<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>");
|
||||
</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://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/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/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://cdnjs.cloudflare.com/ajax/libs/qiniu-js/3.4.0/qiniu.min.js"></script> -->
|
||||
<!-- lg插件 -->
|
||||
|
||||
<script src="./music-js/aes.js"></script>
|
||||
<script src="./music-js/BigInt.js"></script>
|
||||
<script src="./music-js/Barrett.js"></script>
|
||||
<script src="./music-js/RSA.js"></script>
|
||||
<script src="./music-js/163Api.js"></script>
|
||||
<script src="./music-js/jsoup.js"></script>
|
||||
<script src="./music-js/JMshake.js"></script>
|
||||
<!-- 统计代码 https://analytics.apimoe.lol/ -->
|
||||
<script defer src="https://analytics.apimoe.lol/pixel/CmhIWUSAeHp5v5Kq"></script>
|
||||
<!-- /统计代码 -->
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<!-- lg -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7/lightgallery.min.js"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/lightgallery@2.7/css/lightgallery-bundle.min.css" rel="stylesheet"></link>
|
||||
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/thumbnail/lg-thumbnail.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/hash/lg-hash.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/rotate/lg-rotate.min.js"></script>
|
||||
<script src="https://cdn.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/zoom/lg-zoom.min.js"></script>
|
||||
<script src="https://cdn.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/autoplay/lg-autoplay.min.js"></script>
|
||||
<script src="https://cdn.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/share/lg-share.min.js"></script> -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/pager/lg-pager.min.js"></script> -->
|
||||
<script>
|
||||
new WOW().init();
|
||||
</script>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||
<meta http-equiv='content-language' content='zh-cn'>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="Robots" content="all" />
|
||||
<meta name="keywords" content="Janxland,Janx,Roginshin,roginx,人工智能,前端,后端,动漫,游戏,博客"/>
|
||||
<meta name="description" content="Janxland,Janx,Roginshin,roginx,人工智能,动漫,游戏,博客">
|
||||
<meta name="baidu-site-verification" content="codeva-FAjK1LxybY" />
|
||||
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
|
||||
<meta content="webkit" name="renderer" />
|
||||
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
|
||||
<meta name="force-rendering" content="webkit"/>
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="./poetize.jpg" sizes="16x16">
|
||||
<title>ROGINSHIN - 兴</title>
|
||||
<script>
|
||||
// fetch('https://search.heweather.net/find?key=3180d3c43e524753ab8bcef69dba023a&group=cn&lang=zh&location=450800')
|
||||
// .then(function(response) {
|
||||
// return response.json();
|
||||
// })
|
||||
// .then(function(myJson) {
|
||||
// top.dominCN = myJson.HeWeather6[0].basic[0]
|
||||
// });
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
window.jQuery || document.write("<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js'>"+ "<"+"/script>");
|
||||
</script>
|
||||
<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>");
|
||||
</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://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/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/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>
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
|
||||
<!-- <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">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="./music-js/aes.js"></script>
|
||||
<script src="./music-js/BigInt.js"></script>
|
||||
<script src="./music-js/Barrett.js"></script>
|
||||
<script src="./music-js/RSA.js"></script>
|
||||
<script src="./music-js/163Api.js"></script>
|
||||
<script src="./music-js/jsoup.js"></script>
|
||||
<script src="./music-js/JMshake.js"></script>
|
||||
<!-- lg -->
|
||||
<script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7/lightgallery.min.js"></script>
|
||||
<link href="https://fastly.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/thumbnail/lg-thumbnail.min.js"></script>
|
||||
<script src="https://fastly.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/rotate/lg-rotate.min.js"></script>
|
||||
<script src="https://fastly.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/zoom/lg-zoom.min.js"></script>
|
||||
<script src="https://fastly.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/autoplay/lg-autoplay.min.js"></script>
|
||||
<script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7.1/plugins/comment/lg-comment.min.js"></script>
|
||||
<!-- <script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7.1/plugins/share/lg-share.min.js"></script>
|
||||
<script src="https://fastly.jsdelivr.net/npm/lightgallery@2.7.1/plugins/pager/lg-pager.min.js"></script> -->
|
||||
<!-- <script src="https://fastly.jsdelivr.net/npm/masonry.js@3.1.5/dist/masonry.pkgd.min.js"></script> -->
|
||||
<!-- <script src="https://fastly.jsdelivr.net/npm/vue-lazyload@3.0.0-rc.2/vue-lazyload.min.js"></script> -->
|
||||
</body>
|
||||
<script>
|
||||
new WOW().init();
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,253 +1,253 @@
|
||||
var JMusicjsoup = {
|
||||
getRecommends:function(callback){
|
||||
$.ajax({
|
||||
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},
|
||||
dataType:'json',
|
||||
type:'get',
|
||||
async:true,
|
||||
success:function(data){
|
||||
callback._setRecommend(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
getNewsongs:function(num,callback){
|
||||
//"{"limit":10}"
|
||||
setV.d = '{"limit":'+num+'}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/personalized/newsong',
|
||||
// data:{'params':'ujh2NED7JxtOit8f2Vo/sp+bqzzC9urfBWjZD60xDdA=','encSecKey':'302d922dd30c10cc489121d1e5e956db50d5d3f8cf1f46dae2c501d88d378cb4b4b11d732efafb3c02c8e5b4e6f2633a5422bf8a0f902a10eb1627ee3665d1dbf370de4356b9a9348f0a3ff8ffb188e996d8e2f8878a95effac07ab1295ebb81ff06127e3e58d339a07d6c824128b58d2f60b60c284b7a55b70ea5e4e126136a'},
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
callback._setNewsongs(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
getLyric:function(id,callback){
|
||||
setV.d = '{"id":"'+id+'","lv":0,"tv":0}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/song/lyric',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
callback._setLyric(id,data);
|
||||
}
|
||||
});
|
||||
},
|
||||
getListsongs:function(callback){
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/v3/playlist/detail',
|
||||
data:{'params':'KvByhpvz7lzKJlmmur31pyP9wun0SzssbTnXHQveNOPYvGMFH7w8U+0pcbpv3NX0','encSecKey':'be25f5794f940eebbde77dba783699e38bc12db41eadee670e69ebd16a3b29277817dd1795814de4c8264a28e5383da8620736d21275cc3b1f32797c4c63ca76db5dcae60fb21cc2b5d02741ed49fef00dcdaf3e16027de3c5ede1c7d8b8c182f1b0c5fedac846a5f511dbcda94936425b7a5df71dfd54cad47120e26d974b64'},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
callback._setListsongs(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
getKeywordsHot(){
|
||||
//https://music.163.com/weapi/search/hot
|
||||
//d = "{"type":1111}"
|
||||
},
|
||||
getKeywordsTips(key,callback){ //关键词
|
||||
setV.d = '{"s":"'+key+'"}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/search/suggest/keyword',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setKeywordsTips(data);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getSearchRes(key,limit,offset,callback){
|
||||
//"{"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}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/search/get/',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setSearchRessong(data);
|
||||
}
|
||||
//data.result;//"songs"下直接取个数 songs[0].name song[0].ar[0].name
|
||||
}
|
||||
});
|
||||
},
|
||||
getSongInfo(id,callback){
|
||||
setV.d ='{"id":"'+id+'","c":"[{\\"id\\":\\"'+id+'\\"}]"}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/v3/song/detail',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
if(data.code==200){
|
||||
callback._setSongInfo(id,data); //songs:data.playlist.[tracks,name]
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
error:function(err){
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getPlayLists(key,limit,offset,callback){
|
||||
//获得歌单内容
|
||||
//https://music.163.com/weapi/v3/playlist/detail
|
||||
//d:"{"id":"2358852380","n":1000}" 歌单ID
|
||||
//"{"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":""}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/cloudsearch/get/web',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
console.error(data);
|
||||
if(callback!=null){
|
||||
callback._setSearchResplay(data); //songs:data.playlist.[tracks,name]
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getPlayList(id,callback){
|
||||
//获得歌单内容
|
||||
//https://music.163.com/weapi/v3/playlist/detail
|
||||
//d:"{"id":"2358852380","n":1000}" 歌单ID
|
||||
setV.d = `{"id":"${id}","total":"True","limit":1000,"n":1000,"csrf_token":"09556b378da338d2c373d38422f901a6"}`;
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/v3/playlist/detail',
|
||||
// url:'/mapi163/weapi/middle/clientcfg/config/list?csrf_token=',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setPlayList(data); //songs:data.playlist.[tracks,name]
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getuserPlayList(id,callback){
|
||||
//获得用户的所有歌单
|
||||
//https://music.163.com/weapi/v3/playlist/detail
|
||||
//d:"{"id":"2358852380","n":1000}" 歌单ID
|
||||
//"{"s":"神","limit":20,"offset":20,"type":1,"strategy":5,"queryCorrect":true}" 继续获取
|
||||
setV.d = '{\"uid\":\"'+id+'\",\"offset\":"0","limit":"1001"}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/user/playlist',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setuserPlayList(data); //songs:data.playlist.[tracks,name]
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getCommentsByPlayList(id,callback){
|
||||
//获得评论内容
|
||||
//https://music.163.com/weapi/v1/resource/comments/get
|
||||
//d:"{"resourceType":0,"resourceId":"2358852380","limit":15}" 歌单ID
|
||||
setV.d = '{"resourceType":0,"resourceId":"'+id+'","limit":15}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/v1/resource/comments/get',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setPlayList(data); //songs:data.playlist.[tracks,name]
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getMp3Url(id,callback){
|
||||
setV.d = `{"ids":"[\\"${id}\\"]","level":"lossless","encodeType":"aac","csrf_token":"","br":"128000"}`;
|
||||
//setV.d = "{\"ids\":\"[\\\""+id+"\\\"]\",\"br\":\"128000\"}";
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/song/enhance/player/url',
|
||||
type:'post',
|
||||
dataType:'json',
|
||||
async:true,
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setMp3Url(id,data);
|
||||
}
|
||||
},
|
||||
error:function(err){
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
getOnline(callback){
|
||||
$.ajax({
|
||||
url:'/userarea',
|
||||
type:'post',
|
||||
dataType:'json',
|
||||
async:true,
|
||||
data:{"type":"ONLINE"},
|
||||
success:function(data){
|
||||
if(data.status == 0){
|
||||
if(callback!=null){
|
||||
Jsonp.getUser(data.message,callback);
|
||||
}
|
||||
}
|
||||
},
|
||||
error:function(err){
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
getUser(id,callback){
|
||||
$.ajax({
|
||||
url:'/userarea',
|
||||
type:'post',
|
||||
dataType:'json',
|
||||
async:true,
|
||||
data:{"type":"USER","id":id},
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setUser(data);
|
||||
}
|
||||
},
|
||||
error:function(err){
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var JMusicjsoup = {
|
||||
getRecommends:function(callback){
|
||||
$.ajax({
|
||||
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},
|
||||
dataType:'json',
|
||||
type:'get',
|
||||
async:true,
|
||||
success:function(data){
|
||||
callback._setRecommend(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
getNewsongs:function(num,callback){
|
||||
//"{"limit":10}"
|
||||
setV.d = '{"limit":'+num+'}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/personalized/newsong',
|
||||
// data:{'params':'ujh2NED7JxtOit8f2Vo/sp+bqzzC9urfBWjZD60xDdA=','encSecKey':'302d922dd30c10cc489121d1e5e956db50d5d3f8cf1f46dae2c501d88d378cb4b4b11d732efafb3c02c8e5b4e6f2633a5422bf8a0f902a10eb1627ee3665d1dbf370de4356b9a9348f0a3ff8ffb188e996d8e2f8878a95effac07ab1295ebb81ff06127e3e58d339a07d6c824128b58d2f60b60c284b7a55b70ea5e4e126136a'},
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
callback._setNewsongs(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
getLyric:function(id,callback){
|
||||
setV.d = '{"id":"'+id+'","lv":0,"tv":0}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/song/lyric',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
callback._setLyric(id,data);
|
||||
}
|
||||
});
|
||||
},
|
||||
getListsongs:function(callback){
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/v6/playlist/detail',
|
||||
data:{'params':'KvByhpvz7lzKJlmmur31pyP9wun0SzssbTnXHQveNOPYvGMFH7w8U+0pcbpv3NX0','encSecKey':'be25f5794f940eebbde77dba783699e38bc12db41eadee670e69ebd16a3b29277817dd1795814de4c8264a28e5383da8620736d21275cc3b1f32797c4c63ca76db5dcae60fb21cc2b5d02741ed49fef00dcdaf3e16027de3c5ede1c7d8b8c182f1b0c5fedac846a5f511dbcda94936425b7a5df71dfd54cad47120e26d974b64'},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
callback._setListsongs(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
getKeywordsHot(){
|
||||
//https://music.163.com/weapi/search/hot
|
||||
//d = "{"type":1111}"
|
||||
},
|
||||
getKeywordsTips(key,callback){ //关键词
|
||||
setV.d = '{"s":"'+key+'"}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/search/suggest/keyword',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setKeywordsTips(data);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getSearchRes(key,limit,offset,callback){
|
||||
//"{"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}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/search/get/',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setSearchRessong(data);
|
||||
}
|
||||
//data.result;//"songs"下直接取个数 songs[0].name song[0].ar[0].name
|
||||
}
|
||||
});
|
||||
},
|
||||
getSongInfo(id,callback){
|
||||
setV.d ='{"id":"'+id+'","c":"[{\\"id\\":\\"'+id+'\\"}]"}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/v3/song/detail',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
if(data.code==200){
|
||||
callback._setSongInfo(id,data); //songs:data.playlist.[tracks,name]
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
error:function(err){
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getPlayLists(key,limit,offset,callback){
|
||||
//获得歌单内容
|
||||
//https://music.163.com/weapi/v3/playlist/detail
|
||||
//d:"{"id":"2358852380","n":1000}" 歌单ID
|
||||
//"{"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":""}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/cloudsearch/get/web',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
console.error(data);
|
||||
if(callback!=null){
|
||||
callback._setSearchResplay(data); //songs:data.playlist.[tracks,name]
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getPlayList(id,callback){
|
||||
//获得歌单内容
|
||||
//https://music.163.com/weapi/v3/playlist/detail
|
||||
//d:"{"id":"2358852380","n":1000}" 歌单ID
|
||||
setV.d = `{"id":"${id}","total":"True","limit":1000,"n":1000,"csrf_token":"09556b378da338d2c373d38422f901a6"}`;
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/v6/playlist/detail',
|
||||
// url:'/mapi163/weapi/middle/clientcfg/config/list?csrf_token=',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setPlayList(data); //songs:data.playlist.[tracks,name]
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getuserPlayList(id,callback){
|
||||
//获得用户的所有歌单
|
||||
//https://music.163.com/weapi/v3/playlist/detail
|
||||
//d:"{"id":"2358852380","n":1000}" 歌单ID
|
||||
//"{"s":"神","limit":20,"offset":20,"type":1,"strategy":5,"queryCorrect":true}" 继续获取
|
||||
setV.d = '{\"uid\":\"'+id+'\",\"offset\":"0","limit":"1001"}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/user/playlist',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setuserPlayList(data); //songs:data.playlist.[tracks,name]
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getCommentsByPlayList(id,callback){
|
||||
//获得评论内容
|
||||
//https://music.163.com/weapi/v1/resource/comments/get
|
||||
//d:"{"resourceType":0,"resourceId":"2358852380","limit":15}" 歌单ID
|
||||
setV.d = '{"resourceType":0,"resourceId":"'+id+'","limit":15}';
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/v1/resource/comments/get',
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
dataType:'json',
|
||||
type:'post',
|
||||
async:true,
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setPlayList(data); //songs:data.playlist.[tracks,name]
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getMp3Url(id,callback){
|
||||
setV.d = `{"ids":"[\\"${id}\\"]","level":"lossless","encodeType":"aac","csrf_token":"","br":"128000"}`;
|
||||
//setV.d = "{\"ids\":\"[\\\""+id+"\\\"]\",\"br\":\"128000\"}";
|
||||
var res = __getKeyton();
|
||||
$.ajax({
|
||||
url:'/mapi163/weapi/song/enhance/player/url',
|
||||
type:'post',
|
||||
dataType:'json',
|
||||
async:true,
|
||||
data:{'params':res[0],'encSecKey':res[1]},
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setMp3Url(id,data);
|
||||
}
|
||||
},
|
||||
error:function(err){
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
getOnline(callback){
|
||||
$.ajax({
|
||||
url:'/userarea',
|
||||
type:'post',
|
||||
dataType:'json',
|
||||
async:true,
|
||||
data:{"type":"ONLINE"},
|
||||
success:function(data){
|
||||
if(data.status == 0){
|
||||
if(callback!=null){
|
||||
Jsonp.getUser(data.message,callback);
|
||||
}
|
||||
}
|
||||
},
|
||||
error:function(err){
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
getUser(id,callback){
|
||||
$.ajax({
|
||||
url:'/userarea',
|
||||
type:'post',
|
||||
dataType:'json',
|
||||
async:true,
|
||||
data:{"type":"USER","id":id},
|
||||
success:function(data){
|
||||
if(callback!=null){
|
||||
callback._setUser(data);
|
||||
}
|
||||
},
|
||||
error:function(err){
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,33 +1,33 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.$store.commit("changePlaylist", this.$constant.playlists[Math.floor(Math.random() * this.$constant.playlists.length)]);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,83 +1,94 @@
|
||||
:root {
|
||||
/* 背景 */
|
||||
--background: white;
|
||||
--gradualBackground: linear-gradient(to right bottom, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||
|
||||
/* 字体 */
|
||||
--fontColor: black;
|
||||
/* 边框 */
|
||||
--borderColor: rgba(0, 0, 0, 0.5);
|
||||
/* 边框 */
|
||||
--borderHoverColor: rgba(110, 110, 110, 0.4);
|
||||
/* 文章字体 */
|
||||
--articleFontColor: #1f1f1f;
|
||||
/* 文章灰色字体 */
|
||||
--articleGreyFontColor: #616161;
|
||||
/* 评论背景颜色 */
|
||||
--commentContent: #F7F9FE;
|
||||
|
||||
|
||||
/* 主题背景 */
|
||||
--themeBackground: orange;
|
||||
/* 主题悬停背景 */
|
||||
--gradualRed: linear-gradient(to right, #ff4b2b, #ff416c);
|
||||
|
||||
/* 水波纹 */
|
||||
--rippleColor: rgba(0, 0, 0, 0.5);
|
||||
/* 导航栏字体 */
|
||||
--toolbarFont: #333333;
|
||||
/* 导航栏背景 */
|
||||
--toolbarBackground: rgba(255, 255, 255, 1);
|
||||
/* 灰色字体 */
|
||||
--greyFont: #797979;
|
||||
--maxGreyFont: #595A5A;
|
||||
/* footer背景 */
|
||||
--gradientBG: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||
/* 白色遮罩 */
|
||||
--whiteMask: rgba(255, 255, 255, 0.3);
|
||||
/* max白色遮罩 */
|
||||
--maxWhiteMask: rgba(255, 255, 255, 0.5);
|
||||
--maxMaxWhiteMask: rgba(255, 255, 255, 0.7);
|
||||
/* mini白色遮罩 */
|
||||
--miniWhiteMask: rgba(255, 255, 255, 0.15);
|
||||
/* 透明 */
|
||||
--transparent: rgba(0, 0, 0, 0);
|
||||
/* mini黑色遮罩 */
|
||||
--miniMask: rgba(0, 0, 0, 0.15);
|
||||
/* 黑色遮罩 */
|
||||
--mask: rgba(0, 0, 0, 0.3);
|
||||
/* 半透明 */
|
||||
--translucent: rgba(0, 0, 0, 0.5);
|
||||
/* 深黑遮罩 */
|
||||
--maxMask: rgba(0, 0, 0, 0.7);
|
||||
|
||||
|
||||
--white: white;
|
||||
|
||||
--red: red;
|
||||
--lightRed: #ff4b2b;
|
||||
--maxLightRed: #ff416c;
|
||||
--orangeRed: #EF794F;
|
||||
|
||||
--azure: #ECF7FE;
|
||||
--blue: rgb(3, 169, 244);
|
||||
|
||||
--lightGray: #DDDDDD;
|
||||
--maxLightGray: #EEEEEE;
|
||||
--maxMaxLightGray: rgba(242, 242, 242, 0.5);
|
||||
|
||||
--lightGreen: #39c5bb;
|
||||
|
||||
--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);
|
||||
}
|
||||
:root {
|
||||
--color-body-bg: #ffffff;
|
||||
--color-text: #000;
|
||||
--color-primary: #335eea;
|
||||
--color-primary-bg: #eaeffd;
|
||||
--color-secondary: #7a7a7b;
|
||||
--color-secondary-bg: #f5f5f7;
|
||||
--color-navbar-bg: rgba(255, 255, 255, 0.86);
|
||||
--color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
|
||||
--color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
|
||||
--html-overflow-y: overlay;
|
||||
/* 背景 */
|
||||
--background: white;
|
||||
--gradualBackground: linear-gradient(to right bottom, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||
|
||||
/* 字体 */
|
||||
--fontColor: black;
|
||||
/* 边框 */
|
||||
--borderColor: rgba(0, 0, 0, 0.5);
|
||||
/* 边框 */
|
||||
--borderHoverColor: rgba(110, 110, 110, 0.4);
|
||||
/* 文章字体 */
|
||||
--articleFontColor: #1f1f1f;
|
||||
/* 文章灰色字体 */
|
||||
--articleGreyFontColor: #616161;
|
||||
/* 评论背景颜色 */
|
||||
--commentContent: #F7F9FE;
|
||||
|
||||
|
||||
/* 主题背景 */
|
||||
--themeBackground: orange;
|
||||
--themeBackground-bg: rgb(253, 237, 208);
|
||||
/* 主题悬停背景 */
|
||||
--gradualRed: linear-gradient(to right, #ff4b2b, #ff416c);
|
||||
|
||||
/* 水波纹 */
|
||||
--rippleColor: rgba(0, 0, 0, 0.5);
|
||||
/* 导航栏字体 */
|
||||
--toolbarFont: #333333;
|
||||
/* 导航栏背景 */
|
||||
--toolbarBackground: rgba(255, 255, 255, 1);
|
||||
/* 灰色字体 */
|
||||
--greyFont: #797979;
|
||||
--maxGreyFont: #595A5A;
|
||||
/* footer背景 */
|
||||
--gradientBG: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||
/* 白色遮罩 */
|
||||
--whiteMask: rgba(255, 255, 255, 0.3);
|
||||
/* max白色遮罩 */
|
||||
--maxWhiteMask: rgba(255, 255, 255, 0.5);
|
||||
--maxMaxWhiteMask: rgba(255, 255, 255, 0.7);
|
||||
/* mini白色遮罩 */
|
||||
--miniWhiteMask: rgba(255, 255, 255, 0.15);
|
||||
/* 透明 */
|
||||
--transparent: rgba(0, 0, 0, 0);
|
||||
/* mini黑色遮罩 */
|
||||
--miniMask: rgba(0, 0, 0, 0.15);
|
||||
/* 黑色遮罩 */
|
||||
--mask: rgba(0, 0, 0, 0.3);
|
||||
/* 半透明 */
|
||||
--translucent: rgba(0, 0, 0, 0.5);
|
||||
/* 深黑遮罩 */
|
||||
--maxMask: rgba(0, 0, 0, 0.7);
|
||||
|
||||
|
||||
--white: white;
|
||||
|
||||
--red: red;
|
||||
--lightRed: #ff4b2b;
|
||||
--maxLightRed: #ff416c;
|
||||
--orangeRed: #EF794F;
|
||||
|
||||
--azure: #ECF7FE;
|
||||
--blue: rgb(3, 169, 244);
|
||||
|
||||
--lightGray: #DDDDDD;
|
||||
--maxLightGray: #EEEEEE;
|
||||
--maxMaxLightGray: rgba(242, 242, 242, 0.5);
|
||||
|
||||
--lightGreen: #39c5bb;
|
||||
|
||||
--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 */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
i{
|
||||
user-select: none;
|
||||
}
|
||||
body {
|
||||
color: var(--fontColor);
|
||||
font-family: var(--globalFont), serif;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: SmileySans;
|
||||
/* 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);
|
||||
font-display: swap;
|
||||
}
|
||||
/* 图片 */
|
||||
.background-image {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* 固定位置，不随滚动条滚动 */
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.background-image::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.background-image-error {
|
||||
background-color: var(--lightGreen);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* 固定位置，不随滚动条滚动 */
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 模块化背景色及透明度 */
|
||||
.background-opacity {
|
||||
/*background: var(--background);*/
|
||||
/*opacity: 0.88;*/
|
||||
}
|
||||
|
||||
.my-el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.my-el-image .image-slot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 遮罩 */
|
||||
.poem-image::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--mask);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.user-avatar:hover {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: rgba(73, 177, 245, 0.2);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #49b1f5;
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.4) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.4) 50%,
|
||||
rgba(255, 255, 255, 0.4) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.el-select-dropdown.el-popper ::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 选中样式 */
|
||||
::selection {
|
||||
background: var(--lightYellow);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
/* 居中 */
|
||||
.myCenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.transformCenter {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* 两边 */
|
||||
.myBetween {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 阴影 */
|
||||
.shadow-box-mini {
|
||||
box-shadow: 1px 1px 3px var(--mask);
|
||||
}
|
||||
|
||||
.shadow-box {
|
||||
box-shadow: 0 1px 20px -6px var(--borderColor);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.shadow-box:hover {
|
||||
box-shadow: 0 5px 10px 5px var(--borderHoverColor);
|
||||
}
|
||||
|
||||
/* el弹出框样式 */
|
||||
.el-message {
|
||||
top: 80px !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.el-message * {
|
||||
color: var(--white) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-message--success {
|
||||
background: var(--themeBackground);
|
||||
}
|
||||
|
||||
.el-message--warning {
|
||||
background: var(--gradientBG);
|
||||
}
|
||||
|
||||
.el-message--error {
|
||||
background: var(--gradualRed);
|
||||
}
|
||||
|
||||
/* 看板娘 */
|
||||
#waifu-toggle, #waifu {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#waifu-tips {
|
||||
border: unset;
|
||||
animation: unset;
|
||||
width: 200px;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
#waifu-tool {
|
||||
right: -10px;
|
||||
bottom: 20px;
|
||||
top: unset;
|
||||
}
|
||||
|
||||
#waifu #live2d {
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
/* 图标旋转 */
|
||||
.iconRotate {
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
/* 树洞留言 */
|
||||
.baberrage-item .baberrage-msg {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.baberrage-item .normal .baberrage-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
.el-upload.el-upload--picture {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100% !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.toolbarDrawer {
|
||||
position: relative;
|
||||
background: var(--toolbar) center center / cover no-repeat;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.toolbarDrawer .el-drawer__header {
|
||||
font-size: 22px;
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbarDrawer::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--mask);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.small-menu {
|
||||
color: var(--white);
|
||||
font-size: 20px;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.small-menu > li {
|
||||
list-style: none;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[ks-tag] {
|
||||
position: relative
|
||||
}
|
||||
|
||||
[ks-tag]:before,[ks-tag]:after {
|
||||
position: absolute;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
[ks-tag]:before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: opacity .3s;
|
||||
border: .5rem solid transparent
|
||||
}
|
||||
|
||||
[ks-tag~=top]:before {
|
||||
bottom: 100%;
|
||||
border-top-color: rgba(0,0,0,.7)
|
||||
}
|
||||
|
||||
[ks-tag~=bottom]:before {
|
||||
top: 100%;
|
||||
border-bottom-color: aliceblue;
|
||||
}
|
||||
|
||||
[ks-tag~=top]:before,[ks-tag~=bottom]:before {
|
||||
left: 50%;
|
||||
transform: translateX(-50%)
|
||||
}
|
||||
|
||||
[ks-tag=left]:before {
|
||||
right: 100%;
|
||||
border-left-color: rgba(0,0,0,.7)
|
||||
}
|
||||
|
||||
[ks-tag=right]:before {
|
||||
left: 100%;
|
||||
border-right-color: rgba(0,0,0,.7)
|
||||
}
|
||||
|
||||
[ks-tag=left]:before,[ks-tag=right]:before {
|
||||
top: 50%;
|
||||
transform: translateY(-50%)
|
||||
}
|
||||
|
||||
[ks-tag~=top]:after {
|
||||
bottom: 100%;
|
||||
margin-bottom: 1rem
|
||||
}
|
||||
|
||||
[ks-tag~=bottom]:after {
|
||||
top: 100%;
|
||||
margin-top: 1rem
|
||||
}
|
||||
|
||||
[ks-tag=top]:after,[ks-tag=bottom]:after {
|
||||
left: 50%;
|
||||
transform: translateX(-50%)
|
||||
}
|
||||
|
||||
[ks-tag=left]:after {
|
||||
right: 100%;
|
||||
margin-right: 1rem
|
||||
}
|
||||
|
||||
[ks-tag=right]:after {
|
||||
left: 100%;
|
||||
margin-left: 1rem
|
||||
}
|
||||
|
||||
[ks-tag=left]:after,[ks-tag=right]:after {
|
||||
top: 50%;
|
||||
transform: translateY(-50%)
|
||||
}
|
||||
|
||||
[ks-tag~=left][ks-tag~=top]:after,[ks-tag~=left][ks-tag~=bottom]:after {
|
||||
right: 0;
|
||||
min-width: 4em
|
||||
}
|
||||
|
||||
[ks-tag~=right][ks-tag~=top]:after,[ks-tag~=right][ks-tag~=bottom]:after {
|
||||
left: 0;
|
||||
min-width: 4em
|
||||
}
|
||||
|
||||
[ks-text]:hover:before,[ks-text]:hover:after {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
[ks-text]:after {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
font-size: .85rem;
|
||||
white-space: nowrap;
|
||||
border-radius: .5rem;
|
||||
padding: .25rem .5rem;
|
||||
content: attr(ks-text);
|
||||
transition: opacity .3s;
|
||||
background: rgba(0,0,0,.7)
|
||||
}
|
||||
.mceTmpl{
|
||||
position:relative;
|
||||
user-select: none;
|
||||
}
|
||||
.check_label{
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
opacity: 1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--background) 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hideContext{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
max-height:120px;
|
||||
min-height: 80px;
|
||||
overflow: hidden;
|
||||
transition:.3s;
|
||||
}
|
||||
.check_label::after{
|
||||
content: '显示内容';
|
||||
letter-spacing: .3em;
|
||||
height: 1.2em;
|
||||
background: #0000000a;
|
||||
line-height: 1.2em;
|
||||
bottom: 0px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #333;
|
||||
font-size: .8em;
|
||||
color: #fff;
|
||||
padding: 8px 14px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 2px 2px rgb(0 0 0 / 20%);
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.check_label:hover::after{
|
||||
font-weight:550;
|
||||
color:#FFF;
|
||||
background: #000;
|
||||
opacity: 1 !important;
|
||||
transition:.3s;
|
||||
}
|
||||
.hideCheckInput{
|
||||
display: none;
|
||||
}
|
||||
.hideCheckInput:checked ~ .check_label{
|
||||
transition: .3s;
|
||||
background-image: none;
|
||||
}
|
||||
.hideCheckInput:checked ~ .hideContext {
|
||||
min-height: 300px;
|
||||
max-height: unset;
|
||||
transition: .3s;
|
||||
}
|
||||
.hideCheckInput:checked ~ .check_label::after{
|
||||
content: '隐藏内容';
|
||||
transition: 2s ease .5s;
|
||||
opacity: 0;
|
||||
}
|
||||
.hideCheckInput:checked ~ .check_label:hover::after{
|
||||
background: #000 !important;
|
||||
animation:none;
|
||||
transition: .4s !important;
|
||||
}
|
||||
|
||||
.print{
|
||||
width:1000px;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
-webkit-animation: dy 3s steps(60, end) infinite;
|
||||
animation: dy 3s steps(50, end) infinite;
|
||||
}
|
||||
.spanFeather {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@supports (-webkit-mask-image: inherit) or (mask-image: inherit) {
|
||||
.spanFeather {
|
||||
text-overflow: clip;
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 1) calc(100% - 2em),
|
||||
transparent
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 1) calc(100% - 2em),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes dy{
|
||||
from { width: 0;}
|
||||
}
|
||||
@keyframes dy{
|
||||
from { width: 0;}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
.el-dialog {
|
||||
width: 75% !important;
|
||||
}
|
||||
}
|
||||
/* 通用css */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
i{
|
||||
user-select: none;
|
||||
}
|
||||
body {
|
||||
color: var(--fontColor);
|
||||
font-family: var(--globalFont), serif;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: SmileySans;
|
||||
/* 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);
|
||||
font-display: swap;
|
||||
}
|
||||
/* 图片 */
|
||||
.background-image {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* 固定位置，不随滚动条滚动 */
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.background-image::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.background-image-error {
|
||||
background-color: var(--lightGreen);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* 固定位置，不随滚动条滚动 */
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 模块化背景色及透明度 */
|
||||
.background-opacity {
|
||||
/*background: var(--background);*/
|
||||
/*opacity: 0.88;*/
|
||||
}
|
||||
|
||||
.my-el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.my-el-image .image-slot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 遮罩 */
|
||||
.poem-image::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--mask);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.user-avatar:hover {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: rgba(73, 177, 245, 0.2);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #49b1f5;
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.4) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.4) 50%,
|
||||
rgba(255, 255, 255, 0.4) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.el-select-dropdown.el-popper ::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 选中样式 */
|
||||
::selection {
|
||||
background: var(--lightYellow);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
/* 居中 */
|
||||
.myCenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.transformCenter {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* 两边 */
|
||||
.myBetween {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 阴影 */
|
||||
.shadow-box-mini {
|
||||
box-shadow: 1px 1px 3px var(--mask);
|
||||
}
|
||||
|
||||
.shadow-box {
|
||||
box-shadow: 0 1px 20px -6px var(--borderColor);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.shadow-box:hover {
|
||||
box-shadow: 0 5px 10px 5px var(--borderHoverColor);
|
||||
}
|
||||
|
||||
/* el弹出框样式 */
|
||||
.el-message {
|
||||
top: 80px !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.el-message * {
|
||||
color: var(--white) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-message--success {
|
||||
background: var(--themeBackground);
|
||||
}
|
||||
|
||||
.el-message--warning {
|
||||
background: var(--gradientBG);
|
||||
}
|
||||
|
||||
.el-message--error {
|
||||
background: var(--gradualRed);
|
||||
}
|
||||
|
||||
/* 看板娘 */
|
||||
#waifu-toggle, #waifu {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#waifu-tips {
|
||||
border: unset;
|
||||
animation: unset;
|
||||
width: 200px;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
#waifu-tool {
|
||||
right: -10px;
|
||||
bottom: 20px;
|
||||
top: unset;
|
||||
}
|
||||
|
||||
#waifu #live2d {
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
/* 图标旋转 */
|
||||
.iconRotate {
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
/* 树洞留言 */
|
||||
.baberrage-item .baberrage-msg {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.baberrage-item .normal .baberrage-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
.el-upload.el-upload--picture {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100% !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.toolbarDrawer {
|
||||
position: relative;
|
||||
background: var(--toolbar) center center / cover no-repeat;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.toolbarDrawer .el-drawer__header {
|
||||
font-size: 22px;
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbarDrawer::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--mask);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.small-menu {
|
||||
color: var(--white);
|
||||
font-size: 20px;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.small-menu > li {
|
||||
list-style: none;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[ks-tag] {
|
||||
position: relative
|
||||
}
|
||||
|
||||
[ks-tag]:before,[ks-tag]:after {
|
||||
position: absolute;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
[ks-tag]:before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: opacity .3s;
|
||||
border: .5rem solid transparent
|
||||
}
|
||||
|
||||
[ks-tag~=top]:before {
|
||||
bottom: 100%;
|
||||
border-top-color: rgba(0,0,0,.7)
|
||||
}
|
||||
|
||||
[ks-tag~=bottom]:before {
|
||||
top: 100%;
|
||||
border-bottom-color: aliceblue;
|
||||
}
|
||||
|
||||
[ks-tag~=top]:before,[ks-tag~=bottom]:before {
|
||||
left: 50%;
|
||||
transform: translateX(-50%)
|
||||
}
|
||||
|
||||
[ks-tag=left]:before {
|
||||
right: 100%;
|
||||
border-left-color: rgba(0,0,0,.7)
|
||||
}
|
||||
|
||||
[ks-tag=right]:before {
|
||||
left: 100%;
|
||||
border-right-color: rgba(0,0,0,.7)
|
||||
}
|
||||
|
||||
[ks-tag=left]:before,[ks-tag=right]:before {
|
||||
top: 50%;
|
||||
transform: translateY(-50%)
|
||||
}
|
||||
|
||||
[ks-tag~=top]:after {
|
||||
bottom: 100%;
|
||||
margin-bottom: 1rem
|
||||
}
|
||||
|
||||
[ks-tag~=bottom]:after {
|
||||
top: 100%;
|
||||
margin-top: 1rem
|
||||
}
|
||||
|
||||
[ks-tag=top]:after,[ks-tag=bottom]:after {
|
||||
left: 50%;
|
||||
transform: translateX(-50%)
|
||||
}
|
||||
|
||||
[ks-tag=left]:after {
|
||||
right: 100%;
|
||||
margin-right: 1rem
|
||||
}
|
||||
|
||||
[ks-tag=right]:after {
|
||||
left: 100%;
|
||||
margin-left: 1rem
|
||||
}
|
||||
|
||||
[ks-tag=left]:after,[ks-tag=right]:after {
|
||||
top: 50%;
|
||||
transform: translateY(-50%)
|
||||
}
|
||||
|
||||
[ks-tag~=left][ks-tag~=top]:after,[ks-tag~=left][ks-tag~=bottom]:after {
|
||||
right: 0;
|
||||
min-width: 4em
|
||||
}
|
||||
|
||||
[ks-tag~=right][ks-tag~=top]:after,[ks-tag~=right][ks-tag~=bottom]:after {
|
||||
left: 0;
|
||||
min-width: 4em
|
||||
}
|
||||
|
||||
[ks-text]:hover:before,[ks-text]:hover:after {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
[ks-text]:after {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
font-size: .85rem;
|
||||
white-space: nowrap;
|
||||
border-radius: .5rem;
|
||||
padding: .25rem .5rem;
|
||||
content: attr(ks-text);
|
||||
transition: opacity .3s;
|
||||
background: rgba(0,0,0,.7)
|
||||
}
|
||||
.mceTmpl,tinytemplate{
|
||||
position:relative;
|
||||
user-select: none;
|
||||
display: block;
|
||||
}
|
||||
.check_label{
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
opacity: 1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--background) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hideContext{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
max-height:160px;
|
||||
min-height: 100px;
|
||||
overflow: hidden;
|
||||
transition:.3s;
|
||||
}
|
||||
.check_label::after{
|
||||
content: '显示内容';
|
||||
letter-spacing: .3em;
|
||||
height: 1.2em;
|
||||
background: #0000000a;
|
||||
line-height: 1.2em;
|
||||
bottom: 0px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #333;
|
||||
font-size: .8em;
|
||||
color: #fff;
|
||||
padding: 8px 14px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 2px 2px rgb(0 0 0 / 20%);
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.check_label:hover::after{
|
||||
font-weight:550;
|
||||
color:#FFF;
|
||||
background: #000;
|
||||
opacity: 1 !important;
|
||||
transition:.3s;
|
||||
}
|
||||
.hideCheckInput{
|
||||
display: none;
|
||||
}
|
||||
.hideCheckInput:checked ~ .check_label{
|
||||
transition: .3s;
|
||||
background-image: none;
|
||||
}
|
||||
.hideCheckInput:checked ~ .hideContext {
|
||||
min-height: 300px;
|
||||
max-height: unset;
|
||||
transition: .3s;
|
||||
}
|
||||
.hideCheckInput:checked ~ .check_label::after{
|
||||
content: '隐藏内容';
|
||||
transition: 2s ease .5s;
|
||||
opacity: 0;
|
||||
}
|
||||
.hideCheckInput:checked ~ .check_label:hover::after{
|
||||
background: #000 !important;
|
||||
animation:none;
|
||||
transition: .4s !important;
|
||||
}
|
||||
|
||||
.print{
|
||||
width:1000px;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
-webkit-animation: dy 3s steps(60, end) infinite;
|
||||
animation: dy 3s steps(50, end) infinite;
|
||||
}
|
||||
.spanFeather {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@supports (-webkit-mask-image: inherit) or (mask-image: inherit) {
|
||||
.spanFeather {
|
||||
text-overflow: clip;
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 1) calc(100% - 2em),
|
||||
transparent
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 1) calc(100% - 2em),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes dy{
|
||||
from { width: 0;}
|
||||
}
|
||||
@keyframes dy{
|
||||
from { width: 0;}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
.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>
|
||||
<div class="poem-container myCenter my-animation-hideToShow"
|
||||
v-if="!$common.isEmpty(guShi.origin) || !$common.isEmpty(hitokoto.hitokoto)">
|
||||
<!-- 背景图片 -->
|
||||
<el-image class="my-el-image poem-image "
|
||||
style="position: absolute;margin-top: -50px"
|
||||
v-once
|
||||
:src="$constant.random_backImage_miaomc+Math.floor(Math.random()*100)"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot"></div>
|
||||
</el-image>
|
||||
<div class="poem-wrap">
|
||||
<div><span>{{isHitokoto?hitokoto.from:guShi.origin}}</span></div>
|
||||
<p class="poem">{{isHitokoto?hitokoto.hitokoto:guShi.content}}</p>
|
||||
<p class="info" v-if="!isHitokoto || (isHitokoto && !$common.isEmpty(hitokoto.from_who))">
|
||||
{{isHitokoto?hitokoto.from_who:guShi.author}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
isHitokoto: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
guShi: {
|
||||
"content": "...",
|
||||
"origin": "...",
|
||||
"author": "...",
|
||||
"category": "..."
|
||||
},
|
||||
hitokoto: {
|
||||
"hitokoto": "...",
|
||||
"from": "...",
|
||||
"from_who": "..."
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.isHitokoto) {
|
||||
this.getHitokoto();
|
||||
} else {
|
||||
this.getGuShi();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getGuShi() {
|
||||
let that = this;
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('get', this.$constant.jinrishici);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
that.guShi = JSON.parse(xhr.responseText);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
},
|
||||
getHitokoto() {
|
||||
let that = this;
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('get', this.$constant.hitokoto);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
that.hitokoto = JSON.parse(xhr.responseText);
|
||||
}
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.poem-container {
|
||||
padding: 90px 0 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.poem-wrap {
|
||||
border-radius: 10px;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
letter-spacing: 4px;
|
||||
font-weight: 300;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.poem-wrap div span {
|
||||
padding: 5px 40px;
|
||||
color: var(--white);
|
||||
font-size: 1.8em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.poem-wrap p {
|
||||
width: 70%;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.poem-wrap p.poem {
|
||||
margin: 40px auto;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.poem-wrap p.info {
|
||||
margin: 20px auto;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="poem-container myCenter my-animation-hideToShow"
|
||||
v-if="!$common.isEmpty(guShi.origin) || !$common.isEmpty(hitokoto.hitokoto)">
|
||||
<!-- 背景图片 -->
|
||||
<el-image class="my-el-image poem-image "
|
||||
style="position: absolute;margin-top: -50px"
|
||||
v-once
|
||||
:src="$constant.random_backImage_miaomc+'?id='+Math.floor(Math.random()*100)"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot"></div>
|
||||
</el-image>
|
||||
<div class="poem-wrap">
|
||||
<div><span>{{isHitokoto?hitokoto.from:guShi.origin}}</span></div>
|
||||
<p class="poem">{{isHitokoto?hitokoto.hitokoto:guShi.content}}</p>
|
||||
<p class="info" v-if="!isHitokoto || (isHitokoto && !$common.isEmpty(hitokoto.from_who))">
|
||||
{{isHitokoto?hitokoto.from_who:guShi.author}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
isHitokoto: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
guShi: {
|
||||
"content": "...",
|
||||
"origin": "...",
|
||||
"author": "...",
|
||||
"category": "..."
|
||||
},
|
||||
hitokoto: {
|
||||
"hitokoto": "...",
|
||||
"from": "...",
|
||||
"from_who": "..."
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.isHitokoto) {
|
||||
this.getHitokoto();
|
||||
} else {
|
||||
this.getGuShi();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getGuShi() {
|
||||
let that = this;
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('get', this.$constant.jinrishici);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
that.guShi = JSON.parse(xhr.responseText);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
},
|
||||
getHitokoto() {
|
||||
let that = this;
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('get', this.$constant.hitokoto);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
that.hitokoto = JSON.parse(xhr.responseText);
|
||||
}
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.poem-container {
|
||||
padding: 90px 0 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.poem-wrap {
|
||||
border-radius: 10px;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
letter-spacing: 4px;
|
||||
font-weight: 300;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.poem-wrap div span {
|
||||
padding: 5px 40px;
|
||||
color: var(--white);
|
||||
font-size: 1.8em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.poem-wrap p {
|
||||
width: 70%;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.poem-wrap p.poem {
|
||||
margin: 40px auto;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.poem-wrap p.info {
|
||||
margin: 20px auto;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,411 +1,410 @@
|
||||
<template>
|
||||
<div>
|
||||
<loader :loading="loading">
|
||||
<!-- 加载页面 -->
|
||||
<template slot="loader">
|
||||
<div>
|
||||
<zombie></zombie>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 内容页面 -->
|
||||
<template slot="body">
|
||||
<!-- 首页图片 -->
|
||||
<el-image style="animation: header-effect 2s"
|
||||
class="background-image"
|
||||
v-once
|
||||
:src="!$common.isEmpty($store.state.webInfo.backgroundImage)?$store.state.webInfo.backgroundImage:$constant.random_image+new Date()+Math.floor(Math.random()*10)"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot background-image-error"></div>
|
||||
</el-image>
|
||||
<!-- 首页文字 -->
|
||||
<div class="signature-wall myCenter my-animation-hideToShow">
|
||||
<h1 class="playful">
|
||||
<span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{a}}</span>
|
||||
</h1>
|
||||
<div class="printer" @click="getGuShi()">
|
||||
<printer :printerInfo="printerInfo">
|
||||
<template slot="paper" slot-scope="scope">
|
||||
<h3>
|
||||
{{ scope.content }}<span class="cursor">|</span>
|
||||
</h3>
|
||||
</template>
|
||||
</printer>
|
||||
</div>
|
||||
<div id="bannerWave1"></div>
|
||||
<div id="bannerWave2"></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="aside-content" v-if="showAside">
|
||||
<myAside class="aside-content-myAside"></myAside>
|
||||
</div>
|
||||
<div class="recent-posts">
|
||||
<div class="announcement background-opacity">
|
||||
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
||||
<div>
|
||||
<div v-for="(notice, index) in $store.state.webInfo.notices" :key="index">
|
||||
{{ notice }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<articleList :articleList="articles"></articleList>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 页脚 -->
|
||||
<div style="background: var(--background)">
|
||||
<myFooter></myFooter>
|
||||
</div>
|
||||
</template>
|
||||
</loader>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const loader = () => import( "./common/loader");
|
||||
const zombie = () => import( "./common/zombie");
|
||||
const printer = () => import( "./common/printer");
|
||||
const articleList = () => import( "./articleList");
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
const myAside = () => import( "./myAside");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
loader,
|
||||
zombie,
|
||||
printer,
|
||||
articleList,
|
||||
myFooter,
|
||||
myAside
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
showAside: true,
|
||||
printerInfo: "你看对面的青山多漂亮",
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: "玩客云"
|
||||
},
|
||||
guShi: {
|
||||
"content": "",
|
||||
"origin": "",
|
||||
"author": "",
|
||||
"category": ""
|
||||
},
|
||||
articles: []
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getGuShi();
|
||||
// this.getArticles();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// this.$store.commit("changePlaylist", 7463646845)
|
||||
},
|
||||
watch: {
|
||||
// 监视搜索词变化
|
||||
"$route.query.searchKey": {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.articles = [];
|
||||
this.pagination.searchKey = this.$route.query.searchKey;
|
||||
this.getArticles();
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
pageArticles() {
|
||||
this.pagination.current = this.pagination.current + 1;
|
||||
this.getArticles();
|
||||
},
|
||||
|
||||
getArticles() {
|
||||
this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.articles = this.articles.concat(res.data.records);
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
navigation(selector) {
|
||||
let pageId = document.querySelector(selector);
|
||||
window.scrollTo({
|
||||
top: pageId.offsetTop,
|
||||
behavior: "smooth"
|
||||
});
|
||||
},
|
||||
getGuShi() {
|
||||
let that = this;
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('get', this.$constant.jinrishici);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
that.guShi = JSON.parse(xhr.responseText);
|
||||
that.printerInfo = that.guShi.content;
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.signature-wall {
|
||||
/* 向下排列 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.playful {
|
||||
color: var(--white);
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/*.playful span {*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #e485f8;*/
|
||||
/* animation: scatter 1.75s infinite;*/
|
||||
/* font-weight: normal;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(2n) {*/
|
||||
/* color: #ed625c;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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:nth-child(3n) {*/
|
||||
/* color: #ffd913;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #6ec0a9;*/
|
||||
/* animation-delay: 0.15s;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(5n) {*/
|
||||
/* color: #555bff;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #e485f8;*/
|
||||
/* animation-delay: 0.4s;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(7n) {*/
|
||||
/* color: #ff9c55;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #ff5555;*/
|
||||
/* animation-delay: 0.25s;*/
|
||||
/*}*/
|
||||
|
||||
.printer {
|
||||
cursor: pointer;
|
||||
color: var(--white);
|
||||
background: var(--translucent);
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#bannerWave1 {
|
||||
height: 84px;
|
||||
background: var(--bannerWave1);
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
animation: gradientBG 120s linear infinite;
|
||||
}
|
||||
|
||||
#bannerWave2 {
|
||||
height: 100px;
|
||||
background: var(--bannerWave2);
|
||||
position: absolute;
|
||||
width: 400%;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
animation: gradientBG 120s linear infinite;
|
||||
}
|
||||
|
||||
/* 光标 */
|
||||
.cursor {
|
||||
margin-left: 1px;
|
||||
animation: hideToShow 0.7s infinite;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.el-icon-arrow-down {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: var(--white);
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
animation: my-shake 1.5s ease-out infinite;
|
||||
z-index: 15;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-container-wrap {
|
||||
background: var(--background);
|
||||
position: relative;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
max-width: 1280px;
|
||||
padding: 0 20px 40px 20px;
|
||||
margin: 0 auto;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.recent-posts {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.announcement {
|
||||
padding: 22px;
|
||||
border: 1px dashed var(--lightGray);
|
||||
color: var(--greyFont);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
max-width: 780px;
|
||||
margin: 40px auto 40px;
|
||||
}
|
||||
|
||||
.announcement i {
|
||||
color: var(--themeBackground);
|
||||
font-size: 22px;
|
||||
margin: auto 0;
|
||||
animation: scale 0.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.announcement div div {
|
||||
margin-left: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.aside-content {
|
||||
width: calc(30% - 40px);
|
||||
user-select: none;
|
||||
margin-top: 40px;
|
||||
margin-right: 40px;
|
||||
max-width: 300px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 13px 15px;
|
||||
border: 1px solid var(--lightGray);
|
||||
border-radius: 3rem;
|
||||
color: var(--greyFont);
|
||||
width: 100px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.aside-content-myAside{
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
}
|
||||
.pagination:hover {
|
||||
border: 1px solid var(--themeBackground);
|
||||
color: var(--themeBackground);
|
||||
box-shadow: 0 0 5px var(--themeBackground);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
.recent-posts {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@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>
|
||||
<template>
|
||||
<div>
|
||||
<loader :loading="loading">
|
||||
<!-- 加载页面 -->
|
||||
<template slot="loader">
|
||||
<div>
|
||||
<zombie></zombie>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 内容页面 -->
|
||||
<template slot="body">
|
||||
<!-- 首页图片 -->
|
||||
<el-image style="animation: header-effect 2s"
|
||||
class="background-image"
|
||||
:src="$store.state.webInfo.backgroundImage?$store.state.webInfo.backgroundImage:$constant.two_poem_image[0]"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot background-image-error"></div>
|
||||
</el-image>
|
||||
<!-- 首页文字 -->
|
||||
<div class="signature-wall myCenter my-animation-hideToShow">
|
||||
<h1 class="playful">
|
||||
<span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{a}}</span>
|
||||
</h1>
|
||||
<div class="printer" @click="getGuShi()">
|
||||
<printer :printerInfo="printerInfo">
|
||||
<template slot="paper" slot-scope="scope">
|
||||
<h3>
|
||||
{{ scope.content }}<span class="cursor">|</span>
|
||||
</h3>
|
||||
</template>
|
||||
</printer>
|
||||
</div>
|
||||
<div id="bannerWave1"></div>
|
||||
<div id="bannerWave2"></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="aside-content" v-if="showAside">
|
||||
<myAside class="aside-content-myAside"></myAside>
|
||||
</div>
|
||||
<div class="recent-posts">
|
||||
<div class="announcement background-opacity">
|
||||
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
||||
<div>
|
||||
<div v-for="(notice, index) in $store.state.webInfo.notices" :key="index">
|
||||
{{ notice }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<articleList :articleList="articles"></articleList>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 页脚 -->
|
||||
<div style="background: var(--background)">
|
||||
<myFooter></myFooter>
|
||||
</div>
|
||||
</template>
|
||||
</loader>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const loader = () => import( "./common/loader");
|
||||
const zombie = () => import( "./common/zombie");
|
||||
const printer = () => import( "./common/printer");
|
||||
const articleList = () => import( "./articleList");
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
const myAside = () => import( "./myAside");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
loader,
|
||||
zombie,
|
||||
printer,
|
||||
articleList,
|
||||
myFooter,
|
||||
myAside
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
showAside: true,
|
||||
printerInfo: "你看对面的青山多漂亮",
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: "玩客云"
|
||||
},
|
||||
guShi: {
|
||||
"content": "",
|
||||
"origin": "",
|
||||
"author": "",
|
||||
"category": ""
|
||||
},
|
||||
articles: []
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getGuShi();
|
||||
// this.getArticles();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
watch: {
|
||||
// 监视搜索词变化
|
||||
"$route.query.searchKey": {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.articles = [];
|
||||
this.pagination.searchKey = this.$route.query.searchKey;
|
||||
this.getArticles();
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
pageArticles() {
|
||||
this.pagination.current = this.pagination.current + 1;
|
||||
this.getArticles();
|
||||
},
|
||||
|
||||
getArticles() {
|
||||
this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.articles = this.articles.concat(res.data.records);
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
navigation(selector) {
|
||||
let pageId = document.querySelector(selector);
|
||||
window.scrollTo({
|
||||
top: pageId.offsetTop,
|
||||
behavior: "smooth"
|
||||
});
|
||||
},
|
||||
getGuShi() {
|
||||
let that = this;
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('get', this.$constant.jinrishici);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
that.guShi = JSON.parse(xhr.responseText);
|
||||
that.printerInfo = that.guShi.content;
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.signature-wall {
|
||||
/* 向下排列 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.playful {
|
||||
color: var(--white);
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/*.playful span {*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #e485f8;*/
|
||||
/* animation: scatter 1.75s infinite;*/
|
||||
/* font-weight: normal;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(2n) {*/
|
||||
/* color: #ed625c;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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:nth-child(3n) {*/
|
||||
/* color: #ffd913;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #6ec0a9;*/
|
||||
/* animation-delay: 0.15s;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(5n) {*/
|
||||
/* color: #555bff;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #e485f8;*/
|
||||
/* animation-delay: 0.4s;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(7n) {*/
|
||||
/* color: #ff9c55;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #ff5555;*/
|
||||
/* animation-delay: 0.25s;*/
|
||||
/*}*/
|
||||
|
||||
.printer {
|
||||
cursor: pointer;
|
||||
color: var(--white);
|
||||
background: var(--translucent);
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#bannerWave1 {
|
||||
height: 84px;
|
||||
background: var(--bannerWave1);
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
animation: gradientBG 120s linear infinite;
|
||||
}
|
||||
|
||||
#bannerWave2 {
|
||||
height: 100px;
|
||||
background: var(--bannerWave2);
|
||||
position: absolute;
|
||||
width: 400%;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
animation: gradientBG 120s linear infinite;
|
||||
}
|
||||
|
||||
/* 光标 */
|
||||
.cursor {
|
||||
margin-left: 1px;
|
||||
animation: hideToShow 0.7s infinite;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.el-icon-arrow-down {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: var(--white);
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
animation: my-shake 1.5s ease-out infinite;
|
||||
z-index: 15;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-container-wrap {
|
||||
background: var(--background);
|
||||
position: relative;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
max-width: 1280px;
|
||||
padding: 0 14px 40px 14px;
|
||||
margin: 0 auto;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.recent-posts {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.announcement {
|
||||
padding: 22px;
|
||||
border: 1px dashed var(--lightGray);
|
||||
color: var(--greyFont);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
max-width: 780px;
|
||||
margin: 40px auto 40px;
|
||||
}
|
||||
|
||||
.announcement i {
|
||||
color: var(--themeBackground);
|
||||
font-size: 22px;
|
||||
margin: auto 0;
|
||||
animation: scale 0.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.announcement div div {
|
||||
margin-left: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.aside-content {
|
||||
width: calc(30% - 40px);
|
||||
user-select: none;
|
||||
margin-top: 40px;
|
||||
margin-right: 40px;
|
||||
max-width: 300px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 13px 15px;
|
||||
border: 1px solid var(--lightGray);
|
||||
border-radius: 3rem;
|
||||
color: var(--greyFont);
|
||||
width: 100px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.aside-content-myAside{
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
}
|
||||
.pagination:hover {
|
||||
border: 1px solid var(--themeBackground);
|
||||
color: var(--themeBackground);
|
||||
box-shadow: 0 0 5px var(--themeBackground);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
.recent-posts {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@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,406 +1,429 @@
|
||||
<template>
|
||||
<div>
|
||||
<loader :loading="loading">
|
||||
<!-- 加载页面 -->
|
||||
<template slot="loader">
|
||||
<div>
|
||||
<zombie></zombie>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 内容页面 -->
|
||||
<template slot="body">
|
||||
<!-- 首页图片 -->
|
||||
<el-image style="animation: header-effect 2s"
|
||||
class="background-image"
|
||||
v-once
|
||||
:src="$constant.background.view_random"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot background-image-error"></div>
|
||||
</el-image>
|
||||
<!-- 首页文字 -->
|
||||
<div class="signature-wall myCenter my-animation-hideToShow">
|
||||
<h1 class="playful">
|
||||
<span v-for="(a, index) in '💎我的空间💎'" :key="index">{{a}}</span>
|
||||
</h1>
|
||||
<div class="printer" @click="getGuShi()">
|
||||
<printer :printerInfo="printerInfo">
|
||||
<template slot="paper" slot-scope="scope">
|
||||
<h3>
|
||||
{{ scope.content }}<span class="cursor">|</span>
|
||||
</h3>
|
||||
</template>
|
||||
</printer>
|
||||
</div>
|
||||
<div id="bannerWave1"></div>
|
||||
<div id="bannerWave2"></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="aside-content" v-if="showAside">
|
||||
<myAside class="aside-content-myAside"></myAside>
|
||||
</div>
|
||||
<div class="recent-posts" >
|
||||
<div class="announcement background-opacity">
|
||||
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
||||
<div>
|
||||
<div v-for="(notice, index) in $store.state.webInfo.notices" :key="index">
|
||||
{{ notice }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="pictureList">
|
||||
|
||||
<shuoshuo v-for="item in articles" :key="item" :source = "item"></shuoshuo>
|
||||
</div>
|
||||
<!-- -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 页脚 -->
|
||||
<div style="background: var(--background)">
|
||||
<myFooter></myFooter>
|
||||
</div>
|
||||
</template>
|
||||
</loader>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const loader = () => import( "./common/loader");
|
||||
const zombie = () => import( "./common/zombie");
|
||||
const printer = () => import( "./common/printer");
|
||||
const shuoshuo = () => import( "./common/shuoshuo");
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
const myAside = () => import( "./myAside");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
loader,
|
||||
zombie,
|
||||
printer,
|
||||
myFooter,
|
||||
shuoshuo,
|
||||
myAside
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
showAside: true,
|
||||
printerInfo: "你看对面的青山多漂亮",
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: ""
|
||||
},
|
||||
guShi: {
|
||||
"content": "",
|
||||
"origin": "",
|
||||
"author": "",
|
||||
"category": ""
|
||||
},
|
||||
articles: []
|
||||
};
|
||||
},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getGuShi();
|
||||
this.getArticles();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$store.commit("changePlaylist", 370417370);
|
||||
},
|
||||
|
||||
methods: {
|
||||
pageArticles() {
|
||||
this.pagination.current = this.pagination.current + 1;
|
||||
this.getArticles();
|
||||
},
|
||||
|
||||
getArticles() {
|
||||
this.$http.post(this.$constant.baseURL + "/diary/listArticle", this.pagination)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.articles = this.articles.concat(res.data.records);
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
navigation(selector) {
|
||||
let pageId = document.querySelector(selector);
|
||||
window.scrollTo({
|
||||
top: pageId.offsetTop,
|
||||
behavior: "smooth"
|
||||
});
|
||||
},
|
||||
getGuShi() {
|
||||
let that = this;
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('get', this.$constant.jinrishici);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
that.guShi = JSON.parse(xhr.responseText);
|
||||
that.printerInfo = that.guShi.content;
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.signature-wall {
|
||||
/* 向下排列 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.playful {
|
||||
color: var(--white);
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/*.playful span {*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #e485f8;*/
|
||||
/* animation: scatter 1.75s infinite;*/
|
||||
/* font-weight: normal;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(2n) {*/
|
||||
/* color: #ed625c;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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:nth-child(3n) {*/
|
||||
/* color: #ffd913;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #6ec0a9;*/
|
||||
/* animation-delay: 0.15s;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(5n) {*/
|
||||
/* color: #555bff;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #e485f8;*/
|
||||
/* animation-delay: 0.4s;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(7n) {*/
|
||||
/* color: #ff9c55;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #ff5555;*/
|
||||
/* animation-delay: 0.25s;*/
|
||||
/*}*/
|
||||
|
||||
.printer {
|
||||
cursor: pointer;
|
||||
color: var(--white);
|
||||
background: var(--translucent);
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#bannerWave1 {
|
||||
height: 84px;
|
||||
background: var(--bannerWave1);
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
animation: gradientBG 120s linear infinite;
|
||||
}
|
||||
|
||||
#bannerWave2 {
|
||||
height: 100px;
|
||||
background: var(--bannerWave2);
|
||||
position: absolute;
|
||||
width: 400%;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
animation: gradientBG 120s linear infinite;
|
||||
}
|
||||
|
||||
/* 光标 */
|
||||
.cursor {
|
||||
margin-left: 1px;
|
||||
animation: hideToShow 0.7s infinite;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.el-icon-arrow-down {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: var(--white);
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
animation: my-shake 1.5s ease-out infinite;
|
||||
z-index: 15;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-container-wrap {
|
||||
background: var(--background);
|
||||
position: relative;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
max-width: 1280px;
|
||||
padding: 0 20px 40px 20px;
|
||||
margin: 0 auto;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.recent-posts {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.announcement {
|
||||
padding: 22px;
|
||||
border: 1px dashed var(--lightGray);
|
||||
color: var(--greyFont);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
max-width: 780px;
|
||||
margin: 40px auto 40px;
|
||||
}
|
||||
|
||||
.announcement i {
|
||||
color: var(--themeBackground);
|
||||
font-size: 22px;
|
||||
margin: auto 0;
|
||||
animation: scale 0.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.announcement div div {
|
||||
margin-left: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.aside-content {
|
||||
width: calc(30% - 40px);
|
||||
user-select: none;
|
||||
margin-top: 40px;
|
||||
margin-right: 40px;
|
||||
max-width: 300px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 13px 15px;
|
||||
border: 1px solid var(--lightGray);
|
||||
border-radius: 3rem;
|
||||
color: var(--greyFont);
|
||||
width: 100px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.aside-content-myAside{
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
}
|
||||
.pagination:hover {
|
||||
border: 1px solid var(--themeBackground);
|
||||
color: var(--themeBackground);
|
||||
box-shadow: 0 0 5px var(--themeBackground);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
.recent-posts {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@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>
|
||||
<template>
|
||||
<div>
|
||||
<loader :loading="loading">
|
||||
<!-- 加载页面 -->
|
||||
<template slot="loader">
|
||||
<div>
|
||||
<zombie></zombie>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 内容页面 -->
|
||||
<template slot="body">
|
||||
<!-- 首页图片 -->
|
||||
<el-image style="animation: header-effect 2s"
|
||||
class="background-image"
|
||||
v-once
|
||||
:lazy='true'
|
||||
:src="$constant.background.bing_random"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot background-image-error"></div>
|
||||
</el-image>
|
||||
<!-- 首页文字 -->
|
||||
<div class="signature-wall myCenter my-animation-hideToShow">
|
||||
<h1 class="playful">
|
||||
<span v-for="(a, index) in '💎我的空间💎'" :key="index">{{a}}</span>
|
||||
</h1>
|
||||
<div class="printer" @click="getGuShi()">
|
||||
<printer :printerInfo="printerInfo">
|
||||
<template slot="paper" slot-scope="scope">
|
||||
<h3>
|
||||
{{ scope.content }}<span class="cursor">|</span>
|
||||
</h3>
|
||||
</template>
|
||||
</printer>
|
||||
</div>
|
||||
<div id="bannerWave1"></div>
|
||||
<div id="bannerWave2"></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="aside-content" v-if="showAside">
|
||||
<myAside class="aside-content-myAside"></myAside>
|
||||
</div>
|
||||
<div class="recent-posts" >
|
||||
<div class="announcement background-opacity">
|
||||
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
||||
<div>
|
||||
<div v-for="(notice, index) in $store.state.webInfo.notices" :key="index">
|
||||
{{ notice }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="pictureList">
|
||||
|
||||
<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>
|
||||
<div v-else style="user-select: none">
|
||||
~~到底啦~~
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 页脚 -->
|
||||
<div style="background: var(--background)">
|
||||
<myFooter></myFooter>
|
||||
</div>
|
||||
</template>
|
||||
</loader>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const loader = () => import( "./common/loader");
|
||||
const zombie = () => import( "./common/zombie");
|
||||
const printer = () => import( "./common/printer");
|
||||
const shuoshuo = () => import( "./common/shuoshuo");
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
const myAside = () => import( "./myAside");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
loader,
|
||||
zombie,
|
||||
printer,
|
||||
myFooter,
|
||||
shuoshuo,
|
||||
myAside
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
showAside: true,
|
||||
printerInfo: "你看对面的青山多漂亮",
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: ""
|
||||
},
|
||||
guShi: {
|
||||
"content": "",
|
||||
"origin": "",
|
||||
"author": "",
|
||||
"category": ""
|
||||
},
|
||||
articles: []
|
||||
};
|
||||
},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getGuShi();
|
||||
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||
this.$message({
|
||||
message: "登录后可查看更多",
|
||||
type: "warning"
|
||||
});
|
||||
}
|
||||
this.getArticles();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$store.commit("changePlaylist", 370417370);
|
||||
},
|
||||
|
||||
methods: {
|
||||
pageArticles() {
|
||||
this.pagination.current = this.pagination.current + 1;
|
||||
this.getArticles();
|
||||
},
|
||||
filterArticles(){
|
||||
//这里我显示所有文章
|
||||
return this.articles;
|
||||
if (this.$route.query.showAll)
|
||||
return this.articles;
|
||||
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);
|
||||
},
|
||||
getArticles() {
|
||||
this.$http.post(this.$constant.baseURL + "/diary/listArticle", this.pagination)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.articles = this.articles.concat(res.data.records);
|
||||
this.pagination.total = res.data.total;
|
||||
console.log(this.articles);
|
||||
let obj = [[],[]]
|
||||
this.articles.forEach(artcile => {
|
||||
let items = JSON.parse(artcile.articleItems)
|
||||
obj[0].push(...items[0])
|
||||
obj[1].push(...items[1])
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
navigation(selector) {
|
||||
let pageId = document.querySelector(selector);
|
||||
window.scrollTo({
|
||||
top: pageId.offsetTop,
|
||||
behavior: "smooth"
|
||||
});
|
||||
},
|
||||
getGuShi() {
|
||||
let that = this;
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('get', this.$constant.jinrishici);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
that.guShi = JSON.parse(xhr.responseText);
|
||||
that.printerInfo = that.guShi.content;
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.signature-wall {
|
||||
/* 向下排列 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.playful {
|
||||
color: var(--white);
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/*.playful span {*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #e485f8;*/
|
||||
/* animation: scatter 1.75s infinite;*/
|
||||
/* font-weight: normal;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(2n) {*/
|
||||
/* color: #ed625c;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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:nth-child(3n) {*/
|
||||
/* color: #ffd913;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #6ec0a9;*/
|
||||
/* animation-delay: 0.15s;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(5n) {*/
|
||||
/* color: #555bff;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #e485f8;*/
|
||||
/* animation-delay: 0.4s;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(7n) {*/
|
||||
/* color: #ff9c55;*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 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,*/
|
||||
/* 6px 6px #ff5555;*/
|
||||
/* animation-delay: 0.25s;*/
|
||||
/*}*/
|
||||
|
||||
.printer {
|
||||
cursor: pointer;
|
||||
color: var(--white);
|
||||
background: var(--translucent);
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#bannerWave1 {
|
||||
height: 84px;
|
||||
background: var(--bannerWave1);
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
animation: gradientBG 120s linear infinite;
|
||||
}
|
||||
|
||||
#bannerWave2 {
|
||||
height: 100px;
|
||||
background: var(--bannerWave2);
|
||||
position: absolute;
|
||||
width: 400%;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
animation: gradientBG 120s linear infinite;
|
||||
}
|
||||
|
||||
/* 光标 */
|
||||
.cursor {
|
||||
margin-left: 1px;
|
||||
animation: hideToShow 0.7s infinite;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.el-icon-arrow-down {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: var(--white);
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
animation: my-shake 1.5s ease-out infinite;
|
||||
z-index: 15;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-container-wrap {
|
||||
background: var(--background);
|
||||
position: relative;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
max-width: 1280px;
|
||||
padding: 0 20px 40px 20px;
|
||||
margin: 0 auto;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.recent-posts {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.announcement {
|
||||
padding: 22px;
|
||||
border: 1px dashed var(--lightGray);
|
||||
color: var(--greyFont);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
max-width: 780px;
|
||||
margin: 40px auto 40px;
|
||||
}
|
||||
|
||||
.announcement i {
|
||||
color: var(--themeBackground);
|
||||
font-size: 22px;
|
||||
margin: auto 0;
|
||||
animation: scale 0.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.announcement div div {
|
||||
margin-left: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.aside-content {
|
||||
width: calc(30% - 40px);
|
||||
user-select: none;
|
||||
margin-top: 40px;
|
||||
margin-right: 40px;
|
||||
max-width: 300px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 13px 15px;
|
||||
border: 1px solid var(--lightGray);
|
||||
border-radius: 3rem;
|
||||
color: var(--greyFont);
|
||||
width: 100px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.aside-content-myAside{
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
}
|
||||
.pagination:hover {
|
||||
border: 1px solid var(--themeBackground);
|
||||
color: var(--themeBackground);
|
||||
box-shadow: 0 0 5px var(--themeBackground);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
.recent-posts {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@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>
|
||||
<div>
|
||||
<!-- 搜索框 -->
|
||||
<div class="card-content0">
|
||||
<form @submit.prevent="goSearch()">
|
||||
<input type="text" v-model="searchKey" placeholder="搜索从这里开始...">
|
||||
<button type="submit"></button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- 网站信息 -->
|
||||
<div class="card-content1 shadow-box background-opacity">
|
||||
<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-info">
|
||||
<div class="blog-info-box">
|
||||
<span>文章</span>
|
||||
<span class="blog-info-num">{{ $store.getters.articleTotal }}</span>
|
||||
</div>
|
||||
<div class="blog-info-box">
|
||||
<span>分类</span>
|
||||
<span class="blog-info-num">{{ sortInfo.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<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="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="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="RSS订阅" ks-tag="top" href="" target="_blank"><i class="fa fa-rss" style="background-color: #ff9800"></i></a>
|
||||
</div>
|
||||
<a class="collection-btn" @click="showTip()">
|
||||
<i class="el-icon-star-off" style="margin-right: 2px"></i>朋友圈
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<!-- 分类 -->
|
||||
<div class="shadow-box background-opacity wow"
|
||||
style="padding: 25px 25px 5px;border-radius: 10px;animation: zoomIn 0.8s ease-in-out">
|
||||
<div class="card-content2-title">
|
||||
<i class="el-icon-folder-opened card-content2-icon"></i>
|
||||
<span>分类</span>
|
||||
</div>
|
||||
<div v-for="(sort, index) in sortInfo"
|
||||
:key="index"
|
||||
class="post-sort"
|
||||
@click="$router.push({path: '/sort', query: {sortId: sort.id}})">
|
||||
<div>
|
||||
<span v-for="(s, i) in sort.sortName.split('')" :key="i">{{ s }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 推荐文章 -->
|
||||
<div v-if="!$common.isEmpty(recommendArticles)"
|
||||
style="padding: 25px;border-radius: 10px;margin-top: 40px;animation: zoomIn 0.8s ease-in-out"
|
||||
class="shadow-box background-opacity wow">
|
||||
<div class="card-content2-title">
|
||||
<i class="el-icon-reading card-content2-icon"></i>
|
||||
<span>推荐文章</span>
|
||||
</div>
|
||||
<div v-for="(article, index) in recommendArticles"
|
||||
:key="index"
|
||||
@click="$router.push({path: '/article', query: {id: article.id}})">
|
||||
<div class="aside-post-detail">
|
||||
<div class="aside-post-image">
|
||||
<el-image class="my-el-image" :src="article.articleCover" fit="cover">
|
||||
<div slot="error" class="image-slot">
|
||||
<div class="error-aside-image">
|
||||
{{article.username}}
|
||||
</div>
|
||||
</div>
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="aside-post-title">
|
||||
{{ article.articleTitle }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="aside-post-date">
|
||||
<i class="el-icon-date" style="color: var(--greyFont)"></i>{{ article.createTime }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {navigation} from '../utils/tools.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 5,
|
||||
recommendStatus: true
|
||||
},
|
||||
searchKey:"",
|
||||
recommendArticles: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
webInfo() {
|
||||
return this.$store.state.webInfo;
|
||||
},
|
||||
sortInfo() {
|
||||
return this.$store.state.sortInfo;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getRecommendArticles();
|
||||
},
|
||||
methods: {
|
||||
getRecommendArticles() {
|
||||
this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.recommendArticles = res.data.records;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
showTip() {
|
||||
this.$router.push({path: '/weiYan'});
|
||||
},
|
||||
goSearch(){
|
||||
this.$router.push({query: {searchKey:this.searchKey}})
|
||||
this.$nextTick(()=>{
|
||||
this.navigation('.page-container-wrap');
|
||||
})
|
||||
},
|
||||
navigation(selector) {
|
||||
let pageId = document.querySelector(selector);
|
||||
window.scrollTo({
|
||||
top: pageId.offsetTop,
|
||||
behavior: "smooth"
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-content0{
|
||||
}
|
||||
.card-content0 {
|
||||
transition: .3s;
|
||||
background-color: var(--background);
|
||||
}
|
||||
.card-content0 input {
|
||||
transition: .3s;
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
padding-left: 10px;
|
||||
background-color: var(--background);
|
||||
border: 2px solid #7BA7AB;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
color: var(--fontColor);
|
||||
}
|
||||
.card-content0 button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border: none;
|
||||
background: #7BA7AB;
|
||||
border-radius: 0 5px 5px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.card-content0 button:before {
|
||||
transition: .3s;
|
||||
content: "\f002";
|
||||
font-family: FontAwesome;
|
||||
font-size: 16px;
|
||||
color: var(--fontColor);
|
||||
}
|
||||
.card-content1 {
|
||||
background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 10s ease infinite;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
/*color: var(--white);*/
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-content1 :not(:first-child) {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.web-name {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.web-info {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.blog-info-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.blog-info-num {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.more-cannal {
|
||||
justify-content: space-around;
|
||||
display: flex;
|
||||
width: 80%;
|
||||
margin-top:12px ;
|
||||
}
|
||||
.more-cannal svg, .more-cannal i{
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
width: 2em;
|
||||
padding: .5em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
.collection-btn {
|
||||
position: relative;
|
||||
margin-top: 12px;
|
||||
background: var(--lightGreen);
|
||||
cursor: pointer;
|
||||
width: 65%;
|
||||
height: 35px;
|
||||
border-radius: 1rem;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
color: var(--white);
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.collection-btn::before {
|
||||
background: var(--gradualRed);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
transform: scaleX(0);
|
||||
transform-origin: 0;
|
||||
transition: transform 0.5s ease-out;
|
||||
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
|
||||
border-radius: 1rem;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.collection-btn:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.card-content2-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-content2-icon {
|
||||
color: var(--red);
|
||||
margin-right: 5px;
|
||||
animation: scale 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.aside-post-detail {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aside-post-image {
|
||||
width: 40%;
|
||||
border-radius: 0.2rem;
|
||||
margin-right: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.error-aside-image {
|
||||
background: var(--themeBackground);
|
||||
color: var(--white);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.aside-post-title {
|
||||
width: 60%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aside-post-date {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 20px;
|
||||
color: var(--greyFont);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.post-sort {
|
||||
border-radius: 1rem;
|
||||
margin-bottom: 15px;
|
||||
line-height: 30px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.post-sort:hover {
|
||||
background: var(--themeBackground);
|
||||
padding: 2px 15px;
|
||||
cursor: pointer;
|
||||
color: var(--white);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索框 -->
|
||||
<div class="card-content0">
|
||||
<form @submit.prevent="goSearch()">
|
||||
<input type="text" v-model="searchKey" placeholder="搜索从这里开始...">
|
||||
<button type="submit"></button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- 网站信息 -->
|
||||
<div class="card-content1 shadow-box background-opacity">
|
||||
<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-info">
|
||||
<div class="blog-info-box">
|
||||
<span>文章</span>
|
||||
<span class="blog-info-num">{{ $store.getters.articleTotal }}</span>
|
||||
</div>
|
||||
<div class="blog-info-box">
|
||||
<span>分类</span>
|
||||
<span class="blog-info-num">{{ sortInfo.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<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="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="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="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>
|
||||
</div>
|
||||
<a class="collection-btn" @click="$router.push({path: '/izone'});">
|
||||
<i class="el-icon-star-off" style="margin-right: 2px"></i>个人空间
|
||||
</a>
|
||||
<a class="collection-btn" @click="$router.push({path: '/album',query:{type:'dynamic'}});">
|
||||
<i class="el-icon-star-off" style="margin-right: 2px"></i>动态相册
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<!-- 分类 -->
|
||||
<div class="shadow-box background-opacity wow"
|
||||
style="padding: 25px 25px 5px;border-radius: 10px;animation: zoomIn 0.8s ease-in-out">
|
||||
<div class="card-content2-title">
|
||||
<i class="el-icon-folder-opened card-content2-icon"></i>
|
||||
<span>分类</span>
|
||||
</div>
|
||||
<div v-for="(sort, index) in sortInfo"
|
||||
:key="index"
|
||||
class="post-sort"
|
||||
@click="$router.push({path: '/sort', query: {sortId: sort.id}})">
|
||||
<div>
|
||||
<span v-for="(s, i) in sort.sortName.split('')" :key="i">{{ s }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 推荐文章 -->
|
||||
<div v-if="!$common.isEmpty(recommendArticles)"
|
||||
style="padding: 25px;border-radius: 10px;margin-top: 40px;animation: zoomIn 0.8s ease-in-out"
|
||||
class="shadow-box background-opacity wow">
|
||||
<div class="card-content2-title">
|
||||
<i class="el-icon-reading card-content2-icon"></i>
|
||||
<span>推荐文章</span>
|
||||
</div>
|
||||
<div v-for="(article, index) in recommendArticles"
|
||||
:key="index"
|
||||
@click="$router.push({path: '/article', query: {id: article.id}})">
|
||||
<div class="aside-post-detail">
|
||||
<div class="aside-post-image">
|
||||
<el-image class="my-el-image" :src="article.articleCover" fit="cover">
|
||||
<div slot="error" class="image-slot">
|
||||
<div class="error-aside-image">
|
||||
{{article.username}}
|
||||
</div>
|
||||
</div>
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="aside-post-title">
|
||||
{{ article.articleTitle }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="aside-post-date">
|
||||
<i class="el-icon-date" style="color: var(--greyFont)"></i>{{ article.createTime }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {navigation} from '../utils/tools.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 5,
|
||||
recommendStatus: true
|
||||
},
|
||||
searchKey:"",
|
||||
recommendArticles: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
webInfo() {
|
||||
return this.$store.state.webInfo;
|
||||
},
|
||||
sortInfo() {
|
||||
return this.$store.state.sortInfo;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getRecommendArticles();
|
||||
},
|
||||
methods: {
|
||||
getRecommendArticles() {
|
||||
this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.recommendArticles = res.data.records;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
showTip() {
|
||||
this.$router.push({path: '/weiYan'});
|
||||
},
|
||||
goSearch(){
|
||||
this.$router.push({query: {searchKey:this.searchKey}})
|
||||
this.$nextTick(()=>{
|
||||
this.navigation('.page-container-wrap');
|
||||
})
|
||||
},
|
||||
navigation(selector) {
|
||||
let pageId = document.querySelector(selector);
|
||||
window.scrollTo({
|
||||
top: pageId.offsetTop,
|
||||
behavior: "smooth"
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-content0{
|
||||
}
|
||||
.card-content0 {
|
||||
transition: .3s;
|
||||
background-color: var(--background);
|
||||
}
|
||||
.card-content0 input {
|
||||
transition: .3s;
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
padding-left: 10px;
|
||||
background-color: var(--background);
|
||||
border: 2px solid #7BA7AB;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
color: var(--fontColor);
|
||||
}
|
||||
.card-content0 button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border: none;
|
||||
background: #7BA7AB;
|
||||
border-radius: 0 5px 5px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.card-content0 button:before {
|
||||
transition: .3s;
|
||||
content: "\f002";
|
||||
font-family: FontAwesome;
|
||||
font-size: 16px;
|
||||
color: var(--fontColor);
|
||||
}
|
||||
.card-content1 {
|
||||
background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 10s ease infinite;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
/*color: var(--white);*/
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-content1 :not(:first-child) {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.web-name {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.web-info {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.blog-info-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.blog-info-num {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.more-cannal {
|
||||
justify-content: space-around;
|
||||
display: flex;
|
||||
width: 80%;
|
||||
margin-top:12px ;
|
||||
}
|
||||
.more-cannal svg, .more-cannal i{
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
width: 2em;
|
||||
padding: .5em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
.collection-btn {
|
||||
position: relative;
|
||||
margin-top: 12px;
|
||||
background: var(--lightGreen);
|
||||
cursor: pointer;
|
||||
width: 65%;
|
||||
height: 35px;
|
||||
border-radius: 1rem;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
color: var(--white);
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.collection-btn:last-child{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.collection-btn::before {
|
||||
background: var(--gradualRed);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
transform: scaleX(0);
|
||||
transform-origin: 0;
|
||||
transition: transform 0.5s ease-out;
|
||||
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
|
||||
border-radius: 1rem;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.collection-btn:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.card-content2-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-content2-icon {
|
||||
color: var(--red);
|
||||
margin-right: 5px;
|
||||
animation: scale 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.aside-post-detail {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aside-post-image {
|
||||
width: 40%;
|
||||
border-radius: 0.2rem;
|
||||
margin-right: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.error-aside-image {
|
||||
background: var(--themeBackground);
|
||||
color: var(--white);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.aside-post-title {
|
||||
width: 60%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aside-post-date {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 20px;
|
||||
color: var(--greyFont);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.post-sort {
|
||||
border-radius: 1rem;
|
||||
margin-bottom: 15px;
|
||||
line-height: 30px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.post-sort:hover {
|
||||
background: var(--themeBackground);
|
||||
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 App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import ElementUI from 'element-ui'
|
||||
import http from './utils/request'
|
||||
import common from './utils/common'
|
||||
import constant from './utils/constant'
|
||||
import mavonEditor from 'mavon-editor'
|
||||
//引入json配置
|
||||
import EMOJI from './assets/json/emoji.json'
|
||||
//引入js
|
||||
//import './utils/live2d'
|
||||
import './utils/title'
|
||||
//引入css
|
||||
import './assets/css/animation.css'
|
||||
import './assets/css/index.css'
|
||||
import './assets/css/tocbot.css'
|
||||
import './assets/css/color.css'
|
||||
import './assets/css/markdown-highlight.css'
|
||||
import './assets/css/font-awesome.min.css'
|
||||
import 'mavon-editor/dist/css/index.css'
|
||||
//点击涟漪效果
|
||||
import Ripple from 'vue-ripple-directive'
|
||||
import {vueBaberrage} from 'vue-baberrage'
|
||||
|
||||
Ripple.color = 'var(--rippleColor)'
|
||||
Vue.directive("ripple", Ripple)
|
||||
|
||||
Vue.use(ElementUI)
|
||||
Vue.use(vueBaberrage)
|
||||
Vue.use(mavonEditor)
|
||||
Vue.use(store)
|
||||
Vue.prototype.EMOJI = EMOJI
|
||||
|
||||
Vue.prototype.$http = http
|
||||
Vue.prototype.$common = common
|
||||
Vue.prototype.$constant = constant
|
||||
Vue.config.productionTip = false
|
||||
top.faceReg = common.faceReg;
|
||||
|
||||
// import 'viewerjs/dist/viewer.css'
|
||||
// import VueViewer from 'v-viewer'
|
||||
// Vue.use(VueViewer)
|
||||
|
||||
const app = new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
||||
Vue.prototype.ipData = {}
|
||||
fetch("//ip-api.com/json/?lang=zh-CN").then((e=>e.json())).then((e=>{
|
||||
let a = JSON.stringify(e);
|
||||
localStorage.setItem("ipData", a);
|
||||
Vue.prototype.ipData = e;
|
||||
Vue.prototype.$message({
|
||||
type: 'success',
|
||||
message: `欢迎IP:${e.query},来自${e.country}${e.regionName}${e.city}的朋友！`
|
||||
});
|
||||
}))
|
||||
|
||||
console.log('%c hello world! \n Print by Roginshin. ',
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import ElementUI from 'element-ui'
|
||||
import http from './utils/request'
|
||||
import common from './utils/common'
|
||||
import constant from './utils/constant'
|
||||
import mavonEditor from 'mavon-editor'
|
||||
//引入json配置
|
||||
import EMOJI from './assets/json/emoji.json'
|
||||
//引入js
|
||||
// import './utils/live2d'
|
||||
import './utils/title'
|
||||
//引入css
|
||||
import './assets/css/animation.css'
|
||||
import './assets/css/index.css'
|
||||
import './assets/css/tocbot.css'
|
||||
import './assets/css/color.css'
|
||||
import './assets/css/markdown-highlight.css'
|
||||
import './assets/css/font-awesome.min.css'
|
||||
import 'mavon-editor/dist/css/index.css'
|
||||
//点击涟漪效果
|
||||
import Ripple from 'vue-ripple-directive'
|
||||
import {vueBaberrage} from 'vue-baberrage'
|
||||
import VueLazyload from 'vue-lazyload'
|
||||
Vue.use(VueLazyload, {
|
||||
lazyComponent: true,
|
||||
loading: 'https://mybox-1257251314.cos.ap-chengdu.myqcloud.com/load.gif'
|
||||
})
|
||||
Ripple.color = 'var(--rippleColor)'
|
||||
Vue.directive("ripple", Ripple)
|
||||
Vue.use(ElementUI)
|
||||
Vue.use(vueBaberrage)
|
||||
Vue.use(mavonEditor)
|
||||
Vue.use(store)
|
||||
Vue.prototype.EMOJI = EMOJI
|
||||
|
||||
Vue.prototype.$http = http
|
||||
Vue.prototype.$common = common
|
||||
Vue.prototype.$constant = constant
|
||||
Vue.config.productionTip = false
|
||||
top.faceReg = common.faceReg;
|
||||
|
||||
// import 'viewerjs/dist/viewer.css'
|
||||
// import VueViewer from 'v-viewer'
|
||||
// Vue.use(VueViewer)
|
||||
|
||||
const app = new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
||||
// Vue.prototype.ipData = {}
|
||||
// fetch("/getIp",{
|
||||
// mode: 'cors',
|
||||
// }).then((e=>e.json())).then((e=>{
|
||||
// let a = JSON.stringify(e);
|
||||
// localStorage.setItem("ipData", a);
|
||||
// Vue.prototype.ipData = e;
|
||||
// Vue.prototype.$message({
|
||||
// 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');
|
||||
@ -1,142 +1,150 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
const originalPush = VueRouter.prototype.push;
|
||||
VueRouter.prototype.push = function push(location) {
|
||||
return originalPush.call(this, location).catch(err => err);
|
||||
}
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('../components/home'),
|
||||
children: [{
|
||||
path: "/",
|
||||
name: "index",
|
||||
component: () => import('../components/index')
|
||||
}, {
|
||||
path: "/sort",
|
||||
name: "sort",
|
||||
component: () => import('../components/sort')
|
||||
}, {
|
||||
path: "/article",
|
||||
name: "article",
|
||||
component: () => import('../components/article')
|
||||
}, {
|
||||
path: "/weiYan",
|
||||
name: "weiYan",
|
||||
component: () => import('../components/weiYan')
|
||||
}, {
|
||||
path: "/message",
|
||||
name: "message",
|
||||
component: () => import('../components/message')
|
||||
}, {
|
||||
path: "/friend",
|
||||
name: "friend",
|
||||
component: () => import('../components/friend')
|
||||
},{
|
||||
path: "/bangumi",
|
||||
name: "bangumi",
|
||||
component: () => import('../components/bangumi')
|
||||
},{
|
||||
path: "/izone",
|
||||
name: "izone",
|
||||
component: () => import('../components/izone')
|
||||
}, {
|
||||
path: "/about",
|
||||
name: "about",
|
||||
component: () => import('../components/about')
|
||||
}, {
|
||||
path: "/user",
|
||||
name: "user",
|
||||
component: () => import('../components/user')
|
||||
}, {
|
||||
path: "/letter",
|
||||
name: "letter",
|
||||
component: () => import('../components/letter')
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
redirect: '/main',
|
||||
meta: {requiresAuth: true},
|
||||
component: () => import('../components/admin/admin'),
|
||||
children: [{
|
||||
path: '/main',
|
||||
name: 'main',
|
||||
component: () => import('../components/admin/main')
|
||||
}, {
|
||||
path: '/webEdit',
|
||||
name: 'webEdit',
|
||||
component: () => import('../components/admin/webEdit')
|
||||
}, {
|
||||
path: '/userList',
|
||||
name: 'userList',
|
||||
component: () => import('../components/admin/userList')
|
||||
}, {
|
||||
path: '/postList',
|
||||
name: 'postList',
|
||||
component: () => import('../components/admin/postList')
|
||||
}, {
|
||||
path: '/postShuoshuo',
|
||||
name: 'postShuoshuo',
|
||||
component: () => import('../components/admin/postShuoshuo')
|
||||
}, {
|
||||
path: '/postEdit',
|
||||
name: 'postEdit',
|
||||
component: () => import('../components/admin/postEdit')
|
||||
}, {
|
||||
path: '/sortList',
|
||||
name: 'sortList',
|
||||
component: () => import('../components/admin/sortList')
|
||||
}, {
|
||||
path: '/commentList',
|
||||
name: 'commentList',
|
||||
component: () => import('../components/admin/commentList')
|
||||
}, {
|
||||
path: '/treeHoleList',
|
||||
name: 'treeHoleList',
|
||||
component: () => import('../components/admin/treeHoleList')
|
||||
}, {
|
||||
path: '/resourceList',
|
||||
name: 'resourceList',
|
||||
component: () => import('../components/admin/resourceList')
|
||||
}, {
|
||||
path: '/resourcePathList',
|
||||
name: 'resourcePathList',
|
||||
component: () => import('../components/admin/resourcePathList')
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/verify',
|
||||
name: 'verify',
|
||||
component: () => import('../components/admin/verify')
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: "history",
|
||||
routes: routes,
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
return {x: 0, y: 0}
|
||||
}
|
||||
})
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.matched.some(record => record.meta.requiresAuth)) {
|
||||
if (!Boolean(localStorage.getItem("adminToken"))) {
|
||||
next({
|
||||
path: '/verify',
|
||||
query: {redirect: to.fullPath}
|
||||
});
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
const originalPush = VueRouter.prototype.push;
|
||||
VueRouter.prototype.push = function push(location) {
|
||||
return originalPush.call(this, location).catch(err => err);
|
||||
}
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('../components/home'),
|
||||
children: [{
|
||||
path: "/",
|
||||
name: "index",
|
||||
component: () => import('../components/index')
|
||||
}, {
|
||||
path: "/sort",
|
||||
name: "sort",
|
||||
component: () => import('../components/sort')
|
||||
}, {
|
||||
path: "/article",
|
||||
name: "article",
|
||||
component: () => import('../components/article')
|
||||
}, {
|
||||
path: "/weiYan",
|
||||
name: "weiYan",
|
||||
component: () => import('../components/weiYan')
|
||||
}, {
|
||||
path: "/message",
|
||||
name: "message",
|
||||
component: () => import('../components/message')
|
||||
}, {
|
||||
path: "/friend",
|
||||
name: "friend",
|
||||
component: () => import('../components/friend')
|
||||
},{
|
||||
path: "/bangumi",
|
||||
name: "bangumi",
|
||||
component: () => import('../components/bangumi')
|
||||
},{
|
||||
path: "/izone",
|
||||
name: "izone",
|
||||
component: () => import('../components/izone')
|
||||
},{
|
||||
path: "/album",
|
||||
name: "album",
|
||||
component: () => import('../components/album')
|
||||
}, {
|
||||
path: "/about",
|
||||
name: "about",
|
||||
component: () => import('../components/about')
|
||||
}, {
|
||||
path: "/user",
|
||||
name: "user",
|
||||
component: () => import('../components/user')
|
||||
}, {
|
||||
path: "/letter",
|
||||
name: "letter",
|
||||
component: () => import('../components/letter')
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
redirect: '/main',
|
||||
meta: {requiresAuth: true},
|
||||
component: () => import('../components/admin/admin'),
|
||||
children: [{
|
||||
path: '/main',
|
||||
name: 'main',
|
||||
component: () => import('../components/admin/main')
|
||||
}, {
|
||||
path: '/webEdit',
|
||||
name: 'webEdit',
|
||||
component: () => import('../components/admin/webEdit')
|
||||
}, {
|
||||
path: '/userList',
|
||||
name: 'userList',
|
||||
component: () => import('../components/admin/userList')
|
||||
}, {
|
||||
path: '/postList',
|
||||
name: 'postList',
|
||||
component: () => import('../components/admin/postList')
|
||||
}, {
|
||||
path: '/postShuoshuo',
|
||||
name: 'postShuoshuo',
|
||||
component: () => import('../components/admin/postShuoshuo')
|
||||
}, {
|
||||
path: '/postEdit',
|
||||
name: 'postEdit',
|
||||
component: () => import('../components/admin/postEdit')
|
||||
}, {
|
||||
path: '/sortList',
|
||||
name: 'sortList',
|
||||
component: () => import('../components/admin/sortList')
|
||||
}, {
|
||||
path: '/commentList',
|
||||
name: 'commentList',
|
||||
component: () => import('../components/admin/commentList')
|
||||
}, {
|
||||
path: '/treeHoleList',
|
||||
name: 'treeHoleList',
|
||||
component: () => import('../components/admin/treeHoleList')
|
||||
}, {
|
||||
path: '/resourceList',
|
||||
name: 'resourceList',
|
||||
component: () => import('../components/admin/resourceList')
|
||||
}, {
|
||||
path: '/resourcePathList',
|
||||
name: 'resourcePathList',
|
||||
component: () => import('../components/admin/resourcePathList')
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/verify',
|
||||
name: 'verify',
|
||||
component: () => import('../components/admin/verify')
|
||||
},{
|
||||
path: "/loveheart",
|
||||
name: "loveheart",
|
||||
component: () => import('../components/loveheart')
|
||||
},
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: "history",
|
||||
routes: routes,
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
return {x: 0, y: 0}
|
||||
}
|
||||
})
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.matched.some(record => record.meta.requiresAuth)) {
|
||||
if (!Boolean(localStorage.getItem("adminToken"))) {
|
||||
next({
|
||||
path: '/verify',
|
||||
query: {redirect: to.fullPath}
|
||||
});
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
@ -1,85 +1,88 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import createPersistedState from "vuex-persistedstate";
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
toolbar: {
|
||||
visible: false,
|
||||
enter: true
|
||||
},
|
||||
sortInfo: [],
|
||||
currentUser: {},
|
||||
currentAdmin: {},
|
||||
webInfo: {
|
||||
webName: "",
|
||||
webTitle: [],
|
||||
notices: [],
|
||||
footer: "",
|
||||
backgroundImage: "",
|
||||
avatar: ""
|
||||
},
|
||||
playlist:3226523716
|
||||
},
|
||||
getters: {
|
||||
articleTotal: state => {
|
||||
if (state.sortInfo !== null && state.sortInfo.length !== 0) {
|
||||
if (state.sortInfo.length === 1) {
|
||||
return state.sortInfo[0].countOfSort;
|
||||
} else {
|
||||
return state.sortInfo.reduce((prev, curr) => {
|
||||
if (typeof prev === "number") {
|
||||
return prev + curr.countOfSort;
|
||||
} else {
|
||||
return prev.countOfSort + curr.countOfSort;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
navigationBar: state => {
|
||||
if (state.sortInfo !== null && state.sortInfo.length !== 0) {
|
||||
return state.sortInfo.filter(f => {
|
||||
return f.sortType === 0;
|
||||
}).sort((s1, s2) => {
|
||||
return s1.priority - s2.priority;
|
||||
})
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
changePlaylist(state, playlist){
|
||||
state.playlist = playlist
|
||||
},
|
||||
changeToolbarStatus(state, toolbarState) {
|
||||
state.toolbar = toolbarState;
|
||||
},
|
||||
loadSortInfo(state, sortInfo) {
|
||||
state.sortInfo = sortInfo;
|
||||
},
|
||||
loadCurrentUser(state, user) {
|
||||
state.currentUser = user;
|
||||
},
|
||||
loadCurrentAdmin(state, user) {
|
||||
state.currentAdmin = user;
|
||||
},
|
||||
loadWebInfo(state, webInfo) {
|
||||
webInfo.webTitle = webInfo.webTitle.split('');
|
||||
webInfo.notices = JSON.parse(webInfo.notices);
|
||||
state.webInfo = webInfo;
|
||||
}
|
||||
},
|
||||
actions: {},
|
||||
modules: {},
|
||||
plugins: [
|
||||
createPersistedState({
|
||||
storage: window.localStorage
|
||||
})
|
||||
]
|
||||
})
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import createPersistedState from "vuex-persistedstate";
|
||||
import constant from '../utils/constant'
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
toolbar: {
|
||||
visible: false,
|
||||
enter: true
|
||||
},
|
||||
sortInfo: [],
|
||||
currentUser: {},
|
||||
currentAdmin: {},
|
||||
webInfo: {
|
||||
webName: "",
|
||||
webTitle: [],
|
||||
notices: [],
|
||||
footer: "",
|
||||
backgroundImage: "",
|
||||
avatar: ""
|
||||
},
|
||||
playlist:3217120394
|
||||
},
|
||||
getters: {
|
||||
articleTotal: state => {
|
||||
if (state.sortInfo !== null && state.sortInfo.length !== 0) {
|
||||
if (state.sortInfo.length === 1) {
|
||||
return state.sortInfo[0].countOfSort;
|
||||
} else {
|
||||
return state.sortInfo.reduce((prev, curr) => {
|
||||
if (typeof prev === "number") {
|
||||
return prev + curr.countOfSort;
|
||||
} else {
|
||||
return prev.countOfSort + curr.countOfSort;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
navigationBar: state => {
|
||||
if (state.sortInfo !== null && state.sortInfo.length !== 0) {
|
||||
return state.sortInfo.filter(f => {
|
||||
return f.sortType === 0;
|
||||
}).sort((s1, s2) => {
|
||||
return s1.priority - s2.priority;
|
||||
})
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
pushPlaylist(state, playlist){
|
||||
state.pushPlaylist = playlist
|
||||
},
|
||||
changePlaylist(state, playlist){
|
||||
state.playlist = playlist
|
||||
},
|
||||
changeToolbarStatus(state, toolbarState) {
|
||||
state.toolbar = toolbarState;
|
||||
},
|
||||
loadSortInfo(state, sortInfo) {
|
||||
state.sortInfo = sortInfo;
|
||||
},
|
||||
loadCurrentUser(state, user) {
|
||||
state.currentUser = user;
|
||||
},
|
||||
loadCurrentAdmin(state, user) {
|
||||
state.currentAdmin = user;
|
||||
},
|
||||
loadWebInfo(state, webInfo) {
|
||||
webInfo.webTitle = webInfo.webTitle.split('');
|
||||
webInfo.notices = JSON.parse(webInfo.notices);
|
||||
state.webInfo = webInfo;
|
||||
}
|
||||
},
|
||||
actions: {},
|
||||
modules: {},
|
||||
plugins: [
|
||||
createPersistedState({
|
||||
storage: window.localStorage
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
@ -1,164 +1,189 @@
|
||||
import constant from "./constant";
|
||||
import EMOJI from "../assets/json/emoji.json"
|
||||
import CryptoJS from 'crypto-js';
|
||||
|
||||
export default {
|
||||
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);
|
||||
return flag && flag.length && flag.length > 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断是否为空
|
||||
*/
|
||||
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)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加密
|
||||
*/
|
||||
encrypt(plaintText) {
|
||||
let options = {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
};
|
||||
let key = CryptoJS.enc.Utf8.parse(constant.cryptojs_key);
|
||||
let encryptedData = CryptoJS.AES.encrypt(plaintText, key, options);
|
||||
return encryptedData.toString().replace(/\//g, "_").replace(/\+/g, "-");
|
||||
},
|
||||
|
||||
/**
|
||||
* 解密
|
||||
*/
|
||||
decrypt(encryptedBase64Str) {
|
||||
let val = encryptedBase64Str.replace(/\-/g, '+').replace(/_/g, '/');
|
||||
let options = {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
};
|
||||
let key = CryptoJS.enc.Utf8.parse(constant.cryptojs_key);
|
||||
let decryptedData = CryptoJS.AES.decrypt(val, key, options);
|
||||
return CryptoJS.enc.Utf8.stringify(decryptedData);
|
||||
},
|
||||
|
||||
/**
|
||||
* 表情包转换
|
||||
*/
|
||||
faceReg(content) {
|
||||
content = content.replace(/\[[^\[^\]]+\]/g, (word) => {
|
||||
let arr = [];
|
||||
EMOJI.forEach(element => {
|
||||
arr = arr.concat(element.emote);
|
||||
});
|
||||
let index = arr.findIndex(function(item) {
|
||||
return item.text === word;
|
||||
});
|
||||
if (index > -1) {
|
||||
let url = arr[index].url
|
||||
return '<img style="vertical-align: middle;width: 32px;height: 32px" src="' + url + '" title="' + word + '"/>';
|
||||
} else {
|
||||
return word;
|
||||
}
|
||||
});
|
||||
return content;
|
||||
},
|
||||
|
||||
/**
|
||||
* 图片转换
|
||||
*/
|
||||
pictureReg(content) {
|
||||
content = content.replace(/\<[^\<^\>]+\>/g, (word) => {
|
||||
let index = word.indexOf(",");
|
||||
if (index > -1) {
|
||||
let arr = word.replace("<", "").replace(">", "").split(",");
|
||||
return '<img style="border-radius: 5px;width: 100%;max-width: 250px;display: block" src="' + arr[1] + '" title="' + arr[0] + '"/>';
|
||||
} else {
|
||||
return word;
|
||||
}
|
||||
});
|
||||
return content;
|
||||
},
|
||||
|
||||
/**
|
||||
* 字符串转换为时间戳
|
||||
*/
|
||||
getDateTimeStamp(dateStr) {
|
||||
return Date.parse(dateStr.replace(/-/gi, "/"));
|
||||
},
|
||||
|
||||
getDateDiff(dateStr) {
|
||||
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,
|
||||
timeNow = Math.floor(new Date().getTime() / 1000),
|
||||
d,
|
||||
date = new Date(publishTime * 1000),
|
||||
Y = date.getFullYear(),
|
||||
M = date.getMonth() + 1,
|
||||
D = date.getDate(),
|
||||
H = date.getHours(),
|
||||
m = date.getMinutes(),
|
||||
s = date.getSeconds();
|
||||
//小于10的在前面补0
|
||||
if (M < 10) {
|
||||
M = '0' + M;
|
||||
}
|
||||
if (D < 10) {
|
||||
D = '0' + D;
|
||||
}
|
||||
if (H < 10) {
|
||||
H = '0' + H;
|
||||
}
|
||||
if (m < 10) {
|
||||
m = '0' + m;
|
||||
}
|
||||
if (s < 10) {
|
||||
s = '0' + s;
|
||||
}
|
||||
d = timeNow - publishTime;
|
||||
d_days = Math.floor(d / 86400);
|
||||
d_hours = Math.floor(d / 3600);
|
||||
d_minutes = Math.floor(d / 60);
|
||||
d_seconds = Math.floor(d);
|
||||
if (d_days > 0 && d_days < 3) {
|
||||
return d_days + '天前';
|
||||
} else if (d_days <= 0 && d_hours > 0) {
|
||||
return d_hours + '小时前';
|
||||
} else if (d_hours <= 0 && d_minutes > 0) {
|
||||
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"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
import constant from "./constant";
|
||||
import EMOJI from "../assets/json/emoji.json"
|
||||
import CryptoJS from 'crypto-js';
|
||||
|
||||
export default {
|
||||
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);
|
||||
return flag && flag.length && flag.length > 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断是否为空
|
||||
*/
|
||||
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)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加密
|
||||
*/
|
||||
encrypt(plaintText) {
|
||||
let options = {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
};
|
||||
let key = CryptoJS.enc.Utf8.parse(constant.cryptojs_key);
|
||||
let encryptedData = CryptoJS.AES.encrypt(plaintText, key, options);
|
||||
return encryptedData.toString().replace(/\//g, "_").replace(/\+/g, "-");
|
||||
},
|
||||
|
||||
/**
|
||||
* 解密
|
||||
*/
|
||||
decrypt(encryptedBase64Str) {
|
||||
let val = encryptedBase64Str.replace(/\-/g, '+').replace(/_/g, '/');
|
||||
let options = {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
};
|
||||
let key = CryptoJS.enc.Utf8.parse(constant.cryptojs_key);
|
||||
let decryptedData = CryptoJS.AES.decrypt(val, key, options);
|
||||
return CryptoJS.enc.Utf8.stringify(decryptedData);
|
||||
},
|
||||
|
||||
/**
|
||||
* 表情包转换
|
||||
*/
|
||||
faceReg(content) {
|
||||
content = content.replace(/\[[^\[^\]]+\]/g, (word) => {
|
||||
let arr = [];
|
||||
EMOJI.forEach(element => {
|
||||
arr = arr.concat(element.emote);
|
||||
});
|
||||
let index = arr.findIndex(function(item) {
|
||||
return item.text === word;
|
||||
});
|
||||
if (index > -1) {
|
||||
let url = arr[index].url
|
||||
return '<img style="vertical-align: middle;width: 32px;height: 32px" src="' + url + '" title="' + word + '"/>';
|
||||
} else {
|
||||
return word;
|
||||
}
|
||||
});
|
||||
return content;
|
||||
},
|
||||
loadAssets(assets) {
|
||||
const head = document.getElementsByTagName('head')[0];
|
||||
const loadAsset = (asset) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let element;
|
||||
if (asset.type === 'js') {
|
||||
element = document.createElement('script');
|
||||
element.src = asset.src;
|
||||
} else if (asset.type === 'css') {
|
||||
element = document.createElement('link');
|
||||
element.href = asset.src;
|
||||
element.rel = 'stylesheet';
|
||||
}
|
||||
element.onload = () => {
|
||||
console.log(`Loaded ${asset.type} file: ${asset.src}`);
|
||||
resolve();
|
||||
};
|
||||
element.onerror = () => {
|
||||
console.error(`Error loading ${asset.type} file: ${asset.src}`);
|
||||
reject();
|
||||
};
|
||||
head.appendChild(element);
|
||||
});
|
||||
};
|
||||
return Promise.all(assets.map(loadAsset));
|
||||
},
|
||||
/**
|
||||
* 图片转换
|
||||
*/
|
||||
pictureReg(content) {
|
||||
content = content.replace(/\<[^\<^\>]+\>/g, (word) => {
|
||||
let index = word.indexOf(",");
|
||||
if (index > -1) {
|
||||
let arr = word.replace("<", "").replace(">", "").split(",");
|
||||
return '<img style="border-radius: 5px;width: 100%;max-width: 250px;display: block" src="' + arr[1] + '" title="' + arr[0] + '"/>';
|
||||
} else {
|
||||
return word;
|
||||
}
|
||||
});
|
||||
return content;
|
||||
},
|
||||
|
||||
/**
|
||||
* 字符串转换为时间戳
|
||||
*/
|
||||
getDateTimeStamp(dateStr) {
|
||||
return Date.parse(dateStr.replace(/-/gi, "/"));
|
||||
},
|
||||
|
||||
getDateDiff(dateStr) {
|
||||
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,
|
||||
timeNow = Math.floor(new Date().getTime() / 1000),
|
||||
d,
|
||||
date = new Date(publishTime * 1000),
|
||||
Y = date.getFullYear(),
|
||||
M = date.getMonth() + 1,
|
||||
D = date.getDate(),
|
||||
H = date.getHours(),
|
||||
m = date.getMinutes(),
|
||||
s = date.getSeconds();
|
||||
//小于10的在前面补0
|
||||
if (M < 10) {
|
||||
M = '0' + M;
|
||||
}
|
||||
if (D < 10) {
|
||||
D = '0' + D;
|
||||
}
|
||||
if (H < 10) {
|
||||
H = '0' + H;
|
||||
}
|
||||
if (m < 10) {
|
||||
m = '0' + m;
|
||||
}
|
||||
if (s < 10) {
|
||||
s = '0' + s;
|
||||
}
|
||||
d = timeNow - publishTime;
|
||||
d_days = Math.floor(d / 86400);
|
||||
d_hours = Math.floor(d / 3600);
|
||||
d_minutes = Math.floor(d / 60);
|
||||
d_seconds = Math.floor(d);
|
||||
if (d_days > 0 && d_days < 3) {
|
||||
return d_days + '天前';
|
||||
} else if (d_days <= 0 && d_hours > 0) {
|
||||
return d_hours + '小时前';
|
||||
} else if (d_hours <= 0 && d_minutes > 0) {
|
||||
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 = {
|
||||
devServer: {
|
||||
// 代理配置
|
||||
proxy: {
|
||||
'/v': {
|
||||
target: 'http://janxland.xyz/v/',
|
||||
changeOrigin: true,
|
||||
headers: {
|
||||
Host: 'www.janxland.xyz'
|
||||
},
|
||||
pathRewrite: {
|
||||
'/v': ''
|
||||
}
|
||||
},
|
||||
'/api': {
|
||||
target: 'http://janxland.xyz/ablaze/',
|
||||
changeOrigin: true,
|
||||
headers: {
|
||||
Host: 'www.janxland.xyz'
|
||||
},
|
||||
pathRewrite: {
|
||||
'/api': '/'
|
||||
}
|
||||
},
|
||||
'/mapi163/weapi': {
|
||||
target: 'http://janxland.xyz/',
|
||||
changeOrigin: true,
|
||||
headers: {
|
||||
Host: 'www.janxland.xyz'
|
||||
},
|
||||
pathRewrite: {
|
||||
'/mapi163/weapi': '/mapi163/weapi'
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
module.exports = {
|
||||
devServer: {
|
||||
// 代理配置
|
||||
proxy: {
|
||||
'/getIp': {
|
||||
target: 'http://ip-api.com/json/?lang=zh-CN',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'/getIp': ''
|
||||
}
|
||||
},
|
||||
'/api/scrape': {
|
||||
target: 'http://localhost:3000/scrape/',
|
||||
changeOrigin: true,
|
||||
headers: {
|
||||
Host: 'aurora.roginx.ink'
|
||||
},
|
||||
pathRewrite: {
|
||||
'/api/scrape': ''
|
||||
}
|
||||
},
|
||||
'/api/aurora': {
|
||||
target: 'http://aurora.roginx.ink/aurora/',
|
||||
changeOrigin: true,
|
||||
headers: {
|
||||
Host: 'aurora.roginx.ink'
|
||||
},
|
||||
pathRewrite: {
|
||||
'/api/aurora': ''
|
||||
}
|
||||
},
|
||||
'/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