报名增加引导

package-lock.json

@@ -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

@@ -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

@@ -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>