imei

src/App.vue

@@ -1,3 +1,25 @@
 <template>
-  <router-view :key="$route.fullPath" />
+  <div :class="{ 'has-navbar': showNavBar }">
+    <NavBar
+      v-if="showNavBar"
+      :show-nav-icons="$route.path !== '/password'"
+      :fixed="true"
+    />
+    <router-view :key="$route.fullPath" />
+  </div>
 </template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const navBarIgnore = ['/login', '/register']
+const showNavBar = computed(() => !navBarIgnore.includes(route.path))
+</script>
+
+<style lang="scss">
+.has-navbar {
+  padding-top: $nav-bar-height;
+}
+</style>

src/pages/imei/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div v-if="action === 'bind'" class="p-imei">
+    <h3 class="title">
+      You have a Lite version of membership service to be bound
+    </h3>
+    <div class="form">
+      <p class="label">IMEI</p>
+      <p class="control">
+        <input class="ptc-input" placeholder="please enter" />
+      </p>
+      <p class="tip">
+        <span @click="$router.push('view')">How to view IMEI？</span>
+      </p>
+    </div>
+    <button class="ptc-button">
+      BIND IMEI
+    </button>
+  </div>
+
+  <div v-else class="p-imei">
+    <h3 class="title">View mobile IMEI</h3>
+    <div class="guide">
+      <div class="guide-txt">
+        View on iPhone: Turn on the phone and click Settings-General-About this
+        machine to check the IMEI number。
+      </div>
+      <div class="guide-img"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ action: 'bind' | 'view' }>()
+</script>
+
+<style lang="scss">
+.p-imei {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - $nav-bar-height);
+  background: #f7f7f7;
+
+  .title {
+    padding: 36px 24px;
+    line-height: 56px;
+    font-size: 40px;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .form {
+    padding: 48px 36px;
+    background: #fff;
+
+    .label {
+      font-size: 32px;
+      color: #999;
+    }
+    .control {
+      margin: 48px 0;
+    }
+    .tip {
+      font-size: 32px;
+      color: $primary-color;
+    }
+  }
+
+  .ptc-button {
+    display: block;
+    margin: 48px auto 0;
+    width: 678px;
+  }
+
+  .guide {
+    flex: 1;
+    padding: 48px 36px;
+    background: #fff;
+    &-txt {
+      line-height: 44px;
+      font-size: 32px;
+      color: #333;
+    }
+    &-img {
+      display: block;
+      margin-top: 38px;
+      height: 328px;
+      background: #eee;
+    }
+  }
+}
+</style>

src/pages/password/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="p-password">
-    <NavBar :show-nav-icons="true" />
     <div v-if="step === 0" class="step">
       <h3 class="title">Recover password</h3>
       <div class="desc">

src/router.ts

@@ -15,5 +15,10 @@ export default createRouter({
       path: '/password',
       component: () => import('./pages/password/index.vue'),
     },
+    {
+      path: '/imei/:action',
+      component: () => import('./pages/imei/index.vue'),
+      props: true,
+    },
   ],
 })