纪念勋章

This commit is contained in:
zhaofang
2022-11-03 11:38:14 +08:00
parent a693cf7fbd
commit 89c44e2576

View File

@@ -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;
}