hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-12 12:26:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
zhaofang
2022-09-16 19:50:01 +08:00
parent 507f3bf821
commit b54bedda70
2 changed files with 63 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/components/TopNav/Index.vue
View File

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

64
src/views/medal/Index.vue
View File

@@ -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{