预约适配

src/App.vue

@@ -45,25 +45,36 @@ const showNavBar = computed(() => !navBarIgnore.includes(route.path))
   padding-bottom: 48px;
   background: #f7f7f7;
   overflow: hidden;
+  &.white-down-md {
+    @media (max-width: $breakpoint-md - 0.02) {
+      background: #fff;
+      padding-bottom: 0;
+    }
+  }
 
   @include media-breakpoint-up(md) {
     min-height: auto;
   }
+  @include media-breakpoint-only(md) {
+    padding-bottom: 0;
+  }
+  @include media-breakpoint-up(lg) {
+    padding-bottom: 64px;
+  }
 
   .nav-bar-wrap + & {
     padding-top: $nav-bar-height;
   }
 }
 .main-wrapper {
+  margin: auto;
   overflow: hidden;
 
   @include media-breakpoint-up(lg) {
-    margin: auto;
     width: 768px * 2;
   }
   @include media-breakpoint-up(xl) {
-    margin: auto;
-    width: 1998px;
+    width: 999px * 2;
   }
 }
 

src/components/radio/Radio.vue

@@ -1,6 +1,9 @@
 <template>
   <div
-    :class="['ptc-radio', { 'ptc-radio--checked': checked }]"
+    :class="[
+      'ptc-radio',
+      { 'ptc-radio--checked': checked, 'ptc-radio--disabled': disabled },
+    ]"
     @click="onClick"
   >
     <slot />
@@ -10,9 +13,14 @@
 <script setup lang="ts">
 import { inject, computed } from 'vue'
 
-const props = defineProps<{ value: any; modelValue?: any }>()
+const props = defineProps<{
+  value: any
+  modelValue?: any
+  disabled?: boolean
+}>()
 const emit = defineEmits<{
   (e: 'update:modelValue', value: any): void
+  (e: 'change', value: any): void
 }>()
 const parent = inject<any>('RadioGroup')
 
@@ -22,9 +30,9 @@ const checked = computed(
 
 function onClick() {
   if (checked.value) return
-  parent
-    ? parent.emit('update:modelValue', props.value)
-    : emit('update:modelValue', props.value)
+  const _emit = parent?.emit || emit
+  _emit('update:modelValue', props.value)
+  _emit('change', props.value)
 }
 </script>
 
@@ -45,6 +53,12 @@ function onClick() {
       @include icon('@img/check.png', 68px, 72px);
     }
   }
+  &--disabled {
+    color: #999;
+    background: #ececec;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
 
   &:not(.ptc-radio--checked) [class*='icon-'] {
     filter: grayscale(1);

src/components/radio/RadioGroup.vue

@@ -8,6 +8,7 @@ import { provide, toRef } from 'vue'
 const props = defineProps<{ modelValue: any }>()
 const emit = defineEmits<{
   (e: 'update:modelValue', value: any): void
+  (e: 'change', value: any): void
 }>()
 
 provide('RadioGroup', {

src/pages/account/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="state === 0" class="p-account">
+    <h3 class="ptc-title">Account Information</h3>
     <div class="ptc-wrapper">
-      <h3 class="ptc-title">Account Information</h3>
       <div class="ptc-block">
         <div class="ptc-inner">
           <p class="ptc-label">QR code</p>
@@ -37,93 +37,95 @@
         </div>
       </div>
     </div>
-    <div class="ptc-wrapper">
-      <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>
+    <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 ptc-wrapper">
+  <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 class="ptc-wrapper">
+      <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>
-    <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 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>
 
-  <div v-else class="p-account ptc-wrapper">
+  <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 class="ptc-wrapper">
+      <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>
-    <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 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>

src/pages/appointment/StepFive.vue

@@ -1,50 +1,65 @@
 <template>
-  <h3 class="ptc-title">Confirm appointment</h3>
-  <div class="ptc-block">
-    <p class="sub-title">
-      Monday, October 10 9:00 -9:30 PTC Browns Plains Kiosk
-    </p>
-    <div class="mt48">
-      <div class="cell">
-        <span class="cell-label">Phone Brand:</span>
-        <span class="cell-value">Apple</span>
+  <div class="container">
+    <div class="ptc-inner">
+      <div class="alert">
+        <i class="alert-icon"></i>
+        <p class="alert-message">Monday, October 10 9:00 -9:30</p>
       </div>
-      <div class="cell">
-        <span class="cell-label">Phone Model:</span>
-        <span class="cell-value">iPhone 12</span>
+      <div class="action">
+        <i class="icon-calendar"></i><strong>Add to calendar ></strong>
       </div>
-      <div class="cell">
-        <span class="cell-label">Phone Number:</span>
-        <span class="cell-value">6668888</span>
+      <div class="note">
+        <p class="note-title">Preparations：</p>
+        <ul class="note-list">
+          <li class="note-item">· You need to back up the data in advance</li>
+          <li class="note-item">· You need to back up the data in advance</li>
+        </ul>
       </div>
-      <div class="cell">
-        <span class="cell-label">IMEI:</span>
-        <span class="cell-value">iPhonaskfjoaxxx</span>
+      <div class="detail">
+        <div class="cell">
+          <span class="cell-label">Store:</span>
+          <span class="cell-value">xxxxxxxxxx</span>
+        </div>
+        <div class="cell">
+          <span class="cell-label">Phone Brand:</span>
+          <span class="cell-value">xxxxxxxxxx</span>
+        </div>
+        <div class="cell">
+          <strong class="primary">Navigation></strong>
+        </div>
+        <div class="cell">
+          <span class="cell-label">Phone Model:</span>
+          <span class="cell-value">xxxxxxxxxx</span>
+        </div>
+        <div class="cell">
+          <span class="cell-label">Phone Number:</span>
+          <span class="cell-value">xxxxxxxxxx</span>
+        </div>
+        <div class="cell">
+          <span class="cell-label">IMEI:</span>
+          <span class="cell-value">xxxxxxxxxx</span>
+        </div>
+        <div class="cell">
+          <span class="cell-label">Service:</span>
+          <span class="cell-value">xxxxxxxxxx</span>
+        </div>
+        <div class="cell">
+          <span class="cell-label">Member Price:</span>
+          <span class="cell-value">$35</span>
+        </div>
       </div>
-      <div class="cell">
-        <span class="cell-label">Service:</span>
-        <span class="cell-value">Batery Replacement</span>
-      </div>
-      <div class="cell">
-        <span class="cell-label">Member Price:</span>
-        <span class="cell-value">$35</span>
-      </div>
-      <div class="cell mt48">
-        <span class="cell-label">Postcript:</span>
-        <span class="cell-value"
-          >This is my remark，This is my remarkThis is my remark</span
-        >
+    </div>
+    <div class="ptc-button-group mg0">
+      <div class="ptc-inner">
+        <button class="ptc-button" @click="state.step = 1">
+          Reselect time
+        </button>
+        <button class="ptc-button ptc-button--stroke">
+          Cancel appointment
+        </button>
       </div>
     </div>
   </div>
-  <div class="ptc-button-group">
-    <button class="ptc-button mb36" @click="state.step++">
-      Confirm appointment
-    </button>
-    <button class="ptc-button ptc-button--stroke" @click="state.step = 0">
-      Reselect
-    </button>
-  </div>
 </template>
 
 <script setup lang="ts">

src/pages/appointment/StepFour.vue

@@ -1,11 +1,55 @@
 <template>
-  <h3 class="ptc-title">Provide contact information</h3>
-  <div class="ptc-block">
-    <p class="t1">Is there anything to pay attention to, nothing to skip。</p>
-    <textarea placeholder="Please enter, up to 1000 characters"></textarea>
-  </div>
-  <div class="ptc-button-group">
-    <button class="ptc-button" @click="state.step++">CONTINUE</button>
+  <h3 class="ptc-title">Confirm appointment</h3>
+  <div class="ptc-wrapper">
+    <div class="ptc-block">
+      <div class="ptc-inner">
+        <p class="sub-title">
+          Monday, October 10 9:00 -9:30 PTC Browns Plains Kiosk
+        </p>
+        <div class="mt48">
+          <div class="cell">
+            <span class="cell-label">Phone Brand:</span>
+            <span class="cell-value">Apple</span>
+          </div>
+          <div class="cell">
+            <span class="cell-label">Phone Model:</span>
+            <span class="cell-value">iPhone 12</span>
+          </div>
+          <div class="cell">
+            <span class="cell-label">Phone Number:</span>
+            <span class="cell-value">6668888</span>
+          </div>
+          <div class="cell">
+            <span class="cell-label">IMEI:</span>
+            <span class="cell-value">iPhonaskfjoaxxx</span>
+          </div>
+          <div class="cell">
+            <span class="cell-label">Service:</span>
+            <span class="cell-value">Batery Replacement</span>
+          </div>
+          <div class="cell">
+            <span class="cell-label">Member Price:</span>
+            <span class="cell-value">$35</span>
+          </div>
+          <div class="cell mt48">
+            <span class="cell-label">Postcript:</span>
+            <span class="cell-value"
+              >This is my remark，This is my remarkThis is my remark</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ptc-button-group">
+      <div class="ptc-inner">
+        <button class="ptc-button" @click="state.step++">
+          Confirm appointment
+        </button>
+        <button class="ptc-button ptc-button--stroke" @click="state.step = 0">
+          Reselect
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 

src/pages/appointment/StepSix.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="container">
-    <div class="alert">
-      <i class="alert-icon"></i>
-      <p class="alert-message">Monday, October 10 9:00 -9:30</p>
-    </div>
-    <div class="action">
-      <i class="icon-calendar"></i><strong>Add to calendar ></strong>
-    </div>
-    <div class="note">
-      <p class="note-title">Preparations：</p>
-      <ul class="note-list">
-        <li class="note-item">· You need to back up the data in advance</li>
-        <li class="note-item">· You need to back up the data in advance</li>
-      </ul>
-    </div>
-    <div class="detail">
-      <div class="cell">
-        <span class="cell-label">Store:</span>
-        <span class="cell-value">xxxxxxxxxx</span>
-      </div>
-      <div class="cell">
-        <span class="cell-label">Phone Brand:</span>
-        <span class="cell-value">xxxxxxxxxx</span>
-      </div>
-      <div class="cell">
-        <strong class="primary">Navigation></strong>
-      </div>
-      <div class="cell">
-        <span class="cell-label">Phone Model:</span>
-        <span class="cell-value">xxxxxxxxxx</span>
-      </div>
-      <div class="cell">
-        <span class="cell-label">Phone Number:</span>
-        <span class="cell-value">xxxxxxxxxx</span>
-      </div>
-      <div class="cell">
-        <span class="cell-label">IMEI:</span>
-        <span class="cell-value">xxxxxxxxxx</span>
-      </div>
-      <div class="cell">
-        <span class="cell-label">Service:</span>
-        <span class="cell-value">xxxxxxxxxx</span>
-      </div>
-      <div class="cell">
-        <span class="cell-label">Member Price:</span>
-        <span class="cell-value">$35</span>
-      </div>
-    </div>
-    <div class="mt48">
-      <button class="ptc-button mb36" @click="state.step = 1">
-        Reselect time
-      </button>
-      <button class="ptc-button ptc-button--stroke">Cancel appointment</button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { state } from './store'
-</script>

src/pages/appointment/StepThree.vue

@@ -1,15 +1,51 @@
 <template>
-  <h3 class="ptc-title">Provide contact information</h3>
+  <h3 class="ptc-title">Confirm appointment</h3>
   <div class="ptc-block">
-    <p class="t1">
-      Please provide a mobile number so that the customer service can confirm
-      the details with you。
-    </p>
-    <p class="t2">Phone number</p>
-    <input type="text" class="ptc-input" placeholder="Please enter" />
+    <div class="ptc-inner">
+      <div class="shop-name">PTC Browns Plains Kiosk</div>
+      <div class="shop-address">
+        Browns Plains Grand Plaza Shopping Centre, Shop K007 27-49 Browns Plains
+        Road, Browns Plains, QLD, 4118 (07) 3059 1014
+      </div>
+      <div class="shop-action">
+        <span class="modify" @click="state.step = 0">Modify ></span>
+      </div>
+    </div>
   </div>
-  <div class="ptc-button-group">
-    <button class="ptc-button" @click="state.step++">CONTINUE</button>
+  <div class="ptc-block">
+    <div class="ptc-inner">
+      <p class="t2">Appointed time</p>
+      <div class="flex-ac space-between">
+        <strong class="s1">Mon,10</strong>
+        <strong class="s2">9：00 - 9：30</strong>
+        <span class="modify" @click="state.step--">Modify ></span>
+      </div>
+    </div>
+  </div>
+  <div class="ptc-block">
+    <div class="ptc-inner">
+      <p class="t1">
+        Please provide a mobile number so that the customer service can confirm
+        the details with you。
+      </p>
+      <p class="t2">Phone number</p>
+      <input type="text" class="ptc-input" placeholder="Please enter" />
+    </div>
+  </div>
+  <div class="ptc-wrapper">
+    <div class="ptc-block">
+      <div class="ptc-inner">
+        <p class="t1">
+          Is there anything to pay attention to, nothing to skip。
+        </p>
+        <textarea placeholder="Please enter, up to 1000 characters"></textarea>
+      </div>
+    </div>
+    <div class="ptc-button-group">
+      <div class="ptc-inner">
+        <button class="ptc-button" @click="state.step++">CONTINUE</button>
+      </div>
+    </div>
   </div>
 </template>
 

src/pages/appointment/StepTwo.vue

@@ -3,10 +3,13 @@
   <div class="ptc-block">
     <div class="ptc-inner">
       <div class="shop-name">PTC Browns Plains Kiosk</div>
-      <div class="shop-address">
+      <div class="shop-address pr">
         Browns Plains Grand Plaza Shopping Centre, Shop K007 27-49 Browns Plains
         Road, Browns Plains, QLD, 4118 (07) 3059 1014
       </div>
+      <div class="shop-action">
+        <span class="modify" @click="state.step--">Modify ></span>
+      </div>
     </div>
   </div>
   <div class="ptc-block">
@@ -14,9 +17,13 @@
       <div class="ptc-cell">
         <p class="ptc-label">Select date</p>
         <div class="ptc-value">
-          <PtcRadioGroup v-model="state.date" class="date-list">
+          <PtcRadioGroup
+            v-model="state.date"
+            class="date-list"
+            @change="state.period = ''"
+          >
             <PtcRadio class="date" value="1">Mon,10</PtcRadio>
-            <PtcRadio class="date" value="2">Mon,10</PtcRadio>
+            <PtcRadio class="date" value="2" :disabled="true">Mon,10</PtcRadio>
             <PtcRadio class="date" value="3">Mon,10</PtcRadio>
             <PtcRadio class="date" value="4">Mon,10</PtcRadio>
             <PtcRadio class="date" value="5">Mon,10</PtcRadio>
@@ -32,10 +39,12 @@
       <div class="ptc-cell">
         <p class="ptc-label">Selection period</p>
         <div class="ptc-value">
-          <div class="ptc-select">
-            <!-- <span class="ptc-select__placeholder">请选择</span> -->
-            <span class="ptc-select__value">9：00 - 9：30</span>
-          </div>
+          <PtcRadioGroup v-model="state.period" class="date-list">
+            <PtcRadio class="date" value="1">9：00 - 9：30</PtcRadio>
+            <PtcRadio class="date" value="2">9：30 - 10：00</PtcRadio>
+            <PtcRadio class="date" value="3">10：00 - 10：30</PtcRadio>
+            <PtcRadio class="date" value="4">10：30 - 11：00</PtcRadio>
+          </PtcRadioGroup>
         </div>
       </div>
     </div>
@@ -43,6 +52,12 @@
 </template>
 
 <script setup lang="ts">
+import { watch } from 'vue'
 import { PtcRadioGroup, PtcRadio } from '@/components/radio'
 import { state } from './store'
+
+watch(
+  () => state.period,
+  val => val && setTimeout(() => state.step++, 300)
+)
 </script>

src/pages/appointment/index.scss

@@ -1,4 +1,11 @@
 .p-appointment {
+  &.bg-fff {
+    background: #fff;
+    @include media-breakpoint-up(lg) {
+      margin-top: 64px;
+    }
+  }
+
   .search-wrap {
     display: flex;
     height: 88px;
@@ -91,6 +98,10 @@
         }
       }
     }
+    &-action {
+      text-align: right;
+      font-size: 0;
+    }
   }
 
   .date {
@@ -99,7 +110,7 @@
       flex-wrap: wrap;
       justify-content: space-between;
     }
-    width: 322px;
+    width: 47.5%;
     line-height: 116px;
     text-align: center;
     &:nth-child(n + 3) {
@@ -122,7 +133,7 @@
   textarea {
     display: block;
     padding: 22px 34px;
-    width: 678px;
+    width: 100%;
     height: 346px;
     border-radius: 8px;
     border: 2px solid #d9d9d9;
@@ -243,4 +254,24 @@
       }
     }
   }
+
+  .modify {
+    line-height: 44px;
+    font-size: 32px;
+    font-weight: 600;
+    color: $primary-color;
+  }
+  .s1 {
+    line-height: 56px;
+    font-size: 40px;
+    color: #1a1a1a;
+  }
+  .s2 {
+    font-size: 32px;
+    color: #1a1a1a;
+  }
+  .mg0 {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }

src/pages/appointment/index.vue

@@ -1,33 +1,45 @@
 <template>
-  <div class="p-appointment" :class="{ 'bg-gray': state.step < 5 }">
+  <div ref="root" class="p-appointment" :class="{ 'bg-fff': state.step === 4 }">
     <component :is="Component" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed, watch, onBeforeUnmount } from 'vue'
 import { onBeforeRouteLeave, useRouter } from 'vue-router'
 import StepOne from './StepOne.vue'
 import StepTwo from './StepTwo.vue'
 import StepThree from './StepThree.vue'
 import StepFour from './StepFour.vue'
 import StepFive from './StepFive.vue'
-import StepSix from './StepSix.vue'
 import { state } from './store'
-;(window as any).router = useRouter()
 
 const Component = computed(
-  () => [StepOne, StepTwo, StepThree, StepFour, StepFive, StepSix][state.step]
+  () => [StepOne, StepTwo, StepThree, StepFour, StepFive][state.step]
 )
+const fromPath = ref('')
+const root = ref<HTMLElement>()
 
 onBeforeRouteLeave((to, from) => {
-  console.log(to)
   if (state.step > 0) {
-    console.log(111)
     state.step--
     return false
   }
 })
+
+onBeforeUnmount(() =>
+  root.value?.parentElement?.classList?.remove('white-down-md')
+)
+watch(
+  () => state.step,
+  () => {
+    window.scrollTo(0, 0)
+    const classList = root.value?.parentElement?.classList
+    state.step === 4
+      ? classList?.add('white-down-md')
+      : classList?.remove('white-down-md')
+  }
+)
 </script>
 
 <style lang="scss" src="./index.scss"></style>

src/pages/mailing/index.vue

@@ -1,73 +1,83 @@
 <template>
-  <div class="p-mailing ptc-wrapper">
+  <div class="p-mailing">
     <template v-if="action === 'fill'">
       <h3 class="ptc-title">Fill in the mailing address</h3>
-      <div class="ptc-block">
-        <div class="ptc-inner">
-          <div class="title">Receive merchandise：Cleaning Kit (1)</div>
-          <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 class="ptc-wrapper">
+        <div class="ptc-block">
+          <div class="ptc-inner">
+            <div class="title">Receive merchandise：Cleaning Kit (1)</div>
+            <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>
-      <div class="ptc-button-group">
-        <div class="ptc-inner">
-          <button class="ptc-button" @click="submit">SUBMIT</button>
-          <button class="ptc-button ptc-button--stroke" @click="$router.back()">
-            BACK
-          </button>
+        <div class="ptc-button-group">
+          <div class="ptc-inner">
+            <button class="ptc-button" @click="submit">SUBMIT</button>
+            <button
+              class="ptc-button ptc-button--stroke"
+              @click="$router.back()"
+            >
+              BACK
+            </button>
+          </div>
         </div>
       </div>
     </template>
     <template v-else>
       <h3 class="ptc-title">Mailing information</h3>
-      <div class="ptc-block">
-        <div class="ptc-inner">
-          <div class="title">Merchandise：Cleaning Kit (1)</div>
-          <div class="info">
-            <div class="cell">
-              <span class="cell__label">Name:</span>
-              <span class="cell__value">Rebecca</span>
-            </div>
-            <div class="cell">
-              <span class="cell__label">Phone Number:</span>
-              <span class="cell__value">6668888</span>
-            </div>
-            <div class="cell">
-              <span class="cell__label">Address:</span>
-              <span class="cell__value">Rebeccalafeoxxx,xxxxx,xxxxx</span>
+      <div class="ptc-wrapper">
+        <div class="ptc-block">
+          <div class="ptc-inner">
+            <div class="title">Merchandise：Cleaning Kit (1)</div>
+            <div class="info">
+              <div class="cell">
+                <span class="cell__label">Name:</span>
+                <span class="cell__value">Rebecca</span>
+              </div>
+              <div class="cell">
+                <span class="cell__label">Phone Number:</span>
+                <span class="cell__value">6668888</span>
+              </div>
+              <div class="cell">
+                <span class="cell__label">Address:</span>
+                <span class="cell__value">Rebeccalafeoxxx,xxxxx,xxxxx</span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="ptc-button-group">
-        <div class="ptc-inner">
-          <button class="ptc-button ptc-button--stroke" @click="$router.back()">
-            BACK
-          </button>
+        <div class="ptc-button-group">
+          <div class="ptc-inner">
+            <button
+              class="ptc-button ptc-button--stroke"
+              @click="$router.back()"
+            >
+              BACK
+            </button>
+          </div>
         </div>
       </div>
     </template>

src/pages/renewal/index.vue

@@ -1,22 +1,24 @@
 <template>
-  <div class="p-renewal ptc-wrapper">
+  <div class="p-renewal">
     <h3 class="ptc-title">Renewal management</h3>
-    <div class="ptc-block">
-      <div class="ptc-inner">
-        <div class="cell">
-          <span class="cell__label">Product Name:</span>
-          <span class="cell__value">Lite</span>
+    <div class="ptc-wrapper">
+      <div class="ptc-block">
+        <div class="ptc-inner">
+          <div class="cell">
+            <span class="cell__label">Product Name:</span>
+            <span class="cell__value">Lite</span>
+          </div>
+          <div class="cell">
+            <span class="cell__label">Subscription method:</span>
+            <span class="cell__value">Annual</span>
+          </div>
+          <div class="primary">Unsubscribe ></div>
         </div>
-        <div class="cell">
-          <span class="cell__label">Subscription method:</span>
-          <span class="cell__value">Annual</span>
-        </div>
-        <div class="primary">Unsubscribe ></div>
       </div>
-    </div>
-    <div class="ptc-button-group">
-      <div class="ptc-inner">
-        <button class="ptc-button ptc-button--stroke">BACK</button>
+      <div class="ptc-button-group">
+        <div class="ptc-inner">
+          <button class="ptc-button ptc-button--stroke">BACK</button>
+        </div>
       </div>
     </div>
   </div>

src/style/_mixins.scss

@@ -35,6 +35,7 @@
 }
 
 $media-breakpoint-map: (
+  sm: $breakpoint-sm,
   md: $breakpoint-md,
   lg: $breakpoint-lg,
   xl: $breakpoint-xl
@@ -45,3 +46,27 @@ $media-breakpoint-map: (
     @content;
   }
 }
+
+@mixin media-breakpoint-only($size) {
+  @if $size == xs {
+    @media (max-width: $breakpint-sm - 0.02) {
+      @content;
+    }
+  } @else if $size == sm {
+    @media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md - 0.02) {
+      @content;
+    }
+  } @else if $size == md {
+    @media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg - 0.02) {
+      @content;
+    }
+  } @else if $size == lg {
+    @media (min-width: $breakpoint-lg) and (max-width: $breakpoint-xl - 0.02) {
+      @content;
+    }
+  } @else if $size == xl {
+    @media (min-width: $breakpoint-xl) {
+      @content;
+    }
+  }
+}

src/style/_variables.scss

@@ -6,6 +6,7 @@ $placeholder-color: #bebebe;
 
 $nav-bar-height: 116px;
 
+$breakpoint-sm: 480px;
 $breakpoint-md: 768px; // pads
 $breakpoint-lg: 992px; // desktops
 $breakpoint-xl: 1200px; // large desktops

src/style/atom.scss

@@ -17,6 +17,9 @@
   display: flex;
   align-items: center;
 }
+.space-between {
+  justify-content: space-between;
+}
 
 .mt48 {
   margin-top: 48px !important;

src/style/components.scss

@@ -1,8 +1,8 @@
 .ptc-wrapper {
   @include media-breakpoint-up(md) {
     background: #fff;
-    &:only-child {
-      min-height: 1112px;
+    &:only-of-type {
+      min-height: 1084px;
     }
     .ptc-block {
       margin-bottom: 0;
@@ -30,7 +30,6 @@
   font-size: 40px;
   font-weight: 600;
   color: #333;
-  background: #f7f7f7;
   @include media-breakpoint-up(lg) {
     padding-left: 0;
   }