l-hammer/YDTemplate

/**
 * Created by LHammer on 18/03/04.
 * Float-menu 悬浮导航公用样式
 */

$float-menu-prefix-cls: 'float-menu';
$menu-item-color: white;
$menu-item-hover-color: #ff8819;
.#{$float-menu-prefix-cls} {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 233px;
  height: 278px;
  margin: {
    top: -139px;
    left: 425px;
  }
  padding: {
    top: 112px;
    left: 36px;
  }
  font: {
    size: 20px;
    weight: 500;
  }
  z-index: 99;
  background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/03/spring_gift/pc/float_menu.png') no-repeat center;
  &-item {
    display: inline-block;
    width: 143px;
    line-height: 39px;
    text-align: center;
    color: $menu-item-color;
    &:hover,
    &.active {
      color: $menu-item-hover-color;
    }
  }
}

/**
 * Html template e.g.
 *
<div class="float-menu">
    <a href="#floor2" class="float-menu-item active">返现添收益</a>
    <a href="#floor3" class="float-menu-item">土豪有惊喜</a>
    <a href="#floor4" class="float-menu-item">封标奖励*2</a>
    <a href="javascript: void(0);" id="scrollTop" class="float-menu-item">返回顶部</a>
</div>
 */