新页面、图片等

src/components/question/question-content.vue

+<template>
+  <section class="qeustion-content-wrapper">
+    <article class="public-title">
+      <p class="text">
+        我们建议使用 CDN 引入 Element 的永固在机舱在链接
+        地址上锁定版本，以免将来 Element 升级时受到非兼容
+        性更新的影响。例如，如需锁定版本为 1.4.8如需锁定版
+        本为 1.4.8
+      </p>
+      <commonSpliteLine></commonSpliteLine>
+    </article>
+    <article class="title-wrapper">
+      <span class="type"><span>单选题</span></span>
+      <span class="content">医师接到“危急值”报告后做法错误的？</span>
+    </article>
+    <article class="select-wrapper">
+      <div class="item">
+        <span class="option">A</span>
+        <span class="content">进行分析评估</span>
+      </div>
+      <div class="item">
+        <span class="option">B</span>
+        <span class="content">积极采取救治措施</span>
+      </div>
+      <div class="item">
+        <span class="option">C</span>
+        <span class="content">向上级医师报告</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>
+      <div class="content" v-html="analysisContent"></div>
+    </article>
+  </section>
+</template>
+<script>
+import commonSpliteLine from "@/components/common/common-splite-line";
+export default {
+  components: {
+    commonSpliteLine
+  },
+  data() {
+    return {
+      analysisContent: `商户支付的订单号由商户自定义生成，仅支持使用字 母、数字、中划线-、下划线_、竖线|、
+      星号*这些英文 半角字符的组合，请勿使用汉字或全角等特殊字符。微 信支付要求商户订单号保持唯一性
+      （建议根据当前系统 时间加随机序列来生成订单号）。重新发起一笔支付要 使用原订单号，避免重复支付；
+      已支付过或已调用关 单、撤销（请见后文的API列表）的订单号不能重新发 起支付。
+      <img data-v-5f105ddf="" src="https://files.yunqueyi.com/image/png/protal/project/20200702161856970.png">`
+    };
+  }
+};
+</script>
+<style lang="less" scoped>
+.qeustion-content-wrapper {
+  font-size: 14px;
+  .public-title {
+    .text {
+      padding: 20px 15px;
+      font-size: 14px;
+      color: #373839;
+    }
+  }
+  .title-wrapper {
+    // display: flex;
+    // flex-direction: row;
+    // align-items: center;
+    padding: 20px 15px;
+    .type {
+      position: relative;
+      display: inline-block;
+      width: 66px;
+      // padding: 0 4px;
+      height: 17px;
+      line-height: 17px;
+      margin-right: 6px;
+      border-radius: 2px;
+      background: #5890DD;
+      font-size: 12px;
+      & > span {
+        position: absolute;
+      }
+    }
+
+    .content {
+      font-size: 16px;
+      font-weight: 700;
+      color: #333333;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/router/router.js

@@ -9,6 +9,9 @@ const notFound = r => require.ensure([], () => r(require('../views/not-found')),
 const goodsDetail = r => require.ensure([], () => r(require('../views/goods-detail')), 'goods-detail')
 const purchaseRezult = r => require.ensure([], () => r(require('../views/purchase-rezult')), 'purchase-rezult')
 
+const questionBank = r => require.ensure([], () => r(require('../views/question-bank')), 'question-bank')
+const questionDetail = r => require.ensure([], () => r(require('../views/question-detail')), 'question-detail')
+
 export default [{
   path: '/',
   component: App,
@@ -53,5 +56,13 @@ export default [{
       path: '/prezult',
       component: purchaseRezult
     },
+    {
+      path: '/question-bank',
+      component: questionBank
+    },
+    {
+      path: '/question-detail',
+      component: questionDetail
+    },
   ]
 }]

src/views/question-detail.vue

+<template>
+  <div class="question-detail-wrapper">
+    <header></header>
+    <section class="body">
+      <question-content></question-content>
+    </section>
+    <footer></footer>
+  </div>
+</template>
+<script>
+import questionContent from "@/components/question/question-content";
+export default {
+  components: {
+    questionContent
+  },
+  data() {
+    return {
+      
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+.question-detail-wrapper {
+  
+}
+</style>
\ No newline at end of file