Skip to content

Y
year-end-activitiy
提交 c45e8ed6 编写于 作者: Yuanzhao.dai's avatar Yuanzhao.dai
浏览文件
操作

个人成绩单静态页面

上级 7160cc8f
隐藏空白字符变更
内嵌 并排
正在显示 包含 247 行增加 和 0 行删除
assets/img/stage3/personal-grade.png 0 → 100644
浏览文件 @ c45e8ed6
此差异已折叠。
assets/style/awards-list/personal-grade.less 0 → 100644
浏览文件 @ c45e8ed6
.personal-grade-wrap {
width: 100%;
min-height: 907px;
background: url("../../img/stage3/personal-grade.png") no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
img.title {
position: absolute;
top: 0;
left: 13.5px;
width: 169px;
height: 26.5px;
}
img.awards-grade {
position: absolute;
top: 0;
right: 24px;
width: 49px;
height: 59px;
}
.personal-info {
margin-top: 51.5px;
margin-left: 20px;
display: flex;
align-items: center;
img {
width: 50px;
height: 50px;
}
.right {
margin-left: 15px;
.name {
color: #FFFFFF;
font-weight: 700;
font-size: 20px;
line-height: 20px;
}
.hospital {
color: #FFFFFF;
font-weight: 700;
font-size: 14px;
line-height: 18px;
margin-top: 4.5px;
}
}
}
.join-num {
font-size: 15px;
font-weight: 700;
color: #fff;
line-height: 21px;
margin-top: 73px;
margin-left: 18.5px;
}
.grade-details {
margin-top: 10px;
margin-left: 15px;
overflow: hidden;
.left {
float: left;
.title {
color: #FFF36C;
font-size: 23px;
font-weight: 700;
line-height: 32.5px;
margin-left: 1.5px;
margin-bottom: 11px;
}
.item {
display: flex;
.line {
width: 3.5px;
height: 91.5px;
background: #FFFFFF;
opacity:0.53;
margin-right: 8px;
}
.line168 {
height: 84px;
}
.content {
.label {
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
line-height: 15px;
}
.grade {
color: #FFFFFF;
font-size: 40px;
font-weight: 700;
line-height: 40px;
margin-top: 9px;
margin-bottom: 6px;
}
.trapezoid {
position: relative;
.detail-bg {
width: 110px;
padding-left: 5px;
border-right:5px solid transparent;
border-top:21px solid #FFF36C;
padding-right: 5px;
}
.detail-text {
position: absolute;
top: 3px;
left: 5px;
color: #F7753F;
font-size: 14px;
font-weight: 700;
line-height: 14px;
}
}
.detail {
color: #FFF36C;
font-size: 14px;
line-height: 14px;
}
}
}
.marginItem {
margin-top: 30px;
margin-bottom: 30px;
}
}
.right {
width: 28px;
float: right;
margin-right: 40px;
margin-top: 24px;
p {
color: #FFFFFF;
font-size: 28px;
font-weight: 700;
}
p:first-child {
margin-bottom: 25px;
}
}
}
.task-details {
display: flex;
justify-content: center;
margin-top: 54.5px;
.task-item {
width: 60px;
display: flex;
flex-flow: column;
justify-content: center;
img {
width: 60px;
height: 60px;
margin-bottom: 10px;
}
p.num,p.name {
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
line-height: 20px;
text-align: center;
}
}
.task-item:nth-child(2) {
margin: 0 67.5px;
}
}
}
\ No newline at end of file
pages/awards-list/personal-grade.vue 0 → 100644
浏览文件 @ c45e8ed6
<template>
<section class="personal-grade-wrap">
<img src="~/assets/img/stage3/awards-title.png" alt="" class="title">
<img src="~/assets/img/stage3/awards-icon1.png" alt="" class="awards-grade">
<div class="personal-info">
<img src="https://test-file.yunqueyi.com/png/2019/9/19/1568874397547_45fff40f.png" alt="">
<div class="right">
<p class="name">赵欢</p>
<p class="hospital">上海复旦大学附属中山医院</p>
</div>
</div>
<div class="join-num">活动总计参与人数:23432334</div>
<div class="grade-details">
<div class="left">
<p class="title">您的成绩:</p>
<div class="item">
<div class="line"></div>
<div class="content">
<p class="label">累计获得勤奋分</p>
<p class="grade">1809987</p>
<div class="trapezoid">
<p class="detail-bg"></p>
<p class="detail-text">超过95%的医生</p>
</div>
</div>
</div>
<div class="item marginItem">
<div class="line line168"></div>
<div class="content">
<p class="label">累计获得云鹊豆</p>
<p class="grade">3600</p>
<div class="detail">记得去云鹊豆中心进行兑换哦</div>
</div>
</div>
<div class="item">
<div class="line line168"></div>
<div class="content">
<p class="label">进每日TOP10</p>
<p class="grade">5次</p>
<div class="detail">拿奖拿到手发软 </div>
</div>
</div>
</div>
<div class="right">
<p>学无止境</p>
<p>学而不倦</p>
</div>
</div>
<div class="task-details">
<div class="task-item">
<img src="~/assets/img/stage3/task-icon1.png" alt="">
<p class="num">13次</p>
<p class="name">活动打卡</p>
</div>
<div class="task-item">
<img src="~/assets/img/stage3/task-icon2.png" alt="">
<p class="num">12门</p>
<p class="name"> 学习课程</p>
</div>
<div class="task-item">
<img src="~/assets/img/stage3/task-icon3.png" alt="">
<p class="num">500人</p>
<p class="name">邀请好友</p>
</div>
</div>
</section>
</template>
<script>
export default {
name: "personal-grade"
}
</script>
<style scoped lang="less">
@import '../../assets/style/awards-list/personal-grade.less';
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或