Skip to content

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

学习情况对比表格六种样式组件，添加部分数据逻辑

上级 2d963f95
显示空白字符变更
内嵌 并排
正在显示 包含 527 行增加 和 119 行删除
src/views/gpranking/CompareTable.vue 0 → 100644
浏览文件 @ baed8219
<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
浏览文件 @ baed8219
...@@ -72,43 +72,28 @@ ...@@ -72,43 +72,28 @@
<div class="study-conditon-chart" id="studyCondition" style="width:100%;height:400px;"> <div class="study-conditon-chart" id="studyCondition" style="width:100%;height:400px;">
</div> </div>
<!-- 对比 -->
<div class="study-condition-cmp"> <!-- 新的对比 -->
<div class="study-cmp">
<!-- 头部tab -->
<header> <header>
<div class="title">我的Top3</div> <div class="tab-name" :class="{active:currentStudyTab===0}" @click="toggleStudyTab(0)">完成课程</div>
<div class="title">院内Top3</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> </header>
<div class="rank"> <!--表格-->
<div class="rank-sec my-rank"> <div class="rank-table">
<div class="rank-item"> <!-- header -->
<div class="rank-num">1</div> <header>
<div class="rank-name">治疗药物检测的临床意义</div> <div class="rank-name my-rank">我的最近Top3</div>
</div> <div class="rank-name other-rank">院内Top3</div>
<div class="rank-item"> </header>
<div class="rank-num">2</div> <!-- 测试组件 -->
<div class="rank-name">治疗药物检测的临床意义</div> <compare-table :cmp-table-data=cmpTableDataTest3 :type=type></compare-table>
</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>
</div> </div>
<!-- 为你推荐 --> <!-- 为你推荐 -->
<div class="recommend-for-you"> <div class="recommend-for-you">
...@@ -134,8 +119,7 @@ ...@@ -134,8 +119,7 @@
tag-position="right" tag-position="right"
:courses="courseList"></course-list> :courses="courseList"></course-list>
<!-- 个人信息 -->
<personal-information></personal-information>
</div> </div>
</div> </div>
...@@ -146,6 +130,7 @@ ...@@ -146,6 +130,7 @@
<script> <script>
// import RecommendList from './RecommendList.vue' // import RecommendList from './RecommendList.vue'
// import RecommendListTest from './RecommendListTest.vue' // import RecommendListTest from './RecommendListTest.vue'
import CompareTable from './CompareTable.vue'
import RecommendList from 'src/components/common/yqy/RecommendList.vue' import RecommendList from 'src/components/common/yqy/RecommendList.vue'
import CourseList from 'src/components/common/yqy/CourseList.vue' import CourseList from 'src/components/common/yqy/CourseList.vue'
import PersonalInformation from 'src/components/common/yqy/PersonalInformation.vue' import PersonalInformation from 'src/components/common/yqy/PersonalInformation.vue'
...@@ -157,13 +142,83 @@ export default { ...@@ -157,13 +142,83 @@ export default {
// RecommendList, // RecommendList,
RecommendList, RecommendList,
CourseList, CourseList,
PersonalInformation PersonalInformation,
CompareTable
}, },
data(){ data(){
return{ return{
//记录全国/全省/本院tab ----0/1/2
currentTab:0, 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天成长路径/////// OptionGrowPath:{},//30天成长路径///////
OptionStudyCondition:{}, OptionStudyCondition:{},
//为你推荐数据： //为你推荐数据：
...@@ -171,8 +226,85 @@ export default { ...@@ -171,8 +226,85 @@ export default {
recommendList:[], recommendList:[],
recommendListTest:[], recommendListTest:[],
courseList:[], courseList:[],
personalInfo:{"name":"王小呆","date":"2016.3.23","days":555,"imageUrl":"https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png"} 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(){ mounted(){
...@@ -229,14 +361,7 @@ export default { ...@@ -229,14 +361,7 @@ export default {
}, },
dataset: { dataset: {
//提供一份数据 //提供一份数据
source: [ source: this.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']
]
}, },
grid:{ grid:{
left:0, left:0,
...@@ -344,14 +469,7 @@ export default { ...@@ -344,14 +469,7 @@ export default {
tooltip: {}, tooltip: {},
dataset: { dataset: {
//提供一份数据 //提供一份数据
source: [ source:this.studyConditionDataSet,
['content', '我的', '本院平均'],
['在学课程', 12, 10],
['完成课程', 56,62],
['完成考试', 23,45],
['获得证书', 8,20],
['参与项目', 4,6]//test
]
}, },
grid:{ grid:{
show:false, show:false,
...@@ -387,10 +505,10 @@ export default { ...@@ -387,10 +505,10 @@ export default {
// length:10 // length:10
}, },
data:[ // data:[
{value:'在学课程', // {value:'课程',
textStyle:{fontweight:'bold',color:'#000'}}, // textStyle:{fontweight:'bold',color:'#000'}},
'完成课程', '完成考试','获得证书', '参与项目'], // '完成课程', '完成考试','获得证书', '参与项目'],
...@@ -456,6 +574,15 @@ export default { ...@@ -456,6 +574,15 @@ export default {
}, },
toggleTab:function(tab){ toggleTab:function(tab){
this.currentTab=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(){ generateGrowPathChart:function(){
...@@ -605,85 +732,130 @@ export default { ...@@ -605,85 +732,130 @@ export default {
width:100%; width:100%;
height:px2rem(282px);/*(33+532)/2*/ height:px2rem(282px);/*(33+532)/2*/
} }
/*学习情况*/ /*学习情况*/
.study-condition-cmp{ ///////新设计的学习情况
width:100%; .study-cmp{
height:px2rem(239px); width:px2rem(345px);
background-color:rgb(234,241,255); // 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-condition-cmp>header{ .study-cmp>header{
height:px2rem(36.5px);
display:flex; display:flex;
display: -webkit-flex; display:-webkit-flex;
flex-direction:row; flex-direction:row;
height:px2rem(37.5px);
line-height:px2rem(37.5px);
font-size:px2rem(12px);
font-weight: 400;
} }
.study-condition-cmp>header>.title{ .study-cmp .tab-name{
width:50%; width:px2rem(115px);
height:px2rem(36.5px);
line-height:px2rem(36.5px);
font-size:px2rem(12px);
text-align:center; 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);
} }
.study-condition-cmp .rank{ .rank-table>header{
display:flex; display:flex;
display: -webkit-flex; display:-webkit-flex;
flex-direction:row; flex-direction:row;
height:px2rem(37px);
} }
.study-condition-cmp .rank .rank-sec{ .rank-table .rank-name{
background-color: #fff; width:px2rem(157.5px);
width:50%; height:px2rem(37px);
line-height:px2rem(37px);
text-align:center;
font-weight:500;
font-size:px2rem(12px);
color:#333;
} }
.study-condition-cmp .rank .rank-sec.my-rank{ .rank-table .rank-name.my-rank{
margin-right:px2rem(14px); background-color:rgba(227,188,122,0.1);
} }
.study-condition-cmp .rank .rank-sec.all-rank{ .rank-table .rank-name.other-rank{
margin-left:px2rem(14px); background-color:rgba(68,146,132,0.1);
} }
.study-condition-cmp .rank .rank-sec .rank-item{
//具体内容的样式
.rank-table-content{
display:flex; display:flex;
display:-webkit-flex; display:-webkit-flex;
flex-flow:row; flex-direction:row;
-ms-flex-flow: row;
align-items: center;
background-color:rgb(234,241,255);
color:#666;
border-radius: px2rem(1.5px);
height:px2rem(52px);/*?*/
} }
/*控制rank-item的具体margin状况*/
.study-condition-cmp .rank .rank-sec.my-rank .rank-item{ .rank-table-content .content.my-rank-content{
margin:px2rem(7px) px2rem(7.5px) px2rem(10px) 0; width:px2rem(157px);
} }
.study-condition-cmp .rank .rank-sec.all-rank .rank-item{ .rank-table-content .content.other-rank-content{
margin:px2rem(7px) 0 px2rem(10px) px2rem(7.5px); width:px2rem(157px);
} }
.study-condition-cmp .rank .rank-sec .rank-item:nth-last-child(1){ .rank-table-content .content .item{
margin-bottom:px2rem(7px); 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;//行内块垂直居中
} }
.study-condition-cmp .rank .rank-sec .rank-item .rank-num{ .normal span.num{
width:px2rem(13px); width:px2rem(13px);
height:px2rem(13px); height:px2rem(13px);
text-align:center;
line-height:px2rem(13px); line-height:px2rem(13px);
background-color: #709CFE; text-align:center;
background-color: rgb(202,168,97);
border-radius: px2rem(6.5px);
color:#fff; color:#fff;
font-weight:400; 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); font-size:px2rem(12px);
border-radius: px2rem(6.5px); text-align:center;
margin-left:px2rem(10px); padding:px2rem(20px);
margin-right:px2rem(7px); color:#999;
/* margin:0 0.5rem; */ }
} }
.study-condition-cmp .rank .rank-sec .rank-item .rank-name{ .content.my-rank-content .item{
font-size:px2rem(13px); border-top:px2rem(0.5px) solid rgb(236,238,241);
font-weight:400; border-right:px2rem(0.5px) solid rgb(236,238,241);
margin-right:px2rem(9.5px); }
color:rgb(102,102,102); .content.other-rank-content .item{
height:px2rem(37px); border-top:px2rem(0.5px) solid rgb(236,238,241);
line-height:px2rem(18.5px);
} }
////////////////////////
/*为你推荐*/ /*为你推荐*/
.recommend-for-you{ .recommend-for-you{
padding-top:px2rem(5px);/*补充推荐list组件里不足的顶部间距*/ padding-top:px2rem(5px);/*补充推荐list组件里不足的顶部间距*/
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或