diff --git a/src/assets/styles/portal-index.scss b/src/assets/styles/portal-index.scss
index b123b05f..0b63c763 100644
--- a/src/assets/styles/portal-index.scss
+++ b/src/assets/styles/portal-index.scss
@@ -435,6 +435,9 @@
 }
 // boe-index
 @media screen and (max-width: 1366px){
+  .medal-index{ // 勋章规则控制
+    margin: 40px 26px 0 26px;
+  }
   .xindex-content{
     width: 1100px;
   }
@@ -669,6 +672,9 @@
  }
 }
 @media screen and (max-width: 1680px) and (min-width:1367px){
+  .medal-index{ // 勋章规则控制
+    margin: 40px 50px 0 50px;
+  }
   .xindex-content{
     width: 1366px;
   }
@@ -893,6 +899,9 @@
 }
 
 @media screen and (max-width: 1920px) and (min-width: 1681px){
+  .medal-index{ // 勋章规则控制
+    margin: 40px 60px 0 60px;
+  }
   .xindex-content{
       width: 1690px;
   }
@@ -1123,6 +1132,9 @@
   }
 
 @media screen and (min-width: 1921px){
+  .medal-index{ // 勋章规则控制
+    margin: 40px 60px 0 60px;
+  }
   .xindex-content{
     width: 1880px;
   }
diff --git a/src/views/medal/Index.vue b/src/views/medal/Index.vue
index 5e92bf5e..39d38507 100644
--- a/src/views/medal/Index.vue
+++ b/src/views/medal/Index.vue
@@ -275,7 +275,7 @@
         }
         .medal-index{
             width: 144px;
-            margin: 40px 60px 0 60px;
+            
             text-align: center;
 
 
diff --git a/src/views/medal/urules.vue b/src/views/medal/urules.vue
index cf98d310..1aad5d3d 100644
--- a/src/views/medal/urules.vue
+++ b/src/views/medal/urules.vue
@@ -9,73 +9,75 @@
         <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 v-for="(ru, inx) in nameData" :class="(inx == 0 || inx == nameData.length -1)?'tabletime':'tabledata'"><span>{{ru.name}}</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 class="table-content" v-for="item in rulesData">
+                <div style="line-height: 58px;" class="grade">LV.{{item.level}}</div>
+                <div class="cont-left">{{item.study}}</div>
+                <div class="cont-right">{{item.day}}</div>
+                <div class="cont-right">{{item.steadily}}</div>
+                <div class="cont-left">{{item.popularity}}</div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+import apiStat from '@/api/phase2/stat.js';
 export default {
+    data(){
+          return{
+            nameData:[],
+            rulesData:[],
+          }
+      },
+      mounted() {
+         this.getConfig();
+      },
+    methods:{
+        getConfig() {
+            apiStat.userMedalConfig().then(res=>{
+                let rulesData = [];
+                let studyList = [];
+                let dayList = [];
+                let steadilyList = [];
+                let popularityList = [];
+                if(res.status == 200){
+                  res.result.forEach(item => {
+                    item.rules = JSON.parse(item.rules);
+                    this.nameData.push({
+                        id: item.id,
+                        name: item.name
+                    })
+                    if(item.id == 1) {
+                        studyList = item.rules;
+                    }
+                    if(item.id == 2) {
+                        dayList = item.rules;
+                    }
+                    if(item.id == 3) {
+                        steadilyList = item.rules;
+                    }
+                    if(item.id == 4) {
+                        popularityList = item.rules;
+                    }
+                  });
+                  for (let index = 0; index < 8; index++) {
+                    rulesData.push({
+                        level:index+1,
+                        study: studyList[index].remark,
+                        day:dayList[index].remark,
+                        steadily:steadilyList[index].remark,
+                        popularity:popularityList[index].remark,
+                    })
+                    
+                  }
+                  this.rulesData = rulesData;
+                }
+            })
+        },
+    }
+    // userMedalConfig
 
 }
 </script>