diff --git a/public/images/homeWu/ni-dynamic.png b/public/images/homeWu/ni-dynamic.png
new file mode 100644
index 00000000..c1ac3cb7
Binary files /dev/null and b/public/images/homeWu/ni-dynamic.png differ
diff --git a/public/images/homeWu/no-answer.png b/public/images/homeWu/no-answer.png
new file mode 100644
index 00000000..e0192101
Binary files /dev/null and b/public/images/homeWu/no-answer.png differ
diff --git a/public/images/homeWu/no-book.png b/public/images/homeWu/no-book.png
new file mode 100644
index 00000000..bc78bbfc
Binary files /dev/null and b/public/images/homeWu/no-book.png differ
diff --git a/public/images/homeWu/no-case.png b/public/images/homeWu/no-case.png
new file mode 100644
index 00000000..080f5e40
Binary files /dev/null and b/public/images/homeWu/no-case.png differ
diff --git a/public/images/homeWu/no-course.png b/public/images/homeWu/no-course.png
new file mode 100644
index 00000000..83e73b97
Binary files /dev/null and b/public/images/homeWu/no-course.png differ
diff --git a/public/images/homeWu/no-follow.png b/public/images/homeWu/no-follow.png
new file mode 100644
index 00000000..7c324cb7
Binary files /dev/null and b/public/images/homeWu/no-follow.png differ
diff --git a/public/images/homeWu/no-note.png b/public/images/homeWu/no-note.png
new file mode 100644
index 00000000..ed2818c0
Binary files /dev/null and b/public/images/homeWu/no-note.png differ
diff --git a/public/images/homeWu/no-put.png b/public/images/homeWu/no-put.png
new file mode 100644
index 00000000..62b7348b
Binary files /dev/null and b/public/images/homeWu/no-put.png differ
diff --git a/src/assets/styles/portal-index.scss b/src/assets/styles/portal-index.scss
index 8bd37aa8..81e32e07 100644
--- a/src/assets/styles/portal-index.scss
+++ b/src/assets/styles/portal-index.scss
@@ -156,4 +156,17 @@
 .el-button--primary{
     background-color: #387DF7;
     border-color: #387DF7;
+}
+.home-no-list{
+   margin-top: 156px; 
+   text-align: center;
+   .img{
+    width: 148px;
+    height: 160px;
+   }
+   .text{
+    font-size: 18px;
+    color: #999999;
+    margin-top: 20px;
+   }
 }
\ No newline at end of file
diff --git a/src/components/HomePage/caseList.vue b/src/components/HomePage/caseList.vue
new file mode 100644
index 00000000..f48b5206
--- /dev/null
+++ b/src/components/HomePage/caseList.vue
@@ -0,0 +1,930 @@
+<template>
+    <div class="case-list-box">
+      <div class="data-content" v-if="caseList.length >0">
+              <div :span="24" v-for="item in caseList" :key="item.id" class="case-list">
+                <div class="case-info">
+                  <div class="case-info-cont">
+                      <router-link :to="'/case/detail?id='+item.id">
+                    <div class="case-info-title">
+                    <div class="case-titdiv">
+                        <span class="case-tittext" v-html="item.title"></span>
+                        <div class="case-info-date portal-time">
+                          <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
+                        </div>
+                    </div>
+                  </div>
+                    <div style="height:58px;padding-top:14px ">
+                      <author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex"></author>
+                    </div>
+                    <div class="keyword-text clearfix">
+                      <div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomain">{{ orgDomainTranslate(item.orgDomain) }}</div>
+                      <div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomain == '' && item.orgDomainParent">{{ orgDomainTranslate(item.orgDomainParent) }}</div>
+                      <div style="color:#2974D6;font-weight: 450;"  v-for="item,idx in item.majorType" :key="idx" >{{ majorTypeTranslate(item) }}</div>
+                      <div v-if="item.keyword1">{{ item.keyword1 }}</div>
+                      <div v-if="item.keyword2">{{ item.keyword2 }}</div>
+                      <div v-if="item.keyword3">{{ item.keyword3 }}</div>
+                      <div v-if="item.keyword4">{{ item.keyword4 }}</div>
+                      <div v-if="item.keyword5">{{ item.keyword5 }}</div>
+                    </div>
+                 </router-link>
+                    <div class="case-info-summary">
+                          {{displayAll(item)}}
+                          <span style="color:#588afc;cursor:pointer;" v-if="item.summary.length>180" @click.stop="changeIsAll(item)">
+                              {{item.isAll?'收起':'展开'}}
+                          </span>
+                    </div>
+                    <div style="display: flex;justify-content: flex-end;">
+                     <div style="margin:8px 0;">
+                        <interactBar :type="0" :shares="false" :views="false"  :data="item" :readonly="true"></interactBar> </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+        <div v-else class="home-no-list">
+            <img class="img" src="/images/homeWu/no-case.png" alt="" srcset="">
+            <p class="text">还没有案例</p>
+        </div>
+    </div>
+  </template>
+  
+  <script>
+    import interactBar from "@/components/Portal/interactBar.vue";
+    import author from "@/components/Portal/authorInfo.vue";
+      export default{
+        name:"CaseList",
+        components: {
+          interactBar,
+          // timeShow,
+          author
+        },
+          data(){
+              return{
+                caseList:[]
+            //     caseList:[
+            // {
+            //     "id": "986217699985510400",
+            //     "sysCreateAid": "952948626497724414",
+            //     "sysCreateBy": "赵芳",
+            //     "sysCreateTime": "2022-06-14 10:37:03",
+            //     "sysUpdateTime": "2022-06-14 10:37:03",
+            //     "sysUpdateBy": "赵芳",
+            //     "sysVersion": 0,
+            //     "deleted": false,
+            //     "title": "pdf测试",
+            //     "authorInfo":{
+            //       "aid": "",
+            //       "name": "赵芳",
+            //       "orgInfo": "科技刚刚",
+            //       "avatar": "/2022/4/967742667851837440.png",
+            //       "sex": 2
+            //     },
+            //     "companyId": "",
+            //     "content": "",
+            //     "filePath": "/case/2022/6/986217684261064704.pdf",
+            //     "fileName": "初中历史178道选择题（含答案），三年重难点看这.pdf",
+            //     "authorId": "952948626497724414",
+            //     "authorName": "赵芳",
+            //     "coverUrl": "",
+            //     "breCommend": "",
+            //     "recommendTime": "",
+            //     "isTop": true,
+            //     "authorInfo":{
+            //       aid: "",
+            //       name: "",
+            //       orgInfo: "",
+            //       avatar: "",
+            //       sex: null
+            //     },
+            //     "topTime": "2022-06-14 19:02:52",
+            //     "views": 345,
+            //     "comments": 2,
+            //     "praises": 1,
+            //     "shares": 2,
+            //     "favorites": 1,
+            //     "summary": "日日日日",
+            //     "orgDomain": "b1c2",
+            //     "orgDomainParent": "b1c1",
+            //     "majorType": "a1b1",
+            //     "approvalNumber": "",
+            //     "confidentialityLevel": "",
+            //     "draftingTime": "",
+            //     "endTime": "",
+            //     "drafter": "",
+            //     "department": "",
+            //     "contactNumber": "",
+            //     "email": "",
+            //     "caseChannel": "",
+            //     "isLeadershipPlan": "",
+            //     "caseScope": "",
+            //     "caseFlow": "",
+            //     "caseOwner": "",
+            //     "caseOwnerDepartment": "",
+            //     "caseOwnerPhone": "",
+            //     "caseOtherContributor": "",
+            //     "caseSpecialtySequence": "",
+            //     "caseOwnerOrg": "",
+            //     "caseType": "",
+            //     "caseType1": "",
+            //     "caseType2": "",
+            //     "caseTheme": "",
+            //     "caseThemeDescription": "",
+            //     "keyword1": "",
+            //     "keyword2": "",
+            //     "keyword3": "",
+            //     "keyword4": "",
+            //     "keyword5": "",
+            //     "readers": "",
+            //     "caseValue": "",
+            //     "majorIds": ""
+            // },
+            // {
+            //     "id": "983704254690021376",
+            //     "sysCreateAid": "952948626497724412",
+            //     "sysCreateBy": "白晋宇",
+            //     "sysCreateTime": "2022-06-07 12:09:31",
+            //     "sysUpdateTime": "2022-06-07 12:09:31",
+            //     "sysUpdateBy": "白晋宇",
+            //     "sysVersion": 0,
+            //     "deleted": false,
+            //     "title": "13123132",
+            //     "companyId": "",
+            //     "authorInfo":{
+            //       aid: "",
+            //       name: "",
+            //       orgInfo: "",
+            //       avatar: "",
+            //       sex: null
+            //     },
+            //     "content": "京东方",
+            //     "filePath": "/tools/2022/6/983703954482712576.pdf",
+            //     "fileName": "",
+            //     "authorId": "",
+            //     "authorName": "aaa",
+            //     "coverUrl": "",
+            //     "breCommend": "",
+            //     "recommendTime": "",
+            //     "isTop": true,
+            //     "topTime": "",
+            //     "views": 14,
+            //     "comments": 0,
+            //     "praises": 0,
+            //     "shares": 0,
+            //     "favorites": 0,
+            //     "summary": "这是由于系统数据配置与实际不符，如能找到正确的 HRBP 担当，请直\r\n接委托对方处理即可，并联系 BOEU 担当调整数据，如不能找到，请将\r\n审批退回，写明原因，并联系 BOEU 担当调整数据。",
+            //     "orgDomain": "",
+            //     "orgDomainParent": "",
+            //     "majorType": "a2b5",
+            //     "approvalNumber": "",
+            //     "confidentialityLevel": "",
+            //     "draftingTime": "",
+            //     "endTime": "",
+            //     "drafter": "",
+            //     "department": "",
+            //     "contactNumber": "",
+            //     "email": "",
+            //     "caseChannel": "",
+            //     "isLeadershipPlan": "",
+            //     "caseScope": "",
+            //     "caseFlow": "",
+            //     "caseOwner": "",
+            //     "caseOwnerDepartment": "",
+            //     "caseOwnerPhone": "",
+            //     "caseOtherContributor": "",
+            //     "caseSpecialtySequence": "",
+            //     "caseOwnerOrg": "",
+            //     "caseType": "业务痛点",
+            //     "caseType1": "出明确需求案",
+            //     "caseType2": "业务痛点",
+            //     "caseTheme": "",
+            //     "caseThemeDescription": "",
+            //     "keyword1": "关键字1",
+            //     "keyword2": "关键字2",
+            //     "keyword3": "关键字3",
+            //     "keyword4": "关键字4",
+            //     "keyword5": "关键字5",
+            //     "readers": "",
+            //     "caseValue": "",
+            //     "majorIds": ""
+            // },
+            // {
+            //     "id": "985944744021209088",
+            //     "sysCreateAid": "952948626497724412",
+            //     "sysCreateBy": "白晋宇",
+            //     "sysCreateTime": "2022-06-13 16:32:25",
+            //     "sysUpdateTime": "2022-06-13 16:32:25",
+            //     "sysUpdateBy": "白晋宇",
+            //     "sysVersion": 4,
+            //     "authorInfo":{
+            //       aid: "",
+            //       name: "",
+            //       orgInfo: "",
+            //       avatar: "",
+            //       sex: null
+            //     },
+            //     "deleted": false,
+            //     "title": "六月十三日",
+            //     "companyId": "",
+            //     "content": "",
+            //     "filePath": "/case/2022/6/985944739512332288.pdf",
+            //     "fileName": "课件内容pdf.pdf",
+            //     "authorId": "952948626497714416",
+            //     "authorName": "李明晶",
+            //     "coverUrl": "",
+            //     "breCommend": "",
+            //     "recommendTime": "",
+            //     "isTop": false,
+            //     "topTime": "",
+            //     "views": 115,
+            //     "comments": 12,
+            //     "praises": 1,
+            //     "shares": 1,
+            //     "favorites": 1,
+            //     "summary": "乌冲突是一面照妖镜，可以照出世界各国哪个是“妖”、哪个是人。纵观整个世界，能够同时获得俄乌两个当事国的信任的，似乎只有中国一个。据环球网报道，中国在俄乌冲突中所持的立场，受到俄罗斯和乌克兰两个当事国的各自肯定。不仅如此，就连一直想找茬恶心中国的美国，也不得不拉下身段，公开承认抓不到中国的“小辫子”。乌冲突是一面照妖镜，可以照出世界各国哪个是“妖”、哪个是人。纵观整个世界，能够同时获得俄乌两个当事国的信任的，似乎只有中国一个。据环球网报道，中国在俄乌冲突中所持的立场，受到俄罗斯和乌克兰两个当事国的各自肯定。不仅如此，就连一直想找茬恶心中国的美国，也不得不拉下身段，公开承认抓不到中国的“小辫子”。乌冲突是一面照妖镜，可以照出世界各国哪个是“妖”、哪个是人。纵观整个世界，能够同时获得俄乌两个当事国的信任的，似乎只有中国一个。据环球网报道，中国在俄乌冲突中所持的立场，受到俄罗斯和乌克兰两个当事国的各自肯定。不仅如此，就连一直想找茬恶心中国的美国，也不得不拉下身段，公开承认抓不到中国的“小辫子”。",
+            //     "orgDomain": "",
+            //     "orgDomainParent": "c2d3",
+            //     "majorType": "a1b1",
+            //     "approvalNumber": "",
+            //     "confidentialityLevel": "",
+            //     "draftingTime": "",
+            //     "endTime": "",
+            //     "drafter": "",
+            //     "department": "",
+            //     "contactNumber": "",
+            //     "email": "",
+            //     "caseChannel": "",
+            //     "isLeadershipPlan": "",
+            //     "caseScope": "",
+            //     "caseFlow": "",
+            //     "caseOwner": "",
+            //     "caseOwnerDepartment": "",
+            //     "caseOwnerPhone": "",
+            //     "caseOtherContributor": "",
+            //     "caseSpecialtySequence": "",
+            //     "caseOwnerOrg": "",
+            //     "caseType": "",
+            //     "caseType1": "",
+            //     "caseType2": "",
+            //     "caseTheme": "",
+            //     "caseThemeDescription": "",
+            //     "keyword1": "",
+            //     "keyword2": "",
+            //     "keyword3": "",
+            //     "keyword4": "",
+            //     "keyword5": "",
+            //     "readers": "",
+            //     "caseValue": "",
+            //     "majorIds": ""
+            // },
+            // {
+            //     "id": "985946065260523520",
+            //     "sysCreateAid": "952948626497724414",
+            //     "sysCreateBy": "赵芳",
+            //     "sysCreateTime": "2022-06-13 16:37:40",
+            //     "sysUpdateTime": "2022-06-13 16:39:59",
+            //     "sysUpdateBy": "赵芳",
+            //     "sysVersion": 4,
+            //     "deleted": false,
+            //     "authorInfo":{
+            //       aid: "",
+            //       name: "",
+            //       orgInfo: "",
+            //       avatar: "",
+            //       sex: null
+            //     },
+            //     "title": "记者台报道",
+            //     "companyId": "",
+            //     "content": "",
+            //     "filePath": "/case/2022/6/985946046784614400.pdf",
+            //     "fileName": "初中历史178道选择题（含答案），三年重难点看这.pdf",
+            //     "authorId": "952948626497724414",
+            //     "authorName": "赵芳",
+            //     "coverUrl": "",
+            //     "breCommend": "",
+            //     "recommendTime": "",
+            //     "isTop": false,
+            //     "topTime": "",
+            //     "views": 37,
+            //     "comments": 7,
+            //     "praises": 0,
+            //     "shares": 0,
+            //     "favorites": 1,
+            //     "summary": "记者台报道",
+            //     "orgDomain": "",
+            //     "orgDomainParent": "e1f2",
+            //     "majorType": "a2b2",
+            //     "approvalNumber": "",
+            //     "confidentialityLevel": "",
+            //     "draftingTime": "",
+            //     "endTime": "",
+            //     "drafter": "",
+            //     "department": "",
+            //     "contactNumber": "",
+            //     "email": "",
+            //     "caseChannel": "",
+            //     "isLeadershipPlan": "",
+            //     "caseScope": "",
+            //     "caseFlow": "",
+            //     "caseOwner": "",
+            //     "caseOwnerDepartment": "",
+            //     "caseOwnerPhone": "",
+            //     "caseOtherContributor": "",
+            //     "caseSpecialtySequence": "",
+            //     "caseOwnerOrg": "",
+            //     "caseType": "",
+            //     "caseType1": "",
+            //     "caseType2": "",
+            //     "caseTheme": "",
+            //     "caseThemeDescription": "",
+            //     "keyword1": "1",
+            //     "keyword2": "",
+            //     "keyword3": "",
+            //     "keyword4": "",
+            //     "keyword5": "",
+            //     "readers": "",
+            //     "caseValue": "",
+            //     "majorIds": ""
+            // },
+            // {
+            //     "id": "994247850014986240",
+            //     "sysCreateAid": "952948626497724412",
+            //     "sysCreateBy": "白晋宇",
+            //     "sysCreateTime": "2022-07-06 14:26:00",
+            //     "sysUpdateTime": "2022-07-25 14:00:05",
+            //     "sysUpdateBy": "赵芳",
+            //     "sysVersion": 1,
+            //     "deleted": false,
+            //     "authorInfo":{
+            //       aid: "",
+            //       name: "",
+            //       orgInfo: "",
+            //       avatar: "",
+            //       sex: null
+            //     },
+            //     "title": "测试多条数据222",
+            //     "companyId": "",
+            //     "content": "",
+            //     "filePath": "/case/2022/7/994247843694170112.pdf",
+            //     "fileName": "附件一：新报名收费流程简介.pdf",
+            //     "authorId": "952948626497714416",
+            //     "authorName": "李明晶",
+            //     "coverUrl": "",
+            //     "breCommend": "",
+            //     "recommendTime": "",
+            //     "isTop": false,
+            //     "topTime": "",
+            //     "views": 33,
+            //     "comments": 0,
+            //     "praises": 0,
+            //     "shares": 0,
+            //     "favorites": 1,
+            //     "summary": "数据222",
+            //     "orgDomain": "d1e2",
+            //     "orgDomainParent": "c1d2",
+            //     "majorType": "a1b1,a2b4",
+            //     "approvalNumber": "",
+            //     "confidentialityLevel": "",
+            //     "draftingTime": "",
+            //     "endTime": "",
+            //     "drafter": "",
+            //     "department": "",
+            //     "contactNumber": "",
+            //     "email": "",
+            //     "caseChannel": "",
+            //     "isLeadershipPlan": "",
+            //     "caseScope": "",
+            //     "caseFlow": "",
+            //     "caseOwner": "",
+            //     "caseOwnerDepartment": "",
+            //     "caseOwnerPhone": "",
+            //     "caseOtherContributor": "",
+            //     "caseSpecialtySequence": "",
+            //     "caseOwnerOrg": "",
+            //     "caseType": "",
+            //     "caseType1": "",
+            //     "caseType2": "",
+            //     "caseTheme": "",
+            //     "caseThemeDescription": "",
+            //     "keyword1": "晕乎乎",
+            //     "keyword2": "回纥",
+            //     "keyword3": "",
+            //     "keyword4": "",
+            //     "keyword5": "",
+            //     "readers": "",
+            //     "caseValue": "",
+            //     "majorIds": ""
+            // },
+            // {
+            //     "id": "985957953641918464",
+            //     "sysCreateAid": "952948626497724412",
+            //     "sysCreateBy": "白晋宇",
+            //     "sysCreateTime": "2022-06-13 17:24:54",
+            //     "sysUpdateTime": "2022-06-13 17:24:54",
+            //     "sysUpdateBy": "白晋宇",
+            //     "sysVersion": 4,
+            //     "deleted": false,
+            //     "authorInfo":{
+            //       aid: "",
+            //       name: "",
+            //       orgInfo: "",
+            //       avatar: "",
+            //       sex: null
+            //     },
+            //     "title": "1212112222222000666",
+            //     "companyId": "",
+            //     "content": "",
+            //     "filePath": "/case/2022/6/985957949544083456.pdf",
+            //     "fileName": "初中历史178道选择题（含答案），三年重难点看这.pdf",
+            //     "authorId": "952948626497714416",
+            //     "authorName": "李明晶",
+            //     "coverUrl": "",
+            //     "breCommend": "",
+            //     "recommendTime": "",
+            //     "isTop": false,
+            //     "topTime": "",
+            //     "views": 22,
+            //     "comments": 0,
+            //     "praises": 0,
+            //     "shares": 0,
+            //     "favorites": 0,
+            //     "summary": "据报道，由于新冠疫情持续蔓延，上野动物园经常临时停业，这是“香香”时隔3年再次生日时同游客见面。\n上野动物园负责人表示，“‘香香’吃得好睡得香，我们非常开心它能健康地迎来5岁生日。”\n报道指出，“香香”原定于2020年12月末归还中国，但受到新冠疫情的影响，归还日期一再被推迟，目前计划于2022年12月末归还。",
+            //     "orgDomain": "",
+            //     "orgDomainParent": "a1b1",
+            //     "majorType": "",
+            //     "approvalNumber": "",
+            //     "confidentialityLevel": "",
+            //     "draftingTime": "",
+            //     "endTime": "",
+            //     "drafter": "",
+            //     "department": "",
+            //     "contactNumber": "",
+            //     "email": "",
+            //     "caseChannel": "",
+            //     "isLeadershipPlan": "",
+            //     "caseScope": "",
+            //     "caseFlow": "",
+            //     "caseOwner": "",
+            //     "caseOwnerDepartment": "",
+            //     "caseOwnerPhone": "",
+            //     "caseOtherContributor": "",
+            //     "caseSpecialtySequence": "",
+            //     "caseOwnerOrg": "",
+            //     "caseType": "",
+            //     "caseType1": "",
+            //     "caseType2": "",
+            //     "caseTheme": "",
+            //     "caseThemeDescription": "",
+            //     "keyword1": "1",
+            //     "keyword2": "2",
+            //     "keyword3": "3",
+            //     "keyword4": "4",
+            //     "keyword5": "5",
+            //     "readers": "",
+            //     "caseValue": "",
+            //     "majorIds": ""
+            // },
+            // {
+            //     "id": "985923785620992000",
+            //     "sysCreateAid": "952948626497724414",
+            //     "sysCreateBy": "赵芳",
+            //     "sysCreateTime": "2022-06-13 15:09:08",
+            //     "sysUpdateTime": "2022-06-13 15:09:08",
+            //     "sysUpdateBy": "赵芳",
+            //     "sysVersion": 4,
+            //     "deleted": false,
+            //     "authorInfo":{
+            //       aid: "",
+            //       name: "",
+            //       orgInfo: "",
+            //       avatar: "",
+            //       sex: null
+            //     },
+            //     "title": "日日日",
+            //     "companyId": "",
+            //     "content": "",
+            //     "filePath": "",
+            //     "fileName": "",
+            //     "authorId": "952948626497724414",
+            //     "authorName": "赵芳",
+            //     "coverUrl": "",
+            //     "breCommend": "",
+            //     "recommendTime": "",
+            //     "isTop": false,
+            //     "topTime": "",
+            //     "views": 20,
+            //     "comments": 0,
+            //     "praises": 0,
+            //     "shares": 1,
+            //     "favorites": 0,
+            //     "summary": "日日日",
+            //     "orgDomain": "",
+            //     "orgDomainParent": "c2d3",
+            //     "majorType": "",
+            //     "approvalNumber": "",
+            //     "confidentialityLevel": "",
+            //     "draftingTime": "",
+            //     "endTime": "",
+            //     "drafter": "",
+            //     "department": "",
+            //     "contactNumber": "",
+            //     "email": "",
+            //     "caseChannel": "",
+            //     "isLeadershipPlan": "",
+            //     "caseScope": "",
+            //     "caseFlow": "",
+            //     "caseOwner": "",
+            //     "caseOwnerDepartment": "",
+            //     "caseOwnerPhone": "",
+            //     "caseOtherContributor": "",
+            //     "caseSpecialtySequence": "",
+            //     "caseOwnerOrg": "",
+            //     "caseType": "",
+            //     "caseType1": "",
+            //     "caseType2": "",
+            //     "caseTheme": "",
+            //     "caseThemeDescription": "",
+            //     "keyword1": "4",
+            //     "keyword2": "4",
+            //     "keyword3": "4",
+            //     "keyword4": "4",
+            //     "keyword5": "4",
+            //     "readers": "",
+            //     "caseValue": "",
+            //     "majorIds": ""
+            // },
+            // {
+            //     "id": "986231437475459072",
+            //     "sysCreateAid": "952948626497724412",
+            //     "sysCreateBy": "白晋宇",
+            //     "sysCreateTime": "2022-06-14 11:31:38",
+            //     "sysUpdateTime": "2022-06-14 11:31:38",
+            //     "sysUpdateBy": "白晋宇",
+            //     "sysVersion": 0,
+            //     "deleted": false,
+            //     "authorInfo":{
+            //       aid: "",
+            //       name: "",
+            //       orgInfo: "",
+            //       avatar: "",
+            //       sex: null
+            //     },
+            //     "title": "测试测试33",
+            //     "companyId": "",
+            //     "content": "",
+            //     "filePath": "/case/2022/6/986231422417907712.pdf",
+            //     "fileName": "初中历史178道选择题（含答案），三年重难点看这.pdf",
+            //     "authorId": "952948626497724417",
+            //     "authorName": "郑慧萍",
+            //     "coverUrl": "",
+            //     "breCommend": "",
+            //     "recommendTime": "",
+            //     "isTop": false,
+            //     "topTime": "",
+            //     "views": 16,
+            //     "comments": 0,
+            //     "praises": 1,
+            //     "shares": 2,
+            //     "favorites": 0,
+            //     "summary": "对于这个问题，肯定每个人都有每个人的选择。所以有些人就会好奇网友们会怎么选，于是自发组织了一个投票。经过投票后，很大一部分的网友都会选择700分，理由就是觉得自己拼尽一辈子可能也赚不了那么多钱。\n确实，700万并不是一个小数目。对于很多人来说，每个月可能都是拿着几千块的工资在勉强熬过生活，能赚到700万简直就是天方夜谭。选择700万的人也是无可厚非的，毕竟都是经历过了生活的苦，知道现实的残酷才会想要这样选择。对于这个问题，肯定每个人都有每个人的选择。所以有些人就会好奇网友们会怎么选，于是自发组织了一个投票。经过投票后，很大一部分的网友都会选择700分，理由就是觉得自己拼尽一辈子可能也赚不了那么多钱。\n确实，700万并不是一个小数目。对于很多人来说，每个月可能都是拿着几千块的工资在勉强熬过生活，能赚到700万简直就是天方夜谭。选择700万的人也是无可厚非的，毕竟都是经历过了生活的苦，知道现实的残酷才会想要这样选择。",
+            //     "orgDomain": "a2b4",
+            //     "orgDomainParent": "a1b1",
+            //     "majorType": "a2b4",
+            //     "approvalNumber": "",
+            //     "confidentialityLevel": "",
+            //     "draftingTime": "",
+            //     "endTime": "",
+            //     "drafter": "",
+            //     "department": "",
+            //     "contactNumber": "",
+            //     "email": "",
+            //     "caseChannel": "",
+            //     "isLeadershipPlan": "",
+            //     "caseScope": "",
+            //     "caseFlow": "",
+            //     "caseOwner": "",
+            //     "caseOwnerDepartment": "",
+            //     "caseOwnerPhone": "",
+            //     "caseOtherContributor": "",
+            //     "caseSpecialtySequence": "",
+            //     "caseOwnerOrg": "",
+            //     "caseType": "",
+            //     "caseType1": "",
+            //     "caseType2": "",
+            //     "caseTheme": "",
+            //     "caseThemeDescription": "",
+            //     "keyword1": "",
+            //     "keyword2": "",
+            //     "keyword3": "",
+            //     "keyword4": "",
+            //     "keyword5": "",
+            //     "readers": "",
+            //     "caseValue": "",
+            //     "majorIds": ""
+            // },
+            // {
+            //     "id": "985946848324497408",
+            //     "sysCreateAid": "952948626497724414",
+            //     "sysCreateBy": "赵芳",
+            //     "sysCreateTime": "2022-06-13 16:40:47",
+            //     "sysUpdateTime": "2022-06-13 16:40:47",
+            //     "sysUpdateBy": "赵芳",
+            //     "sysVersion": 2,
+            //     "deleted": false,
+            //     "title": "333",
+            //     "companyId": "",
+            //     "content": "",
+            //     "authorInfo":{
+            //       aid: "",
+            //       name: "",
+            //       orgInfo: "",
+            //       avatar: "",
+            //       sex: null
+            //     },
+            //     "filePath": "/case/2022/6/985946831064936448.pdf",
+            //     "fileName": "测试如何写好功能测试用例.pdf",
+            //     "authorId": "952948626497714416",
+            //     "authorName": "李明晶",
+            //     "coverUrl": "",
+            //     "breCommend": "",
+            //     "recommendTime": "",
+            //     "isTop": false,
+            //     "topTime": "",
+            //     "views": 14,
+            //     "comments": 0,
+            //     "praises": 0,
+            //     "shares": 0,
+            //     "favorites": 0,
+            //     "summary": "333",
+            //     "orgDomain": "",
+            //     "orgDomainParent": "e1f1",
+            //     "majorType": "",
+            //     "approvalNumber": "",
+            //     "confidentialityLevel": "",
+            //     "draftingTime": "",
+            //     "endTime": "",
+            //     "drafter": "",
+            //     "department": "",
+            //     "contactNumber": "",
+            //     "email": "",
+            //     "caseChannel": "",
+            //     "isLeadershipPlan": "",
+            //     "caseScope": "",
+            //     "caseFlow": "",
+            //     "caseOwner": "",
+            //     "caseOwnerDepartment": "",
+            //     "caseOwnerPhone": "",
+            //     "caseOtherContributor": "",
+            //     "caseSpecialtySequence": "",
+            //     "caseOwnerOrg": "",
+            //     "caseType": "",
+            //     "caseType1": "",
+            //     "caseType2": "",
+            //     "caseTheme": "",
+            //     "caseThemeDescription": "",
+            //     "keyword1": "",
+            //     "keyword2": "",
+            //     "keyword3": "",
+            //     "keyword4": "",
+            //     "keyword5": "",
+            //     "readers": "",
+            //     "caseValue": "",
+            //     "majorIds": ""
+            // },
+            // {
+            //     "id": "986310529105276925",
+            //     "sysCreateAid": "952948626497724414",
+            //     "sysCreateBy": "赵芳",
+            //     "sysCreateTime": "2022-06-14 16:45:55",
+            //     "sysUpdateTime": "2022-06-14 16:45:55",
+            //     "sysUpdateBy": "赵芳",
+            //     "sysVersion": 0,
+            //     "deleted": false,
+            //     "title": "正式pdf",
+            //     "companyId": "",
+            //     "content": "",
+            //     "authorInfo":{
+            //       aid: "",
+            //       name: "",
+            //       orgInfo: "",
+            //       avatar: "",
+            //       sex: null
+            //     },
+            //     "filePath": "/case/2022/6/986310515628978176.pdf",
+            //     "fileName": "《提升企业数据应用能力，探索数据生产力之路》.pdf",
+            //     "authorId": "952948626497724414",
+            //     "authorName": "赵芳",
+            //     "coverUrl": "",
+            //     "breCommend": "",
+            //     "recommendTime": "",
+            //     "isTop": false,
+            //     "topTime": "",
+            //     "views": 8,
+            //     "comments": 0,
+            //     "praises": 0,
+            //     "shares": 0,
+            //     "favorites": 0,
+            //     "summary": "正式pdf",
+            //     "orgDomain": "d1e2",
+            //     "orgDomainParent": "c1d2",
+            //     "majorType": "a2b4",
+            //     "approvalNumber": "",
+            //     "confidentialityLevel": "",
+            //     "draftingTime": "",
+            //     "endTime": "",
+            //     "drafter": "",
+            //     "department": "",
+            //     "contactNumber": "",
+            //     "email": "",
+            //     "caseChannel": "",
+            //     "isLeadershipPlan": "",
+            //     "caseScope": "",
+            //     "caseFlow": "",
+            //     "caseOwner": "",
+            //     "caseOwnerDepartment": "",
+            //     "caseOwnerPhone": "",
+            //     "caseOtherContributor": "",
+            //     "caseSpecialtySequence": "",
+            //     "caseOwnerOrg": "",
+            //     "caseType": "",
+            //     "caseType1": "",
+            //     "caseType2": "",
+            //     "caseTheme": "",
+            //     "caseThemeDescription": "",
+            //     "keyword1": "正式pdf",
+            //     "keyword2": "正式pdf",
+            //     "keyword3": "正式pdf",
+            //     "keyword4": "正式pdf",
+            //     "keyword5": "正式pdf",
+            //     "readers": "",
+            //     "caseValue": "",
+            //     "majorIds": ""
+            // }
+            //       ],
+
+              }
+          },
+      methods:{
+         //展示全部
+        displayAll(item) {
+          if (!item.isAll && item.summary && item.summary.length > 180) {
+            return item.summary.slice(0, 180) + "...";
+          }
+          return item.summary;
+        },
+        changeIsAll(item) {
+          item.isAll = !item.isAll;
+        },
+        orgDomainTranslate(code){ // 组织领域翻译
+          if(code == '') {
+          return
+          }
+        // let name = '';
+        //   let data = this.orgData.find(item => item.code == code);
+        //   if(data == undefined){
+        //     name = '';
+        //   } else {
+        //     name = data.name;
+        //   }
+          return '组织领域';
+        },
+        majorTypeTranslate(code){ // 专业分类翻译
+          let name = '';
+          // let data = this.Profess.find(item => item.code == code);
+          // if(data == undefined){
+          //   name = '';
+          // } else {
+          //   name = data.name;
+          // }
+          return '专业分类';
+        },
+       
+       }
+      }
+  </script>
+  
+  <style lang="scss" scoped>
+    .clearfix:after{
+      content: "020";
+      display: block;
+      height: 0;
+      clear: both;
+      visibility: hidden;
+    }
+ .keyword-text {
+
+div {
+  padding:0px 8px;
+  margin-top: 5px;
+  float: left;
+  line-height: 24px;
+  font-size: 12px;
+  border-radius:2px;
+  margin-right: 8px;
+  color: #2C68FF;
+  height: 24px;
+  background: rgba(44,104,255,0.06);
+}
+}
+.case-titdiv {
+    line-height: 30px;
+    display: flex;
+    .case-tittext {
+      font-size: 18px;
+      font-weight: 600;
+      margin-top: 16px;
+      color: #333333;
+      width: 73%;
+      display: -webkit-box;
+      overflow: hidden;
+      word-break: break-all;
+      text-overflow: ellipsis;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      box-sizing: border-box;
+    }
+  }
+    .data-content {
+    background-color: #fff;
+    // padding: 5px 50px;
+    ::v-deep .interact-bar-btns{
+      .interact-bar-btn{
+        text-align: right;
+        min-width: 78px !important;
+        margin-right: 0;
+      }
+    }
+  }
+  .case-list:last-child {
+      border-bottom: none;
+    }
+
+    .case-list {
+      border-bottom: 1px solid rgba(153, 153, 153,.2);
+      margin: 8px 0px;
+      padding-bottom: 15px;
+      padding-left: 5px;
+      padding-right: 5px;
+    }
+    .case-image {
+      width: 230px;
+      height: 170px;
+      float: left;
+      border: 1px solid #eee;
+    }
+
+    .case-info {
+      .case-info-cont {
+        .case-info-title {
+          font-size: 15px;
+          color: #333;
+          font-weight: 600;
+          height: 30px;
+          .case-info-date {
+            flex: 1;
+            text-align: right;
+            font-weight: normal;
+            // font-size: 12px;
+            // height: 30px;
+            // font-weight: 200;
+            // color: #8590a6;
+            i {
+              margin-right: 5px;
+            }
+          }
+        }
+        .case-info-summary {
+          margin-top:16px;
+          cursor: pointer;
+          // margin-bottom: 5px;
+          word-break: break-all;
+          line-height: 24px;
+          font-size: 14px;
+          color: #333330;
+          font-weight: 400;
+        }
+        .case-info-tools {
+          height: 30px;
+          .case-info-tools-auth {
+            float: left;
+            font-size: 13px;
+            color: #999999;
+            img {
+              margin-right: 10px;
+              width: 30px;
+              border: 1px solid #eee;
+              border-radius: 50%;
+              vertical-align: middle;
+            }
+          }
+          .case-info-tools-btns {
+            float: right;
+            .case-info-tools-btn {
+              margin: 0 0 0 15px;
+            }
+          }
+        }
+      }
+    }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/HomePage/courseList.vue b/src/components/HomePage/courseList.vue
new file mode 100644
index 00000000..1a53888d
--- /dev/null
+++ b/src/components/HomePage/courseList.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="">
+      <ul class="data-info-ul" v-if="courseList.length > 0">
+        <li class="data-info">
+            <!-- <course-image height="144px" :course="cinfo"></course-image> -->
+            <img style="width:254px;height:144px" src="/images/list-img.png" alt="">
+            <div class="data-cen">
+                <h6 class="course-tit portal-title-tow">京东方商业洞察BIP模型 <span class="score-info">5.0分</span> </h6>
+                <p class="title-info">通俗易懂的入门课程</p>
+                <div class="pro-line"> <div>当前进度：</div> <div style="width:200px"><el-progress :percentage="50"></el-progress></div></div>
+                <p class="portal-time">最新一次学习时间：2022-5-28 22:30:28</p>
+            </div> 
+            <div style="width:150px">
+                <div class="case-info-date portal-time" style="text-align: right;">
+                    <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
+                </div>
+                <div class="btn-right">
+                    <el-button class="btn" type="primary">确定</el-button>
+                </div>
+            </div>
+        </li>
+      </ul>
+      <div v-else class="home-no-list">
+            <img class="img" src="/images/homeWu/no-course.png" alt="" srcset="">
+            <p class="text">还没有课程</p>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+      export default{
+          data(){
+              return{
+                courseList:[]
+              }
+          },
+      methods:{
+       
+       }
+      }
+  </script>
+  
+  <style lang="scss" scoped>
+    .data-info-ul{
+        margin: 0;
+        padding-top: 32px;
+    }
+  .data-info{
+    display: flex;
+    border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2);
+    padding-bottom: 38px;
+    margin-bottom: 32px;
+    .data-cen{
+        flex: 100%;
+        margin: 0 28px;
+        .course-tit{
+            margin: 0;
+            font-size: 18px !important;
+            line-height: 25px;
+            .score-info{
+                font-size: 14px;
+                font-weight: 600;
+                color: #FC6401;
+                margin-left: 20px;
+            }
+        }
+        .title-info{
+            font-size: 14px;
+            color: #333333;
+            margin-top: 14px;
+        }
+        .pro-line{
+           margin: 30px 0 16px 0;
+           font-size: 14px;
+           color: #333333;
+           display: flex;
+        }
+       
+    }
+    .btn-right{
+            margin-top: 48px;
+            .btn{
+                width: 140px;
+                height: 40px;
+            }
+        }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/UcHeader/Index.vue b/src/components/UcHeader/Index.vue
index 8f45e5a3..97ac0b65 100644
--- a/src/components/UcHeader/Index.vue
+++ b/src/components/UcHeader/Index.vue
@@ -15,7 +15,8 @@
 
          <div class="user-content">
             <div class="content-top">
-              <h6>{{userInfo.name}}</h6>
+              <h6><router-link to="/homePage"> {{userInfo.name}}</router-link>
+               </h6>
               <span>{{orgInfo}}</span>
                <el-link @click="toPage('/user/Setting')" type="info" :underline="false"> <el-button class="editbutt" icon="el-icon-edit" type="text">编辑资料</el-button></el-link>
             </div>
@@ -36,16 +37,16 @@
       <div class="learningData">
         <div class="learning-info">
            <div class="learning-qus">当月学习时长</div>
-           <div class="learning-an"><span>{{uinfo.monthStudy}}</span>小时</div>
+           <div class="learning-an"><span>{{uinfo.monthStudy}}</span>h</div>
         </div>
          <div class="learning-info">
            <div class="learning-qus">累计学习时长</div>
-           <div class="learning-an"><span>{{uinfo.monthTotal}}</span>小时</div>
+           <div class="learning-an"><span>{{uinfo.monthTotal}}</span>h</div>
         </div>
         <div class="learning-border" ></div>
          <div class="learning-info" style="margin-left:22px">
            <div class="learning-qus">当月学习天数</div>
-           <div class="learning-an"><span>{{uinfo.monthDay}}</span>小时</div>
+           <div class="learning-an"><span>{{uinfo.monthDay}}</span>天</div>
         </div>
          <div class="learning-info">
            <div class="learning-qus">累计学习天数</div>
@@ -54,7 +55,7 @@
          <div class="learning-border" ></div>
          <div class="learning-info" style="margin-left:22px">
            <div class="learning-qus">我的U币（累计）</div>
-           <div class="learning-an"><span>{{uinfo.uCurrency}}</span>天</div>
+           <div class="learning-an"><span>{{uinfo.uCurrency}}</span></div>
         </div>
         <div class="list">
           BOE 排行榜 >>
@@ -206,6 +207,7 @@ import {userAvatarText,cutFullName} from "@/utils/tools.js";
             font-weight: 600;
             font-size: 22px;
             color: #0060FF;
+            margin-right: 6px;
           }
      }
   }
diff --git a/src/layout/components/TopNav/Index.vue b/src/layout/components/TopNav/Index.vue
index b23fe3a1..b1978804 100644
--- a/src/layout/components/TopNav/Index.vue
+++ b/src/layout/components/TopNav/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="xtop">
-      <div class="xtop-content xcontent">
+      <div class="xtop-content xcontent" style="margin:0 40px">
       <div class="xtop-left">
         <!-- <div> -->
           <router-link class="routerLink" to="/index"><img src="../../../assets/logo/logo2.png" style="width:240px;height: 40px;" /></router-link> 
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 58564969..60d2a5ad 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -48,7 +48,6 @@ const user = {
     actions: {
          // /用户触发事件
          userTrigger({ commit }, event) {
-            console.log(event,'event');
             apiStat.sendEvent(event).then(res=>{
                 console.log(res,'userTrigger');
             })
diff --git a/src/views/homepage/Index.vue b/src/views/homepage/Index.vue
index 20e29c59..a35705d3 100644
--- a/src/views/homepage/Index.vue
+++ b/src/views/homepage/Index.vue
@@ -1,10 +1,15 @@
 <template>
     <div class="home-page">
         <top></top>
-        <div style="height:54px"></div>
+        <div style="height:72px"></div>
         <UcHeader></UcHeader>
         <div class="home-page-box">
             <div class="home-page-left">
+                <div class="book-input">
+                    <span>分享书籍</span>
+                    <el-input style="width:130px" v-model="input" placeholder="请输入内容"></el-input>
+                    <i style="color: #333333" class="el-icon-search"></i>
+                </div>
                 <el-tabs v-model="activeName" @tab-click="handleClick">
                     <el-tab-pane name="first">
                         <span slot="label"><svg-icon icon-class="home-dynamic" style="font-size: 30px;"></svg-icon> <span class="tabs-info">动态</span></span>
@@ -12,11 +17,11 @@
                     </el-tab-pane>
                     <el-tab-pane name="second">
                         <span slot="label"><svg-icon icon-class="home-course" style="font-size: 30px;"></svg-icon><span class="tabs-info">课程</span></span>
-                        课程
+                        <course-list></course-list>
                     </el-tab-pane>
                     <el-tab-pane name="case">
                         <span slot="label"><svg-icon icon-class="home-case" style="font-size: 30px;"></svg-icon><span class="tabs-info">案例</span></span>
-                        案例
+                        <case-list></case-list>
                     </el-tab-pane>
                     <el-tab-pane name="note">
                         <span slot="label"><svg-icon icon-class="home-note" style="font-size: 30px;"></svg-icon><span class="tabs-info">笔记</span></span>
@@ -30,7 +35,7 @@
                         <span slot="label"><svg-icon icon-class="home-answer" style="font-size: 30px;"></svg-icon><span class="tabs-info">回答</span></span>
                         回答
                     </el-tab-pane>
-                    <el-tab-pane name="fourth">
+                    <el-tab-pane name="article">
                         <span slot="label"><svg-icon icon-class="home-article" style="font-size: 30px;"></svg-icon><span class="tabs-info">文章</span></span>
                         文章
                     </el-tab-pane>
@@ -56,24 +61,24 @@
                         <span class="per-text">他关注的人</span>
                     </li>
                 </ul>
-                <div>
+                <div style="padding-top:10px;">
                     <p class="ach-title">TA的成就</p>
-                    <ul>
-                        <li>
+                    <ul class="ach-ul">
+                        <li class="ach-box" v-for="ach in 5">
                             <img src="/images/medal.png" alt="">
                             <p>跬步千里</p>
                             <p>LV.1</p>
                         </li>
                     </ul>
                 </div>
-                <div>
+                <div style="padding-top:16px">
                     <p class="ach-title">可能感兴趣</p>
                     <ul>
-                        <li>
+                        <li class="ava-info" v-for="ava in 3">
                             <img src="/images/Avatarwoman.png" />
-                            <div>
-                                <p>双子座</p>
-                                <p>你必须非常努力才能看起来毫不费力</p>
+                            <div class="ava-text">
+                                <p style="color: #333333;">王明</p>
+                                <p style="color: #666666;">你必须非常努力才能看起来毫不费力</p>
                             </div>
                         </li>
                     </ul>
@@ -87,12 +92,15 @@
     // import top from './components/TopNav/Index.vue'
     import top from '../../layout/components/TopNav/Index.vue'
     import UcHeader from '@/components/UcHeader/Index.vue'
+    import CaseList from '@/components/HomePage/caseList.vue'
+    import CourseList from '@/components/HomePage/courseList.vue'
 
     export default{
-        components:{top,UcHeader},
+        components:{top,UcHeader,CaseList,CourseList},
         data(){
             return{
-                activeName:'',
+                input:'',
+                activeName:'first',
             }
         },
       methods:{
@@ -105,14 +113,51 @@
   
   <style lang="scss" scoped>
      .home-page{
+       ::v-deep .el-tabs__active-bar{
+          height: 4px;
+          border-radius: 3px;
+          background: #387DF7;
+          margin-top: 15px;
+        }
+        ::v-deep .el-tabs__item{
+            padding: 0 17px;
+            height: 55px;
+        }
+        ::v-deep .el-tabs__nav-wrap::after{
+            height: 1px;
+            background-color: 979797;
+        }
         .home-page-box{
             padding: 24px 84px;
             display: flex;
             .home-page-left{
-                width: 100%;
+                flex: 1;
+                // width: 100%;
                 background: #FFFFFF;
                 border-radius: 4px;
                 padding: 25px 47px;
+                position: relative;
+                .book-input{
+                    position: absolute;
+                    right: 50px;
+                    width: 250px;
+                    height: 40px;
+                    border: 1px solid rgba(153,153,153,0.5);
+                    border-radius: 19px;
+                    span{
+                        display: inline-block;
+                        font-size: 14px;
+                        color: #999999;
+                        padding: 0 10px 0 16px;
+                        border-right:  1px solid rgba($color: #999999, $alpha: 0.48);
+                    }
+                    ::v-deep .el-input__inner{
+                        border: none !important;
+                    }
+                    ::v-deep .el-icon-search{
+                        color: #333333 !important;
+                    }
+                }
                 // display: flex;
                 .svg-icon{
                     vertical-align: middle;
@@ -124,20 +169,21 @@
                 }
             }
             .home-page-right{
-                padding: 40px 52px;
+                width: 395px;
+                padding: 40px 52px 18px 52px;
                 box-sizing: border-box;
-                width: 396px;
                 background: #fff;
                 border-radius: 4px;
                 margin-left: 25px;
                 .total-per{
                     display: flex;
-                    justify-content: space-between;
+                    // justify-content: space-between;
                     padding-bottom: 28px;
-                    border-bottom: 1px solid #999999;
+                    border-bottom:  1px solid rgba($color: #999999, $alpha: 0.21);
                     .per-li{
                         width: 90px;
                         text-align: center;
+                        margin: 0 25px;
                         .per-info{
                         display: block;
                         font-size: 28px;
@@ -156,6 +202,45 @@
                     font-weight: 600;
                     color: #333333;
                 }
+                .ach-ul{
+                    display: flex;
+                    flex-wrap: wrap;
+                    border-bottom:  1px solid rgba($color: #999999, $alpha: 0.21);
+                    padding-bottom: 4px;
+                    .ach-box{
+                        flex: 33%;
+                        width: 57px;
+                        text-align: center;
+                        margin-bottom: 18px;
+                        img{
+                            width: 52px;
+                            height: 58px;
+                            margin-bottom: 4px;
+                        }
+                        p{
+                            font-size: 14px;
+                            color: #333333;
+                            line-height: 20px;
+                        }
+
+                    }
+                }
+                .ava-info{
+                    display: flex;
+                    padding: 10px 0 30px 0;
+                    img{
+                        width: 48px;
+                        height: 48px;
+                    }
+                    .ava-text{
+                        padding: 2px 0;
+                        margin-left: 18px;
+                        font-size: 14px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+                    }
+                }
             }
         }
      }