继续适配

src/App.vue

@@ -6,6 +6,7 @@
   />
   <div
     class="main-container"
+    :class="{ 'white-down-md': state.bgWhite }"
     :style="$route.path === '/' ? 'min-height: auto; padding-bottom: 0;' : ''"
   >
     <router-view :key="$route.fullPath" class="main-wrapper" />
@@ -31,12 +32,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
+import { state } from './store'
 
 const route = useRoute()
 const navBarIgnore = ['/login', '/register']
 const showNavBar = computed(() => !navBarIgnore.includes(route.path))
+
+watch(
+  () => route.fullPath,
+  () => (state.bgWhite = false)
+)
 </script>
 
 <style lang="scss">
@@ -46,9 +53,8 @@ const showNavBar = computed(() => !navBarIgnore.includes(route.path))
   background: #f7f7f7;
   overflow: hidden;
   &.white-down-md {
-    @media (max-width: $breakpoint-md - 0.02) {
+    @include media-breakpoint-down(md) {
       background: #fff;
-      padding-bottom: 0;
     }
   }
 
@@ -76,6 +82,13 @@ const showNavBar = computed(() => !navBarIgnore.includes(route.path))
   @include media-breakpoint-up(xl) {
     width: 999px * 2;
   }
+
+  .white-down-md & {
+    background: #fff;
+    @include media-breakpoint-up(lg) {
+      margin-top: 64px;
+    }
+  }
 }
 
 .contents {

src/pages/appointment/StepTwo.vue

@@ -58,6 +58,6 @@ import { state } from './store'
 
 watch(
   () => state.period,
-  val => val && setTimeout(() => state.step++, 300)
+  val => state.date && val && setTimeout(() => state.step++, 200)
 )
 </script>

src/pages/appointment/index.scss

@@ -1,11 +1,4 @@
 .p-appointment {
-  &.bg-fff {
-    background: #fff;
-    @include media-breakpoint-up(lg) {
-      margin-top: 64px;
-    }
-  }
-
   .search-wrap {
     display: flex;
     height: 88px;

src/pages/appointment/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div ref="root" class="p-appointment" :class="{ 'bg-fff': state.step === 4 }">
+  <div class="p-appointment">
     <component :is="Component" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onBeforeUnmount } from 'vue'
+import { computed, watch } from 'vue'
 import { onBeforeRouteLeave, useRouter } from 'vue-router'
 import StepOne from './StepOne.vue'
 import StepTwo from './StepTwo.vue'
@@ -13,31 +13,26 @@ import StepThree from './StepThree.vue'
 import StepFour from './StepFour.vue'
 import StepFive from './StepFive.vue'
 import { state } from './store'
+import { state as rootState } from '@/store'
 
 const Component = computed(
   () => [StepOne, StepTwo, StepThree, StepFour, StepFive][state.step]
 )
-const fromPath = ref('')
-const root = ref<HTMLElement>()
 
 onBeforeRouteLeave((to, from) => {
-  if (state.step > 0) {
+  if (to.path === history.state.back && to.path !== '/' && state.step > 0) {
     state.step--
     return false
+  } else {
+    state.step = 0
   }
 })
 
-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')
+    rootState.bgWhite = state.step === 4
   }
 )
 </script>

src/pages/fill-order/StepOne.vue

@@ -1,64 +1,74 @@
 <template>
-  <div class="step-1">
+  <div class="step-1 ptc-wrapper">
     <div class="ptc-block">
-      <p class="ptc-label">Choose a version</p>
-      <PtcRadioGroup v-model="state.product" style="display: flex">
-        <PtcRadio class="version" value="lite">
-          <i class="icon-lite"></i>
-          <span class="mt18">Lite</span>
-        </PtcRadio>
-        <PtcRadio class="version" value="pro">
-          <i class="icon-pro"></i>
-          <span class="mt18">Pro</span>
-        </PtcRadio>
-      </PtcRadioGroup>
-      <div class="version-desc" :class="{ pro: state.product === 'pro' }">
-        Introduction of member products，Introduction of member products
+      <div class="ptc-inner">
+        <p class="ptc-label">Choose a version</p>
+        <PtcRadioGroup v-model="state.product" style="display: flex">
+          <PtcRadio class="version" value="lite">
+            <i class="icon-lite"></i>
+            <span class="mt18">Lite</span>
+          </PtcRadio>
+          <PtcRadio class="version" value="pro">
+            <i class="icon-pro"></i>
+            <span class="mt18">Pro</span>
+          </PtcRadio>
+        </PtcRadioGroup>
+        <div class="version-desc" :class="{ pro: state.product === 'pro' }">
+          Introduction of member products，Introduction of member products
+        </div>
       </div>
     </div>
     <div class="ptc-block">
-      <p class="ptc-label">Choose a subscription method</p>
-      <PtcRadioGroup v-model="state.type">
-        <PtcRadio class="method" :value="1">
-          <span class="cost">$99</span>
-          <span class="name">Annual</span>
-          <span class="ptc-tag">-25% OFF</span>
-        </PtcRadio>
-        <PtcRadio class="method" :value="2">
-          <span class="cost">$12.5</span>
-          <span class="name"> Monthly&nbsp; Activation fee $20</span>
-        </PtcRadio>
-      </PtcRadioGroup>
+      <div class="ptc-inner">
+        <p class="ptc-label">Choose a subscription method</p>
+        <PtcRadioGroup v-model="state.type">
+          <PtcRadio class="method" :value="1">
+            <span class="cost">$99</span>
+            <span class="name">Annual</span>
+            <span class="ptc-tag">-25% OFF</span>
+          </PtcRadio>
+          <PtcRadio class="method" :value="2">
+            <span class="cost">$12.5</span>
+            <span class="name"> Monthly&nbsp; Activation fee $20</span>
+          </PtcRadio>
+        </PtcRadioGroup>
+      </div>
     </div>
     <div class="ptc-block">
-      <p class="ptc-label">Do you have a discount code?</p>
-      <div v-if="!showCoupon" class="input-wrap pr">
-        <input
-          v-model="state.couponCode"
-          class="ptc-input"
-          placeholder="Enter promotional code"
-        />
-        <button class="input-btn" @click="showCoupon = true">sbumit</button>
-      </div>
-      <div v-else class="coupon-wrap">
-        <div class="coupon">
-          <p class="p1">PTC CARE PLUS</p>
-          <p class="p2">NEWCOMER DISCOUNT</p>
-          <p class="p3">- $10</p>
+      <div class="ptc-inner">
+        <p class="ptc-label">Do you have a discount code?</p>
+        <div v-if="!showCoupon" class="input-wrap pr">
+          <input
+            v-model="state.couponCode"
+            class="ptc-input"
+            placeholder="Enter promotional code"
+          />
+          <button class="input-btn" @click="showCoupon = true">sbumit</button>
         </div>
-        <div class="action">
-          <span class="code">87889122</span>
-          <span class="primary" @click="showCoupon = false">Revise</span>
+        <div v-else class="coupon-wrap">
+          <div class="coupon">
+            <p class="p1">PTC CARE PLUS</p>
+            <p class="p2">NEWCOMER DISCOUNT</p>
+            <p class="p3">- $10</p>
+          </div>
+          <div class="action">
+            <span class="code">87889122</span>
+            <span class="primary" @click="showCoupon = false">Revise</span>
+          </div>
         </div>
       </div>
     </div>
 
     <div class="total">
-      <p>total<strong>$99</strong></p>
-      <p class="highlight">($10 discounted)</p>
+      <div class="ptc-inner">
+        <p>total<strong>$99</strong></p>
+        <p class="highlight">($10 discounted)</p>
+      </div>
     </div>
     <div class="ptc-button-group">
-      <button class="ptc-button" @click="$emit('next')">NEXT</button>
+      <div class="ptc-inner">
+        <button class="ptc-button" @click="$emit('next')">NEXT</button>
+      </div>
     </div>
   </div>
 </template>

src/pages/fill-order/StepThree.vue

@@ -1,14 +1,41 @@
 <template>
   <div class="step-3">
     <div class="ptc-block">
-      <p class="text">
-        Please enter a valid email address, we will send you the latest status
-        of the order through this contact method。
-      </p>
-      <input class="ptc-input" placeholder="email address" />
+      <div class="ptc-inner">
+        <p class="ptc-label">Version & Price</p>
+        <div class="detail">
+          <strong class="s1">Lite</strong>
+          <span style="font-size: 0"
+            ><strong class="s2">$99</strong><span class="s3">Annual</span></span
+          >
+          <strong class="s4" @click="$router.go(-2)">Modify ></strong>
+        </div>
+      </div>
     </div>
-    <div class="ptc-button-group">
-      <button class="ptc-button">$89 NEXT</button>
+    <div class="ptc-block">
+      <div class="ptc-inner">
+        <p class="ptc-label">Phone model</p>
+        <div class="detail">
+          <strong class="s1">iPhone 13 Pro</strong>
+          <strong class="s4" @click="$router.back()">Modify ></strong>
+        </div>
+      </div>
+    </div>
+    <div class="ptc-wrapper">
+      <div class="ptc-block">
+        <div class="ptc-inner">
+          <p class="text">
+            Please enter a valid email address, we will send you the latest
+            status of the order through this contact method。
+          </p>
+          <input class="ptc-input" placeholder="email address" />
+        </div>
+      </div>
+      <div class="ptc-button-group">
+        <div class="ptc-inner">
+          <button class="ptc-button">$89 NEXT</button>
+        </div>
+      </div>
     </div>
   </div>
 </template>

src/pages/fill-order/StepTwo.vue

@@ -1,36 +1,57 @@
 <template>
   <div class="step-2">
     <div class="ptc-block">
-      <p class="ptc-label">Choose a mobile phone brand</p>
-      <PtcRadioGroup v-model="state.brand" class="device-list">
-        <PtcRadio
-          v-for="brand of brandList"
-          :key="brand.name"
-          class="device-item"
-          :value="brand.name"
-        >
-          <img class="device-img" />
-          <p class="device-name">{{ brand.name }}</p>
-        </PtcRadio>
-      </PtcRadioGroup>
+      <div class="ptc-inner">
+        <p class="ptc-label">Version & Price</p>
+        <div class="detail">
+          <strong class="s1">Lite</strong>
+          <span style="font-size: 0"
+            ><strong class="s2">$99</strong><span class="s3">Annual</span></span
+          >
+          <strong class="s4" @click="$router.back()">Modify ></strong>
+        </div>
+      </div>
     </div>
-    <template v-if="state.brand">
-      <div class="ptc-block">
-        <p class="ptc-label">Choose phone model</p>
-        <PtcRadioGroup v-model="state.model" class="device-list">
+    <div class="ptc-block">
+      <div class="ptc-inner">
+        <p class="ptc-label">Choose a mobile phone brand</p>
+        <PtcRadioGroup
+          v-model="state.brand"
+          class="device-list"
+          @change="state.model = ''"
+        >
           <PtcRadio
-            v-for="model of modelList"
-            :key="model.name"
+            v-for="brand of brandList"
+            :key="brand.name"
             class="device-item"
-            :value="model.name"
+            :value="brand.name"
           >
             <img class="device-img" />
-            <p class="device-name">{{ model.name }}</p>
+            <p class="device-name">{{ brand.name }}</p>
           </PtcRadio>
         </PtcRadioGroup>
       </div>
-      <div class="ptc-button-group">
-        <button class="ptc-button" @click="$emit('next')">$89 NEXT</button>
+    </div>
+    <template v-if="state.brand">
+      <div class="ptc-block">
+        <div class="ptc-inner">
+          <p class="ptc-label">Choose phone model</p>
+          <PtcRadioGroup
+            v-model="state.model"
+            class="device-list"
+            @change="onSelectModel"
+          >
+            <PtcRadio
+              v-for="model of modelList"
+              :key="model.name"
+              class="device-item"
+              :value="model.name"
+            >
+              <img class="device-img" />
+              <p class="device-name">{{ model.name }}</p>
+            </PtcRadio>
+          </PtcRadioGroup>
+        </div>
       </div>
     </template>
   </div>
@@ -40,7 +61,7 @@
 import { PtcRadioGroup, PtcRadio } from '@/components/radio'
 import { state } from './store'
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'next'): void
 }>()
 
@@ -56,6 +77,10 @@ const modelList = [
   { name: 'iPhone12', img: '' },
   { name: 'iPhoneSE', img: '' },
 ]
+
+function onSelectModel() {
+  setTimeout(() => emit('next'), 200)
+}
 </script>
 
 <style lang="scss">
@@ -63,6 +88,8 @@ const modelList = [
   &-list {
     display: flex;
     flex-wrap: wrap;
+    width: 680px;
+    margin: auto;
   }
 
   &-item {

src/pages/fill-order/index.vue

@@ -28,5 +28,29 @@ function next() {
 <style lang="scss">
 .p-fill-order {
   background: #f7f7f7;
+
+  .detail {
+    display: flex;
+    align-items: flex-end;
+    .s1,
+    .s2 {
+      font-size: 40px;
+      font-weight: bold;
+      color: #1a1a1a;
+    }
+    .s2 {
+      margin: 0 20px 0 48px;
+    }
+    .s3 {
+      font-size: 28px;
+      color: #1a1a1a;
+    }
+    .s4 {
+      margin-left: auto;
+      font-size: 32px;
+      font-weight: bold;
+      color: $primary-color;
+    }
+  }
 }
 </style>

src/pages/fill-order/store.ts

@@ -1,7 +1,7 @@
 import { reactive } from 'vue'
 
 export const state = reactive({
-  product: '',
+  product: 'lite',
   type: -1,
   couponCode: '',
   brand: '',

src/pages/gift-card/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-gift-card">
-    <div class="fixed">
+    <div>
       <h3 class="ptc-title bg-gray">My gift card</h3>
       <div class="tabs border-bottom">
         <div class="tab" :class="{ active: type === 0 }" @click="type = 0">
@@ -17,36 +17,38 @@
         </div>
       </div>
     </div>
-    <div class="card-list">
-      <div class="card card-a">
-        <p class="card-title">Pull new reward gift card</p>
-        <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
-        <p class="card-value">- $10</p>
-        <p class="card-desc">PTC offline store use</p>
-      </div>
-      <div class="card card-b">
-        <p class="card-title">Pull new reward gift card</p>
-        <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
-        <p class="card-value">- $10 <span class="sub">100 available</span></p>
-        <p class="card-desc">PTC offline store use</p>
-      </div>
-      <div class="card card-c">
-        <p class="card-title">Pull new reward gift card</p>
-        <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
-        <p class="card-value">- $10</p>
-        <p class="card-desc">PTC offline store use</p>
-      </div>
-      <div class="card card-d">
-        <p class="card-title">Pull new reward gift card</p>
-        <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
-        <p class="card-value">- $10 <span class="sub">100 available</span></p>
-        <p class="card-desc">PTC offline store use</p>
-      </div>
-      <div class="card card-e">
-        <p class="card-title">Pull new reward gift card</p>
-        <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
-        <p class="card-value">- $10 <span class="sub">100 available</span></p>
-        <p class="card-desc">PTC offline store use</p>
+    <div class="card-list-wrap">
+      <div class="card-list">
+        <div class="card card-a">
+          <p class="card-title">Pull new reward gift card</p>
+          <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
+          <p class="card-value">- $10</p>
+          <p class="card-desc">PTC offline store use</p>
+        </div>
+        <div class="card card-b">
+          <p class="card-title">Pull new reward gift card</p>
+          <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
+          <p class="card-value">- $10 <span class="sub">100 available</span></p>
+          <p class="card-desc">PTC offline store use</p>
+        </div>
+        <div class="card card-c">
+          <p class="card-title">Pull new reward gift card</p>
+          <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
+          <p class="card-value">- $10</p>
+          <p class="card-desc">PTC offline store use</p>
+        </div>
+        <div class="card card-d">
+          <p class="card-title">Pull new reward gift card</p>
+          <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
+          <p class="card-value">- $10 <span class="sub">100 available</span></p>
+          <p class="card-desc">PTC offline store use</p>
+        </div>
+        <div class="card card-e">
+          <p class="card-title">Pull new reward gift card</p>
+          <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
+          <p class="card-value">- $10 <span class="sub">100 available</span></p>
+          <p class="card-desc">PTC offline store use</p>
+        </div>
       </div>
     </div>
   </div>
@@ -68,7 +70,9 @@ const type = ref(0)
   }
   .tabs {
     display: flex;
-    justify-content: space-around;
+    @include media-breakpoint-down(md) {
+      justify-content: space-around;
+    }
     line-height: 104px;
     background: #fff;
   }
@@ -77,6 +81,9 @@ const type = ref(0)
     font-size: 32px;
     font-weight: 500;
     color: #666;
+    @include media-breakpoint-up(md) {
+      margin-left: 140px;
+    }
     &.active {
       font-weight: bold;
       color: $primary-color;
@@ -103,18 +110,32 @@ const type = ref(0)
     }
   }
 
-  .card-list {
-    margin-top: 232px;
+  .card-list-wrap {
     padding: 50px 34px 0;
+    background: #fff;
+  }
+  .card-list {
+    margin: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    @include media-breakpoint-up(md) {
+      width: 680px * 2 + 52px;
+    }
   }
   .card {
     margin-bottom: 48px;
+    // width: 680px;
+    width: 100%;
     height: 296px;
     text-align: center;
     font-weight: bold;
     background-size: 100% 100%;
     line-height: 1;
     overflow: hidden;
+    @include media-breakpoint-up(md) {
+      width: 680px;
+    }
 
     &-title {
       margin: 32px 0 16px;

src/pages/imei/index.vue

@@ -1,28 +1,38 @@
 <template>
   <div v-if="action === 'bind'" class="p-imei">
-    <h3 class="title">
+    <h3 class="ptc-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 class="ptc-wrapper">
+      <div class="ptc-block">
+        <div class="ptc-inner">
+          <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>
+      </div>
+      <div class="ptc-button-group">
+        <div class="ptc-inner">
+          <button class="ptc-button">BIND IMEI</button>
+        </div>
+      </div>
     </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。
+    <h3 class="ptc-title">View mobile IMEI</h3>
+    <div class="ptc-block">
+      <div class="guide ptc-inner">
+        <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 class="guide-img"></div>
     </div>
   </div>
 </template>
@@ -33,43 +43,19 @@ defineProps<{ action: 'bind' | 'view' }>()
 
 <style lang="scss">
 .p-imei {
-  background: #f7f7f7;
-
-  .title {
-    padding: 36px 24px;
-    line-height: 56px;
-    font-size: 40px;
-    font-weight: 600;
-    color: #333;
+  .label {
+    font-size: 32px;
+    color: #999;
   }
-
-  .form {
-    padding: 48px 36px;
-    background: #fff;
-
-    .label {
-      font-size: 32px;
-      color: #999;
-    }
-    .control {
-      margin: 48px 0;
-    }
-    .tip {
-      font-size: 32px;
-      color: $primary-color;
-    }
+  .control {
+    margin: 48px 0;
   }
-
-  .ptc-button {
-    display: block;
-    margin: 48px auto 0;
-    width: 678px;
+  .tip {
+    font-size: 32px;
+    color: $primary-color;
   }
 
   .guide {
-    flex: 1;
-    padding: 48px 36px;
-    background: #fff;
     &-txt {
       line-height: 44px;
       font-size: 32px;

src/pages/pay-result/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-pay-result">
-    <div v-if="status === 'success'" class="pay-success">
+    <div v-if="status === 'success'" class="pay-success ptc-inner">
       <div class="alert">
         <i class="alert-icon icon-success"></i>
         <p class="alert-message">
@@ -34,7 +34,7 @@
       </div>
     </div>
 
-    <div v-else class="pay-fail">
+    <div v-else class="pay-fail ptc-inner">
       <div class="alert">
         <i class="alert-icon icon-warn"></i>
         <p class="alert-message">Your membership service purchase failed</p>
@@ -49,7 +49,11 @@
 </template>
 
 <script setup lang="ts">
+import { state } from '@/store'
+
 defineProps<{ status: 'success' | 'fail' }>()
+
+state.bgWhite = true
 </script>
 
 <style lang="scss">
@@ -103,7 +107,7 @@ defineProps<{ status: 'success' | 'fail' }>()
     color: #333;
   }
 
-  .ptc-button:nth-child(2) {
+  .ptc-button--stroke {
     margin: 36px 0 64px;
   }
 }

src/store.ts

@@ -0,0 +1,5 @@
+import { reactive } from 'vue'
+
+export const state = reactive({
+  bgWhite: false,
+})

src/style/_mixins.scss

@@ -47,6 +47,12 @@ $media-breakpoint-map: (
   }
 }
 
+@mixin media-breakpoint-down($size) {
+  @media (max-width: map-get($media-breakpoint-map, $size) - 0.02) {
+    @content;
+  }
+}
+
 @mixin media-breakpoint-only($size) {
   @if $size == xs {
     @media (max-width: $breakpint-sm - 0.02) {