diff --git a/public/images/Durbg.png b/public/images/Durbg.png
new file mode 100644
index 00000000..918e6f41
Binary files /dev/null and b/public/images/Durbg.png differ
diff --git a/public/images/expbg.png b/public/images/expbg.png
new file mode 100644
index 00000000..fb4a2fd2
Binary files /dev/null and b/public/images/expbg.png differ
diff --git a/public/images/rank1.png b/public/images/rank1.png
new file mode 100644
index 00000000..4bf3b9a4
Binary files /dev/null and b/public/images/rank1.png differ
diff --git a/public/images/rank2.png b/public/images/rank2.png
new file mode 100644
index 00000000..008ca416
Binary files /dev/null and b/public/images/rank2.png differ
diff --git a/public/images/rank3.png b/public/images/rank3.png
new file mode 100644
index 00000000..5122607d
Binary files /dev/null and b/public/images/rank3.png differ
diff --git a/src/components/UcHeader/Index.vue b/src/components/UcHeader/Index.vue
index 4224235d..d4ddbeb1 100644
--- a/src/components/UcHeader/Index.vue
+++ b/src/components/UcHeader/Index.vue
@@ -57,7 +57,7 @@
            <div class="learning-qus">我的U币（累计）</div>
            <div class="learning-an"><span>{{uinfo.uCurrency}}</span></div>
         </div>
-        <div class="list">
+        <div @click="jumrank" class="list">
           BOE 排行榜 >>
         </div>
       </div>
@@ -172,6 +172,10 @@ import {userAvatarText,cutFullName} from "@/utils/tools.js";
       },
       setCurIdentity(iden){
         this.$store.dispatch('SetCurIdentity',iden);
+      },
+      jumrank(){
+      this.$router.push({ path: '/user/ranking' });
+
       },
       toPage(url){
         this.$router.push({path:url})
diff --git a/src/data/pages.js b/src/data/pages.js
index 834d38e9..c749a454 100644
--- a/src/data/pages.js
+++ b/src/data/pages.js
@@ -83,7 +83,8 @@ export const pages=[
     {title:'开发工具下载',path:'tools',component:'tools/Index',hidden:false},
     {title:'课程开发教程',path:'developtoolsdown',component:'tools/DeveloptoolsDown',hidden:true},
     {title:'我的U币',path:'ucurrency',component:'ucurrency/Index',hidden:true},
-    {title:'我的勋章',path:'medal',component:'medal/Index',hidden:true}
+    {title:'我的勋章',path:'medal',component:'medal/Index',hidden:true},
+    {title:'排行榜',path:'ranking',component:'user/ranking',hidden:true}
   ]},
   {title:'消息中心',path:'/message/center',hidden:false,children:[
     {title:'消息中心',path:'index',component:'portal/user/Message',hidden:false}
diff --git a/src/views/user/ranking.vue b/src/views/user/ranking.vue
new file mode 100644
index 00000000..d73383a5
--- /dev/null
+++ b/src/views/user/ranking.vue
@@ -0,0 +1,428 @@
+<template>
+  <div style="padding:26px 40px;display:flex;">
+      <div class="experience">
+          <div class="exp-hear">
+              <div class="exp-hear-text">
+                  经验值排行榜
+                  <span class="exp-hear-textbor"></span>
+             </div>
+              <div class="exp-hear-xiala">
+                 <el-dropdown trigger="click">
+                <span class="el-dropdown-link">
+                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item>黄金糕</el-dropdown-item>
+                    <el-dropdown-item>狮子头</el-dropdown-item>
+                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
+                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+                </el-dropdown-menu>
+                </el-dropdown> 
+              </div>
+          </div>
+          <div class="myselftext">
+             <div class="myranking">
+                 我的排名 :  <span> 128</span>
+             </div>
+             <div class="myexperience">
+                 我的经验值 :  <span> 367</span>
+             </div>
+          </div>
+          <div class="exp-bar">
+           <h6> 300/600</h6>
+            <div class="exp-barbox">
+                <div class="exp-bar-cont"></div>
+            </div>
+            <div class="exp-barname">
+                <span>LV1</span>
+                <span>LV2</span>
+            </div>
+          </div>
+          <div class="exp-table">
+             <div class="table-hear">
+                <div style="margin-left:5px">排名</div>
+                <div style="margin-left:5px">姓名</div>
+                <div class="bm">部门</div>
+                <div class="jy">经验值</div>
+             </div>
+             <div style="height:450px;overflow-y:auto">
+            <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div class="tab-rank" ><img src="../../../public/images/rank1.png" alt=""></div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div class="tab-rank" ><img src="../../../public/images/rank2.png" alt=""></div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div class="tab-rank" ><img src="../../../public/images/rank3.png" alt=""></div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">4</div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">5</div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+             </div>
+             <div class="omit">
+                 <div>.</div> <div>.</div> <div>.</div>
+             </div>
+             <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >128</div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span style="color: #0059FF;">小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">1093</div>
+                 </div>
+             </div>
+            
+          </div>
+      </div>
+      <di class="Duration">
+           <div class="exp-hear">
+              <div class="exp-hear-text">
+                  学习时长排行榜
+                  <span class="exp-hear-textbor"></span>
+             </div>
+              <div class="exp-hear-xiala">
+                 <el-dropdown trigger="click">
+                <span class="el-dropdown-link">
+                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item>黄金糕</el-dropdown-item>
+                    <el-dropdown-item>狮子头</el-dropdown-item>
+                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
+                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+                </el-dropdown-menu>
+                </el-dropdown> 
+              </div>
+          </div>
+          <div class="myselftext">
+             <div class="myranking">
+                 我的排名 :  <span> 128</span>
+             </div>
+             <div class="myexperience">
+                 我的经验值 :  <span> 367</span>
+             </div>
+          </div>
+           <div class="exp-table">
+             <div class="table-hear">
+                <div style="margin-left:5px">排名</div>
+                <div style="margin-left:5px">姓名</div>
+                <div class="bm">部门</div>
+                <div class="jy">经验值</div>
+             </div>
+             <div style="height:500px;overflow-y:auto">
+            <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div class="tab-rank" ><img src="../../../public/images/rank1.png" alt=""></div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div class="tab-rank" ><img src="../../../public/images/rank2.png" alt=""></div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div class="tab-rank" ><img src="../../../public/images/rank3.png" alt=""></div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">4</div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">5</div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+             </div>
+             <div class="omit">
+                 <div>.</div> <div>.</div> <div>.</div>
+             </div>
+             <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >128</div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span style="color: #0059FF;">小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">1093</div>
+                 </div>
+             </div>
+          </div>
+      </di>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+      return{
+         
+      }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.omit{
+  padding-left: 20px;
+  div{
+      font-size: 30px;
+      line-height: 10px;
+      color: #D8D8D8;
+  }
+}
+.exp-table{
+      width: 100%;
+      padding-left: 25px;
+      .table-hear{
+         display: flex;
+        div{
+        //  margin-right: 13%;
+         min-width: 90px;
+         font-size: 14px;
+         font-weight: 400;
+         color: #999999;
+       }
+      .bm{
+          flex: 1;
+          margin-left: 20px;
+      }
+      .jy{
+          margin-left: auto;
+          text-align: right;
+          margin-right: 0;
+          text-align: center;
+      }
+      }
+     
+     
+  }
+ .myselftext{
+      height: 75px;
+      padding: 0 25px;
+      width: 100%;
+      display: flex;
+      .myranking{
+          flex: 1;
+          line-height: 75px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #666666;
+          span{
+              color: #333;
+              font-weight: 600;
+              font-size: 18px;
+          }
+      }
+      .myexperience{
+          text-align: right;
+          line-height: 75px;
+          margin-left: auto;
+          font-size: 14px;
+          font-weight: 400;
+          color: #666666;
+          span{
+              color: #333;
+              font-weight: 600;
+              font-size: 18px;
+          }
+      }
+  }
+.tab-jy{
+    padding-top: 10px;
+    div{
+        line-height: 28px;
+        width: 70px;
+        text-align: center;
+        font-size: 18px;
+        color: #333333;
+        font-weight: 600;
+        height: 28px;
+        background: #F7F8FA;
+        border-radius: 14px;
+    }
+}
+.tab-bm{
+    line-height: 40px;
+}
+.tab-name{
+    img{
+        width: 40px;
+        height: 40px;
+        vertical-align: middle;
+    }
+    span{
+        color: #333333;
+        font-size: 14px;
+        font-weight: 600;
+    }
+    
+}
+.tab-rank{
+   
+    // text-align: center;
+    img{
+         width: 40px;
+         height: 40px;
+        
+    }
+}
+.experience{
+  flex: 1;
+  margin-right: 118px;
+  
+  .exp-hear{
+      width: 100%;
+      height: 65px;
+      background: url('../../../public/images/expbg.png') no-repeat 100% / 100%;
+      .exp-hear-text{
+          float: left;
+          line-height: 65px;
+          margin-left: 25px;
+          font-size: 18px;
+          font-weight: 600;
+          color: #333333;
+          position: relative;
+          z-index: 888;
+          .exp-hear-textbor{
+            width: 108px;
+            height: 10px;
+            background: #9CC7FC;
+            border-radius: 9px;
+            display: inline-block;
+            position: absolute;
+            left: 0;
+            z-index: -1;
+            top: 60%;
+          }
+      }
+      .exp-hear-xiala{
+          line-height: 65px;
+          float: right;
+          margin-right: 15px;
+      }
+
+  }
+ 
+  .exp-bar{
+      width: 100%;
+      h6{
+           font-size: 14px;
+            color: #666666;
+            font-weight: 600;
+            margin: 0;
+            margin-left: 50px;
+     }
+     .exp-barname{
+         width: 100%;
+         padding: 20px 35px;
+         display: flex;
+         span{
+             flex: 1;
+         }
+     }
+     .exp-barbox{
+         width: 100%;
+         height: 8px;
+         background: #ECF1FE;
+         border-radius: 6px;
+         margin-left: 25px;
+         margin-top: 3px;
+         position: relative;
+         z-index: 1;
+         .exp-bar-cont{
+             width: 230px;
+             height: 6px;
+             background: #0059FF;
+             border-radius: 6px;
+             opacity: 0.56;
+             position: absolute;
+             left: 0;
+             z-index: 999;
+         }
+     }
+     
+
+  }
+}
+.Duration{
+  margin-right: 118px;
+  flex: 1;
+  .exp-hear{
+      width: 100%;
+      height: 65px;
+      background: url('../../../public/images/Durbg.png') no-repeat 100% / 100%;
+      .exp-hear-text{
+          float: left;
+          line-height: 65px;
+          margin-left: 25px;
+          font-size: 18px;
+          font-weight: 600;
+          color: #333333;
+          position: relative;
+          z-index: 888;
+          .exp-hear-textbor{
+            width: 130px;
+            height: 10px;
+            background: #FDAFB3 ;
+            border-radius: 9px;
+            display: inline-block;
+            position: absolute;
+            left: 0;
+            z-index: -1;
+            top: 60%;
+          }
+      }
+      .exp-hear-xiala{
+          line-height: 65px;
+          float: right;
+          margin-right: 15px;
+      }
+
+  }
+}
+</style>
\ No newline at end of file