项目优化

src/components/layout/components/slider.vue

@@ -38,7 +38,7 @@ export default {
       tempRoute: {},
       navList: [
         { title: '首页', path: '/index' },
-        { title: '专业设置', path: '/profession' },
+        { title: '儿童教育硕士', path: '/profession' },
         { title: '报名申请', path: '/my' },
         { title: '最新动态', path: '/news' },
         { title: '联系我们', path: '/contact' }

src/components/layout/components/tab.vue

@@ -65,7 +65,7 @@ export default {
 <style lang="scss" scoped>
 .tab {
   height: 40px;
-  background: #af1b40ff;
+  background: #af1b40;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #fff;

src/components/leavex/index.vue

 <template>
-  <div
-    class="homepage_message"
-    :style="{'min-height': leavheight + 'px', backgroundImage:'url(' + imgUrlBg + ')' }"
-  >
-    <div class="homepage_message-main">
-      <h3>
-        <span>留下您的信息</span>
-      </h3>
-      <h5>紫荆教育学位顾问为您提供专业的服务</h5>
-      <div class="homepage_message_body">
-        <div class="body_img">
-          <img :src="imgUrl" alt />
-        </div>
-        <div class="body_input">
-          <el-form
-            :model="ruleForm"
-            :rules="rules"
-            ref="ruleForm"
-            label-width="0px"
-            class="demo-ruleForm"
-          >
+  <div class="section-form">
+    <div class="section-form-inner">
+      <div class="form-box">
+        <h2>报名咨询CU教育学（儿童）硕士</h2>
+        <p>填写姓名 + 手机， 点击报名咨询</p>
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
           <el-form-item prop="name">
             <el-input v-model="ruleForm.name" placeholder="姓名"></el-input>
           </el-form-item>
@@ -27,13 +12,12 @@
             <el-input v-model="ruleForm.phone" placeholder="手机"></el-input>
           </el-form-item>
           <el-form-item>
-              <el-button type="primary" :loading="isLoading" @click="submit">提交</el-button>
+            <el-button type="primary" :loading="isLoading" @click="submit">报名咨询</el-button>
           </el-form-item>
         </el-form>
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script>
@@ -100,81 +84,63 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.homepage_message {
-  width: 100%;
+.section-form {
   position: relative;
-  background-repeat: no-repeat;
-  background-size: cover;
   display: flex;
   justify-content: center;
-  .homepage_message-main {
-    width: 80%;
+  height: 554px;
+  background: url(@/assets/images/major-set/mz.png) no-repeat center;
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+.section-form-inner {
+  width: 70%;
   margin: 0 auto;
-    h3 {
-      margin-top: 80px;
+  h2 {
+    font-size: 26px;
+    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+    font-weight: 500;
+    color: #af1b40;
+    line-height: 40px;
+    letter-spacing: 5px;
     text-align: center;
-      color: rgba(255, 255, 255, 1);
-      font-size: 40px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      span {
-        display: inline-block;
-        position: relative;
-        &::before {
-          content: '';
-          position: absolute;
-          bottom: -4px;
-          height: 3px;
-          background: #ffffff;
-          width: 100%;
-        }
-      }
   }
-    h5 {
-      padding-top: 24px;
-      font-size: 18px;
-      font-family: PingFangSC-Semibold, PingFang SC;
-      font-weight: 600;
-      opacity: 0.6;
-      color: rgba(255, 255, 255, 1);
+  p {
+    margin-bottom: 30px;
+    font-size: 20px;
+    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
+    font-weight: 400;
+    color: #777777;
+    line-height: 30px;
+    letter-spacing: 2px;
     text-align: center;
   }
-    .homepage_message_body {
-      padding: 63px 0px 0px 0px;
-      display: flex;
-      width: 100%;
-      .body_img {
-        flex: 1;
-        padding: 0px 30px;
-      }
-      .body_input {
-        flex: 1;
-        padding: 0px 30px;
-        .demo-ruleForm {
-          display: flex;
-          justify-content: space-between;
-          flex-direction: column;
-          height: 100%;
-        }
+  .form-box {
+    width: 450px;
+    padding: 40px;
+    background-color: #fff;
+    margin-top: 100px;
+    white-space: nowrap;
+
     .el-input {
-          max-width: 324px;
+      width: 100%;
     }
     ::v-deep .el-input__inner {
-          border: 0px;
       background: transparent;
-          border-bottom: 2px solid #fff;
+      border: 0px;
+      border-bottom: 1px solid #000;
       border-radius: 0px;
       padding: 0px;
-          color: #fff;
+      color: #333;
     }
     ::v-deep .el-button {
-          width: 132px;
-          height: 54px;
-          border-radius: 4px;
-          .el-icon-loading {
-            color: #fff !important;
-          }
-        }
-      }
+      margin-top: 20px;
+      color: #fff;
+      background-color: #af1b40;
+      border: 1px solid #af1b40;
+      width: 100%;
+      height: 40px;
+      border-radius: 0;
     }
   }
 }