diff --git a/src/assets/ditu.png b/src/assets/ditu.png
new file mode 100644
index 00000000..c1c236de
Binary files /dev/null and b/src/assets/ditu.png differ
diff --git a/src/common/lang/en-us.js b/src/common/lang/en-us.js
index 0998cd2f..cc84f8dd 100644
--- a/src/common/lang/en-us.js
+++ b/src/common/lang/en-us.js
@@ -1,4 +1,5 @@
 const system = require('./system/en.js')
+const personalCenter = require('./personalCenter/en.js')
 
 module.exports = {
   // 共用
@@ -112,6 +113,11 @@ module.exports = {
   confirmRelease: 'Confirm Release?',
   confirmWithdraw: 'Confirm to Withdraw?',
   doNotHavePermissionDeleteData: 'Do not have permission to delete this data',
+
+  noData: 'No Data',
+  dataLoading: 'Data loading...',
+  confirmDelete: 'Confirm the listing title you want to delete?',
+
   // 页面头部
   header: {
     userMenuSearchMenu: 'Search menu',
@@ -429,5 +435,7 @@ module.exports = {
     file: 'File'
   },
   // 系统管理
-  system
+  system,
+  // 个人中心
+  personalCenter
 }
diff --git a/src/common/lang/personalCenter/en.js b/src/common/lang/personalCenter/en.js
new file mode 100644
index 00000000..d00f45e6
--- /dev/null
+++ b/src/common/lang/personalCenter/en.js
@@ -0,0 +1,27 @@
+// 个人中心的所有翻译
+module.exports = {
+  // 我的收藏
+  collection: {
+    documentLibrary: 'Document Library',
+    problemKnowledgeBase: 'Knowledge Sharing',
+    serialNumber: 'No.',
+    title: 'Title',
+    status: 'Status',
+    collectionTime: 'Collection Time',
+    Collection: 'Collection',
+    CancelCollection: 'Cancel Collection',
+    confirmBulkUnsubscribe: 'Confirm Bulk Unsubscribe?',
+    unsubscribeConfirm: 'Unsubscribe Confirm?',
+    // 知识分享
+    classification: 'Classification',
+    searchContent: 'Search Content',
+
+    forward: 'Forward',
+    comment: 'Comment',
+    release: 'Release',
+    answer: 'Answer',
+    replyToComments: 'Reply To Comments',
+    noComment: 'No Comments',
+    cannotEmpty: 'Cannot Be Empty',
+  }
+}
diff --git a/src/common/lang/personalCenter/zh.js b/src/common/lang/personalCenter/zh.js
new file mode 100644
index 00000000..c947a5da
--- /dev/null
+++ b/src/common/lang/personalCenter/zh.js
@@ -0,0 +1,32 @@
+// 个人中心的所有翻译
+module.exports = {
+  // 我的收藏
+  collection: {
+    documentLibrary: '文档库',
+    problemKnowledgeBase: '知识分享',
+    serialNumber: '编号',
+    title: '标题',
+    status: '状态',
+    collectionTime: '收藏时间',
+    collection: '收藏',
+    cancelCollection: '取消收藏',
+    batchCancel: '批量取消收藏',
+
+    batchCancelCollection: '确认批量取消收藏?',
+    confirmCancelCollection: '确认取消收藏?',
+
+    confirmBulkUnsubscribe: '确认批量取消订阅?',
+    unsubscribeConfirm: '确认取消订阅?',
+    // 知识分享
+    classification: '分类',
+    searchContent: '搜索内容',
+
+    forward: '转发',
+    comment: '评论',
+    release: '发布',
+    answer: '回复',
+    replyToComments: '回复评论',
+    noComment: '暂无评论',
+    cannotEmpty: '不能为空',
+  }
+}
diff --git a/src/common/lang/zh-cn.js b/src/common/lang/zh-cn.js
index 32c0c741..682ed4aa 100644
--- a/src/common/lang/zh-cn.js
+++ b/src/common/lang/zh-cn.js
@@ -1,4 +1,5 @@
 const system = require('./system/zh.js')
+const personalCenter = require('./personalCenter/zh.js')
 
 module.exports = {
   // 共用
@@ -112,6 +113,9 @@ module.exports = {
   confirmRelease: '确认发布？',
   confirmWithdraw: '确认撤回？',
   doNotHavePermissionDeleteData: '没有权限删除此数据',
+  noData: '暂无数据',
+  dataLoading: '数据加载中...',
+  confirmDelete: '确定删除?',
   // 页面头部
   header: {
     userMenuSearchMenu: '搜索菜单',
@@ -429,5 +433,7 @@ module.exports = {
     file: '文件'
   },
   // 系统管理
-  system
+  system,
+  // 个人中心
+  personalCenter
 }
diff --git a/src/components/SelectedBy/index.vue b/src/components/SelectedBy/index.vue
new file mode 100644
index 00000000..dbb00644
--- /dev/null
+++ b/src/components/SelectedBy/index.vue
@@ -0,0 +1,231 @@
+<template>
+  <div>
+    <a-drawer
+      :title="title"
+      :maskClosable="false"
+      :width="600"
+      placement="right"
+      :closable="true"
+      @close="handleCancel"
+      :visible="visible"
+      style="height: 100%;overflow: auto;padding-bottom: 53px;">
+      <a-spin :spinning="confirmLoading">
+        <a-input-search style="margin-bottom: 8px" v-model="searchModel"
+                        @search="onSearch"
+                        allowClear
+                        :placeholder="$t('NodeQuickLookup')" />
+        <div class="drawer-content">
+          <a-tree
+            v-if="visibleTree"
+            style="margin-bottom: 60px;height: 600px"
+            checkable
+            :autoExpandParent="false"
+            :tree-data="gData"
+            @select="onSelect"
+            @check="checkChange"
+            @expand="onExpand"
+            :defaultExpandedKeys="defaultExpandedKeys"
+          >
+          </a-tree>
+        </div>
+      </a-spin>
+      <div class="drawer-bootom-button">
+        <a-button @click="handleCancel" style="margin-right: 16px">{{ $t('cancel') }}</a-button>
+        <a-button @click="handleSubmit" type="primary" :loading="submitLoading">{{ $t('submit') }}</a-button>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+import { getAction, postAction } from '@/api/manage'
+
+export default {
+  name: 'index',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    isSingleChoice: {
+      type: Boolean,
+      default: false
+    },
+    flag: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      gData: [],
+      searchModel: '',
+      autoExpandParent: true,
+      expandedKeys: [],
+      visible: false,
+      confirmLoading: false,
+      selectedKey: [],
+      tableKey: [],
+      userIds: [],
+      departId: '',
+      defaultExpandedKeys: [],
+      submitLoading: false,
+      visibleTree: false,
+      userName: []
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    getPush () {
+      this.searchModel = ''
+      this.visible = true
+      this.visibleTree = false
+      this.$nextTick(() => {
+        this.departId = ''
+        this.queryDepartUserTreeList()
+      })
+    },
+    onSelect (selectedKeys) {
+      this.selectedKey = selectedKeys
+    },
+    onExpand (selectedKeys, val) {
+      if (this.searchModel === '' || !this.searchModel) {
+        if (val.expanded) {
+          if (this.departId === val.node.value) {
+          } else {
+            this.departId = val.node.value
+            this.queryDepartUserTreeList()
+          }
+        }
+      }
+    },
+    handleCancel () {
+      this.visible = false
+      this.visibleTree = false
+    },
+    handleSubmit () {
+      if (this.isSingleChoice) {
+        if (this.userIds.length > 1) {
+          this.$message.warning(this.$t('onlyOnePersonCanBeSelected'))
+          return
+        }
+      }
+      this.confirmLoading = true
+      if (this.userIds && this.userIds.length > 0) {
+        this.submitLoading = true
+        this.$emit('SelectedByForm', this.userIds.join(','), this.userName.join(','))
+      } else {
+        this.$message.warning(this.$t('selectLeastOne'))
+      }
+    },
+    onSearch (e) {
+      this.gData = []
+      this.departId = ''
+      this.visibleTree = false
+      if (e) {
+        this.getUserAndDepart()
+      } else {
+        this.queryDepartUserTreeList()
+      }
+    },
+    getUserAndDepart () {
+      getAction('sys/user/getUserAndDepart', { name: this.searchModel }).then((res) => {
+        if (res) {
+          this.gData = res.filter(ele => ele.flag === 'DEPART')
+        } else {
+          this.gData = []
+        }
+        this.visibleTree = true
+      })
+    },
+    queryDepartUserTreeList () {
+      let gData = JSON.parse(JSON.stringify(this.gData))
+      if (gData && gData.length > 0) {
+        gData = JSON.stringify(gData)
+      } else {
+        gData = ''
+      }
+      let query = {}
+      if (this.flag === 1) {
+        query = {
+          departId: this.departId,
+          json: gData
+        }
+      } else {
+        query = {
+          departId: this.departId,
+          json: gData,
+          flag: '1'
+        }
+      }
+      this.confirmLoading = true
+      postAction('sys/user/queryDepartUserTreeList', query).then((res) => {
+        this.confirmLoading = false
+        if (res.success) {
+          this.gData = res.result
+          this.gData = [...this.gData]
+          this.defaultExpandedKeys = [this.departId]
+          this.visibleTree = true
+        } else {
+          this.gData = []
+        }
+      })
+    },
+    checkChange (e, name) {
+      this.userName = []
+      this.userIds = e
+      if (name.checkedNodes && name.checkedNodes.length > 0) {
+        name.checkedNodes.forEach(res => {
+          this.userName.push(res.data.props.dataRef.title)
+        })
+      }
+      if (this.isSingleChoice) {
+        if (this.userIds.length > 1) {
+          this.userIds.shift()
+          this.userName.shift()
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.box-title-text {
+  line-height: 1.4;
+  display: flex;
+}
+
+.box-input {
+  display: inline-block;
+  height: 38px;
+  width: 100%;
+}
+
+.button-box {
+  margin-left: 10px;
+  height: 38px;
+  line-height: 38px;
+
+}
+
+.drawer-bootom-button {
+  position: absolute;
+  bottom: 0;
+  z-index: 100;
+  width: 100%;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  left: 0;
+  background: #fff;
+  border-radius: 0 0 2px 2px;
+}
+
+.drawer-content {
+  height: calc(100% - 60px);
+  overflow: auto;
+}
+</style>
diff --git a/src/components/jero/JLoading.vue b/src/components/jero/JLoading.vue
new file mode 100644
index 00000000..9b22718d
--- /dev/null
+++ b/src/components/jero/JLoading.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="loading-box" :style="style" v-if="loading">
+    <div class="loading-content">
+      <a-icon class="loading" type="loading" />
+      <div class="loading-tips">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'JLoading',
+  props: {
+    // 是否显示隐藏
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 是否固定
+    fixed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      style: {}
+    }
+  },
+  mounted () {
+    if (this.fixed) {
+      const el = $(this.el)
+      const top = `${el.offset().top}px`
+      const left = `${el.offset().left}px`
+      const width = `${el.outerWidth()}px`
+      const height = `${el.outerHeight()}px`
+      this.style = {
+        position: 'fixed',
+        top,
+        left,
+        width,
+        height,
+        'z-index': 1000
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.loading-box {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1009;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  user-select: none;
+
+  .loading-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    color: #21c9cc;
+    transform: translate(-50%, -50%);
+    text-align: center;
+
+    .loading {
+      font-size: 28px;
+    }
+
+    .spin-loading {
+      animation: rotating 2s linear infinite;
+    }
+
+    .loading-tips {
+      margin-top: 5px;
+      font-size: 16px;
+      color: #21c9cc;
+    }
+  }
+}
+</style>
diff --git a/src/mixins/SimpleListMixin.js b/src/mixins/SimpleListMixin.js
new file mode 100644
index 00000000..4134a0bb
--- /dev/null
+++ b/src/mixins/SimpleListMixin.js
@@ -0,0 +1,252 @@
+/**
+ * 新增修改完成调用 modalFormOk方法 编辑弹框组件ref定义为modalForm
+ * 高级查询按钮调用 superQuery方法  高级查询组件ref定义为superQueryModal
+ * data中url定义 list为查询列表  delete为删除单条记录  deleteBatch为批量删除
+ */
+import { filterObj } from '@/utils/util'
+import { getAction, postAction } from '@/api/manage'
+
+export const SimpleListMixin = {
+  data () {
+    return {
+      /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
+      queryParam: {},
+      /* 数据源 */
+      dataSource: [],
+      /* 分页参数 */
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' 共' + total + '条'
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      /* 排序参数 */
+      isorter: {
+        column: 'createTime',
+        order: 'desc'
+      },
+      /* 筛选参数 */
+      filters: {},
+      /* table加载状态 */
+      loading: false,
+      /* table选中keys */
+      selectedRowKeys: [],
+      /* table选中records */
+      selectionRows: [],
+      /* 查询折叠 */
+      toggleSearchStatus: false,
+      /* 高级查询条件生效状态 */
+      superQueryFlag: false,
+      /* 高级查询条件 */
+      superQueryParams: '',
+      /** 高级查询拼接方式 */
+      superQueryMatchType: 'and'
+    }
+  },
+  created () {
+    if (!this.disableMixinCreated) {
+      this.loadData()
+      // 初始化字典配置 在自己页面定义
+      this.initDictConfig()
+    }
+  },
+  methods: {
+    loadData (arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      // 加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      const params = this.getQueryParams()// 查询条件
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          // update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+          this.dataSource = res.result.records || res.result
+          if (res.result.total) {
+            this.ipagination.total = res.result.total
+          } else {
+            this.ipagination.total = 0
+          }
+          // update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    initDictConfig () {
+
+    },
+    handleSuperQuery (params, matchType) {
+      // 高级查询方法
+      if (!params) {
+        this.superQueryParams = ''
+        this.superQueryFlag = false
+      } else {
+        this.superQueryFlag = true
+        this.superQueryParams = JSON.stringify(params)
+        this.superQueryMatchType = matchType
+      }
+      this.loadData(1)
+    },
+    getQueryParams () {
+      // 获取查询条件
+      const sqp = {}
+      if (this.superQueryParams) {
+        sqp.superQueryParams = encodeURI(this.superQueryParams)
+        sqp.superQueryMatchType = this.superQueryMatchType
+      }
+      const param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
+      param.field = this.getQueryField()
+      param.pageNo = this.ipagination.current
+      param.pageSize = this.ipagination.pageSize
+      return filterObj(param)
+    },
+    getQueryField () {
+      // TODO 字段权限控制
+      let str = 'id,'
+      this.columns.forEach(function (value) {
+        str += ',' + value.dataIndex
+      })
+      return str
+    },
+
+    onSelectChange (selectedRowKeys, selectionRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectionRows = selectionRows
+    },
+    onClearSelected () {
+      this.selectedRowKeys = []
+      this.selectionRows = []
+    },
+    searchQuery () {
+      this.loadData(1)
+      // 点击查询清空列表选中行
+      this.selectedRowKeys = []
+      this.selectionRows = []
+    },
+    superQuery () {
+      this.$refs.superQueryModal.show()
+    },
+    searchReset () {
+      this.queryParam = {}
+      this.loadData(1)
+    },
+    batchDel () {
+      if (!this.url.deleteBatch) {
+        this.$message.error('请设置url.deleteBatch属性!')
+        return
+      }
+      if (this.selectedRowKeys.length <= 0) {
+        this.$message.warning('请选择一条记录！')
+        return
+      }
+      let ids = ''
+      for (let a = 0; a < this.selectedRowKeys.length; a++) {
+        ids += this.selectedRowKeys[a] + ','
+      }
+      const that = this
+      this.$confirm({
+        title: '确认删除',
+        content: '是否删除选中数据?',
+        onOk: function () {
+          that.loading = true
+          postAction(that.url.deleteBatch, { ids: ids }).then((res) => {
+            if (res.success) {
+              // 重新计算分页问题
+              that.reCalculatePage(that.selectedRowKeys.length)
+              that.$message.success(res.message)
+              that.loadData()
+              that.onClearSelected()
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.loading = false
+          })
+        }
+      })
+    },
+    handleDelete: function (id) {
+      if (!this.url.delete) {
+        this.$message.error('请设置url.delete属性!')
+        return
+      }
+      const that = this
+      this.$confirm({
+        title: '确认删除',
+        content: '确定要删除此条数据吗?',
+        onOk: function () {
+          postAction(that.url.delete, { id: id }).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              // 判断当前删除的数据是否是最后一页的最后一条数据，如果是的话页码减一
+              if (that.ipagination.current > 1 && ((that.ipagination.current - 1) * that.ipagination.pageSize) + 1 === that.ipagination.total) {
+                that.ipagination.current -= 1
+              }
+              that.loadData()
+            } else {
+              that.$message.warning(res.message)
+            }
+          })
+        }
+      })
+    },
+    reCalculatePage (count) {
+      // 总数量-count
+      const total = this.ipagination.total - count
+      // 获取删除后的分页数
+      const currentIndex = Math.ceil(total / this.ipagination.pageSize)
+      // 删除后的分页数<所在当前页
+      if (currentIndex < this.ipagination.current) {
+        this.ipagination.current = currentIndex
+      }
+      console.log('currentIndex', currentIndex)
+    },
+    handleEdit: function (record) {
+      this.$refs.modalForm.edit(record)
+      this.$refs.modalForm.title = this.$t('edit')
+      this.$refs.modalForm.disableSubmit = false
+    },
+    handleAdd: function () {
+      this.$refs.modalForm.add()
+      this.$refs.modalForm.title = this.$t('newlyAdded')
+      this.$refs.modalForm.disableSubmit = false
+    },
+    handleTableChange (pagination, filters, sorter) {
+      // 分页、排序、筛选变化时触发
+      if (Object.keys(sorter).length > 0) {
+        this.isorter.column = sorter.field
+        this.isorter.order = sorter.order === 'ascend' ? 'asc' : 'desc'
+      }
+      this.ipagination = pagination
+      this.loadData()
+    },
+    handleToggleSearch () {
+      this.toggleSearchStatus = !this.toggleSearchStatus
+    },
+
+    modalFormOk () {
+      // 新增/修改 成功时，重载列表
+      this.loadData()
+      // 清空列表选中
+      this.onClearSelected()
+    },
+    handleDetail: function (record) {
+      this.$refs.modalForm.edit(record)
+      this.$refs.modalForm.title = '详情'
+      this.$refs.modalForm.disableSubmit = true
+    }
+  }
+
+}
diff --git a/src/views/personalCenter/myCollection/MyCollection.vue b/src/views/personalCenter/myCollection/MyCollection.vue
new file mode 100644
index 00000000..c73bd30a
--- /dev/null
+++ b/src/views/personalCenter/myCollection/MyCollection.vue
@@ -0,0 +1,51 @@
+<!--我的收藏-->
+<template>
+<div class="collection">
+  <a-card :bordered="false">
+    <a-spin :spinning="spinning">
+      <a-tabs :default-active-key="1" @change="callbackTab">
+        <a-tab-pane v-for='item in tabArr' :key="item.value" :tab="item.showText">
+          <component :is='item.comp' :type='item.value' :property="item.props"></component>
+        </a-tab-pane>
+      </a-tabs>
+    </a-spin>
+  </a-card>
+</div>
+</template>
+
+<script>
+
+import CollectionDocumentLibraryList from './pages/CollectionDocumentLibraryList'
+import CollectionKnowledgeShareList from './pages/CollectionKnowledgeShareList'
+
+export default {
+  name: 'MyCollection',
+  components: {
+    CollectionDocumentLibraryList,
+    CollectionKnowledgeShareList
+  },
+  data () {
+    return {
+      spinning: false,
+      tabArr: [
+        { name: '文档库', showText: this.$t('personalCenter.collection.documentLibrary'), value: 1, comp: CollectionDocumentLibraryList },
+        { name: '知识分享', showText: this.$t('personalCenter.collection.problemKnowledgeBase'), value: 2, comp: CollectionKnowledgeShareList }
+      ]
+    }
+  },
+  methods: {
+    // 标签项管理tab切换
+    callbackTab (value) {
+      this.key = value
+      this.spinning = true
+      setTimeout(() => {
+        this.spinning = false
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/personalCenter/myCollection/pages/CollectionDocumentLibraryList.vue b/src/views/personalCenter/myCollection/pages/CollectionDocumentLibraryList.vue
new file mode 100644
index 00000000..761a9f01
--- /dev/null
+++ b/src/views/personalCenter/myCollection/pages/CollectionDocumentLibraryList.vue
@@ -0,0 +1,236 @@
+<!--我的收藏-文档库-->
+<template>
+  <div>
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <!--编号-->
+            <a-form-item :label="$t('personalCenter.collection.serialNumber')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-input :placeholder="$t('pleaseEnter') + $t('personalCenter.collection.serialNumber')"
+                       v-model="queryParam.serialNumber"></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <!--标题-->
+            <a-form-item :label="$t('personalCenter.collection.title')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-input :placeholder="$t('pleaseEnter') + $t('personalCenter.collection.title')"
+                       v-model="queryParam.title"></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <!--状态-->
+            <a-form-item :label="$t('personalCenter.collection.status')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-dict-select-tag
+                class="box-input"
+                v-model="queryParam.state"
+                :placeholder="$t('pleaseSelect') + $t('personalCenter.collection.status')"
+                :type="'select'"
+                :triggerChange="false"
+                :dictCode="'state'"
+              />
+            </a-form-item>
+          </a-col>
+          <div style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
+            <a-button class="box-button" @click="searchReset">{{ $t('reset') }}</a-button>
+            <a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
+          </div>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="table-operator">
+      <div class="operator-text" @click="handleBatCancel">
+        <a-icon type="delete" />
+        {{ $t('personalCenter.collection.batchCancel') }}
+      </div>
+    </div>
+    <a-table
+      ref="table"
+      :bordered="true"
+      size="middle"
+      rowKey="id"
+      :components="drag(columns,'columns')"
+      :columns="columns"
+      :dataSource="dataSource"
+      :pagination="ipagination"
+      :loading="loading"
+      :scroll="{x: '100%'}"
+      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+      @change="handleTableChange">
+      <template slot="text" slot-scope="text">
+        <a-tooltip overlay-class-name="tooltip-style">
+          <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+          <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
+        </a-tooltip>
+      </template>
+      <template slot="serialNumber" slot-scope="text, record">
+          <a class="table-del" @click="onDetail(record)">{{text}}</a>
+      </template>
+      <div slot="action" slot-scope="text, record">
+        <!--取消收藏-->
+        <a class="table-del" @click="onCancel(record)">{{$t('personalCenter.collection.cancelCollection')}}</a>
+      </div>
+    </a-table>
+
+  </div>
+</template>
+
+<script>
+import '@assets/less/common.less'
+import { ResizeColumnProvide, ResizeHeader } from '../../../../mixins/header'
+import { SimpleListMixin } from '../../../../mixins/SimpleListMixin'
+import { deleteAction, postAction } from '../../../../api/manage'
+import JDictSelectTag from '../../../../components/dict/JDictSelectTag'
+
+export default {
+  name: 'CollectionDocumentLibraryList',
+  mixins: [SimpleListMixin, ResizeHeader, ResizeColumnProvide],
+  components: {
+    JDictSelectTag
+  },
+  data () {
+    return {
+      labelCol: {
+        span: 6
+      },
+      wrapperCol: {
+        span: 14
+      },
+      // 混入中查询等相关接口
+      url: {
+        list: 'tag/onlCgformTag/page',
+        cancel: 'collection/onlCgformCollection/delete',
+        cancelBatch: 'collection/onlCgformCollection/deleteBatch'
+      },
+      // 列表表头
+      columns: [
+        // 编号
+        {
+          title: this.$t('personalCenter.collection.serialNumber'),
+          dataIndex: 'serialNumber',
+          key: 'serialNumber',
+          scopedSlots: { customRender: 'serialNumber' },
+          align: 'left',
+          sorter: true,
+          ellipsis: true,
+          width: 335
+        },
+        // 标题
+        {
+          title: this.$t('personalCenter.collection.title'),
+          align: 'left',
+          scopedSlots: { customRender: 'serialNumber' },
+          width: 510,
+          ellipsis: true,
+          dataIndex: 'title'
+        },
+        // 状态
+        {
+          title: this.$t('personalCenter.collection.status'),
+          align: 'left',
+          width: 254,
+          ellipsis: true,
+          sorter: true,
+          dataIndex: 'state',
+          scopedSlots: { customRender: 'text' }
+        },
+        // 收藏时间
+        {
+          title: this.$t('personalCenter.collection.collectionTime'),
+          align: 'left',
+          width: 299,
+          ellipsis: true,
+          sorter: true,
+          dataIndex: 'createTime',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('operation'),
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' },
+          align: 'left',
+          fixed: 'right',
+          width: 170
+        }
+      ]
+    }
+  },
+  methods: {
+    onDetail (item) {
+      const newUrl = this.$router.resolve({
+        path: '/docManage/library/detail',
+        query: {
+          id: item.documentId,
+          serial_number: item.serialNumber,
+          title: item.title
+        }
+      })
+      window.open(newUrl.href, '_blank')
+    },
+    // 批量取消收藏
+    handleBatCancel () {
+      if (!this.url.cancelBatch) {
+        this.$message.error('请设置url.cancelBatch属性!')
+        return
+      }
+      if (this.selectedRowKeys.length <= 0) {
+        this.$message.warning(this.$t('selectLeastOne'))
+        return
+      }
+      let ids = ''
+      for (let a = 0; a < this.selectedRowKeys.length; a++) {
+        ids += this.selectedRowKeys[a] + ','
+      }
+      const that = this
+      this.$confirm({
+        title: this.$t('personalCenter.collection.batchCancelCollection'),
+        content: '',
+        onOk: async () => {
+          deleteAction(that.url.cancelBatch, { ids }).then(res => {
+            if (res.success) {
+              this.$message.success(this.$t('OperationSuccessful'))
+              // 重新计算分页问题
+              that.reCalculatePage(that.selectedRowKeys.length)
+              this.loadData()
+            } else {
+              this.$message.warning(this.$t('operationFailed'))
+            }
+          })
+        }
+      })
+    },
+    // 取消收藏
+    onCancel (record) {
+      if (!this.url.cancel) {
+        this.$message.error('请设置url.cancel属性!')
+        return
+      }
+      const that = this
+      const params = {
+        id: record.id
+      }
+      this.$confirm({
+        title: this.$t('personalCenter.collection.confirmCancelCollection'),
+        content: '',
+        onOk: async () => {
+          postAction(that.url.cancel, params).then(res => {
+            if (res.success) {
+              this.$message.success(this.$t('operationSuccessful'))
+              if (this.tableData.length === 1 && this.queryParams.pageNo !== 1) {
+                this.queryParams.pageNo = this.queryParams.pageNo - 1
+              }
+              this.loadData()
+            } else {
+              this.$message.warning(this.$t('operationFailed'))
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/personalCenter/myCollection/pages/CollectionKnowledgeShareList.vue b/src/views/personalCenter/myCollection/pages/CollectionKnowledgeShareList.vue
new file mode 100644
index 00000000..abbf1a01
--- /dev/null
+++ b/src/views/personalCenter/myCollection/pages/CollectionKnowledgeShareList.vue
@@ -0,0 +1,755 @@
+<template>
+  <div>
+    <div class="search-detail-wrap">
+      <div class="box-content-left">
+        <div class="classification">{{ $t('personalCenter.collection.classification') }}:</div>
+        <template v-for="tag in tagList">
+          <a-checkable-tag
+            :key="tag.id"
+            :title="tag.problemLabel"
+            :checked="selectedTags.indexOf(tag.id) > -1"
+            @change="checked => handleChange(tag.id, checked)"
+          >
+            {{ tag.problemLabel }}
+          </a-checkable-tag>
+        </template>
+      </div>
+      <a-form layout="inline" @keyup.enter.native="onSearch">
+        <div class="box-title-text">
+          <a-input-search class="box-input" :placeholder="$t('pleaseEnter')+$t('personalCenter.collection.searchContent')"
+                          allowClear
+                          @search="onSearch"
+                          v-model="searchStr"></a-input-search>
+        </div>
+      </a-form>
+    </div>
+    <div v-if="isTrue">
+      <div v-if="conList.length > 0" style="margin-top: 16px;height: calc(100vh - 260px);overflow:auto;">
+        <div class="content-box" v-for="(item,index) in conList" :key="index">
+          <div class="content-box-top" @click="detailClcik(item)">
+            <span class="content-box-top-text">
+             {{ item.title }}
+            </span>
+            <template  v-if="item.problemTypeNameList && item.problemTypeNameList.length > 0">
+              <span
+                class="content-box-top-color"
+                :title="val"
+                v-for="val in item.problemTypeNameList"
+                :key="val"
+              >
+                {{ val }}
+              </span>
+            </template>
+          </div>
+          <div class="content-box-content">
+            <div class="content-box-content-top" @click="detailClcik(item)"
+                 v-html="item.contentOne">
+            </div>
+            <div class="content-box-content-botton">
+              <template v-if="item.accessoryFileNameList && item.accessoryFileNameList.length > 0">
+                <div class="content-box-content-botton-text"
+                     :title="val.fileName"
+                     v-for="val in item.accessoryFileNameList"
+                     :key="val"
+                >
+                  <span @click="fileClick(val)">{{ val.fileName }}</span>
+                </div>
+              </template>
+            </div>
+          </div>
+          <div class="content-box-xian" @click="detailClcik(item)"></div>
+          <div class="content-box-button">
+            <div class="content-box-button-left" @click="detailClcik(item)">
+              <div class="content-box-button-text">
+                <a-icon type="user" />
+                {{ item.createBy }}
+              </div>
+              <div class="content-box-button-text" v-if="item.standNumber">
+                <a-icon type="audit" />
+                {{ item.standNumber }}
+              </div>
+              <div class="content-box-button-text" v-if="item.targetMarket_dicText">
+                <img src="../../../../assets/ditu.png" style="width: 15px;margin-top: -3px" alt="">
+                {{ item.targetMarket_dicText }}
+              </div>
+              <div class="content-box-button-text" v-if="item.showPermissions_dicText">
+                <a-icon type="eye" />
+                {{ item.showPermissions_dicText }}
+              </div>
+              <div class="content-box-button-text">
+                <a-icon type="history" />
+                {{ item.createTime }}
+              </div>
+            </div>
+            <div class="content-box-button-right">
+              <div class="content-box-button-text">
+                <a-icon type="clock-circle" />
+                {{ item.collectEO.createTime }}
+              </div>
+              <div class="content-box-button-text"
+                   :class="{'icon-active':item.collectEO && item.collectEO.collectStatus == 'Collect' ? true : false}"
+                   @click="cancelCollection(item)">
+                <a-icon class="icon" type="star" />
+                {{ $t('personalCenter.collection.cancelCollection') }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="noData" v-else>
+        {{ $t('noData') }}
+      </div>
+      <div class="page" v-if="conList.length > 0">
+        <a-pagination
+          :show-total="total => $t('total')+` ${total} `+$t('strip')"
+          show-quick-jumper
+          show-size-changer
+          :page-size.sync="pageSize"
+          :total="total"
+          :current="pageNo"
+          @change="pageOnChange"
+          @showSizeChange="SizeChange"
+        />
+      </div>
+    </div>
+    <CollectionKnowledgeShareListView ref="collectionKnowledgeShareListViewRef"
+                                      @problemKnowledgeBase="problemKnowledgeBase" v-else />
+    <JLoading :loading="loading">{{ $t('dataLoading') }}</JLoading>
+  </div>
+</template>
+
+<script>
+import { getAction, deleteAction, downloadFile } from '@/api/manage'
+import CollectionKnowledgeShareListView from './CollectionKnowledgeShareListView'
+import { mapGetters } from 'vuex'
+import { Base64 } from 'js-base64'
+import JLoading from '../../../../components/jero/JLoading'
+
+export default {
+  name: 'CollectionKnowledgeShareList',
+  components: {
+    CollectionKnowledgeShareListView,
+    JLoading
+  },
+  data () {
+    return {
+      conList: [],
+      total: 0,
+      searchStr: '',
+      pageSize: 10,
+      pageNo: 1,
+      tagList: [],
+      isTrue: true,
+      checkboxText: [],
+      checkboxList: [],
+      selectedTags: [],
+      loading: false,
+      queryParams: {},
+      url: {
+        getInfoList: '/problemKnowledgeBase/problemKnowledgeBaseCollectEO/queryCollectPageList',
+        deleteBatch: '/problemKnowledgeBase/problemKnowledgeBaseCollectEO/deleteBatch'
+      },
+      downLoadFileUrl: window._CONFIG.domianPreviewURL + '/sys/common/download',
+      downLoadImgUrl: window._CONFIG.domianWebImgURL + '/sys/common/download'
+    }
+  },
+  mounted () {
+    this.getList()
+    this.replacePage()
+  },
+  watch: {},
+  methods: {
+    ...mapGetters(['userInfo']),
+    replacePage () {
+      getAction('/problemKnowledgeBase/problemKnowledgeBaseClassifyEO/list', {}).then((res) => {
+        if (res.success) {
+          this.tagList = res.result
+        } else {
+          this.tagList = []
+        }
+      })
+    },
+    onSearch () {
+      this.isTrue = true
+      this.pageNo = 1
+      this.getList()
+    },
+    handleChange (tag, checked) {
+      const { selectedTags } = this
+      const nextSelectedTags = checked
+        ? [...selectedTags, tag]
+        : selectedTags.filter(t => t !== tag)
+      this.selectedTags = nextSelectedTags
+      this.isTrue = true
+      this.getList()
+    },
+    detailClcik (val) {
+      this.isTrue = false
+      this.$nextTick(() => {
+        this.$refs.collectionKnowledgeShareListViewRef.getData(JSON.parse(JSON.stringify(val)))
+      })
+    },
+    fileClick (fileQuery) {
+      const fileName = fileQuery.fileName
+      const index1 = fileName.lastIndexOf('.')
+      const index2 = fileName.length
+      const fileSuffix = fileName.substring(index1, index2)
+      if (fileSuffix === '.pdf') {
+        window.open('/pdf/web/viewer.html?file=' + encodeURIComponent('/jero-boot/sys/common/pdf/viewFile?id=' + fileQuery.id + '&userName=' + this.userInfo().username))
+      } else if (fileSuffix === '.docx' || fileSuffix === '.doc') {
+        const url = window._CONFIG.onlinePreviewDomainURL + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
+        window.open(url, '_blank')
+      } else if (fileSuffix === '.xlsx' || fileSuffix === '.xls') {
+        const url = window._CONFIG.onlinePreviewDomainURL + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
+        window.open(url, '_blank')
+      } else if (fileSuffix === '.png' || fileSuffix === '.jpeg' || fileSuffix === '.gif' || fileSuffix === '.jpg') {
+        const url = window._CONFIG.onlinePreviewDomainURL + '?url=' + Base64.encode(this.downLoadImgUrl + '/' + fileQuery.id + fileSuffix)
+        window.open(url, '_blank')
+      } else {
+        downloadFile('/sys/common/downLoadFile', fileQuery.fileName, { id: fileQuery.id })
+      }
+    },
+    problemKnowledgeBase () {
+      this.pageNo = 1
+      this.isTrue = true
+      this.getList()
+    },
+    searchQuery () {
+      this.pageNo = 1
+      this.getList()
+    },
+    searchReset () {
+      this.pageNo = 1
+      this.queryParams = {}
+      this.getList()
+    },
+    pageOnChange (page, pageSize) {
+      this.pageNo = page
+      this.checkboxList = JSON.parse(JSON.stringify(this.checkboxText))
+      this.getList()
+    },
+    SizeChange (page, pageSize) {
+      this.pageNo = 1
+      this.checkboxList = JSON.parse(JSON.stringify(this.checkboxText))
+      this.pageSize = pageSize
+      this.getList()
+    },
+    handleBatCancel () {
+      if (this.checkboxText && this.checkboxText.length > 0) {
+        const _this = this
+        this.$confirm({
+          content: _this.$t('personalCenter.collection.batchCancelCollection'),
+          onOk () {
+            const checkboxText = JSON.parse(JSON.stringify(_this.checkboxText))
+            deleteAction(_this.url.deleteBatch, { ids: checkboxText.join(',') }).then((res) => {
+              if (res.success) {
+                _this.$message.success(_this.$t('OperationSuccessful'))
+                _this.checkboxText = []
+                _this.getList()
+              } else {
+                _this.$message.warning(res.message)
+              }
+            })
+          }
+        })
+      } else {
+        this.$message.warning(this.$t('selectLeastOne'))
+      }
+    },
+    cancelCollection (val) {
+      const _this = this
+      this.$confirm({
+        content: _this.$t('personalCenter.collection.confirmCancelCollection'),
+        onOk () {
+          deleteAction(_this.url.deleteBatch, { ids: val.collectEO.id }).then((res) => {
+            if (res.success) {
+              _this.$message.success(_this.$t('OperationSuccessful'))
+              _this.getList()
+            } else {
+              _this.$message.warning(res.message)
+            }
+          })
+        }
+      })
+    },
+    checkedClick (item) {
+      const newUrl = this.$router.resolve({
+        path: '/problemKnowledgeBaseView',
+        query: {
+          id: item.id
+        }
+      })
+      window.open(newUrl.href, '_blank')
+    },
+    getText (str) {
+      const words = str.replace(/<[^<>]+>/g, '').replace(/&nbsp;/gi, '') // 这里是去除标签
+      // .replace(/\s/g, '') //这里是去除空格
+      return words
+    },
+    getList () {
+      const selectedTags = JSON.parse(JSON.stringify(this.selectedTags))
+      const query = {
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+        // createBy: this.userInfo().username,
+        searchStr: this.searchStr,
+        problemTypes: selectedTags.join(',')
+      }
+      this.loading = true
+      getAction(this.url.getInfoList, query).then((res) => {
+        if (res.success && res.result) {
+          if (res.result.current > 1 && res.result.records.length === 0) {
+            this.pageNo = 1
+            this.getList()
+            return
+          }
+          this.conList = res.result ? res.result.records : []
+          if (this.conList && this.conList.length > 0) {
+            this.conList.forEach(val => {
+              if (val.content) {
+                val.content = this.getText(val.content)
+              }
+            })
+          }
+          if (this.checkboxList && this.checkboxList.length > 0) {
+            const contentList = []
+            for (let j = 0; j < this.conList.length; j++) {
+              contentList.push(this.conList[j].collectEO.id)
+            }
+            this.checkboxList = this.checkboxList.filter(val => {
+              return !contentList.join(',').includes(val)
+            })
+          }
+          this.checkboxText = [...this.checkboxText]
+          this.total = res.result.total
+          this.loading = false
+        } else {
+          this.conList = []
+          this.loading = false
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.search-detail-wrap {
+  width: 100%;
+  overflow: hidden;
+  /*margin: 0 auto;*/
+}
+
+.box-title-text {
+  line-height: 1.4;
+  width: 360px;
+  float: right;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  text-align: center;
+  justify-content: center;
+}
+
+.title-text {
+  width: 110px;
+  color: #000F16;
+  display: inline-block;
+  font-weight: 500;
+  font-size: 14px;
+  margin-right: 16px;
+  margin-top: 3px;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.box-input {
+  /*min-width: 200px;*/
+  display: inline-block;
+  width: 100%;
+  height: 38px;
+  margin-right: 16px;
+}
+
+.box-button {
+  height: 38px;
+}
+
+.box-content-left {
+  width: calc(100% - 400px);
+  float: left;
+  font-size: 14px;
+  font-weight: 400;
+  color: #040B29;
+  margin-right: 10px;
+}
+
+.box-content-content {
+  float: left;
+  width: 150px;
+  text-align: center;
+}
+
+.box-content-content-index {
+  width: 108px;
+  height: 40px;
+  background: rgba(0, 179, 190, 0.06);
+  border: 1px solid #00BEBE;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 14px;
+  color: #00B3BE;
+  line-height: 40px;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 6px;
+}
+
+.classification {
+  display: inline-block;
+  font-size: 14px;
+  color: #000F16;
+  margin-right: 10px;
+  overflow: hidden;
+  margin-bottom: 7px;
+}
+
+.box-content-right {
+  width: 100%;
+  display: inline-block;
+  text-align: right;
+  margin-top: 20px;
+}
+
+.operator-text-text-index {
+  cursor: pointer;
+  margin-right: 53px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #040B29;
+  display: inline-block;
+}
+
+.operator-text-text-index:last-child {
+  margin-right: 13px;
+}
+
+.box-content-left-text {
+  margin-right: 30px;
+  cursor: pointer;
+}
+
+.box {
+  padding: 0 0 0 18px;
+  box-sizing: border-box;
+}
+
+.checkbox-left {
+  float: left;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.text-text-right {
+  padding: 19px 20px;
+  box-sizing: border-box;
+  /*margin-left: 38px;*/
+}
+
+.null-input {
+  background-color: #F2F4F8;
+}
+
+.search-text-title {
+  margin-bottom: 22px;
+}
+
+.text-header {
+  margin-bottom: 11px;
+
+  .text-header-text {
+    margin-right: 52px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #040B29;
+    display: inline-block;
+    max-width: calc(100% - 180px);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  /*span {*/
+  /*  margin-right: 52px;*/
+  /*  font-size: 16px;*/
+  /*  font-weight: bold;*/
+  /*  color: #040B29;*/
+  /*  display: inline-block;*/
+  /*  max-width: 500px;*/
+  /*  text-overflow: ellipsis;*/
+  /*  white-space: nowrap;*/
+  /*  overflow: hidden;*/
+  /*}*/
+}
+
+.text-content {
+  font-size: 14px;
+  font-weight: 400;
+  color: #040B29;
+  opacity: 0.7;
+  overflow: hidden;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  /*! autoprefixer: off */
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  /*! autoprefixer: on;*/
+  text-justify: inter-ideograph;
+  word-break: break-all;
+}
+
+.page {
+  text-align: right;
+  margin-top: 20px;
+}
+
+.noData {
+  width: 100%;
+  text-align: center;
+  line-height: 10;
+}
+
+::v-deep .ant-tag-checkable:not(.ant-tag-checkable-checked):hover {
+  background: #00B3BE;
+  border: 1px solid #00BEBE;
+  color: #fff;
+
+}
+
+::v-deep p {
+  margin: 0;
+  padding: 0;
+}
+
+::v-deep .ant-input {
+  height: 40px;
+}
+
+.content-box {
+  width: 100%;
+  height: auto;
+  padding: 24px 24px 16px 24px;
+  box-sizing: border-box;
+  border: 1px solid #E6E6E9;
+  border-radius: 4px;
+  position: relative;
+  margin-bottom: 20px;
+
+  .content-box-top {
+    width: 100%;
+    height: auto;
+
+    .content-box-top-text {
+      font-size: 16px;
+      font-weight: bold;
+      color: #040B29;
+      cursor: pointer;
+      overflow: hidden;
+      display: inline-block;
+    }
+
+    .content-box-top-color {
+      font-size: 12px;
+      cursor: pointer;
+      font-weight: 400;
+      color: #00BEBE;
+      padding: 0 10px;
+      box-sizing: border-box;
+      display: inline-block;
+      height: 22px;
+      line-height: 22px;
+      background: #DBF2F3;
+      border-radius: 3px;
+      margin-left: 6px;
+      max-width: 140px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+
+  .content-box-content {
+    width: 100%;
+    height: auto;
+    margin-top: 16px;
+    margin-bottom: 10px;
+
+    .content-box-content-top {
+      font-size: 14px;
+      font-weight: 400;
+      color: #040B29;
+      display: -webkit-box;
+      text-overflow: ellipsis;
+      /*! autoprefixer: off */
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      /*! autoprefixer: on;*/
+      text-justify: inter-ideograph;
+      word-break: break-all;
+      overflow: hidden;
+    }
+
+    .content-box-content-botton {
+      width: 100%;
+      margin-top: 10px;
+
+      .content-box-content-botton-text {
+        /*max-width: 198px;*/
+        height: 32px;
+        display: inline-block;
+        text-align: left;
+        line-height: 32px;
+        /*background: #EFF1F3;*/
+        border-radius: 4px;
+        /*text-overflow: ellipsis;*/
+        /*white-space: nowrap;*/
+        /*word-break: break-all;*/
+        /*overflow: hidden;*/
+        font-size: 14px;
+        font-weight: 400;
+        color: #040B29;
+        margin-right: 20px;
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .content-box-xian {
+    width: 100%;
+    position: absolute;
+    border-bottom: 1px #EFF1F3 solid;
+    left: 0;
+    /*margin-top: 10px;*/
+  }
+
+  .content-box-button {
+    width: 100%;
+    margin-top: 26px;
+    overflow: hidden;
+
+    .content-box-button-left {
+      width: 50%;
+      float: left;
+
+      .content-box-button-text {
+        display: inline-block;
+        margin-right: 30px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #6F7385;
+        word-break: break-all;
+      }
+    }
+
+    .content-box-button-right {
+      width: 50%;
+      float: left;
+      text-align: right;
+
+      .content-box-button-text {
+        display: inline-block;
+        margin-left: 30px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #040B29;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.box-title-text-index {
+  line-height: 1.4;
+  display: flex;
+  /*align-items: center;*/
+}
+
+.title-text-index {
+  width: 88px;
+  text-align: right;
+  display: inline-block;
+  font-weight: 500;
+  font-size: 14px;
+  margin-right: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 42px;
+  line-height: 48px;
+  color: #000F16;
+}
+
+.box-input-index {
+  display: inline-block;
+  height: 38px;
+  width: 100%;
+}
+
+.itemModel {
+  width: 100%;
+  display: inline-block;
+  margin-bottom: 12px;
+}
+
+.Required {
+  color: red;
+  margin-right: 4px;
+}
+
+.icon-active {
+  color: #00B3BE !important;
+}
+
+.text {
+  min-width: 16px;
+  text-align: left;
+  display: inline-block;
+  margin-left: 3px;
+}
+</style>
+<style>
+.box-content-left .ant-tag {
+  font-size: 14px;
+  font-weight: 400;
+  color: #040B29;
+}
+
+.box-content-left .ant-tag-checkable {
+  padding: 9px 10px;
+  display: inline-block;
+  box-sizing: border-box;
+  background: #fff;
+  background: rgba(4, 11, 41, 0.06);
+  color: #363C54;
+  max-width: 280px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.box-content-left .ant-tag-checkable-checked {
+  background: #00B3BE;
+  border: 1px solid #00BEBE;
+  color: #fff;
+}
+</style>
diff --git a/src/views/personalCenter/myCollection/pages/CollectionKnowledgeShareListView.vue b/src/views/personalCenter/myCollection/pages/CollectionKnowledgeShareListView.vue
new file mode 100644
index 00000000..b894fa21
--- /dev/null
+++ b/src/views/personalCenter/myCollection/pages/CollectionKnowledgeShareListView.vue
@@ -0,0 +1,790 @@
+<template>
+  <div>
+    <div class="content-box" style="margin-top: 16px">
+      <div class="content-box-top">
+        <a-icon type="arrow-left" @click="back" class="icon-left" />
+        <span class="content-box-top-text">
+             {{ queryForm.title }}
+        </span>
+        <template v-if="queryForm.problemTypeNameList && queryForm.problemTypeNameList.length > 0">
+           <span class="content-box-top-color"
+                 :title="val"
+                 v-for="val in queryForm.problemTypeNameList"
+                 :key="val"
+           >{{ val }}</span>
+        </template>
+      </div>
+      <div class="content-box-content">
+        <div class="content-box-content-top ql-editor" v-html="queryForm.content">
+
+        </div>
+        <div class="content-box-content-botton">
+          <template v-if="queryForm.accessoryFileNameList && queryForm.accessoryFileNameList.length > 0">
+            <div class="content-box-content-botton-text" v-for="item in queryForm.accessoryFileNameList" :key="item">
+              <span @click="pdfPreview(item)" :title="item.fileName" class="file-text">{{ item.fileName }}</span>
+              <a-icon @click="download(item)" type="download" class="icon-text" />
+            </div>
+          </template>
+        </div>
+      </div>
+      <div class="content-box-xian"></div>
+      <div class="content-box-button">
+        <div class="content-box-button-left">
+          <div class="content-box-button-text">
+            <a-icon type="user" />
+            {{ queryForm.createBy }}
+          </div>
+          <div class="content-box-button-text" v-if="queryForm.standNumber">
+            <div class="content-box-button-text" v-for="(value,key) in queryForm.standNumber.split(',')" :key="key">
+              <a-icon type="file-markdown" />
+              <span style="text-decoration: underline;cursor:pointer;"
+                    @click="detailClick(queryForm,key)">{{ value }}</span>
+            </div>
+          </div>
+          <div class="content-box-button-text" v-if="queryForm.targetMarket_dicText">
+            <img src="../../../../assets/ditu.png" style="width: 15px;margin-top: -3px" alt="">
+            {{ queryForm.targetMarket_dicText }}
+          </div>
+          <div class="content-box-button-text" v-if="queryForm.showPermissions_dicText">
+            <a-icon type="eye" />
+            {{ queryForm.showPermissions_dicText }}
+          </div>
+          <div class="content-box-button-text">
+            <a-icon type="history" />
+            {{ queryForm.createTime }}
+          </div>
+        </div>
+        <div class="content-box-button-right">
+          <div class="content-box-button-text" @click="forwardClick(queryForm)">
+            <a-icon type="logout" />
+            {{ $t('personalCenter.collection.forward') }}
+          </div>
+          <div class="content-box-button-text">
+            <a-icon type="eye" />
+            <span class="text">{{ queryForm.browsingHistoryCount }}</span>
+          </div>
+          <div class="content-box-button-text"
+               :class="{'icon-active':this.isCollect}"
+               @click="starClick()"
+          >
+            <a-icon class="icon" type="star" />
+            <span class="text">{{ queryForm.collectCount }}</span>
+          </div>
+          <div class="content-box-button-text"
+               :class="{'icon-active':this.isPraise}"
+               @click="likeClick()">
+            <a-icon type="like" />
+            <span class="text">{{ queryForm.praiseCount }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="content-box-comment">
+        <div class="content-box-comment-text">
+          {{ $t('personalCenter.collection.comment') }}
+        </div>
+        <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
+          <a-row :gutter="24">
+            <a-col :span="24">
+              <div class="box-title-text">
+                <a-form-model-item class="itemModel" prop="commentContent">
+                  <a-textarea :placeholder="$t('pleaseEnter')+$t('personalCenter.collection.comment')"
+                              v-model.trim="formInline.commentContent"
+                              :rows="1" />
+                </a-form-model-item>
+                <a-button class="header-btn submit"
+                          :loading="loading" @click="release"
+                          type="primary">{{ $t('personalCenter.collection.release') }}
+                </a-button>
+              </div>
+            </a-col>
+          </a-row>
+        </a-form-model>
+        <div class="commentContent-text" v-for="(item,index) in releaseList" :key="index">
+          <div class="commentContent-header">
+            <span class="commentContent-yuan"></span>
+            <span class="commentContent-title">{{ item.createBy }}</span>
+            <span class="commentContent-time">{{ item.createTime }}</span>
+          </div>
+          <div class="commentContent-content">
+            {{ item.commentContent }}
+          </div>
+          <div class="answer-text-index"
+               style="margin-bottom: 14px">
+            <span class="answer-text" @click="messageClick(item)">
+              {{ $t('personalCenter.collection.answer') }}
+            </span>
+            <span class="answer-text"
+                  v-if="administrators || item.createBy == userInfoQuery.username"
+                  @click="deleteClick(item)">
+              {{ $t('delete') }}
+            </span>
+          </div>
+          <template v-if="item.problemKnowledgeBaseCommentVOList && item.problemKnowledgeBaseCommentVOList.length > 0">
+            <div class="commentContent-text-one" v-for="(val,index1) in item.problemKnowledgeBaseCommentVOList" :key="index1"
+            >
+              <div class="commentContent-header">
+                <!--              <span class="commentContent-yuan"></span>-->
+                <span class="commentContent-title">{{ val.createBy }}</span>
+                <span class="commentContent-time">{{ val.createTime }}</span>
+              </div>
+              <div class="commentContent-content">
+                {{ val.commentContent }}
+              </div>
+              <div class="answer-text-index">
+               <span class="answer-text" @click="messageClick(item)">
+              {{ $t('personalCenter.collection.answer') }}
+              </span>
+                <span class="answer-text"
+                      v-if="administrators || val.createBy == userInfoQuery.username"
+                      @click="deleteClick(val)">
+              {{ $t('delete') }}
+              </span>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+      <SelectedBy ref="SelectedByRef" :title="$t('personalCenter.collection.forward')" @SelectedByForm="SelectedByForm"></SelectedBy>
+    </div>
+    <!--回复评论-->
+    <a-modal
+      :title="$t('personalCenter.collection.replyToComments')"
+      :width="700"
+      :visible="visibleComment"
+      :confirm-loading="confirmLoading"
+      :maskClosable="false"
+      @ok="handleOkComment"
+      @cancel="handleCancelComment"
+    >
+      <a-form-model :model="formInlineComment" class="formAdd" :rules="rulesComment" ref="ruleFormComment">
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required">*</span>
+                <span class="title-text-text" :title="$t('personalCenter.collection.replyToComments')">{{ $t('personalCenter.collection.replyToComments') }}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="'replyContent'">
+                <a-textarea
+                  :placeholder="$t('pleaseEnter')+$t('personalCenter.collection.replyToComments')"
+                  :disabled="false"
+                  v-model.trim="formInlineComment.replyContent" :rows="4" />
+              </a-form-model-item>
+            </div>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </a-modal>
+  </div>
+
+</template>
+
+<script>
+import { getAction, postAction, downloadFile, putAction, deleteAction } from '@/api/manage'
+import SelectedBy from '@/components/SelectedBy/index'
+import { mapGetters } from 'vuex'
+import { Base64 } from 'js-base64'
+
+export default {
+  name: 'CollectionKnowledgeShareListView',
+  components: {
+    SelectedBy
+  },
+  data () {
+    return {
+      visibleComment: false,
+      administrators: false,
+      userInfoQuery: {},
+      releaseList: [],
+      loading: false,
+      formInline: {},
+      confirmLoading: false,
+      formInlineComment: {},
+      rulesComment: {
+        replyContent: [
+          {
+            required: true,
+            message: this.$t('personalCenter.collection.replyToComments') + this.$t('personalCenter.collection.cannotEmpty'),
+            trigger: 'blur'
+          },
+          {
+            max: 300,
+            message: this.$t('personalCenter.collection.replyToComments') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
+            trigger: 'blur'
+          }
+        ]
+      },
+      rules: {
+        commentContent: [
+          {
+            max: 300,
+            message: this.$t('personalCenter.collection.comment') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
+            trigger: 'blur'
+          }
+        ]
+      },
+      queryBase: {},
+      CommentQuery: {},
+      queryForm: {},
+      isPraise: false,
+      downLoadFileUrl: window._CONFIG.domianPreviewURL + '/sys/common/download',
+      downLoadImgUrl: window._CONFIG.domianWebImgURL + '/sys/common/download',
+      isCollect: false
+    }
+  },
+  mounted () {
+    this.administrators = false
+    this.userInfoQuery = this.userInfo()
+    if (this.userInfo().userRoleList && this.userInfo().userRoleList.length > 0) {
+      this.userInfo().userRoleList.forEach(res => {
+        if (res.roleCode === 'admin') {
+          this.administrators = true
+        }
+      })
+    }
+  },
+  methods: {
+    ...mapGetters(['userInfo']),
+    pdfPreview (fileQuery) {
+      const fileName = fileQuery.fileName
+      const index1 = fileName.lastIndexOf('.')
+      const index2 = fileName.length
+      const fileSuffix = fileName.substring(index1, index2)
+      if (fileSuffix === '.pdf') {
+        window.open('/pdf/web/viewer.html?file=' + encodeURIComponent('/jero-boot/sys/common/pdf/viewFile?id=' + fileQuery.id + '&userName=' + this.userInfo().username))
+      } else if (fileSuffix === '.docx' || fileSuffix === '.doc') {
+        const url = window._CONFIG.onlinePreviewDomainURL + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
+        window.open(url, '_blank')
+      } else if (fileSuffix === '.xlsx' || fileSuffix === '.xls') {
+        const url = window._CONFIG.onlinePreviewDomainURL + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
+        window.open(url, '_blank')
+      } else if (fileSuffix === '.png' || fileSuffix === '.jpeg' || fileSuffix === '.gif' || fileSuffix === '.jpg') {
+        const url = window._CONFIG.onlinePreviewDomainURL + '?url=' + Base64.encode(this.downLoadImgUrl + '/' + fileQuery.id + fileSuffix)
+        window.open(url, '_blank')
+      } else {
+        downloadFile('/sys/common/downLoadFile', fileQuery.fileName, { id: fileQuery.id })
+      }
+    },
+    deleteClick (item) {
+      const _this = this
+      this.$confirm({
+        content: _this.$t('confirmDelete'),
+        onOk () {
+          let url = ''
+          if (item.problemKnowledgeBaseId) {
+            url = '/problemKnowledgeBase/problemKnowledgeBaseCommentEO/deleteBatch'
+          } else {
+            url = '/project/problemKnowledgeBaseReplyEO/deleteBatch'
+          }
+          deleteAction(url, { ids: item.id }).then((res) => {
+            if (res.success) {
+              _this.$message.success(_this.$t('operationSuccessful'))
+              _this.releaseData()
+            } else {
+              _this.$message.warning(res.message)
+            }
+          })
+        }
+      })
+    },
+    download (item) {
+      downloadFile('/sys/common/downLoadFile', item.fileName, { id: item.id, userName: this.userInfo().username })
+    },
+    getData (val) {
+      this.queryBase = val
+      this.queryById()
+      this.releaseData()
+      this.viewAdd()
+    },
+    viewAdd () {
+      const query = {
+        problemKnowledgeBaseId: this.queryBase.id,
+        browsingUserId: this.userInfo().id
+      }
+      postAction('/problemKnowledgeBase/problemKnowledgeBaseBrowsingHistoryEO/add', query).then((res) => {
+      })
+    },
+    queryById () {
+      const query = {
+        id: this.queryBase.id
+      }
+      getAction('/problemKnowledgeBase/problemKnowledgeBaseEO/queryById', query).then((res) => {
+        if (res.success) {
+          this.queryForm = res.result || {}
+          this.queryForm = { ...this.queryForm }
+          if (this.queryForm.praiseEO && this.queryForm.praiseEO.praiseStatus === 'Praise') {
+            this.isPraise = true
+          } else {
+            this.isPraise = false
+          }
+          if (this.queryForm.collectEO && this.queryForm.collectEO.collectStatus === 'Collect') {
+            this.isCollect = true
+          } else {
+            this.isCollect = false
+          }
+        }
+      })
+    },
+    likeClick () {
+      let praiseStatus = ''
+      this.isPraise = !this.isPraise
+      if (this.isPraise) {
+        praiseStatus = 'Praise'
+        this.queryForm.praiseCount = this.queryForm.praiseCount + 1
+      } else {
+        praiseStatus = 'Cancel praise'
+        this.queryForm.praiseCount = this.queryForm.praiseCount - 1
+      }
+      const query = {
+        problemKnowledgeBaseId: this.queryBase.id,
+        praiseUserId: this.userInfo().id,
+        praiseStatus: praiseStatus,
+        id: this.queryForm.praiseEO ? this.queryForm.praiseEO.id : undefined
+      }
+      putAction('/problemKnowledgeBase/problemKnowledgeBasePraiseEO/edit', query).then((res) => {
+        if (!this.queryForm.praiseEO || !this.queryForm.praiseEO.id) {
+          this.queryById()
+        }
+      })
+    },
+    starClick () {
+      let collectStatus = ''
+      this.isCollect = !this.isCollect
+      if (this.isCollect) {
+        collectStatus = 'Collect'
+        this.queryForm.collectCount = this.queryForm.collectCount + 1
+      } else {
+        collectStatus = 'Cancel Collect'
+        this.queryForm.collectCount = this.queryForm.collectCount - 1
+      }
+      const query = {
+        problemKnowledgeBaseId: this.queryBase.id,
+        collectUserId: this.userInfo().id,
+        collectStatus: collectStatus,
+        id: this.queryForm.collectEO ? this.queryForm.collectEO.id : undefined
+      }
+      putAction('/problemKnowledgeBase/problemKnowledgeBaseCollectEO/edit', query).then((res) => {
+        if (!this.queryForm.collectEO || !this.queryForm.collectEO.id) {
+          this.queryById()
+        }
+      })
+    },
+    release () {
+      if (!this.formInline.commentContent) {
+        this.$message.warning(this.$t('pleaseEnter'))
+        return
+      }
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const query = {
+            problemKnowledgeBaseId: this.queryBase.id,
+            commentContent: this.formInline.commentContent,
+            commentUserId: this.userInfo().id
+          }
+          this.loading = true
+          postAction('/problemKnowledgeBase/problemKnowledgeBaseCommentEO/add', query).then((res) => {
+            if (res.success) {
+              this.$message.success(this.$t('operationSuccessful'))
+              this.$refs.ruleForm.clearValidate()
+              this.releaseData()
+              this.formInline = {}
+              this.loading = false
+            } else {
+              this.$message.warning(this.$t('operationFailed'))
+              this.loading = false
+            }
+          })
+        }
+      })
+    },
+    handleOkComment () {
+      this.$refs.ruleFormComment.validate(valid => {
+        if (valid) {
+          const query = {
+            commentId: this.CommentQuery.id,
+            replyContent: this.formInlineComment.replyContent
+          }
+          this.confirmLoading = true
+          postAction('/project/problemKnowledgeBaseReplyEO/add', query).then((res) => {
+            if (res.success) {
+              this.$message.success(this.$t('operationSuccessful'))
+              this.visibleComment = false
+              this.confirmLoading = false
+              this.releaseData()
+            } else {
+              this.confirmLoading = false
+              this.$message.success(this.$t('operationFailed'))
+            }
+          })
+        }
+      })
+    },
+    handleCancelComment () {
+      this.visibleComment = false
+    },
+    messageClick (val) {
+      this.CommentQuery = val
+      this.visibleComment = true
+      this.formInlineComment = {}
+      this.$nextTick(() => {
+        this.$refs.ruleFormComment.clearValidate()
+      })
+    },
+    releaseData () {
+      const query = {
+        problemKnowledgeBaseId: this.queryBase.id
+      }
+      getAction('/problemKnowledgeBase/problemKnowledgeBaseCommentEO/list', query).then((res) => {
+        if (res.success) {
+          this.releaseList = res.result || []
+        } else {
+          this.releaseList = []
+        }
+      })
+    },
+    back () {
+      this.$emit('problemKnowledgeBase')
+    },
+    forwardClick (row) {
+      this.queryForm = row
+      this.$refs.SelectedByRef.getPush()
+    },
+    detailClick (item, key) {
+      const newUrl = this.$router.resolve({
+        path: '/docManage/library/detail',
+        query: {
+          id: item.bussDocumentLibraryId.split(',')[key]
+        }
+      })
+      window.open(newUrl.href, '_blank')
+    },
+    SelectedByForm (userIds) {
+      const query = {
+        userIds: userIds,
+        departIds: userIds,
+        problemKnowledgeBaseId: this.queryForm.id,
+        problemKnowledgeBaseTitle: this.queryForm.title
+      }
+      postAction('/problemKnowledgeBase/problemKnowledgeBaseEO/forward', query).then((res) => {
+        if (res.success) {
+          this.$message.success(this.$t('operationSuccessful'))
+          this.$refs.SelectedByRef.visible = false
+          this.$refs.SelectedByRef.submitLoading = false
+        } else {
+          this.$message.warning(this.$t('operationFailed'))
+          this.$refs.SelectedByRef.submitLoading = false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.content-box {
+  width: 100%;
+  height: auto;
+  /*padding: 24px 24px 16px 24px;*/
+  /*box-sizing: border-box;*/
+  border: 1px solid #E6E6E9;
+  border-radius: 4px;
+  position: relative;
+  margin-bottom: 20px;
+
+  .content-box-top {
+    width: 100%;
+    height: auto;
+    padding: 20px 24px;
+    box-sizing: border-box;
+    background: #F7F7F8;
+    border-bottom: 1px solid #E6E6E9;
+    display: flex;
+    align-items: center;
+
+    .icon-left {
+      font-size: 16px;
+      margin-right: 6px;
+      font-weight: bold;
+    }
+
+    .content-box-top-text {
+      font-size: 18px;
+      font-weight: bold;
+      color: #040B29;
+      margin-left: 6px;
+    }
+
+    .content-box-top-color {
+      font-size: 12px;
+      font-weight: 400;
+      color: #00BEBE;
+      padding: 0 10px;
+      box-sizing: border-box;
+      display: inline-block;
+      height: 22px;
+      line-height: 22px;
+      background: #DBF2F3;
+      border-radius: 3px;
+      margin-left: 12px;
+      max-width: 120px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+
+  .content-box-content {
+    width: 100%;
+    height: auto;
+    margin-top: 16px;
+    padding: 0 24px;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+
+    .content-box-content-top {
+      font-size: 14px;
+      font-weight: 400;
+      color: #040B29;
+      /*display: -webkit-box;*/
+      /*text-overflow: ellipsis;*/
+      /*!*! autoprefixer: off *!*/
+      /*-webkit-box-orient: vertical;*/
+      /*-webkit-line-clamp: 2;*/
+      /*!*! autoprefixer: on;*!*/
+      /*text-justify: inter-ideograph;*/
+      /*overflow: hidden;*/
+      word-break: break-all;
+    }
+
+    .content-box-content-botton {
+      width: 100%;
+      margin-top: 10px;
+
+      .content-box-content-botton-text {
+        /*max-width: 200px;*/
+        /*min-width: 120px;*/
+        height: 32px;
+        display: inline-block;
+        text-align: center;
+        line-height: 32px;
+        /*padding: 0 10px;*/
+        /*background: #EFF1F3;*/
+        border-radius: 4px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 14px;
+        font-weight: 400;
+        color: #040B29;
+        margin-right: 20px;
+        cursor: pointer;
+
+        .file-text {
+          width: calc(100% - 30px);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          text-decoration: underline;
+          display: inline-block;
+          margin-right: 6px;
+          cursor: pointer;
+        }
+
+        .icon-text {
+          width: 24px;
+          font-size: 16px;
+          overflow: hidden;
+          margin-bottom: 9px;
+          color: #00B3BE;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .content-box-xian {
+    width: 100%;
+    position: absolute;
+    border-bottom: 1px #EFF1F3 solid;
+    left: 0;
+  }
+
+  .content-box-button {
+    width: 100%;
+    margin-top: 32px;
+    overflow: hidden;
+    padding: 0 24px 16px 24px;
+    border-bottom: 1px #EFF1F3 solid;
+
+    .content-box-button-left {
+      width: 50%;
+      float: left;
+
+      .content-box-button-text {
+        display: inline-block;
+        margin-right: 30px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #6F7385;
+        word-break: break-all;
+      }
+    }
+
+    .content-box-button-right {
+      width: 50%;
+      float: left;
+      text-align: right;
+
+      .content-box-button-text {
+        display: inline-block;
+        margin-left: 30px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #040B29;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .content-box-comment {
+    width: 100%;
+    padding: 0 24px;
+    box-sizing: border-box;
+
+    .content-box-comment-text {
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+      font-weight: 400;
+      color: #000F16;
+    }
+
+    .commentContent-text {
+      width: 100%;
+      margin-bottom: 20px;
+
+      .commentContent-header {
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        .commentContent-yuan {
+          display: inline-block;
+          width: 5px;
+          height: 5px;
+          background: #00BEBE;
+          border-radius: 50%;
+        }
+
+        .commentContent-title {
+          font-size: 14px;
+          margin-left: 8px;
+          font-weight: bold;
+          color: #040B29;
+        }
+
+        .commentContent-time {
+          font-size: 14px;
+          margin-left: 8px;
+          font-weight: 400;
+          color: #6F7385;
+        }
+      }
+
+      .commentContent-content {
+        width: 100%;
+        margin-left: 12px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #040B29;
+        margin-top: 6px;
+      }
+
+      .answer-text-index {
+        width: 100%;
+      }
+
+      .answer-text {
+        display: inline-block;
+        padding: 3px 14px;
+        background: #FFFFFF;
+        border: 1px solid #E6E6E9;
+        border-radius: 3px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #040B29;
+        margin-left: 12px;
+        margin-top: 6px;
+        cursor: pointer;
+      }
+
+      .commentContent-text-one {
+        width: 100%;
+        margin-left: 12px;
+        background: #F6F7FA;
+        border-radius: 4px;
+        padding: 20px 20px 0 20px;
+        box-sizing: border-box;
+      }
+
+      .commentContent-text-one:last-child {
+        padding-bottom: 20px;
+      }
+    }
+  }
+}
+
+.box-title-text {
+  line-height: 1.4;
+  display: flex;
+  /*align-items: center;*/
+}
+
+.title-text {
+  width: 88px;
+  text-align: right;
+  display: inline-block;
+  font-weight: 500;
+  font-size: 14px;
+  margin-right: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 42px;
+  line-height: 48px;
+  color: #000F16;
+}
+
+.box-input {
+  display: inline-block;
+  height: 38px;
+  width: 100%;
+}
+
+.itemModel {
+  width: 100%;
+  display: inline-block;
+  margin-bottom: 12px;
+}
+
+.header-btn {
+  height: 38px;
+  margin-left: 16px;
+}
+
+.icon-active {
+  color: #00B3BE !important;
+}
+
+.text {
+  min-width: 16px;
+  text-align: left;
+  display: inline-block;
+  margin-left: 3px;
+}
+
+.Required {
+  color: red;
+  margin-right: 4px;
+}
+</style>
diff --git a/src/views/system/tags/modules/AreaModal.vue b/src/views/system/tags/modules/AreaModal.vue
index bfeb3782..b29f8b4e 100644
--- a/src/views/system/tags/modules/AreaModal.vue
+++ b/src/views/system/tags/modules/AreaModal.vue
@@ -54,13 +54,13 @@
 
 <script>
 import '@assets/less/common.less'
-import { TagListMixin } from '../pages/TagListMixin'
 import AreaFormModal from './AreaFormModal'
 import { TagsTypeEnums } from '../../../../enums/commonEnums'
+import { SimpleListMixin } from '../../../../mixins/SimpleListMixin'
 
 export default {
   name: 'AreaModal',
-  mixins: [TagListMixin],
+  mixins: [SimpleListMixin],
   props: {
     type: {
       required: false,
diff --git a/src/views/system/tags/modules/TagContentDictListDrawer.vue b/src/views/system/tags/modules/TagContentDictListDrawer.vue
index 61967c11..11209048 100644
--- a/src/views/system/tags/modules/TagContentDictListDrawer.vue
+++ b/src/views/system/tags/modules/TagContentDictListDrawer.vue
@@ -73,13 +73,13 @@
 
 <script>
 import '@assets/less/common.less'
-import { TagListMixin } from '../pages/TagListMixin'
 import { ResizeColumnProvide, ResizeHeader } from '../../../../mixins/header'
 import TagContentDictItemModal from './TagContentDictItemModal'
+import { SimpleListMixin } from '../../../../mixins/SimpleListMixin'
 
 export default {
   name: 'TagContentDictListDrawer',
-  mixins: [TagListMixin, ResizeHeader, ResizeColumnProvide],
+  mixins: [SimpleListMixin, ResizeHeader, ResizeColumnProvide],
   components: {
     // JDictSelectTag
     TagContentDictItemModal
diff --git a/src/views/system/tags/pages/ClauseSplittingList.vue b/src/views/system/tags/pages/ClauseSplittingList.vue
index 3b2ba116..2d24dcab 100644
--- a/src/views/system/tags/pages/ClauseSplittingList.vue
+++ b/src/views/system/tags/pages/ClauseSplittingList.vue
@@ -63,13 +63,14 @@
 </template>
 
 <script>
-import { TagListMixin } from './TagListMixin'
+
 import { ResizeColumnProvide, ResizeHeader } from '../../../../mixins/header'
 import ClauseSplittingDrawer from '../modules/ClauseSplittingDrawer'
+import { SimpleListMixin } from '../../../../mixins/SimpleListMixin'
 
 export default {
   name: 'ClauseSplittingList',
-  mixins: [TagListMixin, ResizeHeader, ResizeColumnProvide],
+  mixins: [SimpleListMixin, ResizeHeader, ResizeColumnProvide],
   components: {
     ClauseSplittingDrawer
   },
diff --git a/src/views/system/tags/pages/StandardList.vue b/src/views/system/tags/pages/StandardList.vue
index 2256a25d..25c604b8 100644
--- a/src/views/system/tags/pages/StandardList.vue
+++ b/src/views/system/tags/pages/StandardList.vue
@@ -1,6 +1,7 @@
 <!--  国内法规-->
 <template>
   <div>
+    {{$props}}--{{type}}
     <div class="table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
@@ -82,16 +83,16 @@
 
 <script>
 import { getShowAreaData } from '../../../../api/api'
-import { TagListMixin } from './TagListMixin'
 import { ResizeColumnProvide, ResizeHeader } from '../../../../mixins/header'
 
 import '@assets/less/common.less'
 import StandardDrawer from '../modules/StandardDrawer'
 import AreaModal from '../modules/AreaModal'
+import { SimpleListMixin } from '../../../../mixins/SimpleListMixin'
 
 export default {
   name: 'StandardList',
-  mixins: [TagListMixin, ResizeHeader, ResizeColumnProvide],
+  mixins: [SimpleListMixin, ResizeHeader, ResizeColumnProvide],
   components: {
     StandardDrawer,
     AreaModal
@@ -107,7 +108,11 @@ export default {
       // 展示区域-下拉框的数据
       areasArr: [],
       // 混入中查询等相关接口
-      url: {},
+      url: {
+        list: 'tag/onlCgformTag/page',
+        delete: 'tag/onlCgformTag/logicDelete',
+        deleteBatch: 'tag/onlCgformTag/logicDeleteBatch'
+      },
       filters: {
         isModel: this.type
       },
diff --git a/src/views/system/tags/pages/TagContent.vue b/src/views/system/tags/pages/TagContent.vue
index 1583cae2..72380a48 100644
--- a/src/views/system/tags/pages/TagContent.vue
+++ b/src/views/system/tags/pages/TagContent.vue
@@ -77,15 +77,15 @@
 
 <script>
 import '@assets/less/common.less'
-import { TagListMixin } from './TagListMixin'
 import { ResizeColumnProvide, ResizeHeader } from '../../../../mixins/header'
 import TagContentModal from '../modules/TagContentModal'
 import TagContentDictListDrawer from '../modules/TagContentDictListDrawer'
 import JDictSelectTag from '../../../../components/dict/JDictSelectTag'
+import { SimpleListMixin } from '../../../../mixins/SimpleListMixin'
 
 export default {
   name: 'TagContent',
-  mixins: [TagListMixin, ResizeHeader, ResizeColumnProvide],
+  mixins: [SimpleListMixin, ResizeHeader, ResizeColumnProvide],
   components: {
     TagContentModal,
     TagContentDictListDrawer,
diff --git a/src/views/system/tags/pages/TagItem.vue b/src/views/system/tags/pages/TagItem.vue
index 60b32e87..774c8447 100644
--- a/src/views/system/tags/pages/TagItem.vue
+++ b/src/views/system/tags/pages/TagItem.vue
@@ -4,7 +4,6 @@
     <a-tabs :default-active-key="1" @change="callbackTab">
       <a-tab-pane v-for='item in tabArr' :key="item.value" :tab="item.showText">
         <component :is='item.comp' :type='item.value' :property="item.props"></component>
-        <!--<tag-table v-if="!spinning" :type='item.value'></tag-table>-->
       </a-tab-pane>
     </a-tabs>
   </a-spin>