提交 b63d399b 编写于 作者: huangwensu's avatar huangwensu

添加简介中的组件

上级 b4f32f81
<template>
<div class="item-intro-container">
<div class="basic-title">项目介绍</div>
<div class="content">
<div class="text">{{newText}}</div>
<div class="desc" @click="allText">
<span>{{btnText}}</span>
<img v-if="!allTextFlag" src="../../images/down.png"/>
<img v-if="allTextFlag" src="../../images/up.png"/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
textContent: '《健康中国2030规划纲要》提出“以全科医生为重点,加强基层人才队伍建设”。基层全科医生囿于传统固有的书本型以及经验型思维模式,习惯接受临床上习惯接受临床上习惯接受临床上。',
newText: '',
btnText: '详情',
allTextFlag: false
}
},
created() {
},
mounted() {
if(this.textContent.length > 69) {
this.newText = this.textContent.slice(0,69) + "...";
}
},
methods: {
allText() {
if(!this.allTextFlag) {
this.newText = this.textContent;
this.btnText = '收起';
this.allTextFlag = true;
}else {
this.newText = this.textContent.slice(0,69) + "...";;
this.btnText = '详情';
this.allTextFlag = false;
}
}
}
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.item-intro-container {
padding-bottom: px2rem(20px);
margin: px2rem(30px) px2rem(15px) 0px;
border-bottom: px2rem(1px) solid #E7E8E9;
.basic-title {
font-size: px2rem(18px);
line-height: px2rem(18px);
color: #373839;
font-weight: 700;
}
.content {
position: relative;
margin-top: px2rem(16px);
.text {
font-size: px2rem(14px);
color: #676869;
}
.desc {
position: absolute;
right: 0;
bottom: 0;
background: #fff;
z-index: 99;
span {
font-size: px2rem(14px);
color: #449284;
}
img {
width: px2rem(12px);
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="item-leader-container">
<div class="basic-title">项目负责人</div>
<div class="leader-info">
<img src="../../images/video-cover.png"/>
<div class="leader-text">
<span>王荣英</span>
<span>主任医师 教授 硕士生导师</span>
<div class="address">河北医科大学第二医院</div>
</div>
</div>
<div class="content">
<div class="text">{{newText}}</div>
<div class="desc" @click="allText">
<span>{{btnText}}</span>
<img v-if="!allTextFlag" src="../../images/down.png"/>
<img v-if="allTextFlag" src="../../images/up.png"/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
textContent: '全科医疗科主任,主任医师,教授,博士学位,硕士生导师,河北省医学会全科医学分会委员。主要专业特长:常见病、多发病的诊治、预防、康复常见病、多发病的诊治、预防',
newText: '',
btnText: '详情',
allTextFlag: false
}
},
created() {
},
mounted() {
if(this.textContent.length > 66) {
this.newText = this.textContent.slice(0,66) + "...";
}else {
this.newText = this.textContent;
}
},
methods: {
allText() {
if(!this.allTextFlag) {
this.newText = this.textContent;
this.btnText = '收起';
this.allTextFlag = true;
}else {
this.newText = this.textContent.slice(0,66) + "...";;
this.btnText = '详情';
this.allTextFlag = false;
}
}
}
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.item-leader-container {
padding-bottom: px2rem(20px);
margin: px2rem(30px) px2rem(15px) 0px;
border-bottom: px2rem(1px) solid #E7E8E9;
.basic-title {
font-size: px2rem(18px);
line-height: px2rem(18px);
color: #373839;
font-weight: 700;
}
.leader-info {
display: flex;
flex-direction: row;
margin-top: px2rem(16px);
img {
display: inline-block;
width: px2rem(44px);
height: px2rem(44px);
border-radius: 50%;
}
.leader-text {
margin-left: px2rem(16px);
span {
font-size: px2rem(16px);
color: #676869;
}
span:first-child {
font-size: px2rem(16px);
color: #373839;
font-weight: 700;
}
.address {
margin-top: px2rem(5px);
font-size: px2rem(13px);
color: #979899;
}
}
}
.content {
position: relative;
margin-top: px2rem(16px);
.text {
font-size: px2rem(14px);
color: #676869;
}
.desc {
position: absolute;
right: 0;
bottom: 0;
background: #fff;
z-index: 99;
span {
font-size: px2rem(14px);
color: #449284;
}
img {
width: px2rem(12px);
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="basic-container">
<div class="learn-know-container">
<div class="basic-title">学习须知</div>
<div class="content">
<span>1、必须在该项目页内学完所有课程,平台其它栏目课程进度不计入本项目; </span>
......@@ -14,7 +14,7 @@ export default {
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.basic-container {
.learn-know-container {
margin: px2rem(30px) px2rem(15px) px2rem(20px);
.basic-title {
font-size: px2rem(18px);
......
......@@ -33,15 +33,24 @@
<div class="intro-content">
<BasicInfo></BasicInfo>
<LearnKnow></LearnKnow>
<CommonSpliteLine></CommonSpliteLine>
<ItemIntro></ItemIntro>
<ItemLeader></ItemLeader>
</div>
<div class="catalogue-content">
<CellListDetail
v-if="visibleFlag == 1"
:projectComponent="projectComponentDTOS"
:paramData="contentList"
:moduleName="moduleName"
:actionList="actionList"
:detailNum="detailNum"
:courseRequire="courseRequire"/>
</div>
</div>
<CommonSpliteLine></CommonSpliteLine>
<CertShow v-if="projectStatus === 2"></CertShow>
<CellListDetail v-if="visibleFlag == 1" :projectComponent="projectComponentDTOS" :paramData="contentList" :moduleName="moduleName" :actionList="actionList" :detailNum="detailNum" :courseRequire="courseRequire"></CellListDetail>
<NoPermContent v-if="visibleFlag == 2"></NoPermContent>
<!-- <CertShow v-if="projectStatus === 2"></CertShow> -->
<!-- <NoPermContent v-if="visibleFlag == 2"></NoPermContent> -->
</div>
<Loading v-show="showLoading"/>
......@@ -51,21 +60,23 @@
import CommonNavbar from "@/components/common/common-navbar";
import CommonDescription from "@/components/common/common-description";
import CommonSpliteLine from "@/components/common/common-splite-line";
import CommonTitle from "@/components/common/common-title";
import CertShow from "@/components/business/cert-show";
// import CommonTitle from "@/components/common/common-title";
// import CertShow from "@/components/business/cert-show";
// import CellListItem from "@/components/business/cell-list-item";
import CellListDetail from "@/components/business/cell-list-detail";
import NoPermContent from "@/components/business/no-perm-content";
import CommonBannerVideo from "@/components/common/common-banner-video";
// import NoPermContent from "@/components/business/no-perm-content";
// import CommonBannerVideo from "@/components/common/common-banner-video";
import CommonTcPlayer from "@/components/common/common-tcplayer";
import Loading from "@/components/common/common-loading";
import { mapGetters, mapActions } from "vuex";
import vueFilters from '@/utils/filter';
// import PopNotice from "@/components/business/pop-notice";
// import NoticeItem from "@/components/business/notice-item";
import CmeStep from "@/components/cme/cme-step";
import BasicInfo from "@/components/cme/basic-info";
import LearnKnow from "@/components/cme/learn-know";
import ItemIntro from "@/components/cme/item-intro";
import ItemLeader from "@/components/cme/item-leader";
import { mapGetters, mapActions } from "vuex";
import vueFilters from '@/utils/filter';
export default {
data() {
......@@ -125,17 +136,19 @@ export default {
CommonNavbar,
CommonDescription,
CommonSpliteLine,
CommonTitle,
CertShow,
// CommonTitle,
// CertShow,
// CellListItem,
CellListDetail,
NoPermContent,
CommonBannerVideo,
// NoPermContent,
// CommonBannerVideo,
Loading,
CommonTcPlayer,
CmeStep,
BasicInfo,
LearnKnow
LearnKnow,
ItemIntro,
ItemLeader
},
computed: {
...mapGetters(["userInfo"])
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册