no message

.vs/ProjectSettings.json

@@ -1,3 +0,0 @@
-{
-  "CurrentProjectSetting": null
-}

.vs/VSWorkspaceState.json

@@ -1,6 +0,0 @@
-{
-  "ExpandedNodes": [
-    ""
-  ],
-  "PreviewInSolutionExplorer": false
-}

README.md

@@ -1,17 +1,69 @@
-# How to run
+## 前言
 
-#####前端运行
+> 为什么是哔哩哔哩(俗称B站)呢？其一是因为我是B站的重度使用者，每周基本上都会在B站上看看火影忍者、暴走大事件等。另外一个原因呢，就是B站首页很美观大方，而且处处充满了细节。所以对于实践确实是一个不错的项目。目前的技术栈主要的采用的是前端Vue2+后端Koa2的前后端分离的方式，语法全部使用ES6/7。关于数据也来自真实的数据接口。
 
-```bash
+## 技术栈
+
+前端：vue2 + vuex + webpack + ES6/7 + stylus
+
+后端：koa2
+
+## 项目运行
+
+#### 源码地址:  [https://github.com/lybenson/bilibili-vue](https://github.com/lybenson/bilibili-vue) 
+
+#### 如何运行
+
+前端运行：
+
+```javascript
 cd bilibili-vue
 npm install
 npm run dev
 ```
 
-######后端运行
-```bash
+后端运行
+
+```javascript
 cd bilibili-vue/bilibili-api
 npm install
 npm run dev
 ```
 
+为了确保运行正确，请先运行后端服务。访问 http://localhost:8080
+
+#### 相关截图:
+
+首页：
+
+![QQ截图20170423210104](C:\Users\Benson\Desktop\QQ截图20170423210104.png)
+
+轮播：
+
+![QQ截图20170423213449](C:\Users\Benson\Desktop\QQ截图20170423213449.png)
+
+直播：
+
+![QQ截图20170423210140](C:\Users\Benson\Desktop\QQ截图20170423210140.png)
+
+![QQ截图20170423210218](C:\Users\Benson\Desktop\QQ截图20170423210218.png)
+
+排行：
+
+![QQ截图20170423210248](C:\Users\Benson\Desktop\QQ截图20170423210248.png)
+
+游戏：
+
+![QQ截图20170423213519](C:\Users\Benson\Desktop\QQ截图20170423213519.png)
+
+拖拽排序与滚动效果：
+
+![QQ截图20170423210330](C:\Users\Benson\Desktop\QQ截图20170423210330.png)
+
+
+
+## 总结
+
+目前主要功能都已经完成的差不多。主要还差一个预览视频与弹幕的功能尚未完成，希望能把B站首页写完，持续更新中。
+
+另外，如果这个项目对你有用，也欢迎star。

bilibili-api/app/routes/rank.js

@@ -5,20 +5,26 @@ import { ranking3, ranking7, randking, rankbase } from './urlConfig'
 const router = Router()
 
 // 排行
+// 三日排行
 router.get('/ranking3', async (ctx, next) => {
   let response = await axios.get(ranking3)
   ctx.body = response.data
 })
+
+// 一周排行
 router.get('/ranking7', async (ctx, next) => {
   let response = await axios.get(ranking7)
+  console.log('七日排行')
   ctx.body = response.data
 })
+
+// 昨日排行
 router.get('/randking', async (ctx, next) => {
   let response = await axios.get(randking)
   ctx.body = response.data
 })
 
-// contentrank -三日排行
+// contentrank -分类下三日排行
 router.post('/contentrank', async (ctx, next) => {
 	const body = ctx.request.body
   let categoryId = body.categoryId
@@ -28,7 +34,7 @@ router.post('/contentrank', async (ctx, next) => {
   ctx.body = response.data
 })
 
-// contentrank -一周排行
+// contentrank -分类下一周排行
 router.post('/contentrankweek', async (ctx, next) => {
   const body = ctx.request.body
   let categoryId = body.categoryId

src/App.vue

@@ -25,32 +25,9 @@ export default {
   },
   mounted() {
     this.$store.dispatch('getContentRows')
-    console.log(JSON.stringify(this.items) + '=======')
   },
   data() {
     return {
-      items: [{
-        name: '动画',
-        b_id: 'b_douga'
-      }, {
-        name: '游戏',
-        b_id: 'b_game'
-      }, {
-        name: '音乐',
-        b_id: 'b_music'
-      }, {
-        name: '舞蹈',
-        b_id: 'b_dance'
-      }, {
-        name: '科技',
-        b_id: 'b_technology'
-      }, {
-        name: '生活',
-        b_id: 'b_life'
-      }, {
-        name: '电影',
-        b_id: 'b_movie'
-      }],
       showMask: false
     }
   },
@@ -79,7 +56,6 @@ export default {
   },
   methods: {
     isShowMask() {
-      console.log('显示阴影')
       this.showMask = !this.showMask
     }
   }

src/components/content/BContent.vue

@@ -34,24 +34,11 @@ import BContentRow from 'components/contentRow/BContentRow'
 
 import { mapGetters } from 'vuex'
 export default {
-	computed: {
-		...mapGetters([
-			'requesting',
-			'error',
-			'rows',
-			'sortKeys',
-			'sortIds'
-		])
-	},
 	props: {
 		rows: {
 			type: Array
 		}
 	},
-	// mounted() {
-	// 	this.$store.dispatch('getContentRows')
-	// 	console.log(JSON.stringify(this.items) + '=======')
-	// },
 	components: {
 		Banner,
 		BContentTop,

src/components/contentTop/BContentTop.vue

@@ -14,7 +14,7 @@ import { mapGetters } from 'vuex'
 export default {
 	data() {
 		return {
-			now: 0,
+			now: 0, // 0三日  1 
 			pre: '',
 			next: ''
 		}

src/components/contentTop/BContentTopItem.vue

@@ -71,6 +71,7 @@ export default {
 				width 100%
 				bottom 0
 				left 0px
+				z-index 1
 				background linear-gradient(transparent,rgba(0,0,0,0.1) 20%,rgba(0,0,0,0.2) 35%,rgba(0,0,0,0.6) 65%,rgba(0,0,0,0.9))
 				border-radius 0 0 4px 4px
 				p

src/components/nav/BNavSide.vue

@@ -184,8 +184,10 @@ export default {
 			this.scrollTop = window.pageYOffset || (document.documentElement.scrollTop + document.body.scrollTop)
 			if (this.scrollTop >= 300) {
 				this.$refs.navSide.style.top = "0px"
+				this.init()
 			} else {
 				this.$refs.navSide.style.top = "240px"
+				this.init()
 			}
 			console.log('距离顶部' + this.scrollTop)
 			for (let i = 0; i < this.data.length; i++) {
@@ -236,6 +238,7 @@ export default {
 		top 240px
 		left auto
 		right 0px
+		z-index 1000
 		&.customizing
 			z-index 10010
 			.n-i.sotrable