|
|
@@ -44,16 +44,30 @@
|
|
|
<div class="n-i sortable">
|
|
|
<div class="name">直播</div>
|
|
|
</div>
|
|
|
+ <div class="n-i customize" title="自定义">
|
|
|
+ <i class="n-icon-sort"></i><p>排序</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="n-i gotop">
|
|
|
+ <div class="s-line"></div>
|
|
|
+ <div class="btn_gotop" title="返回顶部"></div>
|
|
|
+ </div>
|
|
|
+ <div class="n-i n-i-mlink">
|
|
|
+ <a href="#" target="_blank" @mouseover="rotate">
|
|
|
+ <div class="mlink-dl-msg"></div>
|
|
|
+ <div class="n-i-mlink-bg" ref="mlinkBg" ></div>
|
|
|
+ </a>
|
|
|
</div>
|
|
|
- <div class="n-i n-i-mlink"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
-
|
|
|
+ methods: {
|
|
|
+ rotate() {
|
|
|
+ console.log('开始选装')
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -82,4 +96,57 @@ export default {
|
|
|
&:hover
|
|
|
background-color #00a1d6
|
|
|
color #fff
|
|
|
+ &.customize
|
|
|
+ padding 8px 0
|
|
|
+ border-top 1px solid #e5e9ef
|
|
|
+ &:hover
|
|
|
+ background-color #00a1d6
|
|
|
+ color #fff
|
|
|
+ .n-icon-sort
|
|
|
+ background-position -727px -151px
|
|
|
+ .n-icon-sort
|
|
|
+ display block
|
|
|
+ margin 0 auto 4px
|
|
|
+ background url(../../assets/images/icons.png) -663px -151px no-repeat
|
|
|
+ height 18px
|
|
|
+ width 18px
|
|
|
+ &.gotop
|
|
|
+ border 0
|
|
|
+ position relative
|
|
|
+ z-index 50
|
|
|
+ .s-line
|
|
|
+ border-left 1px solid #ddd
|
|
|
+ border-right 1px solid #ddd
|
|
|
+ height 9px
|
|
|
+ width 30px
|
|
|
+ margin 0 auto
|
|
|
+ .btn_gotop
|
|
|
+ height 48px
|
|
|
+ background #f6f9fa url(../../assets/images/icons.png) -648px -72px no-repeat
|
|
|
+ border 1px solid #e5e9ef
|
|
|
+ overflow hidden
|
|
|
+ border-radius 4px
|
|
|
+ &:hover
|
|
|
+ background-color #00a1d6
|
|
|
+ background-position -714px -72px
|
|
|
+ border-color #00a1d6
|
|
|
+ &.n-i-mlink
|
|
|
+ border 0
|
|
|
+ position relative
|
|
|
+ z-index 50
|
|
|
+ .mlink-dl-msg
|
|
|
+ background url(//i0.hdslb.com/bfs/static/3af67e81274b02ca1693fdb73adbc03c98c3880a.png)
|
|
|
+ width 106px
|
|
|
+ height 44px
|
|
|
+ position absolute
|
|
|
+ left -106px
|
|
|
+ top -23px
|
|
|
+ display none
|
|
|
+ .n-i-mlink-bg
|
|
|
+ display block
|
|
|
+ background-image url("//i0.hdslb.com/bfs/static/e6f2388d454c82004905753802e9cfe709d80d08.png")
|
|
|
+ width 80px
|
|
|
+ height 80px
|
|
|
+ background-position 0 0
|
|
|
+ margin-left -16px
|
|
|
</style>
|
lybenson