邀请好友适配

src/App.vue

@@ -9,7 +9,13 @@
     :class="{ 'white-down-md': state.bgWhite }"
     :style="$route.path === '/' ? 'min-height: auto; padding-bottom: 0;' : ''"
   >
-    <router-view :key="$route.fullPath" class="main-wrapper" />
+    <router-view
+      :key="$route.fullPath"
+      :class="[
+        'main-wrapper',
+        { 'main-wrapper-fluid': $route.path === '/invite' },
+      ]"
+    />
   </div>
 
   <ul v-if="$route.path === '/'" class="contents">
@@ -85,6 +91,9 @@ watch(
   @include media-breakpoint-up(xl) {
     width: 999px * 2;
   }
+  &-fluid {
+    width: 100%;
+  }
 
   .white-down-md & {
     background: #fff;

src/pages/appointment/StepThree.vue

@@ -16,8 +16,8 @@
     <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>
+        <strong class="p1">Mon,10</strong>
+        <strong class="p2">9：00 - 9：30</strong>
         <span class="modify" @click="state.step--">Modify ></span>
       </div>
     </div>

src/pages/appointment/index.scss

@@ -254,12 +254,12 @@
     font-weight: 600;
     color: $primary-color;
   }
-  .s1 {
+  .p1 {
     line-height: 56px;
     font-size: 40px;
     color: #1a1a1a;
   }
-  .s2 {
+  .p2 {
     font-size: 32px;
     color: #1a1a1a;
   }

src/pages/appointment/index.vue

@@ -18,9 +18,10 @@ import { state as rootState } from '@/store'
 const Component = computed(
   () => [StepOne, StepTwo, StepThree, StepFour, StepFive][state.step]
 )
+const fromPath = history.state.back
 
 onBeforeRouteLeave((to, from) => {
-  if (to.path === history.state.back && to.path !== '/' && state.step > 0) {
+  if (to.path === fromPath && to.path !== '/' && state.step > 0) {
     state.step--
     return false
   } else {

src/pages/fill-order/StepThree.vue

@@ -33,7 +33,7 @@
       </div>
       <div class="ptc-button-group">
         <div class="ptc-inner">
-          <button class="ptc-button">$89 NEXT</button>
+          <button class="ptc-button">SUBMIT</button>
         </div>
       </div>
     </div>

src/pages/invite/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-invite">
-    <div class="main">
+    <div class="p-top">
       <div class="award">
         <p class="award-name">Invite friends to get</p>
         <div class="award-worth">
@@ -19,52 +19,59 @@
         </p>
       </div>
       <div class="methods">
-        <div class="method">
-          <p class="method-title">Share your exclusive link with friends</p>
-          <p class="ptc-comboinput">
-            <input
-              type="text"
-              class="ptc-input"
-              readonly
-              value="http://www.ptcplis.com/2333453"
-            />
-            <button class="ptc-button">Copy Link</button>
-          </p>
-        </div>
-        <div class="method">
-          <p class="method-title">Email invitation</p>
-          <textarea
-            placeholder="Enter email addresses, multiple mailboxes are separated by“ ,”"
-          ></textarea>
+        <div class="ptc-inner-md">
+          <div class="method">
+            <p class="method-title">Share your exclusive link with friends</p>
+            <p class="ptc-comboinput">
+              <input
+                type="text"
+                class="ptc-input"
+                readonly
+                value="http://www.ptcplis.com/2333453"
+              />
+              <button class="ptc-button">Copy Link</button>
+            </p>
+          </div>
+          <div class="method">
+            <p class="method-title">Email invitation</p>
+            <textarea
+              placeholder="Enter email addresses, multiple mailboxes are separated by“ ,”"
+            ></textarea>
+          </div>
+          <button class="ptc-button">Send invitation</button>
         </div>
-        <button class="ptc-button">Send invitation</button>
       </div>
     </div>
-    <div class="block">
-      <h3 class="block-title">My Reward $90</h3>
-      <ul class="records">
-        <li v-for="n of 5" :key="n" class="record">
-          <span class="left">John</span>
-          <span class="center">2021/09/02</span>
-          <span class="right">$10</span>
-        </li>
-      </ul>
-    </div>
-    <div class="block">
-      <h3 class="block-title">Activity Details</h3>
-      <div class="details">
-        <p>
-          After a friend places an order, you can get a corresponding coupon
-          according to the amount of his first order, which can be used for the
-          purchase of membership services and consumption at PTC's offline
-          outlets.
-        </p>
-        <p class="mt48">1. The invitee is an unregistered new user;</p>
-        <p class="mt48">
-          2. On the 10th of each month/at 23:00 every day, the invitation
-          rewards will be settled, and the coupons will be issued to the
-          personal account
-        </p>
+
+    <div class="p-bottom">
+      <h3 class="ptc-title">My Reward $90</h3>
+      <div class="block records">
+        <div class="ptc-inner-md">
+          <ul>
+            <li v-for="n of 5" :key="n" class="record">
+              <span class="left">John</span>
+              <span class="center">2021/09/02</span>
+              <span class="right">$10</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <h3 class="ptc-title">Activity Details</h3>
+      <div class="block details">
+        <div class="ptc-inner-md">
+          <p>
+            After a friend places an order, you can get a corresponding coupon
+            according to the amount of his first order, which can be used for
+            the purchase of membership services and consumption at PTC's offline
+            outlets.
+          </p>
+          <p class="mt48">1. The invitee is an unregistered new user;</p>
+          <p class="mt48">
+            2. On the 10th of each month/at 23:00 every day, the invitation
+            rewards will be settled, and the coupons will be issued to the
+            personal account
+          </p>
+        </div>
       </div>
     </div>
   </div>
@@ -72,16 +79,46 @@
 
 <style lang="scss">
 .p-invite {
-  .main {
-    padding-top: 8px;
+  .p-top {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    padding: 8px 0 48px;
     background: $primary-color;
     overflow: hidden;
+    @include media-breakpoint-up(md) {
+      padding: 40px 0 64px;
+    }
   }
-  .award {
-    @include icon('@img/coupon.png', 736px, 370px);
+  .p-bottom {
     margin: auto;
+    @include media-breakpoint-up(lg) {
+      width: 768px * 2;
+    }
+    @include media-breakpoint-up(xl) {
+      width: 999px * 2;
+    }
+  }
+
+  .award,
+  .desc,
+  .methods {
+    width: 90%;
+  }
+  .award {
+    @include icon('@img/coupon.png', 98%, 370px);
     text-align: center;
     overflow: hidden;
+    @include media-breakpoint-up(md) {
+      margin-left: -40px;
+      height: 500px;
+      width: 880px;
+    }
+    @include media-breakpoint-up(xl) {
+      margin-right: 108px;
+      width: 960px;
+    }
     &-name {
       margin-top: 66px;
       font-weight: bold;
@@ -91,6 +128,7 @@
     &-worth {
       margin: 32px 0 24px;
       line-height: 56px;
+      font-weight: 500;
       color: #193059;
       .num {
         font-size: 56px;
@@ -104,13 +142,33 @@
       font-size: 28px;
       color: #9aa8c5;
     }
+    @include media-breakpoint-up(md) {
+      &-name {
+        margin-top: 100px;
+        font-size: 60px;
+      }
+      &-worth {
+        margin: 54px 0 44px;
+        .num {
+          font-size: 80px;
+        }
+        .txt {
+          font-size: 56px;
+        }
+      }
+      &-instruction {
+        font-size: 40px;
+      }
+    }
   }
   .desc {
-    margin: auto;
     padding: 52px 26px 26px;
-    width: 680px;
     border: 2px solid rgba(218, 225, 239, 0.25);
     color: #dae1ef;
+    @include media-breakpoint-up(md) {
+      // margin-left: 134px;
+      width: 680px;
+    }
     &-title {
       @include thin-border(bottom, rgba(218, 225, 239, 0.25));
       display: flex;
@@ -134,11 +192,20 @@
     }
   }
   .methods {
-    margin: 36px auto 48px;
+    margin-top: 36px;
     padding: 64px 36px;
-    width: 680px;
     background: #fff;
     border-radius: 16px;
+
+    @include media-breakpoint-up(md) {
+      border-radius: 0;
+    }
+    @include media-breakpoint-up(lg) {
+      width: 768px * 2;
+    }
+    @include media-breakpoint-up(xl) {
+      width: 999px * 2;
+    }
   }
   .method {
     &:nth-child(1) {
@@ -156,6 +223,9 @@
     .ptc-input {
       height: 88px;
       font-size: 24px;
+      @include media-breakpoint-up(md) {
+        font-size: 28px;
+      }
     }
   }
   textarea {
@@ -169,13 +239,8 @@
     line-height: 40px;
   }
 
-  .block-title {
-    padding: 24px 36px;
-    background: #f7f7f7;
-    font-size: 40px;
-    font-weight: 600;
-    color: #333333;
-    line-height: 56px;
+  .block {
+    background: #fff;
   }
   .records {
     padding: 0 36px;
@@ -209,5 +274,11 @@
     line-height: 44px;
     color: #666;
   }
+
+  @include media-breakpoint-up(md) {
+    .ptc-comboinput .ptc-button {
+      width: 322px;
+    }
+  }
 }
 </style>