Browse Source

头部适配

冯诚 3 years ago
parent
commit
ae3970b232
5 changed files with 286 additions and 90 deletions
  1. 4 3
      src/App.vue
  2. BIN
      src/assets/phone.png
  3. 280 86
      src/components/nav-bar/index.vue
  4. 1 1
      src/pages/gift-card/index.vue
  5. 1 0
      src/style/_variables.scss

+ 4 - 3
src/App.vue

@@ -77,8 +77,8 @@ watch(
     padding-bottom: 64px;
   }
 
-  .nav-bar-wrap + & {
-    padding-top: $nav-bar-height;
+  .nav-bar + & {
+    padding-top: var(--nav-bar-height);
   }
 }
 .main-wrapper {
@@ -104,7 +104,8 @@ watch(
 }
 
 .contents {
-  margin-top: $nav-bar-height + 50px;
+  margin-top: var(--nav-bar-height);
+  padding-top: 50px;
   text-align: center;
   line-height: 74px;
   font-size: 36px;

BIN
src/assets/phone.png


+ 280 - 86
src/components/nav-bar/index.vue

@@ -1,42 +1,57 @@
 <template>
-  <div :class="['nav-bar-wrap', { 'nav-bar-wrap--fixed': fixed }]">
-    <div class="nav-bar">
-      <i v-if="showNavIcons" class="icon-menu" @click="showMenu = true"></i>
-      <router-link class="icon-logo" to="/"></router-link>
-      <i v-if="showNavIcons" class="icon-mine" @click="showMine = true"></i>
-    </div>
-    <transition enter-active-class="fadeIn" leave-active-class="fadeOut">
-      <div v-if="showMenu" class="nav-panel nav-panel-menu">
-        <div class="header">
-          <i class="logo"></i>
-          <i class="close" @click="showMenu = false"></i>
+  <div :class="['nav-bar', { 'nav-bar--fixed': fixed }]">
+    <div class="nav-bar-left">
+      <div class="nav-icons">
+        <i v-if="showNavIcons" class="icon-menu" @click="showMenu = true"></i>
+        <router-link class="icon-logo" to="/"></router-link>
+        <i v-if="showNavIcons" class="icon-mine" @click="showMine = true"></i>
+      </div>
+      <transition enter-active-class="fadeIn" leave-active-class="fadeOut">
+        <div v-show="showMenu" class="nav-menu nav-links">
+          <div class="nav-menu-header">
+            <i class="logo"></i>
+            <i class="close" @click="showMenu = false"></i>
+          </div>
+          <div class="nav-menu-body">
+            <ul class="nav-links-inner">
+              <li class="nav-link">
+                <router-link to="/appointment">REPAIR BOOKING</router-link>
+              </li>
+              <li class="nav-link">
+                <router-link to="/fill-order">ONLINE SHOP</router-link>
+              </li>
+              <li class="nav-link">PTC Care Plus</li>
+              <li class="nav-link">SOTRE LOCATION</li>
+              <li class="nav-link">CONTACT US</li>
+            </ul>
+          </div>
         </div>
-        <div class="body">
-          <ul class="menu">
-            <li class="menu-item">
-              <router-link to="/appointment">REPAIR BOOKING</router-link>
-            </li>
-            <li class="menu-item">
-              <router-link to="/fill-order">ONLINE SHOP</router-link>
-            </li>
-            <li class="menu-item">PTC Care Plus</li>
-            <li class="menu-item">SOTRE LOCATION</li>
-            <li class="menu-item">CONTACT US</li>
-          </ul>
+      </transition>
+    </div>
+    <div class="nav-bar-right">
+      <div class="user flex-ac" @click="showMine = !showMine">
+        <i class="icon-mine"></i>
+        <span class="user-name">Rebecca</span>
+      </div>
+      <div class="contact">
+        <i class="icon-phone"></i>
+        <div>
+          <p class="tel">400-100-100</p>
+          <p class="time">Mon-Fri &nbsp;9:00-17:00</p>
         </div>
       </div>
-    </transition>
+    </div>
     <transition enter-active-class="fadeIn" leave-active-class="fadeOut">
       <div
-        v-if="showMine"
-        class="nav-panel nav-panel-mine"
+        v-show="showMine"
+        class="nav-menu nav-dropdown"
         :class="{ 'is-member': 1 }"
       >
-        <div class="header">
+        <div class="nav-menu-header">
           <i class="logo"></i>
           <i class="close" @click="showMine = false"></i>
         </div>
-        <div class="body">
+        <div class="nav-menu-body">
           <div class="info">
             <div class="p1">
               <p class="name">Hi, Rebecca</p>
@@ -71,28 +86,31 @@
               </div>
             </div>
           </div>
-          <ul class="list">
-            <li class="item">
+          <div class="role" @click="$router.push('/account')">
+            {{ 1 ? 'Pro  Member >' : 'Ordinary  Member >' }}
+          </div>
+          <ul class="dropdown-list">
+            <li class="dropdown-item">
               <router-link to="/appointment-list"
                 >MY REPAIR REQUEST</router-link
               >
             </li>
-            <li class="item">
+            <li class="dropdown-item">
               <router-link to="/order">MY ORDER</router-link>
             </li>
-            <li class="item">
+            <li class="dropdown-item">
               <router-link to="/gift-card">MY DISCOUNT COUPON</router-link>
             </li>
-            <li class="item">
+            <li class="dropdown-item">
               <router-link to="/invite"
                 >INVITE FRIENDS
                 <span class="ptc-tag">Get a $10 coupon</span></router-link
               >
             </li>
-            <li class="item">
+            <li class="dropdown-item">
               <router-link to="/account">ACCOUNT INFORMATION</router-link>
             </li>
-            <li class="item">SIGN OUT</li>
+            <li class="dropdown-item">SIGN OUT</li>
           </ul>
         </div>
       </div>
@@ -124,7 +142,20 @@ watch(
 </script>
 
 <style lang="scss">
-.nav-bar-wrap {
+:root {
+  --nav-bar-height: 118px;
+  @include media-breakpoint-up(md) {
+    --nav-bar-height: 148px;
+  }
+  @include media-breakpoint-up(lg) {
+    --nav-bar-height: 168px;
+  }
+}
+
+.nav-bar {
+  height: var(--nav-bar-height);
+  background: #fff;
+  border-bottom: 1px solid #d9d9d9;
   &--fixed {
     position: fixed;
     left: 0;
@@ -133,16 +164,76 @@ watch(
     z-index: 10;
   }
 
-  .nav-bar {
+  &-left {
+    @include media-breakpoint-up(md) {
+      display: flex;
+      align-items: center;
+    }
+  }
+  &-right {
+    display: none;
+    flex-shrink: 0;
+    @include media-breakpoint-up(md) {
+      display: flex;
+      align-items: center;
+      margin-left: 100px;
+
+      .user .icon-mine {
+        display: block;
+        margin-right: 8px;
+        width: 32px;
+        height: 32px;
+      }
+      .user-name {
+        font-size: 32px;
+        font-weight: 600;
+        color: $primary-color;
+      }
+      .contact {
+        position: relative;
+        display: none;
+        margin-left: 30px;
+        padding-left: 32px;
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 2px;
+          height: 72px;
+          background: #dae1ef;
+        }
+      }
+      .tel {
+        line-height: 44px;
+        font-size: 32px;
+        font-weight: 600;
+        color: $primary-color;
+      }
+      .time {
+        line-height: 44px;
+        font-size: 32px;
+        font-weight: 500;
+        color: #999;
+      }
+    }
+    @media (min-width: 1400px) {
+      .contact {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .nav-icons {
     box-sizing: content-box;
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 40px;
-    height: $nav-bar-height;
-    background: #fff;
-    border-bottom: 1px solid #d9d9d9;
+    height: var(--nav-bar-height);
   }
   .icon-menu {
     @include icon('@img/menu.png', 44px);
@@ -157,8 +248,36 @@ watch(
     top: 50%;
     transform: translate(-50%, -50%);
   }
+  .icon-phone {
+    @include icon('@img/phone.png', 76px);
+    margin-right: 26px;
+  }
+
+  @include media-breakpoint-up(md) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 32px;
+    .icon-menu,
+    .icon-mine {
+      display: none;
+    }
+    .icon-logo {
+      position: static;
+      margin-right: 32px;
+      transform: none;
+    }
+  }
+  @include media-breakpoint-up(lg) {
+    padding: 0 120px;
+    .icon-logo {
+      margin-right: 126px;
+      width: 207px;
+      height: 99px;
+    }
+  }
 
-  .nav-panel {
+  .nav-menu {
     display: flex;
     flex-direction: column;
     position: fixed;
@@ -166,32 +285,41 @@ watch(
     right: 0;
     top: 0;
     bottom: 0;
-    &-menu {
-      background: $primary-color;
-    }
-    &-mine {
-      background: #fff;
-    }
-  }
-  .header {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: $nav-bar-height;
 
-    .logo {
-      @include icon('@img/logo.png', 130px, 70px);
+    &-header {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--nav-bar-height);
+
+      .logo {
+        @include icon('@img/logo.png', 130px, 70px);
+      }
+      .close {
+        @include icon('@img/close.png', 44px);
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 40px;
+      }
     }
-    .close {
-      @include icon('@img/close.png', 44px);
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 40px;
+
+    &-body {
+      flex: 1;
+      overflow: auto;
     }
   }
-  .nav-panel-menu {
+  .nav-links {
+    background: $primary-color;
+    @include media-breakpoint-up(md) {
+      display: block !important;
+      position: static;
+      background: none;
+      .nav-menu-header {
+        display: none;
+      }
+    }
     .logo {
       background-image: url(@img/logo2.png);
       transform: scale(1.03);
@@ -200,32 +328,75 @@ watch(
       background-image: url(@img/close2.png);
     }
   }
+  .nav-dropdown {
+    background: #fff;
+
+    @include media-breakpoint-up(md) {
+      left: auto;
+      right: 20px;
+      bottom: auto;
+      top: var(--nav-bar-height);
+      margin-top: 2px;
+      box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.08);
+      z-index: 2;
 
-  .body {
-    flex: 1;
-    overflow: auto;
+      .nav-menu-header,
+      .info,
+      .ptc-tag {
+        display: none;
+      }
+      .dropdown-list {
+        margin-top: 0;
+      }
+    }
+    @media (min-width: 1400px) {
+      right: 520px;
+    }
   }
 
-  .menu {
+  .nav-links-inner {
     margin-top: 36px;
     line-height: 144px;
     font-size: 40px;
     font-weight: 600;
     color: #fff;
 
-    &-item {
-      padding-left: 196px;
-      background-color: $primary-color;
-      transition: background-color 0.3s ease;
-      &:active {
-        background-color: $primary-color-lighten;
+    @include media-breakpoint-up(md) {
+      display: flex;
+      margin-top: 0;
+      font-size: 28px;
+      font-weight: 400;
+      line-height: 44px;
+      color: #193059;
+    }
+    @include media-breakpoint-up(lg) {
+      font-size: 32px;
+    }
+  }
+  .nav-link {
+    padding-left: 196px;
+    background-color: $primary-color;
+    transition: background-color 0.3s ease;
+    &:active {
+      background-color: $primary-color-lighten;
+    }
+    @include media-breakpoint-up(md) {
+      padding-left: 0;
+      background-color: #fff !important;
+      + .nav-link {
+        margin-left: 48px;
       }
-
-      a {
-        display: block;
-        width: 100%;
+    }
+    @include media-breakpoint-up(lg) {
+      + .nav-link {
+        margin-left: 64px;
       }
     }
+
+    a {
+      display: block;
+      width: 100%;
+    }
   }
 
   .info {
@@ -345,10 +516,31 @@ watch(
     }
   }
 
-  .list {
+  .is-member {
+    .p1,
+    .role {
+      color: #fff;
+      background: $primary-color;
+    }
+  }
+
+  .role {
+    display: none;
+    line-height: 80px;
+    text-align: center;
+    font-size: 32px;
+    font-weight: 600;
+    color: #193059;
+    background: #e9ebf0;
+
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+  .dropdown-list {
     margin-top: 24px;
   }
-  .item {
+  .dropdown-item {
     position: relative;
     display: flex;
     align-items: center;
@@ -361,6 +553,15 @@ watch(
     background-repeat: no-repeat;
     background-size: 32px 32px;
     transition: background-color 0.3s ease;
+    cursor: pointer;
+    @include media-breakpoint-up(md) {
+      padding-left: 80px;
+      padding-right: 24px;
+      background-position: 24px center;
+      font-size: 28px;
+      line-height: 124px;
+    }
+    &:hover,
     &:active {
       background-color: #f2f5fb;
     }
@@ -388,12 +589,5 @@ watch(
       width: 100%;
     }
   }
-
-  .is-member {
-    .p1 {
-      color: #fff;
-      background: $primary-color;
-    }
-  }
 }
 </style>

+ 1 - 1
src/pages/gift-card/index.vue

@@ -64,7 +64,7 @@ const type = ref(0)
 .p-gift-card {
   .fixed {
     position: fixed;
-    top: $nav-bar-height;
+    top: var(--nav-bar-height);
     left: 0;
     right: 0;
   }

+ 1 - 0
src/style/_variables.scss

@@ -5,6 +5,7 @@ $border-color: #D9D9D9;
 $placeholder-color: #bebebe;
 
 $nav-bar-height: 116px;
+$nav-bar-height-md: 168px;
 
 $breakpoint-sm: 480px;
 $breakpoint-md: 768px; // pads