Skip to content

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

机构排行榜静态页面

上级 b66dd0e8
隐藏空白字符变更
内嵌 并排
正在显示 包含 269 行增加 和 2 行删除
pages/hospital-ranking/index.less 0 → 100644
浏览文件 @ cb1afbe4
.hospital-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;
flex-flow: column;
align-items: flex-start;
.main-name {
color: #fff;
font-size: 18px;
font-weight: 700;
}
.main1-name {
color: #fff;
font-size: 12px;
margin-top: 8px;
}
.details {
display: flex;
align-items: center;
margin-top: 8px;
.item {
font-size: 14px;
font-weight: 700;
.label {
color: #fff;
}
.value {
color: #FFDD58;
}
}
}
.details-d {
margin-top: 0;
}
.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;
color: #FD6037;
font-size: 13px;
display: flex;
align-items: center;
span {
display: inline-block;
color: #373839;
font-size: 16px;
font-weight: 700;
margin: 0 6px 0 20px;
}
}
.description-d {
justify-content: center;
}
.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;
width: 130px;
}
.hospital-name {
color: #333333;
font-size: 16px;
font-weight: 700;
margin-left: 25px;
width: 130px;
}
.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/hospital-ranking/index.vue 0 → 100644
浏览文件 @ cb1afbe4
<template>
<section class="hospital-ranking-wrap">
<ranking-header></ranking-header>
<div class="info-container" :style="{ marginTop: `${44+barHeight}Px`}">
<!--<div class="info info-hospital">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="">
<div class="content">
<div class="con main-name">高新区卫生院</div>
<div class="con details">
<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="info info-doctor">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="">
<div class="content">
<div class="con details details-d">
<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 class="con main1-name">高新区卫生院</div>
</div>
</div>
</div>
<div class="main-content">
<!--<div class="description description-h"><span>星火榜</span>排行实时刷新，部分原因存在几分钟延迟</div>-->
<div class="description description-d">排行实时刷新，部分原因存在几分钟延迟</div>
<div class="ranking-title">
<span>TOP100</span>
<!--<span class="marginL">机构名称</span>
<span class="marginAuto">机构勤奋分</span>-->
<span class="marginL">机构成员</span>
<span class="marginAuto">贡献勤奋分</span>
</div>
<div class="ranking-list">
<!--<div class="item">
<img src="~/assets/img/person-ranking/icon-silver.png" alt="" class="ranking-icon">
&lt;!&ndash;<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="doctor-photo">&ndash;&gt;
<p class="hospital-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>
<div class="footer-btn">
<div class="btn">助力机构 创造佳绩</div>
</div>
</div>
</section>
</template>
<script>
import RankingHeader from '@/components/ranking-header'
export default {
name: 'hospital-ranking',
components: {
RankingHeader
},
data() {
return {
showPop: false,
title: '个人明细',
barHeight: 0,
barColor: '#fff',
};
},
computed: {
},
mounted() {
},
methods: {},
};
</script>
<style lang="less" scoped>
@import 'index.less';
</style>
pages/person-ranking/index.less
浏览文件 @ cb1afbe4
......@@ -96,6 +96,7 @@
font-size: 16px;
font-weight: 700;
margin-left: 10px;
width: 130px;
}
.num {
color: #373839;
......
pages/person-ranking/index.vue
浏览文件 @ cb1afbe4
......@@ -34,7 +34,7 @@
<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="doctor-name">这里是一个十三字的医生姓名</p>
<p class="num">1053</p>
</div>
<div class="item">
......@@ -60,7 +60,7 @@
<script>
import RankingHeader from '@/components/ranking-header'
export default {
name: 'person-detail',
name: 'person-ranking',
components: {
RankingHeader
},
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或