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">
          <i class="iconfont icon-shopping-cart icon-xlg"></i>
        </nuxt-link>

      </li>
      <li class="right-bar-item">
        <a @click="onLeaveMessageClick()">
          <i class="iconfont icon-liuyan icon-xlg"></i>
        </a>
      </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">
          <i class="iconfont icon-kefu icon-xlg"></i>
        </a>
      </li>
    </ul>
    <ul class="right-bar-bottom">
      <li class="right-bar-item">
        <nuxt-link to="/user/browsingHistory">
          <i class="iconfont icon-zuji icon-xlg"></i>
        </nuxt-link>
      </li>
      <li class="right-bar-item">
        <a @click="toTop()">
          <i class="iconfont icon-arrow-up icon-xlg"></i>
        </a>
      </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>
  .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;
        padding: 5px 0;
        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;
      }
    }
  }
</style>