Skip to content

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

活动主页界面UI布局调整及获奖Tips更新

上级 9047d164
显示空白字符变更
内嵌 并排
正在显示 包含 102 行增加 和 102 行删除
assets/style/in-activity.less
浏览文件 @ c71d46a6
...@@ -46,13 +46,11 @@ ...@@ -46,13 +46,11 @@
} }
} }
} }
.big-bg-wrap{
width: 100%; height: auto; overflow: hidden;
background: url('../img/stage-two/bg-01.png') no-repeat left top;
background-size: 100% 100%;
.award-wrap{ .award-wrap{
width: 100%; height: 180px; overflow: hidden; width: 100%; height: 214px; overflow: hidden;
background: url('../img/stage-two/top-stage-bg.png') no-repeat left top;
background-size: 100% 100%;
.stage-rule{ .stage-rule{
width: 100%; height: 52px; overflow: hidden; width: 100%; height: 52px; overflow: hidden;
.stage-text{ .stage-text{
...@@ -72,7 +70,7 @@ ...@@ -72,7 +70,7 @@
.user-info-wrap{ .user-info-wrap{
position: relative; position: relative;
width: 355px; height: 480px; width: 355px; height: 480px;
margin: 2px auto 0; margin: 35px auto 0;
background: url('../img/stage-two/user-info-bg.png') no-repeat left top; background: url('../img/stage-two/user-info-bg.png') no-repeat left top;
background-size: 100% 100%; background-size: 100% 100%;
.gold-coin{ .gold-coin{
...@@ -164,7 +162,7 @@ ...@@ -164,7 +162,7 @@
.score-tips{ .score-tips{
width: 325px; height: 25px; overflow: hidden; margin: 0 auto; width: 325px; height: 25px; overflow: hidden; margin: 0 auto;
background:#FFF1D0; color: #FD5A2F; text-indent: 10px; font-size: 12px; line-height: 25px; background:#FFF1D0; color: #FD5A2F; text-indent: 10px; font-size: 12px; line-height: 25px;
border-radius: 25px; margin-top: 5px; border-radius: 8px; margin-top: 5px;
} }
.bean-wrap{ .bean-wrap{
width: 325px; height: 27px; overflow: hidden; width: 325px; height: 27px; overflow: hidden;
...@@ -217,7 +215,7 @@ ...@@ -217,7 +215,7 @@
// 未登录 // 未登录
.not-login-wrap{ .not-login-wrap{
position: relative; position: relative;
width: 325px; height: 50px; margin: 0 auto; width: 325px; height: 50px; margin: 35px auto 0;
padding: 20px 15px; padding: 20px 15px;
border-radius: 13px; border-radius: 13px;
background: #FFF; background: #FFF;
...@@ -261,13 +259,12 @@ ...@@ -261,13 +259,12 @@
} }
} }
}
// 邀请医生好友学课程 // 邀请医生好友学课程
.invite-doctor-wrap{ .invite-doctor-wrap{
position: relative; position: relative;
width: 355px; height: 242px; width: 355px; height: 242px;
margin: 50px auto 0; margin: 0 auto 0;
background: #FFF; border-radius: 13px; background: #FFF; border-radius: 13px;
.top-head-icon{ .top-head-icon{
position: absolute; left:50%; top:-32px; margin-left: -158px; z-index:200; position: absolute; left:50%; top:-32px; margin-left: -158px; z-index:200;
...@@ -334,7 +331,7 @@ ...@@ -334,7 +331,7 @@
// 每日任务 // 每日任务
.daily-task{ .daily-task{
width: 325px; height: 278px; margin: 30px auto 0; width: 325px; height: 278px; margin: 35px auto 0;
background: #FFF; border-radius: 13px; background: #FFF; border-radius: 13px;
padding: 0 15px; padding: 0 15px;
.top-center-bar{ .top-center-bar{
......
pages/activityPage.vue
浏览文件 @ c71d46a6
...@@ -13,13 +13,13 @@ ...@@ -13,13 +13,13 @@
/> />
<!-- 顶部的四个阶段 进度条 --> <!-- 顶部的四个阶段 进度条 -->
<ul class="top-process-bar"> <ul class="top-process-bar">
<li v-for="(item, index) in stageDateList" :class="returnStageClass(item, index)"> <li v-for="(item, index) in stageDateList" :class="returnStageClass(item, index)" :key="index">
<p class="title">{{ item.title }}</p> <p class="title">{{ item.title }}</p>
<p class="date">{{ item.date }}</p> <p class="date">{{ item.date }}</p>
</li> </li>
</ul> </ul>
<div class="big-bg-wrap">
<div class="award-wrap"> <div class="award-wrap">
<div class="stage-rule"> <div class="stage-rule">
<img class="stage-text" :src="returnStageText()" alt=""> <img class="stage-text" :src="returnStageText()" alt="">
...@@ -28,75 +28,8 @@ ...@@ -28,75 +28,8 @@
<img class="reward-pic" :src="returnAwardPic()" alt=""> <img class="reward-pic" :src="returnAwardPic()" alt="">
</div> </div>
<!-- 未登录 -->
<div v-if="!isLogin" class="not-login-wrap">
<img class="gold-coin" src="../assets/img/stage-two/gold-coin.png" alt="">
<img class="head-icon" src="../assets/img/stage-two/default-login-icon.png" alt="">
<div class="content-info">
<p class="not-login-text">您还未登录</p>
<p class="tips">登录并加入机构参加活动</p>
</div>
<div class="go-login login-but-no-join" @click="goToLogin">去登录<img src="../assets/img/stage-two/right-icon-small.png" alt=""></div>
</div>
<!-- 已登录，但没有加入机构 -->
<div v-if="isLogin && !isJoin" class="not-login-wrap ">
<img class="gold-coin" src="../assets/img/stage-two/gold-coin.png" alt="">
<img class="head-icon" v-if="doctorInfo.avatarImageUrl" :src="doctorInfo.avatarImageUrl" alt="">
<img class="head-icon" v-else src="../assets/img/stage-two/default-login-icon.png" alt="">
<div class="content-info">
<p class="not-login-text">{{ doctorInfo.name }}</p>
<p class="tips">尚未加入一个机构</p>
</div>
<div class="go-login login-but-nojoin" @click="goToJoin">加入机构<img src="../assets/img/stage-two/right-icon-small.png" alt=""></div>
</div>
<!-- 已登录 且 已加入机构 -->
<div v-if="isLogin && isJoin" class="user-info-wrap">
<img class="gold-coin" src="../assets/img/stage-two/gold-coin.png" alt="">
<div class="basic-info">
<div class="head-icon">
<img v-if="doctorInfo.avatarImageUrl" :src="doctorInfo.avatarImageUrl" alt="">
<img v-else src="../assets/img/stage-two/default-login-icon.png" alt="">
</div>
<div class="name-info">
<p class="name">{{ doctorInfo.name }}</p>
<p class="company">{{ doctorInfo.hospital }}</p>
</div>
<div @click="goToUserDetail" class="detail">个人明细<img src="../assets/img/stage-two/right-icon-small.png" alt=""></div>
</div>
<ul class="billboard-wrap">
<li>
<p class="title">个人今日勤奋分</p>
<p class="score">{{doctorInfo.userDayScore}}</p>
<p class="rank"><img src="../assets/img/stage-two/billboard-flag.png" alt="">今日排名{{doctorInfo.userDayRank}}</p>
<div @click="goToUserBoard" class="billboard-btn">查看个人榜单<img src="../assets/img/stage-two/right-icon-small.png" alt=""></div>
</li>
<li class="organ">
<p class="title">机构累计勤奋分</p>
<p class="score">{{doctorInfo.hospitalScore}}</p>
<p class="rank"><img src="../assets/img/stage-two/billboard-flag.png" alt="">累计排名{{doctorInfo.hospitalRank}}</p>
<div @click="goToOrganBoard" class="billboard-btn">查看机构榜单<img src="../assets/img/stage-two/right-icon-small.png" alt=""></div>
</li>
</ul>
<p class="score-tips">{{ scoreAwardTips }}</p>
<div class="bean-wrap">
<p class="personal-total-get">累计个人获得：<span>{{doctorInfo.userTotalBonus}}云鹊豆</span></p>
<div @click="goToBeanCenter" class="bean-center">云鹊豆中心<img src="../assets/img/stage-two/right-icon-small.png" alt=""></div>
</div>
<p class="bean-tips">机构勤奋分达成目标，全员可获云鹊豆</p>
<div class="bean-stage">
<img :src="returnBeanImg" alt="">
<ul class="score-list">
<li v-for="item in doctorInfo.hospitalLevelScore">达{{item}}分</li>
<li>12月30日</li>
</ul>
</div>
</div>
</div>
<!-- 邀请医生好友学课程 --> <!-- 邀请医生好友学课程 -->
<div class="invite-doctor-wrap"> <div class="invite-doctor-wrap">
<img class="top-head-icon" src="../assets/img/stage-two/invite-doctor-top.png" alt=""> <img class="top-head-icon" src="../assets/img/stage-two/invite-doctor-top.png" alt="">
...@@ -131,14 +64,14 @@ ...@@ -131,14 +64,14 @@
</template> </template>
<template v-if="isLogin && isJoin"> <template v-if="isLogin && isJoin">
<!-- 已邀请的 --> <!-- 已邀请的 -->
<li v-for="item in inviteList"> <li v-for="(item, index) in inviteList" :key="index">
<img @click="eachDoctorClick" v-if="item.avatarImageUrl" class="doctor-icon" :src="item.avatarImageUrl" alt=""> <img @click="eachDoctorClick" v-if="item.avatarImageUrl" class="doctor-icon" :src="item.avatarImageUrl" alt="">
<img @click="eachDoctorClick" v-else class="doctor-icon" src="../assets/img/stage-two/default-doctor-icon.png" alt=""> <img @click="eachDoctorClick" v-else class="doctor-icon" src="../assets/img/stage-two/default-doctor-icon.png" alt="">
<p class="text">{{ item.doctorName ? item.doctorName : item.mobile }}</p> <p class="text">{{ item.doctorName ? item.doctorName : item.mobile }}</p>
</li> </li>
<!-- 未邀请的 --> <!-- 未邀请的 -->
<template v-if="inviteList && inviteList.length < 4"> <template v-if="inviteList && inviteList.length < 4">
<li v-for="item in notInviteShowList"> <li v-for="(item, index) in notInviteShowList" :key="index">
<div class="add-btn" @click="eachDoctorClick"> <div class="add-btn" @click="eachDoctorClick">
<img src="../assets/img/stage-two/add-pic-icon.png" alt=""> <img src="../assets/img/stage-two/add-pic-icon.png" alt="">
<p class="text">昵称</p> <p class="text">昵称</p>
...@@ -167,7 +100,7 @@ ...@@ -167,7 +100,7 @@
<div class="top-center-bar">每日任务</div> <div class="top-center-bar">每日任务</div>
<ul class="task-list"> <ul class="task-list">
<!-- taskList --> <!-- taskList -->
<li v-for="item in taskList"> <li v-for="(item, index) in taskList" :key="index">
<img class="left-icon" :src="returnEachTaskIcon(item)" alt=""> <img class="left-icon" :src="returnEachTaskIcon(item)" alt="">
<div class="center-wrap"> <div class="center-wrap">
<p class="title">{{ item.ruleName }}</p> <p class="title">{{ item.ruleName }}</p>
...@@ -178,6 +111,71 @@ ...@@ -178,6 +111,71 @@
</ul> </ul>
</div> </div>
<!-- 未登录 -->
<div v-if="!isLogin" class="not-login-wrap">
<img class="head-icon" src="../assets/img/stage-two/default-login-icon.png" alt="">
<div class="content-info">
<p class="not-login-text">您还未登录</p>
<p class="tips">登录并加入机构参加活动</p>
</div>
<div class="go-login login-but-no-join" @click="goToLogin">去登录<img src="../assets/img/stage-two/right-icon-small.png" alt=""></div>
</div>
<!-- 已登录，但没有加入机构 -->
<div v-if="isLogin && !isJoin" class="not-login-wrap ">
<img class="head-icon" v-if="doctorInfo.avatarImageUrl" :src="doctorInfo.avatarImageUrl" alt="">
<img class="head-icon" v-else src="../assets/img/stage-two/default-login-icon.png" alt="">
<div class="content-info">
<p class="not-login-text">{{ doctorInfo.name }}</p>
<p class="tips">尚未加入一个机构</p>
</div>
<div class="go-login login-but-nojoin" @click="goToJoin">加入机构<img src="../assets/img/stage-two/right-icon-small.png" alt=""></div>
</div>
<!-- 已登录 且 已加入机构 -->
<div v-if="isLogin && isJoin" class="user-info-wrap">
<div class="basic-info">
<div class="head-icon">
<img v-if="doctorInfo.avatarImageUrl" :src="doctorInfo.avatarImageUrl" alt="">
<img v-else src="../assets/img/stage-two/default-login-icon.png" alt="">
</div>
<div class="name-info">
<p class="name">{{ doctorInfo.name }}</p>
<p class="company">{{ doctorInfo.hospital }}</p>
</div>
<div @click="goToUserDetail" class="detail">个人明细<img src="../assets/img/stage-two/right-icon-small.png" alt=""></div>
</div>
<ul class="billboard-wrap">
<li>
<p class="title">个人今日勤奋分</p>
<p class="score">{{doctorInfo.userDayScore}}</p>
<p class="rank"><img src="../assets/img/stage-two/billboard-flag.png" alt="">今日排名{{doctorInfo.userDayRank ? doctorInfo.userDayRank : '-'}}</p>
<div @click="goToUserBoard" class="billboard-btn">查看个人榜单<img src="../assets/img/stage-two/right-icon-small.png" alt=""></div>
</li>
<li class="organ">
<p class="title">机构累计勤奋分</p>
<p class="score">{{doctorInfo.hospitalScore}}</p>
<p class="rank"><img src="../assets/img/stage-two/billboard-flag.png" alt="">累计排名{{doctorInfo.hospitalRank ? doctorInfo.hospitalRank : '-'}}</p>
<div @click="goToOrganBoard" class="billboard-btn">查看机构榜单<img src="../assets/img/stage-two/right-icon-small.png" alt=""></div>
</li>
</ul>
<p class="score-tips">{{ scoreAwardTips }}</p>
<div class="bean-wrap">
<p class="personal-total-get">累计个人获得：<span>{{doctorInfo.userTotalBonus}}云鹊豆</span></p>
<div @click="goToBeanCenter" class="bean-center">云鹊豆中心<img src="../assets/img/stage-two/right-icon-small.png" alt=""></div>
</div>
<p class="bean-tips">机构勤奋分达成目标，全员可获云鹊豆</p>
<div class="bean-stage">
<img :src="returnBeanImg" alt="">
<ul class="score-list">
<li v-for="(item, index) in doctorInfo.hospitalLevelScore" :key="index">达{{item}}分</li>
<li>12月30日</li>
</ul>
</div>
</div>
<!-- 底部云鹊logo --> <!-- 底部云鹊logo -->
<div class="bottom-logo"></div> <div class="bottom-logo"></div>
...@@ -329,11 +327,11 @@ ...@@ -329,11 +327,11 @@
} }
if( hospitalScore < arr[0]){ if( hospitalScore < arr[0]){
return require(`../assets/img/stage-two/bean-stage-0.png`); return require(`../assets/img/stage-two/bean-stage-0.png`);
}else if( ((arr[0] == hospitalScore) || (arr[0] < hospitalScore)) && (hospitalScore < arr[1]) ){ }else if( (arr[0] <= hospitalScore) && (hospitalScore < arr[1]) ){
return require(`../assets/img/stage-two/bean-stage-1.png`); return require(`../assets/img/stage-two/bean-stage-1.png`);
}else if( ((arr[1] == hospitalScore) || (arr[1] < hospitalScore)) && (hospitalScore < arr[2]) ){ }else if( (arr[1] <= hospitalScore) && (hospitalScore < arr[2]) ){
return require(`../assets/img/stage-two/bean-stage-2.png`); return require(`../assets/img/stage-two/bean-stage-2.png`);
}else if( ((arr[2] == hospitalScore) || (arr[2] < hospitalScore)) ){ }else if( arr[2] <= hospitalScore ){
return require(`../assets/img/stage-two/bean-stage-3.png`); return require(`../assets/img/stage-two/bean-stage-3.png`);
}else{ }else{
return require(`../assets/img/stage-two/bean-stage-0.png`); return require(`../assets/img/stage-two/bean-stage-0.png`);
...@@ -395,19 +393,24 @@ ...@@ -395,19 +393,24 @@
vm.scoreAwardTips = '不在活动期间内'; vm.scoreAwardTips = '不在活动期间内';
}else{ }else{
// alert('在活动期间内') // alert('在活动期间内')
vm.scoreAwardTips = '';
let userDayRank = vm.doctorInfo.userDayRank; let userDayRank = vm.doctorInfo.userDayRank;
if( userDayRank == 1 ){ if( userDayRank == 0 ){
vm.scoreAwardTips = '';
}else if( userDayRank == 1 ){
vm.scoreAwardTips = `今日保持第1名，即可获得${vm.awardList.No1}`; vm.scoreAwardTips = `今日保持第1名，即可获得${vm.awardList.No1}`;
}else if( userDayRank < 4 ){ // 2-3 提示 再获得X勤奋分即可上升到前Y名获得 第1名奖品 }else{
if( userDayRank > 1 && userDayRank < 4 ){ // 2-3 提示 再获得X勤奋分即可上升到前Y名获得 第1名奖品
award = vm.awardList.No1; award = vm.awardList.No1;
}else if( userDayRank < 11 ){ // 4-10 提示 再获得X勤奋分即可上升到前Y名获得 第3名奖品 }else if( userDayRank > 3 && userDayRank < 11 ){ // 4-10 提示 再获得X勤奋分即可上升到前Y名获得 第3名奖品
award = vm.awardList.No3; award = vm.awardList.No3;
}else{ // 10名以后 提示：再获得X勤奋分即可上升到前Y名获得 第10名奖品 }else if( userDayRank > 10 ){ // 10名以后 提示：再获得X勤奋分即可上升到前Y名获得 第10名奖品
award = vm.awardList.No10; award = vm.awardList.No10;
} }
vm.scoreAwardTips = `再获${vm.doctorInfo.targetRequiredScore}分即可上升到第${vm.doctorInfo.targetRank}名并可获得${award}` vm.scoreAwardTips = `再获${vm.doctorInfo.targetRequiredScore}分即可上升到第${vm.doctorInfo.targetRank}名并可获得${award}`
} }
} }
}
vm.getServerTime(notInActivityTips) vm.getServerTime(notInActivityTips)
} }
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或