细节完善

src/pages/appointment/StepOne.vue

@@ -1,7 +1,7 @@
 <template>
   <h3 class="ptc-title">Choose a store</h3>
   <div class="ptc-block">
-    <div class="ptc-inner-md">
+    <div class="ptc-inner-md pr">
       <form class="search-wrap" action="">
         <input
           type="search"
@@ -15,7 +15,7 @@
         <div class="suggestion">PTC Browns Plains Kiosk</div>
         <div class="suggestion">PTC Browns Plains Kiosk</div>
       </div>
-      <template v-else>
+      <div class="shop-wrap">
         <div class="tip">Nearby shops</div>
         <ul class="shop-list">
           <li class="shop-item border-bottom" @click="state.step++">
@@ -45,7 +45,7 @@
             </div>
           </li>
         </ul>
-      </template>
+      </div>
     </div>
   </div>
 </template>

src/pages/appointment/StepTwo.vue

@@ -34,7 +34,7 @@
       </div>
     </div>
   </div>
-  <div class="ptc-block">
+  <div v-if="state.date" class="ptc-block">
     <div class="ptc-inner">
       <div class="ptc-cell">
         <p class="ptc-label">Selection period</p>

src/pages/appointment/index.scss

@@ -15,8 +15,30 @@
     border-radius: 0 8px 8px 0;
     background: $primary-color url(@img/search.png) no-repeat center;
     background-size: 48px 48px;
+    @include media-breakpoint-up(md) {
+      width: 206px;
+    }
   }
 
+  .search-suggestions {
+    @include media-breakpoint-down(md) {
+      + .shop-wrap {
+        display: none;
+      }
+    }
+    @include media-breakpoint-up(md) {
+      position: absolute;
+      left: 0;
+      top: 116px;
+      padding: 0 64px 32px;
+      width: 962px;
+      max-height: 464px * 2;
+      background: #FFFFFF;
+      box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.08);
+      overflow: auto;
+      z-index: 2;
+    }
+  }
   .suggestion {
     padding: 48px 0 40px;
     font-size: 32px;
@@ -55,6 +77,7 @@
       color: #1a1a1a;
       span {
         &:last-child {
+          margin-left: 32px;
           font-size: 24px;
           font-weight: 400;
           color: #999;