没有内容的显示

src/components/question/footer.vue

+<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

+<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

+<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

@@ -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

@@ -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

 <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: [],
     }
   },
 }