提交 cf58bc76 编写于 作者: tao.wu's avatar tao.wu

Merge remote-tracking branch 'origin/dev-stage2-20191125' into dev-stage2-20191125

.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,7 +191,263 @@
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{
position: relative;
width: 325px; height: 50px; margin: 0 auto;
padding: 20px 15px;
border-radius: 13px;
background: #FFF;
.gold-coin{
position: absolute; right: -20px; top: -32px;
width: 63px; height: 65px; border:0; display: block;
}
.head-icon{
width: 50px; height: 50px; display: block; border: 0;
float: left;
}
.content-info{
float: left;
width: 177px; height: 50px; overflow: hidden;
margin-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;
}
}
.go-login{
position: relative;
float: left;
width: 56px; height: 25px; margin: 14px 0 0 24px;
border: 1px solid #FD5A2F;
border-radius: 25px; font-size: 12px; line-height: 25px; text-indent: 8px;
color: #FD5A2F; font-weight: 700;
&.login-but-nojoin{
width: 70px; height: 25px;
margin: 14px 0 0 10px;
}
img{
position: absolute; right: 5px; top: 50%; margin-top:-5px;
width: 6px; height: 11px;
}
}
}
}
// 邀请医生好友学课程
.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: 50px;
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;
}
}
}
}
\ No newline at end of file
<template>
<section class="header-section" >
<div class="navBar" :style="{height: `${barHeight}Px`,backgroundColor: barColor}"></div>
<header class="header-container">
<img @click="goBack" src="~/assets/img/icon-back.png" alt="">
{{title}}
</header>
</section>
</template>
<script>
export default {
name: "normal-header",
props: {
title: {
type: String,
default: function () {
return ''
}
},
backType: {
type: Number,
default: function () {
return 1
}
},
barHeight: {
type: Number,
default:function () {
return 0
}
},
barColor: {
type: String,
default: function () {
return '#ffffff'
}
}
},
data() {
return {}
},
methods: {
goBack() {
if (this.backType == 1) {
this.$router.go(-1)
} else if(this.backType == 2) {
this.$emit('selfGoBack')
}else {
this.$rocNative.goBack()
}
}
}
}
</script>
<style lang="less" scoped>
.header-section {
width: 100%;
position: fixed;
top: 0;
z-index: 2;
.navBar {
background: #CCCCCC;
}
.header-container {
width: 100%;
height: 44Px;
background: #ffffff;
color: #333333;
font-size: 18px;
display: flex;
align-items: center;
line-height: 44Px;
img {
width: 25px;
height: 25px;
margin-left: 15px;
margin-right: 111.5px;
}
}
}
</style>
\ No newline at end of file
<template>
<section class="header-section" >
<div class="navBar" :style="{height: `${barHeight}Px`,backgroundColor: barColor}"></div>
<header class="header-container">
<img @click="goBack" src="~/assets/img/icon-back.png" alt="">
<div class="head-btn">
<div class="btn active-btn left">今日排行榜</div>
<div class="line"></div>
<div class="btn right">累计排行榜</div>
</div>
<div class="right-btn">昨日获奖</div>
</header>
</section>
</template>
<script>
export default {
name: "normal-header",
props: {
title: {
type: String,
default: function () {
return ''
}
},
backType: {
type: Number,
default: function () {
return 1
}
},
barHeight: {
type: Number,
default:function () {
return 0
}
},
barColor: {
type: String,
default: function () {
return '#ffffff'
}
}
},
data() {
return {}
},
methods: {
goBack() {
if (this.backType == 1) {
this.$router.go(-1)
} else if(this.backType == 2) {
this.$emit('selfGoBack')
}else {
this.$rocNative.goBack()
}
}
}
}
</script>
<style lang="less" scoped>
.header-section {
width: 100%;
position: fixed;
top: 0;
z-index: 2;
.navBar {
background: #CCCCCC;
}
.header-container {
width: 100%;
height: 44Px;
background: #ffffff;
color: #333333;
font-size: 18px;
display: flex;
align-items: center;
line-height: 44Px;
position: relative;
img {
width: 25px;
height: 25px;
position: absolute;
left: 13px;
}
.head-btn {
width: 193px;
height: 30px;
display: flex;
margin: 0 auto;
position: relative;
.btn {
font-size: 13px;
font-weight: 700;
height: 30px;
padding: 0 15px;
line-height: 30px;
color: #373839;
}
.left {
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
}
.right {
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
}
.active-btn {
background: #F8F9FA;
}
.line {
width: 0.5px;
height: 100%;
background: #C7C8C9;
}
}
.head-btn:after {
position: absolute;
content: " ";
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 200%;
height:200%;
border: 1PX solid #C7C8C9;
border-radius: 40px;
color: #C7C8C9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(.5, .5);
transform: scale(.5, .5);
}
.right-btn {
color: #373839;
font-size: 13px;
position: absolute;
right: 14.5px;
}
}
}
</style>
\ No newline at end of file
......@@ -7,7 +7,7 @@ module.exports = {
title: '云鹊奖2019',
meta: [
{ charset: 'utf-8' },
// { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' },
{ name: 'screen-orientation', content: 'portrait' },
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
{ name: 'format-detection', content: 'telephone=no' },
......
......@@ -6283,7 +6283,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
......@@ -6304,12 +6305,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -6324,17 +6327,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -6451,7 +6457,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
......@@ -6463,6 +6470,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -6477,6 +6485,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -6484,12 +6493,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -6508,6 +6519,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -6588,7 +6600,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
......@@ -6600,6 +6613,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -6722,6 +6736,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -6741,6 +6756,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -6784,7 +6800,8 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
......@@ -8483,8 +8500,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
......@@ -8538,8 +8554,7 @@
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -8656,7 +8671,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
......@@ -8690,14 +8706,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -8716,7 +8730,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -8797,8 +8810,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -8810,7 +8822,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -8896,8 +8907,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -8952,7 +8962,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -8996,14 +9005,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
......@@ -13573,6 +13580,7 @@
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -13719,6 +13727,7 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......
此差异已折叠。
<template>
<section class="index-wrap">
<div id="imgHeight1">
<img src="../assets/img/img1.png"/>
<img src="../assets/img/img2.png"/>
<img src="../assets/img/img3.png"/>
</div>
<div class="wrap-join" id="imgHeight2">
<div class="wrap-count">
<div>
<h1>2394847</h1>
<h5>已参与人数</h5>
</div>
<div>
<h1>23948</h1>
<h5>已参与机构</h5>
</div>
</div>
</div>
<div class="btn-appoint btn-app-share" id="imgHeight3" @click="setRemind"><img src="../assets/img/btn_appoint.png"/>
</div>
<div>
<img src="../assets/img/img6.png"/>
<img src="../assets/img/img7.png"/>
<img src="../assets/img/img8.png"/>
<img src="../assets/img/img9.png"/>
<img src="../assets/img/img10.png"/>
</div>
<div class="btn-share btn-app-share"><img src="../assets/img/btn_share.png"/></div>
<div class="rule-show">
<img src="../assets/img/rule_title.png"/>
<div class="rule-bg">
<section>
<h1>每日任务,攒勤奋分</h1>
<p><span>比赛时间:</span>2019.12.16 10:00-2019.12.30 00:00</p>
<p><span>医生机构:</span>根据机构内注册医生的勤奋分总额排名,活动结束后机构榜单指定名次可获得云鹊豆,榜单第一可获得云鹊机构奖荣誉。</p>
<p><span>医生个人:</span>完成每日学习任务可积攒勤奋分和云鹊豆,每日个人排行榜前十可获得相应实物奖品,个人累计排行第一获得云鹊勤奋之星荣誉、iphone11(64G)一台及云鹊豆奖品。</p>
</section>
<section class="margin-top-20">
<h1>公布排名</h1>
<p><span>公布时间:</span>2019.12.30 10:00-2020.1.5</p>
<p>公布个人获奖名单和机构获奖名单</p>
</section>
<div class="line"></div>
<div class="btn-rule">查看规则详情</div>
</div>
<img class="bird" src="../assets/img/bird.png">
</div>
<div v-if="showFixed" @click="setRemind" class="fix-btn">
<div>开赛时提醒我</div>
</div>
</section>
</template>
<script>
// import { Toast } from 'vant';
// import { mapMutations } from 'vuex'
// import request from '@/service/api';
import {remind, getRemindStatus, checkHospitalStatus} from '@/service';
// import popAll from '../components/popAll.vue';
// import { getBaseMainUrl, getCookie, delCookie, setCookie } from '../utils/index';
const cookies = require('cookie-universal')();
const token = '3D093CC8931C4F73A938CD8939E1A640';
export default {
head() {
return {
title: '云鹊医-赋能基层医生',
};
},
async asyncData({query}) {
const {data} = await getRemindStatus(token);
console.log('服务端', data)
const remindStatus = data;
return {
remindStatus
}
},
data() {
return {
showFixed: false,
}
},
created() {
},
mounted() {
console.log('愉悦状态', this.remindStatus)
this.scrollHandle();
},
methods: {
// 处理滚动按钮悬浮事件
scrollHandle() {
const _self = this;
const imgHeight1 = document.getElementById('imgHeight1').offsetHeight;
const imgHeight2 = document.getElementById('imgHeight2').offsetHeight;
const imgHeight3 = document.getElementById('imgHeight3').offsetHeight;
let bodyScrollTop = 0, documentScrollTop = 0;
window.onscroll = () => {
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
const heightVal = imgHeight1 + imgHeight2 + imgHeight3;
const scrollVal = bodyScrollTop || documentScrollTop;
if (scrollVal >= heightVal) {
_self.showFixed = true;
} else {
_self.showFixed = false;
}
}
},
setRemind() {
checkHospitalStatus(token).then(res => {
console.log(res)
// status : 0无机构 1正常 2机构已关闭 5退出 10移除 15创建机构审核中 20创建机构审核不通过 25创建机构未提交
if (res.data.status == 1) {
}
if (!res.data.status) { // 0无机构
// native gotoActivityHospital
} else if (res.data.status == 15) { // 15创建机构审核中
// native gotoInstitutionalReview
} else {
remind({token}).then(res => {
console.log('res=>', res)
})
}
})
}
},
}
</script>
<style lang="less">
@import '../assets/style/index.less';
</style>
\ No newline at end of file
.person-detail-wrap {
position: relative;
.info-container {
width: 100%;
height: 130px;
background: url(../../assets/img/person-detail/detail-top-bg.png) no-repeat;
background-size: cover;
overflow: hidden;
.info {
display: flex;
align-items: center;
padding: 0 15px;
margin-top: 20px;
img {
width: 50px;
height: 50px;
border-radius: 100%;
}
.content {
display: flex;
margin-left: 10px;
align-items: center;
.item {
font-size: 14px;
.label {
color: #fff;
}
.value {
color: #FFDD58;
}
}
.line {
display: inline-block;
width: 0.5px;
height: 10px;
background: #fff;
margin: 0 6px;
}
}
}
}
.main-content {
width: 100%;
border-radius: 20px 20px 0px 0px;
position: absolute;
top: 90px;
background: #fff;
.get-container {
padding: 15px;
background: #FFF7F2;
height: 68px;
border-radius: 20px 20px 0px 0px;
.top {
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 18px;
color: #373839;
font-weight: 700;
}
.how-to-get {
color: #676869;
font-weight: 700;
font-size: 12px;
height: 33px;
display: flex;
align-items: center;
img {
width: 6px;
height: 11px;
margin-left: 2px;
}
}
}
.awards-details {
font-size: 14px;
font-weight: 700;
color: #FD663F;
line-height: 20px;
}
}
.detail-list {
padding: 0 15px;
.item {
display: flex;
align-items: center;
padding: 15px 0 14px 0;
position: relative;
.left {
margin-right: 15px;
img {
width: 50px;
height: 50px;
}
}
.right {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
.r-left {
.detail-name {
color: #373839;
font-size: 16px;
font-weight: 700;
line-height: 16px;
}
.time {
color: #676869;
font-size: 13px;
line-height: 13px;
margin-top: 8px;
}
}
.r-right {
.award-item {
font-size: 13px;
font-weight: 700;
height: 13px;
margin-bottom: 9px;
.num {
color: #FD5A2F;
}
.award-name {
color: #373839;
}
}
.award-item:last-child {
margin-bottom: 0;
}
}
}
}
.item:after {
position: absolute;
content: " ";
left: 0;
bottom: 0;
right: 0;
height: 1PX;
border-bottom: 1PX solid #F0F1F2;
color: #F0F1F2;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
.no-more {
height: 62px;
display: flex;
justify-content: center;
align-items: center;
.line {
display: inline-block;
width: 84px;
height: 1px;
background:#F7F7F7;
}
.text {
color: #BEC2CC;
font-size: 13px;
margin: 0 8px;
}
}
}
}
\ No newline at end of file
<template>
<section class="person-detail-wrap">
<normal-header
:title="title"
:barHeight="barHeight"
:barColor="barColor"
:backType="1">
</normal-header>
<div class="info-container" :style="{ marginTop: `${44+barHeight}Px`}">
<div class="info">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="">
<div class="content">
<p class="item">
<span class="label">累计排名</span>
<span class="value">105</span>
</p>
<p class="line"></p>
<p class="item">
<span class="label">累计勤奋分 </span>
<span class="value">105</span>
</p>
</div>
</div>
</div>
<div class="main-content">
<!--<div class="get-container">
<div class="top">
<div class="title">累计获得奖励</div>
<div class="how-to-get">如何领取<img src="~/assets/img/person-detail/icon-right.png" alt=""></div>
</div>
<div class="awards-details">血压计 1 支/温度计 1 支/小米电视4C 2 台/米家洗衣机 1 台/米家冰箱 2 台/华为荣耀Play3 2 部</div>
</div>-->
<div class="detail-list">
<div class="item">
<div class="left">
<img src="~/assets/img/person-detail/icon-clock-in.png" alt="">
</div>
<div class="right">
<div class="r-left">
<p class="detail-name">每日打卡</p>
<p class="time">2019.12.15</p>
</div>
<div class="r-right">
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="~/assets/img/person-detail/icon-invite.png" alt="">
</div>
<div class="right">
<div class="r-left">
<p class="detail-name">邀请好友</p>
<p class="time">2019.12.15</p>
</div>
<div class="r-right">
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="~/assets/img/person-detail/icon-study.png" alt="">
</div>
<div class="right">
<div class="r-left">
<p class="detail-name">课程学习</p>
<p class="time">2019.12.15</p>
</div>
<div class="r-right">
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="~/assets/img/person-detail/icon-clock-in.png" alt="">
</div>
<div class="right">
<div class="r-left">
<p class="detail-name">每日打卡</p>
<p class="time">2019.12.15</p>
</div>
<div class="r-right">
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
</div>
</div>
</div>
</div>
<div class="no-more">
<span class="line"></span>
<span class="text">到底啦</span>
<span class="line"></span>
</div>
</div>
</section>
</template>
<script>
import NormalHeader from '@/components/normal-header'
export default {
name: 'person-detail',
components: {
NormalHeader
},
data() {
return {
showPop: false,
title: '个人明细',
barHeight: 0,
barColor: '#fff',
};
},
computed: {
},
mounted() {
},
methods: {},
};
</script>
<style lang="less" scoped>
@import 'index.less';
</style>
.person-ranking-wrap {
position: relative;
.info-container {
width: 100%;
height: 130px;
background: url(../../assets/img/person-detail/detail-top-bg.png) no-repeat;
background-size: cover;
overflow: hidden;
.info {
display: flex;
align-items: center;
padding: 0 15px;
margin-top: 20px;
img {
width: 50px;
height: 50px;
border-radius: 100%;
}
.content {
display: flex;
margin-left: 10px;
align-items: center;
.item {
font-size: 14px;
.label {
color: #fff;
}
.value {
color: #FFDD58;
}
}
.line {
display: inline-block;
width: 0.5px;
height: 10px;
background: #fff;
margin: 0 6px;
}
}
}
}
.main-content {
width: 100%;
border-radius: 20px 20px 0px 0px;
position: absolute;
top: 90px;
background: #fff;
.description {
height: 40px;
line-height: 40px;
text-align: center;
color: #FD6037;
font-size: 13px;
}
.ranking-title {
display: flex;
align-items: center;
height: 40px;
background: #FFF7F2;
color: #979899;
font-size: 14px;
padding: 0 25px 0 13px;
margin-bottom: 3px;
.marginL {
margin-left: 11px;
}
.marginAuto {
margin-left: auto;
}
}
.ranking-list {
padding: 0 25px;
.item {
display: flex;
align-items: center;
padding: 13.5px 0;
.ranking-icon {
width: 25px;
height: 30px;
}
.icon-num {
width: 25px;
color: #373839;
font-size: 15px;
font-weight: 700;
text-align: center;
}
.doctor-photo {
width: 35px;
height: 35px;
border-radius: 100%;
margin-left: 25px;
}
.doctor-name {
color: #333333;
font-size: 16px;
font-weight: 700;
margin-left: 10px;
}
.num {
color: #373839;
font-weight: 700;
font-size: 18px;
margin-left: auto;
}
}
}
.footer-btn {
width: 100%;
height: 40px;
padding: 5px 0;
box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
position: fixed;
bottom: 0;
.btn {
width: 345px;
height: 40px;
margin: 0 auto;
line-height: 40px;
text-align: center;
background: linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
border-radius: 20px;
color: #FFFFFF;
font-weight: 700;
font-size: 15px;
}
}
}
}
\ No newline at end of file
<template>
<section class="person-ranking-wrap">
<ranking-header></ranking-header>
<div class="info-container" :style="{ marginTop: `${44+barHeight}Px`}">
<div class="info">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="">
<div class="content">
<p class="item">
<span class="label">累计排名</span>
<span class="value">105</span>
</p>
<p class="line"></p>
<p class="item">
<span class="label">累计勤奋分 </span>
<span class="value">105</span>
</p>
</div>
</div>
</div>
<div class="main-content">
<div class="description">排行实时刷新,部分原因存在几分钟延迟</div>
<div class="ranking-title">
<span>TOP100</span>
<span class="marginL">用户名称</span>
<span class="marginAuto">今日勤奋分</span>
</div>
<div class="ranking-list">
<div class="item">
<img src="~/assets/img/person-ranking/icon-gold.png" alt="" class="ranking-icon">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="doctor-photo">
<p class="doctor-name">张医生</p>
<p class="num">1053</p>
</div>
<div class="item">
<img src="~/assets/img/person-ranking/icon-silver.png" alt="" class="ranking-icon">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="doctor-photo">
<p class="doctor-name">张医生</p>
<p class="num">1053</p>
</div>
<div class="item">
<img src="~/assets/img/person-ranking/icon-copper.png" alt="" class="ranking-icon">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="doctor-photo">
<p class="doctor-name">张医生</p>
<p class="num">1053</p>
</div>
<div class="item">
<p class="icon-num">4</p>
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="doctor-photo">
<p class="doctor-name">张医生</p>
<p class="num">1053</p>
</div>
</div>
<div class="footer-btn">
<div class="btn">获得更多勤奋分</div>
</div>
</div>
</section>
</template>
<script>
import RankingHeader from '@/components/ranking-header'
export default {
name: 'person-detail',
components: {
RankingHeader
},
data() {
return {
showPop: false,
title: '个人明细',
barHeight: 0,
barColor: '#fff',
};
},
computed: {
},
mounted() {
},
methods: {},
};
</script>
<style lang="less" scoped>
@import 'index.less';
</style>
<template>
<section class="index-wrap" :class="{'padbtm50': (showFixed && showRemindBtn)}">
<h5header v-if="!isWeb" title="云鹊奖2019" :scrollVal="scrollVal" :baseShowHeight="25" :shareObj="shareObj" :setedScroll="true" />
<h5header v-if="isWeb" title="云鹊奖2019" :scrollVal="scrollVal" :baseShowHeight="25" :shareObj="shareObj" :setedScroll="true" />
<div id="imgHeight1">
<img src="../assets/img/img1.png" />
<img src="../assets/img/img2.png" />
......
// 年终活动第二期 主页面请求
import request from './api';
// 获取已邀请的医生列表
export const getInviteList = (token) => {
return request({
url: `campaign/inviteDetail/oneList?pageNo=1&pageSize=10`,
method: 'get',
headers: {
token: token
}
})
}
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册