diff --git a/ruoyi-admin/src/main/resources/templates/system/elExam/onlineExam/toExam.html b/ruoyi-admin/src/main/resources/templates/system/elExam/onlineExam/toExam.html
index ce88f46..414cbe3 100644
--- a/ruoyi-admin/src/main/resources/templates/system/elExam/onlineExam/toExam.html
+++ b/ruoyi-admin/src/main/resources/templates/system/elExam/onlineExam/toExam.html
@@ -4,6 +4,7 @@
     <th:block th:include="include :: header('考试')" />
     <th:block th:include="include :: select2-css" />
     <th:block th:include="include :: datetimepicker-css" />
+    <th:block th:include="include :: element-css" />
 </head>
 <style>
     .select2-container--bootstrap.select2-container--disabled .select2-selection, .select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
@@ -19,93 +20,108 @@
         margin: 5px 0 0 6px;
         padding: 0 6px;
     }
+    .pre-exam div {
+
+        line-height: 42px;
+        color: #555555;
+    }
 </style>
 <body>
-<div class="main-content">
-    <form class="form-horizontal" id="form-user-edit" th:object="${exam}">
-        <input name="id"  type="hidden"  th:field="*{id}" />
-        <div class="row">
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label">考试名称：</label>
-                    <div class="col-sm-8">
-                        <span>[[${exam.title}]]</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label">考试时长：</label>
-                    <div class="col-sm-8">
-                        <div class="input-group">
-                            <span>[[${exam.totalTime}]]分钟</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-        <div class="row">
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label">试卷总分：</label>
-                    <div class="col-sm-8">
-                        <div class="input-group">
-                            <span>[[${exam.totalScore}]]</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label">及格分数：</label>
-                    <div class="col-sm-8">
-                        <span>[[${exam.qualifyScore}]]</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label">考试描述：</label>
-                    <div class="col-sm-8">
-                        <span>[[${exam.content}]]</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label">开放类型：</label>
-                    <div class="col-sm-8">
-                        <select name="sex" disabled class="form-control m-b" th:with="type=${@dict.getType('sys_open_type')}">
-                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{openType}"></option>
-                        </select>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-    </form>
-</div>
-<div class="row">
-    <div class="col-sm-offset-5 col-sm-10">
-        <button type="button" class="btn btn-sm btn-primary" onclick="pass()"><i class="fa fa-check"></i>开始考试</button>&nbsp;
-        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>返回</button>
+<div class="main-content" id="app">
+    <div class="app-container">
+        <el-row :gutter="24">
+
+            <el-col :span="24" style="margin-bottom: 20px">
+
+                <el-alert
+                        title="点击`开始考试`后将自动进入考试，请诚信考试！"
+                        type="error"
+                        style="margin-bottom: 10px"
+                >
+                </el-alert>
+
+                <el-card class="pre-exam">
+                    <div><strong>考试名称：</strong>[[${ exam.title }]]</div>
+                    <div><strong>考试时长：</strong>[[${ exam.totalTime }]]分钟</div>
+                    <div><strong>试卷总分：</strong>[[${ exam.totalScore }]]分</div>
+                    <div><strong>及格分数：</strong>[[${ exam.qualifyScore }]]分</div>
+                    <div><strong>考试描述：</strong>[[${ exam.content }]]</div>
+                    <div><strong>开放类型：</strong>[[${ exam.openType}]]</div>
+
+                </el-card>
+
+            </el-col>
+
+            <el-col :span="24">
+
+                <el-button :loading="loading" type="primary" icon="el-icon-caret-right" onclick="pass()">
+                    开始考试
+                </el-button>
+
+                <el-button onclick="closeItem()">
+                    返回
+                </el-button>
+
+            </el-col>
+
+        </el-row>
     </div>
 </div>
 <th:block th:include="include :: footer" />
 <th:block th:include="include :: select2-js" />
+<th:block th:include="include :: element-js" />
 <th:block th:include="include :: datetimepicker-js" />
 <script type="text/javascript">
 
+var app = new Vue({
+    el: '#app',
+    data:{
+        detailData: {},
+        postForm: {
+            examId: '',
+            password: ''
+        },
+        rules: {
+            password: [
+                { required: true, message: '考试密码不能为空！' }
+            ]
+        },
+
+        loading: false
+    },
 
+    created() {
+        // this.postForm.examId = this.$route.params.examId
+        // this.fetchData()
+        console.log('[[${exam.id}]]')
+    },
+    methods: {
+
+        fetchData() {
+            fetchDetail(this.postForm.examId).then(response => {
+                this.detailData = response.data
+            })
+        },
+        handleCreate() {
+            const that = this
+            this.loading = true
+
+            createPaper(this.postForm).then(response => {
+                console.log(response)
+
+                if (response.code === 0) {
+                    setTimeout(function () {
+                        this.loading = false
+                        that.dialogVisible = false
+                        that.$router.push({name: 'StartExam', params: {id: response.data.id}})
+                    }, 1000)
+                }
+            }).catch(() => {
+                this.loading = false
+            })
+        },
+    }
+})
 
 </script>
 </body>
