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

<template>
  <div v-if="state === 0" class="p-account">
    <h3 class="ptc-title">Account Information</h3>
    <div class="ptc-block">
      <div class="ptc-inner">
        <p class="ptc-label">QR code</p>
        <img class="qrcode" />
      </div>
    </div>
    <div class="ptc-block">
      <div class="ptc-inner">
        <div class="ptc-cell">
          <p class="ptc-label">Email</p>
          <p class="ptc-value">Rebecca123@gmail.com</p>
        </div>
        <div class="ptc-cell">
          <p class="ptc-label">Password</p>
          <p class="ptc-value">
            <span>********</span>
            <span class="ptc-text ml354-md" @click="state = 1">Edit ></span>
          </p>
        </div>
      </div>
    </div>
    <div class="ptc-block">
      <div class="ptc-inner">
        <div class="ptc-cell">
          <p class="ptc-label">Account</p>
          <p class="ptc-value flex-ac">
            Rebecca123@gmail.com<i
              class="account-icon"
              :class="1 ? 'a-google' : 2 ? 'a-apple' : 'a-facebook'"
            ></i>
          </p>
        </div>
      </div>
    </div>
    <h3 class="ptc-title pr">
      Login Detail<button class="stroke-btn" @click="state = 2">Edit</button>
    </h3>
    <div class="ptc-block">
      <div class="ptc-inner">
        <div class="ptc-cell">
          <p class="ptc-label">Name</p>
          <p class="ptc-value">Rebecca123@gmail.com</p>
        </div>
        <div class="ptc-cell">
          <p class="ptc-label">Pone number</p>
          <p class="ptc-value">Rebecca123@gmail.com</p>
        </div>
        <div class="ptc-cell">
          <p class="ptc-label">Address</p>
          <p class="ptc-value">449WATERDALEROAD,HEIDELBERGWEST, VIC,3081</p>
        </div>
      </div>
    </div>
  </div>

  <div v-else-if="state === 1" class="p-account">
    <h3 class="ptc-title">Change Password</h3>
    <div class="ptc-block">
      <div class="ptc-inner">
        <div class="ptc-cell">
          <p class="ptc-label">New password</p>
          <p class="ptc-value">
            <input
              class="ptc-input"
              type="password"
              placeholder="Please enter"
            />
          </p>
        </div>
      </div>
    </div>
    <div class="ptc-button-group">
      <div class="ptc-inner">
        <button class="ptc-button">SUBMIT</button>
        <button class="ptc-button ptc-button--stroke" @click="state = 0">
          BACK
        </button>
      </div>
    </div>
  </div>

  <div v-else class="p-account">
    <h3 class="ptc-title">Modify My profile</h3>
    <div class="ptc-block">
      <div class="ptc-inner">
        <div class="ptc-cell">
          <p class="ptc-label">Name</p>
          <p class="ptc-value">
            <input
              class="ptc-input"
              placeholder="Please enter your real name"
            />
          </p>
        </div>
        <div class="ptc-cell">
          <p class="ptc-label">Phone Number</p>
          <p class="ptc-value">
            <input
              class="ptc-input"
              placeholder="Please enter your phone number"
            />
          </p>
        </div>
        <div class="ptc-cell">
          <p class="ptc-label">Address</p>
          <p class="ptc-value">
            <input class="ptc-input mb24" placeholder="Road" />
            <input class="ptc-input mb24" placeholder="State" />
            <input class="ptc-input" placeholder="Zip code" />
          </p>
        </div>
      </div>
    </div>
    <div class="ptc-button-group">
      <div class="ptc-inner">
        <button class="ptc-button">SUBMIT</button>
        <button class="ptc-button ptc-button--stroke" @click="state = 0">
          BACK
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const state = ref(0)

watch(state, () => window.scrollTo(0, 0))
</script>

<style lang="scss">
.p-account {
  background: #f7f7f7;
  .qrcode {
    width: 212px;
    height: 212px;
    background: #efefef;
  }
  .stroke-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 310px;
    width: 132px;
    height: 56px;
    border-radius: 8px;
    border: 2px solid $primary-color;
    font-size: 32px;
    font-weight: bold;
    color: $primary-color;
  }

  .ptc-text {
    margin-left: 48px;
  }

  .account-icon {
    margin-left: 24px;
    width: 56px;
    height: 56px;
    background-size: contain;
  }
  .a-google {
    background-image: url(@img/a-google.png);
  }
  .a-apple {
    background-image: url(@img/a-apple.png);
  }
  .a-facebook {
    background-image: url(@img/a-facebook.png);
  }

  .mb24 {
    margin-bottom: 24px;
  }

  @media (min-width: 768px) {
    .ptc-block {
      margin-bottom: 0;
    }

    .ml354-md {
      margin-left: 354px;
    }
  }
}
</style>