diff --git a/src/data/pages.js b/src/data/pages.js
index c749a454..5a3f784b 100644
--- a/src/data/pages.js
+++ b/src/data/pages.js
@@ -84,6 +84,7 @@ export const pages=[
     {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:'urules',component:'medal/urules',hidden:true},
     {title:'排行榜',path:'ranking',component:'user/ranking',hidden:true}
   ]},
   {title:'消息中心',path:'/message/center',hidden:false,children:[
diff --git a/src/views/medal/Index.vue b/src/views/medal/Index.vue
index 11a7e5d3..132c670d 100644
--- a/src/views/medal/Index.vue
+++ b/src/views/medal/Index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="medal-box">
-      <h6 class="medal-title">我的勋章 <span class="text">勋章规则 ></span> </h6>
+      <h6 class="medal-title">我的勋章 <span  class="text">   <a href="../medal/urules.vue">勋章规则 >  </a></span> </h6>
       <el-tabs v-model="activeName" @tab-click="handleClick">
           <el-tab-pane label="全部勋章" name="first"></el-tab-pane>
           <el-tab-pane label="学习勋章" name="second"></el-tab-pane>
@@ -107,6 +107,7 @@
              this.getConfig();
           },
         methods:{
+            
             getConfig() {// 获取勋章配置
                 apiStat.userMedalConfig().then(res=>{
                     if(res.status == 200) {
diff --git a/src/views/medal/urules.vue b/src/views/medal/urules.vue
new file mode 100644
index 00000000..320e3401
--- /dev/null
+++ b/src/views/medal/urules.vue
@@ -0,0 +1,226 @@
+<template>
+    <div class="rulesbox">
+        <div class="title">
+             <div class="exp-hear-text">
+              勋章规则
+               <span class="exp-hear-textbor"></span>
+            </div>
+        </div>
+        <div class="rules-content">
+            <div class="table-hear">
+                <div class="grade">勋章等级</div>
+                <div class="tabletime"><span>跬步千里</span></div>
+                <div class="tabledata"><span>持之以恒</span></div>
+                <div class="tabledata"><span>知识贡献者</span></div>
+                <div class="tabletime"><span>社交达人</span></div>
+            </div>
+            <div class="table-content">
+                <div style="line-height: 58px;" class="grade">LV.1</div>
+                <div class="cont-left">累计学习 <span>1</span> h</div>
+                <div class="cont-right">连续 <span>1</span> 天活跃且学习时长 >=10分钟 </div>
+                <div class="cont-right">累计上传 <span>1</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
+                <div class="cont-left">累计被赞 <span>10</span> 次 </div>
+            </div>
+             <div class="table-content">
+                <div style="line-height: 58px;" class="grade">LV.2</div>
+                <div class="cont-left">累计学习 <span>5</span> h</div>
+                <div class="cont-right">连续 <span>5</span> 天活跃且学习时长 >=10分钟 </div>
+                <div class="cont-right">累计上传 <span>5</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
+                <div class="cont-left">累计被赞 <span>30</span> 次 </div>
+            </div>
+             <div class="table-content">
+                <div style="line-height: 58px;" class="grade">LV.3</div>
+                <div class="cont-left">累计学习 <span>10</span> h</div>
+                <div class="cont-right">连续 <span>15</span> 天活跃且学习时长 >=10分钟 </div>
+                <div class="cont-right">累计上传 <span>10</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
+                <div class="cont-left">累计被赞 <span>50</span> 次 </div>
+            </div>
+             <div class="table-content">
+                <div style="line-height: 58px;" class="grade">LV.4</div>
+                <div class="cont-left">累计学习 <span>50</span> h</div>
+                <div class="cont-right">连续 <span>30</span> 天活跃且学习时长 >=10分钟 </div>
+                <div class="cont-right">累计上传 <span>20</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
+                <div class="cont-left">累计被赞 <span>100</span> 次 </div>
+            </div>
+             <div class="table-content">
+                <div style="line-height: 58px;" class="grade">LV.5</div>
+                <div class="cont-left">累计学习 <span>100</span> h</div>
+                <div class="cont-right">连续 <span>70</span> 天活跃且学习时长 >=10分钟 </div>
+                <div class="cont-right">累计上传 <span>50</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
+                <div class="cont-left">累计被赞 <span>200</span> 次 </div>
+            </div>
+             <div class="table-content">
+                <div style="line-height: 58px;" class="grade">LV.6</div>
+                <div class="cont-left">累计学习 <span>300</span> h</div>
+                <div class="cont-right">连续 <span>120</span> 天活跃且学习时长 >=10分钟 </div>
+                <div class="cont-right">累计上传 <span>100</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
+                <div class="cont-left">累计被赞 <span>500</span> 次 </div>
+            </div>
+             <div class="table-content">
+                <div style="line-height: 58px;" class="grade">LV.7</div>
+                <div class="cont-left">累计学习 <span>500</span> h</div>
+                <div class="cont-right">连续 <span>200</span> 天活跃且学习时长 >=10分钟 </div>
+                <div class="cont-right">累计上传 <span>300</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
+                <div class="cont-left">累计被赞 <span>1000</span> 次 </div>
+            </div>
+            <div class="table-content">
+                <div style="line-height: 58px;" class="grade">LV.8</div>
+                <div class="cont-left">累计学习 <span>1000</span> h</div>
+                <div class="cont-right">连续 <span>365</span> 天活跃且学习时长 >=10分钟 </div>
+                <div class="cont-right">累计上传 <span>800</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
+                <div class="cont-left">累计被赞 <span>2000</span> 次 </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.table-content{
+    display: flex;
+    height: 58px;
+    .cont-left{
+        flex: 1;
+        margin-left: 8%;
+        text-align: center;
+        font-size: 14px;
+        color: #666666;
+        font-weight: 400;
+        line-height: 58px;
+        span{
+            font-size: 14px;
+            color: #333;
+            font-weight: 600;
+        }
+    }
+    .cont-right{
+        flex: 2;
+        margin-left: 8%;
+        text-align: center;
+        font-size: 14px;
+        color: #666666;
+        font-weight: 400;
+        line-height: 58px;
+        span{
+            font-size: 14px;
+            color: #333;
+            font-weight: 600;
+        }
+        .text{
+            font-size: 12px;
+            font-weight: 400;
+            color: #999999;
+
+        }
+    }
+}
+.tabledata{
+            flex: 2;
+            margin-left: 8%;
+            text-align: center;
+            span{
+                display: inline-block;
+                width: 118px;
+                height: 27px;
+                background: linear-gradient(90deg, #00A8FF 0%, #74C6FF 100%);
+                box-shadow: 0px 4px 9px 0px rgba(146,212,255,0.57);
+                border-radius: 14px;
+                border: 1px solid #FFFFFF;
+                font-size: 14px;
+                font-weight: 600;
+                color: #FFFFFF;
+                text-align: center;
+                line-height: 24px;
+            }
+        }
+.grade{
+            width: 60px;
+            text-align: center;
+            font-size: 14px;
+            color: #333333;
+            font-weight: 600;
+        }
+ .tabletime{
+            flex: 1;
+            margin-left: 8%;
+            text-align: center;
+            span{
+                display: inline-block;
+                width: 118px;
+                height: 27px;
+                background: linear-gradient(90deg, #00A8FF 0%, #74C6FF 100%);
+                box-shadow: 0px 4px 9px 0px rgba(146,212,255,0.57);
+                border-radius: 14px;
+                border: 1px solid #FFFFFF;
+                font-size: 14px;
+                font-weight: 600;
+                color: #FFFFFF;
+                text-align: center;
+                line-height: 24px;
+            }
+
+        }
+.rules-content{
+    padding-left: 25px;
+    width: 100%;
+    .table-hear{
+        display: flex;
+        margin-bottom: 40px;
+        .tabledata{
+            flex: 2;
+            margin-left: 78px;
+            text-align: center;
+            span{
+                display: inline-block;
+                width: 118px;
+                height: 27px;
+                background: linear-gradient(90deg, #00A8FF 0%, #74C6FF 100%);
+                box-shadow: 0px 4px 9px 0px rgba(146,212,255,0.57);
+                border-radius: 14px;
+                border: 1px solid #FFFFFF;
+                font-size: 14px;
+                font-weight: 600;
+                color: #FFFFFF;
+                text-align: center;
+                line-height: 24px;
+            }
+        }
+    }
+    
+}
+.rulesbox{
+    .title{
+        width: 100%;
+        margin-bottom: 40px;
+        height: 50px;
+        .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: 85px;
+          height: 8px;
+          background: linear-gradient(90deg, #6C91E7 0%, #0078FC 100%);
+          border-radius: 9px;
+          display: inline-block;
+          position: absolute;
+          left: -6px;
+          z-index: -1;
+          top: 60%;
+        }
+      }
+    }
+    
+}
+</style>
\ No newline at end of file