Skip to content

P
pica-annual-summary
提交 ffbb5af6 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

没有内容的显示

上级 ff9e00e2
隐藏空白字符变更
内嵌 并排
正在显示 包含 275 行增加 和 18 行删除
src/components/question/footer.vue
浏览文件 @ ffbb5af6
<template>
<section class="qeustion-footer-wrapper">
<article class="left">
<img src="../../images/question/analysis.png" alt="">
<span class="text">解析</span>
</article>
<article class="center">
<img src="../../images/question/heart-b.png" alt="">
<span class="text">收藏</span>
</article>
<article class="right">
<span class="pre disabled">上一题</span>
<span class="next">下一题</span>
</article>
</section>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.qeustion-footer-wrapper {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
display: flex;
height: 60px;
flex-direction: row;
justify-content: space-between;
align-items: center;
background: #ffffff;
font-size: 14px;
box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
padding: 0 5px 0 15px;
.left {
display: flex;
flex-direction: column;
margin-left: 10px;
align-items: center;
& > img {
width: 18px;
height: 18px;
}
.text {
font-size: 12px;
}
}
.center {
display: flex;
flex-direction: column;
align-items: center;
& > img {
width: 18px;
height: 18px;
}
.text {
font-size: 12px;
}
}
.right {
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
width: 210px;
color: #373839;
span {
display: inline-block;
width: 100px;
height: 40px;
line-height: 40px;
&.pre {
border-radius: 20px 0 0 20px;
border: 1px solid #979899;
&.disabled {
color: #979899;
}
}
&.next {
border-radius: 0 20px 20px 0;
border: 1px solid #979899;
border-left: 0px;
}
}
}
}
</style>
\ No newline at end of file
src/components/question/header.vue
浏览文件 @ ffbb5af6
<template>
<section class="question-header-wrapper">
<img class="left" src="../../images/left-array-black.png" alt="">
<span class="center">第一篇 基础知识</span>
<div class="right">
<span class="c-num">1</span>/<span class="totall">33</span>
</div>
</section>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.question-header-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 28px;
margin: 0 15px;
.left {
height: 25px;
}
.center {
height: 40px;
line-height: 40px;
font-size: 17px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #000000;
padding: 0 10px;
}
.right {
font-size: 14px;
span {
&.c-num {
color: #373839;
font-weight: 700;
}
&.totall {
color: #979899;
}
}
}
}
</style>
\ No newline at end of file
src/components/question/no-content.vue 0 → 100644
浏览文件 @ ffbb5af6
<template>
<div class="no-question-wrapper">
<img v src="../../images/question/correct.png" alt="">
<span></span>
</div>
</template>
<script>
export default {
props: {
type: Number | String,
default: 1
}
}
</script>
<style lang="less" scoped>
.no-question-wrapper {
padding-top: 100px;
}
</style>
\ No newline at end of file
src/components/question/question-content.vue
浏览文件 @ ffbb5af6
......@@ -10,7 +10,7 @@
<commonSpliteLine></commonSpliteLine>
</article>
<article class="title-wrapper">
<span class="type"><span>单选题</span></span>
<span class="type multi"><span>多选题</span></span>
<span class="content">医师接到“危急值”报告后做法错误的？</span>
</article>
<article class="select-wrapper">
......@@ -19,21 +19,28 @@
<span class="content">进行分析评估</span>
</div>
<div class="item">
<span class="option">B</span>
<!-- <span class="option">B</span> -->
<img src="../../images/question/error.png" alt="">
<span class="content">积极采取救治措施</span>
</div>
<div class="item">
<span class="option">C</span>
<span class="content">向上级医师报告</span>
<!-- <span class="option">C</span> -->
<img src="../../images/question/correct.png" alt="">
<span class="content select">向上级医师报告</span>
</div>
<div class="item">
<span class="option">D</span>
<span class="content">查看病理，了解病史</span>
</div>
</article>
<article class="answer">正确答案：D</article>
<article class="analysis">
<p>解析</p>
<article class="c-btn-wrapper">
<van-button size="large" round color="#449284">确 认</van-button>
</article>
<article class="answer-wrapper">
<span class="content">正确答案：D</span>
</article>
<article class="analysis-wrapper">
<span class="title">解析</span>
<div class="content" v-html="analysisContent"></div>
</article>
</section>
......@@ -44,6 +51,12 @@ export default {
components: {
commonSpliteLine
},
props: {
questionObj: {
type: Array,
default: () => {}
}
},
data() {
return {
analysisContent: `商户支付的订单号由商户自定义生成，仅支持使用字 母、数字、中划线-、下划线_、竖线|、
......@@ -52,7 +65,7 @@ export default {
已支付过或已调用关 单、撤销（请见后文的API列表）的订单号不能重新发 起支付。
<img data-v-5f105ddf="" src="https://files.yunqueyi.com/image/png/protal/project/20200702161856970.png">`
};
}
},
};
</script>
<style lang="less" scoped>
......@@ -66,9 +79,6 @@ export default {
}
}
.title-wrapper {
// display: flex;
// flex-direction: row;
// align-items: center;
padding: 20px 15px;
.type {
position: relative;
......@@ -76,7 +86,6 @@ export default {
left: 0;
display: inline-block;
width: 44px;
// padding: 0 4px;
height: 18px;
line-height: 12px;
margin-right: 4px;
......@@ -89,6 +98,9 @@ export default {
left: 4px;
color: #ffffff;
}
&.multi {
background: #E6A23C;
}
}
.content {
......@@ -98,8 +110,82 @@ export default {
}
}
.select-wrapper {
padding: 20px 15px;
padding: 0 15px;
.item {
display: flex;
// height: 40px;
line-height: 1.2;
font-size: 16px;
align-items: center;
padding: 10px 0;
.option {
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid #C7C8C9;
border-radius: 50%;
margin-right: 10px;
color: #373839;
}
& > img {
width: 18px;
height: 18px;
margin-right: 10px;
}
.select {
color: #449284;
}
}
}
.c-btn-wrapper {
padding: 20px 15px;
}
.answer-wrapper {
margin: 20px 15px;
border-radius: 6px;
height: 40px;
line-height: 40px;
background: #F8F9FA;
.content {
margin: 10px 0;
height: 16px;
line-height: 1;
font-size: 16px;
font-weight: 700;
padding: 0 15px;
}
}
.analysis-wrapper {
padding: 15px 15px 30px;
.title {
display: flex;
height: 16px;
line-height: 1;
margin-bottom: 15px;
font-size: 16px;
font-weight: 700;
color: #373839;
&::before {
display: inline-block;
content: '';
height: 16px;
width: 3px;
margin-right: 9px;
background: #F68367;
border-radius: 3px;
}
}
.content {
font-size: 14px;
font-weight: 400;
color: #373839;
& > img {
width: 100% !important;
}
}
}
}
</style>
\ No newline at end of file
src/style/global.less
浏览文件 @ ffbb5af6
......@@ -184,3 +184,10 @@
width: 40px !important;
height: 40px !important;
}
.van-button--large {
height: 44px !important;
line-height: 42px !important;
}
.van-button__text {
font-weight: 700 !important;
}
\ No newline at end of file
src/views/question-detail.vue
浏览文件 @ ffbb5af6
<template>
<div class="question-detail-wrapper">
<header></header>
<QuestionHeader></QuestionHeader>
<section class="body">
<question-content></question-content>
<no-question type="listType"></no-question>
</section>
<footer></footer>
<QuestionFooter></QuestionFooter>
<div style="padding-bottom: 60px;"></div>
</div>
</template>
<script>
import questionContent from "@/components/question/question-content";
import QuestionHeader from "@/components/question/header";
import QuestionContent from "@/components/question/question-content";
import QuestionFooter from "@/components/question/footer";
export default {
components: {
questionContent
QuestionHeader,
QuestionContent,
QuestionFooter,
},
data() {
return {
listType: 1, // 1: 正常做题; 2: 免费体验; 3: 错题集; 4: 收藏夹
questionList: [],
}
},
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或