报名提醒

src/assets/scss/SignUp/referInfo.scss

@@ -4,7 +4,8 @@
 
 
 .referInfo {
-  padding: 0 50px 110px 50px;
+  padding: 0 80px 110px 50px;
+  position: relative;
 
   .checkForm {
     flex: 1;
@@ -26,7 +27,7 @@
       font-weight: 500;
       color: #a7a2a6;
     }
-  
+
 
     .school .el-form-item {
       margin-bottom: 5px !important;
@@ -140,14 +141,14 @@
           text-align: center;
         }
       }
-    
+
       &.bgPic {
 
         .el-form-item__label {
           font-size: 14px;
         }
 
-       
+
       }
 
       .el-select {
@@ -217,6 +218,7 @@
       }
 
     }
+
     .bgInfo {
       font-size: 12px;
       font-family: PingFang SC;
@@ -230,7 +232,115 @@
         content: '*';
         color: #F56C6C;
         margin-right: 4px;
+      }
     }
-    } 
   }
 }
+
+
+
+// 报名流程提示
+.referInfoTips {
+  position: absolute;
+  right: 1%;
+  top: 45%;
+  color: var(--color);
+
+  i {
+    font-size: 26px;
+    cursor: pointer;
+  }
+}
+
+
+.vertical-steps {
+  position: absolute;
+  right: 4%;
+  top: 22%;
+  width: 280px;
+  margin: 0 auto;
+  background-color: #f8f8f8;
+  padding: 30px 20px 20px;
+  border-radius: 8px;
+
+  .vertical-steps-title {
+    text-align: center;
+    margin-bottom: 20px;
+    font-weight: 600;
+    font-size: 18px;
+  }
+}
+
+.step {
+  display: flex;
+  margin-bottom: 10px;
+  position: relative;
+
+  .step-number {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #ddd;
+    color: #666;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    margin-right: 15px;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 2;
+    border: 2px solid white;
+    box-shadow:
+      0 4px 12px rgba(24, 144, 255, 0.3),
+      /* 主阴影 */
+      inset 0 2px 4px rgba(255, 255, 255, 0.3),
+      /* 内阴影 */
+      0 0 0 4px rgba(24, 144, 255, 0.1);
+    /* 外发光效果 */
+  }
+
+  .step-number {
+    background-color: var(--color);
+    color: white;
+  }
+
+  .step-content {
+    padding: 5px 0;
+    display: flex;
+
+    /* 向左三角形 */
+    .triangle-left {
+      width: 0;
+      height: 0;
+      border-top: 6px solid transparent;
+      border-right: 12px solid #ffffff;
+      border-bottom: 6px solid transparent;
+    }
+
+    .step-title {
+
+      color: #333;
+      font-size: 12px;
+      background-color: #ffffff;
+      width: 182px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      position: relative;
+      top: -8px;
+    }
+  }
+
+  .connector {
+    position: absolute;
+    left: 11px;
+    top: 24px;
+    bottom: -30px;
+    width: 2px;
+    border-left: 1.5px dotted var(--color);
+    z-index: 1;
+  }
+}
\ No newline at end of file

src/components/index/SignUp/referInfo.vue

@@ -1326,6 +1326,24 @@
     </el-dialog>
     <!--    多形式报名邀请码报错弹框   -->
     <cueDialog :dialogVisible="cueDialogVisible" :msg="msg"></cueDialog>
+
+    <!-- 报名流程提示 -->
+    <div class="vertical-steps" v-if="isShowStepsTips">
+      <div class="vertical-steps-title">报名流程</div>
+      <div v-for="(item, index) in steps" :key="item">
+        <div class="step">
+          <div class="step-number">{{ index + 1 }}</div>
+          <div class="step-content">
+            <div class="triangle-left"></div>
+            <div class="step-title">{{ item }}</div>
+          </div>
+          <div class="connector" v-if="index != 5"></div>
+        </div>
+      </div>
+    </div>
+    <div class="referInfoTips" @click="toShowSteps">
+      <i class="el-icon-question"></i>
+    </div>
   </div>
 </template>
 
@@ -1815,6 +1833,15 @@ export default {
       resultPicture: "",
       disabled: false, //限制输入框
       isOffline: false, //活动形式是否包含线下字段
+      steps: [
+        "登录报名系统",
+        "提交报名信息，等待审核",
+        "收到审核短信，登录系统缴费",
+        "上传缴费截图，等待审核",
+        "收到审核短信，登录系统",
+        "下载入营通知书，完成报名",
+      ],
+      isShowStepsTips: false,
     };
   },
   created() {
@@ -1960,6 +1987,9 @@ export default {
   },
   mounted() {},
   methods: {
+    toShowSteps() {
+      this.isShowStepsTips = !this.isShowStepsTips;
+    },
     // 判断证件类型-证件号是否需要校验
     // IDtypeRule(val) {
     //   if (val == "大陆居民身份证") {