纪念勋章

src/views/medal/Index.vue

@@ -15,8 +15,13 @@
                     <p class="index-text">您已超过{{item.exceed}}人</p>
                     <el-button class="btn" type="primary" @click="goView(item)">查看详情</el-button>
                 </div>
+                <div class="medal-index" v-else>
+                    <img style="width:143px;height:161px" :src="`${webBaseUrl}/images/login_medal.png`" alt="">
+                    <p class="index-title">{{item.medalName}}</p>
+                    <!-- <p class="index-text">您已超过{{item.exceed}}人</p> -->
+                    <el-button class="btn" style="margin-top:30px" type="primary" @click="showLoginMedal = true">查看详情</el-button>
+                </div>
             </div>
-
       </div>
       <div v-else class="home-no-list">
             <img class="img" style="width:360px;height:226px" :src="`${webBaseUrl}/images/homeWu/no-madel.png`" alt="" srcset="">
@@ -57,6 +62,20 @@
             </el-table>
           </div>
         </el-dialog>
+        <el-dialog width="540px"  class="medalbox"  :visible.sync="showLoginMedal"  :append-to-body="true" >
+        <div class="jinian-medal-img" :style="`background: url(${webBaseUrl}/images/jinian_medal.png) no-repeat;`">
+           <!--登录勋章显示，根据UI显示修改-->
+           <span style="position: absolute; right:60px;top:60px;cursor: pointer;">
+             <img @click="showLoginMedal = false" :src="`${webBaseUrl}/images/close.png`" width="26px" height="26px" alt="">
+           </span>
+           <div style="text-align: center;"><img :src="`${webBaseUrl}/images/login_medal.png`" width="206px" height="269px" alt=""></div>
+           <div style="text-align: left;padding:20px 60px 100px 60px">
+             <div class="jntext1">感谢有你 一路相办</div>
+             <div class="jntext2">勋章领取条件:</div>
+             <div class="jntext3">2022年10月31日-11月15日登录过平台学习的校友</div>
+           </div>
+        </div>
+    </el-dialog>
     </div>
   </template>
 
@@ -99,6 +118,7 @@
                     return item.medalId == 3;
                 })
             }
+            console.log(data,'data');
             return data;
             }
           },
@@ -107,6 +127,7 @@
           },
           data(){
               return{
+                showLoginMedal:false,
                 baseUrl:process.env.VUE_APP_FILE_BASE_URL,
                 activeName:'first',
                 dialogVisible:false,
@@ -122,7 +143,7 @@
              this.getConfig();
           },
         methods:{
-
+            
             getConfig() {// 获取勋章配置
                 apiStat.userMedalConfig().then(res=>{
                     if(res.status == 200) {
@@ -168,6 +189,51 @@
   </script>
 
   <style lang="scss" scoped>
+  .medalbox {
+  background: transparent !important;
+ ::v-deep .el-dialog{
+   background: transparent !important;
+   box-shadow:none !important;
+   .el-dialog__header{
+     display: none !important;
+   }
+   .el-dialog__body{
+    //  width: 320px !important;
+    //  height: 420px !important;
+    background: transparent !important;
+   }
+}
+}
+.jinian-medal-img{
+  text-align: center;
+  padding-top: 10px;
+  .jntext1{
+    height: 56px;
+    font-size: 40px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #924504;
+    line-height: 56px;
+  }
+  .jntext2{
+    margin-top: 30px;
+    height: 30px;
+    font-size: 22px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #924504;
+    line-height: 30px;
+  }
+  .jntext3{
+    margin-top: 10px;
+    height: 50px;
+    font-size: 18px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #924504;
+    line-height: 25px;
+  }
+}
     ::v-deep .el-dialog__body{
         border-radius: 27px !important;
     }