my-order

src/components/nav-bar/index.vue

@@ -45,7 +45,7 @@
             <div v-else class="p3">
               <div class="txt">
                 $10 off for additional services |
-                <span class="ptc-text fw600">Buy now ></span>
+                <strong class="ptc-text">Buy now ></strong>
               </div>
               <div class="swiper">
                 <div class="swiper-item">

src/pages/account/index.vue

@@ -14,7 +14,17 @@
         <p class="ptc-label">Password</p>
         <p class="ptc-value">
           <span>********</span>
-          <span class="ptc-text">Edit ></span>
+          <span class="ptc-text" @click="$router.push('/password')"
+            >Edit ></span
+          >
+        </p>
+      </div>
+    </div>
+    <div class="ptc-block">
+      <div class="ptc-cell">
+        <p class="ptc-label">Account</p>
+        <p class="ptc-value flex-ac">
+          Rebecca123@gmail.com<i class="account-icon"></i>
         </p>
       </div>
     </div>
@@ -63,5 +73,13 @@
   .ptc-text {
     margin-left: 48px;
   }
+
+  .account-icon {
+    margin-left: 24px;
+    width: 56px;
+    height: 56px;
+    background-size: contain;
+    background: #eee;
+  }
 }
 </style>

src/pages/my-order/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="p-my-order">
+    <h3 class="ptc-title">My Order</h3>
+    <div class="ptc-block" :class="{ pb24: 1 }">
+      <div class="cell-group border-bottom">
+        <div class="cell">
+          <span class="cell__label">Order Status</span>
+          <span class="cell__value">
+            <span
+              class="ptc-tag"
+              :class="{ 'not-paid': 1, paid: 0, canceled: 0 }"
+              >Not Paid</span
+            >
+          </span>
+        </div>
+        <div class="cell">
+          <span class="cell__label">Order Number</span>
+          <span class="cell__value">12345678910</span>
+        </div>
+        <div class="cell">
+          <span class="cell__label">Order Time</span>
+          <span class="cell__value">2021/08/20 12:34</span>
+        </div>
+        <div class="cell">
+          <span class="cell__label">Phone brand</span>
+          <span class="cell__value">Apple iphone 12</span>
+        </div>
+        <div class="cell">
+          <span class="cell__label">Version</span>
+          <span class="cell__value">Lite(2022/7/31 Expires)</span>
+        </div>
+      </div>
+      <div class="cell-group cell-group--compact">
+        <template v-if="1">
+          <div class="cell">
+            <span class="cell__label">Activation fee</span>
+            <span class="cell__value">$20.00</span>
+          </div>
+          <div class="cell">
+            <span class="cell__label">Membership fee</span>
+            <span class="cell__value">$8.95</span>
+          </div>
+          <div class="cell">
+            <span class="cell__label">Discount</span>
+            <span class="cell__value highlight">-$10.00</span>
+          </div>
+        </template>
+        <div class="cell" :class="{ mt48: 1 }">
+          <span class="cell__label">Cost</span>
+          <span class="cell__value bold">$18.95</span>
+        </div>
+      </div>
+      <div class="button-group">
+        <button class="ptc-button ptc-button--stroke">Cancel</button>
+        <button class="ptc-button">Pay 14:40</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.p-my-order {
+  background: #f7f7f7;
+
+  .pb24 {
+    padding-bottom: 24px !important;
+  }
+
+  .cell {
+    &-group {
+      padding: 8px 0 48px;
+      &--compact {
+        padding: 48px 0 8px;
+        .cell + .cell {
+          margin-top: 24px;
+        }
+      }
+    }
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 32px;
+    + .cell {
+      margin-top: 48px;
+    }
+
+    &__label {
+      color: #999;
+    }
+    &__value {
+      color: #1a1a1a;
+    }
+  }
+
+  .ptc-tag {
+    &.not-paid {
+      background: #dae1ef;
+      color: $primary-color;
+    }
+    &.paid {
+      background: #dae1ef;
+      color: #a7b0c1;
+    }
+    &.canceled {
+      background: #eaeaea;
+      color: #999;
+    }
+  }
+
+  .button-group {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 24px;
+    .ptc-button {
+      width: 328px;
+      height: 92px;
+      + .ptc-button {
+        margin-left: 26px;
+      }
+    }
+  }
+}
+</style>

src/router.ts

@@ -33,5 +33,9 @@ export default createRouter({
       path: '/account',
       component: () => import('./pages/account/index.vue'),
     },
+    {
+      path: '/order',
+      component: () => import('./pages/my-order/index.vue'),
+    },
   ],
 })

src/style/_mixins.scss

@@ -3,4 +3,33 @@
   height: $height;
   background: url(#{$url}) no-repeat;
   background-size: 100% 100%;
-}
+}
+
+@mixin thin-border($position, $color: #d9d9d9, $size: 100%) {
+  position: relative;
+  @if $position == top or $position == bottom {
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      #{$position}: 0;
+      height: 0;
+      border-bottom: 1PX solid $color;
+      transform: scaleY(0.5);
+      z-index: 1;
+    }
+  } @else {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      #{$position}: 0;
+      width: 0;
+      height: $size;
+      border-left: 1PX solid $color;
+      transform: translateY(-50%) scaleX(0.5);
+      z-index: 1;
+    }
+  }
+}

src/style/atom.scss

@@ -2,7 +2,7 @@
   text-align: center;
 }
 
-.fw600 {
+.bold {
   font-weight: 600;
 }
 
@@ -13,6 +13,10 @@
 .flex {
   display: flex;
 }
+.flex-ac {
+  display: flex;
+  align-items: center;
+}
 
 .mb48 {
   margin-bottom: 48px !important;
@@ -20,3 +24,14 @@
 .mt48 {
   margin-top: 48px !important;
 }
+
+.highlight {
+  color: $danger-color !important;
+}
+
+.border-top {
+  @include thin-border(top);
+}
+.border-bottom {
+  @include thin-border(bottom);
+}