mall-web-ssr/components/default/RightBar.vue

<template>
  <div class="right-bar">
    <ul class="right-bar-center">
      <li class="right-bar-item">
        <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()" 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" 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" 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()" 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>
</template>
<script>
  import { scrollTo } from '~utils/scroll'

  export default {
    name: 'right-bar',
    methods: {
      toTop () {
        scrollTo('body', 300)
      },
      toBottom () {
        scrollTo(window.scrollY + window.innerHeight, 300)
      },
      // 打开留言板
      onLeaveMessageClick () {
      }
    }
  }
</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;
    right: 0;
    top: 0;
    width: 36px;
    height: 100%;

    .right-bar-center {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      list-style: none;
      padding: 0;
      width: 100%;
    }

    .right-bar-bottom {
      position: absolute;
      right: 0;
      bottom: 20px;
      width: 36px;
    }

    .right-bar-item {
      a {
        position: relative;
        display: block;
        width: 100%;
        color: #fff;
        background-color: #5078CB;
        text-align: center;
        -webkit-transition: background-color ease .5s;
        -moz-transition: background-color ease 0.5s;
        -ms-transition: background-color ease 0.5s;
        -o-transition: background-color ease 0.5s;
        transition: background-color ease 0.5s;
        z-index: 20;
        font-size: 12px;
      }
    }
  }
</style>