添加组件

src/components/MButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="mbutton">
+      <van-button type="primary" round block>{{ text }}</van-button>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "mstep",
+    props: {
+        text: String
+    },
+    data() {
+        return {}
+    },
+    methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+@import url("../assets/commonLess/variable");
+.van-button--primary {
+    background-color: #2DC7AA;
+    border: 1px solid #2DC7AA;
+    color: #FFFFFF;
+    font-size: .18rem;
+    height: .5rem;
+    line-height: .52rem;
+    width: 90%;
+    margin-left: 5%;
+}
+
+</style>

src/components/MStep.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="mstep">
+    <div class="step">
+        <div class="step-item" v-for="(item, index) in imgUrlList" :key="index">
+            <img v-if="number >= item.index" :src="item.active" alt key="oneImg" />
+            <img v-else :src="item.default" alt key="oneImg" />
+            <p :class="[number >= item.index ? item.activeClass : '']" >{{ item.text }}</p>
+        </div>
+    </div>
+    <div class="step">
+        <div class="step-item" v-for="(item, index) in imgUrlList2" :key="index">
+            <img v-if="number >= item.index" :src="item.active" alt key="twoImg" />
+            <img v-else :src="item.default" alt key="twoImg" />
+            <p :class="[number >= item.index ? item.activeClass : '']" >{{ item.text }}</p>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "mstep",
+    props: {
+        number: {
+            type: Number,
+            default: 1
+        } // 标题名称
+    },
+    data() {
+        return {
+            imgUrlList: [
+                {
+                    index: 1,
+                    default: "",
+                    active: require("@/assets/images/level/icon_account_active.png"),
+                    activeClass: "active",
+                    text: '账号'
+                }, {
+                    index: 1.5,
+                    default: require("@/assets/images/level/icon_right_arrow.png"),
+                    active: require("@/assets/images/level/icon_right_arrow_active.png"),
+                    activeClass: "active",
+                    text: ''
+                }, {
+                    index: 2,
+                    default: require("@/assets/images/level/icon_baseInfo.png"),
+                    active: require("@/assets/images/level/icon_baseInfo_active.png"),
+                    activeClass: "active",
+                    text: '基本信息'
+                }, {
+                    index: 2.5,
+                    default: require("@/assets/images/level/icon_right_arrow.png"),
+                    active: require("@/assets/images/level/icon_right_arrow_active.png"),
+                    activeClass: "active",
+                    text: ''
+                }, {
+                    index: 3,
+                    default: require("@/assets/images/level/icon_level.png"),
+                    active: require("@/assets/images/level/icon_level_active.png"),
+                    activeClass: "active",
+                    text: '考级信息'
+                }
+            ],
+            imgUrlList2: [
+                {
+                    index: 4,
+                    default: require("@/assets/images/level/icon_payment.png"),
+                    active: require("@/assets/images/level/icon_payment_active.png"),
+                    activeClass: "active",
+                    text: '支付'
+                }, {
+                    index: 4.5,
+                    default: require("@/assets/images/level/icon_right_arrow.png"),
+                    active: require("@/assets/images/level/icon_right_arrow_active.png"),
+                    activeClass: "active",
+                    text: ''
+                }, {
+                    index: 5,
+                    default: require("@/assets/images/level/icon_certificate.png"),
+                    active: require("@/assets/images/level/icon_certificate_active.png"),
+                    activeClass: "active",
+                    text: '邮寄证书'
+                }, {
+                    index: 5.5,
+                    default: require("@/assets/images/level/icon_right_arrow.png"),
+                    active: require("@/assets/images/level/icon_right_arrow_active.png"),
+                    activeClass: "active",
+                    text: ''
+                }, {
+                    index: 6,
+                    default: require("@/assets/images/level/icon_card.png"),
+                    active: require("@/assets/images/level/icon_card_active.png"),
+                    activeClass: "active",
+                    text: '准考证'
+                }
+            ]
+        };
+    },
+    methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+@import url("../assets/commonLess/variable");
+.mstep {
+    padding-bottom: 0.2rem;
+    background-color: #ffffff;
+}
+.step {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-top: 0.2rem;
+    .step-item {
+        font-size: 0;
+        &:nth-of-type(odd) img {
+        width: 0.56rem;
+        }
+
+        &:nth-of-type(even) img {
+            width: 0.2rem;
+            padding: 0.15rem 0.25rem 0;
+        }
+
+        p {
+            padding-top: 0.03rem;
+            font-size: 0.14rem;
+            color: #808080;
+            text-align: center;
+            &.active {
+                color: #2DC7AA;
+            }
+        }
+    }
+}
+</style>

src/views/level/SignUpAccount.vue

@@ -1,27 +1,30 @@
 <template>
     <div class="signupAccount">
         <m-header />
+        <m-step style="margin-top: .12rem" />
 
-        
+        <m-button text="下一步" />
     </div>
 </template>
 <script>
 import MHeader from '@/components/MHeader'
+import MStep from '@/components/MStep'
+import MButton from '@/components/MButton'
 // import { browser } from '@/common/common'
 export default {
     name: 'signupAccount',
-	components: { MHeader },
+	components: { MHeader, MStep, MButton },
     data () {
         return {
         }
     },
     mounted() {
         // 插入token
-        let params = this.$route.query
-        if(params.Authorization) {
-            localStorage.setItem('Authorization', decodeURI(params.Authorization))
-            localStorage.setItem('userInfo', decodeURI(params.Authorization))
-        }
+        // let params = this.$route.query
+        // if(params.Authorization) {
+        //     localStorage.setItem('Authorization', decodeURI(params.Authorization))
+        //     localStorage.setItem('userInfo', decodeURI(params.Authorization))
+        // }
     },
     methods: {
     }
@@ -37,4 +40,16 @@ export default {
     background-color: #F3F4F8;
 }
 
+.van-button--primary {
+    position: absolute;
+    bottom: .5rem;
+    background-color: #2DC7AA;
+    border: 1px solid #2DC7AA;
+    color: #FFFFFF;
+    font-size: .18rem;
+    height: .5rem;
+    line-height: .52rem;
+    width: 90%;
+    margin-left: 5%;
+}
 </style>

vue.config.js

@@ -51,7 +51,7 @@ module.exports = {
   devServer: {
     open: process.platform === 'darwin',
     host: '0.0.0.0',
-    port: 9001,
+    port: 9002,
     https: false,
     hotOnly: false,
     // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理