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
此差异已折叠。
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或