Skip to content

C
campSite
Commit 2d5d6537 authored by ‘yangmengxue’'s avatar ‘yangmengxue’
Browse files
Options

11

parent 65fb88fe
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 596 additions and 558 deletions
src/assets/scss/SignUp/referInfo.scss
View file @ 2d5d6537
......@@ -239,111 +239,6 @@
// 报名流程提示
.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;
}
}
// 下载附件
.annex {
>div{
......
src/components/breadcrumb.vue
View file @ 2d5d6537
......@@ -23,6 +23,30 @@
/>
</div>
</div>
<!-- 报名流程提示 -->
<div
class="vertical-steps"
v-if="isShowStepsTips && (status == 0 || status == 2)"
>
<div class="vertical-steps-title">报名流程</div>
<div class="vertical_close" @click="toShowSteps">
<i class="el-icon-close"></i>
</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>
......@@ -35,6 +59,16 @@ export default {
return {
status: this.statusNum,
bCList: [],
// 报名流程提示
steps: [
"登录报名系统",
"提交报名信息，等待审核",
"收到审核短信，登录系统缴费",
"上传缴费截图，等待审核",
"收到审核短信，登录系统",
"下载入营通知书，完成报名",
],
isShowStepsTips: false,
};
},
created() {
......@@ -82,11 +116,15 @@ export default {
},
watch: {
statusNum(val) {
// console.log(val, "statusNum");
console.log(val, "statusNum");
this.status = val;
},
},
methods: {},
methods: {
toShowSteps() {
this.isShowStepsTips = !this.isShowStepsTips;
},
},
};
</script>
......@@ -94,6 +132,114 @@ export default {
.flex {
display: flex;
}
// 报名流程提示
.referInfoTips {
// position: absolute;
// right: 1%;
// top: 45%;
margin-left: 20px;
color: var(--color);
i {
font-size: 26px;
cursor: pointer;
}
}
.vertical-steps {
position: absolute;
right: 2%;
top: 9.5%;
// width: 280px;
margin: 0 auto;
background-color: #f8f8f8;
padding: 30px 20px 20px;
border-radius: 8px;
z-index: 99;
.vertical-steps-title {
text-align: center;
margin-bottom: 20px;
font-weight: 600;
font-size: 18px;
}
.vertical_close {
position: absolute;
right: 4%;
top: 2%;
cursor: pointer;
}
}
.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;
}
}
.speed-bg-color {
background-color: var(--color) !important;
......
src/components/index/SignUp/pass.vue
View file @ 2d5d6537
......@@ -6,14 +6,18 @@
<i class="icon-icon"></i>
</div>
<!-- {{!this.examine_status == 1}} -->
<div v-if="this.examine_status==0">同学你好，你的报名资料已提交</div>
<div v-if="this.examine_status == 0">
<div v-if="this.examine_status == 0 || this.examine_status == 3">
同学你好，你的报名资料已提交
</div>
<div v-if="this.examine_status == 0 || this.examine_status == 3">
请等待工作人员审核，审核结果将于以短信形式发送到报名手机号，请注意查收。
</div>
<div v-if="this.examine_status == 1">
同学你好，你的材料已经通过审核，请点击“下一步”完成报名
</div>
<div v-if="this.examine_status == 2">同学你好，你的申请材料未能通过审核。原因是：{{ this.examine_reason }}</div>
<div v-if="this.examine_status == 2">
同学你好，你的申请材料未能通过审核。原因是：{{ this.examine_reason }}
</div>
<div class="btn" v-show="this.examine_status == 2">
<el-button @click="Lasting()">上一步</el-button>
</div>
......@@ -25,92 +29,90 @@
</template>
<script>
/* eslint-disable */
/* eslint-disable */
import {signBack, signUpInit} from "r/index/signUp";
import { signBack, signUpInit } from "r/index/signUp";
export default {
name: "Pass",
data() {
return {
examine_status: window.localStorage.getItem(
"examine_status" + this.$store.state.indexIdentity
),
examine_reason: window.localStorage.getItem(
"examine_reason" + this.$store.state.indexIdentity
),
signBackStatus: "",
};
},
created() {
},
export default {
name: "Pass",
data() {
return {
examine_status: window.localStorage.getItem(
"examine_status" + this.$store.state.indexIdentity
),
examine_reason: window.localStorage.getItem(
"examine_reason" + this.$store.state.indexIdentity
),
signBackStatus: "",
};
},
created() {},
watch: {},
methods: {
Lasting() {
signBack({}).then((res) => {
if (res.data.code != 200) {
return this.$message.error(res.data.msg);
}
this.signBackStatus = res.data.status;
this.$emit("getstatus", res.data.status);
this.$message.success(res.data.msg);
});
},
paying() {
this.$emit("is_next", 1);
},
watch: {},
methods: {
Lasting() {
signBack({}).then((res) => {
if (res.data.code != 200) {
return this.$message.error(res.data.msg);
}
this.signBackStatus = res.data.status;
this.$emit("getstatus", res.data.status);
this.$message.success(res.data.msg);
});
},
paying() {
this.$emit("is_next", 1);
},
};
},
};
</script>
<style lang="scss" scoped>
@import "a/scss/btn";
@import "a/scss/index";
@import "a/style";
@import "a/scss/btn";
@import "a/scss/index";
@import "a/style";
@font-face {
font-family: "icomoon";
src: url("../../../assets/fonts/icomoon.eot?dcunb6");
src: url("../../../assets/fonts/icomoon.eot?dcunb6#iefix") format("embedded-opentype"),
@font-face {
font-family: "icomoon";
src: url("../../../assets/fonts/icomoon.eot?dcunb6");
src: url("../../../assets/fonts/icomoon.eot?dcunb6#iefix")
format("embedded-opentype"),
url("../../../assets/fonts/icomoon.ttf?dcunb6") format("truetype"),
url("../../../assets/fonts/icomoon.woff?dcunb6") format("woff"),
url("../../../assets/fonts/icomoon.svg?dcunb6#icomoon") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
font-weight: normal;
font-style: normal;
font-display: block;
}
.btn {
padding-bottom: 0 !important;
}
.btn {
padding-bottom: 0 !important;
}
.pass {
padding: 0 56px 65px 56px;
.pass {
padding: 0 56px 65px 56px;
.p_content {
i {
font-size: 100px;
color: var(--color);
}
.p_content {
i {
font-size: 100px;
color: var(--color);
}
div {
text-align: center;
font-size: 16px;
font-weight: 500;
color: #666666;
line-height: 18px;
}
div {
text-align: center;
font-size: 16px;
font-weight: 500;
color: #666666;
line-height: 18px;
}
:nth-child(2) {
margin: 24px 0;
}
:nth-child(2) {
margin: 24px 0;
}
:nth-child(3) {
margin: 0 0 50px 0;
}
:nth-child(3) {
margin: 0 0 50px 0;
}
}
}
</style>
src/components/index/SignUp/referInfo.vue
View file @ 2d5d6537
......@@ -1336,23 +1336,7 @@
<!-- 多形式报名邀请码报错弹框 -->
<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>
......@@ -1843,16 +1827,6 @@ export default {
resultPicture: "",
disabled: false, //限制输入框
isOffline: false, //活动形式是否包含线下字段
// 报名流程提示
steps: [
"登录报名系统",
"提交报名信息，等待审核",
"收到审核短信，登录系统缴费",
"上传缴费截图，等待审核",
"收到审核短信，登录系统",
"下载入营通知书，完成报名",
],
isShowStepsTips: false,
// 下载附件
annexList: [],
};
......@@ -2033,9 +2007,7 @@ export default {
});
});
},
toShowSteps() {
this.isShowStepsTips = !this.isShowStepsTips;
},
// 判断证件类型-证件号是否需要校验
// IDtypeRule(val) {
// if (val == "大陆居民身份证") {
......
src/views/index/camp/SignUp.vue
View file @ 2d5d6537
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment