提交 354a53c3 编写于 作者: guangjun.yang's avatar guangjun.yang

讲师样式优化

上级 4dd32193
<template> <template>
<div class="teacter-intro-container"> <div class="teacter-intro-container">
<div class="basic-title">讲师介绍</div> <div class="basic-title">讲师介绍</div>
<div class="leader-info" v-for="(item,index) in doctorList" :key="index"> <div class="leader-info" v-for="(item,index) in current" :key="index">
<img :src="item.appImageUrl"/> <img :src="item.appImageUrl" />
<div class="leader-text"> <div class="leader-text">
<div class="leader-con"> <div class="leader-con">
<span>{{item.name}}</span> <span>{{item.name}}</span>
<span class="leader-title">{{item.title}}</span> <span class="leader-title">{{item.title}}</span>
</div>
<div class="address">{{item.hospital}}</div>
</div>
</div> </div>
<div class="address">{{item.hospital}}</div>
</div>
</div> </div>
<div v-show="doctorList.length > 1" class="toggle-btn" @click="toggle">
<span class="btn">{{ isUp ? '展开更多' : '向上收起'}}</span>
<img v-if="isUp" src="../../images/cme/arrow-grey-down.png" />
<img v-if="!isUp" src="../../images/cme/arrow-grey-up.png" />
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
doctorList: { doctorList: {
type: Array, type: Array,
default: () => [] default: () => []
}
},
data() {
return {
}
},
created() {
},
mounted() {
},
methods: {
} }
} },
data() {
return {
isUp: true,
one: [],
all: [],
current: []
};
},
created() {},
mounted() {
this.one = this.doctorList.slice(0, 1);
this.current = this.one;
this.all = this.doctorList.slice(0);
},
methods: {
toggle() {
this.isUp = !this.isUp;
if (this.isUp) {
this.current = this.one;
} else {
this.current = this.all;
}
}
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.teacter-intro-container { .teacter-intro-container {
margin: 30px 15px 0px; margin: 30px 15px 0px;
.basic-title { .basic-title {
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 18px;
color: #373839; color: #373839;
font-weight: 700; font-weight: 700;
}
.leader-info {
display: flex;
flex-direction: row;
margin-top: 16px;
padding-bottom: 16px;
img {
display: inline-block;
width: 44px;
height: 44px;
border-radius: 50%;
} }
.leader-info { .leader-text {
flex: 1;
width: 100px;
margin-left: 16px;
margin-top: 6px;
.leader-con {
line-height: 14px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: 16px; white-space: nowrap;
padding-bottom: 16px; span {
img { font-size: 16px;
display: inline-block; color: #676869;
width: 44px; }
height: 44px; span:first-child {
border-radius: 50%; font-size: 16px;
color: #373839;
font-weight: 700;
line-height: 1.1;
} }
.leader-text { .leader-title {
flex: 1; width: 220px;
width: 100px; overflow: hidden;
margin-left: 16px; text-overflow: ellipsis;
margin-top: 6px; white-space: nowrap;
.leader-con { line-height: 16px;
line-height: 14px; margin-left: 10px;
display: flex;
flex-direction: row;
white-space: nowrap;
span {
font-size: 16px;
color: #676869;
}
span:first-child {
font-size: 16px;
color: #373839;
font-weight: 700;
line-height: 1.1;
}
.leader-title {
width: 220px;
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
line-height: 16px;
margin-left: 10px;
}
}
.address {
margin-top: 5px;
font-size: 13px;
color: #979899;
width: 240px;
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
} }
}
.address {
margin-top: 5px;
font-size: 13px;
color: #979899;
width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.toggle-btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 20px;
& > span {
font-size: 14px;
color: #979899;
font-weight: 400;
}
& > img {
width: 15px;
height: 15px;
} }
}
} }
</style> </style>
\ No newline at end of file
...@@ -431,7 +431,7 @@ export default { ...@@ -431,7 +431,7 @@ export default {
this.GET(`portal/shareParam/queryByUuid`, param).then(res => { this.GET(`portal/shareParam/queryByUuid`, param).then(res => {
if (res.code == "000000") { if (res.code == "000000") {
this.shareParam = JSON.parse(res.data || "{}"); this.shareParam = JSON.parse(res.data || "{}");
this.projectId = this.shareParam.projectId || 1781; // 178 this.projectId = this.shareParam.projectId || 178; // 178
this.getProjectParticularsV2(); this.getProjectParticularsV2();
console.log('queryByUuid', res); console.log('queryByUuid', res);
} }
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册