右侧导航

components/default/RightBar.vue

@@ -2,32 +2,42 @@
   <div class="right-bar">
     <ul class="right-bar-center">
       <li class="right-bar-item">
-        <nuxt-link to="/user/cart">
+        <nuxt-link to="/user/cart" class="title">
           <i class="iconfont icon-shopping-cart icon-xlg"></i>
         </nuxt-link>
-
+        <div class="sidebar-menu"><a href="" title="我的购物车" target="_blank">我的购物车<em><span>(<span>10</span>)</span></em></a></div>
       </li>
       <li class="right-bar-item">
-        <a @click="onLeaveMessageClick()">
+        <a @click="onLeaveMessageClick()" class="title">
           <i class="iconfont icon-liuyan icon-xlg"></i>
         </a>
+        <div class="sidebar-menu"><a href="" title="留言板" target="_blank">留言板</a></div>
       </li>
       <li class="right-bar-item contact-menu">
-        <a href="http://wpa.qq.com/msgrd?v=3&uin=3432892085&site=www.ubtoc.com&menu=yes" target="_blank">
+        <a href="http://wpa.qq.com/msgrd?v=3&uin=3432892085&site=www.ubtoc.com&menu=yes" target="_blank" class="title">
           <i class="iconfont icon-kefu icon-xlg"></i>
         </a>
+        <div class="contact-us sidebar-menu">
+          <p>在线客服：<img src="/images/all/songguo.png" /><a href="http://wpa.qq.com/msgrd?v=3&uin=3432892085&site=www.ubtoc.com&menu=yes" class="contact-btn" target="_blank">联系客服</a></p>
+          <p>服务电话：400-830-1818</p>
+          <p>服务邮箱：yrsc@usoftchina.com</p>
+          <p>工作时间：</p>
+          <p>周一至周五 9:00-18:00</p>
+        </div>
       </li>
     </ul>
     <ul class="right-bar-bottom">
       <li class="right-bar-item">
-        <nuxt-link to="/user/browsingHistory">
+        <nuxt-link to="/user/browsingHistory" class="title">
           <i class="iconfont icon-zuji icon-xlg"></i>
         </nuxt-link>
+        <div class="sidebar-menu"><a href="" title="浏览记录" target="_blank">浏览记录</a></div>
       </li>
       <li class="right-bar-item">
-        <a @click="toTop()">
+        <a @click="toTop()" class="title">
           <i class="iconfont icon-arrow-up icon-xlg"></i>
         </a>
+        <div class="sidebar-menu"><a @click="toTop()" title="返回顶部" target="_blank">返回顶部</a></div>
       </li>
     </ul>
   </div>
@@ -52,6 +62,87 @@
   }
 </script>
 <style lang="scss" scoped>
+  em,i{
+    font-style: inherit;
+  }
+  .right-bar ul li{
+    position: relative;
+  }
+  .right-bar ul li .sidebar-menu {
+    position: absolute;
+    display: block;
+    right: -100%;
+    top: 0px;
+    bottom: 0;
+    width: 120px;
+    line-height: 38px;
+    height: 38px;
+    color: #ffffff;
+    background: #555;
+    -webkit-transform: translateX(100%);
+    -moz-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    -o-transform: translateX(100%);
+    transform: translateX(100%);
+    -webkit-transition: transform .5s;
+    -moz-transition: transform .5s;
+    -ms-transition: transform .5s;
+    -o-transition: transform .5s;
+    transition: transform .5s;
+    z-index: 19;
+  }
+  .right-bar ul li .sidebar-menu a{
+    background-color: #555555;
+  }
+  .right-bar ul li:hover a{
+    background-color: #555555;
+  }
+  .right-bar ul li:hover .sidebar-menu {
+    display: block;
+    -webkit-transform: translateX(-72px);
+    -moz-transform: translateX(-72px);
+    -ms-transform: translateX(-72px);
+    -o-transform: translateX(-72px);
+    transform: translateX(-72px);
+  }
+  .right-bar ul li .contact-us{
+    /*right: 200px;*/
+    height: 180px;
+    padding-top: 10px;
+    width: 210px;
+    top: -76px;
+  }
+  .right-bar ul li .contact-us p{
+    line-height: 33px;
+    text-align: left;
+    padding-left: 10px;
+    margin-bottom: 0;
+    white-space: nowrap;
+    font-size: 12px;
+  }
+  .right-bar ul li .contact-us .contact-btn{
+    width: 62px;
+    height: 18px;
+    line-height: 18px;
+    background: #ef7f03;
+    display: inline-block;
+    text-align: center;
+    color: #fff;
+    font-size: 12px;
+    border-radius: 5px;
+    padding: 0;
+  }
+  .right-bar-item{
+    width: 36px;
+    height: 38px;
+  }
+  .right-bar .right-bar-item a.title{
+    display: inline-block;
+    width: 36px;
+    height: 38px;
+    line-height: 38px;
+    padding: 0;
+  }
   .right-bar {
     position: fixed;
     z-index: 1000;
@@ -80,7 +171,6 @@
       a {
         position: relative;
         display: block;
-        padding: 5px 0;
         width: 100%;
         color: #fff;
         background-color: #5078CB;
@@ -91,6 +181,7 @@
         -o-transition: background-color ease 0.5s;
         transition: background-color ease 0.5s;
         z-index: 20;
+        font-size: 12px;
       }
     }
   }

components/main/Search.vue

@@ -136,7 +136,9 @@
 </script>
 <style lang="scss" scoped>
   @import '~assets/scss/variables';
-
+  .form-control{
+    border-radius: 0;
+  }
   .search-box {
     width: 470px;
     height: 40px;
@@ -150,6 +152,7 @@
     .search-btn {
       font-size: 16px;
       width: 78px;
+      border-radius: 0;
     }
 
     .search-hot {