个人中心我的勋章页面

src/assets/styles/portal-index.scss

@@ -152,4 +152,8 @@
     100% {
         bottom: 200px;
     }
+}
+.el-button--primary{
+    background-color: #387DF7;
+    border-color: #387DF7;
 }

src/views/medal/Index.vue

@@ -1,6 +1,21 @@
 <template>
-    <div class="u-currency">
-      我 的  勋 章
+    <div class="medal-box">
+      <h6 class="medal-title">我的勋章 <span class="text">勋章规则 ></span> </h6>
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="全部勋章" name="first">
+            <div class="medal-list" >
+                <div class="medal-index" v-for="item in 5">
+                    <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>
+                </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="学习勋章" name="second">学习勋章</el-tab-pane>
+          <el-tab-pane label="社交勋章" name="third">社交勋章</el-tab-pane>
+          <el-tab-pane label="成就勋章" name="fourth">成就勋章</el-tab-pane>
+      </el-tabs>
     </div>
   </template>
   
@@ -8,16 +23,78 @@
       export default{
           data(){
               return{
-  
+                activeName:'first'
               }
           },
       methods:{
-       
+        handleClick() {
+
+        }
        }
       }
   </script>
   
   <style lang="scss" scoped>
-     
+     .medal-box{
+        padding: 30px 70px;
+        .medal-list{
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .medal-index{
+            
+            width: 144px;
+            margin: 40px 60px 0 60px;
+            text-align: center;
+            .index-title{
+                margin-top: 26px;
+                font-size: 18px;
+                font-weight: 600;
+                color: #333333;
+            }
+            .index-text{
+                font-size: 14px;
+                font-weight: 400;
+                color: #666666;
+                margin-top: 10px;
+                margin-bottom: 24px;
+            }
+            .btn{
+                width: 140px;
+            }
+        }
+        .medal-title{
+            margin: 0;
+            font-size: 18px;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
+            color: #333333;
+            margin-bottom: 24px;
+            .text{
+                font-size: 14px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #333333;
+                margin-left: 12px;
+            }
+        }
+        ::v-deep .el-tabs__item{
+            height: 46px;
+            font-size: 18px;
+            color: #666666;
+            padding: 0 30px;
+        }
+        ::v-deep .el-tabs__item.is-active{
+
+        }
+        ::v-deep .el-tabs__nav-wrap::after{
+            background-color: #fff !important;
+        }
+        ::v-deep .el-tabs__active-bar{
+            height: 4px;
+            width: 80px;
+            border-radius: 4px;
+        }
+     }
   </style>