diff --git a/jero-web/src/assets/dianzan.png b/jero-web/src/assets/dianzan.png
new file mode 100644
index 000000000..cdd7f72c3
Binary files /dev/null and b/jero-web/src/assets/dianzan.png differ
diff --git a/jero-web/src/assets/icon_contact.png b/jero-web/src/assets/icon_contact.png
new file mode 100644
index 000000000..716b8e5a1
Binary files /dev/null and b/jero-web/src/assets/icon_contact.png differ
diff --git a/jero-web/src/assets/icon_kan.png b/jero-web/src/assets/icon_kan.png
new file mode 100644
index 000000000..b9d4003e8
Binary files /dev/null and b/jero-web/src/assets/icon_kan.png differ
diff --git a/jero-web/src/assets/icon_reply.png b/jero-web/src/assets/icon_reply.png
new file mode 100644
index 000000000..da2f572a8
Binary files /dev/null and b/jero-web/src/assets/icon_reply.png differ
diff --git a/jero-web/src/assets/icon_rubbish.png b/jero-web/src/assets/icon_rubbish.png
new file mode 100644
index 000000000..17db3363c
Binary files /dev/null and b/jero-web/src/assets/icon_rubbish.png differ
diff --git a/jero-web/src/assets/icon_shoucang.png b/jero-web/src/assets/icon_shoucang.png
new file mode 100644
index 000000000..62d5675fa
Binary files /dev/null and b/jero-web/src/assets/icon_shoucang.png differ
diff --git a/jero-web/src/assets/icon_time.png b/jero-web/src/assets/icon_time.png
new file mode 100644
index 000000000..6c3109141
Binary files /dev/null and b/jero-web/src/assets/icon_time.png differ
diff --git a/jero-web/src/assets/icon_zan.png b/jero-web/src/assets/icon_zan.png
new file mode 100644
index 000000000..52d7783ac
Binary files /dev/null and b/jero-web/src/assets/icon_zan.png differ
diff --git a/jero-web/src/assets/xuanzhong.png b/jero-web/src/assets/xuanzhong.png
new file mode 100644
index 000000000..1a80db8ae
Binary files /dev/null and b/jero-web/src/assets/xuanzhong.png differ
diff --git a/jero-web/src/common/lang/en-us.js b/jero-web/src/common/lang/en-us.js
index 16de61ccf..3385d6548 100644
--- a/jero-web/src/common/lang/en-us.js
+++ b/jero-web/src/common/lang/en-us.js
@@ -1871,4 +1871,6 @@ module.exports = {
   phoneReset:'Reset',
   noMore:'No More',
   loading:'Loading...',
+  howAboutComment:'How about a comment',
+  send:'Send',
 }
\ No newline at end of file
diff --git a/jero-web/src/common/lang/zh-cn.js b/jero-web/src/common/lang/zh-cn.js
index 4b33317d2..cd0d1cca7 100644
--- a/jero-web/src/common/lang/zh-cn.js
+++ b/jero-web/src/common/lang/zh-cn.js
@@ -1972,4 +1972,6 @@ module.exports = {
   phoneReset:'重置',
   noMore:'没有更多了',
   loading:'加载中...',
+  howAboutComment:'说点什么评论一下吧',
+  send:'发送',
 }
\ No newline at end of file
diff --git a/jero-web/src/views/phoneView/problemKnowledgeBase.vue b/jero-web/src/views/phoneView/problemKnowledgeBase.vue
index 2c7901e4a..2df98537d 100644
--- a/jero-web/src/views/phoneView/problemKnowledgeBase.vue
+++ b/jero-web/src/views/phoneView/problemKnowledgeBase.vue
@@ -3,46 +3,34 @@
     <div class="header-search">
       <van-icon @click="iconClick" class="icon" name="arrow-left"/>
       <span class="header-search-text">
-           线控底盘技术发展与标准化需求研究报告
+           {{queryForm.title}}
         </span>
     </div>
-    <div class="header-buttom">
-      <div class="header-buttom-text">
-        Chassis
-      </div>
-      <div class="header-buttom-text">
-        Chassis
-      </div>
-      <div class="header-buttom-text">
-        Chassis
+
+    <div class="header-buttom" v-if="queryForm.problemTypeNameList && queryForm.problemTypeNameList.length > 0">
+      <div class="header-buttom-text" v-for="val in queryForm.problemTypeNameList">
+        {{val}}
       </div>
     </div>
+
     <div class="problemName">
       <div class="problemNameLeft">
         <img src="~@/assets/icon_contact.png" class="problemNameLeftImg" alt="">
-        <span class="problemNameLeftText">linda.zhao</span>
+        <span class="problemNameLeftText">{{queryForm.createBy}}</span>
       </div>
       <div class="problemNameLeft">
         <img src="~@/assets/icon_time.png" class="problemNameLeftImg" alt="">
-        <span class="problemNameLeftText">2023-03-29 17:25:05</span>
+        <span class="problemNameLeftText">{{queryForm.createTime}}</span>
       </div>
     </div>
-    <div class="content">
-      2021年10月，中国汽车技术研究中心有限公司中国汽车标准化研究院联合行业各方力量，
-      成立了包括各主机厂、零部件制造商、检测机构、高校等单位在内的“线控底盘技术发展与标准化需求”研究组。
-      从线控转向、线控制动、线控悬架和线控驱动4 个领域，
-      围绕技术发展历程、技术路线与技术方案、技术需求、应用现状、测试验证、国内外标准分析和标准化需求等方面开展研究撰写并完成了研究报告，
-      为后续线控底盘相关技术研发、标准制定和行业管理提供支撑和借鉴。NIO作为“线控转向”领域的牵头单位，参与并完成对应内容。
+
+    <div class="content" v-html="queryForm.content">
+
     </div>
-    <div class="contentFile">
-      <div class="contentFile-text">
-        线控底盘技术发展与标准化需求研究报告.pdf
-      </div>
-      <div class="contentFile-text">
-        线控底盘技术发展与标准化需求研究报告.pdf
-      </div>
-      <div class="contentFile-text">
-        线控底盘技术发展与标准化需求研究报告.pdf
+
+    <div class="contentFile" v-if="queryForm.accessoryFileNameList && queryForm.accessoryFileNameList.length > 0">
+      <div class="contentFile-text" v-for="item in queryForm.accessoryFileNameList">
+        {{item.fileName}}
       </div>
     </div>
 
@@ -50,138 +38,331 @@
       <div class="iconTextLeft">
         <img src="~@/assets/icon_kan.png" alt="">
         <span class="iconTextLeft-text">
-           123
+           {{queryForm.browsingHistoryCount}}
         </span>
       </div>
-      <div class="iconTextLeft">
-        <img src="~@/assets/icon_zan.png" alt="">
-        <span class="iconTextLeft-text">
-           123
+      <div class="iconTextLeft" @click="starClick()">
+        <img v-if="!this.isCollect" src="~@/assets/icon_zan.png" alt="">
+        <img v-else src="~@/assets/dianzan.png" alt="">
+        <span class="iconTextLeft-text" :class="{'icon-active':this.isCollect}">
+           {{queryForm.collectCount}}
         </span>
       </div>
-      <div class="iconTextLeft">
-        <img src="~@/assets/icon_shoucang.png" alt="">
-        <span class="iconTextLeft-text">
-           123
+      <div class="iconTextLeft" @click="likeClick()">
+        <img v-if="!this.isPraise" src="~@/assets/icon_shoucang.png" alt="">
+        <img v-else src="~@/assets/xuanzhong.png" alt="">
+        <span class="iconTextLeft-text" :class="{'icon-active':this.isPraise}">
+           {{queryForm.praiseCount}}
         </span>
       </div>
     </div>
 
     <div class="comment">
-      <div class="comment-text">
-        说点什么评论一下吧～
+      <div class="comment-text" @click="howAboutCommentClick">
+        {{$t('howAboutComment')}}～
       </div>
 
-      <div class="comment-content">
+      <div class="comment-content" v-for="(item,index) in releaseList" :key="index">
         <div class="comment-content-text">
           <div class="comment-content-text-left">
             <span class="comment-content-text-yuan"></span>
-            linda.zhao
+            {{item.createBy}}
           </div>
           <div class="comment-content-text-right">
-            <span>2023-05-18 10:51:28</span>
+            <span>{{item.createTime}}</span>
           </div>
         </div>
         <div class="comment-text-box">
-          这里是评论内容这里是评论内容这里是评论内容这里是评论内容这里是评论内容
+          {{item.commentContent}}
         </div>
         <div class="comment-text-button">
-          <div class="commentRight">
+          <div class="commentRight" @click="messageClick(item)">
             <img src="~@/assets/icon_reply.png" alt="">
-            <span>回复</span>
+            <span>{{$t('answer')}}</span>
           </div>
-          <div class="commentRight">
+          <div class="commentRight" @click="deleteClick(item)">
             <img src="~@/assets/icon_rubbish.png" alt="">
-            <span>删除</span>
+            <span>{{$t('delete')}}</span>
           </div>
         </div>
-        <div class="reply-box">
-          <div class="comment-content-text">
-            <div class="comment-content-text-left">
-              <span class="comment-content-text-yuan"></span>
-              linda.zhao
+        <div style="margin-top: 0.3rem"
+             v-if="item.problemKnowledgeBaseCommentVOList && item.problemKnowledgeBaseCommentVOList.length > 0">
+          <div class="reply-box" v-for="(val,index1) in item.problemKnowledgeBaseCommentVOList">
+            <div class="comment-content-text">
+              <div class="comment-content-text-left">
+                <span class="comment-content-text-yuan"></span>
+                {{val.createBy}}
+              </div>
+              <div class="comment-content-text-right">
+                <span>{{val.createTime}}</span>
+              </div>
             </div>
-            <div class="comment-content-text-right">
-              <span>2023-05-18 10:51:28</span>
+            <div class="comment-text-box">
+              {{val.commentContent}}
             </div>
-          </div>
-          <div class="comment-text-box">
-            这里是评论内容这里是评论内容这里是评论内容这里是评论内容这里是评论内容
-          </div>
-          <div class="comment-text-button">
-            <div class="commentRight">
-              <img src="~@/assets/icon_reply.png" alt="">
-            </div>
-            <div class="commentRight">
-              <img src="~@/assets/icon_rubbish.png" alt="">
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="comment-content">
-        <div class="comment-content-text">
-          <div class="comment-content-text-left">
-            <span class="comment-content-text-yuan"></span>
-            linda.zhao
-          </div>
-          <div class="comment-content-text-right">
-            <span>2023-05-18 10:51:28</span>
-          </div>
-        </div>
-        <div class="comment-text-box">
-          这里是评论内容这里是评论内容这里是评论内容这里是评论内容这里是评论内容
-        </div>
-        <div class="comment-text-button">
-          <div class="commentRight">
-            <img src="~@/assets/icon_reply.png" alt="">
-            <span>回复</span>
-          </div>
-          <div class="commentRight">
-            <img src="~@/assets/icon_rubbish.png" alt="">
-            <span>删除</span>
-          </div>
-        </div>
-        <div class="reply-box">
-          <div class="comment-content-text">
-            <div class="comment-content-text-left">
-              <span class="comment-content-text-yuan"></span>
-              linda.zhao
-            </div>
-            <div class="comment-content-text-right">
-              <span>2023-05-18 10:51:28</span>
-            </div>
-          </div>
-          <div class="comment-text-box">
-            这里是评论内容这里是评论内容这里是评论内容这里是评论内容这里是评论内容
-          </div>
-          <div class="comment-text-button">
-            <div class="commentRight">
-              <img src="~@/assets/icon_reply.png" alt="">
-            </div>
-            <div class="commentRight">
-              <img src="~@/assets/icon_rubbish.png" alt="">
+            <div class="comment-text-button-one">
+              <div class="commentRight" @click="messageClick(item)">
+                <img src="~@/assets/icon_reply.png" alt="">
+              </div>
+              <div class="commentRight" @click="deleteClick(val)">
+                <img src="~@/assets/icon_rubbish.png" alt="">
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+
+    <div class="input-text" v-if="isDisplay">
+      <van-cell-group>
+        <van-field rows="1"
+                   class="sendInput"
+                   autosize
+                   type="textarea"
+                   v-model="sendValue"
+                   placeholder="说点什么吧"/>
+        <van-button type="primary" :disabled="sendDisplay" @click="sendClick">{{$t('send')}}</van-button>
+      </van-cell-group>
+    </div>
   </div>
 </template>
 
 <script>
+  import { getAction, postAction, putAction } from '@/api/manage'
+  import { mapGetters } from 'vuex'
+  import { deleteAction } from '../../api/manage'
+  import { Dialog, Toast } from 'vant'
+
   export default {
     name: 'phoneProblemKnowledgeBase',
     data() {
-      return {}
+      return {
+        url: {
+          queryById: '/problemKnowledgeBase/problemKnowledgeBaseEO/queryById'
+        },
+        queryForm: {},
+        releaseList: [],
+        isCollect: false,
+        isPraise: false,
+        sendValue: '',
+        isDisplay: false,
+        commentQuery: {},
+        sendDisplay: true,
+        num: 1
+      }
     },
     mounted() {
       document.title = 'NIO GRP'
+      window.addEventListener('scroll', this.scrolling)
+      window.addEventListener('mousedown', this.handleonmousedown)
+      this.getQueryBy()
+      this.releaseData()
+    },
+    watch: {
+      sendValue: function(res) {
+        if (!res) {
+          this.sendDisplay = true
+        } else {
+          this.sendDisplay = false
+        }
+      }
+    },
+    destroyed() {
+      // 离开该页面需要移除这个监听的事件，不然会报错
+      window.removeEventListener('scroll', this.handleScroll)
+      window.removeEventListener('mousedown', this.handleonmousedown)
     },
     methods: {
+      ...mapGetters(['userInfo']),
+      scrolling() {
+        this.isDisplay = false
+      },
+      handleonmousedown(e) {
+        if (e.srcElement.type == 'textarea' || e.target.type == 'textarea') {
+
+        } else if (e.target.innerText == this.$t('send')) {
+
+        } else {
+          this.isDisplay = false
+        }
+      },
       iconClick() {
         this.$router.go(-1)
+      },
+      getQueryBy() {
+        let query = {
+          id: '1bbe56abe27b410998365f20e6023e38'
+        }
+        getAction(this.url.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() {
+        if (this.isDisplay) {
+          this.isDisplay = false
+          return
+        }
+        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
+        }
+        let query = {
+          problemKnowledgeBaseId: this.queryForm.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() {
+        if (this.isDisplay) {
+          this.isDisplay = false
+          return
+        }
+        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
+        }
+        let query = {
+          problemKnowledgeBaseId: this.queryForm.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()
+          }
+        })
+      },
+      releaseData() {
+        let query = {
+          problemKnowledgeBaseId: '1bbe56abe27b410998365f20e6023e38'
+        }
+        getAction('/problemKnowledgeBase/problemKnowledgeBaseCommentEO/list', query).then((res) => {
+          if (res.success) {
+            this.releaseList = res.result || []
+          } else {
+            this.releaseList = []
+          }
+        })
+      },
+      deleteClick(item) {
+        let _this = this
+        if (this.isDisplay) {
+          this.isDisplay = false
+          return
+        }
+
+        function beforeClose(action, done) {
+          if (action === 'confirm') {
+            let url = ''
+            if (item.problemKnowledgeBaseId) {
+              url = '/problemKnowledgeBase/problemKnowledgeBaseCommentEO/deleteBatch'
+            } else {
+              url = '/project/problemKnowledgeBaseReplyEO/deleteBatch'
+            }
+            deleteAction(url, { ids: item.id }).then((res) => {
+              if (res.success) {
+                Toast(_this.$t('OperationSuccessful'))
+                _this.releaseData()
+                done()
+              } else {
+                _this.$message.warning(res.message)
+              }
+            })
+          } else {
+            done()
+          }
+        }
+
+        Dialog.confirm({
+          message: this.$t('confirmDeletion') + '?',
+          beforeClose
+        })
+      },
+      howAboutCommentClick() {
+        this.isDisplay = true
+        this.num = 1
+        this.$nextTick(() => {
+          let vanField = document.querySelectorAll('.sendInput .van-field__control')[0]
+          vanField.focus()
+        })
+      },
+      messageClick(item) {
+        this.isDisplay = true
+        this.num = 2
+        this.commentQuery = item
+        this.$nextTick(() => {
+          let vanField = document.querySelectorAll('.sendInput .van-field__control')[0]
+          vanField.focus()
+        })
+      },
+      sendClick() {
+        if (this.num == 1) {
+          let query = {
+            problemKnowledgeBaseId: this.queryForm.id,
+            commentContent: this.sendValue,
+            commentUserId: this.userInfo().id
+          }
+          postAction('/problemKnowledgeBase/problemKnowledgeBaseCommentEO/add', query).then((res) => {
+            if (res.success) {
+              Toast(this.$t('OperationSuccessful'))
+              this.releaseData()
+              this.sendValue = ''
+              this.isDisplay = false
+            } else {
+              Toast(this.$t('operationFailed'))
+            }
+          })
+        } else {
+          this.handleComment()
+        }
+      },
+      handleComment() {
+        let query = {
+          commentId: this.commentQuery.id,
+          replyContent: this.sendValue
+        }
+        postAction('/project/problemKnowledgeBaseReplyEO/add', query).then((res) => {
+          if (res.success) {
+            Toast(this.$t('OperationSuccessful'))
+            this.releaseData()
+            this.sendValue = ''
+            this.isDisplay = false
+          } else {
+            Toast(this.$t('operationFailed'))
+          }
+        })
       }
+
     }
   }
 </script>
@@ -192,6 +373,11 @@
     position: relative;
   }
 
+  .box-showModal {
+    position: absolute;
+    height: 100%;
+  }
+
   .header-search {
     width: 100%;
     display: flex;
@@ -376,6 +562,15 @@
     justify-content: flex-end;
     text-align: right;
     margin-top: 0.3rem;
+    /*margin-bottom: 0.3rem;*/
+  }
+
+  .comment-text-button-one {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    text-align: right;
+    margin-top: 0.3rem;
   }
 
   .commentRight {
@@ -398,9 +593,53 @@
 
   .reply-box {
     background: #F6F7F8;
-    border-radius: 0.16rem;
-    padding: 0.4rem;
-    margin-top: 0.3rem;
+    /*border-radius: 0.16rem;*/
+    padding: 0.4rem 0.4rem 0 0.4rem;
     margin-left: 0.5rem;
   }
+
+  .reply-box:last-child {
+    padding-bottom: 0.4rem;
+    border-bottom-left-radius: 0.16rem;
+    border-bottom-right-radius: 0.16rem;
+  }
+
+  .reply-box:first-child {
+    border-top-left-radius: 0.16rem;
+    border-top-right-radius: 0.16rem;
+  }
+
+  .icon-active {
+    color: #00B3BE !important;
+  }
+
+  .input-text {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: #F6F7FA;
+    padding: 0.2rem 0.4rem;
+  }
+
+  .input-text .van-cell-group {
+    display: flex;
+    background: transparent;
+    align-items: center;
+  }
+
+  .input-text .van-cell {
+    width: calc(100% - 1.8rem);
+    display: inline-block;
+    border-radius: 0.6rem;
+    margin-right: 0.3rem;
+  }
+
+  .input-text .van-button {
+    width: 1.8rem;
+    height: 1rem;
+    border-radius: 0.4rem;
+    background: #01A0AC;
+    border: none;
+  }
 </style>
\ No newline at end of file