diff --git a/src/components/HomePage/homePage.vue b/src/components/HomePage/homePage.vue
new file mode 100644
index 00000000..03c24c1d
--- /dev/null
+++ b/src/components/HomePage/homePage.vue
@@ -0,0 +1,334 @@
+<template>
+    <div class="uc-header xcontent">
+      <div class="header-box" >
+        <div class="personalData">
+           <!-- <div >
+             <img src="../../../public/images/Avatarwoman.png" alt="">
+           </div> -->
+            <div class="uesr-avaer">
+            <img :src="userInfo.avatar" v-if="userInfo.avatar !== '' ">
+            <div v-else class="uavatar">
+                <div v-if="sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div>
+                <div v-else><img src="../../../public/images/Avatarwoman.png" alt=""></div>
+            </div>
+             </div>
+  
+           <div class="user-content">
+              <div class="content-top">
+                <h6 content-bottom><router-link to="/homePage"> {{userInfo.name}}</router-link>
+                 </h6>
+                 <div class="grade">
+                     <div>LV.1</div>
+                     <span style="color: #A3680A;margin-left:12px;line-height: 24px;">经验值：367</span>
+                 </div>
+                 <el-button round plain class="btn-user" size="small">关注TA</el-button>
+                 <el-button round plain class="btn-user" size="small"><router-link to="/homePage/leavingMessage">去留言</router-link></el-button>
+              </div>
+              <div class="content-bottom">
+                <p class="portal-summary-text">你必须非常努力才能看起来毫不费力</p>
+              </div>
+              
+           </div>
+        </div>
+        <div class="learningData">
+          <div class="learning-info">
+             <div class="learning-qus">当月学习时长</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>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>
+           <div class="learning-info">
+             <div class="learning-qus">累计学习天数</div>
+             <div class="learning-an"><span>{{uinfo.monthTotalDay}}</span>天</div>
+          </div>
+           <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>
+          <div class="list">
+            BOE 排行榜 >>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import {userAvatarText,cutFullName} from "@/utils/tools.js";
+    import { mapGetters } from 'vuex'
+    import apiStart from '@/api/phase2/stat.js'
+    export default {
+      name: 'UcHeader',
+      computed:{
+        ...mapGetters(['curIdentity','identity','userInfo']),
+              avatarText(){
+                  return userAvatarText(this.userInfo.name);
+              }
+          },
+      data(){
+        return {
+          fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
+          uinfo:{
+            monthStudy:0,//当月学习时长
+            monthTotal: 0,
+            monthDay:0,
+            monthTotalDay:0,
+            uCurrency:0
+          },
+          orgInfo:'',
+          sex:'',
+        }
+      },
+      mounted() {
+         this.sex = this.userInfo.sex;
+        // 判断路由是进入的学员默认页面就重置setCurIdentity
+        if(this.$route.path == '/uc/study/task' || this.$route.path == '/study/index'){
+          this.setCurIdentity(1);
+        }
+        //let testName='京东方科技集团股份有限公司/北京中祥英科技有限公司/技术中心';
+        //this.orgInfo=cutFullName(testName,1);
+        this.orgInfo=cutFullName(this.userInfo.departFullName,1);
+        this.getInfo();
+      },
+      methods:{
+        getInfo(){
+          apiStart.userTotal(this.userInfo.aid,[10,11,30]).then(res=>{
+             if(res.status == 200 && res.result.length > 0) {
+              res.result.forEach(item => {
+                if(item.statType == 10) {
+                  this.uinfo.monthStudy = item.months;
+                  this.uinfo.monthTotal = item.total;
+                }
+                if(item.statType == 11) {
+                  this.uinfo.monthDay = item.months;
+                  this.uinfo.monthTotalDay = item.total;
+                }
+                if(item.statType == 30) {
+                  this.uinfo.uCurrency = item.total;
+                }
+              });
+             } 
+          })
+        },
+        setCurIdentity(iden){
+          this.$store.dispatch('SetCurIdentity',iden);
+        },
+        toPage(url){
+          this.$router.push({path:url})
+        },
+      }
+    }
+  </script>
+  
+  <style lang="scss" scoped>
+  .list{
+    font-size: 16px;
+    font-weight: 600;
+    color: #333333;
+    margin-top: 20px;
+  }
+  .learningData{
+     width: 50%;
+    padding-top: 70px;
+    box-sizing: border-box;
+    margin-left:auto;
+    .learning-info{
+      float: left;
+      margin-right: 22px;
+       .learning-qus{
+            font-size: 14px;
+            color: #666660;
+            margin-bottom: 24px;
+       }
+       .learning-an{
+            color: #999999;
+            text-align: center;
+            font-size: 14px;
+            span{
+              font-weight: 600;
+              font-size: 22px;
+              color: #0060FF;
+              margin-right: 6px;
+            }
+       }
+    }
+    .learning-border{
+      width: 1px;
+      height: 49px;
+      opacity: 0.3;
+      border: 1px solid #AAA6A6;
+      float: left;
+      margin-top: 5px;
+    }
+  }
+//   .content-bottom{
+//     margin-top: 12px;
+     .medal{
+       float: left;
+       img{
+           width: 36px;
+           height: 40px;
+           margin-right: 10px;
+           vertical-align: top;
+       }
+     }
+    
+     .medalbutt{
+       color: #333333;
+       font-size: 14px;
+       float: left;
+       margin-top: 10px;
+     }
+     .grade{
+       float: left;
+       margin-top: 10px;
+       div{
+         margin-left: 22px;
+         font-weight: 600;
+          float: left;
+          width: 57px;
+          height: 24px;
+          text-align: center;
+          line-height: 24px;
+          color: #9D6110 ;
+          background: url('../../../public/images/lvbg.png') no-repeat 100% / 100%;
+       }
+     }
+//   }
+  .personalData{
+   
+    flex: 1;
+    padding-top: 40px;
+    padding-left: 115px;
+    box-sizing: border-box;
+    display: flex;
+    .uesr-avaer{
+      width: 120px;
+      height: 120px;
+      margin-right: 30px;
+      img{
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        vertical-align: top;
+      }
+    }
+    .user-content{
+      flex: 1;
+      .content-top{
+        margin-top: 15px;
+        height: 56px;
+        .btn-user{
+            margin-top: 6px;
+            width: 80px;
+            height: 30px;
+            border-radius: 20px;
+            border: 1px solid #0060FF;
+            color: #0060FF;
+        }
+        h6{
+          color: #333333;
+          font-size: 26px;
+          margin:0;
+          float: left;
+        }
+        span{
+          color: #999999;
+          font-size: 14px;
+          margin-left: 5px;
+          margin-right: 24px;
+        }
+        .editbutt{
+          font-size: 14px;
+          color: #333333;
+  
+          
+        }
+      }
+    }
+  }
+  
+  .header-box{
+    display: flex;
+    justify-content: space-between;
+    height: 210px;
+    background: url('../../../public/images/userbgimg.png') no-repeat;
+    background-size:445px 210px;
+     background-position: right 0;
+  }
+  
+   .uc-header{
+     height: 210px;
+     margin: 0 auto;
+  
+    background: #fff;
+    //  background-color: #c9c2c2;
+   }
+   .upicon{
+     text-align: center;
+     cursor: pointer;
+     margin-top: 10px;
+     margin-left: 15px;
+     font-size: 14px;
+     i{font-size: 30px;color: #ffb30f;}
+     div{color: #7b7b7b;padding: 5px 0px 10px 0px;}
+   }
+   .upicon:focus div{
+       color: #588afc;
+   }
+   .identity{
+     padding: 5px 10px;
+     border: 1px solid #fcfcfc;
+     border-radius: 8px;
+     cursor: pointer;
+     background-color: #ffffff;
+     margin: 5px;
+   }
+   .active{
+     background-color: #ffb30f;
+     color: #FFFFFF;
+      border: 1px solid #ffb30f;
+   }
+   .uc-alert{
+    margin: 10px;
+    text-align: center;
+    padding: 0px 50x;
+    .uc-alert-label{
+       color: #3f3f3f;
+    }
+    .uc-alert-value{
+      padding-top: 10px;
+       color: #aa0000;
+    }
+   }
+   .uavatar{
+     border-radius: 50%;
+      // border: 1px solid #73adfe;
+      // color: #73adfe;
+      text-align: center;
+      font-size: 30px;
+      line-height: 100px;
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      // background: #d9e9ff;
+      div{
+       border-radius: 50%;
+        img{
+       border-radius: 50%;
+          width: 100px;
+          height: 100px;
+  
+  }
+      }
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index fff724e2..4f1d373f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -154,7 +154,23 @@ export const constantRoutes = [{
     hidden: true,
     component: (resolve) => require(['@/views/homepage/Index'], resolve),
     name: 'homePage',
+    redirect: '/homePage/page',
     meta: { title: '主页', icon: 'dashboard', noCache: true, affix: false },
+    children: [{
+        path: 'page',
+        hidden: true,
+        component: (resolve) => require(['@/views/homepage/page'], resolve),
+        name: 'page',
+        meta: { title: '主页', icon: 'dashboard', noCache: true, affix: true }
+    },
+    {
+        path: 'leavingMessage',
+        hidden: true,
+        component: (resolve) => require(['@/views/homepage/leavingMessage'], resolve),
+        name: 'leavingMessage',
+        meta: { title: '留言', icon: 'dashboard', noCache: true, affix: true }
+    }
+]
 },
 {
     path: '/comments',
diff --git a/src/views/homepage/Index.vue b/src/views/homepage/Index.vue
index c62e06bb..e5560fe7 100644
--- a/src/views/homepage/Index.vue
+++ b/src/views/homepage/Index.vue
@@ -3,7 +3,8 @@
         <top></top>
         <div style="height:72px"></div>
         <UcHeader></UcHeader>
-        <div class="home-page-box">
+        <router-view />
+        <!-- <div class="home-page-box">
             <div class="home-page-left">
                 <div class="book-input">
                     <span>分享书籍</span>
@@ -84,13 +85,13 @@
                     </ul>
                 </div>
             </div>
-        </div>
+        </div> -->
     </div>
   </template>
   
   <script>
     import top from '../../layout/components/TopNav/Index.vue'
-    import UcHeader from '@/components/UcHeader/Index.vue'
+    import UcHeader from '@/components/HomePage/homePage.vue'
     import CaseList from '@/components/HomePage/caseList.vue'
     import CourseList from '@/components/HomePage/courseList.vue'
     import NoteList from "@/components/HomePage/noteList.vue"
diff --git a/src/views/homepage/leavingMessage.vue b/src/views/homepage/leavingMessage.vue
new file mode 100644
index 00000000..e1466040
--- /dev/null
+++ b/src/views/homepage/leavingMessage.vue
@@ -0,0 +1,907 @@
+<template>
+    <!--评论组件-->
+    <div class="comments">
+        <div v-if="showTop" class="comments-top">
+            <div class="comments-top-left">评论 <span style="color: #797979;">{{total}}条</span>
+                <el-checkbox v-if="objType ==2" class="btn" v-model="value" type="primary">只看作者</el-checkbox>
+                <!-- <el-checkbox v-if="objType ==3" class="btn" v-model="value" type="primary">{{value?'查看所有':'只看案主 @案主可以给他发私信哦'}}</el-checkbox> -->
+                  <!-- <el-radio-group class="btn" v-if="objType ==3" v-model="radio">
+                    <el-radio v-show="radio == 2" :label="1">查看所有</el-radio>
+                    <el-radio v-show="radio == 1" :label="2">只看案主 @案主可以给他发私信哦</el-radio>
+                  </el-radio-group> -->
+                <el-checkbox v-if="objType ==3" class="btn" v-model="value" type="primary">{{'只看案主'}}</el-checkbox>
+                <span v-if="objType ==3" class="anzhu"> @案主可以给他发私信哦</span>
+                <!-- <span v-if="objType ==3"><span v-if="value" @click="value = true">查看所有</span><span v-if="!value" @click="value = false">只看案主 @案主可以给他发私信哦</span></span> -->
+            </div>
+            <!-- <div class="comments-top-right" v-if="objType !==2">
+                <span @click="showList(false)" v-if="listShow">收起<i class="el-icon-arrow-down"></i></span>
+                <span @click="showList(true)" v-else >打开<i class="el-icon-arrow-up"></i></span>
+            </div> -->
+        </div>
+        <div class="comments-input" v-if="!readonly">
+        <div class="grid-content bg-purple">
+          <div style="position: relative !important" class="at-min">
+            <!-- <el-popover placement="top" width="300" trigger="click">
+                            <el-radio-group v-model="teacherInfo">
+                              <el-radio-button class="reference-tag" v-for="item in teachers" :key="item.id" :label="item.teacherName"></el-radio-button>
+                            </el-radio-group>
+                          <el-tag ref="tag" slot="reference"></el-tag>
+                        </el-popover> -->
+            <el-popover placement="top-start"  width="160" v-model="visible">
+              <p style="margin-bottom: 10px">请选择要@的老师</p>
+  
+              <div>
+                <el-radio-group v-model="toUserId" @change="confirmTeacher()">
+                  <el-radio-button
+                    class="reference-tag"
+                    v-for="item in toUsers"
+                    :key="item.aid"
+                    :label="item.aid">{{ item.name }}</el-radio-button>
+                </el-radio-group>
+              </div>
+  
+              <!-- <div style="text-align: right; margin: 0">
+                      <el-button size="mini" type="text" @click="cancelTeacher()">取消</el-button>
+                      <el-button type="primary"  >确定</el-button>
+                    </div> -->
+              <el-tag ref="tag" slot="reference" class="tag-block"></el-tag>
+            </el-popover>
+          </div>
+          <div style="width:100%;display:flex;">
+            <div style="flex: 1;">
+               <!-- type="textarea"
+                :row="1" -->
+              <el-input
+                v-if="objType  !==3"
+                :autosize="{ minRows: 2, maxRows: 2 }"
+                type="textarea"
+                class="hideControl"
+                show-word-limit
+                v-model="inputValue"
+                maxlength="800"
+                placeholder="写下您的评论(800字以内)，可以@作者哦～"
+              ></el-input>
+              <el-input
+              v-if="objType ==3"
+                :autosize="{ minRows: 2, maxRows: 2 }"
+                type="textarea"
+                class="hideControl"
+                show-word-limit
+                v-model="inputValue"
+                maxlength="800"
+                placeholder="写下您的评论(800字以内)，可以@案主哦～"
+              ></el-input>
+  
+  
+            </div>
+            <div style="width: 90px;display: flex;justify-content: flex-end;">
+              <el-button @click="submit()" style="height: 48px" type="primary">发布</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+        <!--列表内容-->
+        <div class="comments-items" v-show="listShow">
+            <!--一个评论-->
+            <div class="zan-wu" v-if="list.length == 0">暂无评论～</div>
+            <div class="comment" v-for="(com,comIdx) in list" :key="com.id">
+                 <div class="comment-top">
+                    <div class="comment-author">
+                        <authorInfo :avatar="com.avatar" :name="com.sysCreateBy" :sex="com.sex"></authorInfo>
+                    </div>
+                    <div class="comment-time">
+                        <showTime :time="com.sysCreateTime"></showTime>
+                    </div>
+                 </div>
+                 <div class="comment-body" >
+                      <div class="comment-info" @mouseover="showButtons(com.id)" @mouseout="hideButtons()">
+                        <div class="comment-content" @click="cancelReply()">
+                            <span style="color: #303133" v-html="displayAll(com)"></span>
+                            <span v-if="com.content.length>170" @click="changeIsAll(com)">
+                              {{com.isAll?'收起':'全文'}}
+                            </span>
+                        </div>
+                        <div class="comment-btns">
+                           <!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
+                           <div v-show="btnsShowRowId==com.id">
+                             <a @click="showReply(com)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
+                             <!--必须当前登录人是一个人-->
+                             <a v-if="userInfo.aid==com.sysCreateAid" @click="delCommnet(com,comIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
+                             <!-- <a v-if="com.replyList && com.replyList.length==5" @click="showMoreReply(com)" ><svg-icon icon-class="all" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>全部</span></a> -->
+                           </div>
+                        </div>
+                        <div v-if="replyInfo.parentId==com.id" class="comment-reply" style="padding-bottom: 5px;">
+                          <div style="width:100%;display:flex;">
+                            <div style="flex: 1;">
+                              <el-input class="hideControl" type="textarea" show-word-limit v-model="replyInfo.content"  maxlength="800" placeholder="回复内容..."></el-input>
+                            </div>
+                            <div style="width: 120px;display: flex;justify-content: flex-end;">
+                              <el-button @click="submitReply(com)" type="primary">发布回复</el-button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <!--回复内容-->
+                      <div v-if="com.replyList && com.replyList.length>0">
+                           <div class="comment" v-for="(reply,replyIdx) in com.replyList" :key="reply.id" :class="replyIdx===com.replyList.length-1 ? 'comment-last' : ''">
+                                <div class="comment-top">
+                                   <div class="comment-author">
+                                     <authorInfo :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex"></authorInfo>
+                                     <span style="margin-left: 10px;color: #8590A6;font-size:14px; ">回复</span>
+                                     <span style="margin-left: 10px; font-size:14px">{{reply.replyName || reply.toAname}}</span>
+                                   </div>
+                                   <div class="comment-time">
+                                       <showTime :time="reply.sysCreateTime"></showTime>
+                                   </div>
+                                </div>
+                                <div class="comment-body" @mouseover="showButtons(reply.id)" @mouseout="hideButtons()">
+                                  <div class="comment-info" >
+                                     <div class="comment-content"  @click="cancelReply()">
+                                          <span style="color: #303133" v-html="displayAll(reply)"></span>
+                                          <span v-if="reply.content.length>170" @click="changeIsAll(reply)">
+                                            {{reply.isAll?'收起':'全文'}}
+                                          </span>
+                                      </div>
+                                     <div class="comment-btns">
+                                        <!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
+                                        <div v-show="btnsShowRowId==reply.id">
+                                          <a  @click="showReply(reply)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
+                                          <a  v-if="userInfo.aid==reply.sysCreateAid" @click="delReply(com,reply,replyIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
+                                        </div>
+                                     </div>
+                                  </div>
+                                  <!--发布回复-->
+                                  <div v-if="replyInfo.parentId==reply.id" class="comment-reply" style="padding-bottom: 5px;">
+                                       <div style="width:100%;display:flex;">
+                                          <div style="flex: 1;">
+                                           <el-input show-word-limit class="hideControl" type="textarea" v-model="replyInfo.content"  maxlength="100" placeholder="回复内容..."></el-input>
+                                         </div>
+                                         <div style="width: 120px;display: flex;justify-content: flex-end;">
+                                           <el-button @click="submitReply(com)" type="primary">发布回复</el-button>
+                                         </div>
+                                       </div>
+                                     </div>
+                                </div>
+                           </div>
+                      </div>
+                    </div>
+                 </div>
+        </div>
+        <div class="pagination-div">
+           <!-- v-if="moreState == 1 -->
+            <span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
+            <span class="pag-text-msg" style="font-size:14px;color: #444444;" v-else-if="list.length !== 0 && moreState == 3">没有更多数据了</span>
+        </div>
+        <el-dialog title="全部回复内容" width="60%" :visible.sync="replyDiaglog.show" :close-on-click-modal="false" custom-class="g-dialog">
+            <div style="padding: 10px;max-height: 500px;overflow-y: auto;">
+                <div class="comment" v-for="(reply,rIdx) in replyDiaglog.list" :key="rIdx">
+                     <div class="comment-top">
+                        <div class="comment-author">
+                            <authorInfo :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex"></authorInfo>
+                            <span style="margin-left: 10px;color: #8590A6;font-size:14px; ">回复</span>
+                            <span style="margin-left: 10px; font-size:14px">{{reply.replyName || reply.toAname}}</span>
+                        </div>
+                        <div class="comment-time">
+                            <showTime :time="reply.sysCreateTime"></showTime>
+                        </div>
+                     </div>
+                     <div class="comment-body"  @mouseover="showButtons(reply.id)" @mouseout="hideButtons()">
+                          <div class="comment-info">
+                            <div class="comment-content">{{reply.content}}</div>
+                            <div class="comment-btns"><!--操作还没有加-->
+                                <div v-show="btnsShowRowId==reply.id">
+                                  <a  @click="showDlgReply(reply)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
+                                  <a  v-if="userInfo.aid==reply.sysCreateAid" @click="delDlgReply(reply,rIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
+                                </div>
+                            </div>
+                          </div>
+                          <!--发布回复-->
+                          <div v-if="replyInfo.parentId==reply.id" class="comment-reply" style="padding-bottom: 5px;">
+                           <div style="width:100%;display:flex;">
+                              <div style="flex: 1;">
+                               <el-input show-word-limit class="hideControl" type="textarea" v-model="replyInfo.content"  maxlength="100" placeholder="回复内容..."></el-input>
+                             </div>
+                             <div style="width: 120px;display: flex;justify-content: flex-end;">
+                               <el-button @click="submitDlgReply(com)" type="primary">发布回复</el-button>
+                             </div>
+                           </div>
+                         </div>
+                    </div>
+                </div>
+                <div  style="padding: 20px 10px;text-align: center;">
+                    <div v-if="replyDiaglog.pages>replyDiaglog.pageIndex">
+                      <span class="pag-text" @click="loadMoreReply()">加载更多</span>
+                    </div>
+                    <div v-else >
+                      <span class="pag-text-msg">没有更多数据了</span>
+                    </div>
+                </div>
+            </div>
+            <span slot="footer" class="dialog-footer">
+              <el-button @click="replyDiaglog.show= false"> 关 闭 </el-button>
+            </span>
+        </el-dialog>
+    </div>
+  </template>
+  <script>
+    import showTime from '@/components/Portal/datetimeShow.vue'
+    import apiComment from '@/api/modules/comments.js'
+    import apiUser from '@/api/system/user.js'
+    import authorInfo from '@/components/Portal/authorInfo.vue';
+    // import author from '@/components/Portal/author.vue';
+    import { mapGetters } from 'vuex';
+    export default {
+        props:{
+            showTop:{
+                type:Boolean,
+                default:true
+            },
+        authorId:{
+          type:String,
+        },
+        objId:{
+          type:String,
+          required:true
+        },
+        objType:{
+          type:Number,
+          required:true
+        },
+        objTitle:{
+          type:String,
+          default:''
+        },
+        toUsers:{
+          type:Array,
+        },
+  
+        readonly:{
+          type:Boolean,
+          default:false
+        }
+        },
+      components:{showTime,authorInfo},
+      computed: {
+        ...mapGetters(['userInfo'])
+      },
+        data() {
+            return {
+          radio:1,
+          value:false,
+          sex:null,
+          author:'',
+          moreState:1,
+          isAuthor: false,
+          authorList:[],//当前页面存储的用户信息，如果已经存在就不再重新请求了
+          toUserId: '',
+            loadStatus:'more',//more,loading,noMore
+                pageSize:10,
+                pageIndex:1,
+          total:0,
+          listShow:true,
+                inputValue:'',
+                list:[],
+                replyParent:{},
+          replyShow:false,
+          btnsShowRowId:'',
+          replyInfo:{
+            clevel:2,
+            parentId:'',
+            replyAid:'',
+            commentId:'',
+            replyName:'',
+            objType:'',
+            objId:'',
+            content:''
+          },
+          replyDiaglog:{
+            show:false,
+            pageIndex:1,
+            pageSize:8,
+            pages:1,
+            count:0,
+            commentId:'',
+            list:[]
+          },
+          toUserDig:{
+            show:false,
+            name:'',
+            chooseUserId:'',
+            chooseUserName:'',
+            list:[]
+          },
+          visible:false,
+            }
+        },
+      watch:{
+        value(newVal,oldVal){
+          if(newVal){
+            this.author = this.authorId;
+          } else {
+            this.author = '';
+          }
+          this.loadData();
+        },
+        radio(newVal){
+          if(newVal == 2){
+            this.author = this.authorId;
+          } else {
+            this.author = '';
+          }
+          this.loadData();
+        },
+        inputValue(val,oldVal) {
+         let fu = val.substr(-1);
+         if(fu == '@'&&!oldVal) {
+           this.toUserId = '';
+            if(this.toUsers.length == 1 && this.toUsers.length !== 0) {
+              this.toUserDig.chooseUserId = this.toUsers[0].aid;
+              this.toUserDig.chooseUserName=this.toUsers[0].name;
+              this.inputValue+=this.toUsers[0].name;
+            }else {
+              this.$refs.tag.$el.click();
+            }
+         }
+        }
+      },
+      mounted() {
+        this.author = this.authorId;
+        this.loadData(false);
+        //在中文输入法状态下输入光标不在文字最后，同时会被遮挡两个文字大小的长度
+        // let vm=document.querySelector('.hideControl input')
+        // vm.addEventListener('compositionstart',(e)=>{
+        // vm.style.padding='0 63px 0 0'
+        // vm.size=100
+        //以上两种方式都未解决
+        // })
+      },
+        methods: {
+        loadMore() {
+          this.pageIndex +=1;
+          this.loadData(true);
+        },
+        // lookYourself() {// 只看作者
+        // this.pageIndex =1;
+        // this.isAuthor = !this.isAuthor;
+        // if(this.isAuthor){
+        //   this.author = this.authorId;
+        // } else{
+        //    this.author = '';
+        // }
+        //   this.loadData();
+        // },
+        loadAuthorInfo(list,ids){ //加载作者信息，头像，机构信息
+        // console.log(list,ids)
+          if(ids.length==0){
+            return;
+          }
+          const noReapetIds=[...new Set(ids)]
+          apiUser.getByIds(ids).then(res=>{
+            if(res.status==200){
+              list.forEach((item,index)=>{
+                res.result.some(author=>{
+                  if(author.aid==item.sysCreateAid){
+                    item.avatar=author.avatar;
+                    item.orgInfo=author.orgInfo;
+                    item.sex=author.sex;
+                    return true;
+                  }else{
+                    return false;
+                  }
+                })
+              });
+            }else{
+              console.log('加载用户头像信息:'+res.error);
+              //this.$message.error(res.message);
+            }
+          });
+        },
+        // cancelTeacher() {
+        //   this.inputValue =  this.inputValue.substr(0,  this.inputValue.length -1);
+        //   this.visible = false;
+        // },
+        confirmTeacher() {
+           this.toUserDig.chooseUserId = this.toUserId;
+           this.toUsers.forEach(item=>{
+             if(item.aid == this.toUserId) {
+                this.toUserDig.chooseUserName=item.name;
+                this.inputValue+=item.name;
+             }
+           })
+         this.visible = false;
+        },
+        loadData(append){
+          let params={
+            pageIndex:this.pageIndex,
+            pageSize:this.pageSize,
+            type:this.objType,
+            id:this.objId,
+            author: this.author,
+          }
+          let $this=this;
+          apiComment.pageQuery(params).then(res=>{
+              if(res.status==200){
+                let ids=[];
+                let allList=[];
+                res.result.list.forEach(item=>{
+                  item.avatar='';
+                  item.orgInfo='';
+                  item.isAll=false;
+                  //item.sex=null;
+                  allList.push(item);
+                  ids.push(item.sysCreateAid);
+                  if(item.replyList && item.replyList!=''){
+                      item.replyList.forEach(reply=>{
+                        reply.avatar='';
+                        reply.orgInfo='';
+                        reply.sex=null;
+                        reply.isAll=false;
+                        allList.push(reply);
+                        ids.push(reply.sysCreateAid);
+                      })
+                  }
+                });
+                this.loadAuthorInfo(allList,ids);
+                this.total=res.result.count;
+                if(append){
+                  res.result.list.forEach(item=>{
+                    $this.list.push(item);
+                  });
+                }else{
+                  $this.list=res.result.list;
+                }
+                if($this.list.length == this.total) {
+                  this.moreState = 3;
+                }
+                this.$emit('writeTotal',this.total);
+              }else{
+                this.$message.error(res.message);
+              }
+          });
+        },
+        showList(flag){
+          this.listShow=flag;
+        },
+        submit(){
+          if(this.inputValue.trim()!=''){
+            let cdata={
+              objType:this.objType,
+              objId:this.objId,
+              parentId:'-1',
+              content:this.inputValue.trim(),
+              clevel:1,
+              toAid:'',
+              toAname:'',
+            }
+            if(this.toUserDig.chooseUserId!=='' && this.toUserDig.chooseUserName!=''){
+              cdata.toAid=this.toUserDig.chooseUserId;
+              cdata.toAname=this.toUserDig.chooseUserName;
+  
+            }
+  
+            apiComment.add(cdata).then(res=>{
+              if(res.status==200){
+                  // this.list.unshift(res.result);
+                  // this.sex =
+                  res.result.sex=null;
+                  res.result.isAll=false;
+                  this.list.unshift(res.result);
+                  this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
+                  this.$message.success('发布成功');
+                  //
+  
+                  this.total++;
+                  this.$emit('success',res.result);
+                  this.inputValue='';
+                  this.toUserDig.chooseUserId='';
+                  this.toUserDig.chooseUserName='';
+              }else{
+                  this.$message.error(res.message);
+              }
+            });
+  
+          }
+  
+        },
+        showButtons(id){
+          if(!this.readonly){
+            this.btnsShowRowId=id;
+          }
+        },
+        hideButtons(){
+          this.btnsShowRowId='';
+        },
+        //展示全部
+        displayAll(item) {
+          let content = '';
+          content = item.content.replace(/(\n){2,}/,'<br>');
+          item.content = content;
+          if(!item.isAll && item.content && item.content.length > 170) {
+              return item.content.slice(0, 170) + "...";
+          }
+          return item.content;
+        },
+        changeIsAll(item) {
+          item.isAll=!item.isAll;
+        },
+        showReply(item){
+            this.replyInfo.objType=this.objType;
+            this.replyInfo.objId=this.objId;
+            this.replyInfo.parentId=item.id;
+            this.replyInfo.replyAid=item.sysCreateAid;
+            this.replyInfo.replyName=item.sysCreateBy;
+            this.replyShow=true;
+        },
+        cancelReply(){
+          this.replyInfo.parentId='';
+        },
+        submitReply(comment){
+          this.replyInfo.content = this.replyInfo.content.trim();
+          if(this.replyInfo.content==''){
+            return;
+          }
+          this.replyInfo.content=this.replyInfo.content.replace(/^\s*|\s*$/g,"");
+          if(this.replyInfo.content==''){
+            return;
+          }
+          this.replyInfo.commentId=comment.id;
+          if(comment.replyList==''){
+            comment.replyList=[];
+          }
+          apiComment.reply(this.replyInfo).then(res=>{
+             if(res.status==200){
+                res.result.sex = null;
+                res.result.isAll=false;
+                this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
+                comment.replyList.push(res.result);
+                this.replyInfo.parentId='';
+                this.replyInfo.content='';
+                this.$message.success("发布成功");
+             }else{
+                this.$message.error(res.message);
+             }
+          });
+        },
+        delCommnet(com,idx){
+          if(com.replyList!='' && com.replyList.length>0){
+            this.$message.error('有回复的评论不能删除');
+            return;
+          }
+          this.$confirm('您确定要删除所选评论吗?', '删除提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                  }).then(() => {
+                      apiComment.del(com.id,this.userInfo.aid).then(res=>{
+                            if(res.status==200){
+                               this.list.splice(idx,1);
+                               this.total--;
+                               this.$message.success("删除成功");
+                               this.$emit('delSuccess');
+                            }else{
+                               this.$message.error(res.message);
+                            }
+                      });
+                  });
+  
+  
+        },
+        delReply(com,re,idx){
+          // if(com.replyList!='' && com.replyList.length>0){
+          //   this.$message.error('有回复的评论不能删除');
+          // }
+          let params={
+            id:re.id,
+            user:this.userInfo.aid,
+            pid:re.parentId
+          }
+          this.$confirm('您确定要删除所选评论吗?', '删除提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                  }).then(() => {
+                      apiComment.delReply(params).then(res=>{
+                         if(res.status==200){
+                            com.replyList.splice(idx,1);
+                            this.$message.success("删除成功");
+                         }else{
+                            this.$message.error(res.message);
+                         }
+                  });
+          })
+        },
+        delDlgReply(re,idx){ //弹出窗口中的删除操作
+          let params={
+            id:re.id,
+            user:this.userInfo.aid,
+            pid:re.parentId
+          }
+          let $this=this;
+          this.$confirm('您确定要删除所选评论吗?', '删除提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                  }).then(() => {
+                      apiComment.delReply(params).then(res=>{
+                         if(res.status==200){
+                            $this.replyDiaglog.list.splice(idx,1);
+                            $this.$message.success("删除成功");
+                         }else{
+                            $this.$message.error(res.message);
+                         }
+                  }).catch(()=>{
+  
+                  })
+          })
+        },
+        showDlgReply(item){
+          this.replyInfo.objType=this.objType;
+          this.replyInfo.objId=this.objId;
+          this.replyInfo.parentId=item.id;
+          this.replyInfo.replyAid=item.sysCreateAid;
+          this.replyInfo.replyName=item.sysCreateBy;
+          this.replyShow=true;
+        },
+        submitDlgReply(){
+            this.replyInfo.content = this.replyInfo.content.trim();
+            if(this.replyInfo.content==''){
+              return;
+            }
+            this.replyInfo.content=this.replyInfo.content.replace(/^\s*|\s*$/g,"");
+            if(this.replyInfo.content==''){
+              return;
+            }
+            this.replyInfo.commentId=this.replyDiaglog.commentId;
+  
+            apiComment.reply(this.replyInfo).then(res=>{
+               if(res.status==200){
+                  res.result.sex = null;
+                  res.result.isAll=false;
+                  this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
+                  this.replyDiaglog.list.push(res.result);
+                  this.replyInfo.parentId='';
+                  this.replyInfo.content='';
+                  this.$message.success("发布成功");
+               }else{
+                  this.$message.error(res.message);
+               }
+            });
+        },
+        showMoreReply(comment){
+          this.replyDiaglog.pages=1;
+          this.replyDiaglog.count=0;
+          this.replyDiaglog.pageIndex=1;
+          this.replyDiaglog.list=[];
+          this.replyDiaglog.show=true;
+          this.replyDiaglog.commentId=comment.id;
+          this.loadAllReplyData(false);
+        },
+        loadMoreReply(){
+          this.replyDiaglog.pageIndex++;
+          this.loadAllReplyData(true);
+        },
+        loadAllReplyData(append){
+          let params={
+            pageIndex:this.replyDiaglog.pageIndex,
+            pageSize:this.replyDiaglog.pageSize,
+            type:this.objType,
+            commentId:this.replyDiaglog.commentId
+          }
+          let $this=this;
+          apiComment.replyList(params).then(rs=>{
+            if(rs.status==200){
+              $this.replyDiaglog.count=rs.result.count;
+              $this.replyDiaglog.pages=rs.result.totalPages;
+              let ids=[];
+              if(append){
+                rs.result.list.forEach(item=>{
+                  item.avatar='';
+                  ids.push(item.sysCreateAid);
+                  $this.replyDiaglog.list.push(item);
+                })
+              }else{
+                rs.result.list.forEach(item=>{
+                  item.avatar='';
+                  ids.push(item.sysCreateAid);
+                })
+                $this.replyDiaglog.list=rs.result.list;
+              }
+              this.loadAuthorInfo(rs.result.list,ids);
+            }else{
+              this.$message.error(rs.message);
+            }
+          })
+        },
+        showToUser(){
+            this.toUserDig.show=true;
+            this.toUserDig.chooseUserId='';
+            this.toUserDig.chooseUserName='';
+        },
+        findUserKeyupEnter(){
+          this.findUser();
+        },
+        findUser(){
+            this.toUserDig.list=[];
+            var name=this.toUserDig.name;
+            if(name==''){
+              return;
+            }
+            apiUser.findByName(name).then(rs=>{
+               if(rs.status==200){
+                 this.toUserDig.list=rs.result;
+               }else{
+                 this.$message.error('查询用户失败');
+               }
+            })
+  
+        },
+        confirmUser(u){
+          this.toUserDig.chooseUserId=u.aid;
+          this.toUserDig.chooseUserName=u.name;
+          this.toUserDig.show=false;
+          this.toUserDig.name='';
+        }
+        }
+    }
+  </script>
+  
+  <style lang="scss" scoped>
+  .anzhu{
+    font-size: 14px;
+    color: #999;
+  }
+  ::v-deep .el-input--medium .el-input__inner {
+    height: 48px;
+  }
+  
+   ::v-deep .at-min{
+      .el-popper[x-placement^=bottom] {
+        // left: 0 !important;
+        // bottom: 0 !important;
+        margin-left: 30px !important;
+      }
+      .el-popover{
+  
+      }
+  }
+  .tag-block{
+     top:0;
+     left: 0;
+      position: absolute;
+      background-color: #fff;
+      border-color: #fff;
+  
+      height: 1px;
+  }
+  .pag-text{
+    border: 1px solid #292828;
+    padding: 10px 20px;
+    border-radius: 20px;
+    background: #fff;
+    cursor: pointer;
+  }
+  .reference-tag{
+    display: block;
+    // width: 100%;
+    .el-radio-button__inner{
+         border: 1px solid #fff !important;
+    }
+  
+  }
+    .svg-btn{
+      font-size: 30px;
+      line-height: 30px;
+      margin-right: 20px;
+      cursor: pointer;
+      margin-top: 5px;
+    }
+    .comments{
+          margin-top: 10px;
+          background-color: #FFFFFF;
+      padding: 5px 15px;
+          .comments-top{
+              display: flex;
+              justify-content: space-between;
+              padding:10px;
+              border-bottom: 1px solid #f4f4f4;
+              font-weight: 500;
+              font-size: 1.1em;
+        .comments-top-left{
+          .btn{
+            // width: 68px;
+            // height: 32px;
+            // background: #3C7EFF;
+            border-radius: 6px;
+            font-size: 12px;
+            padding: 10px;
+            margin-left: 24px;
+           ::v-deep .el-radio__inner{
+              border-radius: 0 !important;
+            }
+          }
+        }
+        .comments-top-center{
+  
+        }
+        .comments-top-right{
+            color: #6b6b6b;
+            cursor: pointer;
+        }
+          }
+      .comments-input{
+        // border-bottom: 1px solid #dddddd;
+        padding: 5px 15px 10px 15px;
+      }
+          .comments-items{
+         padding: 5px 15px;
+         .zan-wu{
+           text-align: center;
+           font-size: 18px;
+           color: #6666;
+         }
+          }
+      }
+    .comment{
+        margin-top: 10px;
+        background-color: #FFFFFF;
+      border-bottom: 1px solid #dddddd;
+        .comment-top{
+            display: flex;
+            justify-content: space-between;
+            padding-bottom:10px;
+            font-weight: 500;
+        line-height: 30px;
+            font-size: 1.1em;
+        .comment-author{
+          display: flex;
+          align-items: center;
+            height: 30px;
+          line-height: 30px;
+        }
+        .comment-time{
+          color: #666666;
+          font-size: 12px;
+        }
+        }
+        .comment-body{
+            padding-left: 40px;
+        .comment-content{
+            padding-bottom: 0px;
+            white-space: pre-wrap;
+            word-break:break-all;
+            span {
+              color: #409eff;
+              cursor: pointer;
+              margin-left: 5px;
+            }
+        }
+        .comment-btns{
+          // padding: 5px 10px 10px 0px;
+          height: 35px;
+          line-height: 35px;
+          a{
+            margin-right:15px;
+            span{
+              margin-left: 6px;
+              color: #8590A6;
+              font-size: 14px;
+            }
+          }
+        }
+        }
+      .comment-replys{
+        padding-left: 40px;
+      }
+    }
+  .comment-last{
+    border-bottom: none;
+  }
+  ::v-deep .hideControl{
+    .el-input__count{
+    }
+    .el-textarea__inner{
+      padding-right: 50px;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/homepage/page.vue b/src/views/homepage/page.vue
new file mode 100644
index 00000000..8cb7bc4b
--- /dev/null
+++ b/src/views/homepage/page.vue
@@ -0,0 +1,254 @@
+<template>
+    <div class="home-page">
+        <!-- <top></top>
+        <div style="height:72px"></div>
+        <UcHeader></UcHeader>
+        <router-view /> -->
+        <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>
+                        动态
+                    </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>
+                        <note-list></note-list>
+                    </el-tab-pane>
+                    <el-tab-pane name="qa">
+                        <span slot="label"><svg-icon icon-class="home-qa" style="font-size: 30px;"></svg-icon><span class="tabs-info">提问</span></span>
+                        <put-list></put-list>
+                    </el-tab-pane>
+                    <el-tab-pane name="answer">
+                        <span slot="label"><svg-icon icon-class="home-answer" style="font-size: 30px;"></svg-icon><span class="tabs-info">回答</span></span>
+                        <answer-list></answer-list>
+                    </el-tab-pane>
+                    <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>
+                        <article-list></article-list>
+                    </el-tab-pane>
+                    <el-tab-pane name="fourth">
+                        <span slot="label"><svg-icon icon-class="home-follow" style="font-size: 30px;"></svg-icon><span class="tabs-info">关注</span></span>
+                        <follow-list></follow-list>
+                    </el-tab-pane>
+                    <el-tab-pane name="book">
+                        <span slot="label"><svg-icon icon-class="home-book" style="font-size: 30px;"></svg-icon><span class="tabs-info">书籍</span></span>
+                        <book-list></book-list>
+                    </el-tab-pane>
+                </el-tabs>
+                <div style="width:200px"></div>
+            </div>
+            <div class="home-page-right">
+                <ul class="total-per">
+                    <li class="per-li">
+                        <span class="per-info">456</span>
+                        <span class="per-text">关注他的人</span>
+                    </li>
+                    <li class="per-li">
+                        <span class="per-info">456</span>
+                        <span class="per-text">他关注的人</span>
+                    </li>
+                </ul>
+                <div style="padding-top:10px;">
+                    <p class="ach-title">TA的成就</p>
+                    <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 style="padding-top:16px">
+                    <p class="ach-title">可能感兴趣</p>
+                    <ul>
+                        <li class="ava-info" v-for="ava in 3">
+                            <img src="/images/Avatarwoman.png" />
+                            <div class="ava-text">
+                                <p style="color: #333333;">王明</p>
+                                <p style="color: #666666;">你必须非常努力才能看起来毫不费力</p>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+  </template>
+  
+  <script>
+    import top from '../../layout/components/TopNav/Index.vue'
+    import UcHeader from '@/components/HomePage/homePage.vue'
+    import CaseList from '@/components/HomePage/caseList.vue'
+    import CourseList from '@/components/HomePage/courseList.vue'
+    import NoteList from "@/components/HomePage/noteList.vue"
+    import PutList from "@/components/HomePage/putTo.vue"
+    import AnswerList from "@/components/HomePage/answerList.vue"
+    import ArticleList from "@/components/HomePage/articleList.vue"
+    import FollowList from "@/components/HomePage/followList.vue"
+    import BookList from "@/components/HomePage/bookList.vue"
+
+    export default{
+        components:{top,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
+        data(){
+            return{
+                input:'',
+                activeName:'first',
+            }
+        },
+      methods:{
+        handleClick() {
+
+        }
+       }
+      }
+  </script>
+  
+  <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{
+                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;
+                }
+                .tabs-info{
+                    font-size: 16px;
+                    color: #333333;
+                    margin-left: 4px;
+                }
+            }
+            .home-page-right{
+                width: 395px;
+                padding: 40px 52px 18px 52px;
+                box-sizing: border-box;
+                background: #fff;
+                border-radius: 4px;
+                margin-left: 25px;
+                .total-per{
+                    display: flex;
+                    // justify-content: space-between;
+                    padding-bottom: 28px;
+                    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;
+                        font-weight: 600;
+                        color: #333333;
+                       }
+                       .per-text{
+                        font-size: 14px;
+                        color: #666666;
+                       }
+                    }
+                    
+                }
+                .ach-title{
+                    font-size: 18px;
+                    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;
+                    }
+                }
+            }
+        }
+     }
+  </style>
+  
\ No newline at end of file