维修记录

src/pages/appointment/index.scss

@@ -212,7 +212,6 @@
     justify-content: space-between;
     align-items: flex-start;
     .text {
-      flex: 1;
       font-size: 32px;
       font-weight: 600;
       color: #333333;
@@ -239,6 +238,13 @@
     display: flex;
     justify-content: flex-end;
     margin-top: 48px;
+    @include media-breakpoint-up(md) {
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 24px;
+      width: 1188px;
+    }
+
     .ptc-button {
       width: 328px;
       height: 92px;
@@ -247,6 +253,57 @@
       }
     }
   }
+  @include media-breakpoint-up(md) {
+    .inner {
+      margin: auto;
+      width: 1188px;
+    }
+    .block-title {
+      justify-content: flex-start;
+      .text {
+        width: 50%;
+      }
+      .ptc-tag {
+        margin-left: 10%;
+      }
+    }
+    .cell-group {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      .cell {
+        &:nth-child(2n + 1) {
+          width: 50%;
+        }
+        &:nth-child(2n) {
+          width: 40%;
+        }
+        &:last-child {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    .wrapper {
+      display: flex;
+      padding-left: 176px;
+    }
+    .inner {
+      margin: 0;
+    }
+    .button-group {
+      display: block;
+      width: auto;
+      margin-left: 130px;
+      margin-top: 152px;
+      .ptc-button + .ptc-button {
+        margin-left: 0;
+        margin-top: 24px;
+      }
+    }
+  }
 
   .modify {
     line-height: 44px;

src/pages/appointment/records.vue

@@ -1,45 +1,47 @@
 <template>
-  <div class="p-appointment bg-gray">
+  <div class="p-appointment">
     <h3 class="ptc-title">Confirm appointment</h3>
-    <div class="ptc-block">
-      <div class="block-title">
-        <span class="text"
-          >Monday, October 10 9:00-9:30 PTC Browns Plains Kiosk</span
-        >
-        <span class="ptc-tag" :class="{ s1: 1, s2: 0, s3: 0 }"
-          >Under review</span
-        >
-      </div>
-      <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 class="ptc-block wrapper">
+      <div class="inner">
+        <div class="block-title">
+          <span class="text"
+            >Monday, October 10 9:00-9:30 PTC Browns Plains Kiosk</span
           >
+          <span class="ptc-tag" :class="{ s1: 1, s2: 0, s3: 0 }"
+            >Under review</span
+          >
+        </div>
+        <div class="cell-group 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 class="button-group">

src/pages/my-order/index.vue

@@ -170,7 +170,7 @@
       margin-left: 90px;
       margin-top: 122px;
       .ptc-button + .ptc-button {
-        margin-left: 0;
+        margin-right: 0;
         margin-top: 24px;
       }
     }