Skip to content

P
project-online-old
提交 5717df13 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

报名增加引导

上级 76ce7b66
隐藏空白字符变更
内嵌 并排
正在显示 包含 161 行增加 和 5 行删除
package-lock.json
浏览文件 @ 5717df13
......@@ -1710,7 +1710,7 @@
"dependencies": {
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1600502873540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz",
"integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
"dev": true,
"requires": {
......@@ -3819,6 +3819,11 @@
}
}
},
"driver.js": {
"version": "0.9.8",
"resolved": "https://registry.npmjs.org/driver.js/-/driver.js-0.9.8.tgz",
"integrity": "sha512-bczjyKdX6XmFyCDkwtRmlaORDwfBk1xXmRO0CAe5VwNQTM98aWaG2LAIiIdTe53iV/B7W5lXlIy2xYtf0JRb7Q=="
},
"duplexify": {
"version": "3.7.1",
"resolved": "https://registry.npm.taobao.org/duplexify/download/duplexify-3.7.1.tgz",
......@@ -4379,7 +4384,7 @@
"dependencies": {
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1600502873540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz",
"integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
"dev": true,
"requires": {
......@@ -10992,7 +10997,7 @@
},
"eslint-scope": {
"version": "4.0.3",
"resolved": "https://registry.npm.taobao.org/eslint-scope/download/eslint-scope-4.0.3.tgz",
"resolved": "https://registry.npm.taobao.org/eslint-scope/download/eslint-scope-4.0.3.tgz?cache=0&sync_timestamp=1599933677754&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-scope%2Fdownload%2Feslint-scope-4.0.3.tgz",
"integrity": "sha1-ygODMxD2iJoyZHgaqC5j65z+eEg=",
"dev": true,
"requires": {
......
package.json
浏览文件 @ 5717df13
......@@ -78,6 +78,7 @@
"bootstrap": "^4.5.3",
"core-js": "^3.8.0",
"cross-env": "^7.0.2",
"driver.js": "^0.9.8",
"element-ui": "^2.14.1",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1",
......
src/pages/my/account/home.vue
浏览文件 @ 5717df13
......@@ -20,11 +20,26 @@
</el-steps>
</div>
</div>
<div class="welcome" v-if="welcomeShow">
<div class="inner">
<div class="welcome-close" @click="welcomeShow = false"></div>
<div class="welcome-main">
<img src="../../../assets/images/welcome.png" width="350" />
<div class="welcome-content">
<h1>欢迎您报考</h1>
<h2>索菲亚大学</h2>
<div class="welcome-button" @click="handleStart">马上开始</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/my'
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
export default {
name: 'AppHome',
data() {
......@@ -37,7 +52,8 @@ export default {
2: ['REGISTRATION'],
3: ['CLOSED']
},
result: {}
result: {},
welcomeShow: false
}
},
computed: {
......@@ -68,6 +84,9 @@ export default {
const { material, progress } = data
this.material = material
this.progress = progress
if (!material.basic_info.id_type) {
this.welcomeShow = true
}
} else {
this.$message.error(message)
}
......@@ -98,6 +117,50 @@ export default {
return
}
this.$router.push('/my/admission')
},
handleStart() {
this.welcomeShow = false
this.createDriver()
},
createDriver() {
const driver = new Driver({
opacity: '0.8',
padding: 5,
allowClose: false,
doneBtnText: '我知道了',
nextBtnText: '下一步'
})
// Define the steps for introduction
driver.defineSteps([
{
element: '.nav-application',
popover: {
className: 'first-step-popover-class',
title: '第一步：',
description: '点击<span style="color:#af1b40">报名申请</span>，进入基本信息的填写。',
position: 'bottom-right'
}
},
{
element: '.nav-interview',
popover: {
title: '第二步：',
description: '点击<span style="color:#af1b40">面试申请</span>，进入面试所需材料的上传。',
position: 'bottom-right'
}
},
{
element: '.nav-admission',
popover: {
title: '第三步：',
description: '点击<span style="color:#af1b40">办理入学</span>，进入办理入学材料的上传。',
position: 'bottom-right'
}
}
])
driver.start()
}
},
beforeMount() {
......@@ -126,7 +189,7 @@ export default {
cursor: pointer;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-position: center 2px;
}
}
.nav-application {
......@@ -167,4 +230,91 @@ export default {
.progress {
margin: 0 40px;
}
.welcome {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
}
.welcome-close {
float: right;
width: 23px;
height: 23px;
background: url('../../../assets/images/welcome_close.png') no-repeat;
background-size: contain;
cursor: pointer;
}
.welcome-main {
display: flex;
align-items: center;
}
.welcome-content {
text-align: center;
h1 {
font-size: 40px;
font-weight: 600;
color: #fff;
line-height: 56px;
}
h2 {
font-size: 26px;
font-weight: normal;
color: #fff;
line-height: 26px;
}
}
.welcome-button {
margin-top: 40px;
display: inline-block;
padding: 10px 32px;
font-size: 20px;
font-weight: 600;
color: #fff;
line-height: 20px;
border-radius: 5px;
border: 3px solid #fff;
cursor: pointer;
&:hover {
color: #af1b40;
background-color: #fff;
}
}
</style>
<style>
div#driver-popover-item {
padding: 10px;
max-width: 178px;
min-width: auto;
}
div#driver-popover-item .driver-popover-title {
font-size: 16px;
}
.driver-close-btn,
.driver-prev-btn {
display: none !important;
}
#driver-highlighted-element-stage {
border-radius: 8px !important;
}
div#driver-popover-item .driver-popover-footer {
text-align: center;
}
div#driver-popover-item .driver-popover-footer button {
background-color: #af1b40;
line-height: 36px;
color: #fff;
border-radius: 4px;
padding: 0 26px;
text-shadow: none;
border: 0;
}
div#driver-popover-item .driver-popover-footer .driver-btn-group {
float: none;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论