部分适配

src/App.vue

@@ -43,7 +43,7 @@ const showNavBar = computed(() => !navBarIgnore.includes(route.path))
   background: #f7f7f7;
   overflow: hidden;
 
-  @media (min-width: 768px) {
+  @include media-breakpoint-up(md) {
     min-height: auto;
   }
 
@@ -54,7 +54,7 @@ const showNavBar = computed(() => !navBarIgnore.includes(route.path))
 .main-wrapper {
   overflow: hidden;
 
-  @media (min-width: 1200px) {
+  @include media-breakpoint-up(lg) {
     margin: auto;
     width: 1998px;
   }

src/pages/account/index.vue

@@ -179,7 +179,7 @@ watch(state, () => window.scrollTo(0, 0))
     margin-bottom: 24px;
   }
 
-  @media (min-width: 768px) {
+  @include media-breakpoint-up(md) {
     .ptc-block {
       margin-bottom: 0;
     }

src/pages/appointment/StepOne.vue

@@ -1,50 +1,52 @@
 <template>
   <h3 class="ptc-title">Choose a store</h3>
   <div class="ptc-block">
-    <form class="search-wrap" action="">
-      <input
-        type="search"
-        class="search-input ptc-input"
-        placeholder="Search by zip code"
-        @input="autocomplete"
-      />
-      <div role="button" class="search-btn ptc-button"></div>
-    </form>
-    <div v-if="showSuggestions" class="search-suggestions">
-      <div class="suggestion">PTC Browns Plains Kiosk</div>
-      <div class="suggestion">PTC Browns Plains Kiosk</div>
+    <div class="ptc-inner-md">
+      <form class="search-wrap" action="">
+        <input
+          type="search"
+          class="search-input ptc-input"
+          placeholder="Search by zip code"
+          @input="autocomplete"
+        />
+        <div role="button" class="search-btn ptc-button"></div>
+      </form>
+      <div v-if="showSuggestions" class="search-suggestions">
+        <div class="suggestion">PTC Browns Plains Kiosk</div>
+        <div class="suggestion">PTC Browns Plains Kiosk</div>
+      </div>
+      <template v-else>
+        <div class="tip">Nearby shops</div>
+        <ul class="shop-list">
+          <li class="shop-item border-bottom" @click="state.step++">
+            <div class="shop-name">
+              <span>PTC Browns Plains Kiosk</span>
+              <span>3.5KM</span>
+            </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-mark">
+              <i class="icon"></i>Available for appointment today
+            </div>
+          </li>
+          <li class="shop-item">
+            <div class="shop-name">
+              <span>PTC Browns Plains Kiosk</span>
+              <span>3.5KM</span>
+            </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-mark danger">
+              <i class="icon"></i>Available for appointment today
+            </div>
+          </li>
+        </ul>
+      </template>
     </div>
-    <template v-else>
-      <div class="tip">Nearby shops</div>
-      <ul class="shop-list">
-        <li class="shop-item border-bottom" @click="state.step++">
-          <div class="shop-name">
-            <span>PTC Browns Plains Kiosk</span>
-            <span>3.5KM</span>
-          </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-mark">
-            <i class="icon"></i>Available for appointment today
-          </div>
-        </li>
-        <li class="shop-item">
-          <div class="shop-name">
-            <span>PTC Browns Plains Kiosk</span>
-            <span>3.5KM</span>
-          </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-mark danger">
-            <i class="icon"></i>Available for appointment today
-          </div>
-        </li>
-      </ul>
-    </template>
   </div>
 </template>
 

src/pages/appointment/StepTwo.vue

@@ -1,42 +1,45 @@
 <template>
   <h3 class="ptc-title">Appointment</h3>
   <div class="ptc-block">
-    <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 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>
   </div>
   <div class="ptc-block">
-    <div class="ptc-cell">
-      <p class="ptc-label">Select date</p>
-      <div class="ptc-value">
-        <PtcRadioGroup v-model="state.date" class="date-list">
-          <PtcRadio class="date" value="1">Mon,10</PtcRadio>
-          <PtcRadio class="date" value="2">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>
-          <PtcRadio class="date" value="6">Mon,10</PtcRadio>
-          <PtcRadio class="date" value="7">Mon,10</PtcRadio>
-        </PtcRadioGroup>
+    <div class="ptc-inner">
+      <div class="ptc-cell">
+        <p class="ptc-label">Select date</p>
+        <div class="ptc-value">
+          <PtcRadioGroup v-model="state.date" class="date-list">
+            <PtcRadio class="date" value="1">Mon,10</PtcRadio>
+            <PtcRadio class="date" value="2">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>
+            <PtcRadio class="date" value="6">Mon,10</PtcRadio>
+            <PtcRadio class="date" value="7">Mon,10</PtcRadio>
+          </PtcRadioGroup>
+        </div>
       </div>
     </div>
   </div>
   <div class="ptc-block">
-    <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 class="ptc-inner">
+      <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>
         </div>
       </div>
     </div>
   </div>
-  <div class="ptc-wrap mt48">
-    <button class="ptc-button" @click="state.step++">CONTINUE</button>
-  </div>
 </template>
 
 <script setup lang="ts">

src/pages/benefits/index.vue

@@ -2,48 +2,52 @@
   <div class="p-benefits bg-gray">
     <h3 class="ptc-title">Member benefits</h3>
     <div class="ptc-block">
-      <div class="l1">
-        <i class="icon-lite"></i
-        ><strong class="ptc-text">Lite</strong>2021/09/01 to 2022/08/31
+      <div class="ptc-inner">
+        <div class="l1">
+          <i class="icon-lite"></i
+          ><strong class="ptc-text">Lite</strong>2021/09/01 to 2022/08/31
+        </div>
+        <p class="l2">iPhone 12</p>
+        <p class="l3">QWERTYUIO12345678</p>
+        <p class="l4">
+          <button class="ptc-button ptc-button--stroke">Renewal</button>
+        </p>
+        <p class="l5" @click="$router.push('/renewal')">Renewal management ></p>
       </div>
-      <p class="l2">iPhone 12</p>
-      <p class="l3">QWERTYUIO12345678</p>
-      <p class="l4">
-        <button class="ptc-button ptc-button--stroke">Renewal</button>
-      </p>
-      <p class="l5" @click="$router.push('/renewal')">Renewal management ></p>
     </div>
     <div class="ptc-block">
-      <div class="benefit benefit-a">
-        <p class="benefit-name">Unlimited</p>
-        <p class="benefit-desc">Avaliable 1</p>
-        <p class="benefit-sup">
-          Member price：<span class="highlight">$35</span>
-        </p>
-        <button class="ptc-button">Apply</button>
-      </div>
-      <div class="benefit benefit-b">
-        <p class="benefit-name">Phone Health Inspection Service</p>
-        <p class="benefit-desc">Avaliable 1</p>
-        <p class="benefit-sup">Available after 2021/06/01</p>
-        <button class="ptc-button">Nearby shops</button>
-      </div>
-      <div class="benefit benefit-c">
-        <p class="benefit-name">Technical Support</p>
-        <p class="benefit-desc">Available throughout the year</p>
-        <button class="ptc-button">Contact us</button>
-      </div>
-      <div class="benefit benefit-d">
-        <p class="benefit-name">Birthday Gift</p>
-        <p class="benefit-desc">
-          Pick up at the store in the month of your birthday, you can only enjoy
-          it once
-        </p>
-      </div>
-      <div class="benefit benefit-e">
-        <p class="benefit-name">Cleaning Kit</p>
-        <p class="benefit-desc">Give a gift of XX</p>
-        <button class="ptc-button">Send to me</button>
+      <div class="ptc-inner">
+        <div class="benefit benefit-a">
+          <p class="benefit-name">Unlimited</p>
+          <p class="benefit-desc">Avaliable 1</p>
+          <p class="benefit-sup">
+            Member price：<span class="highlight">$35</span>
+          </p>
+          <button class="ptc-button">Apply</button>
+        </div>
+        <div class="benefit benefit-b">
+          <p class="benefit-name">Phone Health Inspection Service</p>
+          <p class="benefit-desc">Avaliable 1</p>
+          <p class="benefit-sup">Available after 2021/06/01</p>
+          <button class="ptc-button">Nearby shops</button>
+        </div>
+        <div class="benefit benefit-c">
+          <p class="benefit-name">Technical Support</p>
+          <p class="benefit-desc">Available throughout the year</p>
+          <button class="ptc-button">Contact us</button>
+        </div>
+        <div class="benefit benefit-d">
+          <p class="benefit-name">Birthday Gift</p>
+          <p class="benefit-desc">
+            Pick up at the store in the month of your birthday, you can only
+            enjoy it once
+          </p>
+        </div>
+        <div class="benefit benefit-e">
+          <p class="benefit-name">Cleaning Kit</p>
+          <p class="benefit-desc">Give a gift of XX</p>
+          <button class="ptc-button">Send to me</button>
+        </div>
       </div>
     </div>
   </div>

src/pages/mailing/index.vue

@@ -2,65 +2,73 @@
   <div class="p-mailing bg-gray">
     <template v-if="action === 'fill'">
       <h3 class="ptc-title">Fill in the mailing address</h3>
-      <div class="ptc-block">
-        <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-block ptc-block--alone">
+        <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 class="ptc-wrap mt48">
-        <button class="ptc-button mb36" @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>
     </template>
     <template v-else>
       <h3 class="ptc-title">Mailing information</h3>
-      <div class="ptc-block">
-        <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-block ptc-block--alone">
+        <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 class="ptc-wrap mt48">
-        <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>
     </template>
   </div>
@@ -88,9 +96,6 @@ function submit() {
   .mb24 {
     margin-bottom: 24px;
   }
-  .mb36 {
-    margin-bottom: 36px;
-  }
   .cell {
     display: flex;
     font-size: 32px;

src/pages/renewal/index.vue

@@ -1,19 +1,23 @@
 <template>
-  <div class="p-renewal bg-gray">
+  <div class="p-renewal">
     <h3 class="ptc-title">Renewal management</h3>
-    <div class="ptc-block">
-      <div class="cell">
-        <span class="cell__label">Product Name:</span>
-        <span class="cell__value">Lite</span>
+    <div class="ptc-block ptc-block--alone">
+      <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="ptc-text">Unsubscribe ></div>
       </div>
-      <div class="cell">
-        <span class="cell__label">Subscription method:</span>
-        <span class="cell__value">Annual</span>
-      </div>
-      <div class="ptc-text">Unsubscribe ></div>
     </div>
-    <div class="ptc-wrap mt48">
-      <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>
 </template>

src/style/_mixins.scss

@@ -33,3 +33,14 @@
     }
   }
 }
+
+$media-breakpoint-map: (
+  md: $breakpoint-md,
+  lg: $breakpoint-lg
+);
+
+@mixin media-breakpoint-up($size) {
+  @media (min-width: map-get($media-breakpoint-map, $size)) {
+    @content;
+  }
+}

src/style/_variables.scss

@@ -7,4 +7,4 @@ $placeholder-color: #bebebe;
 $nav-bar-height: 116px;
 
 $breakpoint-md: 768px; // pad
-$breakpoint-lg: 992px; // desktop
+$breakpoint-lg: 1200px; // desktop

src/style/components.scss

@@ -52,7 +52,7 @@
   font-size: 40px;
   font-weight: 600;
   color: #333;
-  @media (min-width: 1200px) {
+  @include media-breakpoint-up(lg) {
     padding-left: 0;
   }
 }
@@ -61,25 +61,34 @@
   margin-bottom: 24px;
   padding: 48px 36px;
   background: #fff;
-  @media (min-width: 768px) {
-    padding: 48px 0;
+  @include media-breakpoint-up(md) {
+    padding: 64px 0;
+    &--alone {
+      min-height: 1084px;
+    }
   }
 }
 
 .ptc-inner {
-  @media (min-width: 768px) {
+  @include media-breakpoint-up(md) {
     margin: auto;
     padding: 0 36px;
     width: 750px;
   }
 }
+.ptc-inner-md {
+  @include media-breakpoint-up(md) {
+    margin: auto;
+    width: 1168px;
+  }
+}
 
 .ptc-button-group {
   margin: 48px 36px 0;
   .ptc-button + .ptc-button {
     margin-top: 36px;
   }
-  @media (min-width: 768px) {
+  @include media-breakpoint-up(md) {
     margin: 0;
     padding: 48px 0 64px;
     background: #fff;

src/utils/rem.js

@@ -6,7 +6,7 @@ export function setRem() {
   let width = Math.max(doc.documentElement.clientWidth, window.innerWidth || 0)
 
   // 屏幕宽度>=768，采用PC排版
-  width = width >= 768 ? 375 : width
+  width = width >= 768 ? 375 : width > 480 ? 480 : width
 
   const fz = ~~((width * 100000) / 100) / 10000
   doc.getElementsByTagName('html')[0].style.cssText = 'font-size: ' + fz + 'px'