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

some info

lybenson 8 years ago
parent
03556da7d6
commit
9e31db3195
7 changed files with 238 additions and 89 deletions
Split View Show Diff Stats
  1. 4 1
      index.html
  2. 13 11
      package.json
  3. 8 13
      src/App.vue
  4. 0 53
      src/components/Hello.vue
  5. 0 11
      src/components/common/Header.vue
  6. 123 0
      src/components/common/TopContainer.vue
  7. 90 0
      static/css/reset.css

+ 4 - 1
index.html
View File 

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

+ 13 - 11
package.json
View File 

@@ -18,12 +18,17 @@
 
     "autoprefixer": "^6.4.0",
 
     "babel-core": "^6.0.0",
 
     "babel-loader": "^6.0.0",
 
+    "babel-plugin-istanbul": "^3.0.0",
 
     "babel-plugin-transform-runtime": "^6.0.0",
 
     "babel-preset-es2015": "^6.0.0",
 
     "babel-preset-stage-2": "^6.0.0",
 
     "babel-register": "^6.0.0",
 
+    "chai": "^3.5.0",
 
     "chalk": "^1.1.3",
 
+    "chromedriver": "^2.21.2",
 
     "connect-history-api-fallback": "^1.1.0",
 
+    "cross-env": "^3.1.3",
 
+    "cross-spawn": "^4.0.2",
 
     "css-loader": "^0.25.0",
 
     "eventsource-polyfill": "^0.9.6",
 
     "express": "^4.13.3",
 
@@ -33,8 +38,8 @@
 
     "function-bind": "^1.0.2",
 
     "html-webpack-plugin": "^2.8.1",
 
     "http-proxy-middleware": "^0.17.2",
 
+    "inject-loader": "^2.0.1",
 
     "json-loader": "^0.5.4",
 
-    "cross-env": "^3.1.3",
 
     "karma": "^1.3.0",
 
     "karma-coverage": "^1.1.1",
 
     "karma-mocha": "^1.2.0",
 
@@ -45,20 +50,17 @@
 
     "karma-webpack": "^1.7.0",
 
     "lolex": "^1.4.0",
 
     "mocha": "^3.1.0",
 
-    "chai": "^3.5.0",
 
-    "sinon": "^1.17.3",
 
-    "sinon-chai": "^2.8.0",
 
-    "inject-loader": "^2.0.1",
 
-    "babel-plugin-istanbul": "^3.0.0",
 
-    "phantomjs-prebuilt": "^2.1.3",
 
-    "chromedriver": "^2.21.2",
 
-    "cross-spawn": "^4.0.2",
 
     "nightwatch": "^0.9.8",
 
-    "selenium-server": "2.53.1",
 
-    "semver": "^5.3.0",
 
     "opn": "^4.0.2",
 
     "ora": "^0.3.0",
 
+    "phantomjs-prebuilt": "^2.1.3",
 
+    "selenium-server": "2.53.1",
 
+    "semver": "^5.3.0",
 
     "shelljs": "^0.7.4",
 
+    "sinon": "^1.17.3",
 
+    "sinon-chai": "^2.8.0",
 
+    "stylus": "^0.54.5",
 
+    "stylus-loader": "^2.4.0",
 
     "url-loader": "^0.5.7",
 
     "vue-loader": "^10.0.0",
 
     "vue-style-loader": "^1.0.0",

+ 8 - 13
src/App.vue
View File 

@@ -1,28 +1,23 @@
 
 <template>
 
   <div id="app">
 
-    <img src="./assets/logo.png">
 
-    <hello></hello>
 
+    <TopContainer></TopContainer>
 
   </div>
 
 </template>
 
 
 <script>
 
-import Hello from './components/Hello'
 
+import TopContainer from 'components/common/TopContainer.vue'
 
 
 export default {
 
   name: 'app',
 
   components: {
 
-    Hello
 
+    TopContainer
 
   }
 
 }
 
 </script>
 
 
-<style>
 
-#app {
 
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
 
-  -webkit-font-smoothing: antialiased;
 
-  -moz-osx-font-smoothing: grayscale;
 
-  text-align: center;
 
-  color: #2c3e50;
 
-  margin-top: 60px;
 
-}
 
+<style lang="stylus">
 
+  #app 
+    font-family "Microsoft YaHei",Arial,Helvetica,sans-serifsans-serif
 
+    -webkit-font-smoothing antialiased
 
+    -moz-osx-font-smoothing grayscale
 
 </style>

+ 0 - 53
src/components/Hello.vue
View File 

@@ -1,53 +0,0 @@
 
-<template>
 
-  <div class="hello">
 
-    <h1>{{ msg }}</h1>
 
-    <h2>Essential Links</h2>
 
-    <ul>
 
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
 
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
 
-      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
 
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
 
-      <br>
 
-      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
 
-    </ul>
 
-    <h2>Ecosystem</h2>
 
-    <ul>
 
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
 
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
 
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
 
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
 
-    </ul>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-export default {
 
-  name: 'hello',
 
-  data () {
 
-    return {
 
-      msg: 'Welcome to Your Vue.js App'
 
-    }
 
-  }
 
-}
 
-</script>
 
-
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 
-<style scoped>
 
-h1, h2 {
 
-  font-weight: normal;
 
-}
 
-
 
-ul {
 
-  list-style-type: none;
 
-  padding: 0;
 
-}
 
-
 
-li {
 
-  display: inline-block;
 
-  margin: 0 10px;
 
-}
 
-
 
-a {
 
-  color: #42b983;
 
-}
 
-</style>

+ 0 - 11
src/components/common/Header.vue
View File 

@@ -1,11 +0,0 @@
 
-<template>
 
-	
-</template>
 
-
 
-<script>
 
-	
-</script>
 
-
 
-<script>
 
-	
-</script>

+ 123 - 0
src/components/common/TopContainer.vue
View File 

@@ -0,0 +1,123 @@
 
+<template>
 
+	<div class="top-container">
 
+		<div class="top">
 
+			<div class="header-mask-wrap">
 
+				<div class="header-mask-bg" style="background-image: url(&quot;//i0.hdslb.com/bfs/archive/d018a3742c508cc379472735bf7d124cc7ae9f13.jpg&quot;);"></div>
 
+				<div class="header-mask"></div>
 
+			</div>
 
+			<div class="header">
 
+				<div class="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="http://h.bilibili.com/" title="画友">画友</a>
 
+						</li>
 
+						<li></li>
 
+						<li></li>
 
+						<li></li>
 
+						<li></li>
 
+					</ul>
 
+				</div>
 
+				<div class="uns-box">
 
+					
+				</div>
 
+			</div>
 
+		</div>
 
+	</div>
 
+</template>
 
+
 
+<script>
 
+
 
+export default {
 
+
 
+}
 
+</script>
 
+
 
+<style lang="stylus">
 
+	.top-container
 
+		color #222
 
+		position reltive
 
+		z-index 10000
 
+		.top
 
+			height 42px
 
+			background #fff
 
+			box-shadow rgba(0,0,0,0.1) 0 1px 2px
 
+			top 0
 
+			left 0
 
+			width 100%
 
+			position relative
 
+			z-index 10000
 
+			color #222
 
+			background-color transparent
 
+			.header-mask-wrap
 
+				position absolute
 
+				top 0
 
+				left 0
 
+				width 100%
 
+				height 100%
 
+				overflow hidden
 
+				background-color #fff
 
+				.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
 
+				.header-mask
 
+					background-color rgba(0,0,0,0.4)
 
+					position absolute
 
+					top 0
 
+					left 0
 
+					width 100%
 
+					height 100%
 
+					background-color rgba(255,255,255,0.4)
 
+					z-index 100
 
+			.header
 
+				margin 0 auto
 
+				position relative
 
+				text-align left
 
+				z-index 10000
 
+				width 980px
 
+				zoom 1
 
+				.top—nav
 
+					float left
 
+					height 42px
 
+					font-size 12px
 
+					ul
 
+						zoom 1
 
+						margin 0
 
+						padding 0
 
+						display block
 
+						list-style-type none
 
+						-webkit-margin-before 1em
 
+						-webkit-margin-after 1em
 
+						-webkit-margin-start 0px
 
+						-webkit-margin-end 0px
 
+						-webkit-padding-start 40px
 
+						li
 
+							display list-item
 
+							margin 0
 
+							padding 0
 
+							list-style-type none
 
+						.home
 
+							background-position -845px -74px
 
+							margin-left -10px
 
+							background-repeat no-repeat
 
+							.i-link
 
+								display block
 
+								transition .15s background-color
 
+								color #fff
 
+								font-size 12px
 
+								width 50px
 
+								height 42px
 
+								padding 0 0 0 20px
 
+</style>

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

@@ -0,0 +1,90 @@
 
+/**
 
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 
+ * http://cssreset.com
 
+ */
 
+html, body, div, span, applet, object, iframe,
 
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 
+a, abbr, acronym, address, big, cite, code,
 
+del, dfn, em, img, ins, kbd, q, s, samp,
 
+small, strike, strong, sub, sup, tt, var,
 
+b, u, i, center,
 
+dl, dt, dd, ol, ul, li,
 
+fieldset, form, label, legend,
 
+table, caption, tbody, tfoot, thead, tr, th, td,
 
+article, aside, canvas, details, embed,
 
+figure, figcaption, footer, header,
 
+menu, nav, output, ruby, section, summary,
 
+time, mark, audio, video, input {
 
+    margin: 0;
 
+    padding: 0;
 
+    border: 0;
 
+    font-size: 100%;
 
+    font-weight: normal;
 
+    vertical-align: baseline;
 
+}
 
+
 
+/* HTML5 display-role reset for older browsers */
 
+article, aside, details, figcaption, figure,
 
+footer, header, menu, nav, section {
 
+    display: block;
 
+}
 
+
 
+body {
 
+    line-height: 1;
 
+}
 
+
 
+blockquote, q {
 
+    quotes: none;
 
+}
 
+
 
+blockquote:before, blockquote:after,
 
+q:before, q:after {
 
+    content: none;
 
+}
 
+
 
+table {
 
+    border-collapse: collapse;
 
+    border-spacing: 0;
 
+}
 
+
 
+/* custom */
 
+a {
 
+    color: #7e8c8d;
 
+    text-decoration: none;
 
+    -webkit-backface-visibility: hidden;
 
+}
 
+
 
+li {
 
+    list-style: none;
 
+}
 
+
 
+::-webkit-scrollbar {
 
+    width: 5px;
 
+    height: 5px;
 
+}
 
+
 
+::-webkit-scrollbar-track-piece {
 
+    background-color: rgba(0, 0, 0, 0.2);
 
+    -webkit-border-radius: 6px;
 
+}
 
+
 
+::-webkit-scrollbar-thumb:vertical {
 
+    height: 5px;
 
+    background-color: rgba(125, 125, 125, 0.7);
 
+    -webkit-border-radius: 6px;
 
+}
 
+
 
+::-webkit-scrollbar-thumb:horizontal {
 
+    width: 5px;
 
+    background-color: rgba(125, 125, 125, 0.7);
 
+    -webkit-border-radius: 6px;
 
+}
 
+
 
+html, body {
 
+    width: 100%;
 
+}
 
+
 
+body {
 
+    -webkit-text-size-adjust: none;
 
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
+}