Skip to content

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

update main-page html

上级 fd872583
显示空白字符变更
内嵌 并排
正在显示 包含 389 行增加 和 11 行删除
assets/style/in-activity.less
浏览文件 @ 13f6056c
.in-activity-wrap{
position: relative;
width: 375px; height: auto; overflow: hidden;
background: #F5663F;
.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{
......@@ -45,7 +47,7 @@
}
}
.big-bg-wrap{
width: 100%; height: 676px; overflow: hidden;
width: 100%; height: auto; overflow: hidden;
background: url('../img/stageTwo/bg-01.png') no-repeat left top;
background-size: 100% 100%;
......@@ -189,6 +191,240 @@
width: 325px; height: 46px; margin: 0 auto;
color: #996B3D; font-size: 15px; line-height: 40px; text-indent: 6px; font-weight: 700;
}
.bean-stage{
position: relative;
width: 355px; height: 75px;
img{
width: 355px; height: 75px; overflow: hidden;
}
.score-list{
position: absolute; left:0; bottom: -7px;
width: 345px; height: 12px; overflow: hidden;
padding-left: 10px;
li{
float: left;
width: 60px; height:12px; font-size: 12px; color: #373839; line-height: 12px;
text-align: center;
margin-right: 32px;
&:nth-child(4){
margin: 0;
}
}
}
}
}
// 未登录
.not-login-wrap{
width: 325px; height: 50px; margin: 0 auto;
padding: 20px 15px;
overflow: hidden;
border-radius: 13px;
background: #FFF;
.head-icon{
width: 50px; height: 50px; display: block; border: 0;
float: left;
}
.content-info{
width: 202px; height: 50px; overflow: hidden;
padding-left: 15px;
.not-login-text{
width: 202px; height: 28px;
color: #373839; font-size: 18px; line-height: 28px; font-weight: 700;
}
.tips{
width: 202px; height: 18px;
color: #676869; font-size: 14px; line-height: 18px;
}
}
}
}
// 邀请医生好友学课程
.invite-doctor-wrap{
position: relative;
width: 355px; height: 242px;
margin: 50px auto 0;
background: #FFF; border-radius: 13px;
.top-head-icon{
position: absolute; left:50%; top:-32px; margin-left: -158px; z-index:200;
width: 316px; height: 48px; border:0; display: block;
}
.invite-tips{
width: 100%; height: 55px; line-height: 55px;
font-size: 12px; color: #FD6037; text-align: center;
}
.invite-list-wrap{
width: 315px; height: 90px;
padding: 0 20px;
.invite-list{
width: 350px; height: 90px;
li{
position: relative;
width: 45px; height: 90px; margin-right: 23px; float: left;
.add-btn{
position: relative;
width: 45px; height: 45px; border-radius: 45px; background: #FFD9CD;
img{
position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px;
width: 20px; height: 20px;
&.right-icon-big{
width: 10px; height: 18px;
margin-left: -5px; margin-top: -9px;
}
}
}
.doctor-icon{
width: 45px; height: 45px; border-radius: 45px; border: 0; display: block;
}
.text{
position: absolute; left: 50%; top: 58px;
width: 60px; margin-left: -30px;
height: 12px; font-size: 12px; color: #676869; text-align: center; line-height: 12px;
.ellipsis;
&.see-more{
color: #FD5D33;
}
}
}
}
}
.invite-btn{
position: relative;
width: 331px; height: 69px; overflow: hidden; margin: 0 auto;
img{
width: 331px; height: 69px;
}
.text{
position: absolute; left: 0; top: 0;
width: 331px; height: 45px;
color: #B42F00; font-size: 22px; line-height: 45px;
text-align: center; font-weight: 700; letter-spacing: 1px;
}
}
.login-tips{
width: 355px; height: 17px; overflow: hidden;
font-size: 12px; line-height: 17px; text-align: center;
color: #FF8929;
}
}
// 每日任务
.daily-task{
width: 325px; height: 278px; margin: 30px auto 0;
background: #FFF; border-radius: 13px;
padding: 0 15px;
.top-center-bar{
width: 325px; height: 58px; overflow: hidden;
background: url('../img/stageTwo/daily-task-bar.png') no-repeat center center;
background-size: 128px 12px;
font-size: 18px; color: #F05D30; font-weight: 700; text-align: center; line-height: 58px;
}
.task-list{
width: 325px; height: 200px; overflow: hidden;
li{
width: 325px; height: 50px; overflow: hidden; margin-bottom: 20px;
.left-icon{
width: 50px; height: 50px; display: block; border: 0; float: left;
}
.center-wrap{
width: 184px; height: 50px; display: block; float: left;
padding: 0 15px;
.title{
width: 184px; height: 30px;
font-size: 16px; color: #373839; font-weight: 700; line-height: 30px;
}
.detail-text{
width: 184px; height: 12px; line-height: 12px;
font-size: 12px; color: #676869;
}
}
.right-btn{
margin-top: 11px;
width: 60px; height: 30px; border-radius: 30px;
overflow: hidden; float: left;
font-weight: 700; color: #FFF;
font-size: 13px; line-height: 31px; text-align: center;
background: linear-gradient(to right, #FEA356, #FF5824);
&.done{
color: #EE5C2E; background: #FFD9CD;
}
}
}
}
}
// 底部logo
.bottom-logo{
width: 100%; height: 92px;
background: url('../img/stageTwo/bottom-logo.png') no-repeat center center;
background-size: 36px 45px;
}
// 弹窗
.toast-wrap{
position: fixed; left: 0; top: 0; z-index: 500;
width: 100%; height: 100%; overflow: hidden;
.full-screen-mask{
width: 100%; height: 100%;
background: #000000; opacity: 0.5;
}
.content-wrap{
position: absolute; left: 50%; top: 50%; z-index: 1000;
margin-left: -140px; margin-top: -150px;
width: 280px; height: 300px;
// 活动结束 弹窗
&.activity-end{
width: 300px; height: 144px; overflow: hidden;
margin-left: -150px; margin-top: -87px;
background: #FFF; border-radius: 3px;
padding-top: 30px;
.content-text{
width: 240px; height: 63px; padding: 0 30px;
color: #676869;
font-size: 14px; line-height: 21px;
}
.btn-list{
width: 300px; height: 50px; overflow: hidden; margin-top: 30px;
li{
width: 50%; height: 50px; overflow: hidden; float: left;
color: #979899; font-size: 17px; line-height: 50px; text-align: center;
&.high-light{
color: #449284;
}
}
}
}
.back-image{
position: absolute; left: 0; top: 0; z-index: -1;
width: 280px; height: 300px;
}
.title{
width: 280px; height: 21px;
font-size: 21px; line-height: 21px; font-weight: 700; color: #333333;
margin-top: 167px;
text-align: center;
}
.message{
width: 280px; height: 14px;
font-size: 14px; line-height: 14px; text-align: center;
color: #676869; margin-top: 15px;
}
.bottom-btn{
width: 209px; height: 44px;
font-size: 17px; line-height: 44px; text-align: center; color: #FFF;
margin: 0 auto; border-radius: 44px; margin-top: 20px;
background: linear-gradient(to right, #FEA356, #FF5824);
}
.close-btn{
position: absolute; left: 50%; bottom: -50px; margin-left: -15px;
width: 30px; height: 30px;
background: url('../img/stageTwo/close-toast-icon.png') no-repeat center center;
background-size: 30px; height: 30px;
}
}
}
......
pages/in-activity.vue
浏览文件 @ 13f6056c
......@@ -29,17 +29,17 @@
<img class="reward-pic" src="../assets/img/stageTwo/award-01-pic.png" alt="">
</div>
<div class="user-info-wrap">
<!-- <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="">
<img src="../assets/img/stageTwo/default-doctor-icon.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 class="detail"> 个人明细<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
</div>
<ul class="billboard-wrap">
......@@ -47,34 +47,176 @@
<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>
<div class="billboard-btn">查看个人榜单<img src="../assets/img/stageTwo/right-icon-small.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>
<div class="billboard-btn">查看机构榜单<img src="../assets/img/stageTwo/right-icon-small.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 class="bean-center">云鹊豆中心<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
</div>
<p class="bean-tips">机构勤奋分达成目标，全员可获云鹊豆</p>
<div class="bean-stage">
<img src="../assets/img/stageTwo/bean-stage01.png" alt="">
<ul class="score-list">
<li>达2000分</li>
<li>达3000分</li>
<li>达5000分</li>
<li>12月30日</li>
</ul>
</div>
</div> -->
<!-- 未登录 -->
<div class="not-login-wrap">
<img class="head-icon" src="../assets/img/stageTwo/not-login-icon.png" alt="">
<div class="content-info">
<p class="not-login-text">您还未登录</p>
<p class="tips">登录并加入机构参加活动</p>
</div>
</div>
</div>
<!-- 邀请医生好友学课程 -->
<div class="invite-doctor-wrap">
<img class="top-head-icon" src="../assets/img/stageTwo/invite-doctor-top.png" alt="">
<p class="invite-tips">每邀请1位医生好友领取课程，+20勤奋分 +20云鹊豆</p>
<div class="invite-list-wrap">
<ul class="invite-list">
<li>
<div class="add-btn">
<img src="../assets/img/stageTwo/add-pic-icon.png" alt="">
</div>
<!-- 注意 默认头像 -->
<!-- <img class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt=""> -->
<p class="text">185****7666</p>
</li>
<li>
<div class="add-btn">
<img src="../assets/img/stageTwo/add-pic-icon.png" alt="">
</div>
<!-- 注意 默认头像 -->
<!-- <img class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt=""> -->
<p class="text">185****7666</p>
</li>
<li>
<div class="add-btn">
<img src="../assets/img/stageTwo/add-pic-icon.png" alt="">
</div>
<!-- 注意 默认头像 -->
<!-- <img class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt=""> -->
<p class="text">185****7666</p>
</li>
<li>
<div class="add-btn">
<img src="../assets/img/stageTwo/add-pic-icon.png" alt="">
</div>
<!-- 注意 默认头像 -->
<!-- <img class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt=""> -->
<p class="text">185****7666</p>
</li>
<!-- 查看更多 -->
<li>
<div class="add-btn">
<img class="right-icon-big" src="../assets/img/stageTwo/right-icon-big.png" alt="">
</div>
<p class="text see-more">查看更多</p>
</li>
</ul>
</div>
<div class="invite-btn">
<img src="../assets/img/stageTwo/invite-btn.png" alt="" class="invite-btn">
<p class="text">去邀请</p>
</div>
<div class="login-tips">被邀请好友登录APP，收益X4倍</div>
</div>
<!-- 每日任务 -->
<div class="daily-task">
<div class="top-center-bar">每日任务</div>
<ul class="task-list">
<li>
<img class="left-icon" src="../assets/img/stageTwo/daily-clock-icon.png" alt="">
<div class="center-wrap">
<p class="title">每日打卡</p>
<p class="detail-text">+5勤奋分 +5云鹊豆</p>
</div>
<div class="right-btn done">已打卡</div>
</li>
<li>
<img class="left-icon" src="../assets/img/stageTwo/hypertension-icon.png" alt="">
<div class="center-wrap">
<p class="title">高血压课程学习</p>
<p class="detail-text">+5勤奋分 +5云鹊豆</p>
</div>
<div class="right-btn">去学习</div>
</li>
<li>
<img class="left-icon" src="../assets/img/stageTwo/smo-icon.png" alt="">
<div class="center-wrap">
<p class="title">高血压SMO项目任务</p>
<p class="detail-text">奖励xxx勤奋分</p>
</div>
<div class="right-btn">去完成</div>
</li>
</ul>
</div>
<!-- 底部云鹊logo -->
<div class="bottom-logo">
<img src="" alt="">
</div>
<!-- 打卡成功 弹窗 -->
<div v-if="clockSuccessVisible" class="toast-wrap" @touchmove.prevent>
<div class="full-screen-mask"></div>
<div class="content-wrap">
<img class="back-image" src="../assets/img/stageTwo/clock-success-bg.png" alt="">
<!-- <img class="back-image" src="../assets/img/stageTwo/win-award-bg.png" alt=""> -->
<!-- <img class="back-image" src="../assets/img/stageTwo/award-cup-bg.png" alt=""> -->
<p class="title">打卡成功</p>
<p class="message">已获得: 5勤奋分, 5云鹊豆</p>
<div class="bottom-btn">我知道了</div>
<div class="close-btn"></div>
</div>
</div>
<!-- 活动结束 弹窗-->
<div v-if="activityEndVisible" class="toast-wrap" @touchmove.prevent>
<div class="full-screen-mask"></div>
<div class="content-wrap activity-end">
<p class="content-text">本次活动已结束，感谢您的参与，最终获奖排名将于12月30日10点公布，届时查看</p>
<ul class="btn-list">
<li>我知道了</li>
<li class="high-light">查看昨日获奖</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
clockSuccessVisible: false,
activityEndVisible: false,
}
},
methods: {
// 活动规则
handleRuleBtnClick() {
console.log('跳转至 活动规则页面')
alert('跳转至 活动规则页面')
},
},
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或