vue-ptc/src/pages/imei/index.vue

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