From e521a5b430c4fdf4e0a30e61c3ec5798403af99a Mon Sep 17 00:00:00 2001
From: sunFlower <787203167@qq.com>
Date: Thu, 24 Nov 2022 17:48:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=88=91=E7=9A=84=E6=94=B6?=
 =?UTF-8?q?=E8=97=8F=E7=9A=84=E9=97=AE=E9=A2=98=E7=9F=A5=E8=AF=86=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/problemKnowledgeBaseList.vue   |   8 +-
 .../components/problemKnowledgeBaseList.vue   | 663 +++++++++++----
 .../problemKnowledgeBaseListView.vue          | 790 ++++++++++++++++++
 3 files changed, 1289 insertions(+), 172 deletions(-)
 create mode 100644 jero-web/src/views/documentManage/collection/components/problemKnowledgeBaseListView.vue

diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseList.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseList.vue
index f25fcd950..9c4249f90 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseList.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/problemKnowledgeBaseList.vue
@@ -710,13 +710,13 @@
           /*max-width: 198px;*/
           height: 32px;
           display: inline-block;
-          text-align: center;
+          text-align: left;
           line-height: 32px;
           /*background: #EFF1F3;*/
           border-radius: 4px;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
+          /*text-overflow: ellipsis;*/
+          /*white-space: nowrap;*/
+          /*overflow: hidden;*/
           font-size: 14px;
           font-weight: 400;
           color: #040B29;
diff --git a/jero-web/src/views/documentManage/collection/components/problemKnowledgeBaseList.vue b/jero-web/src/views/documentManage/collection/components/problemKnowledgeBaseList.vue
index bdb7e2f03..c9951862d 100644
--- a/jero-web/src/views/documentManage/collection/components/problemKnowledgeBaseList.vue
+++ b/jero-web/src/views/documentManage/collection/components/problemKnowledgeBaseList.vue
@@ -1,145 +1,217 @@
 <template>
-  <div class="box">
-    <div class="collection-search-wrapper">
-      <div class="collection-search-header">
-        <div class="table-page-search-wrapper">
-          <a-form layout="inline" @keyup.enter.native="searchQuery">
-            <a-row :gutter="24">
-              <a-col :md="6" :sm="8">
-                <div class="box-title-text">
-                  <div class="title-text" :title="$t('title')">
-                    <span>{{$t('title')}}</span>
-                  </div>
-                  <j-input class="box-input" :placeholder="$t('PleaseEnter')+$t('title')"
-                           v-model="queryParams.title"></j-input>
-                </div>
-              </a-col>
-              <span style="float: right;overflow: hidden;margin-right: 11px"
-                    class="table-page-search-submitButtons">
-               <a-col :md="6" :sm="24">
-                  <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
-                  <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
-               </a-col>
-                 </span>
-            </a-row>
-          </a-form>
+  <div>
+    <div class="search-detail-wrap">
+      <div class="box-content-left">
+        <div class="classification">{{$t('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">
+          <!--          <div class="title-text" :title="$t('searchContent')">-->
+          <!--            <span>{{$t('searchContent')}}</span>-->
+          <!--          </div>-->
+          <a-input-search class="box-input" :placeholder="$t('PleaseEnter')+$t('searchContent')"
+                          allowClear
+                          @search="onSearch"
+                          v-model="searchStr"></a-input-search>
         </div>
-      </div>
+      </a-form>
     </div>
-    <div class="table-operator">
-      <div class="operator-text" @click="handleBatCancel">
-        <a-icon type="delete"/>
-        {{ $t('BatchCancel') }}
-      </div>
-    </div>
-    <div class="box-content">
-      <a-checkbox-group style="width: 100%" :defaultChecked="checkboxText"
-                        @change="checkboxTextChange" v-model="checkboxText">
-        <div v-for="item in conList" :key="item.collectEO.id">
-          <div style="margin-bottom: 10px;position: relative">
-            <a-checkbox :value="item.collectEO.id" class="checkbox-left"></a-checkbox>
-            <div class="text-text-right"
-                 @click="checkedClick(item)"
-                 :class="{ 'null-input':item.checked }">
-              <div class="text-header">
-                <a-tooltip placement="topLeft" overlayClassName="tooltip-index" :mouseEnterDelay="0.5">
-                  <template slot="title">
-                    <span v-html="item.title"></span>
-                  </template>
-                  <div class="text-header-text" style="cursor: pointer" v-html="item.title">
-
-                  </div>
-                </a-tooltip>
-              </div>
-              <!--                    <a-tooltip placement="topLeft" overlayClassName="tooltip-index" :mouseEnterDelay="0.5">-->
-              <!--                      <template slot="title">-->
-              <!--                        <span v-html="item.content"></span>-->
-              <!--                      </template>-->
-              <div class="text-content" v-html="item.content"
-              >
-              </div>
-              <!--                    </a-tooltip>-->
+    <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>
+            <span class="content-box-top-color"
+                  v-if="item.problemTypeNameList && item.problemTypeNameList.length > 0"
+                  :title="val"
+                  v-for="val in item.problemTypeNameList">
+                {{val}}
+            </span>
+          </div>
+          <div class="content-box-content">
+            <div class="content-box-content-top" @click="detailClcik(item)"
+                 v-html="item.contentOne">
             </div>
-            <div @click="CancelCollectionClick(item)"
-                 :title="$t('CancelCollection')"
-                 class="text-text-right-text">{{$t('CancelCollection')}}
+            <div class="content-box-content-botton">
+              <div class="content-box-content-botton-text"
+                   v-if="item.accessoryFileNameList && item.accessoryFileNameList.length > 0"
+                   :title="val.fileName"
+                   v-for="val in item.accessoryFileNameList">
+                <span @click="fileClick(val)">{{val.fileName}}</span>
+              </div>
+            </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('CancelCollection')}}
+              </div>
             </div>
           </div>
         </div>
-      </a-checkbox-group>
-    </div>
-    <div class="page" v-if="conList && 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 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>
+    <problemKnowledgeBaseListView ref="problemKnowledgeBaseListViewRef"
+                                  @problemKnowledgeBase="problemKnowledgeBase" v-else/>
     <JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
   </div>
 </template>
 
 <script>
   import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
+  import problemKnowledgeBaseListView from './problemKnowledgeBaseListView'
   import { mapGetters } from 'vuex'
+  import { Base64 } from 'js-base64'
 
   export default {
     name: 'problemKnowledgeBaseList',
+    components: {
+      problemKnowledgeBaseListView
+    },
     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: {
-      checkboxText: function(value) {
-        this.conList.forEach(val => {
-          val.checked = false
-        })
-        if (value.length > 0) {
-          this.conList.forEach(val => {
-            value.forEach(res => {
-              if (res === val.collectEO.id) {
-                val.checked = true
-              }
-            })
-          })
-        }
-        this.conList = [...this.conList]
-      }
-    },
+    watch: {},
     methods: {
       ...mapGetters(['userInfo']),
-      searchQuery() {
+      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()
       },
-      checkboxTextChange(value) {
-        this.checkboxText = JSON.parse(JSON.stringify(value))
-        if (this.checkboxList && this.checkboxList.length > 0) {
-          this.checkboxList.forEach(res => {
-            this.checkboxText.push(res)
-          })
+      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.problemKnowledgeBaseListViewRef.getData(JSON.parse(JSON.stringify(val)))
+        })
+      },
+      fileClick(fileQuery) {
+        let fileName = fileQuery.fileName
+        let index1 = fileName.lastIndexOf('.')
+        let index2 = fileName.length
+        let 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') {
+          let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
+          window.open(url, '_blank')
+        } else if (fileSuffix == '.xlsx' || fileSuffix == '.xls') {
+          let 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') {
+          let 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 = {}
@@ -178,7 +250,7 @@
           this.$message.warning(this.$t('selectLeastOne'))
         }
       },
-      CancelCollectionClick(val) {
+      cancelCollection(val) {
         let _this = this
         this.$confirm({
           content: _this.$t('confirmCancelCollection'),
@@ -209,11 +281,13 @@
         return words
       },
       getList() {
+        let selectedTags = JSON.parse(JSON.stringify(this.selectedTags))
         let query = {
           pageNo: this.pageNo,
           pageSize: this.pageSize,
           createBy: this.userInfo().username,
-          ...this.queryParams
+          searchStr: this.searchStr,
+          problemTypes: selectedTags.join(','),
         }
         this.loading = true
         getAction(this.url.getInfoList, query).then((res) => {
@@ -253,29 +327,26 @@
   }
 </script>
 
-<style>
-  .checkbox-left .ant-checkbox-inner {
-    width: 18px !important;
-    height: 18px !important;
-    line-height: 18px !important;
+<style scoped lang="less">
+  .search-detail-wrap {
+    width: 100%;
+    overflow: hidden;
+    /*margin: 0 auto;*/
   }
 
-  .tooltip-index {
-    max-width: calc(100% - 300px) !important;
-  }
-</style>
-<style lang="less" scoped>
-  @import '~@assets/less/common.less';
-
   .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: 43px;
+    width: 110px;
     color: #000F16;
     display: inline-block;
     font-weight: 500;
@@ -289,15 +360,88 @@
   }
 
   .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;
@@ -307,50 +451,45 @@
   }
 
   .text-text-right {
-    width: calc(100% - 152px);
-    display: inline-block;
-    padding: 19px 28px;
+    padding: 19px 20px;
     box-sizing: border-box;
-    margin-left: 38px;
-    cursor: pointer;
-  }
-
-  .text-text-right-text {
-    width: 110px;
-    display: inline-block;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    word-break: break-word;
-    text-align: center;
-    padding: 0 6px;
-    box-sizing: border-box;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #00B3BE;
-    cursor: pointer;
+    /*margin-left: 38px;*/
   }
 
   .null-input {
     background-color: #F2F4F8;
   }
 
+  .search-text-title {
+    margin-bottom: 22px;
+  }
+
   .text-header {
     margin-bottom: 11px;
-    width: 100%;
 
     .text-header-text {
+      margin-right: 52px;
       font-size: 16px;
       font-weight: bold;
       color: #040B29;
-      width: 100%;
+      display: inline-block;
+      max-width: calc(100% - 180px);
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
-      word-break: break-word;
     }
+
+    /*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 {
@@ -366,12 +505,7 @@
     -webkit-line-clamp: 4;
     /*! autoprefixer: on;*/
     text-justify: inter-ideograph;
-    word-break: break-all
-  }
-
-  .box-content {
-    padding: 0 0 0 8px;
-    box-sizing: border-box;
+    word-break: break-all;
   }
 
   .page {
@@ -379,20 +513,17 @@
     margin-top: 20px;
   }
 
-  .text-operation {
-    margin-right: 8px;
-  }
-
-  .submitButtons {
-    text-align: center;
-  }
-
-  .fileText {
+  .noData {
     width: 100%;
-    cursor: pointer;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    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 {
@@ -400,21 +531,217 @@
     padding: 0;
   }
 
-  .selectText {
+  ::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;
-    word-break: break-word;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
   }
 
-  ::v-deep .ant-select-selection--single {
-    height: 32px !important;
-  }
-
-  ::v-deep .ant-select-selection__rendered {
-    height: 32px !important;
-    line-height: 32px !important;
+  .box-content-left .ant-tag-checkable-checked {
+    background: #00B3BE;
+    border: 1px solid #00BEBE;
+    color: #fff;
   }
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/documentManage/collection/components/problemKnowledgeBaseListView.vue b/jero-web/src/views/documentManage/collection/components/problemKnowledgeBaseListView.vue
new file mode 100644
index 000000000..4fd6b4a18
--- /dev/null
+++ b/jero-web/src/views/documentManage/collection/components/problemKnowledgeBaseListView.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>
+        <span class="content-box-top-color"
+              v-if="queryForm.problemTypeNameList && queryForm.problemTypeNameList.length > 0"
+              :title="val"
+              v-for="val in queryForm.problemTypeNameList">
+                {{val}}
+        </span>
+      </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">
+          <div class="content-box-content-botton-text"
+               v-if="queryForm.accessoryFileNameList && queryForm.accessoryFileNameList.length > 0"
+               v-for="item in queryForm.accessoryFileNameList">
+            <span @click="pdfPreview(item)" :title="item.fileName" class="file-text">{{item.fileName}}</span>
+            <a-icon @click="download(item)" type="download" class="icon-text"/>
+          </div>
+        </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(',')">
+              <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('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('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('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('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('answer')}}
+            </span>
+            <span class="answer-text"
+                  v-if="administrators || item.createBy == userInfoQuery.username"
+                  @click="deleteClick(item)">
+              {{$t('delete')}}
+            </span>
+          </div>
+          <div class="commentContent-text-one" v-for="(val,index1) in item.problemKnowledgeBaseCommentVOList"
+               v-if="item.problemKnowledgeBaseCommentVOList && item.problemKnowledgeBaseCommentVOList.length > 0">
+            <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('answer')}}
+              </span>
+              <span class="answer-text"
+                    v-if="administrators || val.createBy == userInfoQuery.username"
+                    @click="deleteClick(val)">
+              {{$t('delete')}}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <SelectedBy ref="SelectedByRef" :title="$t('forward')" @SelectedByForm="SelectedByForm"></SelectedBy>
+    </div>
+    <a-modal
+      :title="$t('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('replyToComments')">{{$t('replyToComments')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="'replyContent'">
+                <a-textarea
+                  :placeholder="$t('PleaseEnter')+$t('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 } from '@/api/manage'
+  import 'quill/dist/quill.core.css'
+  import 'quill/dist/quill.snow.css'
+  import 'quill/dist/quill.bubble.css'
+  import { quillEditor } from 'vue-quill-editor'
+  import SelectedBy from '@/components/SelectedBy/index'
+  import { mapGetters } from 'vuex'
+  import { Base64 } from 'js-base64'
+  import { deleteAction } from '../../../../api/manage'
+
+  export default {
+    name: 'problemKnowledgeBaseListView',
+    components: {
+      SelectedBy
+    },
+    data() {
+      return {
+        visibleComment: false,
+        administrators: false,
+        userInfoQuery: {},
+        releaseList: [],
+        loading: false,
+        formInline: {},
+        confirmLoading: false,
+        formInlineComment: {},
+        rulesComment: {
+          replyContent: [
+            {
+              required: true,
+              message: this.$t('replyToComments') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            },
+            {
+              max: 300,
+              message: this.$t('replyToComments') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ]
+        },
+        rules: {
+          commentContent: [
+            {
+              max: 300,
+              message: this.$t('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) {
+        let fileName = fileQuery.fileName
+        let index1 = fileName.lastIndexOf('.')
+        let index2 = fileName.length
+        let 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') {
+          let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
+          window.open(url, '_blank')
+        } else if (fileSuffix == '.xlsx' || fileSuffix == '.xls') {
+          let 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') {
+          let 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) {
+        let _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() {
+        let query = {
+          problemKnowledgeBaseId: this.queryBase.id,
+          browsingUserId: this.userInfo().id
+        }
+        postAction('/problemKnowledgeBase/problemKnowledgeBaseBrowsingHistoryEO/add', query).then((res) => {
+        })
+      },
+      queryById() {
+        let 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
+        }
+        let 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
+        }
+        let 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) {
+            let 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) {
+            let 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() {
+        let 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) {
+        let newUrl = this.$router.resolve({
+          path: '/docManage/library/detail',
+          query: {
+            id: item.bussDocumentLibraryId.split(',')[key]
+          }
+        })
+        window.open(newUrl.href, '_blank')
+      },
+      SelectedByForm(userIds) {
+        let 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>
\ No newline at end of file