Abby
2 years ago
commit
88feff285c
@ -0,0 +1,3 @@
|
|||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not dead
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
[*.{js,jsx,ts,tsx,vue}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'plugin:vue/essential'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
parser: 'babel-eslint'
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
[
|
||||||
|
'component',
|
||||||
|
{
|
||||||
|
libraryName: 'element-ui',
|
||||||
|
styleLibraryName: 'theme-chalk'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"name": "poetry-ui",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^0.21.1",
|
||||||
|
"core-js": "^3.6.5",
|
||||||
|
"crypto-js": "^4.1.1",
|
||||||
|
"element-ui": "^2.4.5",
|
||||||
|
"markdown-it": "^12.2.0",
|
||||||
|
"mavon-editor": "^2.9.1",
|
||||||
|
"qs": "^6.10.3",
|
||||||
|
"vue": "^2.6.11",
|
||||||
|
"vue-baberrage": "^3.2.4",
|
||||||
|
"vue-ripple-directive": "^2.0.1",
|
||||||
|
"vue-router": "^3.2.0",
|
||||||
|
"vuex": "^3.4.0",
|
||||||
|
"vuex-persistedstate": "^4.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-router": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||||
|
"@vue/cli-service": "~4.5.0",
|
||||||
|
"@vue/eslint-config-standard": "^5.1.2",
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
|
"babel-plugin-component": "^1.1.1",
|
||||||
|
"eslint": "^6.7.2",
|
||||||
|
"eslint-plugin-import": "^2.20.2",
|
||||||
|
"eslint-plugin-node": "^11.1.0",
|
||||||
|
"eslint-plugin-promise": "^4.2.1",
|
||||||
|
"eslint-plugin-standard": "^4.0.0",
|
||||||
|
"eslint-plugin-vue": "^6.2.2",
|
||||||
|
"vue-cli-plugin-element": "^1.0.1",
|
||||||
|
"vue-template-compiler": "^2.6.11"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="icon" href="$$$$head地址" sizes="16x16">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<title>Sara</title>
|
||||||
|
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||||||
|
<script src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/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://cdnjs.cloudflare.com/ajax/libs/qiniu-js/3.4.0/qiniu.min.js"></script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
<script>
|
||||||
|
new WOW().init();
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,171 @@
|
|||||||
|
/* 以my-animation-开头的class */
|
||||||
|
[class*=my-animation-] {
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.my-animation-slide-top {
|
||||||
|
animation-name: slide-top
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-animation-slide-bottom {
|
||||||
|
animation-name: slide-bottom
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-animation-hideToShow {
|
||||||
|
animation-name: hideToShow
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 上移 */
|
||||||
|
@keyframes slide-top {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-20%)
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下移 */
|
||||||
|
@keyframes slide-bottom {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20%)
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 首图动画：下移 */
|
||||||
|
@keyframes header-effect {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 旋转 */
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 显示 */
|
||||||
|
@keyframes hideToShow {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下移 */
|
||||||
|
@keyframes my-shake {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
opacity: 0.5;
|
||||||
|
transform: translateY(25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 上移 */
|
||||||
|
@keyframes scatter {
|
||||||
|
0% {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
top: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 放大 */
|
||||||
|
@keyframes scale {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 背景位置移动 */
|
||||||
|
@keyframes gradientBG {
|
||||||
|
0% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 阴影变化 */
|
||||||
|
@keyframes weiYanShadowFlashing {
|
||||||
|
0% {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
box-shadow: 0 0 15px var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 有小变大 */
|
||||||
|
@keyframes zoomIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale3d(.3, .3, .3);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
: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: $$$$字体地址;
|
||||||
|
|
||||||
|
--commentURL: url("$$$$图片地址");
|
||||||
|
--toTop: url("$$$$图片地址");
|
||||||
|
--bannerWave1: url("$$$$图片地址") repeat-x;
|
||||||
|
--bannerWave2: url("$$$$图片地址") repeat-x;
|
||||||
|
--verifyImage: url("$$$$图片地址");
|
||||||
|
--toolbar: url("$$$$图片地址");
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,257 @@
|
|||||||
|
/* 通用css */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: var(--fontColor);
|
||||||
|
font-family: var(--globalFont), serif;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 图片 */
|
||||||
|
.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(--maxMask);
|
||||||
|
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(--maxMask);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
.el-dialog {
|
||||||
|
width: 75% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,380 @@
|
|||||||
|
/* markdown样式 */
|
||||||
|
.entry-content {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content blockquote {
|
||||||
|
margin: 0;
|
||||||
|
padding: 15px 50px;
|
||||||
|
position: relative;
|
||||||
|
word-break: break-word;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content blockquote:before {
|
||||||
|
content: "\f10d";
|
||||||
|
font-size: 1.5rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
color: orange;
|
||||||
|
font-family: FontAwesome;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content blockquote:after {
|
||||||
|
content: '\f10e';
|
||||||
|
font-size: 1.5rem;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
color: orange;
|
||||||
|
font-family: FontAwesome;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content code:not(.hljs) {
|
||||||
|
background: #fefac7;
|
||||||
|
color: #e67474;
|
||||||
|
word-break: break-word;
|
||||||
|
padding: 4px 6px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content ul {
|
||||||
|
list-style: disc;
|
||||||
|
padding: 0 10px 0 35px;
|
||||||
|
color: var(--articleGreyFontColor);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content ol {
|
||||||
|
list-style: decimal;
|
||||||
|
padding: 0 10px 0 35px;
|
||||||
|
color: var(--articleGreyFontColor);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content ol li,
|
||||||
|
.entry-content ul li {
|
||||||
|
padding: 8px 0;
|
||||||
|
Letter-spacing: 1px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h3 {
|
||||||
|
padding-bottom: 8px;
|
||||||
|
border-bottom: 1px dashed #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h1,
|
||||||
|
.entry-content h2,
|
||||||
|
.entry-content h2,
|
||||||
|
.entry-content h3,
|
||||||
|
.entry-content h4 {
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h2 {
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h3 {
|
||||||
|
padding-left: 20px;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h4 {
|
||||||
|
padding-left: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h5 {
|
||||||
|
font-size: 18px;
|
||||||
|
padding-left: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h2:before {
|
||||||
|
content: "🌺";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
font-size: 1.03em;
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h3:before {
|
||||||
|
content: "#";
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 2px;
|
||||||
|
color: #ff6d6d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h4:before {
|
||||||
|
content: "▌";
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
color: #ff6d6d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h5:before {
|
||||||
|
content: "🌷";
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content a {
|
||||||
|
color: #e67474;
|
||||||
|
position: relative;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content a:hover {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content a:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
transform: scaleX(0);
|
||||||
|
height: 1.5px;
|
||||||
|
bottom: -2px;
|
||||||
|
left: 0;
|
||||||
|
background-color: orange;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
transition: transform 0.25s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content a:hover:after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: bottom left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content p {
|
||||||
|
color: var(--articleFontColor);
|
||||||
|
line-height: 35px;
|
||||||
|
word-break: break-word;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content hr {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border: 0.5px dashed #fc625d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content img {
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 高亮代码块 */
|
||||||
|
.highlight-wrap {
|
||||||
|
position: relative;
|
||||||
|
background: #21252b;
|
||||||
|
border-radius: 5px;
|
||||||
|
font: 15px/22px "Microsoft YaHei", "Arial";
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 1.6em;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 30px;
|
||||||
|
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrap:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #fc625d;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
left: 12px;
|
||||||
|
margin-top: -18px;
|
||||||
|
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrap .copy-code {
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrap .copy-code:hover {
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrap code::-webkit-scrollbar {
|
||||||
|
height: 6px;
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrap code {
|
||||||
|
word-break: break-word;
|
||||||
|
border-radius: 0 0 5px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrap code[data-rel]:before {
|
||||||
|
color: #fff;
|
||||||
|
content: attr(data-rel);
|
||||||
|
height: 30px;
|
||||||
|
line-height: 23px;
|
||||||
|
background: #21252b;
|
||||||
|
font-size: 16px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
margin-top: -30px;
|
||||||
|
width: 100%;
|
||||||
|
font-family: Ubuntu;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
color: #a9b7c6;
|
||||||
|
background: #1d1f21;
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-ln-line span::selection,
|
||||||
|
.hljs-ln-line::selection {
|
||||||
|
background: #fff;
|
||||||
|
color: #21252b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-ln {
|
||||||
|
margin: 6px 0 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-ln-line.hljs-ln-code {
|
||||||
|
padding-left: 25px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-ln-line.hljs-ln-code:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-ln-line.hljs-ln-numbers {
|
||||||
|
user-select: none;
|
||||||
|
text-align: center;
|
||||||
|
color: #888f96;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 30px;
|
||||||
|
background: #1d1f21;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #888f96;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-doctag,
|
||||||
|
.hljs-formula,
|
||||||
|
.hljs-keyword {
|
||||||
|
color: #c678dd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-subst {
|
||||||
|
color: #e06c75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-literal {
|
||||||
|
color: #56b6c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition,
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-meta-string,
|
||||||
|
.hljs-regexp,
|
||||||
|
.hljs-string {
|
||||||
|
color: #98c379;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-class .hljs-title {
|
||||||
|
color: #e6c07b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-number,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-pseudo,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-type,
|
||||||
|
.hljs-variable {
|
||||||
|
color: #d19a66;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-link,
|
||||||
|
.hljs-meta,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-title {
|
||||||
|
color: #61aeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 表格 */
|
||||||
|
.table-wrapper::-webkit-scrollbar {
|
||||||
|
height: 6px;
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper > table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper > table th {
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper > table tr:nth-child(2n) {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper > table td,
|
||||||
|
.table-wrapper > table th {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: 1px solid #dfe2e5;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 90%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper > table tbody > tr {
|
||||||
|
transition: all 0.28s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper > table tbody > tr:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
.toc {
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 150px;
|
||||||
|
max-height: 300px;
|
||||||
|
position: fixed;
|
||||||
|
top: 50vh;
|
||||||
|
right: 50px;
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 5px;
|
||||||
|
z-index: 100;
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc > .toc-list {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc > .toc-list li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .toc-list {
|
||||||
|
margin: 0;
|
||||||
|
padding: 4px 4px 4px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc a.toc-link {
|
||||||
|
color: currentColor;
|
||||||
|
height: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .is-collapsible {
|
||||||
|
max-height: 1000px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .is-collapsed {
|
||||||
|
max-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .is-active-link {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--green) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .toc-link::before {
|
||||||
|
background-color: #EEE;
|
||||||
|
content: ' ';
|
||||||
|
display: inline-block;
|
||||||
|
height: inherit;
|
||||||
|
left: 0;
|
||||||
|
margin-top: -1px;
|
||||||
|
position: absolute;
|
||||||
|
width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .is-active-link::before {
|
||||||
|
background-color: var(--green);
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,190 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 两句诗 -->
|
||||||
|
<div class="my-animation-slide-top">
|
||||||
|
<twoPoem :isHitokoto="false"></twoPoem>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="background: var(--background)" class="my-animation-slide-bottom">
|
||||||
|
<div class="about-wrap">
|
||||||
|
<h1 style="font-size: 40px;font-weight: 500;letter-spacing: 5px;">两只毛驴鸣翠柳</h1>
|
||||||
|
<!-- 对话框 -->
|
||||||
|
<div class="about-box">
|
||||||
|
<h4>与 {{$store.state.webInfo.webName}} 对话中...</h4>
|
||||||
|
<div v-if="sayShow" id="say-container"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<myFooter></myFooter>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const twoPoem = () => import( "./common/twoPoem");
|
||||||
|
const myFooter = () => import( "./common/myFooter");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
twoPoem,
|
||||||
|
myFooter
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sayShow: false,
|
||||||
|
sayContent: [
|
||||||
|
{
|
||||||
|
"talk": ["Hi, there👋", "这是一个 Vue2 Vue3 与 SpringBoot 结合的产物~"],
|
||||||
|
"reply": ["然后呢？ 😃", "少废话！ 🙄"]
|
||||||
|
}, {
|
||||||
|
"talk": ["😘",
|
||||||
|
"本站平时仅用于交流和学习新知识",
|
||||||
|
"如涉及侵权请联系站长删除对应资源，谢谢！！！"],
|
||||||
|
"reply": ["这个网站有什么用吗？ 😂"]
|
||||||
|
}, {
|
||||||
|
"talk": ["拥有自己的独立网站难道不酷吗🚀",
|
||||||
|
"那就摸鱼吧👋",
|
||||||
|
"摸鱼大军请在聊天室集合🥝"],
|
||||||
|
"reply": []
|
||||||
|
}
|
||||||
|
],
|
||||||
|
sayIndex: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.sayShow = true;
|
||||||
|
this.say();
|
||||||
|
}, 2000);
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
answer(index, value) {
|
||||||
|
$(".say-select").remove();
|
||||||
|
|
||||||
|
let htmlStr = `<div class="say-right my-animation-slide-bottom"><span class="say-item-right">${value}</span></div>`;
|
||||||
|
let frag = document.createRange().createContextualFragment(htmlStr);
|
||||||
|
document.getElementById("say-container").appendChild(frag);
|
||||||
|
if (index === 0) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.say();
|
||||||
|
}, 500);
|
||||||
|
} else {
|
||||||
|
let htmlStr = `<div class="say-left my-animation-slide-bottom"><span class="say-item-left">👋 👋 👋</span></div>`;
|
||||||
|
let frag = document.createRange().createContextualFragment(htmlStr);
|
||||||
|
document.getElementById("say-container").appendChild(frag);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
say() {
|
||||||
|
if (!this.$common.isEmpty(this.sayContent[this.sayIndex]) && !this.$common.isEmpty(this.sayContent[this.sayIndex].talk)) {
|
||||||
|
this.sayContent[this.sayIndex].talk.forEach((value, index, talk) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
let htmlStr = `<div class="say-left my-animation-slide-bottom"><span class="say-item-left">${value}</span></div>`;
|
||||||
|
let frag = document.createRange().createContextualFragment(htmlStr);
|
||||||
|
document.getElementById("say-container").appendChild(frag);
|
||||||
|
if (talk.length === index + 1) {
|
||||||
|
if (!this.$common.isEmpty(this.sayContent[this.sayIndex].reply)) {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.sayContent[this.sayIndex].reply.length === 2) {
|
||||||
|
let reply0 = this.sayContent[this.sayIndex].reply[0];
|
||||||
|
let reply1 = this.sayContent[this.sayIndex].reply[1];
|
||||||
|
let htmlStr = `<div class="say-left my-animation-slide-bottom"><span class="say-select">${reply0}</span><span class="say-select">${reply1}</span></div>`;
|
||||||
|
let frag = document.createRange().createContextualFragment(htmlStr);
|
||||||
|
document.getElementById("say-container").appendChild(frag);
|
||||||
|
document.getElementsByClassName("say-select")[0].onclick = () => {
|
||||||
|
this.answer(0, reply0);
|
||||||
|
}
|
||||||
|
document.getElementsByClassName("say-select")[1].onclick = () => {
|
||||||
|
this.answer(1, reply1);
|
||||||
|
}
|
||||||
|
} else if (this.sayContent[this.sayIndex].reply.length === 1) {
|
||||||
|
let reply0 = this.sayContent[this.sayIndex].reply[0];
|
||||||
|
let htmlStr = `<div class="say-left my-animation-slide-bottom"><span class="say-select">${reply0}</span></div>`;
|
||||||
|
let frag = document.createRange().createContextualFragment(htmlStr);
|
||||||
|
document.getElementById("say-container").appendChild(frag);
|
||||||
|
document.getElementsByClassName("say-select")[0].onclick = () => {
|
||||||
|
this.answer(0, reply0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.sayIndex += 1;
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, index * 500);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.about-wrap {
|
||||||
|
text-align: center;
|
||||||
|
width: 95%;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px 20px 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-box {
|
||||||
|
min-height: 450px;
|
||||||
|
padding: 5px;
|
||||||
|
background-color: var(--maxMaxLightGray);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.say-item-left {
|
||||||
|
padding: 5px 12px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
color: var(--maxGreyFont);
|
||||||
|
background-color: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.say-item-right {
|
||||||
|
padding: 5px 12px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
color: var(--white);
|
||||||
|
background-color: var(--translucent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.say-left {
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.say-right {
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.say-select {
|
||||||
|
cursor: pointer;
|
||||||
|
background: var(--black);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
margin-right: 12px;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.say-select:hover {
|
||||||
|
border: 1px solid var(--themeBackground);
|
||||||
|
color: var(--themeBackground);
|
||||||
|
box-shadow: 0 0 5px var(--themeBackground);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<myHeader></myHeader>
|
||||||
|
<sidebar></sidebar>
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="content">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import myHeader from "./common/myHeader.vue";
|
||||||
|
import sidebar from "./common/sidebar.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
myHeader,
|
||||||
|
sidebar
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.content-box {
|
||||||
|
position: absolute;
|
||||||
|
left: 200px;
|
||||||
|
right: 0;
|
||||||
|
top: 70px;
|
||||||
|
bottom: 0;
|
||||||
|
transition: left .3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: auto;
|
||||||
|
height: 100%;
|
||||||
|
padding: 30px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="margin-bottom: 20px">
|
||||||
|
<el-input class="my-input" type="number" style="width: 140px;margin-right: 10px" v-model="pagination.source"
|
||||||
|
placeholder="文章ID"></el-input>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="searchComments()">搜索</el-button>
|
||||||
|
<el-button type="danger" @click="clearSearch()">清除参数</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="comments" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="source" label="文章ID" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="userId" label="发表用户ID" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="likeCount" label="点赞数" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="commentContent" label="评论内容" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="commentInfo" label="评论额外信息" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="180" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)" @click="handleDelete(scope.row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination background layout="total, prev, pager, next"
|
||||||
|
:current-page="pagination.current"
|
||||||
|
:page-size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
@current-change="handlePageChange">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isBoss: this.$store.state.currentAdmin.isBoss,
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
source: null
|
||||||
|
},
|
||||||
|
comments: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getComments();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
clearSearch() {
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
source: null
|
||||||
|
}
|
||||||
|
this.getComments();
|
||||||
|
},
|
||||||
|
getComments() {
|
||||||
|
let url = "";
|
||||||
|
if (this.isBoss) {
|
||||||
|
url = "/admin/comment/boss/list";
|
||||||
|
} else {
|
||||||
|
url = "/admin/comment/user/list";
|
||||||
|
}
|
||||||
|
this.$http.post(this.$constant.baseURL + url, this.pagination, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.comments = res.data.records;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handlePageChange(val) {
|
||||||
|
this.pagination.current = val;
|
||||||
|
this.getComments();
|
||||||
|
},
|
||||||
|
searchComments() {
|
||||||
|
this.pagination.total = 0;
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getComments();
|
||||||
|
},
|
||||||
|
handleDelete(item) {
|
||||||
|
let url = "";
|
||||||
|
if (this.isBoss) {
|
||||||
|
url = "/admin/comment/boss/deleteComment";
|
||||||
|
} else {
|
||||||
|
url = "/admin/comment/user/deleteComment";
|
||||||
|
}
|
||||||
|
this.$confirm('删除评论后，所有该评论的回复均不可见。确认删除？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.get(this.$constant.baseURL + url, {id: item.id}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getComments();
|
||||||
|
this.$message({
|
||||||
|
message: "删除成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消删除!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-input >>> input::-webkit-inner-spin-button {
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
<template>
|
||||||
|
<div class="my-header myBetween">
|
||||||
|
<div class="logo">后台管理</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="admin-index" @click="$router.push({path: '/'})">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="25" height="25" style="vertical-align: -6px;">
|
||||||
|
<path d="M221.4 152.6h141.8V396h-141.8V152.6z" fill="#FAD996"></path>
|
||||||
|
<path
|
||||||
|
d="M363.4 152.6c-9-16.6-138.2-14.2-142 0-3 11.4-23.6 287 15.8 182.4 10.4-27.4 22.6-47.6 37.2-78.6 10.6-22.6 22-42.4 32.6-54.4 16.6-18.6 18 9.6 33.6 22.6 41.6 34.4 31.8-55.6 22.8-72z"
|
||||||
|
fill="#F9F8F7"></path>
|
||||||
|
<path
|
||||||
|
d="M834.2 851c0 24.8-20.2 45-45 45H234.8c-24.8 0-45-20.2-45-45v-370h1.2l321.2-270 321.2 270h0.6l0.2 370z"
|
||||||
|
fill="#FAD996"></path>
|
||||||
|
<path d="M833.4 481l-321.2-270-1.8 1.6V896h278.8c24.8 0 45-20.2 45-45l-0.2-370h-0.6z" fill="#F7C872"
|
||||||
|
p-id="16219"></path>
|
||||||
|
<path
|
||||||
|
d="M62 548L432.6 166.2s81.2-90.6 171.8 0c79 79 343.6 400 343.6 400s-55.4 41-125.2 14.2c-37.8-14.4-118.2-68-133.4-150.8-11-60.2-45.8 29-60.8-38.2-9.4-42.2-67.2-96.6-67.2-96.6s-48.4-55.4-100.2 0c-13.8 14.8-11.4 134.6-44 128-26.4-5.2-20-105.6-27-81.2-9.6 33-25 61-54.4 47.2-33.2-15.6-42.4 79.6-64.8 112.8-17.2 25.4-23.8-45.8-40.4-29.2-21.2 21-2.4 94-39.4 108s-132.8-2-129.2-32.4z"
|
||||||
|
fill="#F9F8F7"></path>
|
||||||
|
<path
|
||||||
|
d="M512 126.2v144c28.8 1 49.4 24.6 49.4 24.6s57.8 54.4 67.2 96.6c15 67.2 49.8-22 60.8 38.2 15.2 82.8 95.6 136.4 133.4 150.8 69.8 26.8 125.2-14.2 125.2-14.2s-264.6-321-343.6-400c-33.2-33.2-65.2-42-92.4-40z"
|
||||||
|
fill="#EFEBE8"></path>
|
||||||
|
<path d="M405.2 495h99.8v99.8h-99.8v-99.8zM405.2 609.2h99.8v99.8h-99.8v-99.8z" fill="#FB8A5D"></path>
|
||||||
|
<path d="M519 495h99.8v99.8h-99.8v-99.8zM519 609.2h99.8v99.8h-99.8v-99.8z" fill="#EA6D4B"></path>
|
||||||
|
</svg>
|
||||||
|
<span> 首页</span>
|
||||||
|
</div>
|
||||||
|
<div class="header-user-con">
|
||||||
|
<el-dropdown placement="bottom">
|
||||||
|
<el-avatar class="user-avatar" :size="40"
|
||||||
|
:src="$store.state.currentAdmin.avatar">
|
||||||
|
</el-avatar>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item @click.native="logout()">退出</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
logout() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/user/logout", {}, true)
|
||||||
|
.then((res) => {
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.$store.commit("loadCurrentAdmin", {});
|
||||||
|
localStorage.removeItem("adminToken");
|
||||||
|
this.$router.push({path: '/'});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.my-header {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
color: black;
|
||||||
|
background-color: #ebf1f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-header .logo {
|
||||||
|
line-height: 70px;
|
||||||
|
margin-left: 70PX;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-index {
|
||||||
|
height: 70px;
|
||||||
|
line-height: 70px;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-user-con {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sidebar">
|
||||||
|
<el-menu class="sidebar-el-menu"
|
||||||
|
default-active="/main"
|
||||||
|
background-color="#ebf1f6"
|
||||||
|
text-color="#606266"
|
||||||
|
active-text-color="#20a0ff"
|
||||||
|
unique-opened
|
||||||
|
router>
|
||||||
|
<template v-for="item in items">
|
||||||
|
<template v-if="item.subs">
|
||||||
|
<el-submenu :index="item.index" :key="item.index">
|
||||||
|
<template slot="title">
|
||||||
|
<i :class="item.icon"></i>
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-for="subItem in item.subs">
|
||||||
|
<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
|
||||||
|
<template slot="title">
|
||||||
|
{{ subItem.title }}
|
||||||
|
</template>
|
||||||
|
<el-menu-item v-for="threeItem in subItem.subs" :key="threeItem.index" :index="threeItem.index">
|
||||||
|
{{ threeItem.title }}
|
||||||
|
</el-menu-item>
|
||||||
|
</el-submenu>
|
||||||
|
<el-menu-item v-else :index="subItem.index" :key="subItem.index">
|
||||||
|
{{ subItem.title }}
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<el-menu-item :index="item.index" :key="item.index">
|
||||||
|
<i :class="item.icon"></i>
|
||||||
|
{{ item.title }}
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-menu>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [{
|
||||||
|
icon: "el-icon-s-home",
|
||||||
|
index: "/main",
|
||||||
|
title: "系统首页",
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-s-tools",
|
||||||
|
index: "/webEdit",
|
||||||
|
title: "网站设置",
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-user-solid",
|
||||||
|
index: "/userList",
|
||||||
|
title: "用户管理"
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-postcard",
|
||||||
|
index: "/postList",
|
||||||
|
title: "文章管理"
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-notebook-2",
|
||||||
|
index: "/sortList",
|
||||||
|
title: "分类管理"
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-edit-outline",
|
||||||
|
index: "/commentList",
|
||||||
|
title: "评论管理"
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-s-comment",
|
||||||
|
index: "/treeHoleList",
|
||||||
|
title: "留言管理"
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-paperclip",
|
||||||
|
index: "/resourceList",
|
||||||
|
title: "资源管理"
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-bank-card",
|
||||||
|
index: "/resourcePathList",
|
||||||
|
title: "资源路径管理"
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 70px;
|
||||||
|
bottom: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-el-menu {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar > ul {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,341 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
|
||||||
|
<path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
|
||||||
|
<path
|
||||||
|
d="M682.666667 204.8h238.933333a34.133333 34.133333 0 0 1 34.133333 34.133333v648.533334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V204.8z"
|
||||||
|
fill="#FFAA44"></path>
|
||||||
|
<path
|
||||||
|
d="M68.266667 921.6a34.133333 34.133333 0 0 0 34.133333 34.133333h785.066667a68.266667 68.266667 0 0 1-68.266667-68.266666V102.4a34.133333 34.133333 0 0 0-34.133333-34.133333H102.4a34.133333 34.133333 0 0 0-34.133333 34.133333v819.2z"
|
||||||
|
fill="#11AA66"></path>
|
||||||
|
<path
|
||||||
|
d="M238.933333 307.2a34.133333 34.133333 0 0 0 0 68.266667h136.533334a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h409.6a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h204.8a34.133333 34.133333 0 1 0 0-68.266667H238.933333z"
|
||||||
|
fill="#FFFFFF"></path>
|
||||||
|
</svg>
|
||||||
|
文章信息
|
||||||
|
</el-tag>
|
||||||
|
<el-form :model="article" :rules="rules" ref="ruleForm" label-width="150px"
|
||||||
|
class="demo-ruleForm">
|
||||||
|
<el-form-item label="标题" prop="articleTitle">
|
||||||
|
<el-input v-model="article.articleTitle"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="内容" prop="articleContent">
|
||||||
|
<mavon-editor ref="md" @imgAdd="imgAdd" v-model="article.articleContent"/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="是否启用评论" prop="commentStatus">
|
||||||
|
<el-tag :type="article.commentStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{article.commentStatus === false ? '否' : '是'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch v-model="article.commentStatus"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="是否推荐" prop="recommendStatus">
|
||||||
|
<el-tag :type="article.recommendStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{article.recommendStatus === false ? '否' : '是'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch v-model="article.recommendStatus"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="是否可见" prop="viewStatus">
|
||||||
|
<el-tag :type="article.viewStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{article.viewStatus === false ? '否' : '是'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch v-model="article.viewStatus"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item v-if="article.viewStatus === false" label="不可见时的访问密码" prop="password">
|
||||||
|
<el-input v-model="article.password"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="封面" prop="articleCover">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-input v-model="article.articleCover"></el-input>
|
||||||
|
<el-image class="table-td-thumb"
|
||||||
|
style="margin-left: 10px"
|
||||||
|
:preview-src-list="[article.articleCover]"
|
||||||
|
:src="article.articleCover"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</div>
|
||||||
|
<uploadPicture :isAdmin="true" :prefix="'articleCover'" style="margin-top: 10px" @addPicture="addArticleCover"
|
||||||
|
:maxSize="5"
|
||||||
|
:maxNumber="1"></uploadPicture>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="分类" prop="sortId">
|
||||||
|
<el-select v-model="article.sortId" placeholder="请选择分类">
|
||||||
|
<el-option
|
||||||
|
v-for="item in sorts"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.sortName"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="标签" prop="labelId">
|
||||||
|
<el-select v-model="article.labelId" placeholder="请选择标签">
|
||||||
|
<el-option
|
||||||
|
v-for="item in labelsTemp"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.labelName"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div class="myCenter" style="margin-bottom: 22px">
|
||||||
|
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
|
||||||
|
<el-button type="danger" @click="resetForm('ruleForm')">重置所有修改</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const uploadPicture = () => import( "../common/uploadPicture");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
uploadPicture
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
id: this.$route.query.id,
|
||||||
|
token: "",
|
||||||
|
article: {
|
||||||
|
articleTitle: "",
|
||||||
|
articleContent: "",
|
||||||
|
commentStatus: true,
|
||||||
|
recommendStatus: false,
|
||||||
|
viewStatus: true,
|
||||||
|
password: "",
|
||||||
|
articleCover: "",
|
||||||
|
sortId: null,
|
||||||
|
labelId: null
|
||||||
|
},
|
||||||
|
sorts: [],
|
||||||
|
labels: [],
|
||||||
|
labelsTemp: [],
|
||||||
|
rules: {
|
||||||
|
articleTitle: [
|
||||||
|
{required: true, message: '请输入标题', trigger: 'change'}
|
||||||
|
],
|
||||||
|
articleContent: [
|
||||||
|
{required: true, message: '请输入内容', trigger: 'change'}
|
||||||
|
],
|
||||||
|
commentStatus: [
|
||||||
|
{required: true, message: '是否启用评论', trigger: 'change'}
|
||||||
|
],
|
||||||
|
recommendStatus: [
|
||||||
|
{required: true, message: '是否推荐', trigger: 'change'}
|
||||||
|
],
|
||||||
|
viewStatus: [
|
||||||
|
{required: true, message: '是否可见', trigger: 'change'}
|
||||||
|
],
|
||||||
|
articleCover: [
|
||||||
|
{required: true, message: '封面', trigger: 'change'}
|
||||||
|
],
|
||||||
|
sortId: [
|
||||||
|
{required: true, message: '分类', trigger: 'change'}
|
||||||
|
],
|
||||||
|
labelId: [
|
||||||
|
{required: true, message: '标签', trigger: 'blur'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
'article.sortId'(newVal, oldVal) {
|
||||||
|
if (oldVal !== null) {
|
||||||
|
this.article.labelId = null;
|
||||||
|
}
|
||||||
|
if (!this.$common.isEmpty(newVal) && !this.$common.isEmpty(this.labels)) {
|
||||||
|
this.labelsTemp = this.labels.filter(l => l.sortId === newVal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getSortAndLabel();
|
||||||
|
this.getUpToken();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getUpToken() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/qiniu/getUpToken", {}, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.token = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
imgAdd(pos, file) {
|
||||||
|
if (this.$common.isEmpty(this.token)) {
|
||||||
|
this.$message({
|
||||||
|
message: "上传出错！",
|
||||||
|
type: "warning"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let fd = new FormData();
|
||||||
|
fd.append("file", file);
|
||||||
|
fd.append("token", this.token);
|
||||||
|
fd.append("key", "articlePicture" + "/" + this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id + new Date().getTime());
|
||||||
|
|
||||||
|
this.$http.uploadQiniu(this.$constant.qiniuUrl, fd)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.key)) {
|
||||||
|
let url = this.$constant.qiniuDownload + res.key;
|
||||||
|
this.$common.saveResource(this, "articlePicture", url, true);
|
||||||
|
this.$refs.md.$img2Url(pos, url);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addArticleCover(res) {
|
||||||
|
this.article.articleCover = res;
|
||||||
|
},
|
||||||
|
getSortAndLabel() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/webInfo/listSortAndLabel")
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.sorts = res.data.sorts;
|
||||||
|
this.labels = res.data.labels;
|
||||||
|
if (!this.$common.isEmpty(this.id)) {
|
||||||
|
this.getArticle();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getArticle() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/admin/article/getArticleById", {id: this.id}, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.article = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
submitForm(formName) {
|
||||||
|
if (this.article.viewStatus === false && this.$common.isEmpty(this.article.password)) {
|
||||||
|
this.$message({
|
||||||
|
message: "文章不可见时必须输入密码！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$refs[formName].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.$common.isEmpty(this.id)) {
|
||||||
|
this.saveArticle(this.article, "/article/saveArticle")
|
||||||
|
} else {
|
||||||
|
this.article.id = this.id;
|
||||||
|
this.saveArticle(this.article, "/article/updateArticle")
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$message({
|
||||||
|
message: "请完善必填项！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetForm(formName) {
|
||||||
|
this.$refs[formName].resetFields();
|
||||||
|
if (!this.$common.isEmpty(this.id)) {
|
||||||
|
this.getArticle();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
saveArticle(value, url) {
|
||||||
|
this.$confirm('确认保存？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.post(this.$constant.baseURL + url, value, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "保存成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
this.$router.push({path: '/postList'});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消保存!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.my-tag {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
background: var(--lightYellow);
|
||||||
|
border: none;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-td-thumb {
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-switch {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,304 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="handle-box">
|
||||||
|
<el-select v-model="pagination.recommendStatus" placeholder="是否推荐" style="width: 120px" class="mrb10">
|
||||||
|
<el-option key="1" label="是" :value="true"></el-option>
|
||||||
|
<el-option key="2" label="否" :value="false"></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-select style="width: 140px" class="mrb10" v-model="pagination.sortId" placeholder="请选择分类">
|
||||||
|
<el-option
|
||||||
|
v-for="item in sorts"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.sortName"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-select style="width: 140px" class="mrb10" v-model="pagination.labelId" placeholder="请选择标签">
|
||||||
|
<el-option
|
||||||
|
v-for="item in labelsTemp"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.labelName"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-input v-model="pagination.searchKey" placeholder="文章标题" class="handle-input mrb10"></el-input>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="searchArticles()">搜索</el-button>
|
||||||
|
<el-button type="danger" @click="clearSearch()">清除参数</el-button>
|
||||||
|
<el-button type="primary" @click="$router.push({path: '/postEdit'})">新增文章</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="articles" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="username" label="作者" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="articleTitle" label="文章标题" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="sort.sortName" label="分类" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="label.labelName" label="标签" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="viewCount" label="浏览量" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="likeCount" label="点赞数" align="center"></el-table-column>
|
||||||
|
<el-table-column label="是否可见" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag :type="scope.row.viewStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{scope.row.viewStatus === false ? '不可见' : '可见'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch @click.native="changeStatus(scope.row, 1)" v-model="scope.row.viewStatus"></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="封面" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-image class="table-td-thumb" :src="scope.row.articleCover" fit="cover"></el-image>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="是否启用评论" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag :type="scope.row.commentStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{scope.row.commentStatus === false ? '否' : '是'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch @click.native="changeStatus(scope.row, 2)" v-model="scope.row.commentStatus"></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="是否推荐" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag :type="scope.row.recommendStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{scope.row.recommendStatus === false ? '否' : '是'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch @click.native="changeStatus(scope.row, 3)" v-model="scope.row.recommendStatus"></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="commentCount" label="评论数" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="updateTime" label="最终修改时间" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="180" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||||||
|
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)" @click="handleDelete(scope.row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination background layout="total, prev, pager, next"
|
||||||
|
:current-page="pagination.current"
|
||||||
|
:page-size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
@current-change="handlePageChange">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isBoss: this.$store.state.currentAdmin.isBoss,
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
recommendStatus: null,
|
||||||
|
sortId: null,
|
||||||
|
labelId: null
|
||||||
|
},
|
||||||
|
articles: [],
|
||||||
|
sorts: [],
|
||||||
|
labels: [],
|
||||||
|
labelsTemp: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
'pagination.sortId'(newVal) {
|
||||||
|
this.pagination.labelId = null;
|
||||||
|
if(!this.$common.isEmpty(newVal) && !this.$common.isEmpty(this.labels)){
|
||||||
|
this.labelsTemp = this.labels.filter(l => l.sortId === newVal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getArticles();
|
||||||
|
this.getSortAndLabel();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getSortAndLabel() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/webInfo/listSortAndLabel")
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.sorts = res.data.sorts;
|
||||||
|
this.labels = res.data.labels;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
clearSearch() {
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
recommendStatus: null,
|
||||||
|
sortId: null,
|
||||||
|
labelId: null
|
||||||
|
}
|
||||||
|
this.getArticles();
|
||||||
|
},
|
||||||
|
getArticles() {
|
||||||
|
let url = "";
|
||||||
|
if (this.isBoss) {
|
||||||
|
url = "/admin/article/boss/list";
|
||||||
|
} else {
|
||||||
|
url = "/admin/article/user/list";
|
||||||
|
}
|
||||||
|
this.$http.post(this.$constant.baseURL + url, this.pagination, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.articles = res.data.records;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handlePageChange(val) {
|
||||||
|
this.pagination.current = val;
|
||||||
|
this.getArticles();
|
||||||
|
},
|
||||||
|
searchArticles() {
|
||||||
|
this.pagination.total = 0;
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getArticles();
|
||||||
|
},
|
||||||
|
changeStatus(article, flag) {
|
||||||
|
let param;
|
||||||
|
if (flag === 1) {
|
||||||
|
param = {
|
||||||
|
articleId: article.id,
|
||||||
|
viewStatus: article.viewStatus
|
||||||
|
}
|
||||||
|
} else if (flag === 2) {
|
||||||
|
param = {
|
||||||
|
articleId: article.id,
|
||||||
|
commentStatus: article.commentStatus
|
||||||
|
}
|
||||||
|
} else if (flag === 3) {
|
||||||
|
param = {
|
||||||
|
articleId: article.id,
|
||||||
|
recommendStatus: article.recommendStatus
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$http.get(this.$constant.baseURL + "/admin/article/changeArticleStatus", param, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (flag === 1) {
|
||||||
|
this.$message({
|
||||||
|
duration: 0,
|
||||||
|
showClose: true,
|
||||||
|
message: "修改成功！注意，文章不可见时必须设置密码才能访问！",
|
||||||
|
type: "warning"
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$message({
|
||||||
|
message: "修改成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleDelete(item) {
|
||||||
|
this.$confirm('确认删除？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/article/deleteArticle", {id: item.id}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getArticles();
|
||||||
|
this.$message({
|
||||||
|
message: "删除成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消删除!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleEdit(item) {
|
||||||
|
this.$router.push({path: '/postEdit', query: {id: item.id}});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.handle-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-input {
|
||||||
|
width: 160px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mrb10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-td-thumb {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-switch {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,234 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div class="handle-box">
|
||||||
|
<el-select v-model="pagination.resourceType" placeholder="资源类型" class="handle-select mrb10">
|
||||||
|
<el-option key="10" label="表情包" value="internetMeme"></el-option>
|
||||||
|
<el-option key="1" label="用户头像" value="userAvatar"></el-option>
|
||||||
|
<el-option key="2" label="文章封面" value="articleCover"></el-option>
|
||||||
|
<el-option key="3" label="文章图片" value="articlePicture"></el-option>
|
||||||
|
<el-option key="5" label="网站头像" value="webAvatar"></el-option>
|
||||||
|
<el-option key="4" label="背景图片" value="webBackgroundImage"></el-option>
|
||||||
|
<el-option key="6" label="随机头像" value="randomAvatar"></el-option>
|
||||||
|
<el-option key="7" label="随机封面" value="randomCover"></el-option>
|
||||||
|
<el-option key="8" label="画笔图片" value="graffiti"></el-option>
|
||||||
|
<el-option key="9" label="评论图片" value="commentPicture"></el-option>
|
||||||
|
<el-option key="11" label="聊天群头像" value="im/groupAvatar"></el-option>
|
||||||
|
<el-option key="12" label="群聊天图片" value="im/groupMessage"></el-option>
|
||||||
|
<el-option key="13" label="朋友聊天图片" value="im/friendMessage"></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
|
||||||
|
<el-button type="primary" @click="addResources()">新增资源</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="resources" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="userId" label="用户ID" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="type" label="资源类型" align="center"></el-table-column>
|
||||||
|
<el-table-column label="状态" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag :type="scope.row.status === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{scope.row.status === false ? '禁用' : '启用'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch @click.native="changeStatus(scope.row)" v-model="scope.row.status"></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="路径" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-image :preview-src-list="[scope.row.path]" class="table-td-thumb" :src="scope.row.path"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="180" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
|
||||||
|
@click="handleDelete(scope.row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination background layout="total, prev, pager, next"
|
||||||
|
:current-page="pagination.current"
|
||||||
|
:page-size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
@current-change="handlePageChange">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog title="图片"
|
||||||
|
:visible.sync="resourceDialog"
|
||||||
|
width="25%"
|
||||||
|
:append-to-body="true"
|
||||||
|
destroy-on-close
|
||||||
|
center>
|
||||||
|
<div>
|
||||||
|
<uploadPicture :isAdmin="true" :prefix="pagination.resourceType" @addPicture="addPicture" :maxSize="5"
|
||||||
|
:maxNumber="10"></uploadPicture>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
const uploadPicture = () => import( "../common/uploadPicture");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
uploadPicture
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
resourceType: ""
|
||||||
|
},
|
||||||
|
resources: [],
|
||||||
|
resourceDialog: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getResources();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleDelete(item) {
|
||||||
|
this.$confirm('确认删除资源？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/resource/deleteResource", {path: item.path}, true, false)
|
||||||
|
.then((res) => {
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getResources();
|
||||||
|
this.$message({
|
||||||
|
message: "删除成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消删除!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
addPicture(res) {
|
||||||
|
},
|
||||||
|
|
||||||
|
addResources() {
|
||||||
|
if (this.$common.isEmpty(this.pagination.resourceType)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请选择资源类型！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.resourceDialog = true;
|
||||||
|
},
|
||||||
|
search() {
|
||||||
|
this.pagination.total = 0;
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getResources();
|
||||||
|
},
|
||||||
|
getResources() {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/resource/listResource", this.pagination, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.resources = res.data.records;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
changeStatus(item) {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/resource/changeResourceStatus", {
|
||||||
|
id: item.id,
|
||||||
|
flag: item.status
|
||||||
|
}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "修改成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handlePageChange(val) {
|
||||||
|
this.pagination.current = val;
|
||||||
|
this.getResources();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.handle-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-select {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mrb10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-td-thumb {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-switch {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,330 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="margin-bottom: 20px">
|
||||||
|
<el-button type="primary" @click="sortDialog = true">新增分类</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="sortInfo" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="sortName" label="分类名称" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="sortDescription" label="分类描述" align="center"></el-table-column>
|
||||||
|
<el-table-column label="分类类型" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.sortType === 0">导航栏分类</span>
|
||||||
|
<span v-else-if="scope.row.sortType === 1">普通分类</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="priority" label="导航栏分类优先级" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="countOfSort" label="文章总数" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="380" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-edit" @click="editSort(scope.row)">
|
||||||
|
编辑分类
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" icon="el-icon-edit" @click="sayLabel(scope.row)">
|
||||||
|
查看标签
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" icon="el-icon-edit" @click="insertLabel(scope.row)">
|
||||||
|
新增标签
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
|
||||||
|
@click="deleteHandle(scope.row.id, 1)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-table v-if="!$common.isEmpty(sort)" :data="sort.labels" border class="table"
|
||||||
|
style="margin-top: 40px"
|
||||||
|
header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column label="分类名称" align="center">
|
||||||
|
<span>{{sort.sortName}}</span>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="labelName" label="标签名称" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="labelDescription" label="标签描述" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="countOfLabel" label="文章总数" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="320" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-edit" @click="editLabel(scope.row)">
|
||||||
|
编辑标签
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
|
||||||
|
@click="deleteHandle(scope.row.id, 2)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-dialog title="分类"
|
||||||
|
:visible.sync="sortDialog"
|
||||||
|
width="30%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
:append-to-body="true"
|
||||||
|
destroy-on-close
|
||||||
|
center>
|
||||||
|
<div class="my-dialog">
|
||||||
|
<div class="myCenter">
|
||||||
|
<el-radio-group v-model="sortForHttp.sortType">
|
||||||
|
<el-radio-button :label="0">导航栏分类</el-radio-button>
|
||||||
|
<el-radio-button :label="1">普通分类</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
<el-input placeholder="请输入分类名称" v-model="sortForHttp.sortName">
|
||||||
|
<template slot="prepend">分类名称</template>
|
||||||
|
</el-input>
|
||||||
|
<el-input placeholder="请输入分类描述" v-model="sortForHttp.sortDescription">
|
||||||
|
<template slot="prepend">分类描述</template>
|
||||||
|
</el-input>
|
||||||
|
<el-input type="number" v-if="sortForHttp.sortType === 0" placeholder="请输入整数，数字小的在前面"
|
||||||
|
v-model="sortForHttp.priority">
|
||||||
|
<template slot="prepend">导航栏分类优先级</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="handleClose()">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="saveSortEdit()">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog title="标签"
|
||||||
|
:visible.sync="labelDialog"
|
||||||
|
width="30%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
:append-to-body="true"
|
||||||
|
destroy-on-close
|
||||||
|
center>
|
||||||
|
<div class="my-dialog">
|
||||||
|
<el-input placeholder="请输入标签名称" v-model="labelForHttp.labelName">
|
||||||
|
<template slot="prepend">标签名称</template>
|
||||||
|
</el-input>
|
||||||
|
<el-input placeholder="请输入标签描述" v-model="labelForHttp.labelDescription">
|
||||||
|
<template slot="prepend">标签描述</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="handleClose()">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="saveLabelEdit()">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sortDialog: false,
|
||||||
|
labelDialog: false,
|
||||||
|
sortInfo: [],
|
||||||
|
sort: {},
|
||||||
|
sortForHttp: {
|
||||||
|
id: null,
|
||||||
|
sortName: "",
|
||||||
|
sortDescription: "",
|
||||||
|
sortType: null,
|
||||||
|
priority: null
|
||||||
|
},
|
||||||
|
labelForHttp: {
|
||||||
|
id: null,
|
||||||
|
sortId: null,
|
||||||
|
labelName: "",
|
||||||
|
labelDescription: ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getSortInfo();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
deleteHandle(id, flag) {
|
||||||
|
let url;
|
||||||
|
if (flag === 1) {
|
||||||
|
url = "/webInfo/deleteSort";
|
||||||
|
} else if (flag === 2) {
|
||||||
|
url = "/webInfo/deleteLabel";
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$confirm('确认删除？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.get(this.$constant.baseURL + url, {id: id}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "删除成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
this.getSortInfo();
|
||||||
|
this.sort = {};
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消删除!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveSortEdit() {
|
||||||
|
if (this.$common.isEmpty(this.sortForHttp.sortType) ||
|
||||||
|
this.$common.isEmpty(this.sortForHttp.sortName) ||
|
||||||
|
this.$common.isEmpty(this.sortForHttp.sortDescription)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请完善所有分类信息！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.sortForHttp.sortType === 0 && this.$common.isEmpty(this.sortForHttp.priority)) {
|
||||||
|
this.$message({
|
||||||
|
message: "导航栏分类必须输入优先级！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let url;
|
||||||
|
if (this.$common.isEmpty(this.sortForHttp.id)) {
|
||||||
|
url = "/webInfo/saveSort";
|
||||||
|
} else {
|
||||||
|
url = "/webInfo/updateSort";
|
||||||
|
}
|
||||||
|
this.$http.post(this.$constant.baseURL + url, this.sortForHttp, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "保存成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
this.getSortInfo();
|
||||||
|
this.handleClose();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveLabelEdit() {
|
||||||
|
if (this.$common.isEmpty(this.labelForHttp.labelName) ||
|
||||||
|
this.$common.isEmpty(this.labelForHttp.labelDescription)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请完善所有标签信息！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let url;
|
||||||
|
if (this.$common.isEmpty(this.labelForHttp.id)) {
|
||||||
|
url = "/webInfo/saveLabel";
|
||||||
|
} else {
|
||||||
|
url = "/webInfo/updateLabel";
|
||||||
|
}
|
||||||
|
this.$http.post(this.$constant.baseURL + url, this.labelForHttp, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "保存成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
this.getSortInfo();
|
||||||
|
this.handleClose();
|
||||||
|
this.sort = {};
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
editSort(sort) {
|
||||||
|
this.sortDialog = true;
|
||||||
|
this.sortForHttp.id = sort.id;
|
||||||
|
this.sortForHttp.sortName = sort.sortName;
|
||||||
|
this.sortForHttp.sortDescription = sort.sortDescription;
|
||||||
|
this.sortForHttp.sortType = sort.sortType;
|
||||||
|
this.sortForHttp.priority = sort.priority;
|
||||||
|
},
|
||||||
|
editLabel(label) {
|
||||||
|
this.labelDialog = true;
|
||||||
|
this.labelForHttp.id = label.id;
|
||||||
|
this.labelForHttp.sortId = label.sortId;
|
||||||
|
this.labelForHttp.labelName = label.labelName;
|
||||||
|
this.labelForHttp.labelDescription = label.labelDescription;
|
||||||
|
},
|
||||||
|
insertLabel(sort) {
|
||||||
|
this.labelForHttp.sortId = sort.id;
|
||||||
|
this.labelDialog = true;
|
||||||
|
},
|
||||||
|
handleClose() {
|
||||||
|
this.labelForHttp = {
|
||||||
|
id: null,
|
||||||
|
sortId: null,
|
||||||
|
labelName: "",
|
||||||
|
labelDescription: ""
|
||||||
|
};
|
||||||
|
this.sortForHttp = {
|
||||||
|
id: null,
|
||||||
|
sortName: "",
|
||||||
|
sortDescription: "",
|
||||||
|
sortType: null,
|
||||||
|
priority: null
|
||||||
|
};
|
||||||
|
this.sortDialog = false;
|
||||||
|
this.labelDialog = false;
|
||||||
|
},
|
||||||
|
sayLabel(sort) {
|
||||||
|
this.sort = sort;
|
||||||
|
},
|
||||||
|
getSortInfo() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/webInfo/getSortInfo")
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.sortInfo = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.my-dialog > div {
|
||||||
|
margin: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-dialog >>> input::-webkit-inner-spin-button {
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,137 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
|
||||||
|
<path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
|
||||||
|
<path
|
||||||
|
d="M682.666667 204.8h238.933333a34.133333 34.133333 0 0 1 34.133333 34.133333v648.533334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V204.8z"
|
||||||
|
fill="#FFAA44"></path>
|
||||||
|
<path
|
||||||
|
d="M68.266667 921.6a34.133333 34.133333 0 0 0 34.133333 34.133333h785.066667a68.266667 68.266667 0 0 1-68.266667-68.266666V102.4a34.133333 34.133333 0 0 0-34.133333-34.133333H102.4a34.133333 34.133333 0 0 0-34.133333 34.133333v819.2z"
|
||||||
|
fill="#11AA66"></path>
|
||||||
|
<path
|
||||||
|
d="M238.933333 307.2a34.133333 34.133333 0 0 0 0 68.266667h136.533334a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h409.6a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h204.8a34.133333 34.133333 0 1 0 0-68.266667H238.933333z"
|
||||||
|
fill="#FFFFFF"></path>
|
||||||
|
</svg>
|
||||||
|
留言列表
|
||||||
|
</el-tag>
|
||||||
|
<el-table :data="treeHoles" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="message" label="留言内容" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="180" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)" @click="handleDelete(scope.row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination background layout="total, prev, pager, next"
|
||||||
|
:current-page="pagination.current"
|
||||||
|
:page-size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
@current-change="handlePageChange">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0
|
||||||
|
},
|
||||||
|
treeHoles: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getTreeHoles()
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getTreeHoles() {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/admin/treeHole/boss/list", this.pagination, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.treeHoles = res.data.records;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handlePageChange(val) {
|
||||||
|
this.pagination.current = val;
|
||||||
|
this.getTreeHoles();
|
||||||
|
},
|
||||||
|
handleDelete(item) {
|
||||||
|
this.$confirm('确认删除？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/webInfo/deleteTreeHole", {id: item.id}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getTreeHoles();
|
||||||
|
this.$message({
|
||||||
|
message: "删除成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消删除!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.my-tag {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
background: var(--lightYellow);
|
||||||
|
border: none;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,281 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div class="handle-box">
|
||||||
|
<el-select v-model="pagination.userType" placeholder="用户类型" class="handle-select mrb10">
|
||||||
|
<el-option key="1" label="Boss" :value="0"></el-option>
|
||||||
|
<el-option key="2" label="管理员" :value="1"></el-option>
|
||||||
|
<el-option key="3" label="普通用户" :value="2"></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-select v-model="pagination.userStatus" placeholder="用户状态" class="handle-select mrb10">
|
||||||
|
<el-option key="1" label="启用" :value="true"></el-option>
|
||||||
|
<el-option key="2" label="禁用" :value="false"></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-input v-model="pagination.searchKey" placeholder="用户名/手机号" class="handle-input mrb10"></el-input>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="searchUser()">搜索</el-button>
|
||||||
|
<el-button type="danger" @click="clearSearch()">清除参数</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="users" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="username" label="用户名" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="phoneNumber" label="手机号" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="email" label="邮箱" align="center"></el-table-column>
|
||||||
|
<el-table-column label="用户状态" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag :type="scope.row.userStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{scope.row.userStatus === false ? '禁用' : '启用'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch @click.native="changeUserStatus(scope.row)" v-model="scope.row.userStatus"></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="头像" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-image class="table-td-thumb" :src="scope.row.avatar" fit="cover"></el-image>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="性别" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag type="success"
|
||||||
|
v-if="scope.row.gender === 1"
|
||||||
|
disable-transitions>
|
||||||
|
男
|
||||||
|
</el-tag>
|
||||||
|
<el-tag type="success"
|
||||||
|
v-else-if="scope.row.gender === 2"
|
||||||
|
disable-transitions>
|
||||||
|
女
|
||||||
|
</el-tag>
|
||||||
|
<el-tag type="success"
|
||||||
|
v-else
|
||||||
|
disable-transitions>
|
||||||
|
保密
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="introduction" label="简介" align="center"></el-table-column>
|
||||||
|
<el-table-column label="用户类型" width="100" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag type="success"
|
||||||
|
v-if="scope.row.userType === 0"
|
||||||
|
style="cursor: pointer"
|
||||||
|
@click.native="editUser(scope.row)"
|
||||||
|
disable-transitions>
|
||||||
|
Boss
|
||||||
|
</el-tag>
|
||||||
|
<el-tag type="success"
|
||||||
|
v-else-if="scope.row.userType === 1"
|
||||||
|
style="cursor: pointer"
|
||||||
|
@click.native="editUser(scope.row)"
|
||||||
|
disable-transitions>
|
||||||
|
管理员
|
||||||
|
</el-tag>
|
||||||
|
<el-tag type="success"
|
||||||
|
v-else
|
||||||
|
style="cursor: pointer"
|
||||||
|
@click.native="editUser(scope.row)"
|
||||||
|
disable-transitions>
|
||||||
|
普通用户
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="createTime" label="注册时间" align="center"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination background layout="total, prev, pager, next"
|
||||||
|
:current-page="pagination.current"
|
||||||
|
:page-size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
@current-change="handlePageChange">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 编辑弹出框 -->
|
||||||
|
<el-dialog title="修改用户类型"
|
||||||
|
:visible.sync="editVisible"
|
||||||
|
width="30%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
:append-to-body="true"
|
||||||
|
destroy-on-close
|
||||||
|
center>
|
||||||
|
<div class="myCenter">
|
||||||
|
<el-radio-group v-model="changeUser.userType">
|
||||||
|
<el-radio-button :label="0">Boss</el-radio-button>
|
||||||
|
<el-radio-button :label="1">管理员</el-radio-button>
|
||||||
|
<el-radio-button :label="2">普通用户</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="handleClose()">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="saveEdit()">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
userStatus: null,
|
||||||
|
userType: null
|
||||||
|
},
|
||||||
|
users: [],
|
||||||
|
changeUser: {
|
||||||
|
id: null,
|
||||||
|
userType: null
|
||||||
|
},
|
||||||
|
editVisible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getUsers();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
clearSearch() {
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
userStatus: null,
|
||||||
|
userType: null
|
||||||
|
}
|
||||||
|
this.getUsers();
|
||||||
|
},
|
||||||
|
getUsers() {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/admin/user/list", this.pagination, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.users = res.data.records;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
changeUserStatus(user) {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/admin/user/changeUserStatus", {
|
||||||
|
userId: user.id,
|
||||||
|
flag: user.userStatus
|
||||||
|
}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "修改成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
editUser(user) {
|
||||||
|
this.changeUser.id = user.id;
|
||||||
|
this.changeUser.userType = user.userType;
|
||||||
|
this.editVisible = true;
|
||||||
|
},
|
||||||
|
handlePageChange(val) {
|
||||||
|
this.pagination.current = val;
|
||||||
|
this.getUsers();
|
||||||
|
},
|
||||||
|
searchUser() {
|
||||||
|
this.pagination.total = 0;
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getUsers();
|
||||||
|
},
|
||||||
|
handleClose() {
|
||||||
|
this.changeUser = {
|
||||||
|
id: null,
|
||||||
|
userType: null
|
||||||
|
};
|
||||||
|
this.editVisible = false;
|
||||||
|
},
|
||||||
|
saveEdit() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/admin/user/changeUserType", {
|
||||||
|
userId: this.changeUser.id,
|
||||||
|
userType: this.changeUser.userType
|
||||||
|
}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.handleClose();
|
||||||
|
this.getUsers();
|
||||||
|
this.$message({
|
||||||
|
message: "修改成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.handle-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-select {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-input {
|
||||||
|
width: 160px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mrb10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-td-thumb {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-switch {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
<template>
|
||||||
|
<div class="myCenter verify-container">
|
||||||
|
<div class="verify-content">
|
||||||
|
<div>
|
||||||
|
<el-avatar :size="50" :src="$store.state.webInfo.avatar"></el-avatar>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-input v-model="account">
|
||||||
|
<template slot="prepend">账号</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-input v-model="password" type="password">
|
||||||
|
<template slot="prepend">密码</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<proButton :info="'提交'"
|
||||||
|
@click.native="login()"
|
||||||
|
:before="$constant.before_color_2"
|
||||||
|
:after="$constant.after_color_2">
|
||||||
|
</proButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const proButton = () => import( "../common/proButton");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
proButton
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
redirect: this.$route.query.redirect,
|
||||||
|
account: "",
|
||||||
|
password: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
login() {
|
||||||
|
if (this.$common.isEmpty(this.account) || this.$common.isEmpty(this.password)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请输入账号或密码！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let user = {
|
||||||
|
account: this.account.trim(),
|
||||||
|
password: this.$common.encrypt(this.password.trim()),
|
||||||
|
isAdmin: true
|
||||||
|
};
|
||||||
|
|
||||||
|
this.$http.post(this.$constant.baseURL + "/user/login", user, true, false)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
localStorage.setItem("adminToken", res.data.accessToken);
|
||||||
|
this.$store.commit("loadCurrentAdmin", res.data);
|
||||||
|
this.account = "";
|
||||||
|
this.password = "";
|
||||||
|
this.$router.push({path: this.redirect});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.verify-container {
|
||||||
|
height: 100vh;
|
||||||
|
background: var(--verifyImage) center center / cover repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verify-content {
|
||||||
|
background: var(--maxWhiteMask);
|
||||||
|
padding: 30px 40px 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verify-content > div:first-child {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
top: -25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verify-content > div:not(:first-child) {
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verify-content > div:last-child > div {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,552 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
|
||||||
|
<path
|
||||||
|
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||||
|
fill="#8C7BFD"></path>
|
||||||
|
<path
|
||||||
|
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||||
|
fill="#FFE37B"></path>
|
||||||
|
</svg>
|
||||||
|
基础信息
|
||||||
|
</el-tag>
|
||||||
|
<el-form :model="webInfo" :rules="rules" ref="ruleForm" label-width="100px"
|
||||||
|
class="demo-ruleForm">
|
||||||
|
<el-form-item label="网站名称" prop="webName">
|
||||||
|
<el-input v-model="webInfo.webName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="网站标题" prop="webTitle">
|
||||||
|
<el-input v-model="webInfo.webTitle"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="页脚" prop="footer">
|
||||||
|
<el-input v-model="webInfo.footer"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-switch @click.native="changeWebStatus(webInfo)" v-model="webInfo.status"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="背景" prop="backgroundImage">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-input v-model="webInfo.backgroundImage"></el-input>
|
||||||
|
<el-image class="table-td-thumb"
|
||||||
|
style="margin-left: 10px"
|
||||||
|
:preview-src-list="[webInfo.backgroundImage]"
|
||||||
|
:src="webInfo.backgroundImage"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</div>
|
||||||
|
<uploadPicture :isAdmin="true" :prefix="'webBackgroundImage'" style="margin-top: 15px"
|
||||||
|
@addPicture="addBackgroundImage"
|
||||||
|
:maxSize="5"
|
||||||
|
:maxNumber="1"></uploadPicture>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="头像" prop="avatar">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-input v-model="webInfo.avatar"></el-input>
|
||||||
|
<el-image class="table-td-thumb"
|
||||||
|
style="margin-left: 10px"
|
||||||
|
:preview-src-list="[webInfo.avatar]"
|
||||||
|
:src="webInfo.avatar"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</div>
|
||||||
|
<uploadPicture :isAdmin="true" :prefix="'webAvatar'" style="margin-top: 15px" @addPicture="addAvatar"
|
||||||
|
:maxSize="5"
|
||||||
|
:maxNumber="1"></uploadPicture>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="提示" prop="waifuJson">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-input :disabled="disabled" :rows="6" type="textarea" v-model="webInfo.waifuJson"></el-input>
|
||||||
|
<i class="el-icon-edit my-icon" @click="disabled = !disabled"></i>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div class="myCenter" style="margin-bottom: 22px">
|
||||||
|
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
|
||||||
|
<path
|
||||||
|
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||||
|
fill="#8C7BFD"></path>
|
||||||
|
<path
|
||||||
|
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||||
|
fill="#FFE37B"></path>
|
||||||
|
</svg>
|
||||||
|
公告
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
:key="i"
|
||||||
|
v-for="(notice, i) in notices"
|
||||||
|
closable
|
||||||
|
:disable-transitions="false"
|
||||||
|
@close="handleClose(notices, notice)">
|
||||||
|
{{notice}}
|
||||||
|
</el-tag>
|
||||||
|
<el-input
|
||||||
|
class="input-new-tag"
|
||||||
|
v-if="inputNoticeVisible"
|
||||||
|
v-model="inputNoticeValue"
|
||||||
|
ref="saveNoticeInput"
|
||||||
|
size="small"
|
||||||
|
@keyup.enter.native="handleInputNoticeConfirm"
|
||||||
|
@blur="handleInputNoticeConfirm">
|
||||||
|
</el-input>
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showNoticeInput()">+ 公告</el-button>
|
||||||
|
<div class="myCenter" style="margin-bottom: 22px">
|
||||||
|
<el-button type="primary" @click="saveNotice()">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
|
||||||
|
<path
|
||||||
|
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||||
|
fill="#8C7BFD"></path>
|
||||||
|
<path
|
||||||
|
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||||
|
fill="#FFE37B"></path>
|
||||||
|
</svg>
|
||||||
|
随机名称
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
:key="i"
|
||||||
|
effect="dark"
|
||||||
|
v-for="(name, i) in randomName"
|
||||||
|
closable
|
||||||
|
:disable-transitions="false"
|
||||||
|
:type="types[Math.floor(Math.random() * 5)]"
|
||||||
|
@close="handleClose(randomName, name)">
|
||||||
|
{{name}}
|
||||||
|
</el-tag>
|
||||||
|
<el-input
|
||||||
|
class="input-new-tag"
|
||||||
|
v-if="inputRandomNameVisible"
|
||||||
|
v-model="inputRandomNameValue"
|
||||||
|
ref="saveRandomNameInput"
|
||||||
|
size="small"
|
||||||
|
@keyup.enter.native="handleInputRandomNameConfirm"
|
||||||
|
@blur="handleInputRandomNameConfirm">
|
||||||
|
</el-input>
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showRandomNameInput">+ 随机名称</el-button>
|
||||||
|
<div class="myCenter" style="margin-bottom: 22px">
|
||||||
|
<el-button type="primary" @click="saveRandomName()">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
|
||||||
|
<path
|
||||||
|
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||||
|
fill="#8C7BFD"></path>
|
||||||
|
<path
|
||||||
|
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||||
|
fill="#FFE37B"></path>
|
||||||
|
</svg>
|
||||||
|
随机头像
|
||||||
|
</el-tag>
|
||||||
|
<div :key="i"
|
||||||
|
style="display: flex"
|
||||||
|
v-for="(avatar, i) in randomAvatar">
|
||||||
|
<el-tag
|
||||||
|
style="white-space: normal;height: unset"
|
||||||
|
closable
|
||||||
|
:disable-transitions="false"
|
||||||
|
@close="handleClose(randomAvatar, avatar)">
|
||||||
|
{{avatar}}
|
||||||
|
</el-tag>
|
||||||
|
<div>
|
||||||
|
<el-image class="table-td-thumb"
|
||||||
|
style="margin: 10px"
|
||||||
|
:preview-src-list="[avatar]"
|
||||||
|
:src="avatar"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-input
|
||||||
|
class="input-new-tag"
|
||||||
|
v-if="inputRandomAvatarVisible"
|
||||||
|
v-model="inputRandomAvatarValue"
|
||||||
|
ref="saveRandomAvatarInput"
|
||||||
|
size="small"
|
||||||
|
@keyup.enter.native="handleInputRandomAvatarConfirm"
|
||||||
|
@blur="handleInputRandomAvatarConfirm">
|
||||||
|
</el-input>
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showRandomAvatarInput">+ 随机头像</el-button>
|
||||||
|
<uploadPicture :isAdmin="true" :prefix="'randomAvatar'" style="margin: 10px" @addPicture="addRandomAvatar"
|
||||||
|
:maxSize="1"
|
||||||
|
:maxNumber="5"></uploadPicture>
|
||||||
|
<div class="myCenter" style="margin-bottom: 22px">
|
||||||
|
<el-button type="primary" @click="saveRandomAvatar()">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
|
||||||
|
<path
|
||||||
|
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||||
|
fill="#8C7BFD"></path>
|
||||||
|
<path
|
||||||
|
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||||
|
fill="#FFE37B"></path>
|
||||||
|
</svg>
|
||||||
|
随机封面
|
||||||
|
</el-tag>
|
||||||
|
<div :key="i"
|
||||||
|
style="display: flex"
|
||||||
|
v-for="(cover, i) in randomCover">
|
||||||
|
<el-tag
|
||||||
|
style="white-space: normal;height: unset"
|
||||||
|
closable
|
||||||
|
:disable-transitions="false"
|
||||||
|
@close="handleClose(randomCover, cover)">
|
||||||
|
{{cover}}
|
||||||
|
</el-tag>
|
||||||
|
<div>
|
||||||
|
<el-image class="table-td-thumb"
|
||||||
|
style="margin: 10px"
|
||||||
|
:preview-src-list="[cover]"
|
||||||
|
:src="cover"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-input
|
||||||
|
class="input-new-tag"
|
||||||
|
v-if="inputRandomCoverVisible"
|
||||||
|
v-model="inputRandomCoverValue"
|
||||||
|
ref="saveRandomCoverInput"
|
||||||
|
size="small"
|
||||||
|
@keyup.enter.native="handleInputRandomCoverConfirm"
|
||||||
|
@blur="handleInputRandomCoverConfirm">
|
||||||
|
</el-input>
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showRandomCoverInput">+ 随机封面</el-button>
|
||||||
|
<uploadPicture :isAdmin="true" :prefix="'randomCover'" style="margin: 10px" @addPicture="addRandomCover"
|
||||||
|
:maxSize="5"
|
||||||
|
:maxNumber="5"></uploadPicture>
|
||||||
|
<div class="myCenter" style="margin-bottom: 40px">
|
||||||
|
<el-button type="primary" @click="saveRandomCover()">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-button type="danger" @click="resetForm('ruleForm')">重置所有修改</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const uploadPicture = () => import( "../common/uploadPicture");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
uploadPicture
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
disabled: true,
|
||||||
|
types: ['', 'success', 'info', 'danger', 'warning'],
|
||||||
|
inputNoticeVisible: false,
|
||||||
|
inputNoticeValue: "",
|
||||||
|
inputRandomNameVisible: false,
|
||||||
|
inputRandomNameValue: "",
|
||||||
|
inputRandomAvatarVisible: false,
|
||||||
|
inputRandomAvatarValue: "",
|
||||||
|
inputRandomCoverVisible: false,
|
||||||
|
inputRandomCoverValue: "",
|
||||||
|
webInfo: {
|
||||||
|
id: null,
|
||||||
|
webName: "",
|
||||||
|
webTitle: "",
|
||||||
|
footer: "",
|
||||||
|
backgroundImage: "",
|
||||||
|
avatar: "",
|
||||||
|
waifuJson: "",
|
||||||
|
status: false
|
||||||
|
},
|
||||||
|
notices: [],
|
||||||
|
randomAvatar: [],
|
||||||
|
randomName: [],
|
||||||
|
randomCover: [],
|
||||||
|
rules: {
|
||||||
|
webName: [
|
||||||
|
{required: true, message: '请输入网站名称', trigger: 'blur'},
|
||||||
|
{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'change'}
|
||||||
|
],
|
||||||
|
webTitle: [
|
||||||
|
{required: true, message: '请输入网站标题', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
footer: [
|
||||||
|
{required: true, message: '请输入页脚', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
backgroundImage: [
|
||||||
|
{required: true, message: '请输入背景', trigger: 'change'}
|
||||||
|
],
|
||||||
|
status: [
|
||||||
|
{required: true, message: '请设置网站状态', trigger: 'change'}
|
||||||
|
],
|
||||||
|
avatar: [
|
||||||
|
{required: true, message: '请上传头像', trigger: 'change'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getWebInfo();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
addBackgroundImage(res) {
|
||||||
|
this.webInfo.backgroundImage = res;
|
||||||
|
},
|
||||||
|
addAvatar(res) {
|
||||||
|
this.webInfo.avatar = res;
|
||||||
|
},
|
||||||
|
addRandomAvatar(res) {
|
||||||
|
this.randomAvatar.push(res);
|
||||||
|
},
|
||||||
|
addRandomCover(res) {
|
||||||
|
this.randomCover.push(res);
|
||||||
|
},
|
||||||
|
changeWebStatus(webInfo) {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/webInfo/updateWebInfo", {
|
||||||
|
id: webInfo.id,
|
||||||
|
status: webInfo.status
|
||||||
|
}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.getWebInfo();
|
||||||
|
this.$message({
|
||||||
|
message: "保存成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getWebInfo() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/admin/webInfo/getAdminWebInfo", {}, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.webInfo.id = res.data.id;
|
||||||
|
this.webInfo.webName = res.data.webName;
|
||||||
|
this.webInfo.webTitle = res.data.webTitle;
|
||||||
|
this.webInfo.footer = res.data.footer;
|
||||||
|
this.webInfo.backgroundImage = res.data.backgroundImage;
|
||||||
|
this.webInfo.avatar = res.data.avatar;
|
||||||
|
this.webInfo.waifuJson = res.data.waifuJson;
|
||||||
|
this.webInfo.status = res.data.status;
|
||||||
|
this.notices = JSON.parse(res.data.notices);
|
||||||
|
this.randomAvatar = JSON.parse(res.data.randomAvatar);
|
||||||
|
this.randomName = JSON.parse(res.data.randomName);
|
||||||
|
this.randomCover = JSON.parse(res.data.randomCover);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
submitForm(formName) {
|
||||||
|
this.$refs[formName].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.updateWebInfo(this.webInfo)
|
||||||
|
} else {
|
||||||
|
this.$message({
|
||||||
|
message: "请完善必填项！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetForm(formName) {
|
||||||
|
this.$refs[formName].resetFields();
|
||||||
|
this.getWebInfo();
|
||||||
|
},
|
||||||
|
handleClose(array, item) {
|
||||||
|
array.splice(array.indexOf(item), 1);
|
||||||
|
},
|
||||||
|
handleInputNoticeConfirm() {
|
||||||
|
if (this.inputNoticeValue) {
|
||||||
|
this.notices.push(this.inputNoticeValue);
|
||||||
|
}
|
||||||
|
this.inputNoticeVisible = false;
|
||||||
|
this.inputNoticeValue = '';
|
||||||
|
},
|
||||||
|
showNoticeInput() {
|
||||||
|
this.inputNoticeVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.saveNoticeInput.$refs.input.focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveNotice() {
|
||||||
|
let param = {
|
||||||
|
id: this.webInfo.id,
|
||||||
|
notices: JSON.stringify(this.notices)
|
||||||
|
}
|
||||||
|
this.updateWebInfo(param);
|
||||||
|
},
|
||||||
|
handleInputRandomNameConfirm() {
|
||||||
|
if (this.inputRandomNameValue) {
|
||||||
|
this.randomName.push(this.inputRandomNameValue);
|
||||||
|
}
|
||||||
|
this.inputRandomNameVisible = false;
|
||||||
|
this.inputRandomNameValue = '';
|
||||||
|
},
|
||||||
|
showRandomNameInput() {
|
||||||
|
this.inputRandomNameVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.saveRandomNameInput.$refs.input.focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveRandomName() {
|
||||||
|
let param = {
|
||||||
|
id: this.webInfo.id,
|
||||||
|
randomName: JSON.stringify(this.randomName)
|
||||||
|
}
|
||||||
|
this.updateWebInfo(param);
|
||||||
|
},
|
||||||
|
handleInputRandomAvatarConfirm() {
|
||||||
|
if (this.inputRandomAvatarValue) {
|
||||||
|
this.randomAvatar.push(this.inputRandomAvatarValue);
|
||||||
|
}
|
||||||
|
this.inputRandomAvatarVisible = false;
|
||||||
|
this.inputRandomAvatarValue = '';
|
||||||
|
},
|
||||||
|
showRandomAvatarInput() {
|
||||||
|
this.inputRandomAvatarVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.saveRandomAvatarInput.$refs.input.focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveRandomAvatar() {
|
||||||
|
let param = {
|
||||||
|
id: this.webInfo.id,
|
||||||
|
randomAvatar: JSON.stringify(this.randomAvatar)
|
||||||
|
}
|
||||||
|
this.updateWebInfo(param);
|
||||||
|
},
|
||||||
|
handleInputRandomCoverConfirm() {
|
||||||
|
if (this.inputRandomCoverValue) {
|
||||||
|
this.randomCover.push(this.inputRandomCoverValue);
|
||||||
|
}
|
||||||
|
this.inputRandomCoverVisible = false;
|
||||||
|
this.inputRandomCoverValue = '';
|
||||||
|
},
|
||||||
|
showRandomCoverInput() {
|
||||||
|
this.inputRandomCoverVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.saveRandomCoverInput.$refs.input.focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveRandomCover() {
|
||||||
|
let param = {
|
||||||
|
id: this.webInfo.id,
|
||||||
|
randomCover: JSON.stringify(this.randomCover)
|
||||||
|
}
|
||||||
|
this.updateWebInfo(param);
|
||||||
|
},
|
||||||
|
updateWebInfo(value) {
|
||||||
|
this.$confirm('确认保存？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/webInfo/updateWebInfo", value, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.getWebInfo();
|
||||||
|
this.$message({
|
||||||
|
message: "保存成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消保存!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.my-tag {
|
||||||
|
margin-bottom: 20px !important;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
background: var(--lightYellow);
|
||||||
|
border: none;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tag {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-new-tag {
|
||||||
|
margin: 10px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-new-tag {
|
||||||
|
width: 200px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-td-thumb {
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,413 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 评论框 -->
|
||||||
|
<div style="margin-bottom: 40px">
|
||||||
|
<div class="comment-head">
|
||||||
|
<i class="el-icon-edit-outline" style="font-weight: bold;font-size: 22px;"></i> 评论
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<!-- 文字评论 -->
|
||||||
|
<div v-show="!isGraffiti">
|
||||||
|
<commentBox @showGraffiti="isGraffiti = !isGraffiti"
|
||||||
|
@submitComment="submitComment">
|
||||||
|
</commentBox>
|
||||||
|
</div>
|
||||||
|
<!-- 画笔 -->
|
||||||
|
<!-- <div v-show="isGraffiti">-->
|
||||||
|
<!-- <graffiti @showComment="isGraffiti = !isGraffiti"-->
|
||||||
|
<!-- @addGraffitiComment="addGraffitiComment">-->
|
||||||
|
<!-- </graffiti>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 评论内容 -->
|
||||||
|
<div v-if="comments.length > 0">
|
||||||
|
<!-- 评论数量 -->
|
||||||
|
<div class="commentInfo-title">
|
||||||
|
<span style="font-size: 1.15rem">Comments | </span>
|
||||||
|
<span>{{ total }} 条评论</span>
|
||||||
|
</div>
|
||||||
|
<!-- 评论详情 -->
|
||||||
|
<div id="comment-content" class="commentInfo-detail"
|
||||||
|
v-for="(item, index) in comments"
|
||||||
|
:key="index">
|
||||||
|
<!-- 头像 -->
|
||||||
|
<el-avatar shape="square" class="commentInfo-avatar" :size="35" :src="item.avatar"></el-avatar>
|
||||||
|
|
||||||
|
<div style="flex: 1;padding-left: 12px">
|
||||||
|
<!-- 评论信息 -->
|
||||||
|
<div style="display: flex;justify-content: space-between">
|
||||||
|
<div>
|
||||||
|
<span class="commentInfo-username">{{ item.username }}</span>
|
||||||
|
<span class="commentInfo-master" v-if="item.userId === userId">博主</span>
|
||||||
|
<span class="commentInfo-other">{{ $common.getDateDiff(item.createTime) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="commentInfo-reply" @click="replyDialog(item, item)">
|
||||||
|
<span v-if="item.childComments.total > 0">{{item.childComments.total}} </span><span>回复</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 评论内容 -->
|
||||||
|
<div class="commentInfo-content">
|
||||||
|
<span v-html="item.commentContent"></span>
|
||||||
|
</div>
|
||||||
|
<!-- 回复模块 -->
|
||||||
|
<div v-if="!$common.isEmpty(item.childComments) && !$common.isEmpty(item.childComments.records)">
|
||||||
|
<div class="commentInfo-detail" v-for="(childItem, i) in item.childComments.records" :key="i">
|
||||||
|
<!-- 头像 -->
|
||||||
|
<el-avatar shape="square" class="commentInfo-avatar" :size="30" :src="childItem.avatar"></el-avatar>
|
||||||
|
|
||||||
|
<div style="flex: 1;padding-left: 12px">
|
||||||
|
<!-- 评论信息 -->
|
||||||
|
<div style="display: flex;justify-content: space-between">
|
||||||
|
<div>
|
||||||
|
<span class="commentInfo-username-small">{{ childItem.username }}</span>
|
||||||
|
<span class="commentInfo-master" v-if="childItem.userId === userId">博主</span>
|
||||||
|
<span class="commentInfo-other">{{ $common.getDateDiff(childItem.createTime) }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="commentInfo-reply" @click="replyDialog(childItem, item)">回复</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 评论内容 -->
|
||||||
|
<div class="commentInfo-content">
|
||||||
|
<template v-if="childItem.parentCommentId !== item.id &&
|
||||||
|
childItem.parentUserId !== childItem.userId">
|
||||||
|
<span style="color: var(--blue)">@{{ childItem.parentUsername }} </span>:
|
||||||
|
</template>
|
||||||
|
<span v-html="childItem.commentContent"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination-wrap" v-if="item.childComments.records.length < item.childComments.total">
|
||||||
|
<div class="pagination"
|
||||||
|
@click="toChildPage(item)">
|
||||||
|
展开
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<proPage :current="pagination.current"
|
||||||
|
:size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
:buttonSize="6"
|
||||||
|
:color="$constant.commentPageColor"
|
||||||
|
@toPage="toPage">
|
||||||
|
</proPage>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="myCenter" style="color: var(--greyFont)">
|
||||||
|
<i>来发第一个评论啦~</i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog title="评论"
|
||||||
|
:visible.sync="replyDialogVisible"
|
||||||
|
width="30%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
:append-to-body="true"
|
||||||
|
destroy-on-close
|
||||||
|
center>
|
||||||
|
<div>
|
||||||
|
<commentBox :disableGraffiti="true"
|
||||||
|
@submitComment="submitReply">
|
||||||
|
</commentBox>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// const graffiti = () => import( "./graffiti");
|
||||||
|
const commentBox = () => import( "./commentBox");
|
||||||
|
const proPage = () => import( "../common/proPage");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
// graffiti,
|
||||||
|
commentBox,
|
||||||
|
proPage
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
source: {
|
||||||
|
type: Number
|
||||||
|
},
|
||||||
|
userId: {
|
||||||
|
type: Number
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isGraffiti: false,
|
||||||
|
total: 0,
|
||||||
|
replyDialogVisible: false,
|
||||||
|
floorComment: {},
|
||||||
|
replyComment: {},
|
||||||
|
comments: [],
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
source: this.source,
|
||||||
|
floorCommentId: null
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getComments(this.pagination);
|
||||||
|
this.getTotal();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toPage(page) {
|
||||||
|
this.pagination.current = page;
|
||||||
|
window.scrollTo({
|
||||||
|
top: document.getElementById('comment-content').offsetTop
|
||||||
|
});
|
||||||
|
this.getComments(this.pagination);
|
||||||
|
},
|
||||||
|
getTotal() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/comment/getCommentCount", {source: this.source})
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.total = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toChildPage(floorComment) {
|
||||||
|
floorComment.childComments.current += 1;
|
||||||
|
let pagination = {
|
||||||
|
current: floorComment.childComments.current,
|
||||||
|
size: 5,
|
||||||
|
total: 0,
|
||||||
|
source: this.source,
|
||||||
|
floorCommentId: floorComment.id
|
||||||
|
}
|
||||||
|
this.getComments(pagination, floorComment, true);
|
||||||
|
},
|
||||||
|
emoji(comments, flag) {
|
||||||
|
comments.forEach(c => {
|
||||||
|
c.commentContent = c.commentContent.replace(/\n/g, '<br/>');
|
||||||
|
c.commentContent = this.$common.faceReg(c.commentContent);
|
||||||
|
c.commentContent = this.$common.pictureReg(c.commentContent);
|
||||||
|
if (flag) {
|
||||||
|
if (!this.$common.isEmpty(c.childComments) && !this.$common.isEmpty(c.childComments.records)) {
|
||||||
|
c.childComments.records.forEach(cc => {
|
||||||
|
c.commentContent = c.commentContent.replace(/\n/g, '<br/>');
|
||||||
|
cc.commentContent = this.$common.faceReg(cc.commentContent);
|
||||||
|
cc.commentContent = this.$common.pictureReg(cc.commentContent);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getComments(pagination, floorComment = {}, isToPage = false) {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/comment/listComment", pagination)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data) && !this.$common.isEmpty(res.data.records)) {
|
||||||
|
if (this.$common.isEmpty(floorComment)) {
|
||||||
|
this.comments = res.data.records;
|
||||||
|
pagination.total = res.data.total;
|
||||||
|
this.emoji(this.comments, true);
|
||||||
|
} else {
|
||||||
|
if (isToPage === false) {
|
||||||
|
floorComment.childComments = res.data;
|
||||||
|
} else {
|
||||||
|
floorComment.childComments.total = res.data.total;
|
||||||
|
floorComment.childComments.records = floorComment.childComments.records.concat(res.data.records);
|
||||||
|
}
|
||||||
|
this.emoji(floorComment.childComments.records, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addGraffitiComment(graffitiComment) {
|
||||||
|
this.submitComment(graffitiComment);
|
||||||
|
},
|
||||||
|
submitComment(commentContent) {
|
||||||
|
let comment = {
|
||||||
|
source: this.source,
|
||||||
|
commentContent: commentContent
|
||||||
|
};
|
||||||
|
|
||||||
|
this.$http.post(this.$constant.baseURL + "/comment/saveComment", comment)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '保存成功！'
|
||||||
|
});
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
source: this.source,
|
||||||
|
floorCommentId: null
|
||||||
|
}
|
||||||
|
this.getComments(this.pagination);
|
||||||
|
this.getTotal();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
submitReply(commentContent) {
|
||||||
|
let comment = {
|
||||||
|
source: this.source,
|
||||||
|
floorCommentId: this.floorComment.id,
|
||||||
|
commentContent: commentContent,
|
||||||
|
parentCommentId: this.replyComment.id,
|
||||||
|
parentUserId: this.replyComment.userId
|
||||||
|
};
|
||||||
|
|
||||||
|
let floorComment = this.floorComment;
|
||||||
|
|
||||||
|
this.$http.post(this.$constant.baseURL + "/comment/saveComment", comment)
|
||||||
|
.then((res) => {
|
||||||
|
let pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 5,
|
||||||
|
total: 0,
|
||||||
|
source: this.source,
|
||||||
|
floorCommentId: floorComment.id
|
||||||
|
}
|
||||||
|
this.getComments(pagination, floorComment);
|
||||||
|
this.getTotal();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.handleClose();
|
||||||
|
},
|
||||||
|
replyDialog(comment, floorComment) {
|
||||||
|
this.replyComment = comment;
|
||||||
|
this.floorComment = floorComment;
|
||||||
|
this.replyDialogVisible = true;
|
||||||
|
},
|
||||||
|
handleClose() {
|
||||||
|
this.replyDialogVisible = false;
|
||||||
|
this.floorComment = {};
|
||||||
|
this.replyComment = {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.comment-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 40px 0 20px 0;
|
||||||
|
user-select: none;
|
||||||
|
color: var(--themeBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-title {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: var(--greyFont);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-detail {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-avatar {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-username {
|
||||||
|
color: var(--orangeRed);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-username-small {
|
||||||
|
color: var(--orangeRed);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-master {
|
||||||
|
color: var(--green);
|
||||||
|
border: 1px solid var(--green);
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 2px 4px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-other {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--greyFont);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-reply {
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
color: var(--white);
|
||||||
|
background: var(--themeBackground);
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
padding: 3px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-content {
|
||||||
|
margin: 15px 0 25px;
|
||||||
|
padding: 18px 20px;
|
||||||
|
background: var(--commentContent);
|
||||||
|
border-radius: 12px;
|
||||||
|
color: var(--black);
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
padding: 6px 20px;
|
||||||
|
border: 1px solid var(--lightGray);
|
||||||
|
border-radius: 3rem;
|
||||||
|
color: var(--greyFont);
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination:hover {
|
||||||
|
border: 1px solid var(--themeBackground);
|
||||||
|
color: var(--themeBackground);
|
||||||
|
box-shadow: 0 0 5px var(--themeBackground);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,209 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 框 -->
|
||||||
|
<textarea
|
||||||
|
class="comment-textarea"
|
||||||
|
v-model="commentContent"
|
||||||
|
placeholder="写下点什么..."
|
||||||
|
maxlength="2500"/>
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<div class="myBetween" style="margin-bottom: 10px">
|
||||||
|
<div style="display: flex">
|
||||||
|
<div :class="{'emoji-active':showEmoji}"
|
||||||
|
@click="showEmoji = !showEmoji">
|
||||||
|
<i class="el-icon-orange myEmoji"></i>
|
||||||
|
</div>
|
||||||
|
<div @click="openPicture()">
|
||||||
|
<i class="el-icon-picture myPicture"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex">
|
||||||
|
<!-- <proButton :info="'涂鸦'"-->
|
||||||
|
<!-- v-show="!$common.mobile() && !disableGraffiti"-->
|
||||||
|
<!-- @click.native="showGraffiti()"-->
|
||||||
|
<!-- :before="$constant.before_color_1"-->
|
||||||
|
<!-- :after="$constant.after_color_1"-->
|
||||||
|
<!-- style="margin-right: 6px">-->
|
||||||
|
<!-- </proButton>-->
|
||||||
|
<proButton :info="'提交'"
|
||||||
|
@click.native="submitComment()"
|
||||||
|
:before="$constant.before_color_2"
|
||||||
|
:after="$constant.after_color_2">
|
||||||
|
</proButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 表情 -->
|
||||||
|
<emoji @addEmoji="addEmoji" :showEmoji="showEmoji"></emoji>
|
||||||
|
|
||||||
|
<el-dialog title="图片"
|
||||||
|
:visible.sync="showPicture"
|
||||||
|
width="25%"
|
||||||
|
:append-to-body="true"
|
||||||
|
destroy-on-close
|
||||||
|
center>
|
||||||
|
<div>
|
||||||
|
<uploadPicture :prefix="'commentPicture'" @addPicture="addPicture" :maxSize="5"
|
||||||
|
:maxNumber="1"></uploadPicture>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const emoji = () => import( "../common/emoji");
|
||||||
|
const proButton = () => import( "../common/proButton");
|
||||||
|
const uploadPicture = () => import( "../common/uploadPicture");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
emoji,
|
||||||
|
proButton,
|
||||||
|
uploadPicture
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
disableGraffiti: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
commentContent: "",
|
||||||
|
showEmoji: false,
|
||||||
|
showPicture: false,
|
||||||
|
picture: {
|
||||||
|
name: this.$store.state.currentUser.username,
|
||||||
|
url: ""
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
openPicture() {
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先登录！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser.email)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先绑定邮箱！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showPicture = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
addPicture(res) {
|
||||||
|
this.picture.url = res;
|
||||||
|
this.savePicture();
|
||||||
|
},
|
||||||
|
savePicture() {
|
||||||
|
let img = "<" + this.picture.name + "," + this.picture.url + ">";
|
||||||
|
this.commentContent += img;
|
||||||
|
this.picture.url = "";
|
||||||
|
this.showPicture = false;
|
||||||
|
},
|
||||||
|
addEmoji(key) {
|
||||||
|
this.commentContent += key;
|
||||||
|
},
|
||||||
|
showGraffiti() {
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先登录！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser.email)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先绑定邮箱！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.commentContent = "";
|
||||||
|
this.$emit("showGraffiti");
|
||||||
|
},
|
||||||
|
submitComment() {
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先登录！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser.email)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先绑定邮箱！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.commentContent.trim() === "") {
|
||||||
|
this.$message({
|
||||||
|
message: "你还没写呢~",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$emit("submitComment", this.commentContent.trim());
|
||||||
|
this.commentContent = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.comment-textarea {
|
||||||
|
border: 1px solid var(--lightGray);
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 15px;
|
||||||
|
min-height: 180px;
|
||||||
|
/* 不改变大小 */
|
||||||
|
resize: none;
|
||||||
|
/* 不改变边框 */
|
||||||
|
outline: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-image: var(--commentURL);
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-textarea:focus {
|
||||||
|
border-color: var(--themeBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.myEmoji {
|
||||||
|
font-size: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.5s;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myEmoji:hover {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myPicture {
|
||||||
|
font-size: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-active {
|
||||||
|
color: var(--red);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,390 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 画布 -->
|
||||||
|
<div style="padding: 5px" @mousemove="canvasOutMove($event)" @touchmove="canvasOutMove($event)">
|
||||||
|
<div class="graffiti-container">
|
||||||
|
<canvas id="canvas"
|
||||||
|
width="766"
|
||||||
|
height="400"
|
||||||
|
@mousedown="canvasDown($event)"
|
||||||
|
@mouseup="canvasUp($event)"
|
||||||
|
@mousemove="canvasMove($event)"
|
||||||
|
@touchstart="canvasDown($event)"
|
||||||
|
@touchend="canvasUp($event)"
|
||||||
|
@touchmove="canvasMove($event)">
|
||||||
|
</canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="padding: 10px 0 0 5px;">
|
||||||
|
<!-- 颜色 -->
|
||||||
|
<div class="graffiti-tools">
|
||||||
|
<span class="graffiti-title">画笔颜色</span>
|
||||||
|
<div class="myCenter" style="margin-left: 2rem">
|
||||||
|
<div v-for="(color, index) in colors"
|
||||||
|
:class="{ activeColor: config.lineColor === color }"
|
||||||
|
:style="{ background: color }"
|
||||||
|
@click="setColor(color)"
|
||||||
|
class="graffiti-color"
|
||||||
|
:key="index">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 大小 -->
|
||||||
|
<div class="graffiti-tools">
|
||||||
|
<span class="graffiti-title">画笔大小</span>
|
||||||
|
<div class="myCenter" style="margin-left: 2rem">
|
||||||
|
<i v-for="(pen, index) in brushSize"
|
||||||
|
:key="index"
|
||||||
|
class="graffiti-size"
|
||||||
|
:class="[pen.className, { activeSize: config.lineWidth === pen.lineWidth }]"
|
||||||
|
@click="setBrush(pen.lineWidth)">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 操作 -->
|
||||||
|
<div class="graffiti-tools">
|
||||||
|
<span class="graffiti-title">操作</span>
|
||||||
|
<div class="myCenter" style="margin-left: 3.7rem">
|
||||||
|
<i v-for="(control, index) in controls"
|
||||||
|
:title="control.title"
|
||||||
|
:class="control.className"
|
||||||
|
class="graffiti-operate"
|
||||||
|
@click="controlCanvas(control.action)"
|
||||||
|
:key="index">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<div class="graffiti-tools" style="justify-content: center">
|
||||||
|
<proButton :info="'文字'"
|
||||||
|
@click.native="showComment()"
|
||||||
|
:before="$constant.before_color_1"
|
||||||
|
:after="$constant.after_color_1"
|
||||||
|
style="margin-right: 6px">
|
||||||
|
</proButton>
|
||||||
|
<proButton :info="'提交'"
|
||||||
|
@click.native="getImage()"
|
||||||
|
:before="$constant.before_color_2"
|
||||||
|
:after="$constant.after_color_2">
|
||||||
|
</proButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const proButton = () => import( "../common/proButton");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
proButton
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
token: "",
|
||||||
|
context: {},
|
||||||
|
canvasMoveUse: false,
|
||||||
|
// 存储当前表面状态数组-上一步
|
||||||
|
preDrawAry: [],
|
||||||
|
// 存储当前表面状态数组-下一步
|
||||||
|
nextDrawAry: [],
|
||||||
|
// 中间数组
|
||||||
|
middleAry: [],
|
||||||
|
// 配置参数
|
||||||
|
config: {
|
||||||
|
lineWidth: 5,
|
||||||
|
lineColor: "#8154A3",
|
||||||
|
shadowBlur: 2,
|
||||||
|
},
|
||||||
|
colors: ["#8154A3", "#fef4ac", "#0018ba", "#ffc200", "#f32f15", "#cccccc", "#5ab639"],
|
||||||
|
brushSize: [{
|
||||||
|
className: "small el-icon-edit",
|
||||||
|
lineWidth: 5,
|
||||||
|
}, {
|
||||||
|
className: "middle el-icon-edit",
|
||||||
|
lineWidth: 10,
|
||||||
|
}, {
|
||||||
|
className: "big el-icon-edit",
|
||||||
|
lineWidth: 15,
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
controls() {
|
||||||
|
return [{
|
||||||
|
title: "上一步",
|
||||||
|
action: "prev",
|
||||||
|
className: this.preDrawAry.length
|
||||||
|
? "active el-icon-arrow-left"
|
||||||
|
: "ban el-icon-arrow-left",
|
||||||
|
}, {
|
||||||
|
title: "下一步",
|
||||||
|
action: "next",
|
||||||
|
className: this.nextDrawAry.length
|
||||||
|
? "active el-icon-arrow-right"
|
||||||
|
: "ban el-icon-arrow-right",
|
||||||
|
}, {
|
||||||
|
title: "清除",
|
||||||
|
action: "clear",
|
||||||
|
className:
|
||||||
|
this.preDrawAry.length || this.nextDrawAry.length
|
||||||
|
? "active el-icon-refresh"
|
||||||
|
: "ban el-icon-refresh",
|
||||||
|
}];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const canvas = document.querySelector("#canvas");
|
||||||
|
this.context = canvas.getContext("2d", {willReadFrequently: true});
|
||||||
|
this.initDraw();
|
||||||
|
this.setCanvasStyle();
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (!this.$common.isEmpty(this.$store.state.currentUser) && !this.$common.isEmpty(this.$store.state.currentUser.email)) {
|
||||||
|
this.getUpToken();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getUpToken() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/qiniu/getUpToken")
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.token = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
canvasOutMove(e) {
|
||||||
|
const canvas = document.querySelector("#canvas");
|
||||||
|
if (e.target !== canvas) {
|
||||||
|
this.canvasMoveUse = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initDraw() {
|
||||||
|
const preData = this.context.getImageData(0, 0, 1200, 600);
|
||||||
|
// 空绘图表面进栈
|
||||||
|
this.middleAry.push(preData);
|
||||||
|
},
|
||||||
|
canvasUp(e) {
|
||||||
|
const preData = this.context.getImageData(0, 0, 1200, 600);
|
||||||
|
if (!this.nextDrawAry.length) {
|
||||||
|
// 当前绘图表面进栈
|
||||||
|
this.middleAry.push(preData);
|
||||||
|
} else {
|
||||||
|
this.middleAry = [];
|
||||||
|
this.middleAry = this.middleAry.concat(this.preDrawAry);
|
||||||
|
this.middleAry.push(preData);
|
||||||
|
this.nextDrawAry = [];
|
||||||
|
}
|
||||||
|
this.canvasMoveUse = false;
|
||||||
|
this.context.beginPath();
|
||||||
|
},
|
||||||
|
canvasDown(e) {
|
||||||
|
this.canvasMoveUse = true;
|
||||||
|
// client是基于整个页面的坐标
|
||||||
|
// offset是canvas距离顶部以及左边的距离
|
||||||
|
this.setCanvasStyle();
|
||||||
|
// 清除子路径
|
||||||
|
this.context.beginPath();
|
||||||
|
this.context.moveTo(e.layerX, e.layerY);
|
||||||
|
// 当前绘图表面状态
|
||||||
|
const preData = this.context.getImageData(0, 0, 1200, 600);
|
||||||
|
// 当前绘图表面进栈
|
||||||
|
this.preDrawAry.push(preData);
|
||||||
|
},
|
||||||
|
canvasMove(e) {
|
||||||
|
if (this.canvasMoveUse) {
|
||||||
|
this.context.lineTo(e.layerX, e.layerY);
|
||||||
|
this.context.stroke();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 设置绘画配置
|
||||||
|
setCanvasStyle() {
|
||||||
|
this.context.lineWidth = this.config.lineWidth;
|
||||||
|
this.context.shadowBlur = this.config.shadowBlur;
|
||||||
|
this.context.shadowColor = this.config.lineColor;
|
||||||
|
this.context.strokeStyle = this.config.lineColor;
|
||||||
|
},
|
||||||
|
// 设置颜色
|
||||||
|
setColor(color) {
|
||||||
|
this.config.lineColor = color;
|
||||||
|
},
|
||||||
|
// 设置笔刷大小
|
||||||
|
setBrush(size) {
|
||||||
|
this.config.lineWidth = size;
|
||||||
|
},
|
||||||
|
controlCanvas(action) {
|
||||||
|
switch (action) {
|
||||||
|
case "prev":
|
||||||
|
if (this.preDrawAry.length) {
|
||||||
|
const popData = this.preDrawAry.pop();
|
||||||
|
const midData = this.middleAry[this.preDrawAry.length + 1];
|
||||||
|
this.nextDrawAry.push(midData);
|
||||||
|
this.context.putImageData(popData, 0, 0);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "next":
|
||||||
|
if (this.nextDrawAry.length) {
|
||||||
|
const popData = this.nextDrawAry.pop();
|
||||||
|
const midData = this.middleAry[this.middleAry.length - this.nextDrawAry.length - 2];
|
||||||
|
this.preDrawAry.push(midData);
|
||||||
|
this.context.putImageData(popData, 0, 0);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "clear":
|
||||||
|
this.clearContext();
|
||||||
|
this.middleAry = [this.middleAry[0]];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clearContext() {
|
||||||
|
this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
|
||||||
|
this.preDrawAry = [];
|
||||||
|
this.nextDrawAry = [];
|
||||||
|
},
|
||||||
|
showComment() {
|
||||||
|
this.clearContext();
|
||||||
|
this.$emit("showComment");
|
||||||
|
},
|
||||||
|
getImage() {
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先登录！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$common.isEmpty(this.token)) {
|
||||||
|
this.$message({
|
||||||
|
message: "上传出错！",
|
||||||
|
type: "warning"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.preDrawAry.length < 1) {
|
||||||
|
this.$message({
|
||||||
|
message: "你还没画呢~",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const canvas = document.querySelector("#canvas");
|
||||||
|
const dataURL = canvas.toDataURL("image/png");
|
||||||
|
let arr = dataURL.split(","),
|
||||||
|
mine = arr[0].match(/:(.*?);/)[1],
|
||||||
|
str = atob(arr[1]),
|
||||||
|
n = str.length,
|
||||||
|
u8arr = new Uint8Array(n);
|
||||||
|
while (n--) {
|
||||||
|
u8arr[n] = str.charCodeAt(n);
|
||||||
|
}
|
||||||
|
let obj = new Blob([u8arr], {type: mine});
|
||||||
|
let fd = new FormData();
|
||||||
|
fd.append("file", obj);
|
||||||
|
fd.append("token", this.token);
|
||||||
|
fd.append("key", "graffiti" + "/" + this.$store.state.currentUser.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentUser.id + new Date().getTime());
|
||||||
|
|
||||||
|
this.$http.uploadQiniu(this.$constant.qiniuUrl, fd)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.key)) {
|
||||||
|
this.clearContext();
|
||||||
|
let url = this.$constant.qiniuDownload + res.key;
|
||||||
|
this.$common.saveResource(this, "graffiti", url);
|
||||||
|
let img = "<你画我猜," + url + ">";
|
||||||
|
this.$emit("addGraffitiComment", img);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.graffiti-container {
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2px var(--lightGray) solid;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-tools {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-title {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-color {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
float: left;
|
||||||
|
margin-right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-color:hover {
|
||||||
|
width: 1.3rem;
|
||||||
|
height: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeColor {
|
||||||
|
width: 1.3rem;
|
||||||
|
height: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-size {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-size.small {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-size.middle {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-size.big {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeSize {
|
||||||
|
background-color: var(--themeBackground);
|
||||||
|
color: var(--white);
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-operate {
|
||||||
|
margin-right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-operate.ban {
|
||||||
|
cursor: not-allowed
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<transition name="body">
|
||||||
|
<div v-show="showEmoji">
|
||||||
|
<span class="emoji-item"
|
||||||
|
v-for="(value, key, index) in emojiListURL"
|
||||||
|
:key="index"
|
||||||
|
@click="addEmoji(key)">
|
||||||
|
<img class="emoji" :src="value" :title="key" width="24px" height="24px"/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
showEmoji: {
|
||||||
|
type: Boolean
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
emojiList: this.$constant.emojiList,
|
||||||
|
emojiListURL: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.emojiListURL = this.getEmojiList(this.emojiList);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addEmoji(key) {
|
||||||
|
this.$emit("addEmoji", key);
|
||||||
|
},
|
||||||
|
getEmojiList(emojiList) {
|
||||||
|
let emojiName;
|
||||||
|
let url;
|
||||||
|
let result = {}
|
||||||
|
for (let i = 0; i < emojiList.length; i++) {
|
||||||
|
emojiName = "[" + emojiList[i] + "]";
|
||||||
|
let j = i + 1;
|
||||||
|
url = "https://pzh-blog-photo.oss-cn-shenzhen.aliyuncs.com/emoji/q" + j + ".gif";
|
||||||
|
result[emojiName] = url;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.emoji-item {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-item:hover {
|
||||||
|
transition: all 0.2s;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
background: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji {
|
||||||
|
margin: 0.25rem;
|
||||||
|
/* 把此元素放置在父元素的中部 */
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-enter-active, .body-leave-active {
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-enter, .body-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="myFooter-wrap" v-show="showFooter">
|
||||||
|
<div class="myFooter">
|
||||||
|
<div class="footer-title">{{$store.state.webInfo.footer}}</div>
|
||||||
|
<div class="icp">本网站由 <a href="https://poetize.cn" target="_blank">寻国记</a> 强力支持</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
showFooter: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.myFooter-wrap {
|
||||||
|
user-select: none;
|
||||||
|
animation: hideToShow 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myFooter {
|
||||||
|
border-radius: 1.5rem 1.5rem 0 0;
|
||||||
|
background: var(--gradientBG);
|
||||||
|
text-align: center;
|
||||||
|
color: var(--white);
|
||||||
|
background-size: 300% 300%;
|
||||||
|
animation: gradientBG 10s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-title {
|
||||||
|
padding-top: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icp, .icp a {
|
||||||
|
color: var(--maxGreyFont);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icp {
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icp a {
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icp a:hover {
|
||||||
|
color: var(--themeBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
<template>
|
||||||
|
<div class="myButton">
|
||||||
|
<div :style="beforeColor">{{info}}</div>
|
||||||
|
<div :style="afterColor">{{info}}</div>
|
||||||
|
<div :style="afterColor">{{info}}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
info: {
|
||||||
|
type: String,
|
||||||
|
default: "确定"
|
||||||
|
},
|
||||||
|
before: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
after: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
beforeColor: {"background": this.before},
|
||||||
|
afterColor: {"background": this.after}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.myButton {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
position: relative;
|
||||||
|
width: 66px;
|
||||||
|
height: 33px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--white);
|
||||||
|
font-size: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myButton div {
|
||||||
|
width: 66px;
|
||||||
|
height: 33px;
|
||||||
|
line-height: 33px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myButton div:nth-child(2) {
|
||||||
|
width: 100px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
transform: translateX(-120px) skewX(-30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.myButton div:nth-child(3) {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
transform: translateX(-120px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.myButton:hover div:nth-child(2) {
|
||||||
|
transform: translateX(20px) skewX(-30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.myButton:hover div:nth-child(3) {
|
||||||
|
transform: translateX(0px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,131 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="total > size" class="myCenter">
|
||||||
|
<ul class="page-content">
|
||||||
|
<li class="page-item" v-if="current !== 1" @click="toPage(-1)">
|
||||||
|
👈
|
||||||
|
</li>
|
||||||
|
<template v-if="current === 1">
|
||||||
|
<li class="page-item"
|
||||||
|
:style="{background: index === 1 ? color : '', color: index === 1 ? 'var(--white)' : ''}"
|
||||||
|
v-for="index of realButtonSize"
|
||||||
|
:key="index"
|
||||||
|
@click="toPage(index)">
|
||||||
|
{{index}}
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="current === totalSize">
|
||||||
|
<li class="page-item"
|
||||||
|
:style="{background: index === realButtonSize ? color : '', color: index === realButtonSize ? 'var(--white)' : ''}"
|
||||||
|
v-for="index of realButtonSize"
|
||||||
|
:key="index"
|
||||||
|
@click="toPage(current - (realButtonSize - index))">
|
||||||
|
{{current - (realButtonSize - index)}}
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<li class="page-item"
|
||||||
|
:style="{background: Math.ceil(realButtonSize/2) - index === 0 ? color : '', color: Math.ceil(realButtonSize/2) - index === 0 ? 'var(--white)' : ''}"
|
||||||
|
v-for="index of realButtonSize"
|
||||||
|
:key="index"
|
||||||
|
@click="toPage(current - (Math.ceil(realButtonSize/2) - index))">
|
||||||
|
{{current - (Math.ceil(realButtonSize/2) - index)}}
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
<li class="page-item" v-if="current !== totalSize" @click="toPage(-2)">
|
||||||
|
👉
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
current: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: Number,
|
||||||
|
default: 10
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
buttonSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 3
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
totalSize: 0,
|
||||||
|
realButtonSize: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
total(newVal) {
|
||||||
|
this.totalSize = Math.ceil(this.total / this.size);
|
||||||
|
this.realButtonSize = this.buttonSize < this.totalSize ? this.buttonSize : this.totalSize;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.totalSize = Math.ceil(this.total / this.size);
|
||||||
|
this.realButtonSize = this.buttonSize < this.totalSize ? this.buttonSize : this.totalSize;
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
toPage(flag) {
|
||||||
|
if (flag === -1) {
|
||||||
|
this.$emit("toPage", this.current - 1);
|
||||||
|
} else if (flag === -2) {
|
||||||
|
this.$emit("toPage", this.current + 1);
|
||||||
|
} else {
|
||||||
|
this.$emit("toPage", flag);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item {
|
||||||
|
margin: 0 10px;
|
||||||
|
list-style: none;
|
||||||
|
border: 1px solid var(--lightGray);
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: var(--black);
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item:hover {
|
||||||
|
border: 1px solid var(--themeBackground);
|
||||||
|
box-shadow: 0 0 5px var(--themeBackground);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div class="myTag" :style="bg">
|
||||||
|
<span class="name">🔖 {{info}}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
info: {
|
||||||
|
type: String,
|
||||||
|
default: "一只小毛驴"
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
bg: {"background": this.color}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.myTag {
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--white);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myTag:hover {
|
||||||
|
background: var(--gradualRed) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="!$common.isEmpty(treeHoleList)">
|
||||||
|
<div class="process-line">
|
||||||
|
<div class="process-item"
|
||||||
|
v-for="(treeHole, index) in treeHoleList"
|
||||||
|
:key="index">
|
||||||
|
<div class="timeline-item-time">
|
||||||
|
<span>
|
||||||
|
{{$common.getDateDiff(treeHole.createTime)}}
|
||||||
|
</span>
|
||||||
|
<span @click="deleteTreeHole(treeHole.id)"
|
||||||
|
class="process-delete"
|
||||||
|
v-if="!$common.isEmpty($store.state.currentUser) && $store.state.currentUser.id === treeHole.userId">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="16" height="16" style="vertical-align: -3px">
|
||||||
|
<path
|
||||||
|
d="M921.1392 155.392h-270.592v-48.2816c0-22.7328-18.432-41.1648-41.1648-41.1648H426.3424a41.1648 41.1648 0 0 0-41.1648 41.1648v48.2816H110.6432c-14.1312 0-25.6 11.4688-25.6 25.6s11.4688 25.6 25.6 25.6h810.496c14.1312 0 25.6-11.4688 25.6-25.6s-11.4688-25.6-25.6-25.6zM170.8032 260.0448v592.8448c0 50.8928 41.2672 92.16 92.16 92.16h500.6848c50.8928 0 92.16-41.2672 92.16-92.16V260.0448H170.8032z m249.1392 462.7968c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z m243.1488 0c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z"
|
||||||
|
fill="#FF623E"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item-content" v-html="treeHole.content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
treeHoleList: {
|
||||||
|
type: Array
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
deleteTreeHole(id) {
|
||||||
|
this.$emit("deleteTreeHole", id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.process-line {
|
||||||
|
border-left: 2px solid var(--lightGreen);
|
||||||
|
padding: 50px 20px 10px;
|
||||||
|
margin-left: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-line:before {
|
||||||
|
content: '';
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border: 4px solid var(--maxLightRed);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: -1px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background-color: var(--white);
|
||||||
|
animation: weiYanShadowFlashing 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-item {
|
||||||
|
position: relative;
|
||||||
|
margin: 10px;
|
||||||
|
color: var(--fontColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item-time::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: -37px;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border: 3px solid var(--blue);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--white);
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item-content {
|
||||||
|
padding: 12px 15px;
|
||||||
|
margin: 10px 0 15px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(66, 139, 202, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-delete {
|
||||||
|
margin-left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,270 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tree-hole-container">
|
||||||
|
<ol class="tree-hole-list" v-if="!$common.isEmpty(treeHoleList)">
|
||||||
|
<li class="tree-hole-li"
|
||||||
|
v-for="(treeHole, index) in treeHoleList"
|
||||||
|
:key="index">
|
||||||
|
<div class="tree-hole-content"
|
||||||
|
:class="{ leftTreeHole: index % 2 === 0 && !$common.mobile(), rightTreeHole: index % 2 !== 0 || $common.mobile() }">
|
||||||
|
<el-avatar shape="square" class="avatar-img" :size="36"
|
||||||
|
:src="!$common.isEmpty($store.state.currentUser)?$store.state.currentUser.avatar:$store.state.webInfo.avatar"></el-avatar>
|
||||||
|
<div class="tree-hole-box"
|
||||||
|
:style="{background: $constant.tree_hole_color[index % $constant.tree_hole_color.length]}">
|
||||||
|
<div class="box-tag" v-if="index % 2 === 0 && !$common.mobile()"
|
||||||
|
:style="{'border-color': 'transparent transparent transparent '+$constant.tree_hole_color[index % $constant.tree_hole_color.length]}"></div>
|
||||||
|
<div class="box-tag" v-if="index % 2 !== 0 || $common.mobile()"
|
||||||
|
:style="{'border-color': 'transparent '+$constant.tree_hole_color[index % $constant.tree_hole_color.length]+' transparent transparent'}"></div>
|
||||||
|
<div class="my-content" v-html="treeHole.content"></div>
|
||||||
|
<div style="display: flex;justify-content: space-between">
|
||||||
|
<div>😃 {{treeHole.createTime}}</div>
|
||||||
|
<div @click="deleteTreeHole(treeHole.id)"
|
||||||
|
class="tree-hole-delete"
|
||||||
|
v-if="!$common.isEmpty($store.state.currentUser)">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="18" height="18" style="vertical-align: -2px;">
|
||||||
|
<path
|
||||||
|
d="M921.1392 155.392h-270.592v-48.2816c0-22.7328-18.432-41.1648-41.1648-41.1648H426.3424a41.1648 41.1648 0 0 0-41.1648 41.1648v48.2816H110.6432c-14.1312 0-25.6 11.4688-25.6 25.6s11.4688 25.6 25.6 25.6h810.496c14.1312 0 25.6-11.4688 25.6-25.6s-11.4688-25.6-25.6-25.6zM170.8032 260.0448v592.8448c0 50.8928 41.2672 92.16 92.16 92.16h500.6848c50.8928 0 92.16-41.2672 92.16-92.16V260.0448H170.8032z m249.1392 462.7968c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z m243.1488 0c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z"
|
||||||
|
fill="#FF623E"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
<div class="tree-hole-go">
|
||||||
|
<i class="fa fa-paper-plane" @click="launch()"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
treeHoleList: {
|
||||||
|
type: Array
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
launch() {
|
||||||
|
this.$emit("launch");
|
||||||
|
},
|
||||||
|
deleteTreeHole(id) {
|
||||||
|
this.$emit("deleteTreeHole", id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.tree-hole-container {
|
||||||
|
padding: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-list {
|
||||||
|
padding: 100px 0 20px;
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-list:before {
|
||||||
|
content: '';
|
||||||
|
width: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background-color: var(--themeBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-list:after {
|
||||||
|
content: '';
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border: 4px solid var(--maxLightRed);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background-color: var(--white);
|
||||||
|
animation: weiYanShadowFlashing 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-li {
|
||||||
|
margin: 5px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-content {
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftTreeHole {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTreeHole {
|
||||||
|
margin-left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-content:before {
|
||||||
|
content: '';
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border: 4px solid var(--blue);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
background-color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftTreeHole:before {
|
||||||
|
right: 0;
|
||||||
|
transform: translateX(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTreeHole:before {
|
||||||
|
left: 0;
|
||||||
|
transform: translateX(-10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftTreeHole .avatar-img {
|
||||||
|
right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTreeHole .avatar-img {
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-box {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 10px;
|
||||||
|
width: 360px;
|
||||||
|
border-radius: 5px;
|
||||||
|
position: relative;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
font-weight: 400;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
color: var(--black);
|
||||||
|
text-align: left;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftTreeHole .tree-hole-box {
|
||||||
|
margin-right: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTreeHole .tree-hole-box {
|
||||||
|
margin-left: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-box:hover, .avatar-img:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 0 16px 3px var(--miniMask);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-tag {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftTreeHole .box-tag {
|
||||||
|
right: -10px;
|
||||||
|
border-width: 15px 0 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTreeHole .box-tag {
|
||||||
|
left: -10px;
|
||||||
|
border-width: 15px 10px 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-content {
|
||||||
|
margin: 0 10px 10px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-box > div:last-child {
|
||||||
|
color: var(--greyFont);
|
||||||
|
padding: 10px 10px 0;
|
||||||
|
border-top: 1px dashed var(--white);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-go {
|
||||||
|
color: var(--blue);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 25px;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-go i {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-go i:hover {
|
||||||
|
animation: scale 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-delete {
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
.tree-hole-box {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.tree-hole-content {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-list:after {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-list:before {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTreeHole {
|
||||||
|
margin-left: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +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.two_poem_image[Math.floor(Math.random() * $constant.two_poem_image.length)]"
|
||||||
|
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>
|
||||||
@ -0,0 +1,395 @@
|
|||||||
|
<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></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: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getGuShi();
|
||||||
|
this.getArticles();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 90%;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
@ -0,0 +1,182 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<el-image style="animation: header-effect 2s"
|
||||||
|
class="background-image"
|
||||||
|
v-once
|
||||||
|
:src="$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="message-in" style="text-align: center">
|
||||||
|
<h2 class="message-title">树洞</h2>
|
||||||
|
<div>
|
||||||
|
<input class="message-input"
|
||||||
|
type="text"
|
||||||
|
style="outline: none;width: 70%"
|
||||||
|
placeholder="留下点什么啦~"
|
||||||
|
v-model="messageContent"
|
||||||
|
@click="show = true"
|
||||||
|
maxlength="150"/>
|
||||||
|
<button v-show="show"
|
||||||
|
style="margin-left: 12px;cursor: pointer;width: 20%"
|
||||||
|
@click="submitMessage"
|
||||||
|
class="message-input">发射
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 弹幕 -->
|
||||||
|
<div class="barrage-container">
|
||||||
|
<vue-baberrage :barrageList="barrageList" :loop="true"></vue-baberrage>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="comment-wrap">
|
||||||
|
<div class="comment-content">
|
||||||
|
<comment :source="$constant.source" :userId="$constant.userId"></comment>
|
||||||
|
</div>
|
||||||
|
<myFooter></myFooter>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const comment = () => import( "./comment/comment");
|
||||||
|
const myFooter = () => import( "./common/myFooter");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
comment,
|
||||||
|
myFooter
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
messageContent: "",
|
||||||
|
// background: {"background": "url(" + this.$store.state.webInfo.backgroundImage + ") center center / cover no-repeat"},
|
||||||
|
barrageList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getTreeHole();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getTreeHole() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/webInfo/listTreeHole")
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
res.data.forEach(m => {
|
||||||
|
this.barrageList.push({
|
||||||
|
id: m.id,
|
||||||
|
avatar: m.avatar,
|
||||||
|
msg: m.message,
|
||||||
|
time: Math.floor(Math.random() * 10 + 5)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
submitMessage() {
|
||||||
|
if (this.messageContent.trim() === "") {
|
||||||
|
this.$message({
|
||||||
|
message: "你还没写呢~",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let treeHole = {
|
||||||
|
message: this.messageContent.trim()
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!this.$common.isEmpty(this.$store.state.currentUser) && !this.$common.isEmpty(this.$store.state.currentUser.avatar)) {
|
||||||
|
treeHole.avatar = this.$store.state.currentUser.avatar;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
this.$http.post(this.$constant.baseURL + "/webInfo/saveTreeHole", treeHole)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.barrageList.push({
|
||||||
|
id: res.data.id,
|
||||||
|
avatar: res.data.avatar,
|
||||||
|
msg: res.data.message,
|
||||||
|
time: Math.floor(Math.random() * 10 + 5)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.messageContent = "";
|
||||||
|
this.show = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.message-in {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 40%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: var(--white);
|
||||||
|
animation: hideToShow 2.5s;
|
||||||
|
width: 360px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-title {
|
||||||
|
user-select: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-input {
|
||||||
|
border-radius: 1.2rem;
|
||||||
|
border: var(--white) 1px solid;
|
||||||
|
color: var(--white);
|
||||||
|
background: var(--transparent);
|
||||||
|
padding: 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-input::-webkit-input-placeholder {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.barrage-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
width: 100%;
|
||||||
|
user-select: none;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-wrap {
|
||||||
|
background: var(--background);
|
||||||
|
position: absolute;
|
||||||
|
top: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-content {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,253 @@
|
|||||||
|
<template>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 5,
|
||||||
|
recommendStatus: true
|
||||||
|
},
|
||||||
|
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'});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.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-bottom: 40px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
@ -0,0 +1,204 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 两句诗 -->
|
||||||
|
<div class="my-animation-slide-top">
|
||||||
|
<twoPoem></twoPoem>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="background: var(--background);padding-top: 40px;" class="my-animation-slide-bottom">
|
||||||
|
<!-- 标签 -->
|
||||||
|
<div class="sort-warp shadow-box" v-if="!$common.isEmpty(sort) && !$common.isEmpty(sort.labels)">
|
||||||
|
<div v-for="(label, index) in sort.labels" :key="index"
|
||||||
|
:class="{isActive: !$common.isEmpty(labelId) && parseInt(labelId) === label.id}"
|
||||||
|
@click="listArticle(label)">
|
||||||
|
<proTag :info="label.labelName+' '+label.countOfLabel"
|
||||||
|
:color="$constant.before_color_list[Math.floor(Math.random() * 6)]"
|
||||||
|
style="margin: 12px">
|
||||||
|
</proTag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文章 -->
|
||||||
|
<div class="article-wrap">
|
||||||
|
<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>
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<myFooter></myFooter>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const twoPoem = () => import( "./common/twoPoem");
|
||||||
|
const proTag = () => import( "./common/proTag");
|
||||||
|
const articleList = () => import( "./articleList");
|
||||||
|
const myFooter = () => import( "./common/myFooter");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
twoPoem,
|
||||||
|
proTag,
|
||||||
|
articleList,
|
||||||
|
myFooter
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sortId: this.$route.query.sortId,
|
||||||
|
labelId: this.$route.query.labelId,
|
||||||
|
sort: null,
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
sortId: this.$route.query.sortId,
|
||||||
|
labelId: this.$route.query.labelId
|
||||||
|
},
|
||||||
|
articles: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
$route() {
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
sortId: this.$route.query.sortId,
|
||||||
|
labelId: this.$route.query.labelId
|
||||||
|
};
|
||||||
|
this.articles.splice(0, this.articles.length);
|
||||||
|
this.sortId = this.$route.query.sortId;
|
||||||
|
this.labelId = this.$route.query.labelId;
|
||||||
|
this.getSort();
|
||||||
|
this.getArticles();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getSort();
|
||||||
|
this.getArticles();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
pageArticles() {
|
||||||
|
this.pagination.current = this.pagination.current + 1;
|
||||||
|
this.getArticles();
|
||||||
|
},
|
||||||
|
|
||||||
|
getSort() {
|
||||||
|
let sortInfo = this.$store.state.sortInfo;
|
||||||
|
if (!this.$common.isEmpty(sortInfo)) {
|
||||||
|
let sortArray = sortInfo.filter(f => {
|
||||||
|
return f.id === parseInt(this.sortId);
|
||||||
|
});
|
||||||
|
if (!this.$common.isEmpty(sortArray)) {
|
||||||
|
this.sort = sortArray[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
listArticle(label) {
|
||||||
|
this.labelId = label.id;
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
sortId: this.$route.query.sortId,
|
||||||
|
labelId: label.id
|
||||||
|
};
|
||||||
|
this.articles.splice(0, this.articles.length);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
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"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.sort-warp {
|
||||||
|
width: 70%;
|
||||||
|
max-width: 780px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-wrap {
|
||||||
|
width: 70%;
|
||||||
|
margin: 40px auto;
|
||||||
|
min-height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isActive {
|
||||||
|
animation: scale 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination:hover {
|
||||||
|
border: 1px solid var(--themeBackground);
|
||||||
|
color: var(--themeBackground);
|
||||||
|
box-shadow: 0 0 5px var(--themeBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
.sort-warp {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-wrap {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,213 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 两句诗 -->
|
||||||
|
<div class="my-animation-slide-top">
|
||||||
|
<twoPoem :isHitokoto="false"></twoPoem>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="background: var(--background);animation: hideToShow 2.5s">
|
||||||
|
<div>
|
||||||
|
<treeHole :treeHoleList="treeHoleList" @launch="launch" @deleteTreeHole="deleteTreeHole"></treeHole>
|
||||||
|
<proPage :current="pagination.current"
|
||||||
|
:size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
:buttonSize="3"
|
||||||
|
:color="$constant.pageColor"
|
||||||
|
@toPage="toPage">
|
||||||
|
</proPage>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<myFooter :showFooter="showFooter"></myFooter>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog title="微言"
|
||||||
|
:visible.sync="weiYanDialogVisible"
|
||||||
|
width="40%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
:append-to-body="true"
|
||||||
|
destroy-on-close
|
||||||
|
center>
|
||||||
|
<div>
|
||||||
|
<div class="myCenter" style="padding-bottom: 20px">
|
||||||
|
<el-radio-group v-model="isPublic">
|
||||||
|
<el-radio-button :label="true">公开</el-radio-button>
|
||||||
|
<el-radio-button :label="false">私密</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
<commentBox :disableGraffiti="true"
|
||||||
|
@submitComment="submitWeiYan">
|
||||||
|
</commentBox>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const twoPoem = () => import( "./common/twoPoem");
|
||||||
|
const myFooter = () => import( "./common/myFooter");
|
||||||
|
const treeHole = () => import( "./common/treeHole");
|
||||||
|
const proPage = () => import( "./common/proPage");
|
||||||
|
const commentBox = () => import( "./comment/commentBox");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
twoPoem,
|
||||||
|
myFooter,
|
||||||
|
treeHole,
|
||||||
|
proPage,
|
||||||
|
commentBox
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
treeHoleList: [],
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0
|
||||||
|
},
|
||||||
|
weiYanDialogVisible: false,
|
||||||
|
isPublic: true,
|
||||||
|
showFooter: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getWeiYan();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
toPage(page) {
|
||||||
|
this.pagination.current = page;
|
||||||
|
window.scrollTo({
|
||||||
|
top: 240,
|
||||||
|
behavior: "smooth"
|
||||||
|
});
|
||||||
|
this.getWeiYan();
|
||||||
|
},
|
||||||
|
launch() {
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先登录！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser.email)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先绑定邮箱！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.weiYanDialogVisible = true;
|
||||||
|
},
|
||||||
|
handleClose() {
|
||||||
|
this.weiYanDialogVisible = false;
|
||||||
|
},
|
||||||
|
submitWeiYan(content) {
|
||||||
|
let weiYan = {
|
||||||
|
content: content,
|
||||||
|
isPublic: this.isPublic
|
||||||
|
};
|
||||||
|
|
||||||
|
this.$http.post(this.$constant.baseURL + "/weiYan/saveWeiYan", weiYan)
|
||||||
|
.then((res) => {
|
||||||
|
this.getWeiYan();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.handleClose();
|
||||||
|
},
|
||||||
|
deleteTreeHole(id) {
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先登录！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser.email)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先绑定邮箱！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$confirm('确认删除？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/weiYan/deleteWeiYan", {id: id})
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '删除成功!'
|
||||||
|
});
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getWeiYan();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消删除!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getWeiYan() {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/weiYan/listWeiYan", this.pagination)
|
||||||
|
.then((res) => {
|
||||||
|
this.showFooter = false;
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
res.data.records.forEach(c => {
|
||||||
|
c.content = c.content.replace(/\n{2,}/g, '<div style="height: 12px"></div>');
|
||||||
|
c.content = c.content.replace(/\n/g, '<br/>');
|
||||||
|
c.content = this.$common.faceReg(c.content);
|
||||||
|
c.content = this.$common.pictureReg(c.content);
|
||||||
|
});
|
||||||
|
this.treeHoleList = res.data.records;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.showFooter = true;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
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'
|
||||||
|
//引入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.prototype.$http = http
|
||||||
|
Vue.prototype.$common = common
|
||||||
|
Vue.prototype.$constant = constant
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
@ -0,0 +1,130 @@
|
|||||||
|
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: "/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: '/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
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
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: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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: {
|
||||||
|
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
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
@ -0,0 +1,157 @@
|
|||||||
|
import constant from "./constant";
|
||||||
|
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 index = constant.emojiList.indexOf(word.replace("[", "").replace("]", ""));
|
||||||
|
if (index > -1) {
|
||||||
|
let url = "https://pzh-blog-photo.oss-cn-shenzhen.aliyuncs.com/emoji/q" + (index + 1) + ".gif";
|
||||||
|
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"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,133 @@
|
|||||||
|
export default function () {
|
||||||
|
// 动画效果
|
||||||
|
var canvasEl = document.querySelector("#mousedown");
|
||||||
|
if (canvasEl) {
|
||||||
|
var ctx = canvasEl.getContext("2d", {willReadFrequently: true})
|
||||||
|
, numberOfParticules = 30
|
||||||
|
, pointerX = 0
|
||||||
|
, pointerY = 0
|
||||||
|
, tap = "mousedown"
|
||||||
|
, colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"]
|
||||||
|
, setCanvasSize = debounce(function () {
|
||||||
|
canvasEl.width = 2 * window.innerWidth,
|
||||||
|
canvasEl.height = 2 * window.innerHeight,
|
||||||
|
canvasEl.style.width = window.innerWidth + "px",
|
||||||
|
canvasEl.style.height = window.innerHeight + "px",
|
||||||
|
canvasEl.getContext("2d", {willReadFrequently: true}).scale(2, 2)
|
||||||
|
}, 500)
|
||||||
|
, render = anime({
|
||||||
|
duration: 1 / 0,
|
||||||
|
update: function () {
|
||||||
|
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.addEventListener(tap, function (e) {
|
||||||
|
"sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(),
|
||||||
|
updateCoords(e),
|
||||||
|
animateParticules(pointerX, pointerY))
|
||||||
|
}, !1),
|
||||||
|
setCanvasSize(),
|
||||||
|
window.addEventListener("resize", setCanvasSize, !1)
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCoords(e) {
|
||||||
|
pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left,
|
||||||
|
pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
|
||||||
|
}
|
||||||
|
|
||||||
|
function setParticuleDirection(e) {
|
||||||
|
var t = anime.random(0, 360) * Math.PI / 180
|
||||||
|
, a = anime.random(50, 180)
|
||||||
|
, n = [-1, 1][anime.random(0, 1)] * a;
|
||||||
|
return {
|
||||||
|
x: e.x + n * Math.cos(t),
|
||||||
|
y: e.y + n * Math.sin(t)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createParticule(e, t) {
|
||||||
|
var a = {};
|
||||||
|
return a.x = e,
|
||||||
|
a.y = t,
|
||||||
|
a.color = colors[anime.random(0, colors.length - 1)],
|
||||||
|
a.radius = anime.random(16, 32),
|
||||||
|
a.endPos = setParticuleDirection(a),
|
||||||
|
a.draw = function () {
|
||||||
|
ctx.beginPath(),
|
||||||
|
ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0),
|
||||||
|
ctx.fillStyle = a.color,
|
||||||
|
ctx.fill()
|
||||||
|
}
|
||||||
|
,
|
||||||
|
a
|
||||||
|
}
|
||||||
|
|
||||||
|
function createCircle(e, t) {
|
||||||
|
var a = {};
|
||||||
|
return a.x = e,
|
||||||
|
a.y = t,
|
||||||
|
a.color = "#F00",
|
||||||
|
a.radius = .1,
|
||||||
|
a.alpha = .5,
|
||||||
|
a.lineWidth = 6,
|
||||||
|
a.draw = function () {
|
||||||
|
ctx.globalAlpha = a.alpha,
|
||||||
|
ctx.beginPath(),
|
||||||
|
ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0),
|
||||||
|
ctx.lineWidth = a.lineWidth,
|
||||||
|
ctx.strokeStyle = a.color,
|
||||||
|
ctx.stroke(),
|
||||||
|
ctx.globalAlpha = 1
|
||||||
|
}
|
||||||
|
,
|
||||||
|
a
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderParticule(e) {
|
||||||
|
for (var t = 0; t < e.animatables.length; t++)
|
||||||
|
e.animatables[t].target.draw()
|
||||||
|
}
|
||||||
|
|
||||||
|
function animateParticules(e, t) {
|
||||||
|
for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++)
|
||||||
|
n.push(createParticule(e, t));
|
||||||
|
anime.timeline().add({
|
||||||
|
targets: n,
|
||||||
|
x: function (e) {
|
||||||
|
return e.endPos.x
|
||||||
|
},
|
||||||
|
y: function (e) {
|
||||||
|
return e.endPos.y
|
||||||
|
},
|
||||||
|
radius: .1,
|
||||||
|
duration: anime.random(1200, 1800),
|
||||||
|
easing: "easeOutExpo",
|
||||||
|
update: renderParticule
|
||||||
|
}).add({
|
||||||
|
targets: a,
|
||||||
|
radius: anime.random(80, 160),
|
||||||
|
lineWidth: 0,
|
||||||
|
alpha: {
|
||||||
|
value: 0,
|
||||||
|
easing: "linear",
|
||||||
|
duration: anime.random(600, 800)
|
||||||
|
},
|
||||||
|
duration: anime.random(1200, 1800),
|
||||||
|
easing: "easeOutExpo",
|
||||||
|
update: renderParticule,
|
||||||
|
offset: 0
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function debounce(fn, delay) {
|
||||||
|
var timer
|
||||||
|
return function () {
|
||||||
|
var context = this
|
||||||
|
var args = arguments
|
||||||
|
clearTimeout(timer)
|
||||||
|
timer = setTimeout(function () {
|
||||||
|
fn.apply(context, args)
|
||||||
|
}, delay)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,6 @@
|
|||||||
|
let titleTime, OriginTitile = document.title;
|
||||||
|
document.addEventListener("visibilitychange", (function () {
|
||||||
|
document.hidden ? (document.title = "w(ﾟДﾟ)w 不要走！再看看嘛！", clearTimeout(titleTime)) : (document.title = "♪(^∇^*)欢迎肥来！", titleTime = setTimeout((function () {
|
||||||
|
document.title = OriginTitile
|
||||||
|
}), 2e3))
|
||||||
|
}));
|
||||||
@ -0,0 +1,710 @@
|
|||||||
|
// <canvas class="illo" style="max-width: 250px;max-height: 250px;touch-action: none"></canvas>
|
||||||
|
|
||||||
|
// Made with Zdog
|
||||||
|
var BokehShape = Zdog.Shape.subclass({
|
||||||
|
bokehSize: 5,
|
||||||
|
bokehLimit: 64
|
||||||
|
});
|
||||||
|
BokehShape.prototype.updateBokeh = function () {
|
||||||
|
// bokeh 0 -> 1
|
||||||
|
this.bokeh = Math.abs(this.sortValue) / this.bokehLimit;
|
||||||
|
this.bokeh = Math.max(0, Math.min(1, this.bokeh));
|
||||||
|
return this.bokeh;
|
||||||
|
};
|
||||||
|
BokehShape.prototype.getLineWidth = function () {
|
||||||
|
return this.stroke + this.bokehSize * this.bokeh * this.bokeh;
|
||||||
|
};
|
||||||
|
BokehShape.prototype.getBokehAlpha = function () {
|
||||||
|
var alpha = 1 - this.bokeh;
|
||||||
|
alpha *= alpha;
|
||||||
|
return alpha * 0.8 + 0.2;
|
||||||
|
};
|
||||||
|
BokehShape.prototype.renderCanvasDot = function (ctx) {
|
||||||
|
this.updateBokeh();
|
||||||
|
ctx.globalAlpha = this.getBokehAlpha(); // set opacity
|
||||||
|
Zdog.Shape.prototype.renderCanvasDot.apply(this, arguments);
|
||||||
|
ctx.globalAlpha = 1; // reset
|
||||||
|
};
|
||||||
|
BokehShape.prototype.renderPath = function (ctx, renderer) {
|
||||||
|
this.updateBokeh();
|
||||||
|
// set opacity
|
||||||
|
if (renderer.isCanvas) {
|
||||||
|
ctx.globalAlpha = this.getBokehAlpha();
|
||||||
|
}
|
||||||
|
Zdog.Shape.prototype.renderPath.apply(this, arguments);
|
||||||
|
// reset opacity
|
||||||
|
if (renderer.isCanvas) {
|
||||||
|
ctx.globalAlpha = 1;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var TAU = Zdog.TAU;
|
||||||
|
|
||||||
|
function makeMadeline(isGood, colors, options) {
|
||||||
|
var rotor = new Zdog.Anchor(options);
|
||||||
|
var body = new Zdog.Group({
|
||||||
|
addTo: rotor,
|
||||||
|
rotate: {x: -TAU / 8},
|
||||||
|
translate: {z: -48},
|
||||||
|
updateSort: true
|
||||||
|
});
|
||||||
|
var head = new Zdog.Anchor({
|
||||||
|
addTo: body,
|
||||||
|
translate: {y: -11, z: -2},
|
||||||
|
rotate: {x: TAU / 8}
|
||||||
|
});
|
||||||
|
// face
|
||||||
|
var face = new Zdog.Ellipse({
|
||||||
|
diameter: 6,
|
||||||
|
addTo: head,
|
||||||
|
translate: {z: 4},
|
||||||
|
stroke: 8,
|
||||||
|
color: colors.skin
|
||||||
|
});
|
||||||
|
var eyeGroup = new Zdog.Group({
|
||||||
|
addTo: face,
|
||||||
|
translate: {z: face.stroke / 2 - 0.5}
|
||||||
|
});
|
||||||
|
// eyes
|
||||||
|
[-1, 1].forEach(function (xSide) {
|
||||||
|
// cheek blush
|
||||||
|
if (isGood) {
|
||||||
|
new Zdog.Ellipse({
|
||||||
|
width: 2,
|
||||||
|
height: 1.3,
|
||||||
|
addTo: eyeGroup,
|
||||||
|
translate: {x: 4.5 * xSide, y: 3, z: -1},
|
||||||
|
rotate: {y: -TAU / 16 * xSide},
|
||||||
|
stroke: 1,
|
||||||
|
color: '#FA8',
|
||||||
|
fill: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
var eyeX = 3.5 * xSide;
|
||||||
|
// eye
|
||||||
|
new Zdog.Ellipse({
|
||||||
|
width: 0.75,
|
||||||
|
height: 1.5,
|
||||||
|
addTo: eyeGroup,
|
||||||
|
color: colors.eye,
|
||||||
|
translate: {x: eyeX},
|
||||||
|
stroke: 2,
|
||||||
|
fill: true
|
||||||
|
});
|
||||||
|
// eye brow
|
||||||
|
new Zdog.Ellipse({
|
||||||
|
addTo: eyeGroup,
|
||||||
|
height: 3,
|
||||||
|
width: 1.2,
|
||||||
|
quarters: 2,
|
||||||
|
translate: {x: eyeX, y: -3},
|
||||||
|
rotate: {z: -TAU / 4 + 0.15 * xSide * (isGood ? 1 : -1)},
|
||||||
|
color: colors.hair,
|
||||||
|
stroke: 1,
|
||||||
|
fill: false,
|
||||||
|
closed: true
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// hair ball
|
||||||
|
new Zdog.Shape({
|
||||||
|
path: [
|
||||||
|
{x: -1},
|
||||||
|
{x: 1},
|
||||||
|
{z: -4}],
|
||||||
|
addTo: head,
|
||||||
|
translate: {y: -4, z: -1},
|
||||||
|
stroke: 18,
|
||||||
|
color: colors.hair
|
||||||
|
});
|
||||||
|
var bang = new Zdog.Shape({
|
||||||
|
path: [
|
||||||
|
{},
|
||||||
|
{
|
||||||
|
arc: [
|
||||||
|
{z: 4, y: 4},
|
||||||
|
{z: 0, y: 8}]
|
||||||
|
}],
|
||||||
|
addTo: head,
|
||||||
|
translate: {x: 2, y: -7.5, z: 6},
|
||||||
|
rotate: {x: 0.5, z: -0.5},
|
||||||
|
stroke: 4,
|
||||||
|
color: colors.hair,
|
||||||
|
closed: false
|
||||||
|
});
|
||||||
|
bang.copy({
|
||||||
|
translate: {x: 5, y: -6, z: 5},
|
||||||
|
rotate: {x: -0.3, z: -0.5}
|
||||||
|
});
|
||||||
|
bang.copy({
|
||||||
|
translate: {x: 5, y: -6, z: 3},
|
||||||
|
rotate: {y: -0.7, z: -1}
|
||||||
|
});
|
||||||
|
// left side
|
||||||
|
bang.copy({
|
||||||
|
translate: {x: -2, y: -7.5, z: 6},
|
||||||
|
rotate: {x: 0, z: TAU / 16 * 6}
|
||||||
|
});
|
||||||
|
bang.copy({
|
||||||
|
translate: {x: -5, y: -6, z: 5},
|
||||||
|
rotate: {x: 0, z: TAU / 4}
|
||||||
|
});
|
||||||
|
bang.copy({
|
||||||
|
translate: {x: -5, y: -6, z: 3},
|
||||||
|
rotate: {y: 0.7, z: 1}
|
||||||
|
});
|
||||||
|
// hair cover
|
||||||
|
new Zdog.Shape({
|
||||||
|
path: [
|
||||||
|
{x: -3},
|
||||||
|
{x: 3}],
|
||||||
|
addTo: head,
|
||||||
|
stroke: 7,
|
||||||
|
translate: {y: -8, z: 5},
|
||||||
|
color: colors.hair
|
||||||
|
});
|
||||||
|
// trail locks
|
||||||
|
var trailLock = new Zdog.Shape({
|
||||||
|
path: [
|
||||||
|
{y: -4, z: 0},
|
||||||
|
{
|
||||||
|
bezier: [
|
||||||
|
{y: -10, z: -14},
|
||||||
|
{y: 0, z: -16},
|
||||||
|
{y: 0, z: -26}]
|
||||||
|
}],
|
||||||
|
addTo: head,
|
||||||
|
translate: {z: -4, y: 0},
|
||||||
|
stroke: 10,
|
||||||
|
color: colors.hair,
|
||||||
|
closed: false
|
||||||
|
});
|
||||||
|
trailLock.copy({
|
||||||
|
translate: {x: -3, z: -4},
|
||||||
|
rotate: {z: -TAU / 8},
|
||||||
|
stroke: 8
|
||||||
|
});
|
||||||
|
trailLock.copy({
|
||||||
|
translate: {x: 3, z: -4},
|
||||||
|
rotate: {z: TAU / 8},
|
||||||
|
stroke: 8
|
||||||
|
});
|
||||||
|
trailLock.copy({
|
||||||
|
translate: {y: 2},
|
||||||
|
// rotate: { z: TAU/2 },
|
||||||
|
scale: {y: 0.5},
|
||||||
|
stroke: 8
|
||||||
|
});
|
||||||
|
// ----- torso ----- //
|
||||||
|
|
||||||
|
// 2nd rib
|
||||||
|
var torsoRib = new Zdog.Ellipse({
|
||||||
|
width: 12,
|
||||||
|
height: 10,
|
||||||
|
addTo: body,
|
||||||
|
rotate: {x: -TAU / 4},
|
||||||
|
translate: {y: -1},
|
||||||
|
stroke: 6,
|
||||||
|
color: colors.parkaLight,
|
||||||
|
fill: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// neck rib
|
||||||
|
torsoRib.copy({
|
||||||
|
width: 6,
|
||||||
|
height: 6,
|
||||||
|
translate: {y: -5}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3rd rib
|
||||||
|
torsoRib.copy({
|
||||||
|
translate: {y: 3}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 4th rib
|
||||||
|
torsoRib.copy({
|
||||||
|
translate: {y: 7},
|
||||||
|
color: colors.parkaDark
|
||||||
|
});
|
||||||
|
|
||||||
|
// waist
|
||||||
|
new Zdog.Ellipse({
|
||||||
|
width: 10,
|
||||||
|
height: 8,
|
||||||
|
addTo: body,
|
||||||
|
rotate: {x: -TAU / 4},
|
||||||
|
translate: {y: 11},
|
||||||
|
stroke: 4,
|
||||||
|
color: colors.tight,
|
||||||
|
fill: true
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// arms
|
||||||
|
[-1, 1].forEach(function (xSide) {
|
||||||
|
var isLeft = xSide == 1;
|
||||||
|
// shoulder ball
|
||||||
|
new Zdog.Shape({
|
||||||
|
addTo: body,
|
||||||
|
stroke: 6,
|
||||||
|
translate: {x: 6 * xSide, y: -5, z: -1},
|
||||||
|
color: colors.parkaLight
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var shoulderJoint = new Zdog.Anchor({
|
||||||
|
addTo: body,
|
||||||
|
translate: {x: 9 * xSide, y: -3, z: -2},
|
||||||
|
rotate: isLeft ? {x: TAU / 8 * 3, z: -TAU / 32} : {z: TAU / 16 * 2, x: -TAU / 16 * 2}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// top shoulder rib
|
||||||
|
var armRib = new Zdog.Ellipse({
|
||||||
|
diameter: 2,
|
||||||
|
rotate: {x: -TAU / 4},
|
||||||
|
addTo: shoulderJoint,
|
||||||
|
translate: {x: 0 * xSide},
|
||||||
|
stroke: 6,
|
||||||
|
color: colors.parkaLight,
|
||||||
|
fill: true
|
||||||
|
});
|
||||||
|
|
||||||
|
armRib.copy({
|
||||||
|
translate: {y: 4}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var elbowJoint = new Zdog.Anchor({
|
||||||
|
addTo: shoulderJoint,
|
||||||
|
translate: {y: 8},
|
||||||
|
rotate: isLeft ? {} : {z: TAU / 8}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
armRib.copy({
|
||||||
|
addTo: elbowJoint,
|
||||||
|
translate: {x: 0, y: 0}
|
||||||
|
});
|
||||||
|
|
||||||
|
armRib.copy({
|
||||||
|
addTo: elbowJoint,
|
||||||
|
translate: {y: 4},
|
||||||
|
color: colors.parkaDark
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// hand
|
||||||
|
new Zdog.Shape({
|
||||||
|
addTo: elbowJoint,
|
||||||
|
translate: {y: 9, z: -1},
|
||||||
|
stroke: 8,
|
||||||
|
color: colors.skin
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// ----- legs ----- //
|
||||||
|
var knee = {y: 7};
|
||||||
|
var thigh = new Zdog.Shape({
|
||||||
|
path: [{y: 0}, knee],
|
||||||
|
addTo: body,
|
||||||
|
translate: {x: 4 * xSide, y: 13},
|
||||||
|
rotate: isLeft ? {} : {x: TAU / 16 * 3, z: TAU / 16},
|
||||||
|
stroke: 8,
|
||||||
|
color: colors.tight
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var shin = new Zdog.Shape({
|
||||||
|
path: [{y: 0}, {y: 8}],
|
||||||
|
addTo: thigh,
|
||||||
|
stroke: 6,
|
||||||
|
translate: knee,
|
||||||
|
rotate: isLeft ? {} : {x: -TAU / 16 * 5},
|
||||||
|
color: colors.tight
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// butt
|
||||||
|
new Zdog.Shape({
|
||||||
|
path: [
|
||||||
|
{x: -3},
|
||||||
|
{x: 3}],
|
||||||
|
|
||||||
|
visible: false,
|
||||||
|
addTo: body,
|
||||||
|
translate: {y: 11, z: -2},
|
||||||
|
stroke: 8,
|
||||||
|
color: colors.tight
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
window.makeBird = function (options) {
|
||||||
|
|
||||||
|
var spin = options.spin || 0;
|
||||||
|
|
||||||
|
var arrow = new Zdog.Anchor({
|
||||||
|
addTo: options.addTo,
|
||||||
|
scale: 2 / 3,
|
||||||
|
rotate: {z: spin}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var bird = new Zdog.Group({
|
||||||
|
addTo: arrow,
|
||||||
|
translate: {x: 87},
|
||||||
|
rotate: {x: -spin}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// bird body
|
||||||
|
new Zdog.Shape({
|
||||||
|
path: [
|
||||||
|
{x: -3, y: 0},
|
||||||
|
{
|
||||||
|
arc: [
|
||||||
|
{x: -2, y: 1.5},
|
||||||
|
{x: 0, y: 1.5}]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
arc: [
|
||||||
|
{x: 2, y: 1.5},
|
||||||
|
{x: 2, y: 0}]
|
||||||
|
}],
|
||||||
|
|
||||||
|
|
||||||
|
addTo: bird,
|
||||||
|
translate: {x: 0.5},
|
||||||
|
stroke: 3,
|
||||||
|
color: options.color,
|
||||||
|
fill: true
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// bird head
|
||||||
|
new Zdog.Shape({
|
||||||
|
translate: {x: 4, y: -1},
|
||||||
|
addTo: bird,
|
||||||
|
stroke: 4,
|
||||||
|
color: options.color
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// beak
|
||||||
|
new Zdog.Shape({
|
||||||
|
path: [
|
||||||
|
{x: 0, y: -1},
|
||||||
|
{x: 3, y: 0},
|
||||||
|
{x: 0, y: 1}],
|
||||||
|
|
||||||
|
addTo: bird,
|
||||||
|
translate: {x: 5, y: -1},
|
||||||
|
stroke: 1,
|
||||||
|
color: options.color,
|
||||||
|
fill: true
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// tail feather
|
||||||
|
new Zdog.Shape({
|
||||||
|
path: [
|
||||||
|
{x: -3, z: -2},
|
||||||
|
{x: 0, z: 0},
|
||||||
|
{x: -3, z: 2}],
|
||||||
|
|
||||||
|
addTo: bird,
|
||||||
|
translate: {x: -4, y: 0},
|
||||||
|
stroke: 2,
|
||||||
|
color: options.color,
|
||||||
|
fill: true
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var wing = new Zdog.Shape({
|
||||||
|
path: [
|
||||||
|
{x: 3, y: 0},
|
||||||
|
{x: -1, y: -9},
|
||||||
|
{
|
||||||
|
arc: [
|
||||||
|
{x: -5, y: -4},
|
||||||
|
{x: -3, y: 0}]
|
||||||
|
}],
|
||||||
|
|
||||||
|
|
||||||
|
addTo: bird,
|
||||||
|
translate: {z: -1.5},
|
||||||
|
rotate: {x: TAU / 8},
|
||||||
|
stroke: 1,
|
||||||
|
color: options.color,
|
||||||
|
fill: true
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
wing.copy({
|
||||||
|
translate: {z: 1.5},
|
||||||
|
scale: {z: -1},
|
||||||
|
rotate: {x: -TAU / 8}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// -------------------------- demo -------------------------- //
|
||||||
|
|
||||||
|
var illoElem = document.querySelector('.illo');
|
||||||
|
var w = 160;
|
||||||
|
var h = 160;
|
||||||
|
var minWindowSize = Math.min(window.innerWidth, window.innerHeight);
|
||||||
|
var zoom = Math.min(5, Math.floor(minWindowSize / w));
|
||||||
|
illoElem.setAttribute('width', w * zoom);
|
||||||
|
illoElem.setAttribute('height', h * zoom);
|
||||||
|
|
||||||
|
var isSpinning = true;
|
||||||
|
var TAU = Zdog.TAU;
|
||||||
|
|
||||||
|
var illo = new Zdog.Illustration({
|
||||||
|
element: illoElem,
|
||||||
|
zoom: zoom,
|
||||||
|
rotate: {y: -TAU / 4},
|
||||||
|
dragRotate: true,
|
||||||
|
onDragStart: function () {
|
||||||
|
isSpinning = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var madColor = {
|
||||||
|
skin: '#FD9',
|
||||||
|
hair: '#D53',
|
||||||
|
parkaLight: '#67F',
|
||||||
|
parkaDark: '#35D',
|
||||||
|
tight: '#742',
|
||||||
|
eye: '#333'
|
||||||
|
};
|
||||||
|
|
||||||
|
var badColor = {
|
||||||
|
skin: '#EBC',
|
||||||
|
hair: '#D4B',
|
||||||
|
parkaLight: '#85A',
|
||||||
|
parkaDark: '#527',
|
||||||
|
tight: '#412',
|
||||||
|
eye: '#D02'
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var glow = 'hsla(60, 100%, 80%, 0.3)';
|
||||||
|
var featherGold = '#FE5';
|
||||||
|
|
||||||
|
// -- illustration shapes --- //
|
||||||
|
|
||||||
|
makeMadeline(true, madColor, {
|
||||||
|
addTo: illo
|
||||||
|
});
|
||||||
|
|
||||||
|
makeMadeline(false, badColor, {
|
||||||
|
addTo: illo,
|
||||||
|
rotate: {y: TAU / 2}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// ----- feather ----- //
|
||||||
|
|
||||||
|
var feather = new Zdog.Group({
|
||||||
|
addTo: illo,
|
||||||
|
rotate: {y: -TAU / 4}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
|
||||||
|
var featherPartCount = 8;
|
||||||
|
var radius = 12;
|
||||||
|
var angleX = TAU / featherPartCount / 2;
|
||||||
|
var sector = TAU * radius / 2 / featherPartCount;
|
||||||
|
|
||||||
|
for (var i = 0; i < featherPartCount; i++) {
|
||||||
|
var curve = Math.cos(i / featherPartCount * TAU * 3 / 4 + TAU * 1 / 4);
|
||||||
|
var x = 4 - curve * 2;
|
||||||
|
var y0 = sector / 2;
|
||||||
|
// var y2 = -sector/2;
|
||||||
|
var isLast = i == featherPartCount - 1;
|
||||||
|
var y3 = isLast ? sector * -1 : -y0;
|
||||||
|
var z1 = -radius + 2 + curve * -1.5;
|
||||||
|
var z2 = isLast ? -radius : -radius;
|
||||||
|
var barb = new Zdog.Shape({
|
||||||
|
path: [
|
||||||
|
{x: 0, y: y0, z: -radius},
|
||||||
|
{x: x, y: -sector / 2, z: z1},
|
||||||
|
{x: x, y: -sector * 3 / 4, z: z1},
|
||||||
|
{x: 0, y: y3, z: z2}],
|
||||||
|
|
||||||
|
addTo: feather,
|
||||||
|
rotate: {x: angleX * -i + TAU / 8},
|
||||||
|
stroke: 1,
|
||||||
|
color: featherGold,
|
||||||
|
fill: true
|
||||||
|
});
|
||||||
|
|
||||||
|
barb.copy({
|
||||||
|
scale: {x: -1}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// rachis
|
||||||
|
var rachis = new Zdog.Ellipse({
|
||||||
|
addTo: feather,
|
||||||
|
diameter: radius * 2,
|
||||||
|
quarters: 2,
|
||||||
|
rotate: {y: -TAU / 4},
|
||||||
|
stroke: 2,
|
||||||
|
color: featherGold
|
||||||
|
});
|
||||||
|
|
||||||
|
rachis.copy({
|
||||||
|
stroke: 8,
|
||||||
|
color: glow,
|
||||||
|
rotate: {y: -TAU / 4, x: -0.5}
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
||||||
|
// ----- rods ----- //
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
|
||||||
|
var rodCount = 14;
|
||||||
|
for (var i = 0; i < rodCount; i++) {
|
||||||
|
var zRotor = new Zdog.Anchor({
|
||||||
|
addTo: illo,
|
||||||
|
rotate: {z: TAU / rodCount * i}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var y0 = 32;
|
||||||
|
var y1 = y0 + 2 + Math.random() * 24;
|
||||||
|
new BokehShape({
|
||||||
|
path: [
|
||||||
|
{y: y0},
|
||||||
|
{y: y1}],
|
||||||
|
|
||||||
|
addTo: zRotor,
|
||||||
|
rotate: {x: (Math.random() * 2 - 1) * TAU / 8},
|
||||||
|
color: madColor.skin,
|
||||||
|
stroke: 1,
|
||||||
|
bokehSize: 6,
|
||||||
|
bokehLimit: 70
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
||||||
|
// dots
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
var dotCount = 64;
|
||||||
|
|
||||||
|
for (var i = 0; i < dotCount; i++) {
|
||||||
|
var yRotor = new Zdog.Anchor({
|
||||||
|
addTo: illo,
|
||||||
|
rotate: {y: TAU / dotCount * i}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
new BokehShape({
|
||||||
|
path: [
|
||||||
|
{z: 40 * (1 - Math.random() * Math.random()) + 32}],
|
||||||
|
|
||||||
|
addTo: yRotor,
|
||||||
|
rotate: {x: (Math.random() * 2 - 1) * TAU * 3 / 16},
|
||||||
|
color: badColor.skin,
|
||||||
|
stroke: 1 + Math.random(),
|
||||||
|
bokehSize: 6,
|
||||||
|
bokehLimit: 74
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
||||||
|
// ----- birds ----- //
|
||||||
|
|
||||||
|
var birdRotor = new Zdog.Anchor({
|
||||||
|
addTo: illo,
|
||||||
|
rotate: {y: TAU * -1 / 8}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
makeBird({
|
||||||
|
addTo: birdRotor,
|
||||||
|
color: madColor.parkaLight,
|
||||||
|
spin: TAU / 2
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
makeBird({
|
||||||
|
addTo: birdRotor,
|
||||||
|
color: featherGold,
|
||||||
|
spin: -TAU * 3 / 8
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
makeBird({
|
||||||
|
addTo: birdRotor,
|
||||||
|
color: 'white',
|
||||||
|
spin: -TAU / 4
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
makeBird({
|
||||||
|
addTo: birdRotor,
|
||||||
|
color: madColor.hair,
|
||||||
|
spin: -TAU / 8
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
makeBird({
|
||||||
|
addTo: birdRotor,
|
||||||
|
color: madColor.parkaDark,
|
||||||
|
spin: TAU / 8
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// -- animate --- //
|
||||||
|
|
||||||
|
var isSpinning = true;
|
||||||
|
var rotateSpeed = -TAU / 60;
|
||||||
|
var xClock = 0;
|
||||||
|
var then = new Date() - 1 / 60;
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
update();
|
||||||
|
illo.renderGraph();
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
animate();
|
||||||
|
|
||||||
|
// -- update -- //
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
var now = new Date();
|
||||||
|
var delta = now - then;
|
||||||
|
// auto rotate
|
||||||
|
if (isSpinning) {
|
||||||
|
var theta = rotateSpeed / 60 * delta * -1;
|
||||||
|
illo.rotate.y += theta;
|
||||||
|
xClock += theta / 4;
|
||||||
|
illo.rotate.x = Math.sin(xClock) * TAU / 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
illo.updateGraph();
|
||||||
|
|
||||||
|
then = now;
|
||||||
|
}
|
||||||
|
|
||||||
|
//# sourceURL=pen.js
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
devServer: {
|
||||||
|
port: 80
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 97 KiB |
Loading…
Reference in new issue