diff --git a/jero-web/src/common/lang/en-us.js b/jero-web/src/common/lang/en-us.js
index 1aa99f303..cddee045e 100644
--- a/jero-web/src/common/lang/en-us.js
+++ b/jero-web/src/common/lang/en-us.js
@@ -1230,4 +1230,7 @@ module.exports = {
   associatedWebsite:'Associated website',
   dropDownOptions:'Drop down options',
   dropDownOptionMaintenance:'Drop down option maintenance',
+  displayInformation:'Display information',
+  addComparison:'Add comparison',
+  showOrNot:'Show or not',
 }
\ 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 bee340923..2b024825c 100644
--- a/jero-web/src/common/lang/zh-cn.js
+++ b/jero-web/src/common/lang/zh-cn.js
@@ -1333,4 +1333,7 @@ module.exports = {
   associatedWebsite:'关联网址',
   dropDownOptions:'下拉选项',
   dropDownOptionMaintenance:'下拉选项维护',
+  displayInformation:'展示信息',
+  addComparison:'添加对比',
+  showOrNot:'是否展示',
 }
\ No newline at end of file
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardRelease.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardRelease.vue
index 3ccdc4ab9..16f764ed2 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardRelease.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardRelease.vue
@@ -227,7 +227,11 @@
 
       },
       viewClick() {
-
+        let newUrl = this.$router.resolve({
+          path: '/countryCardView',
+          query: {}
+        })
+        window.open(newUrl.href, '_blank')
       },
       deleteData(val) {
         let _this = this
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue
index 75be6e28d..e2d651aea 100644
--- a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/countryCardView.vue
@@ -6,21 +6,95 @@
            <span style="line-height: 66px;display: inline-block;float: left">
              <a-icon type="arrow-left" style="margin-right: 6px;"/>
            </span>
-          {{$t('applicableInstructionsMarketList')}}
+          {{$t('See')}}
         </div>
       </div>
       <div style="padding-top: 68px;background: #fff">
-        <div class="detail-content" style="padding: 24px">
+        <div class="detail-content" style="padding: 24px;white-space: nowrap">
+          <div class="box-content-right">
+            <div @click="displayInformationClick" class="operator-text">
+              <a-icon type="eye"/>
+              {{$t('displayInformation')}}
+            </div>
+            <div @click="newlyAddedClick" class="operator-text">
+              <a-icon type="plus"/>
+              {{$t('addComparison')}}
+            </div>
+          </div>
+          <div class="content-box">
+            <div class="content-box-left">
+              <div class="content-box-left-text">
+                hadhasdasdhadashdjk
+              </div>
+              <div class="content-box-left-text">
+                hadhasdasdhadashdjk
+              </div>
+              <div class="content-box-left-text">
+                hadhasdasdhadashdjk
+              </div>
+              <div class="content-box-left-text">
+                hadhasdasdhadashdjk
+              </div>
+              <div class="content-box-left-text">
+                hadhasdasdhadashdjk
+              </div>
+              <div class="content-box-left-text">
+                hadhasdasdhadashdjk
+              </div>
+              <div class="content-box-left-text">
+                hadhasdasdhadashdjk
+              </div>
+              <div class="content-box-left-text">
+                hadhasdasdhadashdjk
+              </div>
+              <div class="content-box-left-text">
+                hadhasdasdhadashdjk
+              </div>
+            </div>
+            <div class="content-box-right" v-for="item1 in 9">
+              <div class="content-box-box-top">
+                <img src="../../../../assets/mobileHome.png" class="content-box-box-img" alt="">
+                <span class="content-box-box-text">
+                      中国
+                </span>
+              </div>
+              <div class="content-box-box" v-for="item in 9">
+                <img src="../../../../assets/mobileHome.png" class="content-box-box-img" alt="">
+                <span class="content-box-box-text">
+                      中国
+                </span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+    <displayInformationModel ref="displayInformationModelRef"/>
   </div>
 </template>
 
 <script>
   import { getAction, postAction, downloadFile } from '@/api/manage'
+  import displayInformationModel from './displayInformationModel'
+
   export default {
-    name: 'countryCardView'
+    name: 'countryCardView',
+    components: {
+      displayInformationModel
+    },
+    data() {
+      return {}
+    },
+    mounted() {
+    },
+    methods: {
+      displayInformationClick() {
+        this.$refs.displayInformationModelRef.getData()
+      },
+      newlyAddedClick() {
+
+      }
+    }
   }
 </script>
 
@@ -66,11 +140,6 @@
         }
       }
 
-      .content-box {
-        padding: 0 32px;
-        box-sizing: border-box;
-      }
-
       .header-text {
         font-size: 16px;
         font-weight: 400;
@@ -85,4 +154,110 @@
       }
     }
   }
+
+  .box-content-right {
+    width: 100%;
+    text-align: right;
+    margin-bottom: 20px;
+  }
+
+  .operator-text {
+    cursor: pointer;
+    margin-right: 53px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    display: inline-block;
+  }
+
+  .operator-text:last-child {
+    margin-right: 13px;
+  }
+
+  .content-box {
+    overflow: auto;
+    white-space: nowrap;
+    position: relative;
+  }
+
+  .content-box-left {
+    width: 200px;
+    background: #fff;
+    z-index: 111;
+    display: inline-block;
+    position: sticky;
+    left: 0;
+    border-top: 1px #d9d9d9 solid;
+    border-left: 1px #d9d9d9 solid;
+    border-bottom: 1px #d9d9d9 solid;
+    border-right: 1px #d9d9d9 solid;
+  }
+
+  .content-box-left-text {
+    font-size: 16px;
+    color: #040B29;
+    font-weight: 400;
+    text-align: center;
+    border-bottom: 1px #d9d9d9 solid;
+    height: 80px;
+    line-height: 80px;
+  }
+
+  .content-box-left-text:last-child {
+    border-bottom: none;
+  }
+
+  .content-box-box-top {
+    width: 340px;
+    height: 160px;
+    display: inline-block;
+    cursor: pointer;
+    border-left: 1px #d9d9d9 solid;
+    border-top: 1px #d9d9d9 solid;
+    border-right: 1px #d9d9d9 solid;
+    border-bottom: 1px #d9d9d9 solid;
+    position: sticky;
+    top: 0;
+    z-index: 111;
+    background: #fff;
+  }
+
+  .content-box-right {
+    width: 339px;
+    position: relative;
+    display: inline-block;
+    border-top: 1px #d9d9d9 solid;
+    border-right: 1px #d9d9d9 solid;
+    border-bottom: 1px #d9d9d9 solid;
+  }
+
+  .content-box-right:last-child {
+    border-right: 1px #d9d9d9 solid;
+  }
+
+  .content-box-box-img {
+    width: 70%;
+    height: 100%;
+  }
+
+  .content-box-box-text {
+    display: inline-block;
+    width: 30%;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 500;
+    color: #040B29;
+  }
+
+  .content-box-box {
+    width: 100%;
+    height: 80px;
+    border-bottom: 1px #d9d9d9 solid;
+    cursor: pointer;
+  }
+
+  .content-box-box:last-child {
+    border-bottom: none;
+  }
+
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/components/displayInformationModel.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/displayInformationModel.vue
new file mode 100644
index 000000000..baae325aa
--- /dev/null
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/components/displayInformationModel.vue
@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <a-drawer
+      :title="$t('displayInformation')"
+      :maskClosable="false"
+      :width="800"
+      placement="right"
+      :closable="true"
+      @close="handleCancel"
+      :visible="visible"
+      style="height: 100%;overflow: auto;padding-bottom: 53px;">
+      <div style="margin-bottom: 60px">
+        <a-table
+          :columns="columns"
+          :scroll="{x: '100%',y:'calc(100vh - 300px)'}"
+          :data-source="dataList"
+          :pagination="false"
+          :loading="loading">
+           <span slot="showOrNot" slot-scope="text,record">
+              <a-checkbox :value="text"></a-checkbox>
+           </span>
+        </a-table>
+        <div class="page" v-if="dataList.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="onChange"
+            @showSizeChange="SizeChange"
+          />
+        </div>
+      </div>
+      <div class="drawer-bootom-button">
+        <a-button style="margin-right: .8rem" @click="handleCancel">{{$t('cancel')}}</a-button>
+        <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+  import { getAction, postAction, deleteAction } from '@/api/manage'
+
+  export default {
+    name: 'displayInformationModel',
+    data() {
+      return {
+        url: {
+          list: '',
+          deleteOne: ''
+        },
+        visible: false,
+        selectedRowKeys: [],
+        dataList: [{}],
+        loading: false,
+        pageNo: 1,
+        pageSize: 10,
+        confirmLoading:false,
+        total: 0,
+        columns: [
+          {
+            title: this.$t('LabelName'),
+            dataIndex: 'LabelName',
+            align: 'center',
+            ellipsis: true
+          },
+          {
+            title: this.$t('showOrNot'),
+            dataIndex: 'showOrNot',
+            align: 'center',
+            ellipsis: true,
+            scopedSlots: { customRender: 'showOrNot' }
+          }
+        ]
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      getData() {
+        this.visible = true
+      },
+      handleCancel() {
+        this.visible = false
+      },
+      handleSubmit(){
+
+      },
+      onChange(page, pageSize) {
+        this.pageNo = page
+        this.replacePage()
+      },
+      SizeChange(page, pageSize) {
+        this.pageNo = 1
+        this.pageSize = pageSize
+        this.replacePage()
+      },
+      replacePage() {
+        let query = {
+          pageNo: this.pageNo,
+          pageSize: this.pageSize
+        }
+        this.loading = true
+        postAction(this.url.list, query).then((res) => {
+          if (res.success) {
+            this.dataList = res.result.records || []
+            this.total = res.result.total
+            this.loading = false
+          } else {
+            this.dataList = []
+            this.total = 0
+            this.loading = false
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 100;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+
+  .box-title {
+    width: 100%;
+    text-align: right;
+    margin-bottom: 20px;
+  }
+
+  .operator-text {
+    cursor: pointer;
+    margin-right: 13px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    display: inline-block;
+  }
+</style>
\ No newline at end of file