diff --git a/src/layout/components/TopNav/Index.vue b/src/layout/components/TopNav/Index.vue
index a0b82a84..a3d55455 100644
--- a/src/layout/components/TopNav/Index.vue
+++ b/src/layout/components/TopNav/Index.vue
@@ -71,7 +71,7 @@
             </el-dropdown>
           </div> -->
 		  <div class="person-action">
-		    <el-button @click="logout()" type="text"><svg-icon  style="margin-right: 4px;font-size:22px;color: #000;" icon-class="white-out"></svg-icon>退出</el-button>
+		    <el-button @click="logout()" type="text"><svg-icon  style="margin-right: 4px;font-size:22px;color: #000;" icon-class="white-out"></svg-icon>登出</el-button>
 		  </div>
       </div>
       </div>
diff --git a/src/views/medal/Index.vue b/src/views/medal/Index.vue
index bf655d0a..0218f849 100644
--- a/src/views/medal/Index.vue
+++ b/src/views/medal/Index.vue
@@ -8,7 +8,7 @@
                     <img src="/images/medal.png" alt="" srcset="">
                     <p class="index-title">持之以恒</p> 
                     <p class="index-text">您已超过367人</p>
-                    <el-button class="btn" type="primary">查看详情</el-button>
+                    <el-button class="btn" type="primary" @click="dialogVisible = true">查看详情</el-button>
                 </div>
             </div>
           </el-tab-pane>
@@ -16,6 +16,27 @@
           <el-tab-pane label="社交勋章" name="third">社交勋章</el-tab-pane>
           <el-tab-pane label="成就勋章" name="fourth">成就勋章</el-tab-pane>
       </el-tabs>
+      <el-dialog
+        class="medal-dialog"
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="657px"
+        top="200px"
+        :before-close="handleClose">
+        <div class="medal-box">
+            <div class="medal-top">
+                <div>
+                    <h4 class="title-medal">跬步千里 <span style="font-weight: 600;">LV3</span> </h4>
+                    <p class="title-medal-info">你已经超过 387 人</p>
+                    <p class="title-medal-info">继续学习 40 小时可升级进入下一级</p>
+                </div>
+                <div class="medal-img">
+                    <img style="width:186px;height:210px" src="/images/medal.png"/>
+                </div>
+            </div>
+            
+        </div>
+        </el-dialog>
     </div>
   </template>
   
@@ -23,7 +44,8 @@
       export default{
           data(){
               return{
-                activeName:'first'
+                activeName:'first',
+                dialogVisible:false,
               }
           },
       methods:{
@@ -36,6 +58,44 @@
   </script>
   
   <style lang="scss" scoped>
+    .medal-dialog{
+        ::v-deep .el-dialog__header{
+         display: none;
+       } 
+       ::v-deep .el-dialog__body{
+         background: rgba(216, 216, 216, 0.1);
+         padding: 0;
+       }
+       .medal-box{
+        height: 538px;
+        border-radius: 27px !important;
+        background: linear-gradient(360deg, #FCFCFC 0%, #E1F0FD 76%, #E1F0FE 100%);
+        padding: 48px 16px 40px 60px;
+        .medal-top{
+            position: relative;
+            // display: flex;
+            h4{
+                margin: 0;
+            }
+            .title-medal{
+                font-weight: 400;
+                font-size: 28px;
+                color: #333333;
+            }
+            .title-medal-info{
+                font-size: 16px;
+                color: #666666;
+                margin-top: 14px;
+            }
+            .medal-img{
+              position: absolute;
+              right:84px;
+              top:-104px;
+            }
+        }
+    }
+    }
+   
      .medal-box{
         padding: 30px 70px;
         .medal-list{