Skip to content

P
pica.cloud.web-education-admin
提交 68f55563 编写于 作者: gjyang's avatar gjyang
浏览文件
操作

Merge remote-tracking branch 'remotes/origin/dev-gpranking-1025' into release 

# Conflicts:
#	src/views/home/home.vue
上级 efb671e1 baed8219
隐藏空白字符变更
内嵌 并排
正在显示 包含 2502 行增加 和 0 行删除
package.json
浏览文件 @ 68f55563
......@@ -13,6 +13,7 @@
"dependencies": {
"axios": "0.16.2",
"better-scroll": "^0.1.15",
"echarts": "^4.2.0-rc.2",
"fastclick": "^1.0.6",
"iscroll": "^5.2.0",
"js-cookie": "^2.2.0",
......
src/components/common/yqy/CourseList.vue 0 → 100644
浏览文件 @ 68f55563
<!-- courselist中的人数/收藏等细节，在图片的下方显示，有此种情形时，选用此组件 -->
<template>
<div class="section" :style="{paddingLeft:padding,paddingRight:padding}">
<header :class="{'title-center':titlePosition=='center','title-left':titlePosition=='left','title-right':titlePosition=='right'}">
<div class="title">{{title}}</div>
<div class="change-content" :class="{'active':hasChange=='true'}">
<!-- 注意更改这里 -->
<div class="text">换一批</div>
<img class="icon" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png" alt="">
</div>
</header>
<div class="recommends">
<div class="recommend-item" v-for="(course,index) in courses" :key="index">
<div class="top-sec">
<img class="recommend-image" :src="course.imgUrl" alt="">
<div
class="recommend-course-tag"
:class="{'active':hasCourseTag=='true','left-tag':tagPosition=='left','right-tag':tagPosition=='right'}"
>{{course.courseTag}}</div>
<!-- <div class="recommend-name">{{course.name}}</div> -->
<!-- <div class="recommend-num"><span>{{course.num}}</span>人已学</div> -->
</div>
<div class="recommend-title">{{course.title}}</div>
<div class="course-detail">
<div class="course-detail-item course-time">
{{course.time}}
</div>
<div class="course-detail-item bar"></div>
<div class="course-detail-item course-num">{{course.num}}已学</div>
<div class="course-detail-item save-button not-saved" v-if="!course.saveStatus">收藏</div>
<div class="course-detail-item save-button has-saved" v-if="course.saveStatus">已收藏</div>
</div>
</div>
</div>
<div class="show-more" :class="{'active':hasMore=='true'}">
更多课程
</div>
</div>
</template>
<script>
export default {
name:"CourseList",
props:{
courses:{
type:Array,
default:()=>{
return [
{name:'肖丹',num:'666人',time:'刚刚',saveStatus:true,title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'}
]
}
},
title:{
type:String,
default:'更多课程'
},
titlePosition:{
type:String,
default:'left'
},
hasChange:{
type:String,
default:false//传递true/false
},
hasMore:{
type:String,
default:false//传递true/false
},
hasCourseTag:{
type:String,
default:true//传递true/false
},
tagPosition:{
type:String,
default:'left'
},
padding:{
type:String,
default:'0'//注意传输单位，如'2rem''2px'
}
},
data(){
return{
}
},
mounted(){
},
created(){
}
}
</script>
<style lang="scss" scoped>
@import 'src/style/mixin';
.section>header{
display: flex;
display:-webkit-flex;
flex-direction: row;
position:relative;
align-items:center;
margin-top:px2rem(20px);
margin-bottom: px2rem(20px);
}
.section>header.title-center{
justify-content: center;
}
.section>header.title-left{
justify-content: flex-start;
}
.section>header.title-right{
justify-content: flex-end;
}
.section>header .title{
font-size:px2rem(18px);
color:#333;
}
.section>header .change-content{
display:none;
}
.section>header .change-content.active{
position:absolute;
right:0;
width:px2rem(56.5px);
height:px2rem(16px);
padding-left:px2rem(7px);
border:px2rem(0.5px) solid #A9AEB7;
border-radius:px2rem(8.5px);
opacity:0.5;
font-weight:400;
color:#28344c;
display:block;
padding-top:px2rem(0.5px);
padding-bottom:px2rem(0.5px);
}
.section>header .change-content .text{
font-size:px2rem(11px);
width:px2rem(33px);
height:px2rem(14px);
line-height:px2rem(14px);
}
.section>header .change-content .icon{/*！加图片后调整*/
width:px2rem(12px);
height:px2rem(12px);
position:absolute;
top:px2rem(1.5px);
right:0;
}
// .section>header .change-content .icon img{
// width:px2rem(12px);
// height:px2rem(12px);
// }
.recommends{
display: -webkit-flex;
display:flex;
flex-direction:row;
flex-wrap:wrap;
-ms-flex-wrap: wrap;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width:px2rem(345px)
}
.recommend-item{
position: relative;
width:px2rem(172.5px);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.recommend-item:nth-child(odd){
padding-right:px2rem(2.5px);
}
.recommend-item:nth-child(even){
padding-left:px2rem(2.5px);
}
.recommend-item .top-sec{
width:px2rem(170px);
height:px2rem(95.5px);
position:relative;
}
.recommend-item .recommend-image{
/* width:100%; */
width:px2rem(170px);
height:px2rem(95.5px);
border-radius: px2rem(3px);
}
.recommend-item .recommend-course-tag{
display:none;
}
.recommend-item .recommend-course-tag.active{
display:block;
position:absolute;
top:px2rem(5px);
left:px2rem(5px);
width:px2rem(40px);
height:px2rem(16px);
line-height:px2rem(16px);
background-color:#FAFCFF;
font-size:px2rem(10px);
color:#4A87D4;
text-align:center;
border:px2rem(0.5px) solid rgba(195,220,251,1);
border-radius: px2rem(2px);
// padding:px2rem(3px) 0;
}
.recommend-item .recommend-course-tag.active.left-tag{
top:px2rem(5px);
left:px2rem(5px);
}
.recommend-item .recommend-course-tag.active.right-tag{
top:px2rem(5px);
right:px2rem(5px);
}
.recommend-item .recommend-title{
margin-top:px2rem(5px);
margin-bottom:px2rem(6px);
height:px2rem(38px);
line-height:px2rem(19px);
font-size:px2rem(14px);
font-weight:400;
color:rgb(51,51,51);
overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.course-detail {
display:flex;
display:-webkit-flex;
flex-direction:row;
position:relative;
margin-bottom:px2rem(18px);
}
.course-detail div.course-detail-item{
font-size:px2rem(12px);
}
.course-detail .course-time,.course-detail .course-num{
height:px2rem(12px);
line-height:px2rem(12px);
color:#999;
margin-top:px2rem(6px);
}
.course-detail .bar{//?这个样式注意一下
width:px2rem(1.5px);
height:px2rem(10.5px);
background-color:#999;
margin-top:px2rem(6.5px);
}
.course-detail .course-time{
margin-right:px2rem(5px)
}
.course-detail .course-num{
margin-left:px2rem(3.5px)
}
.course-detail .save-button{
position:absolute;
top:px2rem(3px);
right:px2rem(2.5px);
font-size:px2rem(11px);
text-align:center;
}
.course-detail .save-button.not-saved{
width:px2rem(30px);
height:px2rem(18px);
line-height:px2rem(18px);
color:#666;
background-color:rgba(247,248,249,1)
}
.course-detail .save-button.has-saved{
width:px2rem(39px);
height:px2rem(18px);
line-height:px2rem(18px);
color:#F47A48;
background-color:rgba(244,122,72,0.04);
}
/* 更多课程 */
.section .show-more{
display:none;
}
.section .show-more.active{
display:block;
font-size:px2rem(15px);
font-weight:400;
color:#999;
text-align:center;
padding-top:px2rem(14px);
padding-bottom: px2rem(15px);
border-top:px2rem(0.5px) solid #e7e7e7;
}
</style>
src/components/common/yqy/PersonalInformation.vue 0 → 100644
浏览文件 @ 68f55563
<template>
<div class="info">
<!-- 左侧头像 -->
<div class="info-profile">
<img :src="profileImage" alt="">
</div>
<!-- 右侧个人信息 -->
<div class="info-detail">
<div class="info-detail-name">
{{profileName}}
</div>
<div class="info-detail-others">自<span>{{date}}</span>起&nbsp;&nbsp;您与云鹊医相识已经<span>{{days}}</span>天啦
</div>
</div>
<!-- arrow -->
<div class="arrow-right">
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/arrowRight.png" alt="">
</div>
</div>
</template>
<script>
export default {
name:'PersonalInformation',
props:{
profileImage:{
type:String,
default:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png'
},
profileName:{
type:String,
default:'你的名字'
},
date:{
type:String,
default:'2018.10.1'
},
days:{
type:Number,
default:343
}
},
}
</script>
<style lang="scss" scoped>
@import 'src/style/mixin';
.info{
display:flex;
display:-webkit-flex;
flex-direction:row;
justify-content: center;
// position: absolute;
// top:px2rem(80px);
width:px2rem(345px);
height:px2rem(70px);
background-color: $fc;
border-radius:px2rem(3px);
box-shadow: 0 px2rem(1px) px2rem(11px) 0 rgba(21,138,123,0.1);
}
.info-profile {
margin-right:px2rem(5px);
display:flex;
display:-webkit-flex;
flex-direction: row;
align-items:center;
}
.info-profile img{
width:px2rem(40px);
height:px2rem(40px);
border-radius:px2rem(20px);
}
.info-detail{
display:flex;
display:-webkit-flex;
flex-direction:column;
justify-content: center;
width:px2rem(260px);
}
.info-detail .info-detail-name{
font-size:px2rem(15px);
font-weight:500;
// margin-bottom:px2rem(3px);
text-align:left;
}
.info-detail .info-detail-others{
height:px2rem(13px);
line-height:px2rem(13px);
font-size:px2rem(13px);
font-weight:400;
margin-top:px2rem(10px);
color:#999;
span{
color:#999;
}
}
.arrow-right{
margin-left:px2rem(5px);
}
.arrow-right img{
width:px2rem(20px);
height:px2rem(20px);
}
</style>
src/components/common/yqy/RecommendList.vue 0 → 100644
浏览文件 @ 68f55563
<template>
<div class="section" :style="{paddingLeft:padding,paddingRight:padding}">
<header :class="{'title-center':titlePosition=='center','title-left':titlePosition=='left','title-right':titlePosition=='right'}">
<div class="title">{{title}}</div>
<div class="change-content" :class="{'active':hasChange=='true'}">
<!-- 注意更改这里 -->
<div class="text">换一批</div>
<img class="icon" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png" alt="">
</div>
</header>
<div class="recommends">
<div class="recommend-item" v-for="(recommend,index) in recommends" :key="index">
<div class="top-sec">
<img class="recommend-image" :src="recommend.imgUrl" alt="">
<div
class="recommend-course-tag"
:class="{'active':hasCourseTag=='true','left-tag':tagPosition=='left','right-tag':tagPosition=='right'}"
>{{recommend.courseTag}}</div>
<div class="recommend-name">{{recommend.name}}</div>
<div class="recommend-num"><span>{{recommend.num}}</span>人已学</div>
</div>
<div class="recommend-title">{{recommend.title}}</div>
</div>
</div>
<div class="show-more" :class="{'active':hasMore=='true'}">
更多课程
</div>
</div>
</template>
<script>
export default {
name:"RecommendList",
props:{
recommends:{
type:Array,
default:()=>{
return [
{name:'肖丹',num:'666人',time:'刚刚',saveStatus:true,title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'}
]
}
},
title:{
type:String,
default:'更多课程'
},
titlePosition:{
type:String,
default:'left'
},
hasChange:{
type:String,
default:'false'//传递true/false
},
hasMore:{
type:String,
default:'false'//传递true/false
},
hasCourseTag:{
type:String,
default:'false'//传递true/false
},
tagPosition:{
type:String,
default:'left'
},
padding:{
type:String,
default:'0'//注意传输单位，如'2rem''2px'
}
},
data(){
return{
// iconJCLink:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/iconJC.png',//检查
// iconSFLink:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/iconSF.png',//随访
// iconZDLink:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/iconZD.png',//诊断
// iconZLLink:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/iconZL.png',//治疗
}
},
mounted(){
// this.recommends.forEach((v,k)=>{
// switch (v.tagType){
// case 'JC':
// v.tagUrl=this.iconJCLink;
// break;
// case 'SF':
// v.tagUrl=this.iconSFLink;
// break;
// case 'ZD':
// v.tagUrl=this.iconZDLink;
// break;
// case 'ZL':
// v.tagUrl=this.iconZLLink;
// break;
// default:
// v.tagUrl=""
// }
// })
},
// props:{
// recommends:"",
// title:"",
// position:"",
// hasChange:null,//希望含有时，穿参数true
// },
created(){
console.log(this.hasChange,this.position,this.recommends[0])
}
}
</script>
<style lang="scss" scoped>
@import 'src/style/mixin';
.section>header{
display: flex;
display:-webkit-flex;
flex-direction: row;
position:relative;
align-items:center;
margin-top:px2rem(20px);
margin-bottom: px2rem(20px);
}
.section>header.title-center{
justify-content: center;
}
.section>header.title-left{
justify-content: flex-start;
}
.section>header.title-right{
justify-content: flex-end;
}
.section>header .title{
font-size:px2rem(18px);
color:#333;
}
.section>header .change-content{
display:none;
}
.section>header .change-content.active{
position:absolute;
right:0;
width:px2rem(56.5px);
height:px2rem(16px);
padding-left:px2rem(7px);
border:px2rem(0.5px) solid #A9AEB7;
border-radius:px2rem(8.5px);
opacity:0.5;
font-weight:400;
color:#28344c;
display:block;
padding-top:px2rem(0.5px);
padding-bottom:px2rem(0.5px);
}
.section>header .change-content .text{
font-size:px2rem(11px);
width:px2rem(33px);
height:px2rem(14px);
line-height:px2rem(14px);
}
.section>header .change-content .icon{/*！加图片后调整*/
width:px2rem(12px);
height:px2rem(12px);
position:absolute;
top:px2rem(1.5px);
right:0;
}
.recommends{
display: -webkit-flex;
display:flex;
flex-direction:row;
flex-wrap:wrap;
-ms-flex-wrap: wrap;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width:px2rem(345px)
}
.recommend-item{
position: relative;
width:px2rem(172.5px);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.recommend-item:nth-child(odd){
padding-right:px2rem(2.5px);
}
.recommend-item:nth-child(even){
padding-left:px2rem(2.5px);
}
.recommend-item .top-sec{
width:px2rem(170px);
height:px2rem(95.5px);
position:relative;
}
.recommend-item .recommend-image{
/* width:100%; */
width:px2rem(170px);
height:px2rem(95.5px);
}
.recommend-item .recommend-course-tag{
display:none;
}
.recommend-item .recommend-course-tag.active{
display:block;
position:absolute;
top:px2rem(5px);
left:px2rem(5px);
width:px2rem(40px);
height:px2rem(16px);
line-height:px2rem(16px);
background-color:#FAFCFF;
font-size:px2rem(10px);
color:#4A87D4;
text-align:center;
border:px2rem(0.5px) solid rgba(195,220,251,1);
border-radius: px2rem(2px);
// padding:px2rem(3px) 0;
}
.recommend-item .recommend-course-tag.active.left-tag{
top:px2rem(5px);
left:px2rem(5px);
}
.recommend-item .recommend-course-tag.active.right-tag{
top:px2rem(5px);
right:px2rem(5px);
}
.recommend-item .recommend-title{
margin-top:px2rem(5px);
margin-bottom:px2rem(6px);
height:px2rem(38px);
line-height:px2rem(19px);
font-size:px2rem(14px);
font-weight:400;
color:rgb(51,51,51);
overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.recommend-item .recommend-name{
position:absolute;
top:px2rem(79.5px);
left:px2rem(18px);
width:px2rem(40px);
height:px2rem(11px);
line-height:px2rem(11px);
font-size:px2rem(11px);
font-weight:400;
color:rgb(255,255,255);
}
.recommend-item .recommend-num{
position:absolute;
top:px2rem(79.5px);
right:px2rem(5px);
font-size:px2rem(11px);
/* width:5.2rem; */
height:px2rem(11px);
line-height:px2rem(11px);
font-weight:400;
color:rgb(255,255,255);
}
.recommend-item .recommend-num span{
color:rgb(255,255,255);
}
/* 更多课程 */
.section .show-more{
display:none;
}
.section .show-more.active{
display:block;
font-size:px2rem(15px);
font-weight:400;
color:#999;
text-align:center;
padding-top:px2rem(14px);
padding-bottom: px2rem(15px);
border-top:px2rem(0.5px) solid #e7e7e7;
}
</style>
src/router/router.js
浏览文件 @ 68f55563
import App from '../App'
const home = r => require.ensure([], () => r(require('../views/home/home')), 'home')
const gpranking = r => require.ensure([], () => r(require('../views/gpranking/gpranking.vue')), 'gpranking')
export default [{
path: '/',
......@@ -16,5 +19,10 @@ export default [{
path: '/home',
component: home
},
//学习评价gpranking页面
{
path: '/gpranking',
component: gpranking
}
]
}]
src/views/gpranking/CompareTable.vue 0 → 100644
浏览文件 @ 68f55563
<template>
<div>
<!-- 类型4：常规样式：左三右三 -->
<div v-if="type==4" class="rank-table-content">
<!-- 我的 -->
<div class="my-rank-content content">
<div class="item" v-for="(value,index) in cmpTableData.self" :key="index">
<div class="normal" v-if="!value.isMessage">
<span class="num">{{index+1}}</span>
<span class="text">{{value.name}}</span>
</div>
<div class="special" v-if="value.isMessage">
{{value.name}}
</div>
</div>
</div>
<!-- 学院/省内/国内 -->
<div class="other-rank-content content">
<div class="item" v-for="(value,index) in cmpTableData.other" :key="index">
<div class="normal">
<span class="num">{{index+1}}</span>
<span class="text">{{value.name}}</span>
</div>
</div>
</div>
</div>
<!-- 类型5：左二右三，类型6：左一右三 -->
<div v-if="type==5||type==6" class="rank-table-content">
<!-- 我的 -->
<div class="my-rank-content content">
<!-- 左侧为两个：一小一大 -->
<div v-if="type==5" class="item">
<div class="normal">
<span class="num">1</span>
<span class="text">{{cmpTableData.self[0].name}}</span>
</div>
</div>
<div v-if="type==5" class="multi-row double-row">{{cmpTableData.self[1].name}}</div>
<!-- 左侧只有一个框 -->
<div v-if="type==6" class="multi-row triple-row">{{cmpTableData.self[0].name}}</div>
</div>
<!-- 学院/省内/国内 -->
<div class="other-rank-content content">
<div class="item" v-for="(value,index) in cmpTableData.other" :key="index">
<div class="normal">
<span class="num">{{index+1}}</span>
<span class="text">{{value.name}}</span>
</div>
</div>
</div>
</div>
<!-- 类型1：左二右二下一,类型2：左一右一下一 -->
<div v-if="type==1||type==2||type==3">
<!-- 上 -->
<div class="rank-table-content" v-if="type==1||type==2">
<!-- 我的 -->
<div class="my-rank-content content">
<div class="item" v-for="(value,index) in cmpTableData.self" :key="index">
<div class="normal" v-if="!value.isMessage">
<span class="num">{{index+1}}</span>
<span class="text">{{value.name}}</span>
</div>
<div class="special" v-if="value.isMessage">
{{value.name}}
</div>
</div>
</div>
<!-- 学院/省内/国内 -->
<div class="other-rank-content content">
<div class="item" v-for="(value,index) in cmpTableData.other" :key="index">
<div class="normal">
<span class="num">{{index+1}}</span>
<span class="text">{{value.name}}</span>
</div>
</div>
</div>
</div>
<!-- 下 -->
<div v-if="type==1" class="multi-col single-row special-message">
{{cmpTableData.commonMessage}}
</div>
<div v-if="type==2" class="multi-col double-row special-message">
{{cmpTableData.commonMessage}}
</div>
<div v-if="type==3" class="multi-col triple-row special-message">
{{cmpTableData.commonMessage}}
</div>
</div>
</div>
</template>
<script>
export default {
name:'CompareTable',
created(){
console.log(this.cmpTableData);
},
props:{
cmpTableData:{
type:Object,
default:{
self:[
{isMessage:false,name:'治疗药物检测的临床意义'},
{isMessage:false,name:'遗传性耳聋诊断与咨询遗传性耳聋诊断与咨询'},
{isMessage:true,name:'您获得的证书太少了，赶紧去考证吧！'}
],
other:[
{name:'聚集糖尿病治疗与管理'},
{name:'治疗药物检测的临床意义是什么'},
{name:'治疗药物检测的临床意义'}
]
}
},
type:{
type:Number,
default:4//type===4时为正常的样式
}
},
}
</script>
<style lang="scss" scoped>
@import 'src/style/mixin';
/*公用的样式*/
.rank-table-content{
display:flex;
display:-webkit-flex;
flex-direction:row;
}
.rank-table-content .content.my-rank-content{
width:px2rem(157.5px);//包含右边的border
}
.rank-table-content .content.other-rank-content{
width:px2rem(157px);
}
.content.my-rank-content .item{
border-top:px2rem(0.5px) solid rgb(236,238,241);
border-right:px2rem(0.5px) solid rgb(236,238,241);
}
.content.other-rank-content .item{
border-top:px2rem(0.5px) solid rgb(236,238,241);
}
.rank-table-content .content .item{
height:px2rem(58px);
display:flex;display:-webkit-flex;justify-content:center;align-items:center;
.normal span{
font-size:px2rem(12px);
display:inline-block;
vertical-align:middle;//行内块垂直居中
}
.normal span.num{
width:px2rem(13px);
height:px2rem(13px);
line-height:px2rem(13px);
text-align:center;
background-color: rgb(202,168,97);
border-radius: px2rem(6.5px);
color:#fff;
font-weight:400;
}
.normal span.text{
width:px2rem(114px);
line-height:px2rem(16px);
text-align:center;
// padding-left:px2rem(10px);
font-weight:400;
}
.special{
font-size:px2rem(12px);
text-align:center;
padding:px2rem(20px);
color:#999;
}
}
//多行公共代码：type5/type6/
.rank-table-content .content .multi-row{
display:table-cell;
vertical-align: middle;
font-size:px2rem(12px);
text-align:center;
padding:0 px2rem(20px);
color:#999;
}
//type5
.rank-table-content .my-rank-content.content .multi-row.double-row{
height:px2rem(116.5px);//58*2+0.5
border-top:px2rem(0.5px) solid rgb(236,238,241);
border-right:px2rem(0.5px) solid rgb(236,238,241);
}
//type6
.rank-table-content .my-rank-content.content .multi-row.triple-row{
height:px2rem(175px);//58*2+0.5
border-top:px2rem(0.5px) solid rgb(236,238,241);
border-right:px2rem(0.5px) solid rgb(236,238,241);
}
//多行公共代码：type1/type2/type3
.special-message{
display:table-cell;
vertical-align: middle;
font-size:px2rem(12px);
text-align:center;
padding:0 px2rem(20px);
color:#999;
}
.multi-col{
border-top:px2rem(0.5px) solid rgb(236,238,241);
width:px2rem(315px);
}
.multi-col.single-row{
height:px2rem(58px);
}
.multi-col.double-row{
height:px2rem(116.5px);
}
.multi-col.triple-row{
height:px2rem(175px);
}
</style>
src/views/gpranking/gpranking.vue 0 → 100644
浏览文件 @ 68f55563
<template>
<div class="main">
<div class="basic">
<!-- 背景图片 -->
<!-- <img class="bg" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt=""> -->
<div class="bg"></div>
<!-- 个人信息 -->
<div class="info-box">
<personal-information
:profile-image="personalInfo.imageUrl"
:profile-name="personalInfo.name"
:date="personalInfo.date"
:days="personalInfo.days"
></personal-information>
</div>
<!-- <div class="info">
<div class="info-profile">
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt="">
</div>
<div class="info-detail">
<div class="info-detail-name">
王小呆
</div>
<div class="info-detail-others">自<span>2016.3.23</span>起&nbsp;&nbsp;您与云鹊医相识已经<span>483</span>天啦
</div>
</div>
<div class="arrow-right">
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/arrowRight.png" alt="">
</div>
</div> -->
</div>
<div class="detail">
<div class="tab-header">
<div class="tab-header-name" :class="{active:currentTab===0}" @click="toggleTab(0)">
<div class="text">
本院
</div>
<div class="bar">
</div>
</div>
<div class="tab-header-name" :class="{active:currentTab===1}" @click="toggleTab(1)">
<div class="text">
本省
</div>
<div class="bar">
</div>
</div>
<div class="tab-header-name" :class="{active:currentTab===2}" @click="toggleTab(2)">
<div class="text">
全国
</div>
<div class="bar">
</div>
</div>
</div>
<div class="tab">
<!-- 近七天成长路径 -->
<div class="sub grow-path">
<header class="title">30天成长路径</header>
<!-- 图表 -->
<div id="growPath" class="grow-path-chart">
</div>
</div>
<!-- 学习情况 -->
<div class="sub study-condition">
<header class="title">学习情况</header>
<!-- 图表 -->
<div class="study-conditon-chart" id="studyCondition" style="width:100%;height:400px;">
</div>
<!-- 新的对比 -->
<div class="study-cmp">
<!-- 头部tab -->
<header>
<div class="tab-name" :class="{active:currentStudyTab===0}" @click="toggleStudyTab(0)">完成课程</div>
<div class="tab-name" :class="{active:currentStudyTab===1}" @click="toggleStudyTab(1)">完成考试</div>
<div class="tab-name" :class="{active:currentStudyTab===2}" @click="toggleStudyTab(2)">获得证书</div>
</header>
<!--表格-->
<div class="rank-table">
<!-- header -->
<header>
<div class="rank-name my-rank">我的最近Top3</div>
<div class="rank-name other-rank">院内Top3</div>
</header>
<!-- 测试组件 -->
<compare-table :cmp-table-data=cmpTableDataTest3 :type=type></compare-table>
</div>
</div>
</div>
<!-- 为你推荐 -->
<div class="recommend-for-you">
<recommend-list :title="recommendTitle" title-position="center" :recommends="recommendList"></recommend-list>
</div>
<!-- 其它为你推荐 -->
<recommend-list
title="你可能需要"
title-position="left"
has-change=true
has-more=true
has-course-tag=true
tag-position="right"
:recommends="recommendListTest"></recommend-list>
<!-- 课程列表 -->
<course-list
title="你可能需要"
title-position="left"
has-change=true
has-more=true
has-course-tag=true
tag-position="right"
:courses="courseList"></course-list>
</div>
</div>
</div>
</template>
<script>
// import RecommendList from './RecommendList.vue'
// import RecommendListTest from './RecommendListTest.vue'
import CompareTable from './CompareTable.vue'
import RecommendList from 'src/components/common/yqy/RecommendList.vue'
import CourseList from 'src/components/common/yqy/CourseList.vue'
import PersonalInformation from 'src/components/common/yqy/PersonalInformation.vue'
var echarts=require('echarts');
export default {
name:'gpranking',
components:{
// RecommendList,
RecommendList,
CourseList,
PersonalInformation,
CompareTable
},
data(){
return{
//记录全国/全省/本院tab ----0/1/2
currentTab:0,
//记录课程/考试/证书 ----0/1/2
currentStudyTab:0,
//记录准确的 ‘全国-课程’这种组合 ----00/01/02/10/11/12/20/21/22
currentChosen:'00',
//共六种表格样式-----4：normal,
type:3,
//提示信息列表，
messageList:{
institute:{
course:{
messageA:'您完成的课程太少了，赶紧去学习喔',
messageB:'您和您所在的医院已完成的课程数太少了，赶紧去学习哦！'
},
exam:{
messageA:'您完成的考试太少了，去测试一下自己的水平吧',
messageB:'您和您所在的医院已完成的考试太少了，赶紧去学习哦！'
},
certificate:{
messageA:'您获得的证书太少了，赶紧去考证吧！',
messageB:'您和您所在的医院已获得的证书不足3张，赶紧去学习哦！'
}
},
province:{
course:{
messageA:'您完成的课程太少了，赶紧去学习喔',
messageB:'您和您所在的省已完成的课程数太少了，赶紧去学习哦！'
},
exam:{
messageA:'您完成的考试太少了，去测试一下自己的水平吧',
messageB:'您和您所在省已完成的考试太少了，赶紧去学习哦！'
},
certificate:{
messageA:'您获得的证书太少了，赶紧去考证吧！',
messageB:'您和您所在的省已获得的证书不足3张，赶紧去学习哦！'
}
},
country:{
course:{
messageA:'您完成的课程太少了，赶紧去学习喔',
messageB:''
},
exam:{
messageA:'您完成的考试太少了，去测试一下自己的水平吧',
messageB:''
},
certificate:{
messageA:'您获得的证书太少了，赶紧去考证吧！',
messageB:''
}
}
},
//图表数据
//30天成长
growPathDataSet: [
['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
['10.6','15','22','2','4'],
['10.7','15','24','2','4'],
['10.8','17','28','2','4'],
['10.9','15','18','2','4'],
['今天','15','20','2','4']
],
//学习情况
studyConditionDataSet: [
['content', '我的', '本院平均'],
['完成课程', 56,69],
['完成考试', 23,45],
['获得证书', 8,20],
],
OptionGrowPath:{},//30天成长路径///////
OptionStudyCondition:{},
//为你推荐数据：
recommendTitle:"为你推荐",
recommendList:[],
recommendListTest:[],
courseList:[],
personalInfo:{"name":"王小呆","date":"2016.3.23","days":555,"imageUrl":"https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png"},
cmpTableHeader:{institute:"院内",province:"省内",country:"国内"},
cmpTableData:{
self:[
{isMessage:false,name:'治疗药物检测的临床意义'},
{isMessage:false,name:'遗传性耳聋诊断与咨询遗传性耳聋诊断与咨询'},
{isMessage:true,name:'您获得的证书太少了，赶紧去考证吧！'}
],
other:[
{name:'聚集糖尿病治疗与管理'},
{name:'治疗药物检测的临床意义是什么'},
{name:'治疗药物检测的临床意义'}
]
},
cmpTableDataTest4:{
self:[
{isMessage:false,name:'治疗药物检测的临床意义'},
{isMessage:false,name:'遗传性耳聋诊断与咨询遗传性耳聋诊断与咨询'},
{isMessage:true,name:'您获得的证书太少了，赶紧去考证吧！'}
],
other:[
{name:'聚集糖尿病治疗与管理'},
{name:'治疗药物检测的临床意义是什么'},
{name:'治疗药物检测的临床意义'}
]
},
cmpTableDataTest5:{
self:[
{isMessage:false,name:'治疗药物检测的临床意义'},
{isMessage:true,name:'您获得的考试太少了，赶紧去考证吧！'}
],
other:[
{name:'聚集糖尿病治疗与管理'},
{name:'治疗药物检测的临床意义是什么'},
{name:'治疗药物检测的临床意义'}
]
},
cmpTableDataTest6:{
self:[
{isMessage:false,name:'您获得的考试太少了，赶紧去考证吧！'},
{isMessage:false,name:'遗传性耳聋诊断与咨询遗传性耳聋诊断与咨询'},
{isMessage:true,name:'您和您的学院，获得的证书太少了，快去学习吧'},
],
other:[
{name:'聚集糖尿病治疗与管理'},
{name:'治疗药物检测的临床意义是什么'},
{isMessage:true,name:'您和您的学院，获得的证书太少了，快去学习吧'},
]
},
cmpTableDataTest1:{
self:[
{isMessage:false,name:'治疗药物检测的临床意义'},
{isMessage:false,name:'治疗药物检测的临床意义'},
// {isMessage:true,name:'暂无'},
// {isMessage:true,name:'暂无'}
],
other:[
{name:'聚集糖尿病治疗与管理'},
{name:'治疗药物检测的临床意义是什么'},
],
commonMessage:'您和您的学院，获得的证书太少了，快去学习吧'
},
cmpTableDataTest2:{
self:[
// {isMessage:false,name:'治疗药物检测的临床意义'},
{isMessage:true,name:'暂无'},
// {isMessage:true,name:'暂无'}
],
other:[
{name:'聚集糖尿病治疗与管理'},
],
commonMessage:'您和您的学院，获得的证书太少了，快去学习吧'
},
cmpTableDataTest3:{
commonMessage:'您和您所在地，获得的证书太少了，快去学习吧'
}
}
},
mounted(){
this.handleData();
// this.generateExample();
this.generateStudyConditionChart();
this.generateGrowPathChart();
//为你推荐
this.getRecommendList();
},
methods:{
handleData:function(){
this.OptionGrowPath={
// title:{
// show:true,
// },
legend:{
itemHeight:6,//图例的高度
itemGap:10,//图例间距
itemWidth:10,//图例的宽度
textStyle:{//整体设置文字部分的样式
color:'#666',
fontSize:12,
fontweight:400,
height:16.5,
lineHeight:16.5,
padding:[0,30,0,0],
// borderColor:'#ccc',
// borderWidth:2,
},
data:[
{
name:'我的学习时长',
icon:'line',
},
{
name:'我的学习课程',
},
{
name:'平均学习时长',
icon:'line',
},
{
name:'平均学习课程',
}
],
},
dataset: {
//提供一份数据
source: this.growPathDataSet,
},
grid:{
left:0,
right:0,
bottom:0
},
xAxis:
{
type:'category',
axisLine:{
lineStyle:{
type:'solid',
color:'#EDEEF0',
width:'2',
},
},
axisLabel:{
show:true,
textStyle:{
// color:'#aaa', //坐标值具体的颜色
// color:'rgb(255,0,0)',
},
fontSize:'10px',
},
axisTick:{
show:false,
// length:10
},
data:[
{value:'10.6',
textStyle:{fontweight:'bold',color:'#000'}},
'10.7', '10.8','10.9', '今天'],
},
yAxis:[
{
type:'value',
name:'时长',
// interval:25,
min:0,
// max:60,
axisLabel:{
formatter:`{value}min`
},
show:false
},
{
type:'value',
name:'课程',
min:0,
// max:6,
axisLabel:{
formatter:`{value}`
},
show:false
}
],
series:[
//['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
{
type:'line',
symbol:'none',
smooth:true,
itemStyle:{'color':'#449284'}
},{
type:'line',
symbol:'none',
smooth:true,
itemStyle:{'color':'#CAA861'}
},{
type:'bar',
yAxisIndex:1,
label:{
show:true,
position:'top'
},
barGap:0.1,
barCategoryGap:'30px',
itemStyle:{'color':'#CAA861'}
},{
type:'bar',
yAxisIndex:1,
label:{
show:true,
position:'top'
},
barGap:0.1,
barCategoryGap:'30px',
itemStyle:{'color':'rgba(202,168,97,0.2)'}//透明度以这种方式设置，才会在图例中有效果
}
]
};
this.OptionStudyCondition={
// color:{},
legend: {},
tooltip: {},
dataset: {
//提供一份数据
source:this.studyConditionDataSet,
},
grid:{
show:false,
left:0,
right:0,
// bottom:0
},
textStyle:{
color:'#444'
},
xAxis: {
type: 'category',
// name:'xxxx',
axisLine:{
lineStyle:{
type:'solid',
color:'#aaa',
width:'4',
},
},
triggerEvent:true,
axisLabel:{
show:true,
textStyle:{
// color:'#aaa', //坐标值具体的颜色
// color:'rgb(255,0,0)',
},
fontSize:'10px',
clickable:true
},
axisTick:{
show:false,
// length:10
},
// data:[
// {value:'课程',
// textStyle:{fontweight:'bold',color:'#000'}},
// '完成课程', '完成考试','获得证书', '参与项目'],
},
yAxis: {
show:false,
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: 'bar',
barGap:0,
barCategoryGap:'30px',
label:{
show:true,
position:'top'
},
itemStyle:{
'color':'#5489FD',
'opacity':0.84
}
},
{
type: 'bar',
barGap:0.1,
barCategoryGap:'30px',
label:{
show:true,
position:'top'
},
itemStyle:{
'color':'#5489FD',
'opacity':0.34
}
}
]
};
},
getRecommendList(){
this.recommendList=[
{name:'肖丹丹',num:'671',title:'全科医学中医患关系',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
{name:'肖丹丹',num:'672',title:'患者顺从度改善经验谈',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
{name:'肖丹丹',num:'673',title:'基层医疗患者管理',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
{name:'肖丹丹',num:'674',title:'患者心理学入门文字很长文字很长文字很长文字很长',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'}
],
this.recommendListTest=[
{name:'肖丹',num:'666',title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'},
{name:'肖小丹',num:'667',title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'治疗'},
{name:'肖丹丹',num:'668',title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'随访'},
{name:'肖丹丹',num:'669',title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'检查'},
],
this.courseList=[
{name:'肖丹',num:'666人',time:'刚刚',saveStatus:true,title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'},
{name:'肖小丹',num:'1.1k',time:'3小时前',saveStatus:false,title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'糖尿病'},
{name:'肖丹丹',num:'668',time:'3小时前',saveStatus:false,title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'心脏病'},
{name:'肖丹丹',num:'669',time:'3小时前',saveStatus:true,title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'检查'},
]
},
toggleTab:function(tab){
this.currentTab=tab;
this.currentChosen=`${this.currentTab}${this.currentStudyTab}`;
console.log(this.currentTab,this.currentStudyTab,this.currentChosen);
//将相应的数据分别给
},
toggleStudyTab:function(tab){
this.currentStudyTab=tab;
this.currentChosen=`${this.currentTab}${this.currentStudyTab}`;
console.log(this.currentTab,this.currentStudyTab,this.currentChosen)
},
generateGrowPathChart:function(){
let growPathChart=echarts.init(document.getElementById('growPath'));
growPathChart.setOption(this.OptionGrowPath);
growPathChart.on('click',function(params){
if(params.value){
alert("单击了"+params.name+"柱状图");
}else{
alert("单击了"+params.name+"x轴标签");
}
// console.log(params)
});
// s
},
generateStudyConditionChart:function(){
let studyConditionChart=echarts.init(document.getElementById('studyCondition'));
studyConditionChart.setOption(this.OptionStudyCondition);
// studyConditionChart.on('axisareaselected',function(){
// console.log('xxx')
// })
studyConditionChart.on('click',function(params){
if(params.value){
alert("单击了"+params.name+"柱状图");
}else{
alert("单击了"+params.name+"x轴标签");
}
// console.log(params)
if(params.componentType=='xAxis'){
// console.log(params.value)
}
});
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
/*****************************************basic信息******************************************/
.main{
background-color:$fc;//整体背景为蓝色
}
.basic{
width:px2rem(375px);
height:px2rem(150px);
position:relative;
}
.basic .bg{/*图片响应式:内容自动向下排列*/
width:px2rem(375px);
height:px2rem(119px);
background-color:#41B1A3;
// background-color:linear-gradient(25deg,rgba(65,177,163,1) 0%,rgba(74,158,143,1) 100%);
// margin-bottom:px2rem(51px)
}
.basic .info-box{
@include cl;//水平居中
position: absolute;
top:px2rem(80px);
}
/****************************************具体信息*****************************************/
.detail{
display:flex;
flex-direction: column;
/* justify-content:center; */
width:100%;
padding-top:px2rem(20px);
padding-right:px2rem(15px);
padding-left:px2rem(15px);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.tab-header{
display:flex;
justify-content:center;
width:100%;
height:px2rem(34.5px);
box-shadow: 0 px2rem(2px) px2rem(4px) 0 rgba(0,0,0,0.04)
}
.tab-header .tab-header-name{
width:px2rem(30px);
height:px2rem(17px);
line-height:px2rem(17px);
font-size:px2rem(15px);
font-weight:400;
color:rgb(153,153,153)
/* padding:1rem; */
/* margin:0 2rem; */
}
.tab-header .tab-header-name:nth-child(1),.tab-header .tab-header-name:nth-child(2){
margin-right:px2rem(67.5px);
}
.tab-header .tab-header-name .text{
height:px2rem(17px);
line-height:px2rem(17px);
}
.tab-header .tab-header-name.active .bar{
width:px2rem(10px);
height:px2rem(3px);
margin-top:px2rem(9.5px);
margin-left:px2rem(10px);
background:#449284;
border-radius:px2rem(1.5px);
}
.tab-header .tab-header-name.active{
font-weight:500;
color:rgb(51,51,51)
}
.tab{
width:100%;
}
.sub.grow-path,.sub.study-condition{
padding:0 px2rem(5px);
}
.sub>.title{/*整体控制每个部分标题与内容之间的间距与样式*/
margin-top:px2rem(25px);
margin-bottom:px2rem(11px);
height:px2rem(25px);
line-height:px2rem(25px);
font-size:px2rem(18px);
font-weight:400;
color:#333;
text-align:center;
}
.sub.grow-path>.title{
margin-top:px2rem(25px);
}
.sub.study-condition>.title{
margin-top:px2rem(20px);
}
/*成长情况*/
.grow-path-chart{
width:100%;
height:px2rem(282px);/*(33+532)/2*/
}
/*学习情况*/
///////新设计的学习情况
.study-cmp{
width:px2rem(345px);
// min-height:px2rem(254.5px);
min-height:px2rem(284.5px);
box-shadow:0px 10px 30px 0px rgba(0,57,47,0.05);
border-radius:10px;
}
.study-cmp>header{
height:px2rem(36.5px);
display:flex;
display:-webkit-flex;
flex-direction:row;
}
.study-cmp .tab-name{
width:px2rem(115px);
height:px2rem(36.5px);
line-height:px2rem(36.5px);
font-size:px2rem(12px);
text-align:center;
background-color:#f5f5f5;
}
.study-cmp .tab-name:nth-child(1),.study-cmp .tab-name:nth-child(2){
border-right: px2rem(0.5px) solid #e7e7e7;
}
.study-cmp .tab-name.active{
background-color:#fff;
}
.rank-table{
margin:px2rem(21.5px) px2rem(15px) px2rem(28px) px2rem(15px);//上右下左
border:px2rem(0.5px) solid rgb(236,238,241);
}
.rank-table>header{
display:flex;
display:-webkit-flex;
flex-direction:row;
height:px2rem(37px);
}
.rank-table .rank-name{
width:px2rem(157.5px);
height:px2rem(37px);
line-height:px2rem(37px);
text-align:center;
font-weight:500;
font-size:px2rem(12px);
color:#333;
}
.rank-table .rank-name.my-rank{
background-color:rgba(227,188,122,0.1);
}
.rank-table .rank-name.other-rank{
background-color:rgba(68,146,132,0.1);
}
//具体内容的样式
.rank-table-content{
display:flex;
display:-webkit-flex;
flex-direction:row;
}
.rank-table-content .content.my-rank-content{
width:px2rem(157px);
}
.rank-table-content .content.other-rank-content{
width:px2rem(157px);
}
.rank-table-content .content .item{
height:px2rem(58px);
display:flex;display:-webkit-flex;justify-content:center;align-items:center;
.normal span{
font-size:px2rem(12px);
display:inline-block;
vertical-align:middle;//行内块垂直居中
}
.normal span.num{
width:px2rem(13px);
height:px2rem(13px);
line-height:px2rem(13px);
text-align:center;
background-color: rgb(202,168,97);
border-radius: px2rem(6.5px);
color:#fff;
font-weight:400;
}
.normal span.text{
width:px2rem(114px);
line-height:px2rem(16px);
text-align:center;
// padding-left:px2rem(10px);
font-weight:400;
}
.special{
font-size:px2rem(12px);
text-align:center;
padding:px2rem(20px);
color:#999;
}
}
.content.my-rank-content .item{
border-top:px2rem(0.5px) solid rgb(236,238,241);
border-right:px2rem(0.5px) solid rgb(236,238,241);
}
.content.other-rank-content .item{
border-top:px2rem(0.5px) solid rgb(236,238,241);
}
////////////////////////
/*为你推荐*/
.recommend-for-you{
padding-top:px2rem(5px);/*补充推荐list组件里不足的顶部间距*/
}
</style>
src/views/gpranking/gprankingOld.vue 0 → 100644
浏览文件 @ 68f55563
<template>
<div class="main">
<div class="basic">
<!-- 背景图片 -->
<img class="bg" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt="">
<!-- 个人信息 -->
<div class="info">
<!-- 左侧头像 -->
<div class="info-profile">
<img src="../images/profile.jpg" alt="">
</div>
<!-- 右侧个人信息 -->
<ul class="info-detail">
<li>
<span class="info-detail-name">王小呆</span>
<span class="info-detail-others">学习能手</span>
</li>
<li>
<span class="info-detail-others">自2016.3.23起</span>
<span class="info-detail-others">您与云鹊医相识已经483天啦</span>
</li>
</ul>
</div>
</div>
<div class="detail">
<div class="tab-header">
<div class="tab-header-name" :class="{active:currentTab===0}" @click="toggleTab(0)">
<div class="text">
本院
</div>
<div class="bar">
</div>
</div>
<div class="tab-header-name" :class="{active:currentTab===1}" @click="toggleTab(1)">
<div class="text">
本省
</div>
<div class="bar">
</div>
</div>
<div class="tab-header-name" :class="{active:currentTab===2}" @click="toggleTab(2)">
<div class="text">
全国
</div>
<div class="bar">
</div>
</div>
</div>
<div class="tab">
<!-- 近七天成长路径 -->
<div class="sub grow-path">
<header class="title">近7天成长路径</header>
<!-- 图表 -->
<div id="growPath" class="grow-path-chart">
</div>
</div>
<!-- 学习情况 -->
<div class="sub study-condition">
<header class="title">学习情况</header>
<!-- 图表 -->
<div class="study-conditon-chart" id="studyCondition" style="width:100%;height:400px;">
</div>
<!-- 对比 -->
<div class="study-condition-cmp">
<header>
<div class="title">我的Top3</div>
<div class="title">院内Top3</div>
</header>
<div class="rank">
<div class="rank-sec my-rank">
<div class="rank-item">
<div class="rank-num">1</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
<div class="rank-item">
<div class="rank-num">2</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
<div class="rank-item">
<div class="rank-num">3</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
</div>
<div class="rank-sec all-rank">
<div class="rank-item">
<div class="rank-num">1</div>
<div class="rank-name">聚集糖尿病治疗与管理</div>
</div>
<div class="rank-item">
<div class="rank-num">2</div>
<div class="rank-name">聚集糖尿病治疗与管理</div>
</div>
<div class="rank-item">
<div class="rank-num">3</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
</div>
</div>
</div>
</div>
<!-- 为你推荐 -->
<div class="recommend-for-you">
<recommend-list-test :title="recommendTitle" position="center" :recommends="recommendList"></recommend-list-test>
</div>
<!-- 其它为你推荐 -->
<recommend-list-test
title="你可能需要"
title-position="center"
has-more=true
has-course-tag=true
tag-position="right"
:recommends="recommendListTest"></recommend-list-test>
</div>
</div>
</div>
</template>
<script>
import RecommendList from './RecommendList.vue'
import RecommendListTest from './RecommendListTest.vue'
var echarts=require('echarts');
export default {
name:'gpranking',
components:{
RecommendList,
RecommendListTest
},
data(){
return{
currentTab:0,
//编辑的数据
basicInfo:{"name":"王小呆","level":"学习小能手","date":"2016.3.23","days":555,"imgLink":""},
//图表数据
OptionStudyCondition:{},
OptionGrowPath:{},
//为你推荐数据：
recommendTitle:"为你推荐",
recommendList:[],
recommendListTest:[]
}
},
mounted(){
this.getData();
// this.generateExample();
this.generateStudyConditionChart();
this.generateGrowPathChart();
//为你推荐
this.getRecommendList();
},
methods:{
getData:function(){
this.OptionGrowPath={
title:{
show:true,
},
legend:{
data:[
{
name:'我的学习时长',
icon:'line',
textStyle:{
// color:'blue'
}
},
{
name:'我的学习课程',
},
{
name:'平均学习时长',
icon:'line',
},
{
name:'平均学习课程',
}
],
top:0,
padding:10,
// show:false
},
dataset: {
//提供一份数据
source: [
['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
['10.6','15','22','2','4'],
['10.7','15','24','2','4'],
['10.8','17','28','2','4'],
['10.9','15','18','2','4'],
['10.10','17','19','2','4'],
['今天','15','20','2','4']
]
},
grid:{
left:0,
right:0,
bottom:0
},
xAxis:[
{
type:'category',
axisLine:{
lineStyle:{
type:'solid',
color:'#aaa',
width:'4',
},
},
axisLabel:{
show:true,
textStyle:{
// color:'#aaa', //坐标值具体的颜色
// color:'rgb(255,0,0)',
},
fontSize:'10px',
},
axisTick:{
show:false,
// length:10
},
}
],
yAxis:[
{
type:'value',
name:'时长',
// interval:25,
min:0,
max:40,
axisLabel:{
formatter:`{value}min`
},
show:false
// show:true
},
{
type:'value',
name:'课程',
min:0,
max:10,
axisLabel:{
formatter:`{value}`
},
show:false
}
],
series:[
//['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
{
type:'line',
symbol:'none',
itemStyle:{'color':'#FFCE67'}
},{
type:'line',
symbol:'none',
itemStyle:{'color':'#FFCE67','opacity':0.4}//折线上的效果不好
},{
type:'bar',
yAxisIndex:1,
label:{
show:true,
position:'top'
},
barGap:0.1,
barCategoryGap:'30px',
itemStyle:{'color':'#FFCE67'}
},{
type:'bar',
yAxisIndex:1,
label:{
show:true,
position:'top'
},
barGap:0.1,
barCategoryGap:'30px',
itemStyle:{'color':'#FFCE67','opacity':0.4}
}
]
};
this.OptionStudyCondition={
// color:{},
legend: {},
tooltip: {},
dataset: {
//提供一份数据
source: [
['content', '我的', '本院平均'],
['在学课程', 12, 10],
['完成课程', 56,62],
['完成考试', 23,45],
['获得证书', 8,20],
['参与项目', 4,6]
]
},
grid:{
show:false,
left:0,
right:0,
// bottom:0
},
textStyle:{
color:'#444'
},
xAxis: {
type: 'category',
// name:'xxxx',
axisLine:{
lineStyle:{
type:'solid',
color:'#aaa',
width:'4',
},
},
triggerEvent:true,
axisLabel:{
show:true,
textStyle:{
// color:'#aaa', //坐标值具体的颜色
// color:'rgb(255,0,0)',
},
fontSize:'10px',
clickable:true
},
axisTick:{
show:false,
// length:10
},
data:[
{value:'在学课程',
textStyle:{fontweight:'bold',color:'#000'}},
'完成课程', '完成考试','获得证书', '参与项目'],
},
yAxis: {
show:false,
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: 'bar',
barGap:0,
barCategoryGap:'30px',
label:{
show:true,
position:'top'
},
itemStyle:{
'color':'#5489FD',
'opacity':0.84
}
},
{
type: 'bar',
barGap:0.1,
barCategoryGap:'30px',
label:{
show:true,
position:'top'
},
itemStyle:{
'color':'#5489FD',
'opacity':0.34
}
}
]
};
},
getRecommendList(){
this.recommendList=[
{name:'肖丹丹',num:'671',title:'全科医学中医患关系',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'},
{name:'肖丹丹',num:'672',title:'患者顺从度改善经验谈',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'},
{name:'肖丹丹',num:'673',title:'基层医疗患者管理',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'},
{name:'肖丹丹',num:'674',title:'患者心理学入门文字很长文字很长文字很长文字很长',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'}
],
this.recommendListTest=[
{name:'肖丹',num:'666',title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'诊断'},
{name:'肖小丹',num:'667',title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'治疗'},
{name:'肖丹丹',num:'668',title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
{name:'肖丹丹',num:'669',title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'检查'},
{name:'肖丹丹',num:'670',title:'全科医学中医患关系',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
{name:'肖丹丹',num:'670',title:'患者顺从度改善经验谈',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
{name:'肖丹丹',num:'670',title:'基层医疗患者管理',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
{name:'肖丹丹',num:'670',title:'患者心理学入门',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'}
]
},
toggleTab:function(tab){
this.currentTab=tab;
},
generateGrowPathChart:function(){
let growPathChart=echarts.init(document.getElementById('growPath'));
growPathChart.setOption(this.OptionGrowPath);
growPathChart.on('click',function(params){
if(params.value){
alert("单击了"+params.name+"柱状图");
}else{
alert("单击了"+params.name+"x轴标签");
}
// console.log(params)
});
// s
},
generateStudyConditionChart:function(){
let studyConditionChart=echarts.init(document.getElementById('studyCondition'));
studyConditionChart.setOption(this.OptionStudyCondition);
// studyConditionChart.on('axisareaselected',function(){
// console.log('xxx')
// })
studyConditionChart.on('click',function(params){
if(params.value){
alert("单击了"+params.name+"柱状图");
}else{
alert("单击了"+params.name+"x轴标签");
}
// console.log(params)
if(params.componentType=='xAxis'){
// console.log(params.value)
}
});
}
}
}
</script>
<style scoped>
/*****************************************basic信息******************************************/
.basic{
width:100%;
/* min-height:358px; */
position:relative;
}
.basic .bg{/*图片响应式:内容自动向下排列*/
width:100%;
/* height:380px; */
}
.basic .info{
/*实现多个元素水平方向上居中*/
display:flex;
display:-webkit-flex;
flex-direction:row;
justify-content: center;
position: absolute;
top:7.8rem;/*整体距离顶部的位置*/
width:100%;
}
.basic .info-profile {
margin-right:1rem;
}
.basic .info-profile img{
width:4.5rem;
height:4.5rem;
border-radius:2.25rem;
}
.basic .info-detail{
display:flex;
flex-direction:column;
}
.basic .info-detail li{
margin-bottom:0.3rem;
text-align:left;
color:#fff;
}
.basic .info-detail .info-detail-name{
margin-right:0.6rem;
height:2.25rem;
line-height:2.25rem;
font-size:1.6rem;
font-weight:500;
}
.basic .info-detail .info-detail-others{
margin-right:0.6rem;
height:2rem;
line-height:2rem;
font-size:1.3rem;
font-weight:400;
}
/****************************************具体信息*****************************************/
.detail{
display:flex;
flex-direction: column;
/* justify-content:center; */
width:100%;
padding:0 1.5rem;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.tab-header{
display:flex;
justify-content:center;
width:100%;
height:3.45rem;
}
.tab-header .tab-header-name{
width:3rem;
font-size:1.5rem;
font-weight:400;
color:rgb(153,153,153)
/* padding:1rem; */
/* margin:0 2rem; */
}
.tab-header .tab-header-name:nth-child(1),.tab-header .tab-header-name:nth-child(2){
margin-right:6.75rem;
}
.tab-header .tab-header-name .text{
height:1.7rem;
line-height:1.7rem;
}
.tab-header .tab-header-name.active .bar{
width:1rem;
height:0.3rem;
margin-top:0.95rem;
margin-left:1rem;/*(3-1)/2*/
background:rgba(84,137,253,1);
border-radius:0.15rem;
}
.tab-header .tab-header-name.active{
font-weight:500;
color:rgba(51,51,51)
}
.tab{
width:100%;
}
.sub.grow-path,.sub.study-condition{
/* margin-left:2rem;
margin-right:2rem; */
padding:0 0.5rem;
}
/* .sub.recommend-for-you{
margin-left:1.5rem;
margin-right:1.5rem;
} */
.sub>.title{/*整体控制每个部分标题与内容之间的间距与样式*/
margin-top:2.5rem;
margin-bottom:1.1rem;
height:2.5rem;
line-height:2.5rem;
font-size:1.8rem;
color:#333;
text-align:center;
}
/*成长情况*/
.grow-path-chart{
width:100%;
min-height:27rem;/*(33+1125-543)/20*/
}
/*学习情况*/
.study-condition-cmp{
width:100%;
height:23.9rem;
background-color:rgb(234,241,255);
}
.study-condition-cmp>header{
display:flex;
display: -webkit-flex;
flex-direction:row;
height:3.75rem;
line-height:3.75rem;
font-size:1.2rem;
font-weight: 400;
}
.study-condition-cmp>header>.title{
width:50%;
text-align:center;
}
.study-condition-cmp .rank{
display:flex;
display: -webkit-flex;
flex-direction:row;
}
.study-condition-cmp .rank .rank-sec{
background-color: #fff;
width:50%;
}
.study-condition-cmp .rank .rank-sec.my-rank{
margin-right:1.4rem;
/* border-top-right-radius: 0.5rem; */
/* border-bottom-right-radius: 0.5rem; */
}
.study-condition-cmp .rank .rank-sec.all-rank{
margin-left:1.4rem;
/* border-top-left-radius: 0.5rem; */
/* border-bottom-left-radius: 0.5rem; */
}
.study-condition-cmp .rank .rank-sec .rank-item{
display:flex;
display:-webkit-flex;
flex-flow:row;
-ms-flex-flow: row;
align-items: center;
background-color:rgb(234,241,255);
color:#666;
border-radius: 0.15rem;
height:5.2rem;/*?*/
}
/*控制rank-item的具体margin状况*/
.study-condition-cmp .rank .rank-sec.my-rank .rank-item{
margin:0.7rem 0.75rem 1rem 0;
}
.study-condition-cmp .rank .rank-sec.all-rank .rank-item{
margin:0.7rem 0 1rem 0.75rem;
}
.study-condition-cmp .rank .rank-sec .rank-item:nth-last-child(1){
margin-bottom:0.7rem;
}
.study-condition-cmp .rank .rank-sec .rank-item .rank-num{
width:1.3rem;
height:1.3rem;
text-align:center;
line-height:1.3rem;
background-color: #709CFE;
color:#fff;
font-weight:400;
font-size:1.2rem;
border-radius: 0.65rem;
margin-left:1rem;
margin-right:0.7rem;
/* margin:0 0.5rem; */
}
.study-condition-cmp .rank .rank-sec .rank-item .rank-name{
font-size:1.3rem;
font-weight:400;
margin-right:0.95rem;
color:rgb(102,102,102);
height:3.7rem;
line-height:1.85rem;
}
/*为你推荐*/
.recommend-for-you{
padding-top:0.5rem;/*补充推荐list组件里不足的顶部间距*/
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或