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