gitea
/
blog_front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add new

master
panda 7 months ago
parent
39fab14e1d
commit
a1f1a958a4
4 changed files with 46 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/views/admin/blogmanage/BlogManageView.vue
  2. 2
      src/views/admin/diarymanage/DiaryManageView.vue
  3. 27
      src/views/blog/HomePageView.vue
  4. 47
      src/views/blog/blogcontent/BlogListView.vue

2
src/views/admin/blogmanage/BlogManageView.vue
View File

@ -13,7 +13,7 @@
</div>
<div class="modal">
<a-modal v-model:open="formControl.open" :title="delControl.title" width="100%" wrap-class-name="full-modal"
@ok="onSubmit" ok-text="确认" cancel-text="取消" @cancel="unControl(delControl.title)">
@ok="onSubmit" ok-text="确认" cancel-text="取消" @cancel="unControl(delControl.title)" :maskClosable="false">
<a-form ref="formRef" :model="formState" :rules="rules">
<a-flex gap="large" justify="space-between">
<a-form-item label="博客标题" name="blogtitle">

2
src/views/admin/diarymanage/DiaryManageView.vue
View File

@ -13,7 +13,7 @@
</div>
<div class="modal">
<a-modal v-model:open="formControl.open" :title="delControl.title" width="100%" wrap-class-name="full-modal"
@ok="onSubmit" ok-text="确认" cancel-text="取消" @cancel="unControl(delControl.title)">
@ok="onSubmit" ok-text="确认" cancel-text="取消" @cancel="unControl(delControl.title)" :maskClosable="false">
<a-form ref="formRef" :model="formState" :rules="rules">
<a-flex gap="large" justify="space-between">
<a-form-item label="日记标题" name="diarytitle">

27
src/views/blog/HomePageView.vue
View File

@ -3,7 +3,7 @@
<div class="mainContent" v-for="article in displayedData">
<div class="blogs" v-if="article.blogtitle">
<a-badge-ribbon :text=article.typename color="black">
<a-card hoverable>
<a-card hoverable>
<h2>{{ article.blogtitle }}</h2>
<div class="tag-group">
<a-tag color="#E6E6FA">
@ -28,12 +28,12 @@
<template #icon>
<component :is=iconComponents.YueDuLined />
</template>
阅读时长≈{{ Math.round(article.blogcontent.length/ 200) }}分
阅读时长≈{{ Math.round(article.blogcontent.length / 200) }}分
</a-tag>
</div>
<div class="blog-content">
<div class="image-container">
<a-image :preview="false" :src=article.imglink class="responsive-image"/>
<a-image :preview="false" :src=article.imglink class="responsive-image" />
</div>
<div class="text-container">
{{ article.blogcontent }}
@ -77,12 +77,12 @@
<template #icon>
<component :is=iconComponents.YueDuLined />
</template>
阅读时长≈{{ Math.round(article.diarycontent.length/ 200) }}分
阅读时长≈{{ Math.round(article.diarycontent.length / 200) }}分
</a-tag>
</div>
<div class="blog-content">
<div class="image-container">
<a-image :preview="false" :src=article.imglink class="responsive-image"/>
<a-image :preview="false" :src=article.imglink class="responsive-image" />
</div>
</div>
<div class="read-button">
@ -112,7 +112,7 @@
import { onMounted, ref, watch } from 'vue';
import type { homePageInterface } from '@/api';
import iconComponents from "@/assets/index"
import { get,put } from '@/tools/request';
import { get, put } from '@/tools/request';
import router from '@/router';
import { homePageStore } from '@/stores';
const homepageStore = homePageStore();
@ -120,10 +120,10 @@ const randomColor = () => {
const labelColor = ref(["processing", "success", "error", "warning", "magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "geekblue", "purple"])
return labelColor.value[Math.floor(Math.random() * labelColor.value.length)];
}
const blogCount=async (id:any)=>{
const blogCount = async (id: any) => {
await put(`/blogs/update/${id}/readnum`)
}
const diaryCount=async (id:any)=>{
const diaryCount = async (id: any) => {
await put(`/diarys/update/${id}/readnum`)
}
const readMoreBlog = (id: any) => {
@ -204,21 +204,24 @@ watch(() => homepageStore.homepagelist, () => {
.main .blog-content {
display: flex;
align-items: flex-start;
margin: 48px;
}
.blogs .image-container {
width: 300px;
flex-shrink: 0;
width: 200px;
}
.blogs .responsive-image {
width: 100%;
height: auto;
}
.diarys .image-container {
width: 1000px;
}
.diarys .responsive-image {
@ -290,7 +293,7 @@ watch(() => homepageStore.homepagelist, () => {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
-webkit-line-clamp: 4;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 2;

47
src/views/blog/blogcontent/BlogListView.vue
View File

@ -31,13 +31,13 @@
</a-tag>
</div>
<div class="blog-content">
<div>
<a-image :preview="false" :width="200" :src=article.imglink />
<div class="image-container">
<a-image :preview="false" :src=article.imglink class="responsive-image"/>
</div>
<div class="text-container">
{{ article.blogcontent }}
</div>
</div>
<div class="text-container">
{{ article.blogcontent }}
</div>
</div>
<div class="read-button">
<a-button type="primary" shape="round" @click="readMore(article.id)">阅读全文</a-button>
</div>
@ -48,6 +48,7 @@
</a-card>
</a-badge-ribbon>
</div>
<div class="pagination" v-if="blogstore.isPage">
<a-pagination v-model:current="current" v-if="dataLoaded" v-model:page-size="pageSizeRef"
:page-size-options="pageSizeOptions" :total="total" show-size-changer @change="onShowSizeChange">
@ -71,7 +72,7 @@ import iconComponents from '@/assets';
import { blogStore } from "@/stores"
import dayjs from 'dayjs';
import type { blogInterface } from '@/api/admin';
import { get,put } from "@/tools/request"
import { get, put } from "@/tools/request"
import router from '@/router';
const blogstore = blogStore()
const randomColor = () => {
@ -95,7 +96,7 @@ const blogList = async (page: number, pageSize: number) => {
page,
page_size: pageSize,
})
bloglist.value = response.data.data.blogs.map((items: any,index:number) => ({
bloglist.value = response.data.data.blogs.map((items: any, index: number) => ({
id: items.id,
key: items.key,
blogtitle: items.blogtitle,
@ -106,16 +107,16 @@ const blogList = async (page: number, pageSize: number) => {
create_at: dayjs(items.create_at).format('YYYY-MM-DD HH:mm:ss'),
update_at: dayjs(items.update_at).format('YYYY-MM-DD HH:mm:ss'),
readnum: items.readnum,
readminite: Math.round(items.blogcontent.length/ 200),
readminite: Math.round(items.blogcontent.length / 200),
imglink: items.imglink || 'https://www.wuruilin.cn/personself/暂无图片.jpg',
}))
total.value = response.data.data.total; // 更新总数
if (response.data.data.total===0) {
blogstore.isEmpty=true
blogstore.isPage=false
}else{
blogstore.isEmpty=false
blogstore.isPage=true
if (response.data.data.total === 0) {
blogstore.isEmpty = true
blogstore.isPage = false
} else {
blogstore.isEmpty = false
blogstore.isPage = true
}
pageSizeRef.value = pageSize; // 更新页大小，如果需要从接口返回页大小也可以改为 response.data.data.page_size
dataLoaded.value = true
@ -160,8 +161,18 @@ onMounted(() => {
.main .blog-content {
display: flex;
align-items: flex-start;
margin: 48px;
width: 45%;
}
.blog-content .image-container {
flex-shrink: 0;
width: 200px;
}
.blog-content .responsive-image {
width: 100%;
height: auto;
}
.main .blog-content>:first-child {
@ -218,11 +229,11 @@ onMounted(() => {
}
}
.main .text-container {
.blog-content .text-container {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
-webkit-line-clamp: 4;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 2;

Write Preview
Loading…
Cancel
Save