美化页面

src/views/Edit.vue

@@ -7,15 +7,15 @@
         </el-breadcrumb>
         <div class="content">
             <div>
-                <h1>标题</h1>
+                <h2>标题</h2>
                 <div>{{title?title:"None"}}</div>
             </div>
             <div>
-                <h1>题型</h1>
+                <h2>题型</h2>
                 <div>{{type}}</div>
             </div>
             <div>
-                <h1>难度</h1>
+                <h2>难度</h2>
                 <div>
                     <el-select v-model="weight" placeholder="请选择">
                         <el-option
@@ -28,11 +28,11 @@
                 </div>
             </div>
             <div>
-                <h1>题干</h1>
+                <h2>题干</h2>
                 <div v-html="compileMarkDown(stem)"></div>
             </div>
             <div v-if="type === 'choice' || type === 'multiple_choice'">
-                <h1>选项</h1>
+                <h2>选项</h2>
                 <div>
                     <div v-for="[option,ans] in (options ? Object.entries(options) : null)">
                         {{option}}. <span v-html="ans" style="display: inline-block"></span>
@@ -40,12 +40,14 @@
                 </div>
             </div>
             <div>
-                <h1>知识点</h1>
+                <h2>知识点</h2>
                 <div>
                     <el-tag
+                            style="margin: 5px"
                             :key="k_name"
                             v-for="k_name in knowledgeName"
                             closable
+                            size="small"
                             :disable-transitions="false"
                             @close="handleClose(k_name)">
                         {{k_name}}
@@ -65,13 +67,13 @@
                                  @check="check"
                         >
                         </el-tree>
-                        <el-button size="mini" @click="confirmTree">确定</el-button>
+                        <el-button size="mini" @click="confirmTree" type="primary">确定</el-button>
                         <el-button size="mini" type="primary" slot="reference"> + </el-button>
                     </el-popover>
                 </div>
             </div>
             <div v-if="type !== 'code'">
-                <h1>答案</h1>
+                <h2>答案</h2>
                 <div v-if="type === 'blank'">
                     <div>
                         <div v-for="[blank,ans] in (blanks ? Object.entries(blanks) : null)">
@@ -82,7 +84,7 @@
                 <div v-else v-html="compileMarkDown(answer)"></div>
             </div>
             <div v-if="type === 'code'">
-                <h1>输入输出</h1>
+                <h2>输入输出</h2>
                 <div>
                     <div v-for="([input,output],index) in (inputOutputMapping ? Object.entries(inputOutputMapping) : null)">
                         <span style="font-weight: 700">Input {{index}}:</span>
@@ -93,23 +95,23 @@
                 </div>
             </div>
             <div v-if="type === 'code'">
-                <h1>时间限制</h1>
+                <h2>时间限制</h2>
                 <div>{{millisecondLimit}} ms</div>
             </div>
             <div v-if="type === 'code'">
-                <h1>内存限制</h1>
+                <h2>内存限制</h2>
                 <div>{{memoryLimit}} KB</div>
             </div>
             <div>
-                <h1>创建时间</h1>
+                <h2>创建时间</h2>
                 <div>{{createdTime}}</div>
             </div>
             <div>
-                <h1>修改时间</h1>
+                <h2>修改时间</h2>
                 <div>{{lastModifiedTime}}</div>
             </div>
             <div>
-                <h1>分析</h1>
+                <h2>分析</h2>
                 <div v-html="compileMarkDown(analysis)"></div>
             </div>
         </div>

src/views/Home.vue

@@ -110,6 +110,9 @@
 </script>
 
 <style scoped>
+    .box-card {
+        margin-bottom: 10px;
+    }
     .card-head {
         display: flex;
         justify-content: left;