|
|
@@ -1,6 +1,12 @@
|
|
|
<template>
|
|
|
<div class="search">
|
|
|
-
|
|
|
+ <form action="//search.bilibili.com/all" id="searchform">
|
|
|
+ <input name="keyword" type="text" class="search-keyword" id="search-keyword" autocomplete="off" accesskey="s" x-webkit-speech="" x-webkit-grammar="builtin:translate" placeholder="这样的历史剧才靠谱！" data-recommend="av8509845">
|
|
|
+ <button type="submit" class="search-submit"></button>
|
|
|
+ </form>
|
|
|
+ <a class="link-ranking" href="//www.bilibili.com/ranking" target="_blank">
|
|
|
+ <span>排行榜</span>
|
|
|
+ </a>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -11,10 +17,58 @@
|
|
|
|
|
|
<style lang="stylus">
|
|
|
.search
|
|
|
- width 100px
|
|
|
+ z-index 100
|
|
|
+ width 268px
|
|
|
height 32px
|
|
|
background red
|
|
|
position absolute
|
|
|
top calc(170px - (56px - 32px) - 32px)
|
|
|
- right 0px
|
|
|
+ right 0
|
|
|
+ border-radius 6px
|
|
|
+ background-color rgba(0, 0, 0, 0.12)
|
|
|
+ padding 2px 2px 2px 7px
|
|
|
+ #searchform
|
|
|
+ background-color rgba(255, 255, 255, 0.88)
|
|
|
+ display block
|
|
|
+ height 32px
|
|
|
+ border-radius 4px
|
|
|
+ transition .2s background-color
|
|
|
+ .search-keyword
|
|
|
+ float right
|
|
|
+ width 200px
|
|
|
+ color #222
|
|
|
+ font-size 12px
|
|
|
+ overflow hidden
|
|
|
+ height 32px
|
|
|
+ line-height 32px
|
|
|
+ padding 0 12px
|
|
|
+ border 0
|
|
|
+ box-shadow none
|
|
|
+ background-color transparent
|
|
|
+ .search-submit
|
|
|
+ display block
|
|
|
+ position absolute
|
|
|
+ right 0
|
|
|
+ width 48px
|
|
|
+ cursor pointer
|
|
|
+ height 32px
|
|
|
+ background url(../../assets/images/icons.png) -653px -720px
|
|
|
+ margin 0
|
|
|
+ padding 0
|
|
|
+ border 0
|
|
|
+ .link-ranking
|
|
|
+ position absolute
|
|
|
+ left 2px
|
|
|
+ top 2px
|
|
|
+ height 32px
|
|
|
+ line-height 32px
|
|
|
+ background-color rgba(255, 255, 255, 0.8)
|
|
|
+ border-radius 4px
|
|
|
+ width 68px
|
|
|
+ transition .2s background-color
|
|
|
+ span
|
|
|
+ padding-left 26px
|
|
|
+ color #f25d8e
|
|
|
+ display inline-block
|
|
|
+ background url(../../assets/images/icons.png) -659px -655px no-repeat
|
|
|
</style>
|
lybenson