帐号信息

src/pages/account/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="p-account">
+    <h3 class="ptc-title">Account Information</h3>
+    <div class="ptc-block">
+      <p class="ptc-label">QR code</p>
+      <img class="qrcode" />
+    </div>
+    <div class="ptc-block">
+      <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">Edit ></span>
+        </p>
+      </div>
+    </div>
+    <h3 class="ptc-title pr">
+      Login Detail<button class="stroke-btn">Edit</button>
+    </h3>
+    <div class="ptc-block">
+      <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>
+</template>
+
+<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;
+  }
+}
+</style>

src/router.ts

@@ -29,5 +29,9 @@ export default createRouter({
       component: () => import('./pages/pay-result/index.vue'),
       props: true,
     },
+    {
+      path: '/account',
+      component: () => import('./pages/account/index.vue'),
+    },
   ],
 })

src/style/components.scss

@@ -60,12 +60,22 @@
   background: #fff;
 }
 
+.ptc-cell {
+  + .ptc-cell {
+    margin-top: 84px;
+  }
+}
 .ptc-label {
   margin-bottom: 48px;
   line-height: 44px;
   font-size: 32px;
   color: #999;
 }
+.ptc-value {
+  font-size: 32px;
+  color: #1A1A1A;
+  line-height: 44px;
+}
 
 .ptc-tag {
   display: inline-block;