增加考试介绍页面

src/components/AppContainer.vue

@@ -6,6 +6,7 @@
     <div class="app-container-bd">
       <slot></slot>
     </div>
+    <slot name="footer"></slot>
   </div>
 </template>
 
@@ -18,6 +19,8 @@ export default {
 
 <style lang="scss">
 .app-container {
+  display: flex;
+  flex-direction: column;
   height: 100%;
   padding: 30px;
   background-color: #fff;
@@ -34,5 +37,13 @@ export default {
   line-height: 1;
 }
 .app-container-bd {
+  flex: 1;
+}
+.app-container-ft {
+  background-color: #fff;
+  position: sticky;
+  bottom: 0;
+  padding-top: 30px;
+  border-top: 1px solid #f1f1f1;
 }
 </style>

src/pages/exam/index.vue

+<template>
+  <app-container title="真题实战介绍">
+    <div class="exam">
+      <div class="item">
+        <p>
+          <span><b>考试时间：90分钟</b></span>
+          <span><b>考试通过：80分</b></span>
+          <span><b>总分：100分</b></span>
+        </p>
+        <p>试题类型：单项选择题、多项选择题、判断题和案例题，全部为客观题。</p>
+      </div>
+      <div class="item">
+        <p><b>考试说明</b></p>
+        <p>1.考试目的：考核道路运输企业主要负责人和安全生产管理人员对安全生产管理知识掌握程度</p>
+        <p>
+          2.考核范围：道路运输安全生产相关法律法规及标准规范、道路运输企业安全生产主体责任、道路运输企业安全管理知识、道路运输安全生产实务等内容。
+        </p>
+        <p>3.考试试卷：按照考试大纲的考点出题，精准模拟。</p>
+      </div>
+      <div class="item">
+        <p><b>选择角色</b></p>
+        <el-radio-group v-model="role">
+          <el-radio :label="0">管理人员</el-radio>
+          <el-radio :label="1">安全人员</el-radio>
+        </el-radio-group>
+      </div>
+      <div class="item">
+        <p><b>试卷组卷比例见下表</b></p>
+        <img src="../../assets/images/exam_table.png" style="max-width: 100%" />
+      </div>
+    </div>
+    <template #footer>
+      <div class="app-container-ft"><el-button type="primary">开始考试</el-button></div>
+    </template>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/AppContainer'
+export default {
+  components: { AppContainer },
+  data() {
+    return {
+      role: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.exam {
+  .item {
+    margin-bottom: 20px;
+    line-height: 30px;
+  }
+  .item span {
+    margin-right: 20px;
+  }
+}
+</style>

src/pages/testExam/index.vue

 <template>
-  <div class="app-container">
-    <div class="title">考前摸底介绍</div>
+  <app-container title="考前摸底介绍">
     <div class="desc-exam">
       <p>考试时间20分钟。</p>
       <p>考试题目共22题，分四部分：单选题共8题，多选题共8题，判断题共5题，案例题共1题。</p>
     </div>
-    <div class="exam-btn-box">
-      <div class="exam-btn">开始考试</div>
-    </div>
-  </div>
+    <template #footer>
+      <div class="app-container-ft"><el-button type="primary">开始考试</el-button></div>
+    </template>
+  </app-container>
 </template>
 
 <script>
+import AppContainer from '@/components/AppContainer'
 export default {
+  components: { AppContainer },
+  data() {
+    return {}
+  }
 }
 </script>
 <style lang="scss" scoped>
-.app-container{
-  position: relative;
-  height: 100%;
-  padding: 30px;
-  background-color: #fff;
-  -webkit-border-radius: 8px;
-  -moz-border-radius: 8px;
-  border-radius: 8px;
-  box-sizing: border-box;
-  .title{
-    border-bottom: 1px solid #ccc;
-    font-size: 18px;
-    color: #222222;
-    line-height: 45px;
-  }
-  .desc-exam{
-    min-height: 350px;
-    // border-bottom: 1px solid #ccc;
-    p{
-      margin-top: 20px;
-      font-size: 14px;
-      color: #333333;
-      line-height: 20px;
-    }
-  }
-  .exam-btn-box{
-    box-sizing: border-box;
-    width: 100%;
-    padding-top: 30px;
-    border-top: 1px solid #ccc;
-    .exam-btn{
-      text-align: center;
-      line-height: 40px;
-      width: 116px;
-      height: 40px;
-      background: #C01540;
-      border-radius: 4px;
-      font-size: 14px;
-      font-weight: bold;
-      color: #FFFFFF;
-    }
+.desc-exam {
+  p {
+    margin-bottom: 20px;
+    line-height: 20px;
+    color: #333;
   }
 }
 </style>

src/router/routes.js

@@ -36,7 +36,12 @@ const examAnswer = [
   /* 考前摸底 */
   {
     path: '/testExam',
-    component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/testExam')
+    component: () => import(/* webpackChunkName: "exam" */ '@/pages/testExam')
+  },
+  // 真题实战
+  {
+    path: '/exam',
+    component: () => import(/* webpackChunkName: "exam" */ '@/pages/exam')
   }
 ]
 

src/style.scss

@@ -64,10 +64,6 @@ em,
 i {
   font-style: normal;
 }
-strong,
-b {
-  font-weight: normal;
-}
 img {
   border: none;
 }