|
|
<template>
|
|
|
<div class="outside">
|
|
|
<!-- 组件的内容 -->
|
|
|
<!-- 网站信息 -->
|
|
|
<div class="card-content1 shadow-box background-opacity">
|
|
|
<el-avatar style="margin-top: 20px" class="user-avatar" :size="120" :src="currentUser.avatar"></el-avatar>
|
|
|
<div class="web-name">{{currentUser.username}}</div>
|
|
|
<div class="web-info">
|
|
|
<div class="blog-info-box">
|
|
|
<span>博客</span>
|
|
|
<span id="totalBlogNum" class="blog-info-num"></span>
|
|
|
</div>
|
|
|
<div class="blog-info-box">
|
|
|
<span>分类</span>
|
|
|
<span id="labelTotalNum" class="blog-info-num"></span>
|
|
|
</div>
|
|
|
<div class="blog-info-box">
|
|
|
<span>访问量</span>
|
|
|
<span class="blog-info-num">{{ webInfo.historyAllCount }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a class="collection-btn" @click="showTip()">
|
|
|
<i class="el-icon-star-off" style="margin-right: 2px"></i>朋友圈
|
|
|
</a>
|
|
|
</div>
|
|
|
<div style="display: inline-block;position: absolute;left: 470px;top: 208px; width: fit-content">
|
|
|
<!-- 写博客按钮 -->
|
|
|
<button class="write-blog-btn" @click="showEditor = true">
|
|
|
✍️ 写个人博客
|
|
|
</button>
|
|
|
<div style="text-align: center;display: inline-block">
|
|
|
<button class="publicBlog" @click="showPostEditor = true">✍️ 写公开博客</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--公开文章框-->
|
|
|
<div id="editorPost" v-if="showPostEditor" style="background-color: #efe5fa;padding-bottom: 10px">
|
|
|
<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 maxlength="30" 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 maxlength="30" v-model="article.password"></el-input>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item v-if="article.viewStatus === false" label="密码提示" prop="tips">
|
|
|
<el-input maxlength="60" v-model="article.tips"></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"
|
|
|
lazy
|
|
|
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="2"
|
|
|
: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>
|
|
|
</div>
|
|
|
<!-- 编辑框 -->
|
|
|
<div id="editorArea" class="blog-editor" v-if="showEditor">
|
|
|
<textarea id ="areaTitle" class="blog-editor-title" v-model="blogContentTitle" placeholder="请输入博客标题..."></textarea>
|
|
|
<div class="labelSelect">
|
|
|
<label for="category">选择博客分类：</label>
|
|
|
<select id="category" name="category" v-model="selectedCategoryIndex">
|
|
|
<option v-for="(label, index) in blogLabels" :value="index" :key="index">{{ label }}</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<textarea id = "areaContent" class="blog-editor-content" v-model="blogContent" placeholder="请输入博客正文..."></textarea>
|
|
|
<div style="display: inline-block;margin-top: 17px">
|
|
|
<el-upload
|
|
|
class="upload-demo"
|
|
|
ref="upload"
|
|
|
multiple
|
|
|
drag
|
|
|
:action="$constant.qiniuUrl"
|
|
|
:on-change="handleChange"
|
|
|
:before-upload="beforeUpload"
|
|
|
:on-success="handleSuccess"
|
|
|
:on-error="handleError"
|
|
|
:on-remove="handleRemove"
|
|
|
:http-request="customUpload"
|
|
|
:list-type="listType"
|
|
|
:accept="accept"
|
|
|
:limit="maxNumber"
|
|
|
:auto-upload="false">
|
|
|
<div class="el-upload__text">
|
|
|
<svg viewBox="0 0 1024 1024" width="40" height="40">
|
|
|
<path
|
|
|
d="M666.2656 629.4528l-113.7664-112.4864c-20.7872-20.5824-54.3232-20.5312-75.1104 0.1024l-113.3056 112.4864c-20.8896 20.736-21.0432 54.528-0.256 75.4688 20.736 20.8896 54.528 21.0432 75.4688 0.256l22.6304-22.4256v189.5936c0 29.44 23.9104 53.3504 53.3504 53.3504s53.3504-23.9104 53.3504-53.3504v-189.5424l22.6816 22.4256a53.1456 53.1456 0 0 0 37.5296 15.4112c13.7728 0 27.4944-5.2736 37.9392-15.8208 20.6336-20.9408 20.4288-54.7328-0.512-75.4688z"
|
|
|
fill="#FFE37B"></path>
|
|
|
<path
|
|
|
d="M820.992 469.504h-5.376c-3.072-163.328-136.3456-294.8096-300.4416-294.8096S217.856 306.1248 214.784 469.504H209.408c-100.7104 0-182.3744 81.664-182.3744 182.3744s81.664 182.3744 182.3744 182.3744h209.7664V761.856c-30.208 5.5808-62.464-3.3792-85.6576-26.7264-37.3248-37.5808-37.0688-98.5088 0.512-135.7824l113.3056-112.4864c37.2224-36.9664 97.8432-37.0176 135.168-0.1536l113.7664 112.4864c18.2272 18.0224 28.3648 42.0864 28.5184 67.7376 0.1536 25.6512-9.728 49.8176-27.7504 68.0448a95.40096 95.40096 0 0 1-68.3008 28.5184c-5.9392 0-11.776-0.512-17.5104-1.5872v72.3456h209.7664c100.7104 0 182.3744-81.664 182.3744-182.3744S921.7024 469.504 820.992 469.504z"
|
|
|
fill="#8C7BFD"></path>
|
|
|
</svg>
|
|
|
<div>拖拽 / 点击上传封面</div>
|
|
|
</div>
|
|
|
<template v-if="listType === 'picture'">
|
|
|
<div slot="tip" class="el-upload__tip">
|
|
|
一次最多上传{{maxNumber}}张图片，且每张图片不超过{{maxSize}}M！
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<div slot="tip" class="el-upload__tip">
|
|
|
一次最多上传{{maxNumber}}个文件，且每个文件不超过{{maxSize}}M！
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
</el-upload>
|
|
|
<el-button type="success" style="font-size: 12px" @click="submitUpload">
|
|
|
上传
|
|
|
</el-button>
|
|
|
</div>
|
|
|
<div class="editor-btns">
|
|
|
<button class="cancel-btn" @click="cancelEdit">取消</button>
|
|
|
<button class="publish-btn" @click="saveBlog" v-if="showPublishBtn" >发布</button>
|
|
|
<button @click="updateBlog" class="publish-btn" v-if="showUpdateBtn">更新</button>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<br/><br/>
|
|
|
<!-- 推荐博客 -->
|
|
|
<div class="card-content2-title">
|
|
|
<i class="el-icon-reading card-content2-icon"></i>
|
|
|
<span style="font-size: 28px">我的个人博客</span>
|
|
|
</div>
|
|
|
<div v-if="!$common.isEmpty(articles)" class="blog-card-container">
|
|
|
<div v-for="(article, index) in articles.slice().reverse()" :key="index" class="blog-card">
|
|
|
<div class="blog-card-header">
|
|
|
<div class="author">{{ article.username }}</div>
|
|
|
<div class="title" >{{ article.articleTitle }}</div>
|
|
|
</div>
|
|
|
<div class="blog-card-cover" >
|
|
|
<img :src="'http://s6xqq8hhg.hd-bkt.clouddn.com/userAvatar/' + article.articleCover" alt="Cover Image" width="100%">
|
|
|
</div>
|
|
|
<div class="blog-card-content" >
|
|
|
{{ article.articleContent }}
|
|
|
</div>
|
|
|
<div class="blog-card-footer">
|
|
|
<div class="label">{{ article.labelName }}</div>
|
|
|
<div class="date"><i class="el-icon-date" style="color: var(--greyFont)"></i>发布于 {{ article.createTime }}</div>
|
|
|
<br/>
|
|
|
<div class="date">最近更新于 {{ article.updateTime }}</div>
|
|
|
<div class="actions">
|
|
|
<div class="delete-icon" @click="deleteArticle(article)">
|
|
|
<img src="../assets/file/delete.png" alt="Delete Icon" width="26px" height="26px">
|
|
|
</div>
|
|
|
<div class="update-icon" @click="updateArticle(article)">
|
|
|
<img src="../assets/file/update.png" alt="Update Icon" width="30px" height="30px">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import axios from "axios";
|
|
|
import * as events from "events";
|
|
|
import upload from '../utils/ajaxUpload';
|
|
|
const uploadPicture = () => import( "./common/uploadPicture");
|
|
|
export default {
|
|
|
components: {
|
|
|
uploadPicture
|
|
|
},
|
|
|
avatar: {
|
|
|
type: String
|
|
|
},
|
|
|
// 组件的逻辑和配置
|
|
|
data() {
|
|
|
return {
|
|
|
id: this.$route.query.id,
|
|
|
article: {
|
|
|
articleTitle: "",
|
|
|
articleContent: "",
|
|
|
commentStatus: true,
|
|
|
recommendStatus: false,
|
|
|
viewStatus: true,
|
|
|
password: "",
|
|
|
tips: "",
|
|
|
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'}
|
|
|
]
|
|
|
},
|
|
|
pagination: {
|
|
|
current: 1,
|
|
|
size: 5,
|
|
|
recommendStatus: true
|
|
|
},
|
|
|
currentUser: this.$store.state.currentUser,
|
|
|
recommendArticles: [],
|
|
|
admires: [],
|
|
|
showAdmireDialog: false,
|
|
|
articleSearch: "",
|
|
|
showEditor: false,
|
|
|
showPostEditor: false,
|
|
|
showUpdateBtn: false,
|
|
|
showPublishBtn: true,
|
|
|
blogContent: "",
|
|
|
blogContentTitle:"",
|
|
|
blogLabelName: "",
|
|
|
articles: [] , // 存储文章列表
|
|
|
labelTotalNum: 0,
|
|
|
articleUp: {
|
|
|
id: 1,
|
|
|
articleTitle: "",
|
|
|
articleContent: "",
|
|
|
userId: 1,
|
|
|
username: "",
|
|
|
sortId: 1,
|
|
|
labelId: 0,
|
|
|
labelName: "研发",
|
|
|
articleCover: ""
|
|
|
},
|
|
|
file:"",
|
|
|
blogLabels:[],
|
|
|
selectedCategoryIndex: 0, // 默认选中第一个选项
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
events() {
|
|
|
return events
|
|
|
},
|
|
|
webInfo() {
|
|
|
return this.$store.state.webInfo;
|
|
|
},
|
|
|
sortInfo() {
|
|
|
return this.$store.state.sortInfo;
|
|
|
}
|
|
|
},
|
|
|
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.getRecommendArticles();
|
|
|
this.getAdmire();
|
|
|
this.getUserArticles(); // 调用获取用户文章列表的方法
|
|
|
this.getUserArticleLabelTotalNum();// 调用获取用户文章的标签种类数的方法
|
|
|
this.getBlogLabels();//调用获取标签分类的方法
|
|
|
this.getSortAndLabel();
|
|
|
console.log('getUserArticleLabelTotalNum is called');
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
imgAdd(pos, file) {
|
|
|
let suffix = "";
|
|
|
if (file.name.lastIndexOf('.') !== -1) {
|
|
|
suffix = file.name.substring(file.name.lastIndexOf('.'));
|
|
|
}
|
|
|
let key = "articlePicture" + "/" + this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id + new Date().getTime() + Math.floor(Math.random() * 1000) + suffix;
|
|
|
|
|
|
let storeType = localStorage.getItem("defaultStoreType");
|
|
|
|
|
|
let fd = new FormData();
|
|
|
fd.append("file", file);
|
|
|
fd.append("key", key);
|
|
|
fd.append("relativePath", key);
|
|
|
fd.append("type", "articlePicture");
|
|
|
fd.append("storeType", storeType);
|
|
|
|
|
|
if (storeType === "local") {
|
|
|
this.saveLocal(pos, fd);
|
|
|
} else if (storeType === "qiniu") {
|
|
|
this.saveQiniu(pos, fd);
|
|
|
}
|
|
|
},
|
|
|
saveLocal(pos, fd) {
|
|
|
this.$http.upload(this.$constant.baseURL + "/resource/upload", fd, true)
|
|
|
.then((res) => {
|
|
|
if (!this.$common.isEmpty(res.data)) {
|
|
|
let url = res.data;
|
|
|
this.$refs.md.$img2Url(pos, url);
|
|
|
}
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
this.$message({
|
|
|
message: error.message,
|
|
|
type: "error"
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
saveQiniu(pos, fd) {
|
|
|
this.$http.get(this.$constant.baseURL + "/qiniu/getUpToken", {key: fd.get("key")}, true)
|
|
|
.then((res) => {
|
|
|
if (!this.$common.isEmpty(res.data)) {
|
|
|
fd.append("token", res.data);
|
|
|
|
|
|
this.$http.uploadQiniu(this.$constant.qiniuUrl, fd)
|
|
|
.then((res) => {
|
|
|
if (!this.$common.isEmpty(res.key)) {
|
|
|
let url = this.$constant.qiniuDownload + res.key;
|
|
|
let file = fd.get("file");
|
|
|
this.$common.saveResource(this, "articlePicture", url, file.size, file.type, "qiniu", true);
|
|
|
this.$refs.md.$img2Url(pos, url);
|
|
|
}
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
this.$message({
|
|
|
message: error.message,
|
|
|
type: "error"
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.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'});
|
|
|
this.showPostEditor = false;
|
|
|
this.article.articleContent = "";
|
|
|
this.article.articleCover = "";
|
|
|
this.article.articleTitle = "";
|
|
|
this.article.sortId = "";
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
this.$message({
|
|
|
message: error.message,
|
|
|
type: "error"
|
|
|
});
|
|
|
});
|
|
|
}).catch(() => {
|
|
|
this.$message({
|
|
|
type: 'success',
|
|
|
message: '已取消保存!'
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
submitUpload() {
|
|
|
this.$refs.upload.submit();
|
|
|
},
|
|
|
|
|
|
customUpload(options) {
|
|
|
let suffix = "";
|
|
|
if (options.file.name.lastIndexOf('.') !== -1) {
|
|
|
suffix = options.file.name.substring(options.file.name.lastIndexOf('.'));
|
|
|
}
|
|
|
|
|
|
let key = this.prefix + "/" + (!this.$common.isEmpty(this.$store.state.currentUser.username) ? (this.$store.state.currentUser.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentUser.id) : (this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id)) + new Date().getTime() + Math.floor(Math.random() * 1000) + suffix;
|
|
|
|
|
|
if (this.storeType === "local") {
|
|
|
let fd = new FormData();
|
|
|
fd.append("file", options.file);
|
|
|
fd.append("key", key);
|
|
|
fd.append("relativePath", key);
|
|
|
fd.append("type", this.prefix);
|
|
|
fd.append("storeType", this.storeType);
|
|
|
this.articleUp.articleCover = fd;
|
|
|
console.log(this.articleUp.articleCover+"fd");
|
|
|
console.log(options.file+"options.file");
|
|
|
return this.$http.upload(this.$constant.baseURL + "/resource/upload", fd, this.isAdmin);
|
|
|
} else if (this.storeType === "qiniu") {
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
xhr.open('get', this.$constant.baseURL + "/qiniu/getUpToken?key=" + key, false);
|
|
|
if (this.isAdmin) {
|
|
|
xhr.setRequestHeader("Authorization", localStorage.getItem("adminToken"));
|
|
|
} else {
|
|
|
xhr.setRequestHeader("Authorization", localStorage.getItem("userToken"));
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
xhr.send();
|
|
|
const res = JSON.parse(xhr.responseText);
|
|
|
if (res !== null && res.hasOwnProperty("code") && res.code === 200) {
|
|
|
options.data = {
|
|
|
token: res.data,
|
|
|
key: key
|
|
|
};
|
|
|
return upload(options);
|
|
|
} else if (res !== null && res.hasOwnProperty("code") && res.code !== 200) {
|
|
|
return Promise.reject(res.message);
|
|
|
} else {
|
|
|
return Promise.reject("服务异常！");
|
|
|
}
|
|
|
} catch (e) {
|
|
|
return Promise.reject(e.message);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 文件上传成功时的钩子
|
|
|
handleSuccess(response, file, fileList) {
|
|
|
let url;
|
|
|
if (this.storeType === "local") {
|
|
|
url = response.data;
|
|
|
} else if (this.storeType === "qiniu") {
|
|
|
url = this.$constant.qiniuDownload + response.key;
|
|
|
this.$common.saveResource(this, this.prefix, url, file.size, file.raw.type, "qiniu", this.isAdmin);
|
|
|
}
|
|
|
this.$emit("addPicture", url);
|
|
|
},
|
|
|
handleError(err, file, fileList) {
|
|
|
this.$message({
|
|
|
message: err,
|
|
|
type: "error"
|
|
|
});
|
|
|
},
|
|
|
// 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
|
|
|
beforeUpload(file) {
|
|
|
},
|
|
|
// 文件列表移除文件时的钩子
|
|
|
handleRemove(file, fileList) {
|
|
|
},
|
|
|
// 添加文件、上传成功和上传失败时都会被调用
|
|
|
handleChange(file, fileList) {
|
|
|
let flag = false;
|
|
|
|
|
|
if (file.size > this.maxSize * 1024 * 1024) {
|
|
|
this.$message({
|
|
|
message: "图片最大为" + this.maxSize + "M！",
|
|
|
type: "warning"
|
|
|
});
|
|
|
flag = true;
|
|
|
}
|
|
|
|
|
|
if (flag) {
|
|
|
fileList.splice(fileList.size - 1, 1);
|
|
|
}
|
|
|
},
|
|
|
selectSort(sort) {
|
|
|
this.$emit("selectSort", sort);
|
|
|
},
|
|
|
selectArticle() {
|
|
|
this.$emit("selectArticle", this.articleSearch);
|
|
|
},
|
|
|
showAdmire() {
|
|
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
|
|
this.$message({
|
|
|
message: "请先登录！",
|
|
|
type: "error"
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
this.showAdmireDialog = true;
|
|
|
},
|
|
|
getAdmire() {
|
|
|
this.$http.get(this.$constant.baseURL + "/webInfo/getAdmire")
|
|
|
.then((res) => {
|
|
|
if (!this.$common.isEmpty(res.data)) {
|
|
|
this.admires = res.data;
|
|
|
}
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
this.$message({
|
|
|
message: error.message,
|
|
|
type: "error"
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
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"
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
getUserArticleLabelTotalNum() {
|
|
|
const id = this.$store.state.currentUser.id; // 获取当前用户的ID
|
|
|
this.$http.get(`/admin/article/getUserArticleLabelTotalNum?id=${id}`) // 发送GET请求，指定获取用户文章标签数量的接口地址，并传递当前用户的ID作为参数
|
|
|
.then(response => {
|
|
|
const labelNum = response; // 获取标签数量
|
|
|
document.getElementById("labelTotalNum").innerText = labelNum;
|
|
|
this.labelTotalNum = labelNum;
|
|
|
console.log(labelNum); // 在控制台打印标签数量
|
|
|
console.log("label日志！！");
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.error('请求错误:', error);
|
|
|
});
|
|
|
},
|
|
|
getUserArticles() {
|
|
|
const id = this.$store.state.currentUser.id;
|
|
|
this.$http.get(`/admin/article/getArticleByUserId?id=${id}`)
|
|
|
.then(response => {
|
|
|
if (!this.$common.isEmpty(response.data)) {
|
|
|
this.articles = response.data;
|
|
|
const currentUser = this.$store.state.currentUser;
|
|
|
this.articles.forEach(article => {
|
|
|
console.log(article.articleCover)
|
|
|
article.username = currentUser.username;
|
|
|
article.labelName = this.blogLabels[article.labelId-1];
|
|
|
document.getElementById("totalBlogNum").innerText = this.articles.length;
|
|
|
this.getUserArticleLabelTotalNum();
|
|
|
|
|
|
// 发送请求获取博客封面图
|
|
|
this.$http.get(`http://s6xqq8hhg.hd-bkt.clouddn.com/userAvatar/${article.articleCover}`)
|
|
|
.then(response => {
|
|
|
console.log(response.data+"star");
|
|
|
// 在这里处理获取到的博客封面图
|
|
|
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.log(error);
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.catch(error => {
|
|
|
this.$message({
|
|
|
message: error.message,
|
|
|
type: "error"
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
|
|
|
showTip() {
|
|
|
this.$router.push({path: '/weiYan'});
|
|
|
},
|
|
|
cancelEdit() {
|
|
|
// 取消编辑
|
|
|
this.showEditor = false;
|
|
|
this.showUpdateBtn = false;
|
|
|
this.showPublishBtn = true;
|
|
|
this.blogContent = "";
|
|
|
this.blogContentTitle = "";
|
|
|
},
|
|
|
saveBlog() {
|
|
|
let selectedIndex = this.selectedCategoryIndex+1;
|
|
|
console.log('选中的分类索引号为：' + selectedIndex);
|
|
|
const articleVO = {
|
|
|
userId:this.$store.state.currentUser.id,
|
|
|
articleContent: this.blogContent ,// 获取博客内容
|
|
|
articleTitle:this.blogContentTitle,
|
|
|
// 其他博客相关数据...
|
|
|
sortId:1,
|
|
|
labelId:selectedIndex,
|
|
|
articleCover:this.articleUp.articleCover
|
|
|
};
|
|
|
console.log(this.$store.state.currentUser)
|
|
|
console.log(this.articleUp.articleCover+"cover")
|
|
|
// console.log("index:"+document.getElementById('category').select)
|
|
|
this.$http.post('/article/saveArticle', articleVO)
|
|
|
.then(response => {
|
|
|
// 请求成功处理逻辑
|
|
|
console.log('博客保存成功！');
|
|
|
this.getUserArticles();
|
|
|
this.showEditor = false;
|
|
|
this.blogContent = "";
|
|
|
this.blogContentTitle = "";
|
|
|
this.$message({
|
|
|
message: '发布成功',
|
|
|
type: 'success'
|
|
|
});
|
|
|
})
|
|
|
.catch(error => {
|
|
|
// 请求失败处理逻辑
|
|
|
console.error('博客保存失败：', error);
|
|
|
this.$message({
|
|
|
message: '发布失败',
|
|
|
type: 'error'
|
|
|
});
|
|
|
});
|
|
|
|
|
|
},
|
|
|
deleteArticle(article){
|
|
|
// 发送异步请求删除文章
|
|
|
this.$http.get(`/article/deleteArticle?id=${article.id}`)
|
|
|
// .then(response => response.json())
|
|
|
.then(response => {
|
|
|
// 请求成功处理逻辑
|
|
|
console.log('博客删除成功！');
|
|
|
console.log(response)
|
|
|
this.getUserArticles()
|
|
|
this.getUserArticleLabelTotalNum()
|
|
|
})
|
|
|
.catch(error => {
|
|
|
// 请求失败处理逻辑
|
|
|
console.error('删除博客失败：', error);
|
|
|
});
|
|
|
|
|
|
},
|
|
|
updateArticle(article) {
|
|
|
this.showEditor = true;
|
|
|
this.showUpdateBtn = true;
|
|
|
this.showPublishBtn = false;
|
|
|
this.blogContentTitle = article.articleTitle;
|
|
|
this.blogContent = article.articleContent;
|
|
|
this.selectedCategoryIndex = article.labelId - 1; // 设置下拉框选中的索引值
|
|
|
this.articleUp.id = article.id;
|
|
|
// this.blogLabelName
|
|
|
// 判断是否找到了 #editorArea 元素
|
|
|
const editorArea = document.getElementById('editorArea');
|
|
|
if (editorArea) {
|
|
|
editorArea.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
|
} else {
|
|
|
console.log("#editorArea not found");
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
updateBlog(){
|
|
|
this.blogContentTitle = document.getElementById('areaTitle').value
|
|
|
this.blogContent = document.getElementById('areaContent').value
|
|
|
// document.getElementById('category').
|
|
|
this.articleUp.articleContent = document.getElementById('areaContent').value
|
|
|
this.articleUp.articleTitle = document.getElementById('areaTitle').value
|
|
|
this.articleUp.username = this.$store.state.currentUser.username
|
|
|
this.articleUp.labelId = this.selectedCategoryIndex+1
|
|
|
|
|
|
//发送异步请求更新文章
|
|
|
this.$http.post('/article/updateArticle', this.articleUp)
|
|
|
.then(response => {
|
|
|
// 请求成功处理逻辑
|
|
|
console.log('博客更新成功！');
|
|
|
|
|
|
console.log(response)
|
|
|
this.getUserArticles()
|
|
|
this.getUserArticleLabelTotalNum()
|
|
|
this.$message({
|
|
|
message: '更新成功',
|
|
|
type: 'success'
|
|
|
});
|
|
|
this.showEditor = false;
|
|
|
this.showPublishBtn = true;
|
|
|
this.showUpdateBtn = false;
|
|
|
this.blogContent = "";
|
|
|
this.blogContentTitle = "";
|
|
|
})
|
|
|
.catch(error => {
|
|
|
// 请求失败处理逻辑
|
|
|
console.error('更新博客失败：', error);
|
|
|
this.$message({
|
|
|
message: '更新失败',
|
|
|
type: 'error'
|
|
|
});
|
|
|
this.showPublishBtn = true;
|
|
|
this.showUpdateBtn = false;
|
|
|
this.blogContent = "";
|
|
|
this.blogContentTitle = "";
|
|
|
});
|
|
|
},
|
|
|
getBlogLabels() {
|
|
|
const url = "/webInfo/listLabel";
|
|
|
console.log("gettingLabels");
|
|
|
// 发送GET请求
|
|
|
axios.get(url)
|
|
|
.then(response => {
|
|
|
console.log(response.data.data)
|
|
|
const labels = response.data.data;
|
|
|
this.blogLabels = Object.values(labels).map(label => label.labelName);
|
|
|
|
|
|
// 将标签数据赋值给blogLabels数组
|
|
|
// this.blogLabels = labels;
|
|
|
})
|
|
|
.catch(error => {
|
|
|
// 请求失败，处理错误
|
|
|
console.error(error);
|
|
|
});
|
|
|
},
|
|
|
handleFileChange() {
|
|
|
let file0 = this.$refs.fileInput.files[0];
|
|
|
this.file = file0;
|
|
|
console.log('上传的文件:', file0);
|
|
|
|
|
|
// 这里可以进行进一步的处理，比如上传文件到服务器等操作
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.outside{
|
|
|
background: linear-gradient(-45deg, #e8d8b9, #fae1d9, #a3e9eb, #bdbdf0, #eec1ea);
|
|
|
}
|
|
|
/* 组件的样式 */
|
|
|
.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;
|
|
|
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;
|
|
|
font-size: 24px;
|
|
|
}
|
|
|
|
|
|
.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);
|
|
|
}
|
|
|
|
|
|
.write-blog-btn {
|
|
|
//position: absolute;
|
|
|
//left: 470px;
|
|
|
//top: 197px;
|
|
|
//width: 160px;
|
|
|
//height: 63px;
|
|
|
margin-top: 7px;
|
|
|
background-color: var(--gradualRed);
|
|
|
color: #181313;
|
|
|
border-radius: 20px;
|
|
|
font-size: 24px;
|
|
|
font-weight: bold;
|
|
|
display: inline-block;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
|
transition: all .2s ease-in-out;
|
|
|
border: 2px solid #1675b4; /* 添加边框 */
|
|
|
}
|
|
|
.write-blog-btn:hover {
|
|
|
transform: scale(1.1);
|
|
|
border: 2px solid #053246; /* 鼠标悬停时修改边框颜色 */
|
|
|
}
|
|
|
|
|
|
.write-blog-btn:hover {
|
|
|
transform: scale(1.1); /* 鼠标悬停时缩放 */
|
|
|
}
|
|
|
|
|
|
.blog-editor {
|
|
|
margin: 0 auto;
|
|
|
align-self: center;
|
|
|
width: 80%;
|
|
|
height: 830px;
|
|
|
background-color: #e7deef;
|
|
|
border-radius: 20px;
|
|
|
margin-top: 20px;
|
|
|
padding: 10px;
|
|
|
border: #5a0bb9 1px solid;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.blog-editor-title {
|
|
|
display: block;
|
|
|
margin: 0 auto;
|
|
|
width: 40%;
|
|
|
height: 60px;
|
|
|
background-color: #ffffff;
|
|
|
border-radius: 20px;
|
|
|
padding: 10px;
|
|
|
box-sizing: border-box;
|
|
|
font-weight: bolder;
|
|
|
font-size: 23px;
|
|
|
text-align: center; /* 将文本居中对齐 */
|
|
|
font-family: "Microsoft YaHei";
|
|
|
}
|
|
|
|
|
|
.blog-editor-content {
|
|
|
display: block;
|
|
|
margin: 0 auto;
|
|
|
width: 100%;
|
|
|
height: 450px;
|
|
|
//resize: none;
|
|
|
//border: none;
|
|
|
//outline: none;
|
|
|
border-radius: 20px;
|
|
|
font-size: 30px;
|
|
|
font-weight: bold;
|
|
|
margin-top: 10px;
|
|
|
//font-family: "Microsoft YaHei";
|
|
|
}
|
|
|
|
|
|
.editor-btns {
|
|
|
display: inline-block;
|
|
|
float: right;
|
|
|
justify-content: flex-end;
|
|
|
margin-top: 16px;
|
|
|
}
|
|
|
|
|
|
.cancel-btn,
|
|
|
.publish-btn {
|
|
|
width: 100px;
|
|
|
height: 35px;
|
|
|
color: #fff;
|
|
|
border-radius: 10px;
|
|
|
cursor: pointer;
|
|
|
transition: all .2s linear;
|
|
|
font-size: 19px;
|
|
|
font-weight: bold;
|
|
|
margin-top: 170px;
|
|
|
}
|
|
|
|
|
|
.cancel-btn {
|
|
|
background-color: #ccc;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.publish-btn {
|
|
|
background-color: var(--gradualRed);
|
|
|
color: #1d1f21;
|
|
|
}
|
|
|
|
|
|
.cancel-btn:hover,
|
|
|
.publish-btn:hover {
|
|
|
transform: translateY(-2px);
|
|
|
}
|
|
|
.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;
|
|
|
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;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.card-content2-icon {
|
|
|
color: var(--red);
|
|
|
margin-right: 5px;
|
|
|
animation: scale 1s ease-in-out infinite;
|
|
|
font-size: 30px;
|
|
|
}
|
|
|
|
|
|
.aside-post-detail {
|
|
|
display: flex;
|
|
|
cursor: pointer;
|
|
|
width: 70%;
|
|
|
//background-color: #1a252f;
|
|
|
}
|
|
|
|
|
|
.aside-post-image {
|
|
|
width: 200px;
|
|
|
border-radius: 0.2rem;
|
|
|
margin-right: 8px;
|
|
|
overflow: hidden;
|
|
|
font-size: 30px;
|
|
|
}
|
|
|
|
|
|
.error-aside-image {
|
|
|
display: inline-block;
|
|
|
background: var(--themeBackground);
|
|
|
color: var(--white);
|
|
|
padding: 10px;
|
|
|
text-align: center;
|
|
|
width: 100px;
|
|
|
height: 100%;
|
|
|
//background-color: #1abc9c;
|
|
|
}
|
|
|
|
|
|
.aside-post-title {
|
|
|
display: inline-block;
|
|
|
width: 360px;
|
|
|
text-align: center;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
background-color: rgb(236, 231, 153);
|
|
|
line-height: 30px; /* 假设容器高度为 30px */
|
|
|
text-indent: -15px; /* 负的半个 line-height */
|
|
|
padding-top: 3px;
|
|
|
border-radius: 5px;
|
|
|
font-size: 30px;
|
|
|
}
|
|
|
.aside-post-content {
|
|
|
display: inline-block;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
background-color: rgb(193, 236, 153);
|
|
|
line-height: 30px; /* 假设容器高度为 30px */
|
|
|
text-indent: -15px; /* 负的半个 line-height */
|
|
|
padding-top: 3px;
|
|
|
border-radius: 5px;
|
|
|
margin-left: 10px;
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
.error-aside-image:hover,
|
|
|
.aside-post-title:hover,
|
|
|
.aside-post-content:hover,
|
|
|
.aside-post-label {
|
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
.aside-post-label {
|
|
|
width: 300px;
|
|
|
display: inline-block;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
margin-top: 8px;
|
|
|
margin-bottom: 20px;
|
|
|
margin-left: 10px;
|
|
|
color: var(--greyFont);
|
|
|
font-size: 23px;
|
|
|
text-align: center;
|
|
|
background-color: #eebcf1;
|
|
|
}
|
|
|
.aside-post-date {
|
|
|
margin-top: 8px;
|
|
|
margin-bottom: 20px;
|
|
|
color: var(--greyFont);
|
|
|
font-size: 23px;
|
|
|
}
|
|
|
|
|
|
.recommend-aside-header-author {
|
|
|
display: inline-block;
|
|
|
text-align: center;
|
|
|
width: 100px;
|
|
|
font-size: 30px;
|
|
|
margin-right: 20px;
|
|
|
background-color: #c5fcf1;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.recommend-aside-header-title {
|
|
|
display: inline-block;
|
|
|
text-align: center;
|
|
|
width: 200px;
|
|
|
font-size: 30px;
|
|
|
background-color: #f5dedf;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.recommend-aside-header-content {
|
|
|
margin-left: 20px;
|
|
|
display: inline-block;
|
|
|
font-size: 30px;
|
|
|
text-align: center;
|
|
|
width: 609px;
|
|
|
background-color: #e1f7f8;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.recommend-aside-header-label {
|
|
|
margin-left: 42px;
|
|
|
display: inline-block;
|
|
|
font-size: 30px;
|
|
|
text-align: center;
|
|
|
width: 160px;
|
|
|
background-color: #e1f7f8;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.delete-icon {
|
|
|
//background-image: url(../assets/file/delete.jpg);
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: contain;
|
|
|
width: 26px; /* 图标的宽度 */
|
|
|
height: 26px; /* 图标的高度 */
|
|
|
cursor: pointer;
|
|
|
margin-top: 4px;
|
|
|
margin-left: 3px;
|
|
|
}
|
|
|
.update-icon {
|
|
|
//background-image: url(../assets/file/delete.jpg);
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: contain;
|
|
|
width: 29px; /* 图标的宽度 */
|
|
|
height: 26px; /* 图标的高度 */
|
|
|
cursor: pointer;
|
|
|
margin-top: 4px;
|
|
|
margin-left: 6px;
|
|
|
}
|
|
|
.labelSelect {
|
|
|
//margin: 30px;
|
|
|
padding: 4px;
|
|
|
//background-color: rgba(215, 188, 248, 0.64);
|
|
|
margin: 0 auto;
|
|
|
width: 100%;
|
|
|
display: inline-block;
|
|
|
text-align: center;
|
|
|
font-size: 23px;
|
|
|
}
|
|
|
select {
|
|
|
font-size: 20px; /* 修改select框的字体大小 */
|
|
|
padding: 8px; /* 添加一些内边距 */
|
|
|
border-radius: 10px; /* 圆角边框 */
|
|
|
border: 2px solid #ccc; /* 边框样式 */
|
|
|
background-color: #f5f5f5; /* 背景颜色 */
|
|
|
}
|
|
|
|
|
|
option {
|
|
|
font-size: 18px; /* 修改选项的字体大小 */
|
|
|
color: #333; /* 修改选项的字体颜色 */
|
|
|
}
|
|
|
.blog-card-container {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.blog-card {
|
|
|
width: 31%;
|
|
|
margin: 20px auto;
|
|
|
background: linear-gradient(to bottom, #f3dcfc, #e5ddff);
|
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
|
|
border-radius: 10px;
|
|
|
padding: 20px;
|
|
|
height: 550px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.blog-card:hover {
|
|
|
transform: translateY(-5px); /* 鼠标悬停时微微抬起 */
|
|
|
}
|
|
|
|
|
|
.blog-card-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.blog-card-cover {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 10px;
|
|
|
background-color: #e0d0f3;
|
|
|
}
|
|
|
.author {
|
|
|
font-weight: bold;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
font-size: 24px;
|
|
|
cursor: pointer;
|
|
|
color: #333; /* 标题颜色 */
|
|
|
}
|
|
|
|
|
|
.blog-card-content {
|
|
|
font-size: 18px;
|
|
|
line-height: 1.6;
|
|
|
overflow: auto; /* 使用滚动条来展示溢出的内容 */
|
|
|
text-overflow: ellipsis;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 3; /* 控制正文行数 */
|
|
|
-webkit-box-orient: vertical;
|
|
|
height: 60% /* 设置卡片内容的最大高度 */
|
|
|
}
|
|
|
.blog-card-content::-webkit-scrollbar {
|
|
|
width: 8px; /* 设置滚动条的宽度 */
|
|
|
}
|
|
|
|
|
|
.blog-card-content::-webkit-scrollbar-thumb {
|
|
|
background-color: purple; /* 设置滚动条滑块的颜色 */
|
|
|
border-radius: 4px; /* 设置滚动条滑块的圆角 */
|
|
|
}
|
|
|
|
|
|
.blog-card-content::-webkit-scrollbar-track {
|
|
|
background-color: lightgray; /* 设置滚动条轨道的背景颜色 */
|
|
|
border-radius: 4px; /* 设置滚动条轨道的圆角 */
|
|
|
}
|
|
|
.blog-card-footer {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-top: 20px;
|
|
|
font-size: 14px;
|
|
|
color: #666; /* 页脚文字颜色 */
|
|
|
}
|
|
|
|
|
|
.label,
|
|
|
.date {
|
|
|
margin-right: 10px;
|
|
|
font-size: 17px;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
.actions {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.delete-icon,
|
|
|
.update-icon {
|
|
|
margin-left: 10px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.pictureUpload {
|
|
|
display: inline-block;
|
|
|
margin-top: 17px;
|
|
|
background-color: #d0c9f8; /* 设置按钮背景颜色 */
|
|
|
color: #fff; /* 设置文字颜色为白色 */
|
|
|
border: none; /* 移除边框 */
|
|
|
padding: 10px 20px; /* 调整内边距 */
|
|
|
font-size: 18px; /* 设置字体大小 */
|
|
|
border-radius: 10px; /* 添加圆角边框 */
|
|
|
cursor: pointer; /* 鼠标悬停时显示手型光标 */
|
|
|
transition: background-color 0.3s ease; /* 添加过渡效果 */
|
|
|
}
|
|
|
|
|
|
.pictureUpload:hover {
|
|
|
background-color: #b5a9f1; /* 鼠标悬停时修改背景颜色 */
|
|
|
}
|
|
|
.blog-card-cover img {
|
|
|
width: 100%; /* 设置图片宽度为容器宽度 */
|
|
|
height: 100px; /* 设置图片高度为容器高度 */
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.publicBlog {
|
|
|
margin-left: 10px;
|
|
|
//display: inline-block;
|
|
|
margin-top: 7px;
|
|
|
background-color: var(--gradualRed);
|
|
|
color: #181313;
|
|
|
border-radius: 20px;
|
|
|
font-size: 24px;
|
|
|
font-weight: bold;
|
|
|
display: inline-block;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
|
transition: all .2s ease-in-out;
|
|
|
border: 2px solid #1675b4; /* 添加边框 */
|
|
|
}
|
|
|
|
|
|
.publicBlog:hover {
|
|
|
background-color: #2980b9;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
