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 @@ ...@@ -6,10 +6,7 @@
<div class="change-content" :class="{'active':hasChange=='true'}"> <div class="change-content" :class="{'active':hasChange=='true'}">
<!-- 注意更改这里 --> <!-- 注意更改这里 -->
<div class="text">换一批</div> <div class="text">换一批</div>
<!-- <div class="icon"> --> <img class="icon" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png" alt="">
<img class="icon" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png" alt="">
<!-- </div> -->
<!-- <span class="icon"></span> -->
</div> </div>
</header> </header>
<div class="recommends"> <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 @@ ...@@ -3,8 +3,9 @@
<header :class="{'title-center':titlePosition=='center','title-left':titlePosition=='left','title-right':titlePosition=='right'}"> <header :class="{'title-center':titlePosition=='center','title-left':titlePosition=='left','title-right':titlePosition=='right'}">
<div class="title">{{title}}</div> <div class="title">{{title}}</div>
<div class="change-content" :class="{'active':hasChange=='true'}"> <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> </div>
</header> </header>
<div class="recommends"> <div class="recommends">
...@@ -29,25 +30,46 @@ ...@@ -29,25 +30,46 @@
<script> <script>
export default { export default {
name:"RecommendList", name:"RecommendList",
props:['recommends','title','titlePosition','hasChange','hasMore','hasCourseTag','tagPosition','padding'], props:{
// props:{ recommends:{
// recommends:Array, type:Array,
// title:'为你推荐', default:()=>{
// titlePosition:'center', return [
// hasMore:'false', {name:'肖丹',num:'666人',time:'刚刚',saveStatus:true,title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'}
// hasCourseTag:'false', ]
// tagPosition:'right', }
// padding:'0px' },
// }, title:{
// props:{ type:String,
// recommends:[], default:'更多课程'
// title:'为你推荐', },
// titlePosition:'center', titlePosition:{
// hasMore:'false', type:String,
// hasCourseTag:'false', default:'left'
// tagPosition:'right', },
// padding:'0px' 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(){ data(){
return{ return{
...@@ -118,20 +140,39 @@ export default { ...@@ -118,20 +140,39 @@ export default {
} }
.section>header .change-content{ .section>header .change-content{
display:none; display:none;
} }
.section>header .change-content.active{ .section>header .change-content.active{
position:absolute; position:absolute;
right:0; 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; font-weight:400;
color:rgb(102,102,102); color:#28344c;
display:block; 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{ .section>header .change-content .icon{/*！加图片后调整*/
margin-right:px2rem(3px); width:px2rem(12px);
height:px2rem(12px);
position:absolute;
top:px2rem(1.5px);
right:0;
} }
.recommends{ .recommends{
display: -webkit-flex; display: -webkit-flex;
display:flex; display:flex;
...@@ -174,15 +215,17 @@ export default { ...@@ -174,15 +215,17 @@ export default {
display:block; display:block;
position:absolute; position:absolute;
top:px2rem(5px); top:px2rem(5px);
right:px2rem(5px); left:px2rem(5px);
width:px2rem(30px); width:px2rem(40px);
height:px2rem(16px); height:px2rem(16px);
line-height:px2rem(16px); line-height:px2rem(16px);
background-color:#ECF4F2; background-color:#FAFCFF;
font-size:px2rem(11px); font-size:px2rem(10px);
color:#449284; color:#4A87D4;
text-align:center; text-align:center;
border:px2rem(0.5px) solid rgba(195,220,251,1);
border-radius: px2rem(2px); border-radius: px2rem(2px);
// padding:px2rem(3px) 0;
} }
.recommend-item .recommend-course-tag.active.left-tag{ .recommend-item .recommend-course-tag.active.left-tag{
top:px2rem(5px); top:px2rem(5px);
...@@ -192,12 +235,13 @@ export default { ...@@ -192,12 +235,13 @@ export default {
top:px2rem(5px); top:px2rem(5px);
right:px2rem(5px); right:px2rem(5px);
} }
.recommend-item .recommend-title{ .recommend-item .recommend-title{
margin-top:px2rem(9.5px); margin-top:px2rem(5px);
margin-bottom:px2rem(20px); margin-bottom:px2rem(6px);
height:px2rem(40px); height:px2rem(38px);
line-height:px2rem(20px); line-height:px2rem(19px);
font-size:px2rem(15px); font-size:px2rem(14px);
font-weight:400; font-weight:400;
color:rgb(51,51,51); color:rgb(51,51,51);
overflow:hidden; overflow:hidden;
......
src/views/gpranking/gpranking.vue
浏览文件 @ a19a6c8a
...@@ -2,24 +2,33 @@ ...@@ -2,24 +2,33 @@
<div class="main"> <div class="main">
<div class="basic"> <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"> <div class="info-profile">
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt=""> <img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt="">
</div> </div>
<!-- 右侧个人信息 -->
<div class="info-detail"> <div class="info-detail">
<div class="info-detail-name"> <div class="info-detail-name">
王小呆 王小呆
</div> </div>
<div class="info-detail-others"> <div class="info-detail-others">自<span>2016.3.23</span>起&nbsp;&nbsp;您与云鹊医相识已经<span>483</span>天啦
自<span> 2016.3.23</span>起&nbsp;&nbsp;您与云鹊医相识已经<span>483</span>天啦
</div> </div>
</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>
<div class="detail"> <div class="detail">
<div class="tab-header"> <div class="tab-header">
...@@ -124,6 +133,9 @@ ...@@ -124,6 +133,9 @@
has-course-tag=true has-course-tag=true
tag-position="right" tag-position="right"
:courses="courseList"></course-list> :courses="courseList"></course-list>
<!-- 个人信息 -->
<personal-information></personal-information>
</div> </div>
</div> </div>
...@@ -136,6 +148,7 @@ ...@@ -136,6 +148,7 @@
// import RecommendListTest from './RecommendListTest.vue' // import RecommendListTest from './RecommendListTest.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'
var echarts=require('echarts'); var echarts=require('echarts');
export default { export default {
...@@ -143,13 +156,13 @@ export default { ...@@ -143,13 +156,13 @@ export default {
components:{ components:{
// RecommendList, // RecommendList,
RecommendList, RecommendList,
CourseList CourseList,
PersonalInformation
}, },
data(){ data(){
return{ return{
currentTab:0, currentTab:0,
//编辑的数据 //编辑的数据
basicInfo:{"name":"王小呆","level":"学习小能手","date":"2016.3.23","days":555,"imgLink":""},
//图表数据 //图表数据
OptionGrowPath:{},//30天成长路径 OptionGrowPath:{},//30天成长路径
OptionStudyCondition:{}, OptionStudyCondition:{},
...@@ -157,7 +170,8 @@ export default { ...@@ -157,7 +170,8 @@ export default {
recommendTitle:"为你推荐", recommendTitle:"为你推荐",
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"}
} }
}, },
...@@ -494,53 +508,16 @@ export default { ...@@ -494,53 +508,16 @@ export default {
.basic .bg{/*图片响应式:内容自动向下排列*/ .basic .bg{/*图片响应式:内容自动向下排列*/
width:px2rem(375px); width:px2rem(375px);
height:px2rem(119px); 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) // margin-bottom:px2rem(51px)
} }
.basic .info{ .basic .info-box{
@include cl;//水平居中 @include cl;//水平居中
display:flex;
display:-webkit-flex;
flex-direction:row;
justify-content: center;
position: absolute; position: absolute;
top:px2rem(80px); 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{ .detail{
display:flex; display:flex;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或