Skip to content

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

修改课程组件

上级 bc4b045e
隐藏空白字符变更
内嵌 并排
正在显示 包含 563 行增加 和 1 行删除
src/components/common/yqy/CourseList.vue 0 → 100644
浏览文件 @ 56c7d6a9
<!-- 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>
<!-- <div class="icon"> -->
<img class="icon" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png" alt="">
<!-- </div> -->
<!-- <span class="icon"></span> -->
</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/RecommendList.vue 0 → 100644
浏览文件 @ 56c7d6a9
<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'}">
<span class="icon">O</span>
<span>换一批</span>
</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','title','titlePosition','hasChange','hasMore','hasCourseTag','tagPosition','padding'],
// props:{
// recommends:Array,
// title:'为你推荐',
// titlePosition:'center',
// hasMore:'false',
// hasCourseTag:'false',
// tagPosition:'right',
// padding:'0px'
// },
// props:{
// recommends:[],
// title:'为你推荐',
// titlePosition:'center',
// hasMore:'false',
// hasCourseTag:'false',
// tagPosition:'right',
// padding:'0px'
// },
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;
font-size:px2rem(14px);
font-weight:400;
color:rgb(102,102,102);
display:block;
}
.section>header .change-content .icon{
margin-right:px2rem(3px);
}
.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);
right:px2rem(5px);
width:px2rem(30px);
height:px2rem(16px);
line-height:px2rem(16px);
background-color:#ECF4F2;
font-size:px2rem(11px);
color:#449284;
text-align:center;
border-radius: px2rem(2px);
}
.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(9.5px);
margin-bottom:px2rem(20px);
height:px2rem(40px);
line-height:px2rem(20px);
font-size:px2rem(15px);
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/views/gpranking/gpranking.vue
浏览文件 @ 56c7d6a9
...@@ -336,7 +336,7 @@ export default { ...@@ -336,7 +336,7 @@ export default {
['完成课程', 56,62], ['完成课程', 56,62],
['完成考试', 23,45], ['完成考试', 23,45],
['获得证书', 8,20], ['获得证书', 8,20],
['参与项目', 4,6] ['参与项目', 4,6]//test
] ]
}, },
grid:{ grid:{
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或