Skip to content

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

微调推荐列表组件，增加personalInformation组件

上级 56c7d6a9
隐藏空白字符变更
内嵌 并排
正在显示 包含 218 行增加 和 91 行删除
src/components/common/yqy/CourseList.vue
浏览文件 @ a19a6c8a
......@@ -6,10 +6,7 @@
<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> -->
<img class="icon" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png" alt="">
</div>
</header>
<div class="recommends">
......
src/components/common/yqy/PersonalInformation.vue 0 → 100644
浏览文件 @ a19a6c8a
<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
浏览文件 @ a19a6c8a
......@@ -3,8 +3,9 @@
<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 class="text">换一批</div>
<img class="icon" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png" alt="">
</div>
</header>
<div class="recommends">
......@@ -29,25 +30,46 @@
<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'
// },
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{
......@@ -118,20 +140,39 @@ export default {
}
.section>header .change-content{
display:none;
}
.section>header .change-content.active{
position:absolute;
right:0;
font-size:px2rem(14px);
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:rgb(102,102,102);
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{
margin-right:px2rem(3px);
.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;
......@@ -174,15 +215,17 @@ export default {
display:block;
position:absolute;
top:px2rem(5px);
right:px2rem(5px);
width:px2rem(30px);
left:px2rem(5px);
width:px2rem(40px);
height:px2rem(16px);
line-height:px2rem(16px);
background-color:#ECF4F2;
font-size:px2rem(11px);
color:#449284;
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);
......@@ -192,12 +235,13 @@ export default {
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);
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;
......
src/views/gpranking/gpranking.vue
浏览文件 @ a19a6c8a
......@@ -2,24 +2,33 @@
<div class="main">
<div class="basic">
<!-- 背景图片 -->
<img class="bg" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt="">
<!-- <img class="bg" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt=""> -->
<div class="bg"></div>
<!-- 个人信息 -->
<div class="info">
<!-- 左侧头像 -->
<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 class="info-detail-others">自<span>2016.3.23</span>起&nbsp;&nbsp;您与云鹊医相识已经<span>483</span>天啦
</div>
</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">
......@@ -124,6 +133,9 @@
has-course-tag=true
tag-position="right"
:courses="courseList"></course-list>
<!-- 个人信息 -->
<personal-information></personal-information>
</div>
</div>
......@@ -136,6 +148,7 @@
// import RecommendListTest from './RecommendListTest.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 {
......@@ -143,13 +156,13 @@ export default {
components:{
// RecommendList,
RecommendList,
CourseList
CourseList,
PersonalInformation
},
data(){
return{
currentTab:0,
//编辑的数据
basicInfo:{"name":"王小呆","level":"学习小能手","date":"2016.3.23","days":555,"imgLink":""},
//图表数据
OptionGrowPath:{},//30天成长路径
OptionStudyCondition:{},
......@@ -157,7 +170,8 @@ export default {
recommendTitle:"为你推荐",
recommendList:[],
recommendListTest:[],
courseList:[]
courseList:[],
personalInfo:{"name":"王小呆","date":"2016.3.23","days":555,"imageUrl":"https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png"}
}
},
......@@ -494,53 +508,16 @@ export default {
.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{
.basic .info-box{
@include cl;//水平居中
display:flex;
display:-webkit-flex;
flex-direction:row;
justify-content: center;
position: absolute;
top:px2rem(80px);
width:px2rem(345px);
height:px2rem(70px);
border-radius:px2rem(3px);
box-shadow: 0 px2rem(1px) px2rem(11px) 0 rgba(21,138,123,0.1);
}
.basic .info-profile {
margin-right:px2rem(5px);
display:flex;
display:-webkit-flex;
flex-direction: row;
align-items:center;
}
.basic .info-profile img{
width:px2rem(40px);
height:px2rem(40px);
border-radius:px2rem(20px);
}
.basic .info-detail{
display:flex;
display:-webkit-flex;
flex-direction:column;
justify-content: center;
}
.basic .info-detail .info-detail-name{
font-size:px2rem(15px);
font-weight:500;
margin-bottom:px2rem(3px);
text-align:left;
}
.basic .info-detail .info-detail-others{
height:px2rem(20px);
line-height:px2rem(20px);
font-size:px2rem(13px);
font-weight:400;
color:rgb(102,102,102)
}
/****************************************具体信息*****************************************/
.detail{
display:flex;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或