Home Explore Help
Register Sign In
root
/
bilibili-vue
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

the part of left top component was completing

lybenson 8 years ago
parent
45f4455480
commit
2abb311a58
6 changed files with 192 additions and 11 deletions
Unified View Show Diff Stats
  1. 1 2
      index.html
  2. 8 0
      src/App.vue
  3. BIN
      src/assets/images/icons.png
  4. 3 3
      src/components/common/Header.vue
  5. 179 6
      src/components/common/TopContainer.vue
  6. 1 0
      static/css/reset.css

+ 1 - 2
index.html
View File 

@@ -4,11 +4,10 @@
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="keywords" content="B站,弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,游戏,游戏解说,ACG,galgame,动画,番组,新番,初音,洛天依,vocaloid">
 
     <meta name="keywords" content="B站,弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,游戏,游戏解说,ACG,galgame,动画,番组,新番,初音,洛天依,vocaloid">
 
     <meta name="description" content="bilibili是国内知名的视频弹幕网站，这里有最及时的动漫新番，最棒的ACG氛围，最有创意的Up主。大家可以在这里找到许多欢乐。">
 
     <meta name="description" content="bilibili是国内知名的视频弹幕网站，这里有最及时的动漫新番，最棒的ACG氛围，最有创意的Up主。大家可以在这里找到许多欢乐。">
 
-    <title>哔哩哔哩弹幕视频网 - ( ゜- ゜)つロ  乾杯~  - bilibili 2</title>
 
+    <title>哔哩哔哩弹幕视频网 - ( ゜- ゜)つロ  乾杯~  - bilibili</title>
 
     <link rel="stylesheet" type="text/css" href="static/css/reset.css">
 
     <link rel="stylesheet" type="text/css" href="static/css/reset.css">
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>
 
-    <!-- built files will be auto injected -->
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 8 - 0
src/App.vue
View File 

@@ -20,4 +20,12 @@ export default {
 
     font-family "Microsoft YaHei",Arial,Helvetica,sans-serifsans-serif
 
     font-family "Microsoft YaHei",Arial,Helvetica,sans-serifsans-serif
 
     -webkit-font-smoothing antialiased
 
     -webkit-font-smoothing antialiased
 
     -moz-osx-font-smoothing grayscale
 
     -moz-osx-font-smoothing grayscale
 
+    font-size 12px
 
+    margin 0
 
+    padding 0
 
+    background #fff
 
+    color #222
 
+    min-width 990px
 
+    tap-highlight-color transparent
 
+    -webkit-tap-highlight-color transparent
 
 </style>
 
 </style>

BIN
src/assets/images/icons.png
View File


+ 3 - 3
src/components/common/Header.vue
View File 

@@ -1,11 +1,11 @@
 
 <template>
 
 <template>
 
-    <div class="header">
 
-    </div>
 
+  <div class="header">
 
+  </div>
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
 export default {
 
 export default {
 
-  
+
 
 }
 
 }
 
 </script>
 
 </script>

+ 179 - 6
src/components/common/TopContainer.vue
View File 

@@ -1,17 +1,190 @@
 
 <template>
 
 <template>
 
-    <div class="top-container">
 
+  <div class="top_container">
 
+    <div class="z_top b-header-blur b-header-blur-black">
 
+      <div class="b-header-mask-wrp">
 
+        <div class="b-header-mask-bg" style="background-image: url('//i0.hdslb.com/bfs/archive/4b9c7031618e743f3ed3e13f74ebc0130c55d981.jpg');"></div>
 
+        <div class="b-header-mask"></div>
 
+      </div>
 
+      <div class="z_header">
 
+        <div class="z_top_nav">
 
+          <ul>
 
+            <li class="home">
 
+              <a class="i-link" href="//www.bilibili.com/">
 
+                <span>主站</span>
 
+              </a>
 
+            </li>
 
+            <li class="hbili">
 
+              <a class="i-link" href="//h.bilibili.com/" title="画友">画友</a>
 
+            </li>
 
+            <li class="b-gc" hasframe="true">
 
+              <a class="i-link" href="//game.bilibili.com/" title="游戏中心">游戏中心</a>
 
+            </li>
 
+            <li class="live" hasframe="true">
 
+              <a class="i-link" target="_blank" href="//live.bilibili.com/" title="直播">直播</a>
 
+            </li>
 
+            <li class="b-zb">
 
+              <a class="i-link" target="_blank" href="//zb.bilibili.com/" title="周边">周边</a>
 
+            </li>
 
+            <li class="planet">
 
+              <a class="i-link" target="_blank" href="//planet2017.bilibili.com/" title="拜年祭2017">拜年祭
 
+              <em class="new"></em>
 
+              </a>
 
+            </li>
 
+            <li></li>
 
+          </ul>
 
+        </div>
 
+        <div class="uns_box">
 
+          <ul class="menu">
 
+            <li id="i_menu_login_reg" guest="yes" class="u-i" style="display: list-item">
 
+              <a id="i_menu_login_btn" class="i-link login" href="https://account.bilibili.com/login">
 
+                <span>登录</span>
 
+              </a>
 
+              <i class="s-line"></i>
 
+              <a id="i_menu_register_btn" class="i-link reg" href="https://www.bilibili.com/register">
 
+                <span>注册</span>
 
+              </a>
 
+            </li>
 
+            <li class="u-i b-post"></li>
 
+          </ul>
 
+        </div>
 
+      </div>
 
     </div>
 
     </div>
 
+  </div>
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
 export default {
 
 export default {
 
-  
+
 
 }
 
 }
 
 </script>
 
 </script>
 
 
 
 <style lang="stylus">
 
 <style lang="stylus">
 
-    .top-container
 
-        background-color red
 
-        width 200px
 
-        height 200px
 
+  .top_container
 
+    color #222
 
+    position relative
 
+    z-index 10000
 
+    .z_top
 
+      height 42px
 
+      background #fff
 
+      box-shadow rgba(0, 0, 0, 0.1) 0 1px 2px
 
+      top 0px
 
+      left 0px
 
+      width 100%
 
+      position relative
 
+      z-index 10000
 
+      font-family "Microsoft YaHei",Arial,Helvetica,sans-serifsans-serif
 
+      color #222
 
+      .i-link
 
+        padding 0 14px
 
+        transition .15s background-color
 
+        font-size 13px
 
+      a
 
+        color #222
 
+    .b-header-blur
 
+      background-color transparent
 
+      .b-header-mask-wrp
 
+        position absolute
 
+        top 0px
 
+        left 0px
 
+        width 100%
 
+        height 100%
 
+        overflow hidden
 
+        background-color #fff
 
+        .b-header-mask-bg
 
+          position absolute
 
+          height 62px
 
+          padding 0 20px
 
+          top -10px
 
+          left -20px
 
+          width 100%
 
+          filter blur(5px)
 
+          z-index 50
 
+          background-position center 0!important
 
+          background-repeat no-repeat
 
+        .b-header-mask
 
+          position absolute
 
+          top 0px
 
+          left 0px
 
+          width 100%
 
+          height 100%
 
+          z-index 100
 
+          background-color rgba(255, 255, 255, 0.4)
 
+      .z_header
 
+        display block
 
+        margin 0 auto
 
+        position relative
 
+        text-align left
 
+        z-index 10000
 
+        width 980px
 
+        zoom 1
 
+        &:after
 
+          content ''
 
+          display block
 
+          visibility hidden
 
+          height 0
 
+          clear both
 
+          font-size 0
 
+        .z_top_nav
 
+          float left
 
+          height 42px
 
+          font-size 12px
 
+          li
 
+            .new
 
+              position absolute
 
+              right -8px
 
+              color #f25d8e
 
+              top 13px
 
+              background url(../../assets/images/icons.png) no-repeat
 
+              width 22px
 
+              height 10px
 
+              background-position -851px -412px
 
+          ul
 
+            zoom 1
 
+            &:after
 
+              content ''
 
+              display block
 
+              visibility hidden
 
+              height 0
 
+              clear both
 
+              font-size 0
 
+            li
 
+              float left
 
+              text-align center
 
+              line-height 42px
 
+              position relative
 
+              list-style-stype: none
 
+              a.i-link
 
+                height 100%
 
+                display block
 
+                color #222
 
+              &.home
 
+                margin-left -10px
 
+                background-image url(../../assets/images/icons.png)
 
+                background-repeat no-repeat
 
+                background-position -910px -74px
 
+                .i-link
 
+                  width 50px
 
+                  height 42px
 
+                  padding 0 0 0 20px
 
+              &.hbili
 
+                position relative
 
+              &.live
 
+                position relative
 
+        .uns_box
 
+          float right
 
+          font-size 12px
 
+          li[guest]
 
+            display none
 
+            .u-i
 
+              float left
 
+              text-align center
 
+              height 42px
 
+              line-height 42px
 
+              position relative
 
+          ul
 
+            .menu
 
+              float left
 
+              position relative
 
+
 
+
 
 </style>
 
 </style>

+ 1 - 0
static/css/reset.css
View File 

@@ -52,6 +52,7 @@ a {
 
     color: #7e8c8d;
 
     color: #7e8c8d;
 
     text-decoration: none;
 
     text-decoration: none;
 
     -webkit-backface-visibility: hidden;
 
     -webkit-backface-visibility: hidden;
 
+    cursor: pointer;
 
 }
 
 }
 
 
 
 li {
 
 li {