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

分隔线问题

上级 95371399
<template> <template>
<div class="basic-container"> <div class="basic-container">
<div class="basic-title">基本信息</div> <div class="basic-title">基本信息</div>
<div v-if="projectNo" class="content"> <div v-if="projectNo" class="content">
<span>项目编号</span> <span>项目编号</span>
<span>{{projectNo}}</span> <span>{{projectNo}}</span>
</div>
<div class="content">
<span>学习收获</span>
<span>{{level}} | {{projectCredit}}</span>
</div>
<div class="content">
<span>申请范围</span>
<span>{{scope}}</span>
</div>
<div class="remind" v-if="remind">
<span>{{remind}}</span>
</div>
<div class="content">
<span>起止时间</span>
<span>{{startDate | formatTime('{y}.{m}.{d}')}}{{endDate | formatTime('{y}.{m}.{d}')}}</span>
</div>
<div class="content">
<span>发起机构</span>
<span>{{organName}}</span>
</div>
</div> </div>
<div class="content">
<span>学习收获</span>
<span>
{{level}}
<b class="split"></b>
{{projectCredit}}
</span>
<!-- <span>{{level}} | {{projectCredit}}</span> -->
</div>
<div class="content">
<span>申请范围</span>
<span>{{scope}}</span>
</div>
<div class="remind" v-if="remind">
<span>{{remind}}</span>
</div>
<div class="content">
<span>起止时间</span>
<span>{{startDate | formatTime('{y}.{m}.{d}')}}{{endDate | formatTime('{y}.{m}.{d}')}}</span>
</div>
<div class="content">
<span>发起机构</span>
<span>{{organName}}</span>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
projectNo: { projectNo: {
type: String, type: String,
default: "GWKX-20180326-42843" default: "GWKX-20180326-42843"
}, },
credit: { credit: {
type: String, type: String,
default: "" default: ""
}, },
level: { level: {
type: String, type: String,
default: "" default: ""
}, },
scope: { scope: {
type: String, type: String,
default: "" default: ""
}, },
startDate: { startDate: {
type: Number, type: Number,
default: "" default: ""
}, },
endDate: { endDate: {
type: Number, type: Number,
default: "" default: ""
}, },
organName: { organName: {
type: String, type: String,
default: "" default: ""
}, },
remind: { remind: {
type: String, type: String,
default: "" default: ""
}, },
projectCredit: { projectCredit: {
type: String, type: String,
default: "" default: ""
}
} }
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../style/mixin"; @import "../../style/mixin";
.basic-container { .basic-container {
padding-bottom: px2rem(20px); padding-bottom: px2rem(20px);
margin: px2rem(30px) px2rem(15px) 0px; margin: px2rem(30px) px2rem(15px) 0px;
border-bottom: px2rem(1px) solid #E7E8E9; border-bottom: px2rem(1px) solid #e7e8e9;
.basic-title { .basic-title {
font-size: px2rem(18px); font-size: px2rem(18px);
line-height: px2rem(18px); line-height: px2rem(18px);
color: #373839; color: #373839;
font-weight: 700; font-weight: 700;
}
.content {
margin-top: px2rem(16px);
height: px2rem(16px);
line-height: px2rem(0px);
span {
display: inline-block;
font-size: px2rem(14px);
.split {
display: inline-block;
position: relative;
top: px2rem(2px);
left: 0;
width: px2rem(1px);
height: px2rem(13px);
margin: 0 px2rem(2px);
// line-height: px2rem(20px);
background: #676869;
}
}
span:first-child {
color: #979899;
}
span:last-child {
margin-left: px2rem(15px);
color: #676869;
} }
.content { }
margin-top: px2rem(16px); .remind {
height: px2rem(16px); line-height: px2rem(14px);
line-height: px2rem(0px); margin-top: px2rem(10px);
span { span {
display: inline-block; position: relative;
font-size: px2rem(14px); display: inline-block;
} padding: px2rem(5px) px2rem(10px);
span:first-child { margin-left: px2rem(78px);
color: #979899; font-size: px2rem(14px);
} color: #fb5b52;
span:last-child { background: #fceeed;
margin-left: px2rem(15px); border-radius: px2rem(4px);
color: #676869;
}
} }
.remind { span:after {
line-height: px2rem(14px); content: "";
margin-top: px2rem(10px); position: absolute;
span { left: px2rem(10px);
position: relative; bottom: px2rem(20px);
display: inline-block; width: 0;
padding: px2rem(5px) px2rem(10px); height: 0;
margin-left: px2rem(78px); border-width: 0 px2rem(8px) px2rem(8px);
font-size: px2rem(14px); border-style: solid;
color: #FB5B52; border-color: transparent transparent #fceeed;
background: #FCEEED;
border-radius: px2rem(4px);
}
span:after {
content: "";
position: absolute;
left: px2rem(10px);
bottom: px2rem(20px);
width: 0;
height: 0;
border-width: 0 px2rem(8px) px2rem(8px);
border-style: solid;
border-color: transparent transparent #FCEEED;
}
} }
}
} }
</style> </style>
\ No newline at end of file
...@@ -188,7 +188,7 @@ export default { ...@@ -188,7 +188,7 @@ export default {
inScope: 0, // 是否在范围内判断 inScope: 0, // 是否在范围内判断
projectCredit: "", // 学分 projectCredit: "", // 学分
certificateId: "0", certificateId: "0",
cmeType: 2, // 1: 自营项目; 2: 中华医学会二类 cmeType: 1, // 1: 自营项目; 2: 中华医学会二类
examBtnUrl: '', // 考试按钮跳转连接 examBtnUrl: '', // 考试按钮跳转连接
firstIntoExam: false, // true弹框,是否首次进入考试,用于首次跳转弹框提示,只跟项目和人员有关 firstIntoExam: false, // true弹框,是否首次进入考试,用于首次跳转弹框提示,只跟项目和人员有关
jumpToContents: false, // 是否跳转到目录 jumpToContents: false, // 是否跳转到目录
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册