登录、订单适配

src/App.vue

@@ -52,6 +52,9 @@ watch(
   padding-bottom: 48px;
   background: #f7f7f7;
   overflow: hidden;
+  &:first-child {
+    background: lightblue;
+  }
   &.white-down-md {
     @include media-breakpoint-down(md) {
       background: #fff;
@@ -62,7 +65,7 @@ watch(
     min-height: auto;
   }
   @include media-breakpoint-only(md) {
-    padding-bottom: 0;
+    // padding-bottom: 0;
   }
   @include media-breakpoint-up(lg) {
     padding-bottom: 64px;

src/pages/login/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div v-if="!showSurprise" class="p-login">
-    <i class="nav-home"></i>
+    <div class="nav-home">
+      <i class="icon"></i><span class="text">HOME</span>
+    </div>
     <div class="logo"></div>
     <div class="container">
       <div class="ptc-form">

src/pages/my-order/index.vue

@@ -1,58 +1,60 @@
 <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="ptc-block wrapper" :class="{ pb24: 1 }">
+      <div>
+        <div class="cell-group border-bottom">
           <div class="cell">
-            <span class="cell__label">Activation fee</span>
-            <span class="cell__value">$20.00</span>
+            <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">Membership fee</span>
-            <span class="cell__value">$8.95</span>
+            <span class="cell__label">Order Number</span>
+            <span class="cell__value">12345678910</span>
           </div>
           <div class="cell">
-            <span class="cell__label">Discount</span>
-            <span class="cell__value highlight">-$10.00</span>
+            <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>
-        </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>
+        <button class="ptc-button ptc-button--stroke">Cancel</button>
       </div>
     </div>
   </div>
@@ -75,6 +77,34 @@
           margin-top: 24px;
         }
       }
+      @include media-breakpoint-up(md) {
+        margin: auto;
+        width: 1258px;
+        &:first-child {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          .cell {
+            width: 45%;
+            justify-content: flex-start;
+            + .cell {
+              margin-top: 20px;
+            }
+            &:nth-child(2) {
+              margin-top: 0;
+            }
+            &__label {
+              margin-right: 14px;
+              &::after {
+                content: ':';
+              }
+            }
+          }
+        }
+        .ptc-tag {
+          margin-left: 0;
+        }
+      }
     }
 
     display: flex;
@@ -110,13 +140,38 @@
 
   .button-group {
     display: flex;
-    justify-content: flex-end;
+    flex-direction: row-reverse;
+    justify-content: flex-start;
     margin-top: 24px;
+    @include media-breakpoint-up(md) {
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 24px;
+      width: 1258px;
+    }
+
     .ptc-button {
       width: 328px;
       height: 92px;
       + .ptc-button {
-        margin-left: 26px;
+        margin-right: 26px;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    .wrapper {
+      display: flex;
+      padding-left: 176px;
+    }
+    .button-group {
+      display: block;
+      width: auto;
+      margin-left: 90px;
+      margin-top: 122px;
+      .ptc-button + .ptc-button {
+        margin-left: 0;
+        margin-top: 24px;
       }
     }
   }

src/pages/register/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="p-register">
-    <i class="nav-home"></i>
+    <div class="nav-home">
+      <i class="icon"></i><span class="text">HOME</span>
+    </div>
     <div class="logo"></div>
     <div class="container">
       <div class="ptc-form">

src/style/login.scss

@@ -1,8 +1,33 @@
 .p-login,
 .p-register {
-  background: $primary-color;
-  overflow: hidden;
+  .nav-home {
+    display: flex;
+    align-items: flex-end;
+    position: absolute;
+    top: 38px;
+    right: 44px;
 
+    @include media-breakpoint-up(md) {
+      top: 48px;
+      right: 50%;
+      transform: translateX(-450px);
+    }
+
+    .icon {
+      @include icon('@img/home.png', 44px);
+    }
+    .text {
+      display: none;
+      margin-left: 16px;
+      font-size: 28px;
+      font-weight: bold;
+      line-height: 1.2;
+      color: #fff;
+      @include media-breakpoint-up(md) {
+        display: block;
+      }
+    }
+  }
   .logo {
     display: block;
     margin: 120px auto 60px;