From 38e9a410b07bd78008cddddaae297424a03413bc Mon Sep 17 00:00:00 2001
From: zhangjunwen <zhangjunwen@inspur.com>
Date: Tue, 30 Apr 2024 15:58:05 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=90=E7=BB=B4=E7=A4=BE=E5=8C=BA=E8=BF=90?=
 =?UTF-8?q?=E7=BB=B4=E8=AE=BA=E5=9D=9B=E8=B4=B4=E5=AD=90=E5=92=8C=E5=8F=91?=
 =?UTF-8?q?=E8=A1=A8=E5=B8=96=E5=AD=90=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 inspur-service/inspur-community/pom.xml       |  32 +
 inspur-ui/src/api/community/info.js           |  52 +
 inspur-ui/src/components/Emoji/emoji.json     |   3 +
 inspur-ui/src/components/Emoji/index.vue      |  68 ++
 .../community/comment/InputComponent.vue      | 204 ++++
 .../src/views/community/comment/Ipcomment.vue | 339 +++++++
 .../src/views/community/comment/comments.vue  | 369 +++++++
 .../views/community/forum/forumDetails.vue    | 437 +++++++++
 .../src/views/community/forum/forumForm.vue   | 306 ++++++
 inspur-ui/src/views/community/forum/index.vue | 927 ++++++++++++++++++
 10 files changed, 2737 insertions(+)
 create mode 100644 inspur-service/inspur-community/pom.xml
 create mode 100644 inspur-ui/src/api/community/info.js
 create mode 100644 inspur-ui/src/components/Emoji/emoji.json
 create mode 100644 inspur-ui/src/components/Emoji/index.vue
 create mode 100644 inspur-ui/src/views/community/comment/InputComponent.vue
 create mode 100644 inspur-ui/src/views/community/comment/Ipcomment.vue
 create mode 100644 inspur-ui/src/views/community/comment/comments.vue
 create mode 100644 inspur-ui/src/views/community/forum/forumDetails.vue
 create mode 100644 inspur-ui/src/views/community/forum/forumForm.vue
 create mode 100644 inspur-ui/src/views/community/forum/index.vue

diff --git a/inspur-service/inspur-community/pom.xml b/inspur-service/inspur-community/pom.xml
new file mode 100644
index 0000000..9d1285d
--- /dev/null
+++ b/inspur-service/inspur-community/pom.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <parent>
+        <artifactId>inspur</artifactId>
+        <groupId>com.inspur</groupId>
+        <version>3.8.7</version>
+    </parent>
+
+    <modelVersion>4.0.0</modelVersion>
+
+    <artifactId>inspur-community</artifactId>
+
+    <description>运维社区模块</description>
+    <dependencies>
+        <!-- 通用工具-->
+        <dependency>
+            <groupId>com.inspur</groupId>
+            <artifactId>inspur-common</artifactId>
+        </dependency>
+        <!-- 系统模块-->
+        <dependency>
+            <groupId>com.inspur</groupId>
+            <artifactId>inspur-system</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.projectlombok</groupId>
+            <artifactId>lombok</artifactId>
+        </dependency>
+    </dependencies>
+</project>
diff --git a/inspur-ui/src/api/community/info.js b/inspur-ui/src/api/community/info.js
new file mode 100644
index 0000000..4e42fff
--- /dev/null
+++ b/inspur-ui/src/api/community/info.js
@@ -0,0 +1,52 @@
+import request from "@/utils/request";
+
+// 查询社区帖子信息列表
+export function listCommunityInfo(query) {
+  return request({
+    url: "/community/info/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询社区帖子信息详细
+export function getCommunityInfo(postId) {
+  return request({
+    url: "/community/info/" + postId,
+    method: "get",
+  });
+}
+
+// 新增社区帖子信息
+export function addCommunityInfo(data) {
+  return request({
+    url: "/community/info",
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改社区帖子信息
+export function updateCommunityInfo(data) {
+  return request({
+    url: "/community/info",
+    method: "put",
+    data: data,
+  });
+}
+
+//浏览量加一
+export function addViews(postId) {
+  return request({
+    url: "/community/info/addViews/" + postId,
+    method: "put",
+  });
+}
+
+// 删除社区帖子信息
+export function delCommunityInfo(postId) {
+  return request({
+    url: "/community/info/" + postId,
+    method: "delete",
+  });
+}
diff --git a/inspur-ui/src/components/Emoji/emoji.json b/inspur-ui/src/components/Emoji/emoji.json
new file mode 100644
index 0000000..33975b6
--- /dev/null
+++ b/inspur-ui/src/components/Emoji/emoji.json
@@ -0,0 +1,3 @@
+{
+  "data": ["😀","😁","😂","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","😗","😙","😚","😇","😐","😑","😶","😏","😣","😥","😮","😯","😪","😫","😴","😌","😛","😜","😝","😒","😓","😔","😕","😲","😷","😖","😞","😟","😤","😢","😭","😦","😧","😨","😬","😰","😱","😳","😵","😡","😠","💘","❤","💓","💔","💕","💖","💗","💙","💚","💛","💜","💝","💞","💟","❣","💪","👈","👉","☝","👆","👇","✌","✋","👌","👍","👎","✊","👊","👋","👏","👐","✍","🍇","🍈","🍉","🍊","🍋","🍌","🍍","🍎","🍏","🍐","🍑","🍒","🍓","🍅","🍆","🌽","🍄","🌰","🍞","🍖","🍗","🍔","🍟","🍕","🍳","🍲","🍱","🍘","🍙","🍚","🍛","🍜","🍝","🍠","🍢","🍣","🍤","🍥","🍡","🍦","🍧","🍨","🍩","🍪","🎂","🍰","🍫","🍬","🍭","🍮","🍯","🍼","☕","🍵","🍶","🍷","🍸","🍹","🍺","🍻","🍴","🌹","🍀","🍎","💰","📱","🌙","🍁","🍂","🍃","🌷","💎","🔪","🔫","🏀","⚽","⚡","👄","👍","🔥","🙈","🙉","🙊","🐵","🐒","🐶","🐕","🐩","🐺","🐱","😺","😸","😹","😻","😼","😽","🙀","😿","😾","🐈","🐯","🐅","🐆","🐴","🐎","🐮","🐂","🐃","🐄","🐷","🐖","🐗","🐽","🐏","🐑","🐐","🐪","🐫","🐘","🐭","🐁","🐀","🐹","🐰","🐇","🐻","🐨","🐼","🐾","🐔","🐓","🐣","🐤","🐥","🐦","🐧","🐸","🐊","🐢","🐍","🐲","🐉","🐳","🐋","🐬","🐟","🐠","🐡","🐙","🐚","🐌","🐛","🐜","🐝","🐞","🦋","😈","👿","👹","👺","💀","☠","👻","👽","👾","💣"]
+}
\ No newline at end of file
diff --git a/inspur-ui/src/components/Emoji/index.vue b/inspur-ui/src/components/Emoji/index.vue
new file mode 100644
index 0000000..431e7c6
--- /dev/null
+++ b/inspur-ui/src/components/Emoji/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <el-popover placement="bottom" trigger="click" ref="popover"
+    v-model="popoverVisible">
+    <div class="emjioBox">
+      <ul class="emjio">
+        <li class="emjioLi" v-for="(item,i) in this.emojiList" :key="i" @click="selectEmit(item)">
+          {{item}}
+        </li>
+      </ul>
+    </div>
+    <el-link :underline="false" title="添加表情"
+      slot="reference">
+      😀
+    </el-link>
+  </el-popover>
+</template>
+
+<script>
+import emojiList from './emoji.json';
+export default {
+  name: 'emoji',
+  props: {},
+  data() {
+    return {
+      emojiList: [],
+      popoverVisible: false,
+    }
+  },
+  watch: {},
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.emojiList = emojiList.data
+    },
+    // 选择表情
+    selectEmit(item) {
+      this.$emit('output', item)
+      this.popoverVisible = false
+    }
+  },
+  beforeDestroy() {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .emjioBox {
+    background: #fff;
+    height: 150px;
+    width: 300px;
+    overflow: auto;
+    text-align: left;
+  }
+  .emjioBox .emjio {
+    padding: 0;
+  }
+  .emjioBox li {
+    display: inline-block;
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    cursor: pointer;
+  }
+</style>
diff --git a/inspur-ui/src/views/community/comment/InputComponent.vue b/inspur-ui/src/views/community/comment/InputComponent.vue
new file mode 100644
index 0000000..fcb6852
--- /dev/null
+++ b/inspur-ui/src/views/community/comment/InputComponent.vue
@@ -0,0 +1,204 @@
+<template>
+  <transition name="fade">
+    <div
+      class="input-wrapper"
+      v-if="show"
+    >
+      <el-input
+        class="gray-bg-input"
+        maxlength="100"
+        show-word-limit
+        v-model="inputComment"
+        type="textarea"
+        :rows="3"
+        @focus="inputFocus"
+        @blur="blur"
+        :placeholder="name"
+      >
+      </el-input>
+      <!--enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp"-->
+      <transition name="fade2">
+        <div
+          class="btn-control"
+          v-show="controlShow"
+        >
+          <el-row>
+            <el-col
+              :span="12"
+              style="text-align: left"
+            >
+              <Emoji @output="output"></Emoji>
+            </el-col>
+            <el-col
+              :span="12"
+              style="text-align: right"
+            >
+              <span
+                class="cancel"
+                @click="cancel"
+              >取消</span>
+              <el-button
+                class="btn"
+                type="success"
+                round
+                @click="commitComment"
+              >确定</el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </transition>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Emoji from "@/components/Emoji";
+export default {
+  props: {
+    //控制整个组件是否显示
+    show: {
+      type: Boolean,
+      required: true,
+    },
+    //传入input框的默认值
+    value: {
+      type: String,
+    },
+    //传入input框的默认值
+    toComment: {
+      type: String,
+    },
+    //传入input框的默认值
+    toId: {
+      type: Number,
+    },
+    //类型，end(文章末尾处), comment(评论里),
+    type: {
+      type: String,
+      // default: 'comment'
+    },
+  },
+  components: { Emoji },
+  data() {
+    return {
+      inputComment: "",
+      name: "",
+      id: "",
+      //确定取消按钮是否显示
+      controlShow: false,
+      cursorIndexStart: null, //光标选中开始的位置
+      cursorIndexEnd: null, //光标选中结束的位置
+    };
+  },
+  computed: {},
+  methods: {
+    /**
+     * 点击取消按钮
+     */
+    cancel() {
+      if (this.type === "end") {
+        this.controlShow = false;
+      }
+      this.$emit("cancel");
+    },
+
+    /**
+     * 提交评论
+     */
+    commitComment() {
+      this.$emit("confirm", { inputComment: this.inputComment, id: this.id });
+      this.inputComment = "";
+    },
+
+    //input活得焦点时调用
+    inputFocus() {
+      // console.log("focus");
+      if (this.type === "end") {
+        this.controlShow = true;
+      }
+    },
+    blur(e) {
+      this.cursorIndexStart = e.srcElement.selectionStart; // 获取input输入框失去焦点时光标选中开始的位置
+      this.cursorIndexEnd = e.srcElement.selectionEnd; // 获取input输入框失去焦点时光标选中结束的位置
+    },
+    output(val) {
+      if (this.cursorIndexStart !== null && this.inputComment) {
+        //如果 文本域获取了焦点, 则在光标位置处插入对应字段内容
+        this.inputComment =
+          this.inputComment.substring(0, this.cursorIndexStart) +
+          val +
+          this.inputComment.substring(this.cursorIndexEnd);
+      } else {
+        // 如果 文本域未获取焦点, 则在字符串末尾处插入对应字段内容
+        this.inputComment = this.inputComment ? this.inputComment : "" + val;
+      }
+    },
+  },
+  watch: {
+    //监听toComment更新，赋值给name
+    toComment: function (newValue, oldValue) {
+      this.name = newValue;
+      this.inputComment = "";
+    },
+    toId: function (newValue, oldValue) {
+      this.id = newValue;
+      this.inputComment = "";
+    },
+  },
+  mounted() {
+    if (this.type === "end") {
+      this.controlShow = false;
+    } else {
+      this.controlShow = true;
+    }
+    // console.log(this.controlShow)
+  },
+};
+</script>
+
+<style scoped rel="stylesheet/scss" lang="scss">
+.fade-enter-active,
+fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.input-wrapper {
+  padding: 10px;
+
+  .fade2-enter-active,
+  fade2-leave-active {
+    transition: opacity 0.5s;
+  }
+
+  .fade2-enter,
+  .fade2-leave-to {
+    opacity: 0;
+  }
+  .gray-bg-input,
+  .el-input__inner {
+    /*background-color: #67C23A;*/
+  }
+  .btn-control {
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: 10px;
+    .cancel {
+      font-size: 16px;
+      color: #606266;
+      margin-right: 20px;
+      cursor: pointer;
+      &:hover {
+        color: #333;
+      }
+    }
+    .confirm {
+      font-size: 16px;
+    }
+  }
+}
+</style>
diff --git a/inspur-ui/src/views/community/comment/Ipcomment.vue b/inspur-ui/src/views/community/comment/Ipcomment.vue
new file mode 100644
index 0000000..d217f2b
--- /dev/null
+++ b/inspur-ui/src/views/community/comment/Ipcomment.vue
@@ -0,0 +1,339 @@
+<template>
+  <el-container style="opacity: 0.9">
+    <div class="author">
+      <el-avatar
+        v-if="token==null"
+        icon="el-icon-user-solid"
+        size="large"
+      >
+        <!-- style="background-color: #666" -->
+      </el-avatar>
+      <el-avatar
+        v-else
+        :src="avatar"
+        size="large"
+      ></el-avatar>
+      <div>
+        <div class="nkname">
+          <span
+            class="name"
+            v-if="token==null"
+          >匿名用户</span>
+          <span
+            class="name"
+            v-else
+          >{{name}} </span>
+        </div>
+      </div>
+    </div>
+    <el-form
+      :model="messageForm"
+      :rules="messageFormRules"
+      ref="messageFormRef"
+    >
+      <el-form-item prop="content">
+        <el-input
+          @blur="blur"
+          :rows="5"
+          v-model="messageForm.content"
+          type="textarea"
+          maxlength="100"
+          show-word-limit
+          placeholder="请输入你的评论"
+        ></el-input>
+      </el-form-item>
+      <el-form-item style="text-align: right">
+        <el-row>
+          <el-col
+            :span="12"
+            style="text-align: left"
+          >
+            <Emoji @output="output"></Emoji>
+          </el-col>
+          <el-col
+            :span="12"
+            style="text-align: right"
+          >
+            <el-button
+              type="primary"
+              @click="publish"
+            >点击发表</el-button>
+          </el-col>
+        </el-row>
+      </el-form-item>
+    </el-form>
+    <el-divider v-if="messageList.length>0"><span style="color: #999;font-size: small;">最新评论</span></el-divider>
+    <comment
+      :comments="messageList"
+      @replyConfirm="commitComment"
+    ></comment>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getMessageList"
+    />
+  </el-container>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { getToken } from "@/utils/auth";
+// import {
+//   cmsListComment,
+//   cmsAddComment,
+// } from "@/api/cms/comment"
+import comment from "./comments.vue";
+import Emoji from "@/components/Emoji";
+export default {
+  name: "Ipcomment",
+  data() {
+    return {
+      picList: [],
+      editing: false,
+      messageList: [],
+      // userInfo: null,
+      message: {
+        userId: -1,
+        content: "",
+      },
+      messageForm: {},
+      // 总条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        parentId: null,
+        mainId: null,
+        likeNum: null,
+        content: null,
+        type: null,
+        blogId: this.$route.query.id,
+        userId: null,
+        delFlag: null,
+        createBy: null,
+      },
+      messageFormRules: {
+        content: [
+          {
+            min: 0,
+            max: 100,
+            message: "评论内容不超过100字！",
+          },
+        ],
+      },
+      cursorIndexStart: null, //光标选中开始的位置
+      cursorIndexEnd: null, //光标选中结束的位置
+    };
+  },
+  created() {
+    this.getMessageList();
+    this.reset();
+  },
+  updated: function () {
+    this.$nextTick(function () {
+      // 仅在整个视图都被渲染之后才会运行的代码
+      this.to();
+    });
+  },
+  computed: {
+    ...mapGetters(["token", "avatar", "name"]),
+  },
+  components: {
+    comment,
+    Emoji,
+  },
+  methods: {
+    // 表单重置
+    reset() {
+      this.messageForm = {
+        id: null,
+        parentId: null,
+        mainId: null,
+        likeNum: null,
+        content: null,
+        type: null,
+        blogId: this.$route.query.id,
+        userId: null,
+        delFlag: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+      };
+      this.resetForm("messageForm");
+    },
+    // 评论发表
+    publish() {
+      let token = getToken();
+      this.$refs.messageFormRef.validate(async (valid) => {
+        if (!valid) return;
+        if (
+          this.messageForm.content == null ||
+          this.messageForm.content == ""
+        ) {
+          this.$modal.msgError("评论内容不能为空！");
+          return;
+        }
+        if (token == null || token == "") {
+          this.messageForm.createBy = "匿名用户";
+          this.messageForm.type = "0";
+        } else {
+          this.messageForm.createBy = this.$store.getters.name;
+          this.messageForm.type = "0";
+        }
+        cmsAddComment(this.messageForm).then((response) => {
+          this.$modal.msgSuccess("评论发表成功");
+          this.reset();
+          this.getMessageList();
+        });
+      });
+    },
+    /**
+     * 提交评论
+     */
+    commitComment(value) {
+      this.reset();
+      this.messageForm.content = value.inputComment;
+      this.messageForm.parentId = value.id;
+      let token = getToken();
+      this.$refs.messageFormRef.validate(async (valid) => {
+        if (!valid) return;
+        if (
+          this.messageForm.content == null ||
+          this.messageForm.content == ""
+        ) {
+          this.$modal.msgError("评论内容不能为空！");
+          return;
+        }
+        if (token == null || token == "") {
+          this.messageForm.createBy = "匿名用户";
+          this.messageForm.type = "1";
+        } else {
+          this.messageForm.createBy = this.$store.getters.name;
+          this.messageForm.type = "1";
+        }
+        cmsAddComment(this.messageForm).then((response) => {
+          this.$modal.msgSuccess("评论发表成功");
+          this.reset();
+          this.getMessageList();
+        });
+      });
+    },
+    // 获取评论列表
+    async getMessageList() {
+      let token = getToken();
+      if (token != null && token != "") {
+        this.queryParams.createBy = this.$store.getters.name;
+      }
+      // cmsListComment(this.queryParams).then((response) => {
+      //   for (let i = 0; i < response.rows.length; i++) {
+      //     let mesInfo = response.rows[i];
+      //     if (mesInfo.avatar != null && mesInfo.avatar != "") {
+      //       response.rows[i].avatar =
+      //         process.env.VUE_APP_BASE_API + mesInfo.avatar;
+      //     }
+      //     if (mesInfo.children != null && mesInfo.children != "") {
+      //       for (let j = 0; j < response.rows[i].children.length; j++) {
+      //         let children = response.rows[i].children;
+      //         if (children.avatar != null && children.avatar != "") {
+      //           response.rows[i].children[j].avatar =
+      //             process.env.VUE_APP_BASE_API + children.avatar;
+      //         }
+      //       }
+      //     }
+      //   }
+      //   this.messageList = response.rows;
+      //   this.total = response.total;
+      // });
+    },
+    blur(e) {
+      this.cursorIndexStart = e.srcElement.selectionStart; // 获取input输入框失去焦点时光标选中开始的位置
+      this.cursorIndexEnd = e.srcElement.selectionEnd; // 获取input输入框失去焦点时光标选中结束的位置
+    },
+    output(val) {
+      if (this.cursorIndexStart !== null && this.messageForm.content) {
+        //如果 文本域获取了焦点, 则在光标位置处插入对应字段内容
+        this.messageForm.content =
+          this.messageForm.content.substring(0, this.cursorIndexStart) +
+          val +
+          this.messageForm.content.substring(this.cursorIndexEnd);
+      } else {
+        // 如果 文本域未获取焦点, 则在字符串末尾处插入对应字段内容
+        this.messageForm.content = this.messageForm.content
+          ? this.messageForm.content
+          : "" + val;
+      }
+    },
+    //跳转到相应位置
+    to() {
+      if (this.$route.query.commentId != null) {
+        var toEl = document.getElementById(this.$route.query.commentId);
+        if (toEl != null) {
+          if (toEl != null && toEl != "") {
+            // toEl 为指定跳转到该位置的DOM节点
+            let bridgeCms = toEl;
+            let bodyTop = document.body;
+            let heightCms = 0;
+            // 计算该 DOM 节点到 bodyTop 顶部距离
+            do {
+              heightCms += bridgeCms.offsetTop;
+              bridgeCms = bridgeCms.offsetParent;
+            } while (bridgeCms !== bodyTop);
+            // 滚动到指定位置
+            window.scrollTo({
+              top: heightCms,
+              behavior: "smooth",
+            });
+          }
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.el-container {
+  display: block;
+}
+
+.author {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.comment {
+  border-bottom: 1px dashed #ccc;
+  margin: 30px 0;
+  display: flex;
+}
+
+.content {
+  text-align: left;
+  font-size: 14px;
+  flex-grow: 1;
+}
+
+.nkname {
+  margin: 10px;
+  max-width: 530px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.date {
+  color: #999;
+  margin-left: 10px;
+}
+
+.reply {
+  margin-left: 10px;
+}
+</style>
diff --git a/inspur-ui/src/views/community/comment/comments.vue b/inspur-ui/src/views/community/comment/comments.vue
new file mode 100644
index 0000000..9b50ada
--- /dev/null
+++ b/inspur-ui/src/views/community/comment/comments.vue
@@ -0,0 +1,369 @@
+<!--评论模块-->
+<template>
+  <div class="container">
+    <div class="comment" v-for="item in comments">
+      <div class="info" :id="item.id">
+        <el-avatar v-if="item.avatar!==''&&item.avatar!=null" :src="item.avatar"></el-avatar>
+        <el-avatar v-else icon="el-icon-user-solid"></el-avatar>
+        <div class="right">
+          <div class="name">{{item.createBy}}</div>
+          <div class="date">{{item.createTime}}</div>
+        </div>
+      </div>
+      <div class="content">{{item.content}}</div>
+      <div class="control">
+        <span class="like" :class="{active: item.isLike}" @click="likeClick(item)">
+          <svg-icon icon-class="like" />
+          <span class="like-num" style="margin-left: 5px;">{{item.likeNum > 0 ? item.likeNum + '人赞' : '赞'}}</span>
+        </span>
+        <span class="comment-reply" @click="showCommentInput(item)">
+          <svg-icon icon-class="comment" />
+          <span style="margin-left: 5px;">回复</span>
+        </span>
+      </div>
+      <div class="reply">
+        <div class="item" v-for="reply in item.children" :id="reply.id">
+          <div class="reply-content">
+            <span class="from-name">{{reply.createBy}}</span><span>: </span>
+            <span class="to-name" v-show="reply.parentId!=reply.mainId">@{{reply.pcreateBy}}</span>
+            <span v-show="reply.delFlag=='0'">{{reply.content}}</span>
+            <span v-show="reply.delFlag=='1'" style="color: #909399;">该评论已被删除！</span>
+          </div>
+          <div class="reply-bottom">
+            <span>{{reply.createTime}}</span>
+            <span class="reply-text" @click="showCommentInput(item, reply)">
+              <svg-icon icon-class="comment" />
+              <span style="margin-left: 5px;">回复</span>
+            </span>
+          </div>
+        </div>
+        <div class="write-reply" v-if="item.children!=null" @click="showCommentInput(item)">
+          <i class="el-icon-edit"></i>
+          <span class="add-comment">添加新评论</span>
+        </div>
+        <input-component :show="showItemId === item.id"
+                         :value="inputComment"
+                         :toComment="name"
+                         :toId="id"
+                         @cancel="cancelInput"
+                         @confirm="commitComment">
+        </input-component>
+        <!--<transition name="fade">-->
+        <!--<div class="input-wrapper" v-if="showItemId === item.id">-->
+        <!--<el-input class="gray-bg-input"-->
+        <!--v-model="inputComment"-->
+        <!--type="textarea"-->
+        <!--:rows="3"-->
+        <!--autofocus-->
+        <!--placeholder="写下你的评论">-->
+        <!--</el-input>-->
+        <!--<div class="btn-control">-->
+        <!--<span class="cancel" @click="cancel">取消</span>-->
+        <!--<el-button class="btn" type="success" round @click="commitComment">确定</el-button>-->
+        <!--</div>-->
+        <!--</div>-->
+        <!--</transition>-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  import Vue from 'vue'
+  import InputComponent from './InputComponent'
+  import {
+    getToken
+  } from '@/utils/auth'
+  // import {
+  //   addCmsCommentLike,
+  //   delCmsCommentLike,
+  // } from "@/api/cms/comment"
+
+  export default {
+    props: {
+      comments: {
+        type: Array,
+        required: true
+      }
+    },
+    components: {
+      "input-component": InputComponent
+    },
+    data() {
+      return {
+        inputComment: '',
+        name: '',
+        id: null,
+        showItemId: '',
+        commentLikeForm: {},
+      }
+    },
+    computed: {},
+    methods: {
+      // 表单重置
+      reset() {
+        this.commentLikeForm = {
+          commentId: null,
+          userId: null,
+          likeNum: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null
+        };
+        this.resetForm("commentLikeForm");
+      },
+      /**
+       * 新增点赞
+       */
+      addCommentLike(item){
+        let token = getToken();
+        this.reset();
+        if (token==null || token == '') {
+          this.commentLikeForm.createBy = "匿名用户"
+          this.commentLikeForm.commentId = item.id
+          this.commentLikeForm.likeNum = item.likeNum
+        } else {
+          this.commentLikeForm.createBy = this.$store.getters.name
+          this.commentLikeForm.commentId = item.id
+          this.commentLikeForm.likeNum = item.likeNum
+        }
+        addCmsCommentLike(this.commentLikeForm).then(response => {
+          this.reset();
+        });
+      },
+      /**
+       * 删除点赞
+       */
+      delCommentLike(item){
+        let token = getToken();
+        this.reset();
+        if (token==null || token == '') {
+          this.commentLikeForm.createBy = "匿名用户"
+          this.commentLikeForm.commentId = item.id
+          this.commentLikeForm.likeNum = item.likeNum
+        } else {
+          this.commentLikeForm.createBy = this.$store.getters.name
+          this.commentLikeForm.commentId = item.id
+          this.commentLikeForm.likeNum = item.likeNum
+        }
+        delCmsCommentLike(this.commentLikeForm).then(response => {
+          this.reset();
+        });
+      },
+      /**
+       * 点赞
+       */
+      likeClick(item) {
+        if (item.isLike === null) {
+          Vue.$set(item, "isLike", true);
+          item.likeNum++
+          this.addCommentLike(item)
+        } else {
+          if (item.isLike) {
+            item.likeNum--
+            this.delCommentLike(item)
+          } else {
+            item.likeNum++
+            this.addCommentLike(item)
+          }
+          item.isLike = !item.isLike;
+        }
+      },
+
+      /**
+       * 点击取消按钮
+       */
+      cancelInput() {
+        this.showItemId = ''
+      },
+
+      /**
+       * 提交评论
+       */
+      commitComment(value) {
+        this.$emit("replyConfirm", value)
+        // console.log(value);
+      },
+
+      /**
+       * 点击评论按钮显示输入框
+       * item: 当前大评论
+       * reply: 当前回复的评论
+       */
+      showCommentInput(item, reply) {
+        if (reply) {
+          this.inputComment = ""
+          this.name = "回复@" + reply.createBy + ":"
+          this.id = reply.id
+        } else {
+          this.inputComment = ''
+          this.name = '写下你的评论'
+          this.id = item.id
+        }
+        this.showItemId = item.id
+      }
+    },
+    created() {
+      // console.log(this.comments)
+    }
+  }
+</script>
+
+<style scoped rel="stylesheet/scss"  lang="scss">
+
+  .container {
+    padding: 0 10px;
+    box-sizing: border-box;
+    .comment {
+      display: flex;
+      flex-direction: column;
+      padding: 10px;
+      border-bottom: 1px solid #F2F6FC;
+      .info {
+        display: flex;
+        align-items: center;
+        .right {
+          display: flex;
+          flex-direction: column;
+          margin-left: 10px;
+          .name {
+            font-size: 16px;
+            color: #303133;
+            margin-bottom: 5px;
+            font-weight: 500;
+          }
+          .date {
+            font-size: 12px;
+            color: #909399;
+          }
+        }
+      }
+      .content {
+        font-size: 16px;
+        color: #303133;
+        line-height: 20px;
+        padding: 10px 0;
+      }
+      .control {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        color: #909399;
+        .like {
+          display: flex;
+          align-items: center;
+          margin-right: 20px;
+          cursor: pointer;
+          &.active, &:hover {
+            color: #409EFF;
+          }
+          .iconfont {
+            font-size: 14px;
+            margin-right: 5px;
+          }
+        }
+        .comment-reply {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          &:hover {
+            color: #333;
+          }
+          .iconfont {
+            font-size: 16px;
+            margin-right: 5px;
+          }
+        }
+
+      }
+      .reply {
+        margin: 10px 0;
+        border-left: 2px solid #DCDFE6;
+        .item {
+          margin: 0 10px;
+          padding: 10px 0;
+          border-bottom: 1px dashed #EBEEF5;
+          .reply-content {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            color: #303133;
+            .from-name {
+              color: #409EFF;
+            }
+            .to-name {
+              color: #409EFF;
+              margin-left: 5px;
+              margin-right: 5px;
+            }
+          }
+          .reply-bottom {
+            display: flex;
+            align-items: center;
+            margin-top: 6px;
+            font-size: 12px;
+            color: #909399;
+            .reply-text {
+              display: flex;
+              align-items: center;
+              margin-left: 10px;
+              cursor: pointer;
+              &:hover {
+                color: #333;
+              }
+              .icon-comment {
+                margin-right: 5px;
+              }
+            }
+          }
+        }
+        .write-reply {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          color: #909399;
+          padding: 10px;
+          cursor: pointer;
+          &:hover {
+            color: #303133;
+          }
+          .el-icon-edit {
+            margin-right: 5px;
+          }
+        }
+        .fade-enter-active, fade-leave-active {
+          transition: opacity 0.5s;
+        }
+        .fade-enter, .fade-leave-to {
+          opacity: 0;
+        }
+        .input-wrapper {
+          padding: 10px;
+          .gray-bg-input, .el-input__inner {
+            /*background-color: #67C23A;*/
+          }
+          .btn-control {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding-top: 10px;
+            .cancel {
+              font-size: 16px;
+              color: #606266;
+              margin-right: 20px;
+              cursor: pointer;
+              &:hover {
+                color: #333;
+              }
+            }
+            .confirm {
+              font-size: 16px;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/inspur-ui/src/views/community/forum/forumDetails.vue b/inspur-ui/src/views/community/forum/forumDetails.vue
new file mode 100644
index 0000000..adbdf7c
--- /dev/null
+++ b/inspur-ui/src/views/community/forum/forumDetails.vue
@@ -0,0 +1,437 @@
+<template>
+  <el-row :gutter="20">
+    <el-col
+      :sm="3"
+      class="hidden-xs-only"
+      style="opacity:0;"
+    >左侧占位</el-col>
+    <el-col
+      :xs="24"
+      :sm="18"
+    >
+      <el-card
+        style="background-color: rgba(255, 255, 255,1)"
+        class="first-card"
+      >
+        <div
+          slot="header"
+          class="total blog-info"
+        >
+          <div class="user-info">
+            <i class="el-icon-user"></i>
+            <span class="header"> {{blog.userName}}</span>
+          </div>
+          <div class="blog-date">
+            <i class="el-icon-date"></i>
+            <span> {{blog.postTime}}</span>
+          </div>
+          <div class="blog-views">
+            <i class="el-icon-view"></i>
+            <span> {{blog.views}}</span>
+          </div>
+        </div>
+        <h2 class="blog-title header">{{blog.postTitle}}
+          <!-- <el-tag
+            size="mini"
+            v-for="tag in blog.types"
+            :key="tag.typeId"
+            type="info"
+          >{{tag.typeName}}</el-tag> -->
+        </h2>
+        <div style="display:flex">
+          <div class="tag-type"><template>
+              <dict-tag
+                :options="dict.type.post_type"
+                :value="blog.postType"
+              />
+            </template></div>
+
+          <div class="tag-type"><template>
+              <dict-tag
+                :options="dict.type.community_field"
+                :value="blog.omField"
+              />
+            </template></div>
+          <div class="tag-type"><template>
+              <dict-tag
+                :options="dict.type.community_industry"
+                :value="blog.omIndustry"
+              />
+            </template></div>
+        </div>
+        <div
+          class="typo m-padded-lr-responsive m-padded-tb-large ql-editor"
+          v-html="blog.postContent"
+        ></div>
+        <!-- <div class="tags">
+          <div
+            class="tag-item"
+            v-for="tag in blog.tags"
+            :key="tag.tagId"
+          >
+            <div class="sjx-outer">
+              <div class="sjx-inner"></div>
+            </div>
+            <div class="tag">
+              {{tag.tagName}}
+            </div>
+          </div>
+        </div> -->
+        <!-- <div class="appreciate">
+            <el-popover
+                    placement="bottom"
+                    title=""
+                    width="300"
+                    trigger="hover"
+                    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+              <el-button class="zanshang" slot="reference" type="danger" round plain>赞赏</el-button>
+            </el-popover>
+          </div> -->
+        <!-- <el-table
+          :data="blog.blogFilesNew"
+          :border="true"
+          style="width: 99.99%;"
+        >
+          <el-table-column
+            align="center"
+            min-width="30%"
+            prop="remark"
+            label="附件"
+          >
+            <template slot-scope="scope">
+              <el-row>
+                <el-col :span="6">
+                  <div class="blogFilesInfoName">名称：</div>
+                </el-col>
+                <el-col :span="18"><el-input
+                    v-model="scope.row.fileOriginName"
+                    disabled
+                  /></el-col>
+              </el-row>
+              <el-row style="margin-top: 4px;">
+                <el-col :span="6">
+                  <div class="blogFilesInfoName">大小：</div>
+                </el-col>
+                <el-col :span="18"><el-input
+                    v-model="scope.row.fileSize"
+                    disabled
+                  /></el-col>
+              </el-row>
+              <el-row style="margin-top: 4px;">
+                <el-col :span="6">
+                  <div class="blogFilesInfoName">类型：</div>
+                </el-col>
+                <el-col :span="18"><el-input
+                    v-model="scope.row.fileSuffix"
+                    disabled
+                  /></el-col>
+              </el-row>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            min-width="50%"
+            prop="remark"
+            label="备注"
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-model="scope.row.remark"
+                type="textarea"
+                :rows="6"
+                size="small"
+                disabled
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            min-width="20%"
+            label="操作"
+          >
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                plain
+                @click="handleDownload(scope.row)"
+              >下载</el-button>
+            </template>
+          </el-table-column>
+        </el-table> -->
+        <div class="author">
+          <ul>
+            <li>作者 {{blog.userName}}</li>
+            <li>发表时间 {{blog.postTime}}</li>
+          </ul>
+        </div>
+        <el-card
+          shadow="never"
+          class="comments"
+        >
+          <div
+            class="header"
+            style="padding-bottom: 10px;"
+          >
+            评论
+          </div>
+          <comment></comment>
+        </el-card>
+      </el-card>
+    </el-col>
+    <el-col
+      :xs="24"
+      :sm="0"
+    ></el-col>
+    <el-col
+      :sm="3"
+      class="hidden-xs-only"
+      style="opacity:0;"
+    >右侧占位</el-col>
+    <!-- 设置底部距离的 -->
+    <el-backtop :bottom="60">
+      <div style="{
+              height: 50px;
+              width: 50px;
+              background-color: rgba(240,239,241,1);
+              box-shadow: 0 0 6px rgba(0,0,0, .12);
+              text-align: center;
+              line-height: 40px;
+              border-radius:2px;
+              color: #1989fa;
+            }">
+        <svg-icon icon-class="top" />
+      </div>
+    </el-backtop>
+  </el-row>
+</template>
+  
+  <script>
+import comment from "../comment/Ipcomment";
+import { mapState } from "vuex";
+import {
+  listCommunityInfo,
+  getCommunityInfo,
+  addCommunityInfo,
+  updateCommunityInfo,
+  CommunityInfo,
+  addViews,
+} from "@/api/community/info";
+
+export default {
+  dicts: ["post_type", "community_field", "community_industry"],
+  components: {
+    comment,
+  },
+  data() {
+    return {
+      blog: {},
+      commentForm: {
+        content: "",
+      },
+    };
+  },
+  watch: {
+    $route(to, from) {
+      this.$router.go(0);
+    },
+  },
+  created() {
+    this.getBlogInfomation();
+  },
+  computed: {
+    ...mapState(["userInfo", "administrator"]),
+  },
+  methods: {
+    // 获取博客详情信息
+    async getBlogInfomation() {
+      // 增加阅读量
+      addViews(this.$route.query.id);
+      getCommunityInfo(this.$route.query.id).then((response) => {
+        this.blog = response.data;
+      });
+    },
+    // 文件下载处理
+    // handleDownload(row) {
+    //   var name = row.fileOriginName;
+    //   var url = row.filePath;
+    //   var suffix = url.substring(url.lastIndexOf("."), url.length);
+    //   const a = document.createElement("a");
+    //   a.setAttribute("download", name);
+    //   a.setAttribute("target", "_blank");
+    //   a.setAttribute("href", process.env.VUE_APP_BASE_API + url);
+    //   a.click();
+    // },
+  },
+};
+</script>
+  
+  <style scoped>
+.tag-type {
+  display: flex;
+  margin: 0 5px 0 5px;
+}
+.el-card {
+  width: 100%;
+}
+
+.el-popper /deep/ {
+  box-shadow: 0 2px 4px 0 rgb(34 36 38 / 12%);
+}
+
+.first-card {
+  border-radius: 10px 10px 10px 10px;
+  position: relative;
+  padding-bottom: 10px;
+  /*text-align: center;*/
+  font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei,
+    Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
+}
+
+hr.style-one {
+  width: 100%;
+  background-image: linear-gradient(
+    to right,
+    rgba(64, 158, 255, 0),
+    rgba(64, 158, 255, 0.75),
+    rgba(64, 158, 255, 0)
+  );
+}
+
+.forum-type-span {
+  font-size: medium;
+  color: #d56611;
+}
+
+.appreciate {
+  text-align: center;
+}
+
+.tags {
+  display: flex;
+  align-items: center;
+  margin-left: 50px;
+  margin-top: 20px;
+}
+
+.tag-item {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-left: 10px;
+  margin-bottom: 20px;
+}
+
+.tag {
+  padding-left: 10px;
+  padding-right: 10px;
+  border-radius: 5px;
+  background-color: #ecf5ff;
+  border: 1px solid #409eff;
+  color: #409eff;
+  display: flex;
+}
+
+.sjx-outer {
+  width: 0;
+  height: 0;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  border-right: 7px solid #409eff;
+  position: relative;
+}
+
+.sjx-inner {
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  border-right: 7px solid #ecf5ff;
+  top: -7px;
+  left: 1px;
+  position: absolute;
+}
+
+.author {
+  text-align: left;
+  background-color: #fcfff5;
+  box-shadow: 0 0 0 1px #a3c293 inset;
+  color: #2c662d;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  margin: 20px 0;
+  padding: 20px 0;
+  font-size: small;
+  font-family: PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB,
+    Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
+}
+
+.comments {
+  margin-top: 150px;
+  box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  border-top: 2px solid #409eff;
+  text-align: left;
+}
+.blog-title {
+  text-align: center;
+}
+
+.blog-info {
+  display: flex;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.4);
+  font-size: 13px;
+}
+.blog-date {
+  margin-right: 5px;
+  float: right;
+}
+
+.blog-views {
+  margin-right: 5px;
+  float: right;
+}
+
+.user-info {
+  justify-content: space-around;
+  align-items: center;
+  margin-right: 15px;
+  float: left;
+}
+
+.header {
+  text-decoration: none;
+  color: #3a8ee6;
+  font-weight: bold;
+}
+
+@media screen and (max-width: 768px) {
+  .tags {
+    margin-left: 0;
+    margin-top: 20px;
+  }
+
+  hr {
+    display: none;
+  }
+
+  .comment-content {
+    font-size: 12px !important;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  h2 {
+    font-weight: normal;
+  }
+
+  code,
+  pre {
+    font-size: 13px !important;
+  }
+}
+.blogFilesInfoName {
+  text-align: center;
+  padding-top: 5px;
+}
+</style>
+  
\ No newline at end of file
diff --git a/inspur-ui/src/views/community/forum/forumForm.vue b/inspur-ui/src/views/community/forum/forumForm.vue
new file mode 100644
index 0000000..ba78424
--- /dev/null
+++ b/inspur-ui/src/views/community/forum/forumForm.vue
@@ -0,0 +1,306 @@
+<template>
+  <div class="app-container">
+    <div>
+      <div style="text-align:center;margin-bottom:5px">
+        <i
+          class="el-icon-chat-line-round"
+          style="color:blue"
+        ></i>
+        <span style="font-weight:bold">发表新贴</span>
+      </div>
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+      >
+
+        <el-form-item
+          label="标题"
+          prop="postTitle"
+        >
+          <el-row>
+            <el-col :span="24">
+              <el-input
+                v-model="form.postTitle"
+                placeholder="请输入标题"
+              />
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <!-- <el-row>
+        <el-col :span="8">
+          <el-form-item label="首图">
+            <el-radio-group v-model="form.blogPicType">
+              <el-radio-button label="0">地址</el-radio-button>
+              <el-radio-button label="1">上传</el-radio-button>
+            </el-radio-group>
+            <div
+              v-show="form.blogPicType == '0'"
+              class="tabBlock"
+            >
+              <el-input
+                v-model="form.blogPicLink"
+                placeholder="请输入图片地址 https://"
+                style="margin-bottom: 10px;"
+              />
+              <el-image
+                :src="form.blogPicLink"
+                :preview-src-list="[form.blogPicLink]"
+                fit="cover"
+                class="blogPic"
+              >
+                <div
+                  slot="error"
+                  class="image-slot"
+                >
+                  <el-image
+                    src="/errorImg.jpg"
+                    fit="cover"
+                    class="blogPic"
+                  ></el-image>
+                </div>
+              </el-image>
+            </div>
+            <div
+              v-show="form.blogPicType == '1'"
+              class="tabBlock"
+            >
+              <imageUpload
+                v-model="form.blogPic"
+                :limit="1"
+              />
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="16">
+          <el-form-item label="简介">
+            <el-input
+              type="textarea"
+              v-model="form.blogDesc"
+              :autosize="{ minRows: 7, maxRows: 7}"
+              maxlength="50"
+              show-word-limit
+              placeholder="请输入简介"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row> -->
+        <el-row>
+          <el-col :span="24">
+            <el-form-item
+              prop="postContent"
+              label="内容"
+            >
+
+              <Editor
+                v-model="form.postContent"
+                type="base64"
+                :min-height="192"
+              />
+
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item
+              prop="postType"
+              label="帖子类型"
+            >
+              <el-select
+                v-model="form.postType"
+                placeholder="请选择"
+                filterable
+                clearable
+              >
+                <el-option
+                  v-for="item in dict.type.post_type"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              prop="omField"
+              label="运维领域"
+            >
+              <el-select
+                v-model="form.omField"
+                placeholder="请选择"
+                clearable
+              >
+                <el-option
+                  v-for="item in dict.type.community_field"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              prop="omIndustry"
+              label="运维行业"
+            >
+              <el-select
+                v-model="form.omIndustry"
+                placeholder="请选择"
+                clearable
+              >
+                <el-option
+                  v-for="item in dict.type.community_industry"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div style="text-align:right">
+      <el-button
+        type="primary"
+        @click="releaseForm"
+      >发 表</el-button>
+    </div>
+
+  </div>
+</template>
+<script>
+import {
+  listCommunityInfo,
+  getCommunityInfo,
+  addCommunityInfo,
+  updateCommunityInfo,
+  CommunityInfo,
+} from "@/api/community/info";
+
+export default {
+  name: "forum",
+  dicts: ["post_type", "community_field", "community_industry"],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 文章管理表格数据
+      blogList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        postType: null,
+        omField: null,
+        omIndustry: null,
+        postTitle: null,
+        postContent: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        postTitle: [
+          {
+            required: true,
+            message: "标题不能为空",
+            trigger: "blur",
+          },
+        ],
+        postContent: [
+          {
+            required: true,
+            message: "内容不能为空",
+            trigger: "blur",
+          },
+        ],
+        postType: [
+          {
+            required: true,
+            message: "帖子类型不能为空",
+            trigger: "change",
+          },
+        ],
+        omField: [
+          {
+            required: true,
+            message: "运维行业不能为空",
+            trigger: "change",
+          },
+        ],
+        omIndustry: [
+          {
+            required: true,
+            message: "运维领域不能为空",
+            trigger: "change",
+          },
+        ],
+      },
+      // 类型选项
+      typeOptions: [],
+      // 标签选项
+      tagOptions: [],
+    };
+  },
+  created() {},
+  methods: {
+    validate(callback) {
+      //这个form是子组件内部 el-form 的 ref="contentForm"
+      this.$refs.form.validate((valid) => {
+        callback(valid);
+      });
+    },
+    /** 查询文章管理列表 */
+    getList() {},
+
+    /**发布帖子 */
+    releaseForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          addCommunityInfo(this.form).then((response) => {
+            this.$emit("addSucess", response.data);
+            this.reset();
+          });
+        }
+      });
+    },
+    // 取消按钮
+    cancel() {},
+    // 表单重置
+    reset() {
+      this.form = {};
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  background-color: #f6f6f6;
+}
+</style>
diff --git a/inspur-ui/src/views/community/forum/index.vue b/inspur-ui/src/views/community/forum/index.vue
new file mode 100644
index 0000000..b4ca6e0
--- /dev/null
+++ b/inspur-ui/src/views/community/forum/index.vue
@@ -0,0 +1,927 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col
+        :sm="2"
+        class="hidden-xs-only"
+        style="opacity:0;"
+      >左侧占位</el-col>
+      <el-col
+        :xs="24"
+        :sm="15"
+      >
+        <el-card
+          style="background-color: rgba(255,255,255,0.9)"
+          class="left-item"
+        >
+          <div
+            slot="header"
+            class="total"
+          >
+            <div class="titleIndex">
+              <i
+                v-if="selected"
+                class="el-icon-back"
+                @click="updateForumList"
+              ></i>
+              <span>{{selectMethod}}</span>
+            </div>
+            <!-- <span>共 <span style="color: #3a8ee6; font-size: 20px">{{totalcount}}</span> 篇</span> -->
+          </div>
+          <el-row
+            type="flex"
+            align="middle"
+            style="flex-wrap: wrap"
+            :gutter="20"
+            v-for="forum in forumList"
+            :key="forum.postId"
+            shadow="never"
+            class="forum-content"
+          >
+            <div @click="getForumInfo(forum.postId)">
+              <!-- <el-col
+                class="img"
+                :xs="24"
+                :sm="6"
+              >
+                <el-image
+                  v-if="forum.blogPicType == '0'"
+                  lazy
+                  :src="forum.blogPicLink"
+                >
+                  <div
+                    slot="error"
+                    class="image-slot"
+                  >
+                    <el-image
+                      src="/errorImg.jpg"
+                      fit="cover"
+                      class="blogPic"
+                    >></el-image>
+                  </div>
+                </el-image>
+                <el-image
+                  v-if="forum.blogPicType == '1'"
+                  lazy
+                  :src="forum.blogPic"
+                ></el-image>
+              </el-col> -->
+              <el-col
+                :xs="24"
+                :sm="18"
+                style="padding-left: 10px;padding-right: 10px;margin-bottom: 5px;margin-top: -5px;"
+              >
+                <div>
+                  <h3><svg-icon
+                      icon-class="Topping"
+                      v-show="forum.top==1"
+                    /> {{forum.postTitle}}</h3>
+                  <!-- <div style="margin-bottom: 10px;">
+                    <span style="color: rgba(0, 0, 0, .4);"> {{forum.blogDesc}}</span>
+                  </div> -->
+                  <!-- <div style="margin-bottom: 10px;">
+                    <el-tag
+                      effect="plain"
+                      size="mini"
+                      v-for="tag in forum.tags"
+                      :key="tag.tagId"
+                      type="success"
+                    >
+                      {{tag.tagName}}
+                    </el-tag>
+                  </div> -->
+                  <div class="forum-info">
+                    <div class="user-info">
+                      <i class="el-icon-user"></i>
+                      <span class="header">{{ forum.userName}}</span>
+                    </div>
+                    <div class="forum-date">
+                      <i class="el-icon-date"></i>
+                      <span> {{forum.postTime}}</span>
+                    </div>
+                    <div class="forum-views">
+                      <i class="el-icon-view"></i>
+                      <span> {{forum.views}}</span>
+                    </div>
+                    <!-- <div class="forum-type">
+                      <el-tag
+                        size="mini"
+                        v-for="tag in forum.types"
+                        :key="tag.typeId"
+                        type="info"
+                      >
+                        {{tag.typeName}}
+                      </el-tag>
+                    </div> -->
+
+                  </div>
+                </div>
+              </el-col>
+            </div>
+          </el-row>
+          <pagination
+            v-show="total>0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            @pagination="getForumList"
+            style="margin-bottom: 30px;float: right;margin-right: 10px;"
+          />
+        </el-card>
+        <forumForm
+          ref="form"
+          @addSucess="releaseSuc"
+        ></forumForm>
+      </el-col>
+      <el-col
+        :xs="24"
+        :sm="5"
+      >
+        <el-card
+          style="background-color: rgba(255,255,255,0.9)"
+          class=" right-item"
+        >
+          <div
+            slot="header"
+            class="attributes"
+          >
+            <b>帖子热度榜</b>
+          </div>
+          <ul
+            class=" forum-type-ul"
+            style="margin-top: 5px;"
+          >
+            <li
+              class=" forum-type-li"
+              v-for="cmsType in typeList"
+              :key="cmsType.typeId"
+              @click="selectType(cmsType)"
+              :class="cmsType.typeId === typeId? 'activeType':''"
+            >
+              <div style="display: flex;align-items: center">
+                <el-image
+                  style="width: 28px;height: 28px; border-radius: 50%; margin-right: 10px"
+                  lazy
+                  :src="cmsType.typePicLink"
+                  v-show="cmsType.typePicType == '0'"
+                >
+                  <div
+                    slot="error"
+                    style="width: 28px;height: 28px; border-radius: 50%;"
+                  >
+                    <i
+                      class="el-icon-collection"
+                      style="margin-left:6px;"
+                    ></i>
+                  </div>
+                </el-image>
+                <el-image
+                  style="width: 28px;height: 28px; border-radius: 50%; margin-right: 10px"
+                  lazy
+                  :src="cmsType.typePic"
+                  v-show="cmsType.typePicType == '1'"
+                >
+                  <div
+                    slot="error"
+                    style="width: 28px;height: 28px; border-radius: 50%;"
+                  >
+                    <i
+                      class="el-icon-collection"
+                      style="margin-left:6px;"
+                    ></i>
+                  </div>
+                </el-image>
+                {{cmsType.typeName}}
+              </div>
+              <div>{{cmsType.blogNum}}</div>
+            </li>
+          </ul>
+          <div
+            class="more"
+            @click="dealType"
+          >
+            <i
+              v-if="moreType"
+              class="el-icon-arrow-down"
+            ></i>
+            <i
+              v-else
+              class="el-icon-arrow-up"
+            ></i>
+          </div>
+        </el-card>
+        <el-card
+          style="background-color: rgba(255,255,255,0.9)"
+          class=" right-item"
+        >
+          <div
+            slot="header"
+            class="attributes"
+          >
+            <b>标签</b>
+          </div>
+          <div class="tags">
+            <div
+              class=" tag-item"
+              v-for="tag in tagList"
+              :key="tag.tagId"
+              @click="selectTag(tag)"
+              :class="tag.tagId === tagId? 'activeTag':''"
+            >
+              <div class="sjx-outer">
+                <div class="sjx-inner"></div>
+              </div>
+              <div class="tag">
+                {{tag.tagName}}
+                {{tag.blogNum}}
+              </div>
+            </div>
+          </div>
+          <div
+            class="more"
+            @click="dealTag"
+          >
+            <i
+              v-if="moreTag"
+              class="el-icon-arrow-down"
+            ></i>
+            <i
+              v-else
+              class="el-icon-arrow-up"
+            ></i>
+          </div>
+        </el-card>
+        <el-card
+          style="background-color: rgba(255,255,255,0.9)"
+          class=" right-item"
+        >
+          <div
+            slot="header"
+            class="attributes"
+          >
+            <b>最新推荐</b>
+          </div>
+          <div
+            class=" recommend-forum l-text"
+            v-for="forum in recommendList"
+            :key="forum.id"
+            @click="getForumInfo(forum.postId)"
+          >
+            <a class="recommend-a">{{forum.title}}</a>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col
+        :sm="2"
+        class="hidden-xs-only"
+        style="opacity:0;"
+      >右侧占位</el-col>
+    </el-row>
+  </div>
+</template>
+  
+  <script>
+import "element-ui/lib/theme-chalk/display.css";
+import forumForm from "./forumForm.vue";
+import { Loading } from "element-ui";
+import {
+  listCommunityInfo,
+  getCommunityInfo,
+  addCommunityInfo,
+  updateCommunityInfo,
+  CommunityInfo,
+  addViews,
+} from "@/api/community/info";
+export default {
+  name: "forum",
+  components: {
+    forumForm,
+  },
+  data() {
+    return {
+      totalcount: 100,
+      queryInfo: {
+        query: "",
+        pagenum: 1,
+        pagesize: 8,
+      },
+      intro: "",
+      forumList: [],
+      typeList: [],
+      tagList: [],
+      fullTypeList: [],
+      fullTagList: [],
+      recommendList: [],
+      selectMethod: "全部帖子",
+      typeId: -1,
+      tagId: -1,
+      selected: false,
+      moreType: true,
+      moreTag: true,
+      value: new Date(),
+      timer: null,
+      start: false,
+      screenWidth: document.documentElement.clientWidth, //实时屏幕宽度
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 总条数
+      total: 0,
+    };
+  },
+  computed: {
+    pagSmall() {
+      return this.screenWidth <= 768;
+    },
+    // 计算分页栏样式
+    pagLayout() {
+      if (this.screenWidth < 768) {
+        return "prev, pager, next";
+      } else {
+        return "total, prev, pager, next, jumper";
+      }
+    },
+  },
+  created() {
+    window.addEventListener("resize", this.screenAdapter);
+  },
+  mounted() {
+    this.getForumList();
+    // this.$nextTick(function () {
+    //     // 仅在整个视图都被渲染之后才会运行的代码
+    //     this.getTypeList()
+    //     this.getForumList();
+    //     this.getTagList()
+    //     this.getRecommendList()
+    //     let str = '这是我的个人博客、会分享关于编程，开发以及其他方面的一些内容，希望可以对您有所帮助...';
+    //     let idx = 0;
+    //     let that = this
+    //     let timer = setTimeout(function fn() {
+    //       // console.log(this.intro)
+    //       that.intro = that.intro + str.substring(idx, idx + 1)
+    //       idx++
+    //       if (idx > str.length) {
+    //         that.intro = ''
+    //         idx = 0
+    //       }
+    //       setTimeout(fn, 200)
+    //     }, 2000)
+    //     this.screenWidth = document.documentElement.clientWidth
+    //   })
+  },
+  methods: {
+    releaseSuc() {
+      this.$modal.msgSuccess("发表成功");
+      // this.getForumList();\
+      window.location.reload();
+    },
+    /** 获取博客列表 */
+    getForumList() {
+      let loadingInstance = Loading.service({
+        target: ".left-item",
+      });
+      listCommunityInfo(this.queryParams)
+        .then((response) => {
+          this.forumList = response.rows;
+          this.total = response.total;
+        })
+        .finally(() => {
+          loadingInstance.close();
+        });
+    },
+    // 开始进入主页
+    startRead() {
+      this.$nextTick(() => {
+        document.getElementById("index").scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+          // inline: 'nearest'
+        });
+      });
+    },
+    compare(property) {
+      return function (a, b) {
+        let value1 = a[property].length;
+        let value2 = b[property].length;
+        return value2 - value1;
+      };
+    },
+    // 获取推荐博客列表
+    async getRecommendList() {
+      cmsListRecommend(this.queryParams).then((response) => {
+        const { data: res } = response;
+        this.recommendList = response.rows.slice(0, 4);
+        this.total = response.total;
+      });
+    },
+    // 获取博客类型列表
+    async getTypeList() {
+      getForumDetail(this.$route.query.id).then((response) => {
+        for (let i = 0; i < response.types.length; i++) {
+          let typeInfo = response.types[i];
+          if (typeInfo.typePic.length > 0) {
+            response.types[i].typePic =
+              process.env.VUE_APP_BASE_API + typeInfo.typePic;
+          }
+        }
+        const { data: res } = response;
+        this.fullTypeList = response.types;
+        this.typeList = response.types.slice(0, 4);
+      });
+    },
+    // 获取博客标签列表
+    async getTagList() {
+      getForumDetail(this.$route.query.id).then((response) => {
+        const { data: res } = response;
+        this.fullTagList = response.tags;
+        this.tagList = response.tags.slice(0, 6);
+      });
+    },
+    // 跳转到博客详情页
+    getForumInfo(postId) {
+      let routeUrl = this.$router.push({
+        path: "/community/forumDetails",
+        query: {
+          id: postId,
+        },
+      });
+    },
+    // 修改当前页码
+    handleCurrentChange(newSize) {
+      this.queryInfo.pagenum = newSize;
+      this.getForumList();
+    },
+    // 修改当前页大小
+    handleSizeChange(newSize) {
+      this.queryInfo.pagesize = newSize;
+    },
+    // 按分类筛选博客
+    async selectType(cmsType) {
+      let loadingInstance = Loading.service({
+        target: ".left-item",
+      });
+      this.typeId = cmsType.typeId;
+      cmsListByTypeId(this.typeId)
+        .then((response) => {
+          this.blogList = this.picSrc(response.rows);
+          this.total = response.total;
+          // this.totalcount = res.data.totalElements
+          this.selectMethod = "分类: " + cmsType.typeName;
+          this.selected = true;
+        })
+        .finally(() => {
+          loadingInstance.close();
+        });
+    },
+    // 按标签筛选博客
+    async selectTag(tag) {
+      let loadingInstance = Loading.service({
+        target: ".left-item",
+      });
+      this.tagId = tag.tagId;
+      cmsListByTagId(this.tagId)
+        .then((response) => {
+          this.blogList = this.picSrc(response.rows);
+          this.total = response.total;
+          // this.totalcount = res.data.totalElements
+          this.selectMethod = "标签: " + tag.tagName;
+          this.selected = true;
+        })
+        .finally(() => {
+          loadingInstance.close();
+        });
+    },
+    // 更新博客列表
+    updateForumList() {
+      this.selected = false;
+      this.typeId = -1;
+      this.tagId = -1;
+      this.selectMethod = "全部博客";
+      this.getForumList();
+    },
+    // 得到所有的标签
+    async getFullTagList() {
+      this.tagList = this.fullTagList;
+    },
+    async dealType() {
+      if (this.moreType) {
+        this.typeList = this.fullTypeList;
+      } else {
+        this.typeList = this.fullTypeList.slice(0, 4);
+      }
+      this.moreType = !this.moreType;
+    },
+    async dealTag() {
+      if (this.moreTag) {
+        await this.getFullTagList();
+      } else {
+        this.tagList = this.fullTagList.slice(0, 6);
+      }
+      this.moreTag = !this.moreTag;
+    },
+    // 屏幕尺寸变化的监听函数
+    screenAdapter() {
+      this.screenWidth = document.documentElement.clientWidth;
+    },
+  },
+};
+</script>
+  
+  <style scoped>
+/* .app-container {
+    background-image: url("../../../assets/images/login-background.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    margin: 0px;
+    padding: 0px;
+    width: 100%;
+    height: 120vh;
+    position: fixed;
+  } */
+.welcome {
+  background-color: rgba(0, 0, 0, 0.1);
+  border: none;
+  height: 90%;
+  position: relative;
+}
+
+.border {
+  width: 812px;
+  height: 112px;
+  position: absolute;
+  top: -6px;
+  left: -6px;
+  border: 3px solid white;
+  box-sizing: border-box;
+  animation: clipMe 5s linear infinite;
+}
+
+.tit {
+  box-sizing: border-box;
+  position: relative;
+  width: 800px;
+  height: 100px;
+  line-height: 100px;
+  box-shadow: inset 0 0 0 1px white;
+  margin: 40px auto;
+  margin-top: 80px;
+  color: white;
+  text-align: center;
+  font-size: 50px;
+  font-weight: normal;
+  letter-spacing: 10px;
+}
+
+.intro {
+  letter-spacing: 5px;
+  line-height: 50px;
+  width: 80%;
+  margin: 0 auto;
+  text-align: center;
+  font-weight: normal;
+  color: white;
+}
+
+.down {
+  animation: bounce 2s infinite;
+  animation-duration: 3s;
+  font-size: 25px;
+  position: absolute;
+  bottom: 5px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+}
+
+.down:hover {
+  animation: none;
+  cursor: pointer;
+  box-shadow: 0 0 20px 0 white;
+  transition: all 0.2s;
+}
+
+.left-item .pagination-container {
+  background: rgb(255, 255, 255, 0);
+}
+
+@keyframes clipMe {
+  0%,
+  100% {
+    clip: rect(0px, 806px, 6px, 0px);
+  }
+
+  25% {
+    clip: rect(0px, 6px, 112px, 0px);
+  }
+
+  50% {
+    clip: rect(112px, 812px, 112px, 0px);
+  }
+
+  75% {
+    clip: rect(0px, 812px, 112px, 806px);
+  }
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translate(-50%, 0);
+  }
+
+  40% {
+    transform: translate(-50%, -30px);
+  }
+
+  60% {
+    transform: translate(-50%, -15px);
+  }
+}
+
+.forum-type-ul {
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-bottom: 0;
+  border-radius: 5px;
+}
+
+.el-pagination {
+  padding-bottom: 20px;
+}
+
+.el-card /deep/ .el-card__body {
+  padding: 0;
+}
+
+.right-item {
+  margin-bottom: 20px;
+}
+
+.forum-type-li:first-child {
+  border-top: 1px solid rgba(179, 216, 255, 0.5);
+}
+
+.forum-type-li {
+  border-bottom: 1px solid rgba(179, 216, 255, 0.5);
+}
+
+.more {
+  text-align: center;
+  color: #3a8ee6;
+  padding: 8px;
+}
+
+.more:hover {
+  cursor: pointer;
+  color: #3a8ee6;
+}
+
+.forum-type-li:hover {
+  background-color: rgba(213, 255, 255, 0.3);
+  cursor: pointer;
+}
+
+.activeType {
+  background-color: rgba(58, 142, 230, 0.3);
+  cursor: pointer;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 15px 13px 0;
+  border-bottom: 1px solid rgba(179, 216, 255, 0.5);
+}
+
+.tag-item {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+}
+
+.tag {
+  background-color: #ecf5ff;
+  box-sizing: border-box;
+  display: inline-block;
+  height: 22px;
+  padding: 0 10px;
+  line-height: 22px;
+  font-size: 10px;
+  color: #409eff;
+  border-radius: 4px;
+  white-space: nowrap;
+  border: 1px solid #409eff;
+  transition: 0.2s;
+}
+
+.sjx-outer {
+  width: 0;
+  height: 0;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid #409eff;
+  position: relative;
+  transition: 0.2s;
+}
+
+.sjx-inner {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid #ecf5ff;
+  top: -6px;
+  left: 1px;
+  position: absolute;
+  transition: 0.2s;
+}
+
+.tag-item:hover,
+.activeTag {
+  box-sizing: border-box;
+}
+
+.tag {
+  color: white;
+  background-color: #409eff;
+  cursor: pointer;
+}
+
+.sjx-inner {
+  border-right: 6px solid #409eff;
+}
+
+.forum-type-li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 40px;
+}
+
+.recommend-forum {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-bottom: 0;
+  border-radius: 5px;
+}
+
+.recommend-a {
+  border-bottom: 1px solid rgba(34, 36, 38, 0.15);
+  line-height: 40px;
+  display: block;
+  text-decoration: none;
+  color: black;
+}
+
+.recommend-a:hover {
+  color: #3a8ee6;
+}
+
+.total {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: larger;
+  font-weight: bold;
+}
+
+.titleIndex {
+  display: flex;
+  align-items: center;
+}
+
+.el-icon-back {
+  font-weight: bolder;
+  color: #3a8ee6;
+  margin-right: 10px;
+}
+
+.el-icon-back:hover {
+  cursor: pointer;
+}
+
+.forum-content:hover {
+  border-left: 5px solid #3a8ee6;
+  border-right: 5px solid #3a8ee6;
+  background-color: rgba(58, 142, 230, 0.3);
+  cursor: pointer;
+}
+
+.forum-content {
+  padding: 10px;
+  height: auto;
+  border-bottom: 1px solid rgb(199, 163, 92);
+  /*border-bottom: 1px solid rgba(34, 36, 38, .15);*/
+  transition: 0.3s;
+}
+
+.el-image {
+  border-radius: 5px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.forum-info {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.4);
+  font-size: 12px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  margin-right: 15px;
+  float: left;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #3a8ee6;
+  font-weight: bold;
+  word-break: keep-all;
+}
+
+.forum-date {
+  display: flex;
+  align-items: center;
+  float: right;
+  margin-left: 5px;
+  width: 200px;
+}
+
+.forum-views {
+  display: flex;
+  align-items: center;
+  float: right;
+  margin-left: 5px;
+  width: 180px;
+}
+
+.forum-type {
+  float: right;
+  margin-left: auto;
+}
+
+.forum-tag {
+  float: right;
+  margin-left: auto;
+}
+
+@media screen and (max-width: 768px) {
+  /* .forum-date {
+    display: none;
+  } */
+
+  .welcome {
+    width: 100%;
+  }
+
+  .border {
+    display: none;
+  }
+
+  .tit {
+    font-size: 2rem;
+    width: 100%;
+    line-height: 50px;
+    letter-spacing: 2px;
+    height: auto;
+  }
+
+  .intro {
+    font-size: 1rem;
+    line-height: 30px;
+  }
+
+  .el-pagination {
+    width: 100%;
+  }
+}
+</style>
+  
\ No newline at end of file