itbaima-study/itbaima-forum-jwt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化论坛帖子列表样式

Browse Source
This commit is contained in:
柏码の讲师 2024-12-20 16:32:08 +08:00
parent e8c0096979
commit 5f9c8a3c1e
2 changed files with 37 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
my-project-frontend/src/components/TopicEditor.vue
View File

@ -146,45 +146,43 @@ const editorOption = {
</script>
<template>
<div>
<el-drawer direction="btt" :model-value="show"
:size="650" @open="initEditor"
@close="emit('close')"
:show-close="false">
<template #header>
<div>
<div style="font-weight: bold">发表新的帖子</div>
<div style="font-size: 13px">发表您的内容之前，请遵守相关法律法规，不要出现骂人爆粗口这种不文明行为。</div>
</div>
</template>
<div style="display: flex;gap: 10px">
<div style="width: 120px">
<el-select placeholder="选择类型..." v-model="editor.type" :disabled="!store.forum.types.length">
<el-option v-for="item in store.forum.types" :value="item.id" :label="item.name"/>
</el-select>
</div>
<div style="flex: 1">
<el-input maxlength="30" placeholder="请输入帖子标题..."
:prefix-icon="Document" v-model="editor.title"/>
</div>
</div>
<div style="margin-top: 15px;height: 450px;border-radius: 5px;overflow: hidden"
v-loading="editor.uploading"
element-loading-text="正在上传图片，请稍后...">
<quill-editor ref="refEditor" v-model:content="editor.text"
:options="editorOption" content-type="delta"
style="height: calc(100% - 44px)"/>
</div>
<div style="display: flex;justify-content: space-between;margin-top: 10px">
<div style="color: grey;font-size: 13px">
当前字数: {{ contentLength }}（最大支持20000字）
</div>
<div>
<el-button @click="submitTopic" type="success" plain>{{submitButton}}</el-button>
</div>
</div>
</el-drawer>
<el-drawer direction="btt" :model-value="show"
:size="650" @open="initEditor"
@close="emit('close')"
:show-close="false">
<template #header>
<div>
<div style="font-weight: bold">发表新的帖子</div>
<div style="font-size: 13px">发表您的内容之前，请遵守相关法律法规，不要出现骂人爆粗口这种不文明行为。</div>
</div>
</template>
<div style="display: flex;gap: 10px">
<div style="width: 120px">
<el-select placeholder="选择类型..." v-model="editor.type" :disabled="!store.forum.types.length">
<el-option v-for="item in store.forum.types" :value="item.id" :label="item.name"/>
</el-select>
</div>
<div style="flex: 1">
<el-input maxlength="30" placeholder="请输入帖子标题..."
:prefix-icon="Document" v-model="editor.title"/>
</div>
</div>
<div style="margin-top: 15px;height: 450px;border-radius: 5px;overflow: hidden"
v-loading="editor.uploading"
element-loading-text="正在上传图片，请稍后...">
<quill-editor ref="refEditor" v-model:content="editor.text"
:options="editorOption" content-type="delta"
style="height: calc(100% - 44px)"/>
</div>
<div style="display: flex;justify-content: space-between;margin-top: 10px">
<div style="color: grey;font-size: 13px">
当前字数: {{ contentLength }}（最大支持20000字）
</div>
<div>
<el-button @click="submitTopic" type="success" plain>{{submitButton}}</el-button>
</div>
</div>
</el-drawer>
</template>
<style lang="less" scoped>

6
my-project-frontend/src/views/forum/TopicList.vue
View File

@ -18,7 +18,6 @@ import {get} from "@/net";
import {ElMessage} from "element-plus";
import TopicEditor from "@/components/TopicEditor.vue";
import {useStore} from "@/store";
import axios from "axios";
import router from "@/router";
import TopicCollectList from "@/components/TopicCollectList.vue";
import TopicTag from "@/components/TopicTag.vue";
@ -95,7 +94,7 @@ navigator.geolocation.getCurrentPosition(position => {
</script>
<template>
<div style="display: flex;margin: 20px auto;gap: 20px;max-width: 1000px">
<div style="display: flex;margin: 20px auto;gap: 20px;max-width: 1000px;padding: 0 20px">
<div style="flex: 1">
<light-card>
<div class="edit-topic">
@ -222,9 +221,6 @@ navigator.geolocation.getCurrentPosition(position => {
<div class="friend-link">
<el-image src="https://element-plus.org/images/vform-banner.png" style="height: 100%"/>
</div>
<div class="friend-link">
<el-image src="https://element-plus.org/images/sponsors/jnpfsoft.jpg" style="height: 100%"/>
</div>
</div>
</div>
</div>