css

src/views/enroll/index.vue

@@ -1,7 +1,25 @@
 <template>
   <div class="container">
+    <div class="top">
+      <img src="../../../src/assets/images/public/img.png" alt="" />
+    </div>
+
     <div class="main">
-      <el-form ref="formRef" :model="form" label-width="auto" :rules="rules">
+      <div class="submissionWasSuccessful" style="display: none">
+        <img
+          src="../../../src/assets/images/public/ok.png"
+          alt=""
+          width="60%"
+        />
+        <div class="text">提交成功！</div>
+      </div>
+      <el-form
+        ref="formRef"
+        :model="form"
+        label-width="auto"
+        :rules="rules"
+        style=""
+      >
         <el-form-item label="姓名">
           <el-input v-model="form.name" />
         </el-form-item>
@@ -82,20 +100,42 @@ const degree_options = [
 </script>
 <style scoped lang="scss">
 .container {
-  background: #0a7dfe;
-  padding: 20px;
+  background: #0075ff;
   width: 100vw;
   height: 100vh;
+  .top {
+    width: 100%;
+    img {
+      width: 100%;
+    }
+  }
 
   .main {
-    width: 100%;
+    width: 95%;
+    padding: 50px 20px;
+    box-sizing: border-box;
     background: #ffffff;
-    border-radius: 20px 20px 4px 4px;
-    padding: 20px;
-    margin-top: 200px;
+    border-radius: 20px;
+    margin: 0 auto;
+    margin-top: -2px;
+    height: calc(100vh - 300px);
   }
   .submit_btn {
     width: 100%;
+    background: #0a7dfe;
+    height: 40px;
+    font-size: 16px;
+  }
+  .submissionWasSuccessful {
+    width: 100%;
+    text-align: center;
+    margin-top: 100px;
+    .text {
+      font-size: 20px;
+      font-weight: bold;
+      color: #333333;
+      margin-top: 10px;
+    }
   }
 }
 </style>