Skip to content

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

个人排行榜静态页面和排行旁公共组件

上级 6650ea2f
隐藏空白字符变更
内嵌 并排
正在显示 包含 360 行增加 和 102 行删除
components/ranking-header.vue 0 → 100644
浏览文件 @ b66dd0e8
<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
pages/person-detail/child/ship-select.vue 已删除 100644 → 0
浏览文件 @ 6650ea2f
<template>
<div class="select-box sex-box">
<div class="mark" @click="chooseShip({type: -1})"></div>
<div class="select-con t-center">
<div class="s-tit">与患者关系</div>
<div class="s-val" :class="curShip === item.id ? 'curSex': '' " v-for="(item,index) in defaShip" :key="index"
@click="chooseShip({type:item.id,name:item.name})">{{item.name}}
</div>
<!-- <div class="s-val" :class="curSex === 2 ? 'curSex': '' " @click="chooseSex('sex', {type: 2})">女</div> -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
defaShip: [
{
name: '医生与患者',
id: 1
},
{
name: '直系亲属',
id: 2
},
{
name: '朋友',
id: 3
},
{
name: '其他',
id: 4
}
]
};
},
props: {
chooseShip: {
type: Function,
default: () => {
},
},
curShip: {
type: Number,
default: 3,
},
},
};
</script>
<style lang="less">
// @import '@/static/css/common.scss';
.sex-box {
.select-con {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 100;
font-size: 30px;
background: #fff;
color: rgba(51, 51, 51, 1);
.s-tit {
color: rgba(148, 151, 153, 1);
height: 100px;
line-height: 100px;
}
.s-val {
height: 90px;
line-height: 90px;
border-bottom: 1px solid rgba(240, 240, 240, 1);
}
.curSex {
color: rgba(65, 183, 167, 1);
}
.s-val-cur {
color: rgba(65, 183, 167, 1);
}
.s-footer-box {
height: 87px;
line-height: 87px;
.s-left {
color: rgba(153, 153, 153, 1);
}
.s-right {
color: rgba(65, 183, 167, 1);
border-left: 1px solid rgba(240, 240, 240, 1);
}
}
}
}
</style>
pages/person-ranking/index.less 0 → 100644
浏览文件 @ b66dd0e8
.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
pages/person-ranking/index.vue 0 → 100644
浏览文件 @ b66dd0e8
<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>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或