Skip to content

Y
year-end-activitiy
提交 fd872583 编写于 作者: chengxiang.li's avatar chengxiang.li
浏览文件
操作

update stageTwo page

上级 d85e7f4e
隐藏空白字符变更
内嵌 并排
正在显示 包含 286 行增加 和 8 行删除
assets/style/in-activity.less 0 → 100644
浏览文件 @ fd872583
.in-activity-wrap{
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
width: 375px;
background: #F5663F;
ul,li{ list-style: none; };
img{ border:0; display: block; }
.top-process-bar{
width: 100%; height: 42px;
overflow: hidden;
li{
width: 25%; height: 42px;
float: left; overflow: hidden;
background: #E35D5B;
box-sizing: border-box;
border-right: 1px solid #B50300;
&:nth-child(4){ border-right: 0; }
color:rgba(255,181,179,1);
border-bottom: 2px solid #D80D0A;
background: linear-gradient(to bottom, #E53935, #E35D5B);
&.over{
color:rgba(224,100,97,1); border-bottom: 2px solid #7D1716;
background: linear-gradient(to bottom, #B32B29, #9C2A29);
}
&.active{
color:rgba(173,14,59,1); border-bottom: 2px solid #CA6507;
background: linear-gradient(to bottom, #FFE578, #FFC643);
border-right: 0;
}
p{
text-align: center;
&.title{
font-size: 12px; font-weight: 700; line-height: 12px;
margin-top: 6px;
}
&.date{
font-size: 12px; line-height: 12px;
margin-top: 4px;
}
}
}
}
.big-bg-wrap{
width: 100%; height: 676px; overflow: hidden;
background: url('../img/stageTwo/bg-01.png') no-repeat left top;
background-size: 100% 100%;
.award-wrap{
width: 100%; height: 180px; overflow: hidden;
.stage-rule{
width: 100%; height: 52px; overflow: hidden;
.stage-text{
float: left;
width: 170px; height: 19px; margin: 11px 0 0 23px;
}
.rule-btn{
float: right;
width: 69px; height: 25px; margin-top: 8px;
}
}
.reward-pic{
margin: 0 auto;
width: 330px; height: 96px;
}
}
.user-info-wrap{
position: relative;
width: 355px; height: 480px;
margin: 2px auto 0;
background: url('../img/stageTwo/user-info-bg.png') no-repeat left top;
background-size: 100% 100%;
.gold-coin{
position: absolute; right: -20px; top: -32px;
width: 63px; height: 65px; border:0; display: block;
}
.basic-info{
width: 355px; height: 80px; overflow: hidden;
padding: 16px 15px 0; box-sizing: border-box;
.head-icon{
float: left;
width: 50px; height: 50px; overflow: hidden;
border-radius: 50px;
border: 1px solid red;
img{
width: 50px; height: 50px;
}
}
.name-info{
float: left;
width: 190px; height: 50px; overflow: hidden;
margin-left: 14px;
color:#373839;
.name{
width: 100%;
font-size: 18px; line-height: 18px; margin-top: 5px; font-weight: 700;
.ellipsis;
}
.company{
width: 100%;
font-size: 14px; line-height: 18px; margin-top: 5px;
.ellipsis;
}
}
.detail{
position: relative;
float: left; box-sizing: border-box; font-weight: 700;
width: 68px; height: 25px; overflow: hidden; border-radius: 25px; border: 1px solid #FD5A2F;
font-size: 12px; color: #FD5A2F; line-height: 23px; text-indent: 5px;
margin-top: 18px;
img{
position: absolute; right: 5px; top: 50%; margin-top:-5px;
width: 6px; height: 11px;
}
}
}
.billboard-wrap{
width: 325px; height: 137px; overflow: hidden;
padding: 0 15px;
li{
width: 160px; height: 137px; overflow: hidden; float: left;
background: #FFE2D9; border-radius: 8px;
box-sizing: border-box;
padding: 15px 4px 0 15px;
&.organ{
margin-left: 5px;
}
.title{
width: 142px; height: 14px; font-size: 14px; line-height: 14px; color: #373839;
}
.score{
width: 142px; height: 26px; font-size: 26px; line-height: 26px; color: #FD5A2F; margin-top: 6px;
}
.rank{
position: relative;
width: 142px; height: 13px; font-size: 13px; line-height: 13px; color: #996B3D; margin-top: 10px;
font-weight: 700;
text-indent: 14px;
img{
position: absolute; left: 0; top: 50%; margin-top: -5px;
width: 10px; height: 11px;
}
}
.billboard-btn{
position: relative;
width: 99px; height: 25px; border: 1px solid #FD5A2F; border-radius: 25px;
margin-top: 15px;
font-size: 12px; font-weight: 700; line-height: 25px; color: #FD5A2F; text-indent: 10px;
img{
position: absolute; right: 8px; top: 50%; margin-top:-5px;
width: 6px; height: 11px;
}
}
}
}
.score-tips{
width: 325px; height: 25px; overflow: hidden; margin: 0 auto;
background:#FFF1D0; color: #FD5A2F; text-indent: 10px; font-size: 12px; line-height: 25px;
border-radius: 25px; margin-top: 5px;
}
.bean-wrap{
width: 325px; height: 27px; overflow: hidden;
margin: 30px auto 0; padding-bottom: 16px;
border-bottom: 1px solid #FFDBD0;
.personal-total-get{
float: left; margin: 5px 0 0 6px;
font-size: 16px; color: #373839; font-weight: 700; line-height: 16px;
span{ color: #FD5A2F; }
}
.bean-center{
position: relative;
float: right;
width: 81px; height: 25px;
border: 1px solid #FD5A2F; border-radius: 25px;
line-height: 25px; text-indent: 8px; font-size: 12px; line-height: 25px; color: #FD5A2F; font-weight: 700;
img{
position: absolute; right: 5px; top: 50%; margin-top:-6px;
width: 6px; height: 11px;
}
}
}
.bean-tips{
width: 325px; height: 46px; margin: 0 auto;
color: #996B3D; font-size: 15px; line-height: 40px; text-indent: 6px; font-weight: 700;
}
}
}
}
\ No newline at end of file
package-lock.json
浏览文件 @ fd872583
......@@ -6699,7 +6699,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -6805,7 +6806,8 @@
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
......@@ -8541,8 +8543,7 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
......@@ -8670,8 +8671,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -8683,7 +8683,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -8944,7 +8943,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......
pages/in-activity.vue 0 → 100644
浏览文件 @ fd872583
<template>
<div class="in-activity-wrap">
<!-- 顶部的四个阶段 进度条 -->
<ul class="top-process-bar">
<li class="over">
<p class="title">高血压学习</p>
<p class="date">12月16至19日</p>
</li>
<li class="active">
<p class="title">糖尿病学习</p>
<p class="date">12月20至24日</p>
</li>
<li>
<p class="title">中医科学习</p>
<p class="date">12月24至27日</p>
</li>
<li>
<p class="title">全科学习</p>
<p class="date">12月27至30日</p>
</li>
</ul>
<div class="big-bg-wrap">
<div class="award-wrap">
<div class="stage-rule">
<img class="stage-text" src="../assets/img/stageTwo/stage-01-text.png" alt="">
<img class="rule-btn" src="../assets/img/stageTwo/rule-btn.png" alt="" @click="handleRuleBtnClick">
</div>
<img class="reward-pic" src="../assets/img/stageTwo/award-01-pic.png" alt="">
</div>
<div class="user-info-wrap">
<img class="gold-coin" src="../assets/img/stageTwo/gold-coin.png" alt="">
<div class="basic-info">
<div class="head-icon">
<img src="../assets/img/stageTwo/ddd.png" alt="">
</div>
<div class="name-info">
<p class="name">召唤</p>
<p class="company">上海复旦大学附属中山医院</p>
</div>
<div class="detail"> 个人明细<img src="../assets/img/stageTwo/right-icon.png" alt=""></div>
</div>
<ul class="billboard-wrap">
<li>
<p class="title">个人今日勤奋分</p>
<p class="score">0</p>
<p class="rank"><img src="../assets/img/stageTwo/billboard-flag.png" alt="">今日排名-</p>
<div class="billboard-btn">查看个人榜单<img src="../assets/img/stageTwo/right-icon.png" alt=""></div>
</li>
<li class="organ">
<p class="title">机构累计勤奋分</p>
<p class="score">0</p>
<p class="rank"><img src="../assets/img/stageTwo/billboard-flag.png" alt="">排名-</p>
<div class="billboard-btn">查看机构榜单<img src="../assets/img/stageTwo/right-icon.png" alt=""></div>
</li>
</ul>
<p class="score-tips">再获得10勤奋分即可上升到前10名获得欧姆龙温度计</p>
<div class="bean-wrap">
<p class="personal-total-get">累计个人获得：<span>999999云鹊豆</span></p>
<div class="bean-center">云鹊豆中心<img src="../assets/img/stageTwo/right-icon.png" alt=""></div>
</div>
<p class="bean-tips">机构勤奋分达成目标，全员可获云鹊豆</p>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
// 活动规则
handleRuleBtnClick() {
console.log('跳转至 活动规则页面')
},
},
}
</script>>
<style lang="less">
@import '../assets/style/in-activity.less';
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或