|
|
@@ -1,10 +1,22 @@
|
|
|
<template>
|
|
|
<div class="menu">
|
|
|
<div class="menu-wrapper">
|
|
|
- <ul class="nav-menu" v-for="i in itemNum">
|
|
|
- <BMenuItem :num="i"></BMenuItem>
|
|
|
+ <ul class="nav-menu">
|
|
|
+ <BMenuItem v-for="i in classify" :item="i"></BMenuItem>
|
|
|
</ul>
|
|
|
- <div class="menu-r"></div>
|
|
|
+ <div class="menu-r">
|
|
|
+ <a href="" target="_blank" href="http://search.bilibili.com/all?keyword=%E8%B9%A6%E8%BF%AA" title="蹦迪" class="random-p">
|
|
|
+ <div class="random-p-movie">
|
|
|
+ <img src="//i2.hdslb.com/bfs/active/84f323e3a77a6eafee656f832847603751f3857d.gif" alt="蹦迪">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ <a id="mobile_p" class="mobile-p" href="//app.bilibili.com" target="_blank" @mouseover="showMobileLink=true" @mouseout="showMobileLink=false">
|
|
|
+ <div class="mobile-p-box" v-show="showMobileLink">
|
|
|
+ <div class="mobile-p-qrcode">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -14,7 +26,72 @@ import BMenuItem from 'components/common/BMenuItem'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- itemNum: [1, 3, 4, 5, 5, 6]
|
|
|
+ showMobileLink: false,
|
|
|
+ classify: [
|
|
|
+ {
|
|
|
+ title: '首页',
|
|
|
+ num: 0,
|
|
|
+ home: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '动画',
|
|
|
+ num: 468
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '番剧',
|
|
|
+ num: 61
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '音乐',
|
|
|
+ num: 749
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '舞蹈',
|
|
|
+ num: 108
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '游戏',
|
|
|
+ num: 999
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '科技',
|
|
|
+ num: 482
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '生活',
|
|
|
+ num: 988
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '鬼畜',
|
|
|
+ num: 64
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '时尚',
|
|
|
+ num: 177
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告',
|
|
|
+ num: 43
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '娱乐',
|
|
|
+ num: 839
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '影视',
|
|
|
+ num: 702
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广场',
|
|
|
+ num: 0,
|
|
|
+ sequare: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '直播',
|
|
|
+ num: 0,
|
|
|
+ live: true
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
@@ -29,7 +106,7 @@ export default {
|
|
|
background #fff
|
|
|
.menu-wrapper
|
|
|
position relative
|
|
|
- width 1160px
|
|
|
+ width 980px
|
|
|
margin 0 auto
|
|
|
padding 6px 0
|
|
|
z-index 100
|
|
|
@@ -44,4 +121,42 @@ export default {
|
|
|
top 0px
|
|
|
height 50px
|
|
|
padding 6px 0
|
|
|
+ .random-p
|
|
|
+ width 80px
|
|
|
+ height 44px
|
|
|
+ margin 3px 12px
|
|
|
+ display inline-block
|
|
|
+ vertical-align top
|
|
|
+ overflow hidden
|
|
|
+ img
|
|
|
+ display block
|
|
|
+ max-width 100%
|
|
|
+ height 100%
|
|
|
+ margin 0 auto
|
|
|
+ .mobile-p
|
|
|
+ display inline-block
|
|
|
+ vertical-align top
|
|
|
+ margin 3px 0
|
|
|
+ width 58px
|
|
|
+ height 44px
|
|
|
+ background url(../../assets/images/app-link.png) center center no-repeat
|
|
|
+ position relative
|
|
|
+ overflow visible
|
|
|
+ .mobile-p-box
|
|
|
+ position absolute
|
|
|
+ overflow hidden
|
|
|
+ top 44px
|
|
|
+ width 259px
|
|
|
+ height 174px
|
|
|
+ right -20px
|
|
|
+ background url(../../assets/images/app-box.png) center center no-repeat
|
|
|
+ transition .2s
|
|
|
+ transition-property opacity
|
|
|
+ .mobile-p-qrcode
|
|
|
+ position absolute
|
|
|
+ top 30px
|
|
|
+ width 100px
|
|
|
+ height 100px
|
|
|
+ left 80px
|
|
|
+ background url(../../assets/images/app-qrcode.png) center center no-repeat
|
|
|
</style>
|
lybenson
