提交 d015cf78 编写于 作者: 杨广俊's avatar 杨广俊

排序前优化

上级 dd12ee0e
......@@ -46,11 +46,11 @@
<img v-lazy="item.courseInfoUrl"/>
</div>
<div class="five-text">
<div class="teacher-itemname fs14" >
<div class="teacher-itemname fs14 ellipsis-2" >
<span v-show="item.typeName" class="teacher-itemname-tag">{{item.typeName}}</span>
<span class="teacher-itemname-name" v-html="item.highLightName"></span>
</div>
<div class="fs13">
<div class="fs13 ellipsis-1" >
<span class="five-text-shourtcut">{{item.shortcut}}</span>
</div>
<div class="fs13 five-text-teacher">
......@@ -405,9 +405,10 @@ export default {
font-size: px2rem(13px);
margin-bottom: px2rem(5px);
&-tag {
height: px2rem(18px);
line-height: px2rem(18px);
padding: px2rem(1px) px2rem(3px) px2rem(0px);
vertical-align: top;
height: px2rem(20px);
line-height: px2rem(20px);
padding: px2rem(2px) px2rem(3px) px2rem(1px);
border-radius: px2rem(2px);
font-size: px2rem(12px);
color: #fff;
......@@ -554,4 +555,16 @@ export default {
height: px2rem(92px);
}
}
.ellipsis-1 {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
white-space: nowrap;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
// white-space: nowrap;
}
</style>
<template>
<section class="group-title">
<article v-show="showTitle" class="group-title-title">
<span>{{groupTitle}} </span>
<span v-show="isShowNum"> ({{groupNum}})</span>
<span>{{groupTitle}}</span><span class="group-title-title-ml-6" v-show="isShowNum">{{groupNum}}</span>
</article>
<article v-show="showOrder" class="group-title-order">
<div @click="order(1)" class="group-title-order-item">
......@@ -67,7 +66,7 @@ export default {
&-order {
display: flex;
flex-direction: row;
padding: px2rem(20px) 0 px2rem(15px);
padding: px2rem(20px) 0 px2rem(10px);
font-size: px2rem(13px);
&-item {
position: relative;
......@@ -87,10 +86,13 @@ export default {
color: #449284;
}
&-title {
padding: px2rem(20px) 0 px2rem(15px);
padding: px2rem(20px) 0 px2rem(10px);
font-size: px2rem(18px);
font-weight: 500;
color: #28344C;
&-ml-6 {
margin-left: -6px;
}
}
}
</style>
......@@ -8,11 +8,12 @@
<img @click="toggleDelete" v-show="!showDelete" src="../../images/sousuo/recicle.png" alt="删除">
</section>
<section class="history-labels-item"
<section class="history-labels-item"
v-if="index < 10"
@click="searchAction(item.keyword)"
v-for="(item, index) in allLabels" :key="index" >
<span class="history-labels-item-name">
<span>{{item.keyword}}</span>
<span>
<span class="history-labels-item-name">{{item.keyword}}</span>
<img @click="deleteLabels(false, index)" v-show="showDelete"
src="../../images/sousuo/delete.png" alt=""
>
......
<template>
<section>
<GroupTitle groupTitle="讲师" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder"/>
<div class="font-style">
<div class="teach-opt">
<div class="teach-list">
<div :class="index%2==1?'list-item mr0':'list-item'"
v-for="(item, index) in parmData" :key="index"
@click="goToDetail(item)">
<div class="tea-img" :style="'background:'+ item.bgColor">
<img :src="item.appImageUrl">
<span class="learn-p">{{item.joinNum}}人已学</span>
<!-- <span class="learn-p">{{item.joinNum | yLocalString}}人已学</span> -->
</div>
<div class="tea-txt">
<div class="tea-name" v-html="item.highLightName">{{item.name}}</div>
<div class="tea-position">
{{item.doctorHospital}}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
// import {
// teacher_back,
// fast_sicon,
// hot_teacher,
// screen,
// teacher,
// teacherother
// } from '../../utils/buryingPoint';
import GroupTitle from '@/components/business/group-title';
export default {
components: {
GroupTitle
},
data() {
return {
topTitle: '讲师集',
isScroll: false,
token: '',
list: [],
isShowCount: true,
followCount: 0,
studyCount: 0,
col: 1, //0综合,1人气,2资源数,3姓名首字母
dir: 2, //1:正序 2:逆序
}
},
props: {
parmData: {
type: Array,
default: () => []
},
groupNum: {
type: String,
default: '0'
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
}
},
mounted() {
let _this = this
this.token = this.$route.query.userToken || this.$route.query.token
// this.getUserInfo()
// this.getData();
// window.__getUserInfo = function(parm){
// // alert('in __getUserInfo')
// _this.token = parm.userToken || _this.$route.query.token;
// this.getData();
// }
window.__refresh = function (parm) {
_this.getData();
}
window.addEventListener('scroll', this.handleScroll)
},
computed: {
// groupNum() {
// return this.parmData.length + ''
// }
},
methods: {
handleScroll: function () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 25) {
this.isScroll = true;
} else {
this.isScroll = false;
}
},
//获取版本号
getUserInfo() {
rocNative.getUserInfo({
__funcName: '__getUserInfo'
})
},
goToDetail(item) {
let _this = this;
this.$router.push({
path: '/details',
query: {
id: item.doctorId,
token: _this.token
}
})
// this.appBuryingPointEntrust({
// ...teacher,
// labelId: item.doctorId,
// labelValue: item.doctorName
// })
},
// 埋点
appBuryingPointEntrust(val) {
rocNative.appBuryingPointEntrust(val)
},
//排序
sortFun() {
this.dir = this.dir == 1 ? 2 : 1;
this.getData()
},
randomBg(d) {
for (let i = 0; i < d.length; i++) {
if (i % 4 == 0) {
d[i].bgColor = '#EBF6F1'
} else if (i % 4 == 1) {
d[i].bgColor = '#EDF3FA'
} else if (i % 4 == 2) {
d[i].bgColor = '#F0F0FA'
} else if (i % 4 == 3) {
d[i].bgColor = '#F6EFE6'
}
}
/// console.log(d);
},
getData() {
let _this = this,
para = {
token: _this.token,
setEntry: 'headers'
}
let url = 'contents/courseDoctor/getAllTeacher/orderby/' + _this.col + '/dir/' + _this.dir
this.GET(url, para).then(res => {
if (res.code == '000000') {
_this.list = res.data.teacherList || [];
_this.followCount = res.data.followCount || 0;
_this.studyCount = res.data.studyCount || 0;
if (_this.list.length > 0) {
_this.randomBg(_this.list);
}
}
})
// this.appBuryingPointEntrust({
// ...teacher,
// labelId: _this.dir,
// labelValue: _this.dir === 1 ? '升序' : '降序'
// })
}
}
}
</script>
<style>
body {
background: #fff
}
</style>
<style lang="scss" scoped>
body {
background: #fff
}
@import '../../style/mixin';
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
width: 100%;
overflow: hidden;
@include sc(0.6rem, #666);
}
.teach-opt {
padding: 0 px2rem(15px) px2rem(15px) px2rem(15px);
.teach-title {
font-size: px2rem(18px);
// padding-bottom: px2rem(0px);
color: #333;
}
.teach-list {
margin-top: px2rem(-14px);
overflow: hidden;
}
.opt-span {
span {
color: #449284;
font-size: px2rem(13px);
display: inline-block;
vertical-align: middle;
height: px2rem(10px);
line-height: px2rem(10px);
img {
display: inline-block;
width: px2rem(15px);
height: px2rem(15px);
vertical-align: middle;
}
}
}
.list-item {
width: px2rem(170px);
margin-right: px2rem(5px);
margin-top: px2rem(15px);
border-radius: 0 0 px2rem(3px) px2rem(3px);
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
}
.mr0 {
margin-right: 0
}
.tea-txt {
padding: px2rem(5px) px2rem(7px);
}
.tea-img {
width: px2rem(170px);
height: px2rem(83px);
position: relative;
border-radius: px2rem(3px) px2rem(3px) 0 0;
img {
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px) px2rem(3px) 0 0;
}
.learn-p {
padding-left: px2rem(5px);
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background: #333;
background: -webkit-linear-gradient(left, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
background: -o-linear-gradient(right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
background: -moz-linear-gradient(right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
background: linear-gradient(to right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
color: #fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(20px);
}
}
.tea-name {
padding: 0;
color: #333;
font-size: px2rem(14px);
font-weight: 500;
}
.tea-position {
height: px2rem(30px);
font-size: px2rem(12px);
line-height: px2rem(15px);
color: #666;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
}
.home-header {
height: px2rem(185px);
@include bis('../../images/headerTop.png');
.logo_img {
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
</style>
......@@ -234,6 +234,7 @@ body {
width: px2rem(170px);
margin-right: px2rem(5px);
margin-top: px2rem(15px);
border: 1px solid rgba(0, 0, 0, 0.02);
border-radius: 0 0 px2rem(3px) px2rem(3px);
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
......@@ -307,4 +308,14 @@ body {
text-align: center;
}
}
.ellipsis-1 {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册